/* ONDA_PORTFOLIO_20261021 — 온다마케팅이 제작한 홈페이지 마퀴 + 전체 목록 (🔗ONDA 서버🔗 9534)
   한 벌(.pfm-set)을 줄 너비 이상이 될 때까지 반복해 채우고 통째로 복제해 2벌로 잇는다(JS).
   애니메이션은 정확히 한 벌 거리(--pfm-dist)만 움직인다 — 어느 폭·어느 시점에도 줄 끝이 비지 않는다. */
.pfm{border-top:1px solid #dbe8e1;padding:0 0 60px;scroll-margin-top:105px}
.pfm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;padding:58px 0 30px}
.pfm-head>div{max-width:820px;min-width:0}
.pfm-kicker{font-size:13px;font-weight:700;color:#087d68;line-height:1.6;margin:0 0 12px}
.pfm-head h2{font-size:clamp(26px,3vw,38px);line-height:1.38;letter-spacing:-.05em;margin:0 0 16px;color:#17362f}
.pfm-lede{font-size:16px;line-height:1.9;color:#5d716b;margin:0}
.pfm-all{flex:0 0 auto;color:#087d68;font-size:14px;font-weight:650;text-decoration:none;border-bottom:1px solid #b7ccbf;padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
.pfm-rows{display:grid;gap:22px}
.pfm-row{--pfm-card:300px;--pfm-gap:20px;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}
.pfm:not(.is-js) .pfm-row{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
.pfm-track{display:flex;width:max-content;backface-visibility:hidden}
.pfm-set{display:flex;gap:var(--pfm-gap);padding:4px var(--pfm-gap) 8px 0;margin:0;list-style:none;flex:0 0 auto}
.pfm-item{flex:0 0 auto;width:var(--pfm-card);margin:0;padding:0}
.pfm-card{display:block;color:#17362f;text-decoration:none;border-radius:14px}
.pfm-shot{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:12px;border:1px solid #dfe8e3;background:#eff3f0}
.pfm-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .35s ease}
.pfm-card:hover .pfm-shot img,.pfm-card:focus-visible .pfm-shot img{transform:scale(1.035)}
.pfm-name{display:block;font-size:16px;font-weight:700;line-height:1.5;letter-spacing:-.03em;margin-top:13px}
.pfm-meta{display:block;font-size:13px;line-height:1.6;color:#5d716b;margin-top:3px}
.pfm-card:focus-visible{outline:3px solid #087d68;outline-offset:4px}
.pfm-note{font-size:13px;line-height:1.8;color:#687e73;margin:20px 0 0}
.pfm-row.is-run .pfm-track{animation:pfm-left var(--pfm-dur,60s) linear infinite}
.pfm-row.is-run[data-dir="right"] .pfm-track{animation-name:pfm-right}
@keyframes pfm-left{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--pfm-dist,0px)),0,0)}}
@keyframes pfm-right{from{transform:translate3d(calc(-1 * var(--pfm-dist,0px)),0,0)}to{transform:translate3d(0,0,0)}}
.pfm-rows:hover .pfm-track,.pfm-rows:focus-within .pfm-track,.pfm.is-off .pfm-track,.pfm.is-paused .pfm-track{animation-play-state:paused}
/* 전체 목록(글) — 검색·AI 답변이 읽는 자리 */
.pfm-list{border-top:1px solid #dbe8e1;padding:58px 0 30px;margin-top:40px;scroll-margin-top:105px}
.pfm-list h2{font-size:clamp(24px,2.6vw,32px);line-height:1.4;letter-spacing:-.05em;margin:0 0 12px;color:#17362f}
.pfm-list-lede{font-size:15px;line-height:1.9;color:#5d716b;margin:0 0 30px;max-width:820px}
.pfm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px;margin:0;padding:0;list-style:none}
.pfm-entry{border-top:1px solid #dbe8e1;padding:22px 0 24px;min-width:0}
.pfm-entry h3{font-size:18px;line-height:1.5;letter-spacing:-.035em;margin:0}
.pfm-entry h3 a{color:#17362f;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.pfm-entry h3 a:hover{color:#087d68;text-decoration:underline;text-underline-offset:4px}
.pfm-entry h3 a:focus-visible{outline:3px solid #087d68;outline-offset:3px}
.pfm-entry-meta{font-size:13px;line-height:1.7;color:#087d68;margin:0 0 8px}
.pfm-entry-desc{font-size:14px;line-height:1.85;color:#5d716b;margin:0}
.pfm-entry-url{display:block;font-size:12px;line-height:1.7;color:#687e73;margin-top:10px;overflow-wrap:anywhere}
@media(max-width:1000px){.pfm-row{--pfm-card:260px;--pfm-gap:18px}.pfm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}}
@media(max-width:700px){.pfm{padding-bottom:40px}.pfm-head{display:block;padding:40px 0 22px}.pfm-head h2{font-size:26px}.pfm-lede{font-size:15px}.pfm-all{margin-top:14px;font-size:13px}.pfm-rows{gap:18px}.pfm-row{--pfm-card:224px;--pfm-gap:14px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}.pfm-name{font-size:15px;margin-top:10px}.pfm-meta{font-size:12px}.pfm-list{padding:40px 0 20px;margin-top:28px}.pfm-list h2{font-size:24px}.pfm-list-lede{font-size:14px;margin-bottom:22px}.pfm-grid{grid-template-columns:1fr}.pfm-entry{padding:18px 0 20px}.pfm-entry h3{font-size:17px}.pfm-entry-desc{font-size:14px}}
@media(prefers-reduced-motion:reduce){.pfm-row{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.pfm-row .pfm-track{animation:none!important}.pfm-set[data-pfm-clone]{display:none}}
/* 전체 목록 아코디언 — 10-21 대표님 「여긴 아코디언해놓고」「닫힌걸 기본값」. <details> 라 닫혀 있어도 글은 쪽 안에 그대로.
   제목·소개 줄 전체가 누르는 자리, 오른쪽(휴대폰은 아래) 「목록 펼치기」 단추는 눈에 보이는 표시만 한다. */
.pfm-acc>summary{display:block;list-style:none;cursor:pointer;border-radius:12px;-webkit-tap-highlight-color:transparent}
.pfm-acc>summary::-webkit-details-marker{display:none}
.pfm-acc>summary::marker{content:""}
.pfm-acc>summary:focus{outline:none}
.pfm-acc>summary:focus-visible{outline:3px solid #087d68;outline-offset:6px}
.pfm-acc-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px}
.pfm-acc-head{display:block;min-width:0;max-width:820px}
.pfm-acc .pfm-list-lede{display:block;margin:0}
.pfm-acc-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px 0 22px;border:1px solid #b7ccbf;border-radius:999px;background:#fff;color:#087d68;font-size:14px;font-weight:650;line-height:1;white-space:nowrap;transition:background-color .2s ease,border-color .2s ease}
.pfm-acc-ico{display:block;flex:0 0 auto;width:12px;height:12px;transition:transform .2s ease}
.pfm-acc-close{display:none}
.pfm-acc[open] .pfm-acc-open{display:none}
.pfm-acc[open] .pfm-acc-close{display:inline}
.pfm-acc[open] .pfm-acc-ico{transform:rotate(180deg)}
@media(hover:hover){.pfm-acc>summary:hover .pfm-acc-btn{background:#f2f8f5;border-color:#087d68}}
.pfm-acc>.pfm-grid{margin-top:30px}
.pfm-acc[open]>.pfm-grid{animation:pfm-acc-in .25s ease}
@keyframes pfm-acc-in{from{opacity:0;transform:translate3d(0,-6px,0)}to{opacity:1;transform:none}}
.pfm-entry{scroll-margin-top:105px}
@media(max-width:700px){.pfm-acc-row{display:block}.pfm-acc-btn{display:flex;width:100%;margin-top:18px}.pfm-acc>.pfm-grid{margin-top:22px}}
@media(prefers-reduced-motion:reduce){.pfm-acc[open]>.pfm-grid{animation:none}.pfm-acc-ico{transition:none}}