@font-face{font-family:"Switzer";src:url(fonts/switzer-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url(fonts/switzer-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* studio ver — v6. 기준: dmcg.co의 깔끔한 세련미
   흰 바탕, 화면 네 모서리에 작은 글자, 가운데에 작업 하나.
   이미지 위에 글자 없음. 이미지는 13인치 맥북 한 화면 안. */
:root{
  --bg:#FFFFFF; --ink:#000000; --mute:#8C8C8C; --soft:#F2F2F2;
  --edge:clamp(16px,2.2vw,32px);
  --f:"Switzer",Pretendard,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink)}
body{font:500 13px/1.35 var(--f);-webkit-font-smoothing:antialiased;word-break:keep-all;letter-spacing:.005em}
a{color:inherit;text-decoration:none}
a:hover{color:var(--mute)}
a:focus-visible,button:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
img{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mute{color:var(--mute)}

/* 네 모서리 */
.c{position:fixed;z-index:10;padding:var(--edge);max-width:44vw}
.tl{top:0;left:0;display:flex;gap:22px}
.tc{top:0;left:50%;transform:translateX(-50%);text-align:center;max-width:none}
.tr{top:0;right:0;display:flex;gap:22px}
.bl{bottom:0;left:0}
.br{bottom:0;right:0;text-align:right}
.bc{bottom:0;left:50%;transform:translateX(-50%);text-align:center;max-width:none}
.tr a.on{color:var(--mute)}
.fade{position:fixed;left:0;right:0;bottom:0;height:92px;z-index:5;pointer-events:none;
  background:linear-gradient(to top,#fff 38%,rgba(255,255,255,0));backdrop-filter:blur(3px);-webkit-mask:linear-gradient(to top,#000 40%,transparent)}
.pre{white-space:pre-line}

/* 홈: 한 화면에 브랜드 하나 */
.stack{height:100svh;overflow-y:auto;scroll-snap-type:y mandatory}
.slide{height:84svh;display:grid;place-items:center;scroll-snap-align:center}
.slide:first-child{margin-top:8svh}.slide:last-child{margin-bottom:8svh}
.slide a{display:grid;justify-items:center;gap:12px}
.slide img{max-height:min(54svh,520px);max-width:min(40vw,520px);width:auto;height:auto;object-fit:contain}
.slide .cap{text-align:center}

/* 블엘 개요 */
.ov{min-height:100svh;display:grid;place-items:center;padding:120px var(--edge)}
.ov .in{display:grid;justify-items:center;gap:44px;text-align:center}
.ov .kw{font-size:20px;line-height:1.3;letter-spacing:-.01em}
.ov .l{font-size:13px;color:var(--mute);margin-bottom:8px}
.ov .facts{display:grid;grid-template-columns:auto auto;gap:3px 18px;text-align:left}
.ov .facts dt{color:var(--mute)}
.ov ul{list-style:none}
.seq{display:grid;grid-template-columns:repeat(9,115px);gap:16px;text-align:left}
.seq figure{width:115px;height:154px;background:var(--soft);overflow:hidden}
.seq img{width:100%;height:100%;object-fit:cover}
.seq p{font-size:11px;line-height:1.3;margin-top:6px}
.seq .s{color:var(--mute)}
.seq .soon{color:var(--mute)}

/* 상단 가운데 썸네일 내비 */
.strip{display:flex;gap:6px;align-items:center;justify-content:center;padding:6px 8px;border-radius:10px;background:rgba(242,242,242,.85)}
.strip a,.strip span{width:22px;height:28px;display:block;overflow:hidden;border-radius:2px;background:#e4e4e4;opacity:.45}
.strip a.on{opacity:1;outline:1px solid #000;outline-offset:1px}
.strip a:hover{opacity:1}
.strip img{width:100%;height:100%;object-fit:cover}

/* 캠페인: 가운데 한 장, 양옆은 흐리게 */
.track{height:100svh;display:flex;align-items:center;gap:6vw;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 30vw;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.track img{flex:0 0 auto;max-height:min(62svh,620px);max-width:44vw;width:auto;height:auto;scroll-snap-align:center;opacity:.18;filter:blur(2px);transition:opacity .35s,filter .35s}
.track img.on{opacity:1;filter:none}
.nav{position:fixed;top:0;bottom:0;width:30vw;z-index:4;cursor:w-resize}
.nav.prev{left:0}.nav.next{right:0;cursor:e-resize}
.info{display:none;margin-top:10px;text-align:left;font-weight:400;color:var(--mute)}
.info.open{display:grid;grid-template-columns:auto auto;gap:2px 14px}
.info dd{color:var(--ink)}

/* about */
.ab{min-height:100svh;display:grid;place-items:center;padding:120px var(--edge)}
.ab .in{display:grid;gap:44px;max-width:620px}
.ab h2{font-size:13px;color:var(--mute);font-weight:500;margin-bottom:8px}
.ab p,.ab li{font-size:15px;line-height:1.5;font-weight:400}
.ab ul{list-style:none}
.ab .svc{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ab h3{font-size:15px;font-weight:500}

@media (max-width:760px){
  .c{max-width:none}
  .tc{display:none}
  .bl,.br{max-width:48vw;font-size:11px}
  .slide img{max-width:78vw;max-height:56svh}
  .seq{grid-template-columns:repeat(3,96px)}
  .track{padding:0 12vw;gap:4vw}.track img{max-width:76vw}
  .nav{display:none}
  .ab .svc{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* v7: 첫 화면 — 쿨그레이 1C 위 큰 studio ver, 하단에 포지션 문장 (참고: loveandmoney.com) */
.hero{height:100svh;background:#D9D9D6;display:grid;grid-template-rows:auto 1fr auto;padding:var(--edge);scroll-snap-align:start}
.hero h1 span{display:inline-block}
.hero h1{font-weight:500;line-height:.8;letter-spacing:-.045em;white-space:nowrap;margin-top:-.04em}
.hero .pos{display:grid;grid-template-columns:1fr 1fr;gap:var(--edge);font-size:12px;line-height:1.4;font-weight:500}
.hero .pos p+p{text-align:right}
.hero .down{justify-self:center;align-self:end;font-size:13px;margin-bottom:28px;color:#555}
body.inhero .c,body.inhero .fade{opacity:0;pointer-events:none}
.c,.fade{transition:opacity .4s}
.stack .slide:first-of-type{margin-top:0}
@media (max-width:760px){.hero .pos{grid-template-columns:1fr;font-size:13px}.hero .pos p+p{text-align:left}}

/* v8 */
.ov ul.scope{list-style:none;text-align:center;color:var(--mute)}
/* Service: Visual Standard를 플레이북처럼 (참고: loveandmoney.com Our Playbook) */
.pb{height:calc(var(--n)*100svh)}
.pb .stick{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:34vw 1fr 76px;gap:0 var(--edge);padding:72px var(--edge) 72px}
.pb .ph{position:relative;overflow:hidden;background:var(--soft)}
.pb .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(14px);transform:scale(1.04);transition:opacity .6s,filter .6s,transform .9s}
.pb .ph img.on{opacity:1;filter:none;transform:none}
.pb .tx{display:grid;grid-template-rows:auto 1fr;align-content:stretch}
.pb .lbl{color:var(--mute)}
.pb .step{align-self:end;max-width:30em}
.pb .num{font-size:15px;color:var(--mute)}
.pb .k{font-size:clamp(44px,5vw,76px);line-height:.95;letter-spacing:-.035em;margin:6px 0 18px}
.pb .b{font-size:15px;line-height:1.5;font-weight:400}
.pb .eg{margin-top:14px;color:var(--mute);font-weight:400}
.pb .step>*{transition:opacity .35s,transform .35s}
.pb .step.swap>*{opacity:0;transform:translateY(10px)}
.pb .dots{display:flex;gap:6px;margin-top:22px}
.pb .dots i{width:18px;height:2px;background:#ddd}
.pb .dots i.on{background:#000}
.pb .rail{overflow:hidden;position:relative}
.pb .rail .in{display:grid;gap:8px;will-change:transform}
.pb .rail img{width:76px;height:96px;object-fit:cover}
.lines{display:grid;grid-template-columns:34vw 1fr 1fr;gap:var(--edge);padding:40px var(--edge) 140px}
.lines h3{font-size:20px;font-weight:500;letter-spacing:-.01em;margin-bottom:12px}
.lines ul{list-style:none;font-weight:400;font-size:14px;line-height:1.7}
.lines .nt{margin-top:12px;color:var(--mute);font-weight:400}

/* v9 */
.pb .lnote{color:var(--mute);font-weight:400;font-size:12px;margin-top:4px;max-width:32em}
.pb .step{margin-bottom:2svh}
.lines .ko{color:var(--mute);margin:-6px 0 10px}
.lines .bd{font-weight:400;font-size:14px;line-height:1.6;max-width:30em}

/* v10 */
.lines .it{list-style:none;font-weight:400;font-size:13px;line-height:1.75;margin-top:18px;padding-top:14px;border-top:1px solid #e6e6e6}
.lines .tm{margin-top:14px;font-size:13px}
.lines .cd{color:var(--mute);font-weight:400;font-size:13px}
.tfade{position:fixed;left:0;right:0;top:0;height:60px;z-index:5;pointer-events:none;background:linear-gradient(to bottom,#fff 55%,rgba(255,255,255,0))}

/* v11 */
.pb .stick{grid-template-rows:auto 1fr;row-gap:14px}
.pb .howl{color:var(--ink)}
.pb .tx{display:flex;flex-direction:column;justify-content:flex-end}
.ov ul.scope small{font-size:11px}
.pb .tx .step{align-self:flex-start}

/* v12: 두 서비스의 각 줄 높이를 맞춤 */
.lines{grid-template-rows:auto auto auto auto;row-gap:0}
.lines>p.mute{grid-row:1/6}
.lines .ln{display:grid;grid-row:1/6;grid-template-rows:subgrid;row-gap:0}
.lines .ln h3{margin-bottom:12px}
.lines .it{border-top:0;padding-top:0;margin-top:22px}
.lines .tm{margin-top:18px;font-weight:400}

/* v13: Process/Visual Standard는 글 단 맨 위, 이미지 윗선에 맞춤. 비용 안내는 두 서비스 공통 */
.pb .stick{grid-template-rows:1fr;row-gap:0}
.pb .tx{justify-content:space-between}
.pb .lab .lbl{color:var(--ink)}
.lines{grid-template-rows:auto auto auto auto auto auto}
.lines .sn{grid-column:2/4;grid-row:6;margin-top:28px;color:var(--mute);font-weight:400}
.lines .sn{text-align:right}
.lines .ln h3{margin-bottom:4px}
.lines .sc{font-size:11px;color:var(--mute);margin-bottom:14px;letter-spacing:.02em}
.pb .lab .pl{color:var(--mute)}
.pb .lab .vs{color:var(--ink)}

/* v14: 홈/Work 슬라이드를 한 화면 단위로 — 세 브랜드 이미지가 같은 위치 */
.slide{height:100svh;scroll-snap-align:start}
.slide:first-child,.stack .slide:first-of-type{margin-top:0}
.slide:last-child{margin-bottom:0}
.lines .sn{font-size:11px}
/* 캠페인 페이지: 아래로 내려 보기 */
.vlist{padding:0 var(--edge)}
.vlist .row{display:flex;align-items:center;gap:2vw;padding:16svh 0}
.vlist img{width:auto;height:auto;object-fit:contain}
.vlist .first{height:100svh;padding:0;justify-content:center}
.vlist .first img{max-height:min(66svh,620px);max-width:56vw}
.vlist .c{justify-content:center}
.vlist .c img{max-height:min(66svh,620px);max-width:56vw}
.vlist .p{justify-content:center}
.vlist .p img{max-height:min(56svh,520px);max-width:34vw}
.vlist .r{justify-content:flex-end;padding-right:10vw}
.vlist .l{justify-content:flex-start;padding-left:10vw}
.vlist .r img,.vlist .l img{max-height:min(60svh,560px);max-width:42vw}
.vlist .end{height:70svh;display:grid;place-items:center;align-content:center;gap:28px;text-align:center}
.vlist .end a:first-child{font-size:clamp(22px,2.4vw,34px);letter-spacing:-.02em;line-height:1.2}

/* v15: 이미지 사이 공백 줄이기, 가로 사진 */
.vlist .row{padding:5svh 0}
.vlist .first{padding:0}
.vlist .first.wide img{max-width:64vw}
.vlist .w{justify-content:center}
.vlist .w img{max-height:min(66svh,620px);max-width:64vw}
.vlist .end{height:56svh}
.vlist .r{padding-right:12vw}
.vlist .l{padding-left:12vw}

/* v16: 모바일 (760px 이하). 인스타에서 휴대폰으로 들어오는 사람 기준 */
.mi{display:none}
@media (max-width:760px){
  html,body{overflow-x:clip}
  /* 상단 메뉴 아래로 이미지가 지나갈 때 글자가 겹치지 않게 */
  body:not(.inhero)::before{content:"";position:fixed;top:0;left:0;right:0;height:58px;z-index:9;pointer-events:none;background:linear-gradient(to bottom,#fff 62%,rgba(255,255,255,0))}
  .tl,.tr{gap:16px}
  .fade{height:104px}
  /* 홈·Work */
  .slide img{max-width:calc(100vw - 2*var(--edge));max-height:58svh}
  /* 블엘 개요 */
  .ov{padding:96px var(--edge) 120px}
  .ov .kw{font-size:18px}
  .seq{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:18px 10px}
  .seq figure{width:100%;height:auto;aspect-ratio:3/4}
  /* 캠페인: 한 줄에 한 장, 짝 사진만 나란히 */
  .vlist .row{padding:2.5svh 0}
  .vlist .first{height:100svh;padding:0}
  .vlist .first img,.vlist .first.wide img,.vlist .w img,.vlist .c img{max-width:100%;max-height:68svh}
  .vlist .p{gap:8px}
  .vlist .p img{max-width:calc(50% - 4px);max-height:46svh}
  .vlist .r{padding:2.5svh 0 2.5svh 16vw;justify-content:flex-end}
  .vlist .l{padding:2.5svh 16vw 2.5svh 0;justify-content:flex-start}
  .vlist .r img,.vlist .l img{max-width:100%;max-height:62svh}
  .vlist .end{height:60svh}
  /* 키워드·규칙은 오른쪽 아래 대신 첫 사진 아래에 */
  body.pj .br{display:none}
  .mi{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:4svh 0 6svh;font-size:13px;line-height:1.45}
  .mi dt{color:var(--mute)}
  .bl{max-width:62vw}
  /* Service: 사진 위, 글 아래. 썸네일 줄은 숨김 */
  .pb .stick{grid-template-columns:1fr;grid-template-rows:36svh 1fr;gap:20px 0;padding:62px var(--edge) 92px}
  .pb .rail{display:none}
  .pb .tx{justify-content:flex-start;gap:20px}
  .pb .k{font-size:clamp(36px,11vw,52px);margin:4px 0 12px}
  .pb .b{font-size:14px}
  .pb .dots{margin-top:16px}
  .lines{grid-template-columns:1fr;grid-template-rows:none;row-gap:52px;padding:24px var(--edge) 140px}
  .lines>p.mute,.lines .ln{grid-row:auto}
  .lines .ln{grid-template-rows:none;display:block}
  .lines .ln h3{font-size:22px}
  .lines .sc{font-size:12px;margin:2px 0 14px}
  .lines .sn{grid-column:1;grid-row:auto;text-align:left;margin-top:-20px}
}

/* v17: 캠페인 끝 Next 글자 38% 작게, overview도 작게(누르는 영역은 넉넉히). 영상, 나뉜 작업 이름 줄, 두 장짜리 작업 */
.vlist .end{gap:6px}
.vlist .end a.nx{font-size:clamp(14px,1.49vw,21px);letter-spacing:-.01em;line-height:1.25;padding:10px 16px}
.vlist .end a.ovl{font-size:11px;padding:14px 16px;min-height:44px;display:inline-flex;align-items:center}
.vlist video{width:auto;height:auto;display:block;cursor:pointer;background:var(--soft)}
.vlist .fv{display:flex;flex-direction:column;gap:8px}
.vlist .fv figcaption{display:flex;justify-content:space-between;gap:16px;font-size:11px}
.vlist .fv .snd{font-size:11px;padding:6px 0 6px 12px;margin:-6px 0}
.vlist .first video,.vlist .cn img,.vlist .cn video,.vlist .eq img,.vlist .eq video{max-height:min(66svh,620px);max-width:56vw}
.vlist .first.wide video,.vlist .cn.wide img,.vlist .cn.wide video,.vlist .eq.wide img,.vlist .eq.wide video,.vlist .w video{max-height:min(66svh,620px);max-width:64vw}
.vlist .cn,.vlist .eq{justify-content:center}
.vlist .p video{max-height:min(56svh,520px);max-width:34vw}
.vlist .r video,.vlist .l video{max-height:min(60svh,560px);max-width:42vw}
.vlist .plab{justify-content:center;padding:14svh 0 3svh;font-size:13px}
.vlist .plab:first-child{padding-top:18svh}
@media (max-width:760px){
  .vlist .first video,.vlist .w video,.vlist .cn img,.vlist .cn video,.vlist .eq img,.vlist .eq video,.vlist .r video,.vlist .l video,
  .vlist .cn.wide img,.vlist .cn.wide video,.vlist .eq.wide img,.vlist .eq.wide video,.vlist .first.wide video{max-width:100%;max-height:68svh}
  .vlist .p video{max-width:calc(50% - 4px);max-height:46svh}
  .vlist .end a.nx{font-size:16px}
  .vlist .plab{padding:8svh 0 1svh}
  .vlist .plab:first-child{padding-top:14svh}
}
.info dd{white-space:pre-line}
/* v18: Keywords / Concept / Rule 세 줄 */
.kcr{display:grid;grid-template-columns:auto auto;gap:3px 14px;text-align:left;justify-content:end;max-width:38vw}
.kcr dt{color:var(--mute)}
.kcr dd{text-align:left}
/* v19: 오른쪽·왼쪽 이미지를 가운데 단독(가로) 이미지 라인(64vw)에 맞춤 */
@media (min-width:761px){.vlist .r{padding-right:var(--side,calc(18vw - var(--edge)))}.vlist .l{padding-left:var(--side,calc(18vw - var(--edge)))}}
/* v20: 첫 장은 표지처럼 단독, 다음 이미지 윗부분이 살짝 보이게(B안). 가로 이미지는 같은 너비. 나란히 놓는 줄(g) */
.vlist .first{height:88svh;padding-top:100px}
.vlist .first + .row,.vlist .first + .mi + .row{padding-top:0}
.vlist .w .m,.vlist .first.wide .m,.vlist .cn.wide .m,.vlist .eq.wide .m{width:min(64vw,calc(min(66svh,620px) * 1.5));height:auto;max-width:none;max-height:none}
.vlist .g{justify-content:center;gap:8px}
.vlist .g .m{max-height:min(56svh,520px);max-width:calc((64vw - (var(--n) - 1) * 8px) / var(--n))}
@media (max-width:760px){
  .vlist .first{height:88svh;padding-top:64px}
  .vlist .w .m,.vlist .first.wide .m,.vlist .cn.wide .m,.vlist .eq.wide .m{width:100%}
  .vlist .g{gap:6px}
  .vlist .g .m{max-width:calc((100% - (var(--n) - 1) * 6px) / var(--n));max-height:40svh}
}
/* v21: 짝·나란히 사진은 단독 이미지 라인 양 끝에 맞춰 벌림 (사이 간격이 넓어짐) */
@media (min-width:761px){.vlist .p,.vlist .g{padding-left:var(--side,0);padding-right:var(--side,0);justify-content:space-between;gap:8px}}
/* v22: 첫 장과 다음 장 사이도 다른 간격과 같게, 다음 장은 여전히 살짝 보임 */
@media (min-width:761px){.vlist .first{height:83svh}.vlist .first + .row,.vlist .first + .mi + .row{padding-top:5svh}}
/* v23: 좌우 단독 사진은 짝 사진과 같은 크기 (한 캠페인 안에서 세로 사진 크기 통일) */
@media (min-width:761px){.vlist .r .m,.vlist .l .m{max-height:min(56svh,520px);max-width:34vw}}
/* v24: 한 캠페인 안 세로 사진은 표지·가운데 단독까지 모두 같은 크기 (짝 사진 크기 기준) */
@media (min-width:761px){.vlist .first:not(.wide) .m,.vlist .eq:not(.wide) .m,.vlist .cn:not(.wide) .m{max-height:min(56svh,520px);max-width:34vw}}