/* law.jobofbrothers.com 포트폴리오 상세 — 본사이트 css/style.css 의 .pd-* 블록을 그대로 가져옴(2026-10-16). 수정은 본사이트에서 하고 여기로 복사 */
/* ============================================================
   포트폴리오 상세 — Figma "[JOB] 포트폴리오 상세"(#737:2)
   히어로 → 컨셉 → 디자인 요소 → 디바이스 → 디자인 시스템 → 메인 → 서브 → 모바일 → 관리자 → 마무리(이전/다음)
   관리자 입력이 없는 영역은 마크업에 .is-ph 로 표시해 두었다(실제 내용이 생기면 교체).
============================================================ */
.pd { --pd-ink: #1a1a1a; --pd-gray: #6b6b6b; --pd-blue: #1b4dff; --pd-line: rgba(26,26,26,.1);
    overflow: hidden; overflow: clip; display: flow-root; background: #fafaf8; color: var(--pd-ink); } /* clip — hidden 이면 메인 페이지 섹션 sticky 고정이 안 걸린다 */
:where(.pd) ul, :where(.pd) ol { list-style: none; margin: 0; padding: 0; } /* :where — 아래 개별 margin 이 이기도록 우선순위 0 */
.pd-in { width: min(92%, 1200px); margin: 0 auto; }
.pd-wide { width: min(92%, 1360px); margin: 0 auto; }
.pd-ph-box { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    background: repeating-linear-gradient(135deg, #eceef1 0 12px, #e5e8ed 12px 24px); font-size: 13px; letter-spacing: -0.01em; color: rgba(26,26,26,.4); }
.pd-label { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: rgba(26,26,26,.4); }
.pd-tit { margin-top: 18px; font-size: 34px; font-weight: 700; line-height: 1.2; letter-spacing: -0.04em; }
.pd-desc { max-width: 700px; margin-top: 16px; font-size: 15px; line-height: 1.95; letter-spacing: -0.02em; color: var(--pd-gray); word-break: keep-all; }
.pd-sys-t { font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -0.04em; }
.pd-sys-t + .pd-desc { margin-top: 12px; }
.pd-sys-h { margin: 50px 0 20px; font-size: 19px; font-weight: 700; letter-spacing: -0.03em; }

/* 히어로 — 하늘색 → 아이보리 그라디언트 위 중앙 정렬, 대표 이미지는 풀블리드 */
.pd-hero { position: relative; padding-top: 200px; text-align: center; background: linear-gradient(180deg, #eef4ff 0%, #f7f9fd 31%, #fafaf8 100%); }
.pd-hero .menuBox { position: absolute; top: 110px; right: 4%; padding: 0; }
.pd-hero-t { font-size: clamp(40px, 4.9vw, 94px); font-weight: 700; line-height: 1.19; letter-spacing: -0.05em; color: #0b0b0b; word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; }
.pd-hero-d { max-width: 800px; margin: 56px auto 0; font-size: 15px; line-height: 2.1; letter-spacing: -0.02em; color: #4a5261; word-break: keep-all; }
.pd-hero-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 50px; }
.pd-hero-tags li { display: inline-flex; align-items: center; height: 36px; padding: 0 20px; border: 1px solid rgba(26,26,26,.12); border-radius: 18px;
    background: rgba(255,255,255,.7); font-size: 13px; font-weight: 500; letter-spacing: -0.01em; color: rgba(26,26,26,.72); }
.pd-hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 36px; margin: 28px 0 0; }
.pd-hero-meta > div { display: flex; align-items: baseline; gap: 10px; }
.pd-hero-meta dt { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(26,26,26,.4); }
.pd-hero-meta dd { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.02em; color: var(--pd-ink); }
.pd-hero-meta dd a { color: var(--pd-blue); }
.pd-hero-img { position: relative; margin-top: 62px; aspect-ratio: 1920 / 900; overflow: hidden; background: #e9edf3; }
.pd-hero-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 스크롤 확장 — --p(0→1)는 view.skin.php 스크립트가 넣는다. 0 일 때 좌우 --pdh-x · 위아래 --pdh-y 만큼 잘린 둥근 박스 */
.pd-hero-img { --pdh-x: 14%; --pdh-y: 6%;
    clip-path: inset(calc((1 - var(--p, 1)) * var(--pdh-y)) calc((1 - var(--p, 1)) * var(--pdh-x)) round calc((1 - var(--p, 1)) * 28px)); }
.pd-hero-img img { transform: scale(calc(1.12 - .12 * var(--p, 1))); transform-origin: center; }
@media screen and (max-width: 768px) {
    .pd-hero-img { --pdh-x: 6%; --pdh-y: 4%; }
}

/* 디자인 컨셉 */
.pd-concept { padding-top: 150px; text-align: center; }
.pd-concept-l { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 500; letter-spacing: .04em; color: rgba(11,11,11,.4); }
.pd-concept-t { margin-top: 26px; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: clamp(36px, 4vw, 76px); font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; color: #0b0b0b; }
.pd-concept-d { max-width: 800px; margin: 32px auto 0; font-size: 15px; line-height: 2.05; letter-spacing: -0.02em; color: #4a5261; word-break: keep-all; }

/* 디자인 요소 — 2px 굵은 선 사이 3행, 오른쪽 라인 아이콘 */
.pd-elem { padding-top: 150px; }
.pd-elem-list { margin-top: 26px; border-top: 2px solid var(--pd-ink); border-bottom: 2px solid var(--pd-ink); }
.pd-elem-list li { display: flex; align-items: flex-start; gap: 56px; padding: 38px 0 40px; }
.pd-elem-list li + li { border-top: 1px solid var(--pd-line); }
.pd-elem-list .n { flex: 0 0 16px; padding-top: 10px; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: rgba(27,77,255,.75); }
.pd-elem-list .tx { flex: 1; min-width: 0; }
.pd-elem-list .k { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.pd-elem-list .d { max-width: 640px; margin-top: 22px; font-size: 14.5px; line-height: 1.95; letter-spacing: -0.02em; color: var(--pd-gray); word-break: keep-all; }
/* 디자인 요소 라인 아이콘 — 시안 #758:2/6/12, 모션 #798:2 (3D 회전은 view.skin.php 하단 스크립트) */
.pd-elem-list .ic { flex: 0 0 140px; width: 140px; height: 140px; overflow: visible; color: #1b4dff; transition: color .3s; }
.pd-elem-list .ic * { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pd-elem-list .ic .lt { stroke-opacity: .5; }
.pd-elem-list .ic .dk { stroke: rgba(26,26,26,.55); }
.pd-elem-list li:hover .ic { color: #6e9bff; }
@media (prefers-reduced-motion: reduce) {
    .pd-elem-list .ic[data-icon="sphere"] [data-r2] { transform: scaleX(.45); transform-origin: center; transform-box: fill-box; }
    .pd-elem-list .ic[data-icon="radial"] { transform: rotate(22deg); }
}

/* 디바이스 대응 — 1360 무대에 PC·태블릿·모바일을 겹쳐 둔다(좌표는 시안 비율 그대로) */
.pd-device { margin-top: 150px; padding: 90px 0 130px; background: linear-gradient(180deg, #fafaf8 0%, #eef3fb 100%); }
.pd-device-stage { position: relative; margin-top: 86px; aspect-ratio: 1360 / 779; }
.pd-device-stage .dv { position: absolute; padding: .43%; border-radius: 16px; background: #111; box-shadow: 0 30px 60px -20px rgba(15,23,51,.35); }
.pd-device-stage .dv .sc { width: 100%; height: 100%; overflow: hidden; border-radius: 11px; background: #222; }
.pd-device-stage .dv img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pd-device-stage .dv-pc  { left: 0;      top: 0;     width: 86.03%; height: 84.55%; }
.pd-device-stage .dv-tab { left: 50.44%; top: 27.6%; width: 28.81%; height: 72.4%; padding: .36%; border-radius: 14px; }
.pd-device-stage .dv-mo  { left: 82.1%;  top: 44.5%; width: 17.9%;  height: 55.5%; padding: .3%;  border-radius: 14px; }
.pd-device-spec { display: grid; grid-template-columns: 670fr 380fr 243fr; column-gap: 2.4%; margin-top: 56px; }
.pd-device-spec li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; row-gap: 8px; padding-top: 20px; border-top: 2px solid rgba(26,26,26,.15); }
.pd-device-spec li.on { border-top: 3px solid var(--pd-blue); }
.pd-device-spec .en { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.pd-device-spec li.on .en { color: var(--pd-blue); }
.pd-device-spec .sz { text-align: right; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 13px; color: rgba(26,26,26,.35); }
.pd-device-spec .ko { grid-column: 1 / -1; font-size: 15px; color: var(--pd-gray); }

/* 디자인 시스템 — 알약형 컬러 + 타이포 카드 2장 */
.pd-system { padding-top: 200px; }
.pd-colors { display: flex; gap: 22px; }
.pd-colors > div { display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 100px; padding: 0 48px; border-radius: 50px; background: var(--c); color: #fff; }
.pd-colors .c-main { flex: 780 1 0; }
.pd-colors .c-sub { flex: 398 1 0; padding: 0 42px; }
.pd-colors b { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.pd-colors span { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.85); }
.pd-swatch { display: flex; gap: 18px; margin-top: 20px; }
.pd-swatch li { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 96px; padding: 0 38px; border-radius: 48px; background: var(--c); color: var(--pd-ink); }
.pd-swatch li:last-child { border: 1px solid rgba(26,26,26,.12); }
.pd-swatch li.dk { color: #fff; }
.pd-swatch b { font-size: 14.5px; font-weight: 700; letter-spacing: -0.02em; }
.pd-swatch span { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 500; opacity: .8; }
.pd-type { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pd-type .tb { min-height: 460px; padding: 80px 44px 50px 56px; border-radius: 14px; background: #f5f5f5; }
.pd-type .nm { font-size: 38px; font-weight: 700; letter-spacing: -0.04em; }
.pd-type .nm span { margin-left: 22px; vertical-align: middle; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--pd-gray); }
.pd-type .sm { margin-top: 26px; font-size: 14px; line-height: 1.85; letter-spacing: .01em; color: rgba(26,26,26,.75); word-break: break-all; }
.pd-type .wb { display: inline-flex; align-items: center; height: 24px; margin-top: 56px; padding: 0 14px; border-radius: 12px; background: #bbb; font-size: 11.5px; color: #fff; }
.pd-type .ws { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 22px; }
.pd-type .ws li { font-size: 15px; letter-spacing: -0.02em; color: rgba(26,26,26,.8); }
.pd-type .wn { margin-top: 22px; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; letter-spacing: .02em; color: rgba(26,26,26,.4); }

/* 메인 페이지 — 브라우저 창 안에서 전체 화면 이미지를 스크롤 */
.pd-main { padding-top: 180px; }
.pd-browser { position: relative; margin-top: 24px; overflow: hidden; border-radius: 6px; background: #e8e6e2; box-shadow: 0 24px 60px -12px rgba(26,20,15,.12); }
.pd-browser .bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; }
.pd-browser .bar i { flex: 0 0 10px; height: 10px; border-radius: 50%; background: rgba(26,26,26,.16); }
.pd-browser .bar .addr { flex: 1; min-width: 0; max-width: 1020px; height: 20px; margin-left: 16px; padding: 0 14px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.7);
    font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; line-height: 20px; color: rgba(26,26,26,.5); white-space: nowrap; text-overflow: ellipsis; }
.pd-browser .shot { height: min(820px, 68vw); overflow-y: auto; background: #fff; scrollbar-width: thin; }
.pd-browser .shot img { display: block; width: 100%; height: auto; }
.pd-browser .hint { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; padding: 6px 14px; border-radius: 16px;
    background: rgba(255,255,255,.9); box-shadow: 0 2px 10px rgba(26,20,15,.08); font-size: 13px; color: rgba(26,26,26,.6); white-space: nowrap; pointer-events: none; transition: opacity .3s; }
.pd-browser:hover .hint { opacity: 0; }
/* 스크롤 연동(모션 정의 #798:2 B) — 고정은 sticky, 캡처 이동·진행률은 view.skin.php 스크립트 */
.pd-browser .prog { display: none; position: absolute; top: 46px; right: 2px; bottom: 2px; width: 6px; pointer-events: none; }
.pd-browser .prog i { display: block; height: 40px; border-radius: 3px; background: #c1c1c1; will-change: transform; }
.pd-shot-link { display: none; position: absolute; inset: 44px 0 0; z-index: 2; }
.pd-main.is-pin .pd-in { position: sticky; }
.pd-main.is-pin .pd-browser .shot { height: min(820px, 68vw, calc(100vh - 140px)); overflow: hidden; overflow: clip; }
.pd-main.is-pin .pd-browser .shot img { will-change: transform; }
.pd-main.is-pin .pd-browser .prog { display: block; }
.pd-main.is-pin .pd-browser:hover .hint { opacity: 1; }
.pd-main.is-pin .pd-browser .hint.is-end { opacity: 0; }
.pd-main.is-touch .pd-browser .shot { height: 480px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pd-main.is-calm .pd-browser .shot { overflow: hidden; }
.pd-main.is-calm .pd-shot-link { display: block; }

/* 서브 페이지 — 남색 그라디언트, 3열 메이슨리 + 노트 카드 */
.pd-sub { margin-top: 160px; padding: 100px 0 110px; background: linear-gradient(133deg, #252739 14.3%, #353a64 53.6%, #252739 85.7%); color: #fff; }
.pd-sub .pd-label { color: rgba(255,255,255,.45); }
.pd-sub .pd-tit { color: #fff; }
.pd-sub .pd-desc { color: rgba(255,255,255,.6); }
.pd-sub-hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.18); }
.pd-sub-hd .cnt { flex-shrink: 0; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.pd-sub-grid { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr 1.3fr; column-gap: 24px; align-items: start; }   /* 노트 카드는 옆 칸보다 조금 넓게 */
.pd-sub-grid .it { margin: 0 0 40px; break-inside: avoid; }
.pd-sub-grid .im { overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.06); }
.pd-sub-grid .im img { display: block; width: 100%; height: auto; }
.pd-sub-grid .im .pd-ph-box { aspect-ratio: 384 / 598; background: rgba(255,255,255,.06); color: rgba(255,255,255,.4); }
.pd-sub-grid figcaption { display: grid; grid-template-columns: 1fr auto; row-gap: 6px; padding: 18px 2px 14px; border-bottom: 1px solid rgba(255,255,255,.18); }
.pd-sub-grid .e { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #c6d2ff; }
.pd-sub-grid .k { grid-column: 1; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: rgba(255,255,255,.9); }
.pd-sub-grid .no { grid-column: 2; grid-row: 1 / 3; align-self: end; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 12px; color: rgba(255,255,255,.4); }
.pd-sub-grid .note { display: flex; flex-direction: column; min-height: 560px; padding: 40px 32px 32px; border-radius: 4px; background: rgba(255,255,255,.1); }
.pd-sub-grid .note .l { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.pd-sub-grid .note .t { margin-top: 16px; font-size: 22px; font-weight: 700; line-height: 1.5; letter-spacing: -0.03em; }
.pd-sub-grid .note .d { margin-top: 18px; font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.65); word-break: keep-all; }
.pd-sub-grid .note dl { margin: auto 0 0; padding-top: 36px; }
.pd-sub-grid .note dl div:first-child { border-top: 1px solid rgba(255,255,255,.14); }
/* 항목명 고정 폭 + 내용 왼쪽 정렬 — 내용이 3~4줄로 길어져도 줄 시작이 맞는다 */
.pd-sub-grid .note dl div { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 13px; }
.pd-sub-grid .note dt { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.pd-sub-grid .note dd { margin: 0; color: #fff; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; }

/* 모바일 — 왼쪽 설명, 오른쪽 폰 2대 */
.pd-mobile { padding-top: 180px; }
.pd-mobile .pd-in { display: flex; justify-content: space-between; align-items: flex-end; gap: 60px; }
.pd-mb-tx { flex: 0 1 560px; min-width: 0; }
.pd-mobile .pd-sys-t, .pd-admin .pd-sys-t { font-size: 26px; }
.pd-mobile .pd-sys-h, .pd-admin .pd-sys-h { margin: 32px 0 12px; font-size: 15px; }
.pd-mb-pills { display: flex; gap: 12px; }
.pd-mb-pills .pp { flex: 230 1 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 72px; padding: 0 28px; border: 1px solid var(--pd-blue); border-radius: 36px; background: #fff; }
.pd-mb-pills .pp.on { flex: 310 1 0; background: var(--pd-blue); color: #fff; }
.pd-mb-pills b { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }
.pd-mb-pills span { font-size: 12px; color: rgba(26,26,26,.55); }
.pd-mb-pills .on span { color: rgba(255,255,255,.8); }
.pd-mb-opt { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pd-mb-opt li { padding: 24px; border-radius: 10px; background: #f2f2f0; }
.pd-mb-opt .v { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.pd-mb-opt .r { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 12px; color: rgba(26,26,26,.5); }
.pd-mb-opt .r i { flex: 0 0 16px; font-style: normal; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 700; color: rgba(26,26,26,.35); }
.pd-mb-opt .r.mo { font-weight: 600; color: var(--pd-ink); }
.pd-mb-opt .r.mo i { color: var(--pd-blue); }
.pd-mb-ph { flex: 0 1 580px; display: flex; align-items: flex-end; gap: 30px; }
.pd-mb-ph .ph { margin: 0; }
.pd-mb-ph .ph-1 { flex: 250 1 0; }
.pd-mb-ph .ph-2 { flex: 300 1 0; }
.pd-mb-ph .sc { aspect-ratio: 250 / 525; padding: 7px; border-radius: 34px; background: #111; box-shadow: 0 30px 50px -20px rgba(15,23,51,.35); }
.pd-mb-ph .sc .pd-ph-box { border-radius: 28px; }
.pd-mb-ph figcaption { margin-top: 14px; font-size: 13px; font-weight: 600; color: rgba(26,26,26,.6); }

/* 관리자 — 연한 파랑 배경, 하단에 관리자 화면 콜라주 */
.pd-admin { margin-top: 180px; padding-top: 120px; background: #f0f5ff; }
.pd-ad-ed { display: flex; gap: 16px; }
.pd-ad-ed > div { flex: 484 1 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 84px; padding: 0 40px; border: 1px solid var(--pd-blue); border-radius: 42px; background: #fff; }
.pd-ad-ed > div.on { flex: 700 1 0; background: var(--pd-blue); color: #fff; }
.pd-ad-ed b { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.pd-ad-ed span { font-size: 12.5px; color: rgba(0,0,0,.6); }
.pd-ad-ed .on span { color: rgba(255,255,255,.82); }
.pd-ad-fn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pd-ad-fn li { min-height: 168px; padding: 30px 28px; border-radius: 10px; background: #fff; }
.pd-ad-fn .n { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--pd-blue); }
.pd-ad-fn b { display: block; margin-top: 14px; font-size: 17px; font-weight: 700; letter-spacing: -0.03em; }
.pd-ad-fn p { margin-top: 14px; font-size: 13px; line-height: 1.8; color: var(--pd-gray); word-break: keep-all; }
.pd-ad-shots { margin-top: 60px; overflow: hidden; background: #dee9f3; }
.pd-ad-shots .pd-in { position: relative; aspect-ratio: 1200 / 787; }
.pd-ad-shots .s { position: absolute; width: 23.5%; overflow: hidden; border-radius: 10px; box-shadow: 0 0 10px rgba(15,23,51,.3); }
.pd-ad-shots .s .pd-ph-box { background: repeating-linear-gradient(135deg, #f4f6fa 0 12px, #e9eef5 12px 24px); }
.pd-ad-shots .s0 { left: 0;      top: 0;     height: 62.5%; }
.pd-ad-shots .s1 { left: 25.75%; top: 22.4%; height: 56.4%; }
.pd-ad-shots .s2 { left: 76.5%;  top: 11.3%; height: 57.3%; }
.pd-ad-shots .s3 { left: 51.25%; top: 52.2%; height: 50%; }
.pd-ad-shots .s4 { left: 51.25%; top: 0;     height: 48.9%; }
/* 관리자 화면 장수별 배치 — 위 s0~s4 는 5장(c5, 시안 그대로). 1~4장은 아래로 덮어쓴다 */
.pd-ad-shots.c1 .pd-in { aspect-ratio: 1200 / 720; }
.pd-ad-shots.c1 .s0 { left: 10%; top: 8%; width: 80%; height: 84%; }
.pd-ad-shots.c2 .pd-in { aspect-ratio: 1200 / 720; }
.pd-ad-shots.c2 .s0 { left: 3%;  top: 4%;  width: 45%; height: 78%; }
.pd-ad-shots.c2 .s1 { left: 52%; top: 18%; width: 45%; height: 78%; }
.pd-ad-shots.c3 .pd-in { aspect-ratio: 1200 / 760; }
.pd-ad-shots.c3 .s0 { left: 0;   top: 4%;  width: 57%; height: 88%; }
.pd-ad-shots.c3 .s1 { left: 60%; top: 0;   width: 40%; height: 45%; }
.pd-ad-shots.c3 .s2 { left: 60%; top: 50%; width: 40%; height: 45%; }
.pd-ad-shots.c4 .pd-in { aspect-ratio: 1200 / 820; }
.pd-ad-shots.c4 .s0 { left: 1%;  top: 0;   width: 47%; height: 45%; }
.pd-ad-shots.c4 .s1 { left: 52%; top: 7%;  width: 47%; height: 45%; }
.pd-ad-shots.c4 .s2 { left: 1%;  top: 49%; width: 47%; height: 45%; }
.pd-ad-shots.c4 .s3 { left: 52%; top: 56%; width: 47%; height: 44%; }
/* 기능 카드 — 입력한 개수만큼 칸을 맞춘다 */
.pd-ad-fn.n1 { grid-template-columns: 1fr; }
.pd-ad-fn.n2 { grid-template-columns: repeat(2, 1fr); }

/* 마무리 — Thanks for Watching + 이전/다음 2칸 */
.pd-end { padding: 100px 0 110px; text-align: center; }
.pd-end-t { font-size: clamp(36px, 3.1vw, 58px); font-weight: 700; line-height: 1.3; letter-spacing: -0.05em; color: var(--pd-ink); }
.pd-end-t span { font-family: 'Archivo', 'Space Grotesk', sans-serif; letter-spacing: -0.04em; }
.pd-nav { display: grid; grid-template-columns: 1fr 1fr; margin-top: 170px; border-top: 1px solid rgba(26,26,26,.25); border-bottom: 1px solid rgba(26,26,26,.25); text-align: left; }
.pd-nav .cell { display: block; min-width: 0; padding: 18px 24px 20px 0; }
.pd-nav .cell.next { padding: 18px 0 20px 24px; border-left: 1px solid rgba(26,26,26,.12); text-align: right; }
.pd-nav .lb { display: flex; align-items: center; gap: 14px; font-size: 11px; color: rgba(26,26,26,.35); }
.pd-nav .lb b { font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .1em; color: rgba(27,77,255,.8); }
.pd-nav .next .lb { flex-direction: row-reverse; }
.pd-nav .bd { display: flex; gap: 22px; margin-top: 18px; padding: 0 24px; }
.pd-nav .next .bd { flex-direction: row-reverse; }
.pd-nav .th { flex: 0 0 150px; height: 108px; overflow: hidden; border-radius: 3px; background: #e8e8e6; }
.pd-nav .th img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.pd-nav .tx { display: flex; flex-direction: column; min-width: 0; padding-top: 6px; }
.pd-nav .tx .c { font-size: 11px; color: rgba(27,77,255,.75); }
.pd-nav .tx .t { margin-top: 6px; overflow: hidden; font-size: 17px; font-weight: 700; letter-spacing: -0.03em; color: var(--pd-ink); white-space: nowrap; text-overflow: ellipsis; transition: color .25s; }
.pd-nav .tx .d { margin-top: 14px; font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 11px; letter-spacing: .02em; color: rgba(26,26,26,.3); }
.pd-nav a.cell:hover .t { color: var(--pd-blue); }
.pd-nav a.cell:hover .th img { transform: scale(1.05); }
.pd-nav .arw { grid-column: 1 / -1; display: flex; justify-content: space-between; padding: 16px 24px; border-top: 1px solid rgba(26,26,26,.12);
    font-family: 'Archivo', 'Space Grotesk', sans-serif; font-size: 14px; color: rgba(26,26,26,.35); }
.pd-nav .arw a { transition: color .2s; }
.pd-nav .arw a:hover { color: var(--pd-blue); }
.pd-list-btn { margin-top: 40px; }
.pd-list-btn a { display: inline-flex; align-items: center; justify-content: center; width: 160px; height: 46px; border: 1px solid rgba(26,26,26,.22); border-radius: 23px;
    font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; color: var(--pd-ink); transition: background .25s, color .25s, border-color .25s; }
.pd-list-btn a:hover { border-color: var(--pd-ink); background: var(--pd-ink); color: #fff; }

@media screen and (max-width: 1250px) {
    .pd-hero { padding-top: 170px; }
    .pd-concept, .pd-elem { padding-top: 120px; }
    .pd-elem-list li { gap: 40px; }
    .pd-elem-list .ic { flex-basis: 110px; width: 110px; height: 110px; }
    .pd-device { margin-top: 120px; }
    .pd-system { padding-top: 160px; }
    .pd-main, .pd-mobile { padding-top: 150px; }
    .pd-sub, .pd-admin { margin-top: 140px; }
    .pd-type .tb { padding: 60px 36px 44px; }
    .pd-mobile .pd-in { gap: 40px; }
    .pd-nav { margin-top: 130px; }
}
@media screen and (max-width: 950px) {
    .pd-hero { padding-top: 150px; }
    .pd-hero-d { margin-top: 32px; }
    .pd-hero-tags { margin-top: 36px; }
    .pd-hero-img { margin-top: 48px; aspect-ratio: 16 / 10; }
    .pd-concept, .pd-elem { padding-top: 100px; }
    .pd-elem-list .ic { display: none; }
    .pd-device { margin-top: 100px; padding: 70px 0 90px; }
    .pd-device-stage { margin-top: 56px; }
    .pd-device-stage .dv { border-radius: 10px; }
    .pd-device-stage .dv .sc { border-radius: 7px; }
    .pd-system, .pd-main, .pd-mobile { padding-top: 120px; }
    .pd-sub, .pd-admin { margin-top: 120px; }
    .pd-colors { flex-direction: column; gap: 12px; }
    .pd-colors > div { flex: none !important; }
    .pd-swatch { flex-wrap: wrap; gap: 12px; }
    .pd-swatch li { flex: 1 1 calc(33.333% - 8px); }
    .pd-type { grid-template-columns: 1fr; }
    .pd-type .tb { min-height: 0; }
    .pd-sub-grid { grid-template-columns: 1fr 1fr; }
    .pd-sub-grid .note { grid-column: 1 / -1; min-height: 0; }
    .pd-mobile .pd-in { flex-direction: column; align-items: stretch; }
    .pd-mb-tx { flex: none; }
    .pd-mb-ph { flex: none; width: min(100%, 520px); margin: 20px auto 0; }
    .pd-nav { margin-top: 100px; }
}
@media screen and (max-width: 650px) {
    .pd-hero { padding-top: 130px; }
    .pd-hero .menuBox { top: 84px; }
    .pd-hero-d { font-size: 14px; line-height: 1.9; }
    .pd-hero-tags { gap: 8px; }
    .pd-hero-tags li { height: 32px; padding: 0 14px; font-size: 12px; }
    .pd-hero-meta { gap: 6px 20px; }
    .pd-hero-img { aspect-ratio: 4 / 3; }
    .pd-concept-l { font-size: 13px; }
    .pd-concept-t { margin-top: 16px; }
    .pd-concept-d, .pd-desc { font-size: 14px; }
    .pd-concept-d br, .pd-desc br, .pd-elem-list .d br { display: none; }
    .pd-elem-list li { gap: 18px; padding: 28px 0 30px; }
    .pd-elem-list .k { font-size: 24px; }
    .pd-elem-list .d { margin-top: 12px; font-size: 14px; }
    .pd-tit { font-size: 26px; }
    .pd-sys-t, .pd-mobile .pd-sys-t, .pd-admin .pd-sys-t { font-size: 24px; }
    .pd-sys-h { margin: 36px 0 14px; font-size: 17px; }
    .pd-device-stage { margin-top: 40px; }
    .pd-device-stage .dv { border-radius: 6px; }
    .pd-device-stage .dv .sc { border-radius: 4px; }
    .pd-device-spec { grid-template-columns: 1fr; row-gap: 18px; margin-top: 36px; }
    .pd-device-spec .en { font-size: 17px; }
    .pd-system, .pd-main, .pd-mobile { padding-top: 90px; }
    .pd-sub, .pd-admin { margin-top: 90px; }
    .pd-colors > div { height: 80px; padding: 0 28px !important; }
    .pd-swatch { gap: 10px; }
    .pd-swatch li { flex-basis: calc(50% - 5px); height: 72px; padding: 0 24px; }
    .pd-type .tb { padding: 40px 24px 32px; }
    .pd-type .nm { font-size: 28px; }
    .pd-type .nm span { display: block; margin: 8px 0 0; }
    .pd-type .wb { margin-top: 32px; }
    .pd-browser .bar { padding: 0 14px; }
    .pd-browser .bar .addr { margin-left: 8px; }
    .pd-browser .hint { display: none; }
    .pd-sub { padding: 70px 0 70px; }
    .pd-sub-hd { flex-direction: column; align-items: flex-start; padding-bottom: 28px; }
    .pd-sub-grid { margin-top: 28px; column-gap: 12px; }
    .pd-sub-grid .it { margin-bottom: 24px; }
    .pd-sub-grid figcaption { padding: 12px 0 10px; }
    .pd-sub-grid .k { font-size: 13px; }
    .pd-sub-grid .note { min-height: 0; padding: 24px 18px; }
    .pd-sub-grid .note .t { font-size: 18px; }
    .pd-sub-grid .note .d { font-size: 13px; }
    .pd-mb-pills { flex-direction: column; }
    .pd-mb-pills .pp { flex: none !important; height: 66px; }
    .pd-mb-opt { gap: 10px; }
    .pd-mb-opt li { padding: 18px 16px; }
    .pd-mb-opt .r { gap: 8px; font-size: 11.5px; }
    .pd-mb-ph { gap: 16px; }
    .pd-mb-ph .sc { padding: 5px; border-radius: 24px; }
    .pd-mb-ph .sc .pd-ph-box { border-radius: 20px; }
    .pd-admin { padding-top: 80px; }
    .pd-ad-ed { flex-direction: column; gap: 10px; }
    .pd-ad-ed > div { flex: none !important; height: 76px; padding: 0 28px; }
    .pd-ad-fn, .pd-ad-fn.n2 { grid-template-columns: 1fr; gap: 10px; }
    .pd-ad-fn li { min-height: 0; padding: 24px 22px; }
    .pd-ad-shots { margin-top: 40px; }
    .pd-ad-shots .s { border-radius: 6px; }
    .pd-end { padding: 70px 0 80px; }
    .pd-nav { grid-template-columns: 1fr; margin-top: 70px; }
    .pd-nav .cell, .pd-nav .cell.next { padding: 16px 0 18px; }
    .pd-nav .cell.next { border-left: 0; border-top: 1px solid rgba(26,26,26,.12); }
    .pd-nav .bd { gap: 14px; padding: 0; }
    .pd-nav .th { flex-basis: 96px; height: 70px; }
    .pd-nav .tx { padding-top: 2px; }
    .pd-nav .tx .t { font-size: 15px; }
    .pd-nav .tx .d { margin-top: 8px; }
    .pd-nav .arw { padding: 14px 4px; }
}

/* ===== 포트폴리오 상세 — 관리자 입력 이미지(모바일 · 관리자 화면) ===== */
.pd-mb-ph .sc img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 28px; }
.pd-ad-shots .s img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; background: #fff; }
@media screen and (max-width: 650px) {
    .pd-mb-ph .sc img { border-radius: 20px; }
}

.pd-mb-ph.is-3 { flex-basis: 720px; gap: 20px; }
@media screen and (max-width: 650px) {
    .pd-mb-ph.is-3 { gap: 10px; }
}
/* law 보정 */
.pd .ani{ opacity:0; transform:translate3d(0,24px,0); transition:opacity .8s ease, transform .8s ease; }
.pd .ani.on{ opacity:1; transform:none; }
.pd .ani.delay1{ transition-delay:.12s } .pd .ani.delay2{ transition-delay:.24s }
.law-pf-cta{ padding:90px 0; background:#0d1321; color:#fff; text-align:center }
.law-pf-cta h2{ font-size:34px; font-weight:800; letter-spacing:-.04em; line-height:1.3 }
.law-pf-cta p{ margin-top:14px; color:#9aa3b2; font-size:16px }
.law-pf-cta .btns{ display:flex; gap:12px; justify-content:center; margin-top:30px; flex-wrap:wrap }
.law-pf-cta a{ display:inline-flex; align-items:center; height:52px; padding:0 28px; border-radius:6px; background:#4684ec; color:#fff; font-weight:700 }
.law-pf-cta a.line{ background:transparent; border:1px solid rgba(255,255,255,.3) }
.law-pf-list{ padding:120px 0 100px; background:#DFE8F6 }
.law-pf-list .sec_tit{ margin-top:24px }