/* 11/07 대표: 포트폴리오 찾기 화면을 사이트 유리 분위기로 — 진초록 큰 띠 대신 밝은 머리, 이번 주 추천 + 추천 제작자 유리 카드,
   거르기·목록을 따로 떠 있는 유리판으로, 작품 하나하나를 유리 카드로. (styles/glass.css·scripts/glass.js 와 같이 씀) */
.gl-on .pf-main { --pf-glass: rgba(245, 250, 250, .76); --pf-shadow: 0 1px 2px rgba(27, 58, 61,.10), 0 10px 22px -6px rgba(27, 58, 61,.24), 0 26px 50px -14px rgba(27, 58, 61,.28); }
/* 머리 */
.gl-on .pf-band { padding: 46px 16px 34px; background: none; color: var(--pf-forest); }
.gl-on .pf-band::after { display: none; }
.gl-on .pf-band__eb { color: var(--pf-terra); }
.gl-on .pf-band__h { color: #1e2a2b; }
.gl-on .pf-band__p { color: var(--pf-mute); }
.gl-on .pf-wrap { margin-top: 0; }
/* 이번 주 추천 */
.gl-on .pf-feat { overflow: visible; box-shadow: none; gap: 18px; grid-template-columns: 1.75fr 1fr; }
.gl-on .pf-f1w { position: relative; min-width: 0; border-radius: 28px; overflow: hidden; box-shadow: var(--pf-shadow), 0 0 0 1px rgba(255,255,255,.4) inset; }
.gl-on .pf-f1w > .pf-f1 { height: 100%; min-height: 340px; }
.gl-on .pf-f2 { border-radius: 28px; background: rgba(209, 231, 233, .7); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--pf-shadow), 0 0 0 1px rgba(255,255,255,.6) inset; }
/* 추천 제작자 카드: 영상을 가리지 않게 영상 바로 아래 가로 유리 띠로 */
.gl-on .pf-f1w { display: flex; flex-direction: column; gap: 12px; overflow: visible; border-radius: 0; box-shadow: none; }
.gl-on .pf-f1w > .pf-f1 { flex: 1; height: auto; min-height: 300px; border-radius: 28px; box-shadow: var(--pf-shadow), 0 0 0 1px rgba(255,255,255,.4) inset; }
.pf-fc { display: grid; grid-template-columns: minmax(0, 1.3fr) auto auto; align-items: center; gap: 16px; padding: 14px 16px 14px 14px;
  border-radius: 22px; background: rgba(245, 250, 250, .8); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 1px 2px rgba(27, 58, 61,.1), 0 12px 26px -10px rgba(27, 58, 61,.3); color: #1e1e20; animation: pf-fc-in .7s cubic-bezier(.16,1,.3,1) .2s both; }
@keyframes pf-fc-in { from { opacity: 0; transform: translateY(10px); } }
.pf-fc__eb { display: none; }
.pf-fc__hd { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; }
.pf-fc__av { width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--pf-forest, #1b3a3d); color: #eef1f1; font-size: 20px; font-weight: 800;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(88, 141, 147,.45), 0 8px 18px rgba(27, 58, 61,.3); }
.pf-fc__av img { width: 100%; height: 100%; object-fit: cover; }
.pf-fc__nm { min-width: 0; display: grid; gap: 2px; }
.pf-fc__nm b { font-size: 16px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-fc__nm b::before { content: '이번 주 추천 제작자'; display: block; margin-bottom: 2px; font-size: 11px; font-weight: 800; letter-spacing: .05em; color: var(--pf-terra, #208787); }
.pf-fc__nm .mk { display: flex; }
.pf-fc__tg { font-size: 12.5px; color: var(--pf-mute, #65656b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-fc__tg:empty { display: none; }
.pf-fc__ws { flex: none; align-self: flex-start; padding: 3px 9px 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; background: #e3f0f2; color: #127b87; white-space: nowrap; }
.pf-fc__ws::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pf-fc__ws.is-busy { background: #e3f2f1; color: #9a5b00; } .pf-fc__ws.is-rest { background: #eaeced; color: #6d6d74; }
.pf-fc__st { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pf-fc__st li { display: grid; gap: 1px; min-width: 64px; padding: 7px 8px; border-radius: 13px; background: #FAFAFA; text-align: center; box-shadow: 0 0 0 1px rgba(27, 58, 61,.07); }
.pf-fc__st b { font-size: 13.5px; white-space: nowrap; } .pf-fc__st span { font-size: 10.5px; color: var(--pf-mute, #65656b); white-space: nowrap; }
.pf-fc__acts { display: flex; gap: 8px; }
.pf-fc__acts a { display: grid; place-items: center; min-height: 42px; padding: 0 16px; border-radius: 13px; font-size: 13.5px; font-weight: 800; text-decoration: none; white-space: nowrap; transition: transform .2s; }
.pf-fc__pro { background: #FAFAFA; color: var(--pf-forest, #1b3a3d); box-shadow: 0 0 0 1.5px rgba(27, 58, 61,.2); }
.pf-fc__ask { background: linear-gradient(180deg, #21484c, var(--pf-forest, #1b3a3d)); color: #eef1f1; box-shadow: 0 8px 18px -4px rgba(27, 58, 61,.4); }
.pf-fc__acts a:hover { transform: translateY(-2px); }
@media (max-width: 1100px) and (min-width: 901px) { .pf-fc { grid-template-columns: minmax(0, 1fr) auto; } .pf-fc__st { display: none; } }
/* 거르기·목록: 따로 떠 있는 유리판 */
.gl-on .pf-body { gap: 22px; background: none; box-shadow: none; overflow: visible; grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
.gl-on .pf-side { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; scrollbar-width: thin; border: 0; border-radius: 26px; background: var(--pf-glass);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--pf-shadow), 0 0 0 1px rgba(255,255,255,.65) inset; }
.gl-on .pf-list { border-radius: 26px; background: var(--pf-glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--pf-shadow), 0 0 0 1px rgba(255,255,255,.65) inset; overflow: hidden; }
.gl-on .pf-bar { border-bottom-color: rgba(27, 58, 61,.07); }
.gl-on .pf-bar > * { border-left-color: rgba(27, 58, 61,.07); }
.gl-on .pf-chips { border-bottom: 0; }
/* 작품 카드: 칸 선 대신 떠 있는 카드 */
.gl-on .pf-grid { gap: 16px; padding: 4px 18px 20px; }
.gl-on .pf-card { border: 0 !important; border-radius: 22px; background: rgba(255,255,255,.82); box-shadow: 0 0 0 1px rgba(27, 58, 61,.07), 0 8px 20px -8px rgba(27, 58, 61,.22); }
.gl-on .pf-card:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px rgba(27, 58, 61,.1), 0 22px 40px -12px rgba(27, 58, 61,.34); background: #FAFAFA; }
.gl-on .pf-grid.is-list { gap: 12px; }
/* 쪽 넘기기: 둥근 단추 */
.gl-on .pf-pg { height: auto; gap: 6px; padding: 14px 18px 20px; border-top: 0; justify-content: center; }
.gl-on .pf-pg button { width: 44px; height: 44px; border: 0; border-radius: 14px; background: #FAFAFA; box-shadow: 0 0 0 1px rgba(27, 58, 61,.1); }
.gl-on .pf-pg__arr { width: 52px !important; }
.gl-on .pf-pg button.is-on { background: linear-gradient(180deg, #21484c, var(--pf-forest)); box-shadow: 0 8px 18px -4px rgba(27, 58, 61,.4); }
.gl-on .pf-pg button.is-on::after { display: none; }
.gl-on .pf-pg__gap { display: none; }
/* 아래 의뢰 띠 */
.gl-on .pf-askband { background: rgba(209, 231, 233, .62); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--pf-shadow), 0 0 0 1px rgba(255,255,255,.6) inset; }
.gl-on .pf-askband__ic { box-shadow: 0 8px 18px rgba(27, 58, 61,.15); }
@media (max-width: 900px) {
  .gl-on .pf-feat { grid-template-columns: minmax(0, 1fr); }
  .pf-fc { grid-template-columns: minmax(0, 1fr); }
  .pf-fc__st li { flex: 1; }
  .pf-fc__acts a { flex: 1; }
  .gl-on .pf-f1w > .pf-f1 { min-height: 250px; }
  .gl-on .pf-f2 { display: none; }
  .gl-on .pf-body { grid-template-columns: minmax(0, 1fr); }
  .gl-on .pf-side { position: fixed; top: auto; max-height: 84vh; border-radius: 26px 26px 0 0; background: rgba(245, 250, 250,.96); }
  .gl-on .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 4px 10px 14px; }
}
@media (prefers-reduced-motion: reduce) { .pf-fc { animation: none; } }

/* 11/07 2차: '이 영상을 만든 제작자'가 한눈에 — 영상과 제작자 띠를 한 장의 카드로 붙이고, 사진이 영상 아래 끝에 걸치게 */
.gl-on .pf-f1w { gap: 0; border-radius: 28px; overflow: hidden; background: rgba(245, 250, 250, .9); box-shadow: var(--pf-shadow), 0 0 0 1px rgba(255,255,255,.5) inset; }
.gl-on .pf-f1w > .pf-f1 { border-radius: 0; box-shadow: none; }
.gl-on .pf-f1w .pf-by { display: none; }
.gl-on .pf-f1w .pf-fc { position: relative; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding: 0 18px 16px 18px; animation: none; }
.gl-on .pf-f1w .pf-fc__av { width: 64px; height: 64px; margin-top: -26px; font-size: 24px; box-shadow: 0 0 0 4px #f5fafa, 0 10px 22px rgba(27, 58, 61,.35); }
.gl-on .pf-f1w .pf-fc__hd { align-items: flex-start; }
.gl-on .pf-f1w .pf-fc__nm { padding-top: 8px; gap: 3px; }
.gl-on .pf-f1w .pf-fc__nm b::before { content: none; }
.gl-on .pf-f1w .pf-fc__nm::before { content: '이 영상을 만든 제작자'; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--pf-terra, #208787); white-space: nowrap; }
.pf-fc__row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pf-fc__row:empty { display: none; }
.pf-fc__row .pf-fc__ws { margin: 0 !important; padding: 2px 8px 2px 7px; font-size: 11px; }
.gl-on .pf-f1w .pf-fc__st, .gl-on .pf-f1w .pf-fc__acts { padding-top: 12px; }
/* 영상 아래 끝에 '만든 사람' 연결 표시 */
.gl-on .pf-f1w .pf-f1::before { content: ''; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--pf-terra, #208787), #208888 40%, transparent); opacity: .9; }
/* 프로필 원이 영상 아래 선·영상에 가려 잘리지 않게 맨 위로 */
.gl-on .pf-f1w .pf-fc { z-index: 4; }
.gl-on .pf-f1w .pf-fc__av { position: relative; z-index: 5; }
/* 11/07 3차: 영상 아래 선이 프로필 원 위쪽으로 반원을 그리며 이어짐 */
.gl-on .pf-f1w .pf-f1::before { background: linear-gradient(90deg, var(--pf-terra, #208787) 0 130px, #208888 45%, transparent); }
.gl-on .pf-f1w .pf-fc__av { margin-top: -32px; }
.gl-on .pf-f1w .pf-fc__hd::before { content: ''; position: absolute; z-index: 6; left: -8px; top: -40px; width: 80px; height: 80px; box-sizing: border-box; border-radius: 50%;
  border: 4px solid transparent; border-top-color: var(--pf-terra, #208787); border-left-color: var(--pf-terra, #208787); transform: rotate(45deg); pointer-events: none; }
.gl-on .pf-f1w .pf-fc__av { box-shadow: 0 0 0 4px #f5fafa, 0 10px 22px rgba(27, 58, 61,.3); }

/* 11/07 '이번 주 추천' 고르는 기준 말풍선(커서·키보드 초점) */
.pf-tag--tip { position: relative; display: inline-flex; align-items: center; gap: 5px; cursor: help; }
.pf-tag__i { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; opacity: .75; }
.pf-tip { position: absolute; z-index: 20; left: 0; top: calc(100% + 10px); width: 270px; display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px; text-align: left; white-space: normal;
  background: rgba(245, 250, 250, .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #272728; font-size: 12.5px; font-weight: 500; letter-spacing: 0; line-height: 1.5;
  box-shadow: 0 0 0 1px rgba(27, 58, 61,.1), 0 18px 40px -10px rgba(0,0,0,.4); opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s, transform .25s cubic-bezier(.16,1,.3,1), visibility 0s .25s; pointer-events: none; }
.pf-tip::before { content: ''; position: absolute; left: 22px; top: -6px; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); box-shadow: -1px -1px 0 rgba(27, 58, 61,.08); }
.pf-tip b { font-size: 13.5px; color: var(--pf-forest, #1b3a3d); }
.pf-tip ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 2px 0 0; padding: 0; list-style: none; }
.pf-tip li { padding: 5px 8px; border-radius: 9px; background: #FAFAFA; box-shadow: 0 0 0 1px rgba(27, 58, 61,.07); font-size: 12px; }
.pf-tip em { font-style: normal; font-weight: 800; color: var(--pf-terra, #208787); }
.pf-tip small { font-size: 11.5px; color: var(--pf-mute, #65656b); }
.pf-tag--tip:hover .pf-tip, .pf-f1:focus-visible .pf-tip { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .25s cubic-bezier(.16,1,.3,1), visibility 0s; }
@media (hover: none) { .pf-tag__i { display: none; } }
/* 말풍선은 '이번 주 추천' 오른쪽으로(아래로 펼치면 영상 아래 제작자 사진에 가려서) */
.pf-tip { left: calc(100% + 12px); top: -10px; transform: translateX(-4px); }
.pf-tip::before { left: -6px; top: 16px; box-shadow: -1px 1px 0 rgba(27, 58, 61,.08); }
@media (max-width: 600px) { .pf-tip { left: 0; top: calc(100% + 10px); width: min(270px, 78vw); } .pf-tip::before { left: 22px; top: -6px; } }
.pf-tip strong { color: var(--pf-forest, #1b3a3d); }

/* ===== 11/08 대표: 포트폴리오 정리 — 테두리 한 겹, 영상 비율 그대로, 사진 위 표시는 길이만, 정보는 글 쪽, 목록 보기 가운데·오른쪽 채움, 거르기 칸 모양 통일 ===== */
/* 카드: 사진이 카드 위에 꽉 차게(테두리 한 겹) */
.gl-on .pf-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.gl-on .pf-th { border-radius: 0; aspect-ratio: 4 / 4.2; background: #dee3e3; }
.pf-th__bg { position: absolute; inset: -16px; width: calc(100% + 32px) !important; height: calc(100% + 32px) !important; object-fit: cover; filter: blur(18px) saturate(1.1) brightness(.92); transform: none !important; }
.gl-on .pf-th .pf-th__im { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.gl-on .pf-th.is-v .pf-th__im { filter: drop-shadow(0 6px 18px rgba(0,0,0,.25)); }
.gl-on .pf-meta { z-index: 2; left: auto; right: 10px; }
.gl-on .pf-new { z-index: 2; }
.gl-on .pf-hv { left: 0; right: 0; top: 0; aspect-ratio: 4 / 4.2; }
.gl-on .pf-cb { padding: 2px 16px 16px; }
.gl-on .pf-cb h3 { margin-top: 12px; }
.pf-inf { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; font-size: 12.5px; color: var(--pf-mute, #65656b); }
.pf-inf span + span::before { content: '·'; margin-right: 4px; color: #b7b7bc; }
.gl-on .pf-who { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(27, 58, 61,.07); }
.gl-on .pf-nm { text-decoration: none; font-weight: 600; color: #37373a; }
.gl-on .pf-nm:hover { text-decoration: underline; }
.pf-end { display: none; }
/* 목록 보기: 사진 | 제목·정보·제작자·도구 | 가격·단추 */
.gl-on .pf-grid.is-list .pf-card { display: grid; grid-template-columns: 220px minmax(0, 1fr) 190px; column-gap: 0; align-items: stretch; }
.gl-on .pf-grid.is-list .pf-th { aspect-ratio: auto; height: 100%; min-height: 150px; grid-row: auto; }
.gl-on .pf-grid.is-list .pf-hv { width: 220px; height: 100%; aspect-ratio: auto; }
.gl-on .pf-grid.is-list .pf-cb { align-self: center; padding: 16px 22px; }
.gl-on .pf-grid.is-list .pf-cb h3 { margin-top: 0; }
.gl-on .pf-grid.is-list .pf-won { display: none; }
.gl-on .pf-grid.is-list .pf-who { border-top: 0; padding-top: 0; margin-top: 8px; }
.gl-on .pf-grid.is-list .pf-end { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 8px; padding: 16px 18px; border-left: 1px solid rgba(27, 58, 61,.07); }
.pf-end__won { margin: 0 0 4px; display: grid; text-align: right; }
.pf-end__won small { font-size: 11.5px; color: var(--pf-mute, #65656b); }
.pf-end__won b { font-size: 18px; color: var(--pf-forest, #1b3a3d); }
.pf-end__go, .pf-end__ask { display: grid; place-items: center; min-height: 38px; border-radius: 12px; font-size: 13px; font-weight: 800; text-decoration: none; transition: transform .2s; }
.pf-end__go { background: #FAFAFA; color: var(--pf-forest, #1b3a3d); box-shadow: 0 0 0 1.5px rgba(27, 58, 61,.18); }
.pf-end__ask { background: linear-gradient(180deg, #21484c, var(--pf-forest, #1b3a3d)); color: #eef1f1; }
.pf-end__go:hover, .pf-end__ask:hover { transform: translateY(-1px); }
.gl-on .pf-grid.is-list .pf-card:hover .pf-th__im { filter: brightness(.72); }
/* 위 정렬 줄: 칸 선 없이 가볍게, 보기 단추는 한 묶음 */
.gl-on .pf-bar { display: flex; align-items: center; gap: 10px; height: auto; padding: 14px 18px 4px; border-bottom: 0; }
.gl-on .pf-bar > * { border-left: 0 !important; padding: 0; }
.gl-on .pf-bar .pf-sel { gap: 8px; padding: 0 6px 0 14px; height: 40px; border-radius: 12px; background: #FAFAFA; box-shadow: 0 0 0 1px rgba(27, 58, 61,.08); }
.gl-on .pf-bar .pf-sel:first-child { margin-right: 0; }
.gl-on #pf-v-grid { margin-left: auto; }
.gl-on .pf-vw { width: 40px; height: 40px; border-radius: 12px; background: #FAFAFA; box-shadow: 0 0 0 1px rgba(27, 58, 61,.08); }
.gl-on .pf-vw[aria-pressed="true"] { background: var(--pf-forest, #1b3a3d); color: #eef1f1; box-shadow: none; }
/* 찜한 제작자: 목록 판 오른쪽 위 작은 링크로 */
.gl-on .pf-list { position: relative; overflow: visible; }
.gl-on .pf-saved { position: absolute; right: 8px; top: -30px; font-size: 13px; font-weight: 700; letter-spacing: 0; }
/* 거르기 칸: 모두 같은 모양(흰 알약, 고르면 초록) */
.gl-on .pf-grp.is-soft { background: none; }
.gl-on .pf-cat { padding: 7px 10px; margin: 1px 0; border-radius: 10px; }
.gl-on .pf-cat:hover { padding-left: 10px; background: rgba(27, 58, 61,.05); }
.gl-on .pf-cat.is-on { padding-left: 10px; background: var(--pf-forest, #1b3a3d); color: #eef1f1; }
.gl-on .pf-cat.is-on b { color: rgba(238, 241, 241,.7); }
.gl-on .pf-cat.is-on::before { display: none; }
.gl-on .pf-ratio { gap: 6px; }
.gl-on .pf-ratio button { flex-direction: row; justify-content: center; gap: 6px; padding: 9px 4px; border-radius: 999px; }
.gl-on .pf-ratio button:hover { transform: none; background: rgba(27, 58, 61,.05); }
.gl-on .pf-ratio button.is-on { box-shadow: none; }
.gl-on .pf-ratio .pf-shape--v { width: 8px; height: 13px; } .gl-on .pf-ratio .pf-shape--h { width: 14px; height: 9px; } .gl-on .pf-ratio .pf-shape--s { width: 11px; height: 11px; }
.gl-on .pf-ratio .pf-shape { border-width: 1.6px; border-radius: 2px; }
.gl-on .pf-len { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; border-radius: 0; overflow: visible; box-shadow: none; }
.gl-on .pf-len button { border: 0 !important; border-radius: 999px; padding: 9px 0; box-shadow: 0 0 0 1px var(--pf-line); }
.gl-on .pf-len button.is-on { background: var(--pf-forest, #1b3a3d); color: #eef1f1; box-shadow: none; }
.gl-on .pf-tools button.is-on { background: var(--pf-forest, #1b3a3d); color: #eef1f1; }
@media (max-width: 900px) {
  .gl-on .pf-grid.is-list .pf-card { display: flex; }
  .gl-on .pf-grid.is-list .pf-th { aspect-ratio: 4 / 4.2; height: auto; min-height: 0; }
  .gl-on .pf-grid.is-list .pf-hv { width: auto; aspect-ratio: 4 / 4.2; height: auto; }
  .gl-on .pf-grid.is-list .pf-end { display: none; }
  .gl-on .pf-grid.is-list .pf-won { display: inline; }
  .gl-on .pf-cb { padding: 2px 10px 12px; }
  .gl-on .pf-saved { position: static; }
  .gl-on .pf-bar { flex-wrap: wrap; }
}
.gl-on .pf-th .pf-th__im { position: absolute; inset: 0; }
.gl-on .pf-grid.is-list .pf-th { height: 170px; min-height: 0; }
.gl-on .pf-grid.is-list .pf-hv { height: 170px; }
.gl-on .pf-who { flex-wrap: nowrap; min-width: 0; }
.gl-on .pf-who > :not(.pf-av):not(.pf-won) { flex-wrap: nowrap; }
.gl-on .pf-nm { min-width: 0; flex: 0 1 auto; }

/* ===== 11/08 대표 2차: 흰색 줄이고 사이트 분위기대로 유리 — 판·카드·거르기 모두 반투명 + 은은한 색 번짐 + 움직임 ===== */
.pf-main { position: relative; }
.pf-main::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40vw 40vw at 85% 30%, rgba(114, 168, 174,.28), transparent 70%), radial-gradient(36vw 36vw at 10% 75%, rgba(32, 136, 136,.2), transparent 70%), radial-gradient(30vw 30vw at 50% 105%, rgba(227, 242, 241,.22), transparent 70%);
  animation: pf-drift 26s ease-in-out infinite alternate; }
@keyframes pf-drift { to { transform: translate(-2vw, 1.5vh) scale(1.04); } }
.gl-on .pf-list, .gl-on .pf-side { background: linear-gradient(160deg, rgba(255,255,255,.42), rgba(229, 241, 243,.32)) !important; -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 0 0 1px rgba(27, 58, 61,.06), 0 20px 50px -20px rgba(27, 58, 61,.3) !important; }
.gl-on .pf-sh, .gl-on .pf-grp { border-bottom-color: rgba(27, 58, 61,.07); }
/* 카드: 흰 판 대신 유리 */
.gl-on .pf-card { background: linear-gradient(170deg, rgba(255,255,255,.62), rgba(239, 247, 248,.38)); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(255,255,255,.75) inset, 0 0 0 1px rgba(27, 58, 61,.06), 0 10px 26px -12px rgba(27, 58, 61,.3); }
.gl-on .pf-card::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 3; pointer-events: none; background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-12deg); opacity: 0; }
.gl-on .pf-card:hover { background: linear-gradient(170deg, rgba(255,255,255,.8), rgba(230, 242, 243,.55)); box-shadow: 0 0 0 1px rgba(255,255,255,.85) inset, 0 0 0 1.5px rgba(88, 141, 147,.35), 0 26px 44px -16px rgba(27, 58, 61,.42); }
.gl-on .pf-card:hover::after { opacity: 1; animation: pf-sheen .9s cubic-bezier(.16,1,.3,1); left: 130%; }
@keyframes pf-sheen { from { left: -60%; } to { left: 130%; } }
.gl-on .pf-who { border-top-color: rgba(27, 58, 61,.08); }
.gl-on .pf-meta span { background: rgba(255,255,255,.28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(255,255,255,.45) inset; }
.gl-on .pf-new { background: rgba(27, 58, 61,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* 사진 아래 끝에 옅은 초록 빛줄 — 카드가 하나로 이어져 보이게 */
.gl-on .pf-th::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, transparent, rgba(114, 168, 174,.8), transparent); opacity: .7; }
/* 위 정렬 줄·단추도 유리 */
.gl-on .pf-bar .pf-sel, .gl-on .pf-vw { background: rgba(255,255,255,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 0 0 1px rgba(27, 58, 61,.07); }
.gl-on .pf-vw[aria-pressed="true"] { background: linear-gradient(180deg, #21484c, var(--pf-forest, #1b3a3d)); }
/* 거르기: 고른 줄은 초록, 나머지는 유리 알약 */
.gl-on .pf-cat.is-on { background: linear-gradient(180deg, #21484c, var(--pf-forest, #1b3a3d)); box-shadow: 0 8px 18px -8px rgba(27, 58, 61,.5); }
.gl-on .pf-cat:hover { background: rgba(255,255,255,.5); }
.gl-on .pf-ratio button, .gl-on .pf-len button, .gl-on .pf-tools button { background: rgba(255,255,255,.5); box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 0 0 1px rgba(27, 58, 61,.08); }
/* 목록 보기 오른쪽 칸 */
.gl-on .pf-grid.is-list .pf-end { border-left-color: rgba(27, 58, 61,.07); background: rgba(255,255,255,.18); }
.gl-on .pf-end__go { background: rgba(255,255,255,.6); }
@media (prefers-reduced-motion: reduce) { .pf-main::before, .gl-on .pf-card:hover::after { animation: none !important; } }
/* 커서 올려도 글자색은 그대로(예전 초록 칠하기 방식 끔) + 조금 더 색이 보이게 */
.gl-on .pf-card:hover, .gl-on .pf-card:focus-within { color: inherit; border-radius: 22px; }
.gl-on .pf-card:hover .pf-who, .gl-on .pf-card:focus-within .pf-who { color: var(--pf-mute, #65656b); }
.gl-on .pf-card:hover .pf-won, .gl-on .pf-card:focus-within .pf-won { color: var(--pf-forest, #1b3a3d); }
.gl-on .pf-card:hover .pf-tl span { background: var(--pf-sage); color: var(--pf-forest); }
.gl-on .pf-card:hover .pf-meta { opacity: 1; }
.gl-on .pf-list, .gl-on .pf-side { background: linear-gradient(160deg, rgba(255,255,255,.3), rgba(213, 233, 235,.24)) !important; }
.gl-on .pf-card { background: linear-gradient(170deg, rgba(255,255,255,.5), rgba(223, 238, 240,.34)); }
.pf-main::before { background: radial-gradient(42vw 42vw at 85% 30%, rgba(114, 168, 174,.4), transparent 70%), radial-gradient(38vw 38vw at 8% 70%, rgba(32, 136, 136,.28), transparent 70%), radial-gradient(32vw 32vw at 50% 105%, rgba(227, 242, 241,.3), transparent 70%); }
/* 11/08 대표: 필터 글자 더 굵게(고른 줄·제목 계층은 그대로) */
.gl-on .pf-sh h2 { font-size: 17px; font-weight: 800; }
.gl-on .pf-reset { font-weight: 700; color: #46464b; }
.gl-on .pf-gh { font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.gl-on .pf-cat { font-weight: 600; color: #2a2a2c; }
.gl-on .pf-cat b { font-weight: 700; color: #7f7f86; }
.gl-on .pf-cat.is-on { font-weight: 800; }
.gl-on .pf-ratio button, .gl-on .pf-len button, .gl-on .pf-tools button { font-weight: 800; color: #37373a; }
.gl-on .pf-ratio button.is-on, .gl-on .pf-len button.is-on, .gl-on .pf-tools button.is-on { color: #eef1f1; }
.gl-on .pf-rv { font-weight: 700; color: #46464b; }
.gl-on .pf-note { font-weight: 600; color: #7f7f86; }
.gl-on .pf-chk { font-weight: 600; color: #2a2a2c; }
/* 11/08 대표: 포트폴리오 화면 제목 글꼴만 SUIT(무료 상업용, SIL OFL — assets/fonts/LICENSE-SUIT.txt). 로고·메뉴는 그대로 */
.pf-main h1, .pf-main h2, .pf-main h3 { letter-spacing: -.025em; }
.pf-main .pf-cb h3 { font-weight: 700; }
/* 11/08 대표: '찜한 제작자'는 판 밖에 떠 있지 않게 — 정렬 줄 오른쪽 끝 유리 알약 단추로 */
.gl-on .pf-saved { position: static; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 12px !important; border-radius: 12px; font-size: 13px; font-weight: 800;
  background: rgba(255,255,255,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 0 0 1px rgba(27, 58, 61,.07); transition: background .2s, transform .2s; }
.gl-on .pf-saved .pf-heart { width: 15px; height: 15px; fill: #26baba; stroke: none; }
.gl-on .pf-saved:hover { background: rgba(255,255,255,.75); transform: translateY(-1px); }
@media (max-width: 900px) { .gl-on .pf-saved { margin-left: auto; } }
/* 11/08 대표: 카드 제작자 별점 */
.pf-star { flex: none; font-size: 12.5px; font-weight: 800; color: #b97a10; white-space: nowrap; }
.pf-star i { font-style: normal; font-weight: 600; color: #98989e; }

/* ===== 11/08 대표: 작품 카드 A안 — 사진 꽉 + 투명한 유리판(제목·제작자·가격·의뢰 단추) + 커서 올리면 '영상 보기' (격자 보기만) ===== */
.pf-cta { display: none; }
.gl-on .pf-grid:not(.is-list) .pf-card { position: relative; overflow: hidden; }
.gl-on .pf-grid:not(.is-list) .pf-th { aspect-ratio: 3 / 4.9; border-radius: 0; }
.gl-on .pf-grid:not(.is-list) .pf-th .pf-th__im { object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1), filter .3s; }
.gl-on .pf-grid:not(.is-list) .pf-th__bg { display: none; }
.gl-on .pf-grid:not(.is-list) .pf-meta { top: 12px; bottom: auto; left: 12px; right: auto; }
.gl-on .pf-grid:not(.is-list) .pf-inf { display: none; }
.gl-on .pf-grid:not(.is-list) .pf-cb { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; margin: 10px; padding: 14px 14px 12px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(245, 250, 250,.58)); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 0 0 1px rgba(255,255,255,.65) inset, 0 10px 24px -10px rgba(0,0,0,.3); }
.gl-on .pf-grid:not(.is-list) .pf-cb h3 { margin-top: 0; color: #1e2a2b; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.gl-on .pf-grid:not(.is-list) .pf-who { flex-wrap: wrap; row-gap: 4px; border-top-color: rgba(27, 58, 61,.12); color: #37373a; }
.gl-on .pf-grid:not(.is-list) .pf-nm { flex: 0 1 auto; max-width: none; min-width: 0; overflow: visible; color: #1e2a2b; }
.gl-on .pf-grid:not(.is-list) .pf-won { margin-left: auto; }
.gl-on .pf-grid:not(.is-list) .pf-cta { display: flex; justify-content: center; align-items: center; min-height: 40px; margin-top: 12px; border-radius: 12px; text-decoration: none;
  background: linear-gradient(180deg, #21484c, #1b3a3d); color: #eef1f1; font-weight: 800; font-size: 13.5px; transition: background .2s, transform .2s; }
.gl-on .pf-grid:not(.is-list) .pf-card:hover .pf-cta { background: #208787; }
.gl-on .pf-grid:not(.is-list) .pf-cta:hover { transform: translateY(-1px); }
/* 커서 올리면: 사진 부분에 유리 ▶ '영상 보기' (찜·신고는 오른쪽 위 작은 단추) */
.gl-on .pf-grid:not(.is-list) .pf-hv { left: 0; right: 0; top: 0; bottom: auto; height: calc(100% - var(--ph, 190px)); aspect-ratio: auto; transform: none; z-index: 5; flex-direction: column; justify-content: center; }
.gl-on .pf-grid:not(.is-list) .pf-ask { display: none; }
.gl-on .pf-grid:not(.is-list) .pf-hv__row { display: contents; }
.gl-on .pf-grid:not(.is-list) .pf-hv__go { flex-direction: column; gap: 10px; height: auto; padding: 0; background: none; box-shadow: none; color: #fff; font-size: 15px; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.gl-on .pf-grid:not(.is-list) .pf-hv__go .pf-ic { width: 30px; height: 30px; padding: 22px; box-sizing: content-box; border-radius: 50%; background: rgba(255,255,255,.28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset, 0 10px 24px rgba(0,0,0,.3); color: #fff; transition: transform .3s cubic-bezier(.34,1.5,.64,1); }
.gl-on .pf-grid:not(.is-list) .pf-card:hover .pf-hv__go .pf-ic { transform: scale(1.08); }
.gl-on .pf-grid:not(.is-list) .pf-hv__c { position: absolute; top: 44px; right: 12px; width: 34px; height: 34px; }
.gl-on .pf-grid:not(.is-list) .pf-hv__c + .pf-hv__c { top: 84px; }
.gl-on .pf-grid:not(.is-list) .pf-card:hover .pf-th .pf-th__im { filter: brightness(.82); transform: scale(1.04); }
.gl-on .pf-grid:not(.is-list) .pf-card:hover { background: rgba(255,255,255,.82); }
@media (max-width: 900px) {
  .gl-on .pf-grid:not(.is-list) .pf-th { aspect-ratio: 3 / 5.2; }
  .gl-on .pf-grid:not(.is-list) .pf-cb { margin: 6px; padding: 10px 10px 8px; border-radius: 14px; }
  .gl-on .pf-grid:not(.is-list) .pf-cb h3 { font-size: 14px; }
  .gl-on .pf-grid:not(.is-list) .pf-cta { min-height: 32px; margin-top: 8px; font-size: 0; }
  .gl-on .pf-grid:not(.is-list) .pf-cta::after { content: '의뢰하기 →'; font-size: 12.5px; }
  .gl-on .pf-grid:not(.is-list) .pf-th { aspect-ratio: 3 / 5.4; }
  .gl-on .pf-grid:not(.is-list) .pf-who { margin-top: 6px; padding-top: 6px; font-size: 11.5px; }
  .gl-on .pf-grid:not(.is-list) .pf-who > :not(.pf-av):not(.pf-nm):not(.pf-won) { display: none; }
  .gl-on .pf-grid:not(.is-list) .pf-who .pf-av { width: 20px; height: 20px; font-size: 10px; }
  .gl-on .pf-grid:not(.is-list) .pf-won { width: 100%; margin-left: 0; font-size: 12.5px; }
}
/* 11/08 대표: 길이 표시 빼고, 그 자리(왼쪽 위)에 찜·신고 작은 단추 — 소리 단추처럼 */
.gl-on .pf-grid:not(.is-list) .pf-meta { display: none; }
.pf-mini { position: absolute; z-index: 6; left: 12px; top: 12px; display: flex; gap: 6px; }
.pf-mini .pf-hv__c { position: static !important; width: 32px !important; height: 32px !important; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(27, 58, 61,.72) !important; color: #fff !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 12px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.15) inset; transition: transform .2s, background .2s; }
.pf-mini .pf-hv__c:hover { transform: scale(1.08); background: rgba(27, 58, 61,.9) !important; }
.pf-mini .pf-hv__c svg { width: 15px; height: 15px; }
.pf-mini .pf-hv__c.fav[aria-pressed="true"] { background: #FAFAFA !important; color: #26baba !important; }
.gl-on .pf-grid.is-list .pf-mini { left: 10px; top: 10px; }
.pf-mini .pf-hv__c { min-height: 0 !important; min-width: 0 !important; }

/* ===== 11/08 대표: 목록 보기 8안 — 사진 꽉, 커서 올리면 영상 보기·테라코타 선·살짝 밀림·의뢰 단추 테라코타, 줄이 차례로 들어옴 (PC) ===== */
@media (min-width: 901px) {
.gl-on .pf-grid.is-list .pf-th .pf-th__im{object-fit:cover !important;transition:transform .6s cubic-bezier(.16,1,.3,1),filter .3s}.gl-on .pf-grid.is-list .pf-th__bg{display:none}.gl-on .pf-grid.is-list .pf-meta{display:none}
.gl-on .pf-grid.is-list .pf-hv{left:0 !important;top:0 !important;right:auto !important;bottom:0 !important;width:var(--tw,220px) !important;height:auto !important;aspect-ratio:auto !important;transform:none !important;flex-direction:column;justify-content:center;z-index:5}
.gl-on .pf-grid.is-list .pf-ask,.gl-on .pf-grid.is-list .pf-hv__row .pf-hv__c{display:none !important}.gl-on .pf-grid.is-list .pf-hv__row{display:contents}
.gl-on .pf-grid.is-list .pf-hv__go{flex-direction:column;gap:8px;height:auto !important;padding:0 !important;background:none !important;box-shadow:none !important;color:#fff !important;font-size:14px;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.gl-on .pf-grid.is-list .pf-hv__go .pf-ic{width:22px !important;height:22px !important;padding:16px;box-sizing:content-box;border-radius:50%;background:rgba(255,255,255,.28);backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(255,255,255,.6) inset,0 8px 20px rgba(0,0,0,.3);transition:transform .3s cubic-bezier(.34,1.5,.64,1)}
.gl-on .pf-grid.is-list .pf-card:hover .pf-hv__go .pf-ic{transform:scale(1.1)}.gl-on .pf-grid.is-list .pf-card:hover .pf-th .pf-th__im{filter:brightness(.8);transform:scale(1.05)}
.gl-on .pf-grid.is-list .pf-card{overflow:hidden;animation:pl-in .55s cubic-bezier(.16,1,.3,1) both !important;opacity:1}.gl-on .pf-grid.is-list .pf-card:nth-child(2){animation-delay:.06s !important}.gl-on .pf-grid.is-list .pf-card:nth-child(3){animation-delay:.12s !important}.gl-on .pf-grid.is-list .pf-card:nth-child(n+4){animation-delay:.18s !important}
@keyframes pl-in{from{opacity:0;transform:translateX(-14px)}}
.gl-on .pf-grid.is-list .pf-end__ask{transition:background .2s,transform .2s}.gl-on .pf-grid.is-list .pf-card:hover .pf-end__ask{background:#208787}
.gl-on .pf-grid.is-list .pf-nm{max-width:none !important;overflow:visible !important}
.gl-on .pf-grid.is-list .pf-card{--tw:240px;grid-template-columns:240px minmax(0,1fr) 200px!important;position:relative}.gl-on .pf-grid.is-list .pf-card::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(#208787,#208888);transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.16,1,.3,1);z-index:6}.gl-on .pf-grid.is-list .pf-card:hover::after{transform:scaleY(1)}
.gl-on .pf-grid.is-list .pf-th{height:170px!important;border-radius:0!important}.gl-on .pf-grid.is-list .pf-card:hover{transform:translateX(4px)!important}.gl-on .pf-grid.is-list .pf-end__won b{color:#208787}
}
/* 11/08 고침: 고른 비율·길이·도구 단추가 흰 글자에 흰 바탕으로 사라지던 것 → 진초록으로 표시 */
.gl-on .pf-ratio button.is-on, .gl-on .pf-len button.is-on, .gl-on .pf-tools button.is-on, .gl-on .pf-ratio button[aria-pressed="true"], .gl-on .pf-len button[aria-pressed="true"], .gl-on .pf-tools button[aria-pressed="true"] {
  background: linear-gradient(180deg, #21484c, #1b3a3d) !important; color: #eef1f1 !important; box-shadow: 0 6px 14px -6px rgba(27, 58, 61,.5) !important; }
.gl-on .pf-ratio button.is-on .pf-shape { border-color: #eef1f1; }
/* 11/08 대표: 멤버 카드 아래 — 얼굴 줄 + 흐르는 작품 썸네일(시안 10번) */
.gl-on .pf-f2.has-mb .pf-ft { top: 30px; }
.gl-on .pf-f2.has-mb .pf-ph { top: 28px; } .gl-on .pf-f2.has-mb .pf-ph.is-b { top: 62px; }
.pf-mb { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 3; display: block; padding: 12px 14px; border: 0; border-radius: 18px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(255,255,255,.85) inset, 0 10px 24px -14px rgba(27, 58, 61,.4);
  transition: background .25s, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .25s; animation: pf-mb-in .6s .35s cubic-bezier(.16,1,.3,1) both; }
@keyframes pf-mb-in { from { opacity: 0; transform: translateY(12px); } }
.pf-mb:hover { background: rgba(255,255,255,.88); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.9) inset, 0 16px 30px -14px rgba(27, 58, 61,.5); }
.pf-mb:focus-visible { outline: 2px solid var(--pf-forest, #1b3a3d); outline-offset: 3px; }
.pf-mb__row { display: flex; align-items: center; gap: 12px; }
.pf-mb__av { display: flex; flex: none; }
.pf-mb__av i { display: grid; place-items: center; width: 30px; height: 30px; margin-left: -8px; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 800; color: #eef1f1; box-shadow: 0 0 0 2.5px #e7f2f4; transition: transform .3s cubic-bezier(.3,1.5,.5,1); }
.pf-mb__av i:first-child { margin-left: 0; }
.pf-mb__av i.is-more { background: #8a6d3b; font-size: 11px; }
.pf-mb:hover .pf-mb__av i { transform: translateY(-2px); } .pf-mb:hover .pf-mb__av i:nth-child(2) { transition-delay: .04s; } .pf-mb:hover .pf-mb__av i:nth-child(3) { transition-delay: .08s; } .pf-mb:hover .pf-mb__av i:nth-child(4) { transition-delay: .12s; }
.pf-mb__tx { flex: 1; min-width: 0; }
.pf-mb__tx b { display: block; font-size: 14px; color: #1e2a2b; }
.pf-mb__tx small { display: block; font-size: 12px; color: #65656b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-mb__go { flex: none; width: 20px; height: 20px; fill: none; stroke: #1b3a3d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.pf-mb:hover .pf-mb__go { transform: translateX(3px); }
.pf-mb__mq { display: block; margin-top: 10px; overflow: hidden; }
.pf-mb__mq.is-run { -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.pf-mb__tr { display: flex; gap: 6px; width: max-content; }
.pf-mb__mq.is-run .pf-mb__tr { animation: pf-mb-mq 32s linear infinite; }
.pf-mb:hover .pf-mb__tr { animation-play-state: paused; }
@keyframes pf-mb-mq { to { transform: translateX(calc(-50% - 3px)); } }
.pf-mb__tr img { width: 44px; height: 62px; object-fit: cover; border-radius: 9px; display: block; }
@media (prefers-reduced-motion: reduce) { .pf-mb { animation: none; } .pf-mb__mq.is-run .pf-mb__tr { animation: none; } }
/* 11/08 대표: 작품 카드에 마우스를 올리면 나오는 '영상 보기' — 큰 동그라미 대신 작은 유리 알약(▶ 동그라미 + 글자 한 줄) */
.gl-on .pf-grid .pf-hv__go, .gl-on .pf-grid.is-list .pf-hv__go { flex-direction: row !important; gap: 9px !important; height: 40px !important; padding: 0 16px 0 6px !important; border-radius: 999px !important;
  background: rgba(18, 24, 24, .46) !important; -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 0 0 1px rgba(255,255,255,.28) inset, 0 10px 24px -8px rgba(0,0,0,.45) !important; color: #fff !important; font-size: 13.5px !important; font-weight: 700; letter-spacing: -.01em; text-shadow: none !important;
  transform: translateY(6px) scale(.94); transition: transform .35s cubic-bezier(.16,1,.3,1), background .2s, box-shadow .2s; }
.gl-on .pf-grid .pf-hv__go .pf-ic, .gl-on .pf-grid.is-list .pf-hv__go .pf-ic { width: 12px !important; height: 12px !important; padding: 8px !important; box-sizing: content-box; margin: 0; border-radius: 50%;
  background: #FAFAFA !important; color: var(--pf-forest, #1b3a3d); fill: currentColor; box-shadow: 0 2px 8px rgba(0,0,0,.25) !important; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none !important; transition: background .2s, color .2s; }
.gl-on .pf-grid .pf-card:hover .pf-hv__go, .gl-on .pf-grid .pf-card:focus-within .pf-hv__go { transform: none; }
.gl-on .pf-grid .pf-hv__go:hover { background: rgba(18, 24, 24, .62) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.4) inset, 0 12px 28px -8px rgba(0,0,0,.55) !important; }
.gl-on .pf-grid .pf-hv__go:hover .pf-ic { background: var(--pf-terra, #208787) !important; color: #fff; }
@media (prefers-reduced-motion: reduce) { .gl-on .pf-grid .pf-hv__go { transform: none; transition: none; } }
.gl-on .pf-grid .pf-hv__go .pf-ic, .gl-on .pf-grid .pf-hv__go .pf-ic * { color: #1b3a3d !important; fill: #1b3a3d !important; stroke: none !important; }
.gl-on .pf-grid .pf-hv__go:hover .pf-ic, .gl-on .pf-grid .pf-hv__go:hover .pf-ic * { color: #fff !important; fill: #fff !important; }
.gl-on .pf-grid .pf-hv__go .pf-ic { padding: 8px 7px 8px 9px !important; }
/* 11/08 대표: '밀어서 영상 보기' — 아이폰 잠금 해제처럼 ▶를 오른쪽 끝까지 밀면 열림 */
.pf-sl { --p: 0; position: relative; width: 196px; height: 46px; border-radius: 999px; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none;
  background: rgba(18, 24, 24, .5); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 0 0 1px rgba(255,255,255,.26) inset, 0 12px 28px -8px rgba(0,0,0,.5); transform: translateY(6px) scale(.94); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.gl-on .pf-grid .pf-card:hover .pf-sl, .gl-on .pf-grid .pf-card:focus-within .pf-sl { transform: none; }
.pf-sl__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(32, 135, 135,.0), rgba(32, 135, 135,.55)); pointer-events: none; }
.pf-sl__tx { position: absolute; inset: 0 14px 0 50px; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; pointer-events: none;
  color: transparent; background: linear-gradient(100deg, rgba(255,255,255,.55) 0 35%, #FAFAFA 45% 55%, rgba(255,255,255,.55) 65% 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text;
  opacity: calc(1 - var(--p) * 1.6); animation: pf-sl-shine 2.4s linear infinite; }
@keyframes pf-sl-shine { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.pf-sl__k { position: absolute; left: 4px; top: 4px; z-index: 2; width: 38px; height: 38px; min-height: 0 !important; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: grab;
  background: #FAFAFA; color: #1b3a3d; box-shadow: 0 4px 12px rgba(0,0,0,.3); touch-action: none; transition: background .2s, color .2s; }
.pf-sl__k .pf-ic { width: 13px; height: 13px; margin-left: 2px; fill: currentColor; }
.pf-sl__k .pf-ic path { fill: currentColor; }
.pf-sl.is-drag .pf-sl__k { cursor: grabbing; background: #f4f8f8; }
.pf-sl__k:hover { color: #208787; }
.pf-sl__k:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pf-sl.is-anim .pf-sl__k { transition: transform .38s cubic-bezier(.16,1,.3,1), background .2s, color .2s; }
.pf-sl.is-anim .pf-sl__fill { transition: width .38s cubic-bezier(.16,1,.3,1); }
.pf-sl.is-done .pf-sl__k { background: #208787; color: #fff; }
.pf-sl.is-nudge .pf-sl__k { animation: pf-sl-nudge .6s cubic-bezier(.3,1.5,.5,1); }
@keyframes pf-sl-nudge { 35% { transform: translateX(22px); } 100% { transform: translateX(0); } }
/* 영상 보고 돌아왔을 때 카드 위 단추가 남아 있지 않게(마우스로 누른 포커스는 무시, 키보드 포커스만) */
.gl-on .pf-grid .pf-card:not(:hover):focus-within:not(:has(:focus-visible)) .pf-hv { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) { .pf-sl, .pf-sl__tx { animation: none; transition: none; } .pf-sl__tx { color: #fff; background: none; } }
/* 11/08 대표: 알약 크기를 예전 '영상 보기' 알약만큼 작게(글자는 '영상 보기', 빛이 지나가며 밀라는 신호) */
.pf-sl { width: 124px; height: 38px; }
.pf-sl__k { left: 4px; top: 4px; width: 30px; height: 30px; }
.pf-sl__k .pf-ic { width: 11px; height: 11px; }
.pf-sl__tx { inset: 0 12px 0 38px; font-size: 13px; }
/* 11/08 대표: 맨 위 'PORTFOLIO · 제작자들의 작업물' — 유리판 + 쓰는 법 칩 3개 + 빛 스침 */
.gl-on .pf-band { position: relative; max-width: 1120px; margin: 26px auto 18px; padding: 34px 28px 28px; box-sizing: border-box; border-radius: 30px; overflow: hidden;
  background: linear-gradient(155deg, rgba(255,255,255,.7), rgba(240, 242, 242,.45)); -webkit-backdrop-filter: blur(20px) saturate(1.15); backdrop-filter: blur(20px) saturate(1.15);
  box-shadow: 0 0 0 1px rgba(255,255,255,.85) inset, 0 0 0 1px rgba(27, 58, 61,.06), 0 24px 54px -28px rgba(27, 58, 61,.42); }
.gl-on .pf-band::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-100%); }
.gl-on .pf-band__eb { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.75); box-shadow: 0 0 0 1px rgba(32, 135, 135,.18); font-size: 12px; font-weight: 800; letter-spacing: .16em; color: var(--pf-terra, #208787); }
.gl-on .pf-band__eb::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.gl-on .pf-band__h { margin-top: 14px; font-family: var(--font-brand-sans, 'SUIT', sans-serif); font-weight: 800; letter-spacing: -.035em; color: #1e2a2b; }
.gl-on .pf-band__p { font-weight: 500; color: #4a524b; }
.pf-band__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.pf-band__chips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: 999px; background: rgba(255,255,255,.72); box-shadow: 0 0 0 1px rgba(27, 58, 61,.1), 0 6px 14px -10px rgba(27, 58, 61,.4); font-size: 13px; font-weight: 700; color: #1b3a3d; }
.pf-band__chips i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1b3a3d; color: #eef1f1; font-style: normal; font-size: 10px; }
.pf-band__chips li:nth-child(2) i { background: var(--pf-terra, #208787); }
@media (max-width: 760px) { .gl-on .pf-band { margin: 14px 12px 12px; padding: 26px 16px 20px; border-radius: 24px; } .pf-band__chips li:nth-child(2) { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .gl-on .pf-band { animation: pf-band-in .7s cubic-bezier(.16,1,.3,1) both; }
  .gl-on .pf-band::before { animation: pf-band-shine 1.4s .5s cubic-bezier(.4,0,.2,1) both; }
  .pf-band__chips li { animation: pf-band-in .55s cubic-bezier(.16,1,.3,1) both; }
  .pf-band__chips li:nth-child(1) { animation-delay: .25s; } .pf-band__chips li:nth-child(2) { animation-delay: .33s; } .pf-band__chips li:nth-child(3) { animation-delay: .41s; }
}
@keyframes pf-band-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes pf-band-shine { to { transform: translateX(100%); } }
/* 11/08 대표: 업종 고르면 줄 전체 색 대신 앞에 초록 체크만 */
.gl-on .pf-cat.is-on, .gl-on .pf-cat.is-on:hover { background: transparent; box-shadow: none; color: var(--pf-forest, #1b3a3d); padding-left: 32px; }
.gl-on .pf-cat.is-on b { color: #7f7f86; }
.gl-on .pf-cat.is-on::before { display: block; content: ''; position: absolute; left: 9px; top: 50%; width: 16px; height: 16px; margin-top: 0; translate: 0 -50%; border-radius: 50%; background: #297780
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 8.3l2.4 2.4 5-5.2' fill='none' stroke='%23FAFAFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  animation: pf-chk .3s cubic-bezier(.3,1.5,.5,1); }
@keyframes pf-chk { from { scale: .4; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gl-on .pf-cat.is-on::before { animation: none; } }
/* 11/09 가상 고객 시험: 누르면 "밀어서 열기 ›" 안내(글자 흐름 멈춤) */
.pf-sl.is-hint .pf-sl__tx { animation: none; color: #fff; background: none; }