/* 11/08 대표: '제작자 찾기' 한 메뉴 안에 [작품 보기 | 제작자 보기] 탭(portfolio.html ↔ creators.html) */
.fsw { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin: 18px auto 0; padding: 5px; border-radius: 18px;
  background: rgba(27, 58, 61,.07); box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset; }
.fsw a { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 150px; min-height: 44px; padding: 0 18px; border-radius: 14px;
  font-size: 15px; font-weight: 700; color: #5b6a6c; text-decoration: none; transition: color .25s; }
.fsw a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fsw a:hover { color: #1b3a3d; }
.fsw a[aria-current="page"] { color: #eef1f1; }
.fsw::before { content: ''; position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 14px; background: linear-gradient(180deg, #275257, #1b3a3d); box-shadow: 0 8px 18px -8px rgba(27, 58, 61,.6); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.fsw.is-right::before { transform: translateX(100%); }
.fsw.is-go::before { transition-duration: .3s; }
.fsw a:focus-visible { outline: 2px solid #1b3a3d; outline-offset: 2px; }
@media (max-width: 420px) { .fsw a { min-width: 0; padding: 0 12px; font-size: 14px; } }
/* 제작자 보기 화면 머리(포트폴리오와 같은 유리판) */
.cs-band { position: relative; max-width: 1120px; margin: 26px auto 22px; padding: 34px 28px 26px; box-sizing: border-box; border-radius: 30px; text-align: center; 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); }
.cs-band__eb { display: inline-flex; align-items: center; gap: 7px; margin: 0; 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: #208787; }
.cs-band__eb::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cs-band .m-h { margin: 14px 0 0; font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -.035em; color: #1e2a2b; }
.cs-band .m-lead { margin: 10px auto 0; max-width: 36em; font-weight: 500; color: #4a524b; word-break: keep-all; }
.cs-band .m-h::before { display: none !important; }
@media (max-width: 760px) { .cs-band { margin: 14px 0 14px; padding: 26px 16px 20px; border-radius: 24px; } }
@media (prefers-reduced-motion: no-preference) { .cs-band, .fsw { animation: fsw-in .6s cubic-bezier(.16,1,.3,1) both; } .fsw { animation-delay: .15s; } }
@keyframes fsw-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .fsw::before { transition: none; } }
/* 11/08 대표: 제작자 보기 카드(시안 10번) — 진한 유리 + 애니메이션 */
body:has(.cs-grid)::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 420px at 6% 34%, rgba(114, 168, 174,.34), transparent 70%), radial-gradient(480px 380px at 94% 16%, rgba(32, 136, 136,.32), transparent 70%), radial-gradient(560px 460px at 60% 96%, rgba(147, 188, 193,.28), transparent 70%); }
.cs-filters { padding: 12px; border-radius: 22px; background: linear-gradient(155deg, rgba(255,255,255,.72), rgba(240, 242, 242,.46)); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 0 0 1px rgba(255,255,255,.9) inset, 0 0 0 1px rgba(27, 58, 61,.06), 0 18px 40px -24px rgba(27, 58, 61,.45); }
.cs-filters .us-btn, .cs-filters input[type=search] { background: rgba(255,255,255,.82) !important; border: 0 !important; box-shadow: 0 0 0 1px rgba(27, 58, 61,.1) !important; border-radius: 12px !important; }
.cs-open { padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,.72); box-shadow: 0 0 0 1px rgba(27, 58, 61,.1); font-weight: 700; font-size: 14px; }
#cs-count { font-weight: 700; color: #5b6a6c; }
.cs-grid { gap: 18px; }
.cv { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0 16px 16px; border-radius: 26px; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.28) 55%, rgba(240, 242, 242,.4)); -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5);
  box-shadow: 0 0 0 1px rgba(255,255,255,.95) inset, 0 1px 0 rgba(255,255,255,1) inset, 0 -1px 0 rgba(27, 58, 61,.06) inset, 0 0 0 1px rgba(27, 58, 61,.07), 0 26px 52px -28px rgba(27, 58, 61,.55);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s; }
.cv::after { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-110%); }
.cv:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(255,255,255,1) inset, 0 0 0 1px rgba(27, 58, 61,.09), 0 36px 64px -28px rgba(27, 58, 61,.6); }
.cv:hover::after { transform: translateX(110%); transition: transform .9s cubic-bezier(.4,0,.2,1); }
.cv-card { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0 !important; background: none !important; color: inherit; text-decoration: none; box-shadow: none !important; grid-template-columns: none; }
.cv-card:focus-visible { outline: 2px solid #1b3a3d; outline-offset: 4px; border-radius: 20px; }
.cv-cov { position: relative; display: grid; grid-template-rows: 100%; gap: 3px; height: 112px; margin: 0 -16px; overflow: hidden; background: #dbe8ea; }
.cv-cov.n1 { grid-template-columns: 1fr; } .cv-cov.n2 { grid-template-columns: 1fr 1fr; } .cv-cov.n3 { grid-template-columns: repeat(3, 1fr); }
.cv-cov.is-empty { background: linear-gradient(135deg, #d4e6e8, #dfe8e8); }
.cv-cov img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.cv-cov::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(245, 247, 248,.92) 100%); }
.cv:hover .cv-cov img:nth-child(1) { transform: scale(1.1) rotate(-1.5deg); } .cv:hover .cv-cov img:nth-child(2) { transform: scale(1.1); } .cv:hover .cv-cov img:nth-child(3) { transform: scale(1.1) rotate(1.5deg); }
.cv-cnt { position: absolute; right: 12px; top: 78px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: rgba(18, 24, 24,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 11px; font-weight: 700; }
.cv-st { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(255,255,255,.9) inset; color: #2b6970; font-size: 11.5px; font-weight: 800; }
.cv-st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #378790; box-shadow: 0 0 0 3px rgba(55, 135, 144,.22); animation: cv-pulse 2s ease-in-out infinite; }
.cv-st--busy, .cv-st--rest { color: #208787; } .cv-st--busy::before, .cv-st--rest::before { background: #208787; box-shadow: none; animation: none; }
.cv-hd { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 12px; min-width: 0; margin-top: -32px; }
.cv-av { flex: none; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; overflow: hidden; color: #eef1f1; font-size: 26px; font-weight: 800;
  box-shadow: 0 0 0 4px rgba(245, 250, 250,.95), 0 12px 22px -8px rgba(27, 58, 61,.55); transition: transform .4s cubic-bezier(.3,1.5,.5,1); }
.cv-av img { width: 100%; height: 100%; object-fit: cover; }
.cv:hover .cv-av { transform: translateY(-4px) scale(1.04); }
.cv-nm { flex: 1; min-width: 0; padding-bottom: 2px; }
.cv-n { display: flex; align-items: center; gap: 6px; min-width: 0; padding-right: 30px; }
.cv-nt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: #1e2a2b; }
.cv-n > :not(.cv-nt) { flex: none; }
.cv-t { margin: 3px 0 0; font-size: 12.5px; color: #5b6a6c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 14px 0 12px; border-radius: 16px; background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(255,255,255,.9) inset, 0 0 0 1px rgba(27, 58, 61,.05); }
.cv-4 > div { display: grid; gap: 1px; padding: 9px 2px; text-align: center; min-width: 0; }
.cv-4 > div + div { border-left: 1px solid rgba(27, 58, 61,.07); }
.cv-4 b { font-size: 14px; font-weight: 800; color: #1e2a2b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-4 b.star { color: #b07a14; } .cv-4 b.pr { color: #208787; }
.cv-4 small { font-size: 11px; color: #7f7f86; }
.cv-acts { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; margin-top: auto; }
.cv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border-radius: 13px; font-size: 13.5px; font-weight: 800; text-decoration: none; transition: background .2s, color .2s, transform .2s, box-shadow .2s; }
.cv-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.cv-btn--g { background: rgba(255,255,255,.85); color: #1b3a3d; box-shadow: 0 0 0 1px rgba(27, 58, 61,.14); }
.cv-btn--g:hover { background: #FAFAFA; box-shadow: 0 0 0 1.5px rgba(27, 58, 61,.3); }
.cv-btn--p { background: linear-gradient(180deg, #275257, #1b3a3d); color: #eef1f1; box-shadow: 0 10px 18px -10px rgba(27, 58, 61,.7); }
.cv-btn--p:hover { background: linear-gradient(180deg, #2a9393, #208787); box-shadow: 0 10px 18px -10px rgba(32, 135, 135,.7); transform: translateY(-1px); }
.cv-btn--p:hover svg { transform: translateX(3px); }
.cv-btn:focus-visible { outline: 2px solid #1b3a3d; outline-offset: 2px; }
.cv .cv-fav { position: absolute !important; right: 12px; top: 12px; z-index: 5; width: 32px !important; height: 32px !important; min-width: 0 !important; min-height: 0 !important; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.85) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(27, 58, 61,.1) !important; }
.cv .cv-fav:hover { transform: scale(1.1); }
.cs-wrap.cv > .fav:not(.cv-fav) { display: none; }
@keyframes cv-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes cv-pulse { 50% { box-shadow: 0 0 0 5px rgba(55, 135, 144,0); } }
@media (prefers-reduced-motion: no-preference) { .cv-in { animation: cv-in .6s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--k, 0) * 55ms); } }
@media (prefers-reduced-motion: reduce) { .cv, .cv *, .cv::after { transition: none !important; animation: none !important; } }
@media (max-width: 420px) { .cv-4 b { font-size: 13px; } .cv-acts { grid-template-columns: 1fr 1fr; } }