/* 사이트 1차에서 더한 것: 분야 넷에 맞춘 글자, 포트폴리오 카드, 영상 창 */

/* ---- 분야(네 낱말). 마지막 낱말이 길어 폰에서는 두 줄로 꺾인다 */
.tD .f-name{font-size:min(9.4vw,112px);line-height:1.14;padding:.08em 0}
@media(min-width:861px){
 .tD .f-name{font-size:min(7.4vw,104px);line-height:1.14;padding:.06em 0}
}

/* ---- 포트폴리오 */
.pf .grid{grid-template-columns:1fr 1fr;gap:22px 10px}
.pf .card,.pm .card{cursor:pointer;min-width:0}
.card.static{cursor:default}
.thumb{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:4px;background-color:#e7e1da;background-size:cover;background-position:center}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
@media(hover:hover){.card:not(.static):hover .thumb img{transform:scale(1.04)}}
.meta{padding-top:9px}
.meta h3{font-size:14.5px;font-weight:600;letter-spacing:-.02em;line-height:1.4;margin:0}
.meta p{order:0;font-size:12px;font-weight:700;color:var(--ac);margin-top:3px}
.bdg{position:absolute;z-index:1;font-size:11.5px;font-weight:700;line-height:1;padding:5px 7px;background:rgba(12,11,10,.8);color:#fff}
.b-n{right:8px;bottom:8px}
.b-v{left:8px;top:8px}
.b-w{left:8px;bottom:8px;background:#fff;color:#1c1a18}
/* 그림이 없는 카드: 제목만 크게 */
.thumb.tc{display:flex;align-items:flex-start;padding:12px 12px 34px}
.tc-t{font-size:clamp(15px,4vw,21px);font-weight:800;letter-spacing:-.035em;line-height:1.25;color:#1c1a18;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.thumb.c0{background-color:#e6dfd5}
.thumb.c1{background-color:#dbe2dc}
.thumb.c2{background-color:#e3dde6}
.thumb.c3{background-color:#1c1a18}
.thumb.c3 .tc-t{color:#f4f1ec}
/* 채널 성과 */
.thumb.perf{align-items:center}
.tc-perf{font-size:clamp(24px,6.6vw,44px);font-weight:800;letter-spacing:-.045em;line-height:1.1;color:#f4f1ec}
.pf-more{display:block;margin:36px auto 0;border:1px solid #1c1a18;padding:13px 30px;font-size:15px;font-weight:700;transition:background .2s,color .2s}
@media(hover:hover){.pf-more:hover{background:#1c1a18;color:#fff}}

/* ---- 영상 창 */
body.pm-lock{overflow:hidden}
.pm{position:fixed;inset:0;z-index:100;background:rgba(12,11,10,.975);color:#f4f1ec;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pm-close{position:fixed;top:14px;right:16px;z-index:2;border:1px solid #f4f1ec;color:#f4f1ec;background:rgba(12,11,10,.7);padding:8px 14px;font-size:14px;font-weight:600}
@media(hover:hover){.pm-close:hover{background:#f4f1ec;color:#0c0b0a}}
.pm-in{max-width:1100px;margin:0 auto;padding:66px 16px 56px}
.pm-player{position:relative;aspect-ratio:16/9;background:#000}
.pm-player.v{aspect-ratio:9/16;width:min(100%,calc(74vh * 9 / 16));margin:0 auto}
.pm-player iframe,.pm-player video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.pm-cap{padding:14px 0 6px}
.pm-title{font-size:19px;font-weight:800;letter-spacing:-.03em;line-height:1.35}
.pm-sub{font-size:13px;opacity:.65;margin-top:4px}
.pm-chips{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0 4px}
.pm-chip{border:1px solid rgba(244,241,236,.4);color:#f4f1ec;padding:7px 12px;font-size:13.5px;font-weight:600}
.pm-chip.on{background:#f4f1ec;color:#0c0b0a;border-color:#f4f1ec}
.pm-ghead{font-size:clamp(23px,3vw,36px);font-weight:800;letter-spacing:-.04em;line-height:1.2;padding:22px 0 16px;border-top:1px solid rgba(244,241,236,.18);margin-top:22px}
#pm-view:empty+#pm-list .pm-ghead{border-top:0;margin-top:0;padding-top:0}
.pm-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 10px}
.pm .meta h3{color:#f4f1ec}
.pm .meta p{color:rgba(244,241,236,.6)}
.pm .thumb{background-color:#2a2724}
.pm .thumb.tc .tc-t{color:#f4f1ec}
.pm .card.on .thumb{outline:2px solid #f4f1ec;outline-offset:2px}
@media(min-width:861px){
 .pf .grid{grid-template-columns:repeat(4,1fr);gap:30px 16px}
 .meta h3{font-size:15.5px}.meta p{font-size:12.5px}
 .tc-t{font-size:clamp(17px,1.5vw,22px)}
 .tc-perf{font-size:clamp(28px,2.9vw,42px)}
 .thumb.tc{padding:16px 16px 36px}
 .pm-in{padding:72px 40px 72px}
 .pm-close{top:18px;right:28px}
 .pm-grid{grid-template-columns:repeat(4,1fr);gap:26px 16px}
 .pm-title{font-size:22px}
}

/* ---- 2차 */
.tD .about-p{text-align:center}
.tag{display:inline-block;vertical-align:1px;margin-right:6px;padding:1px 5px 2px;border:1px solid currentColor;font-size:11px;font-weight:700;letter-spacing:0;line-height:1.3}
.pm-title .tag{font-size:12px;vertical-align:3px}
.tD .f-go{padding:0 0 20px;font-size:14px;font-weight:600}
.tD .f-go a{padding-bottom:4px;border-bottom:1px solid currentColor}
.tD .f-list{margin-bottom:16px}
.tD .field.on .f-detail{max-height:360px}
.thumb.c3{background-color:#e9e4dc}
.thumb.c3 .tc-t,.thumb.c3 .tc-perf,.tc-perf{color:#1c1a18}
.pm .thumb.c3{background-color:#2a2724}
.logo-row{display:flex;flex-wrap:wrap;align-items:center;gap:22px 40px;margin:26px 0 8px}
.logo-row img{display:block;height:30px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1) contrast(1.1);opacity:.8}
@media(min-width:861px){.logo-row{gap:28px 56px;margin:34px 0 14px}.logo-row img{height:36px}}
.tD .fbg-l{transform:scale(1.5);transform-origin:50% 22%}

/* ---- 3차 */
.meta .perf-line{order:0;margin-top:3px;font-size:13px;font-weight:800;color:#1c1a18;letter-spacing:-.02em}
.tD .fbg-l.on{opacity:.9}
.tD .fbg::after{background:linear-gradient(180deg,rgba(12,11,10,.72) 0%,rgba(12,11,10,.58) 100%)}
.logo-row img{filter:brightness(0);opacity:.72;height:26px;max-width:132px}
.logo-row{gap:20px 30px}
@media(min-width:861px){
 .tD .fbg::after{background:linear-gradient(90deg,rgba(12,11,10,.9) 0%,rgba(12,11,10,.72) 30%,rgba(12,11,10,.2) 62%,rgba(12,11,10,.05) 100%)}
 .logo-row img{height:30px;max-width:150px}.logo-row{gap:26px 44px}
}
.logo-row li.spr2{height:26px;overflow:hidden}
.logo-row li.spr2 img{height:52px;max-width:none}
.logo-row li.gray img{filter:grayscale(1) contrast(1.15)}
@media(min-width:861px){.logo-row li.spr2{height:30px}.logo-row li.spr2 img{height:60px}}

/* ---- 4차: 분야 칸 배경을 원본에서 다시 뽑은 그림 + 짧은 클립으로. 확대는 하지 않는다 */
.tD .fbg-l{transform:none;background-position:center}
.tD .fbg-l video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.tD .fbg-l video.playing{opacity:1}
.tD .fbg-l:nth-child(3),.tD .fbg-l:nth-child(3) video{background-position:70% 30%;object-position:70% 30%}
.tD .fbg-l:nth-child(4),.tD .fbg-l:nth-child(4) video{background-position:80% 50%;object-position:80% 50%}
.tD .fbg-l:nth-child(3),.tD .fbg-l:nth-child(3) video{background-position:50% 30%;object-position:50% 30%}
.tD .fbg-l:nth-child(4),.tD .fbg-l:nth-child(4) video{background-position:50% 50%;object-position:50% 50%}
.tD .fbg-l:nth-child(3),.tD .fbg-l:nth-child(3) video{background-position:60% 40%;object-position:60% 40%}

/* ---- 1009: 폰·사파리 손질 (글·구성은 그대로) */
/* 문의 구역이 보이는 동안 아래 고정 「제작 문의」를 숨긴다(site.js 가 .off 를 붙인다). 폰 배치에서만 */
@media(max-width:860px){
 .tD .cta{transition:background .2s,opacity .25s,transform .25s,visibility 0s}
 .tD .cta.off{opacity:0;transform:translateY(10px);visibility:hidden;pointer-events:none;transition:background .2s,opacity .25s,transform .25s,visibility 0s .25s}
}
/* 선택칸 아래 화살표(가는 선) */
.fl select{padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7' fill='none' stroke='%231c1a18' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 7px}
/* 닻으로 왔을 때 포트폴리오·문의 제목이 머리띠에 붙지 않게: 앞 구역의 아래 여백만큼 띄운다 */
.tD #portfolio,.tD #contact{scroll-margin-top:176px}
@media(min-width:861px){.tD #portfolio{scroll-margin-top:168px}.tD #contact{scroll-margin-top:144px}}
/* 아이폰 노치·홈 막대(viewport-fit=cover). 안전 영역이 0 인 곳에서는 값이 그대로다 */
:root{--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px)}
.sec-in,.hd-in,.tD .hero-in,.tD .fields .sec-in{padding-left:max(20px,var(--sal));padding-right:max(20px,var(--sar))}
.pm-in{padding-left:max(16px,var(--sal));padding-right:max(16px,var(--sar))}
.pm-close{right:max(16px,var(--sar))}
@media(max-width:860px){
 body{padding-bottom:calc(72px + var(--sab))}
 .cta{left:max(16px,var(--sal));right:max(16px,var(--sar));bottom:calc(14px + var(--sab))}
 .nav{width:calc(100% + max(20px,var(--sal)) + max(20px,var(--sar)));margin-left:calc(-1 * max(20px,var(--sal)));margin-right:calc(-1 * max(20px,var(--sar)))}
 .filters{margin-left:calc(-1 * max(20px,var(--sal)));margin-right:calc(-1 * max(20px,var(--sar)));padding-left:max(20px,var(--sal));padding-right:max(20px,var(--sar))}
}
@media(min-width:861px){
 .sec-in,.pm-in{padding-left:max(40px,var(--sal));padding-right:max(40px,var(--sar))}
 .hd-in,.tD .hero-in,.tD .fields .sec-in{padding-left:max(28px,var(--sal));padding-right:max(28px,var(--sar))}
 .pm-close{right:max(28px,var(--sar))}
}

/* 올리기_1009: 개인정보 동의 체크칸, 실패 안내의 메일 링크 */
.agree{grid-column:1/-1;font-size:13px}
.ag-l{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-weight:700}
.ag-l input{flex:none;width:22px;height:22px;margin:0;-webkit-appearance:none;appearance:none;background:#fff;border:1px solid var(--mut);border-radius:6px;cursor:pointer;outline:0}
.ag-l input:checked{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5l3.5 3.5L11 1'/%3E%3C/svg%3E") center/12px 10px no-repeat;border-color:var(--ink)}
.ag-l input:focus-visible{border-color:var(--ink);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.agree.need .ag-l input{border-color:var(--ac);box-shadow:0 0 0 3px rgba(180,80,47,.22)}
.agree.need .ag-l span{color:var(--ac)}
.ag-s{color:var(--mut);padding-left:32px}
.ag-d{padding-left:32px}
.ag-d summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--mut);text-decoration:underline;text-underline-offset:3px;list-style:none}
.ag-d summary::-webkit-details-marker{display:none}
.ag-d dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;padding:2px 0 10px;color:var(--mut)}
.ag-d dt{font-weight:700;color:var(--ink);white-space:nowrap}
.ag-d dd{margin:0}
#fail a{text-decoration:underline;text-underline-offset:3px}