/* 11/07 대표: 포트폴리오 새 화면 — 숲 초록 머리 띠 + 추천 두 칸 + 왼쪽 거르기 + 작품 격자(커서 올리면 초록) + 숫자 쪽 넘기기 */
.pf-main { --pf-forest: var(--color-forest, #1b3a3d); --pf-terra: var(--color-terracotta, #208787); --pf-sage: #e7f2f3; --pf-line: rgba(27, 58, 61, .1); --pf-mute: var(--color-text-muted, #65656b); --pf-paper: var(--color-surface, #f5fafa);
  padding-bottom: 64px; }
.pf-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* 머리 띠 */
.pf-band { position: relative; padding: 52px 16px 132px; text-align: center; color: #eef1f1; background: linear-gradient(160deg, #21484c, var(--pf-forest) 70%); overflow: hidden; }
.pf-band::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 132px); pointer-events: none; }
.pf-band__eb { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: #e3f2f1; }
.pf-band__h { margin: 8px 0 0; font-family: var(--font-heading, 'Noto Serif KR Sub', serif); font-size: clamp(30px, 4vw, 44px); font-weight: 700; color: #eef1f1; }
.pf-band__p { margin: 10px auto 0; max-width: 34em; font-size: 15px; color: rgba(238, 241, 241, .7); word-break: keep-all; }
.pf-wrap { position: relative; z-index: 1; width: min(100% - 32px, 1120px); margin: -96px auto 0; }
/* 추천 두 칸 */
.pf-feat { display: grid; grid-template-columns: 1.75fr 1fr; border-radius: 26px; overflow: hidden; box-shadow: 0 30px 60px rgba(28, 40, 41, .18); margin-bottom: 26px; }
.pf-f1, .pf-f2 { position: relative; min-height: 300px; overflow: hidden; }
.pf-f1 { display: block; background: #252527; color: #fff; text-decoration: none; }
.pf-f1 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: pf-kb 22s ease-in-out infinite alternate; }
.pf-f1::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 24, 24, .8), rgba(18, 24, 24, .25) 58%, transparent); }
@keyframes pf-kb { from { transform: scale(1.02); } to { transform: scale(1.12) translateX(-2%); } }
.pf-ft { position: absolute; left: 40px; top: 38px; right: 40px; z-index: 2; max-width: 360px; }
.pf-tag { display: inline-block; padding: 3px 9px; border-radius: 6px; background: #e3f2f1; color: #2a2318; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; }
.pf-tag--dk { background: var(--pf-forest); color: #eef1f1; }
.pf-ft small { display: block; margin-top: 20px; font-size: 12px; font-weight: 700; letter-spacing: .1em; opacity: .78; }
.pf-ft h2 { margin: 8px 0 0; font-family: var(--font-heading, serif); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.28; color: inherit; word-break: keep-all; }
.pf-by { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 14px; opacity: .92; }
.pf-btnw { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--pf-forest); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.pf-f1:hover .pf-btnw, .pf-btnw:hover { transform: translateY(-2px); }
.pf-pl { width: 24px; height: 24px; border-radius: 50%; background: var(--pf-terra); color: #fff; display: grid; place-items: center; }
.pf-pl .pf-ic { width: 11px; height: 11px; }
.pf-btnw--dk { background: var(--pf-forest); color: #eef1f1; }
.pf-f2 { background: linear-gradient(160deg, #dfecee, #c8dee1); color: var(--color-text, #1e1e20); }
.pf-f2 .pf-ft { max-width: 160px; left: 30px; }
.pf-f2 .pf-ft h2 { font-size: clamp(20px, 2vw, 24px); }
.pf-ph { position: absolute; right: 22px; top: 44px; width: 104px; height: 186px; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 6px #1b1b1b, 0 20px 40px rgba(0, 0, 0, .25); transform: rotate(6deg); transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.pf-ph.is-b { right: 104px; top: 84px; width: 92px; height: 164px; transform: rotate(-5deg); }
.pf-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-f2:hover .pf-ph { transform: rotate(9deg) translateY(-6px); } .pf-f2:hover .pf-ph.is-b { transform: rotate(-8deg) translateY(-4px); }
/* 몸통 */
.pf-mbar { display: none; }
.pf-body { display: grid; grid-template-columns: 270px minmax(0, 1fr); background: var(--pf-paper); border-radius: 26px; box-shadow: 0 0 0 1px var(--pf-line), 0 14px 40px rgba(28, 40, 41, .07); overflow: hidden; scroll-margin-top: 90px; }
.pf-side { border-right: 1px solid var(--pf-line); }
.pf-sh { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 22px; border-bottom: 1px solid var(--pf-line); }
.pf-sh h2 { margin: 0; font-size: 16px; font-weight: 800; }
.pf-reset { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--pf-mute); font: inherit; font-size: 13px; cursor: pointer; }
.pf-reset .pf-ic { width: 15px; height: 15px; transition: transform .5s; } .pf-reset:hover .pf-ic { transform: rotate(-180deg); }
.pf-grp { padding: 18px 22px; border-bottom: 1px solid var(--pf-line); }
.pf-grp.is-soft { background: var(--pf-sage); }
.pf-gh { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--pf-forest); }
.pf-gh .pf-ic { width: 13px; height: 13px; }
.pf-x { margin-left: auto; border: 0; background: none; color: #ababb0; cursor: pointer; font-size: 12px; }
.pf-cats { list-style: none; margin: 0; padding: 0; }
.pf-cat { position: relative; display: flex; justify-content: space-between; width: 100%; padding: 6px 0; border: 0; background: none; font: inherit; font-size: 14px; color: #46464b; cursor: pointer; text-align: left; transition: color .2s, padding .25s; }
.pf-cat b { font-weight: 500; color: #97979e; font-size: 12.5px; }
.pf-cat:hover { color: var(--pf-forest); padding-left: 4px; }
.pf-cat.is-on { color: var(--pf-forest); font-weight: 800; padding-left: 12px; }
.pf-cat.is-on::before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--pf-terra); }
.pf-ratio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pf-ratio button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border: 0; border-radius: 14px; background: #FAFAFA; box-shadow: 0 0 0 1px var(--pf-line); font: inherit; font-size: 12.5px; font-weight: 700; color: #535359; cursor: pointer; transition: background .25s, color .25s, transform .2s; }
.pf-ratio button:hover { transform: translateY(-2px); }
.pf-ratio button.is-on { background: var(--pf-forest); color: #eef1f1; box-shadow: 0 8px 16px rgba(27, 58, 61, .22); }
.pf-shape { display: block; border: 2px solid currentColor; border-radius: 4px; }
.pf-shape--v { width: 12px; height: 20px; } .pf-shape--h { width: 22px; height: 13px; } .pf-shape--s { width: 16px; height: 16px; }
.pf-len { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--pf-line); }
.pf-len button { padding: 10px 0; border: 0; border-left: 1px solid var(--pf-line); background: #FAFAFA; font: inherit; font-size: 12.5px; font-weight: 700; color: #535359; cursor: pointer; transition: background .2s, color .2s; }
.pf-len button:first-child { border-left: 0; } .pf-len button.is-on { background: var(--pf-terra); color: #fff; }
.pf-rng { position: relative; height: 4px; margin: 14px 8px 10px; border-radius: 2px; background: rgba(27, 58, 61, .12); }
.pf-rng > i { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--pf-forest); }
.pf-rng input { position: absolute; left: -8px; right: -8px; top: -9px; width: calc(100% + 16px); height: 22px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.pf-rng input::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #FAFAFA; box-shadow: 0 0 0 2px var(--pf-forest), 0 3px 8px rgba(0, 0, 0, .15); cursor: grab; }
.pf-rng input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border: 0; border-radius: 50%; background: #FAFAFA; box-shadow: 0 0 0 2px var(--pf-forest), 0 3px 8px rgba(0, 0, 0, .15); cursor: grab; }
.pf-rng input::-webkit-slider-runnable-track { background: none; } .pf-rng input::-moz-range-track { background: none; }
.pf-rng input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--pf-terra); }
.pf-rv { display: flex; justify-content: space-between; margin: 0; font-size: 12.5px; color: var(--pf-mute); }
.pf-note { margin: 8px 0 0; font-size: 11.5px; color: #97979e; }
.pf-chk { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; color: #46464b; cursor: pointer; }
.pf-chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pf-box { width: 18px; height: 18px; margin-left: auto; border-radius: 5px; box-shadow: 0 0 0 1.5px #bfbfc2; display: grid; place-items: center; transition: background .2s, box-shadow .2s; }
.pf-chk input:checked + .pf-box { background: var(--pf-forest); box-shadow: none; }
.pf-chk input:checked + .pf-box::after { content: ''; width: 9px; height: 5px; margin-top: -2px; border: solid #fff; border-width: 0 0 2px 2px; rotate: -45deg; animation: pf-pop .3s cubic-bezier(.34, 1.56, .64, 1); }
.pf-chk input:focus-visible + .pf-box { outline: 2px solid var(--pf-forest); outline-offset: 2px; }
.pf-chk__mk { flex: none; }
.pf-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-tools button { padding: 6px 11px; border: 0; border-radius: 999px; background: #FAFAFA; box-shadow: 0 0 0 1px var(--pf-line); font: inherit; font-size: 12.5px; font-weight: 700; color: #535359; cursor: pointer; transition: background .2s; }
.pf-tools button.is-on { background: #d5e6e8; box-shadow: none; color: var(--pf-forest); }
.pf-done { display: none; }
/* 위 막대 */
.pf-bar { display: grid; grid-template-columns: 1fr 1fr 60px 60px auto; height: 64px; border-bottom: 1px solid var(--pf-line); }
.pf-bar > * { display: flex; align-items: center; gap: 8px; padding: 0 20px; border-left: 1px solid var(--pf-line); font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--pf-mute); }
.pf-bar > :first-child { border-left: 0; }
.pf-sel select { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: 0; color: var(--color-text, #1e1e20); cursor: pointer; }
.pf-vw { justify-content: center; padding: 0; border-top: 0; border-right: 0; border-bottom: 0; background: none; cursor: pointer; color: #818188; }
.pf-vw[aria-pressed="true"] { background: var(--pf-sage); color: var(--pf-forest); }
.pf-saved { text-decoration: none; color: var(--pf-forest); white-space: nowrap; }
.pf-saved .pf-ic { width: 14px; height: 14px; transition: transform .2s; } .pf-saved:hover .pf-ic { transform: translateX(3px); }
.pf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 56px; padding: 12px 20px; border-bottom: 1px solid var(--pf-line); font-size: 13px; color: var(--pf-mute); }
.pf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border: 0; border-radius: 999px; background: var(--pf-sage); color: var(--pf-forest); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; animation: pf-pop .35s cubic-bezier(.34, 1.56, .64, 1); }
.pf-chip i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: rgba(27, 58, 61, .12); display: grid; place-items: center; font-size: 11px; transition: background .2s; }
.pf-chip:hover i { background: var(--pf-terra); color: #fff; }
.pf-chips__note { font-size: 12px; color: #97979e; }
.pf-count { margin-left: auto; } .pf-count b { color: var(--color-text, #1e1e20); }
.pf-old { margin: 12px 20px 0; }
@keyframes pf-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
/* 작품 격자 */
.pf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; transition: opacity .2s; }
.pf-grid.is-busy { opacity: .45; }
.pf-grid > .m-skel { height: 320px; margin: 18px; }
.pf-card { position: relative; padding: 18px 18px 20px; border-left: 1px solid var(--pf-line); border-bottom: 1px solid var(--pf-line); transition: background .3s, box-shadow .3s, transform .3s cubic-bezier(.16, 1, .3, 1), border-radius .3s; }
.pf-grid:not(.is-list) .pf-card:nth-child(3n+1) { border-left: 0; }
.pf-grid.is-in .pf-card { animation: pf-rise .5s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes pf-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pf-th { position: relative; display: block; aspect-ratio: 4 / 4.6; border-radius: 18px; overflow: hidden; background: #d2d7d7; }
.pf-th img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.pf-rt { position: absolute; left: 10px; top: 10px; padding: 5px 7px; border-radius: 8px; background: rgba(255, 255, 255, .88); color: var(--pf-forest); }
.pf-rt .pf-shape { border-width: 1.6px; border-radius: 2px; } .pf-rt .pf-shape--v { width: 8px; height: 13px; } .pf-rt .pf-shape--h { width: 15px; height: 9px; } .pf-rt .pf-shape--s { width: 11px; height: 11px; }
.pf-new { position: absolute; right: 10px; top: 10px; padding: 4px 9px; border-radius: 8px; background: var(--pf-forest); color: #eef1f1; font-size: 11px; font-weight: 800; }
.pf-meta { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-between; transition: opacity .2s; }
.pf-meta span { padding: 4px 9px; border-radius: 999px; background: rgba(20, 24, 24, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 11.5px; font-weight: 700; }
.pf-cb h3 { margin: 14px 0 0; font-family: var(--font-heading, serif); font-size: 16.5px; font-weight: 700; line-height: 1.35; word-break: keep-all; }
.pf-who { display: flex; align-items: center; gap: 7px; margin: 6px 0 0; font-size: 13px; color: var(--pf-mute); }
.pf-av { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 10.5px; font-weight: 800; }
.pf-nm { max-width: 110px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: inherit; }
.pf-won { margin-left: auto; white-space: nowrap; color: var(--pf-forest); font-weight: 800; font-size: 13.5px; }
.pf-tl { display: none; margin: 8px 0 0; gap: 6px; flex-wrap: wrap; }
.pf-tl span { padding: 3px 9px; border-radius: 999px; background: var(--pf-sage); color: var(--pf-forest); font-size: 11.5px; font-weight: 700; }
/* 커서 올린 카드: 초록으로 칠해지고 단추가 떠오름 */
.pf-hv { position: absolute; left: 18px; right: 18px; top: 18px; aspect-ratio: 4 / 4.6; display: flex; align-items: center; justify-content: center; gap: 10px; pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .3s cubic-bezier(.16, 1, .3, 1); z-index: 2; }
.pf-hv > * { pointer-events: auto; }
.pf-hv__go { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; background: #FAFAFA; color: var(--pf-forest); font-weight: 800; font-size: 14px; text-decoration: none; box-shadow: 0 10px 20px rgba(0, 0, 0, .2); }
.pf-hv__go .pf-ic { width: 14px; height: 14px; }
.pf-hv__c { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .4); cursor: pointer; }
.pf-hv__c.fav { background: rgba(255, 255, 255, .2); }
.pf-hv__c.fav { color: #fff; }
.pf-hv__c.fav[aria-pressed="true"] { background: #FAFAFA; color: #26baba; }
.pf-hv { flex-direction: column; gap: 14px; }
.pf-hv__row { display: flex; gap: 10px; }
.pf-ask { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--pf-terra); color: #fff; font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.pf-ask .pf-ic { width: 13px; height: 13px; }
@media (hover: hover) {
  .pf-card:hover, .pf-card:focus-within { background: var(--pf-forest); color: #eef1f1; border-color: transparent; border-radius: 8px; box-shadow: 0 26px 50px rgba(27, 58, 61, .32); transform: translateY(-6px); z-index: 3; }
  .pf-card:hover .pf-th img, .pf-card:focus-within .pf-th img { transform: scale(1.06); filter: brightness(.72); }
  .pf-card:hover .pf-meta, .pf-card:focus-within .pf-meta { opacity: 0; }
  .pf-card:hover .pf-hv, .pf-card:focus-within .pf-hv { opacity: 1; transform: none; }
  .pf-card:hover .pf-who, .pf-card:focus-within .pf-who { color: rgba(238, 241, 241, .75); }
  .pf-card:hover .pf-won, .pf-card:focus-within .pf-won { color: #e3f2f1; }
  .pf-card:hover .pf-tl span { background: rgba(255, 255, 255, .14); color: #eef1f1; }
}
/* 목록 보기 */
.pf-grid.is-list { grid-template-columns: minmax(0, 1fr); }
.pf-grid.is-list .pf-card { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 22px; border-left: 0; }
.pf-grid.is-list .pf-th { aspect-ratio: 16 / 11; grid-row: span 2; }
.pf-grid.is-list .pf-hv { right: auto; width: 200px; aspect-ratio: 16 / 11; }
.pf-grid.is-list .pf-cb h3 { margin-top: 4px; font-size: 18px; }
.pf-grid.is-list .pf-tl { display: flex; }
.pf-grid.is-list .pf-nm { max-width: 220px; }
@media (hover: hover) { .pf-grid.is-list .pf-card:hover { border-radius: 8px; } }
.pf-empty { margin: 24px; }
/* 쪽 넘기기 */
.pf-pg { display: flex; height: 60px; border-top: 1px solid var(--pf-line); margin-top: -1px; }
.pf-pg button { position: relative; display: grid; place-items: center; width: 56px; border: 0; border-left: 1px solid var(--pf-line); background: none; font: inherit; font-size: 14px; font-weight: 700; color: #535359; cursor: pointer; transition: background .25s, color .25s; }
.pf-pg button:first-child { border-left: 0; } .pf-pg__arr { width: 64px !important; }
.pf-pg button:hover:not(:disabled) { background: var(--pf-sage); color: var(--pf-forest); }
.pf-pg button:disabled { color: #bfbfc2; cursor: default; }
.pf-pg button.is-on { background: var(--pf-forest); color: #fff; cursor: default; }
.pf-pg button.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--pf-terra); animation: pf-bar .35s cubic-bezier(.16, 1, .3, 1); }
@keyframes pf-bar { from { transform: scaleX(0); } to { transform: none; } }
.pf-pg__gap { flex: 1; border-left: 1px solid var(--pf-line); }
/* 아래 띠 */
.pf-askband { display: flex; align-items: center; gap: 22px; width: min(100% - 32px, 1120px); margin: 34px auto 0; padding: 28px 36px; border-radius: 26px; background: linear-gradient(120deg, #d5e6e8, #e2eff0); }
.pf-askband__ic { width: 62px; height: 62px; flex: none; border-radius: 20px; background: #FAFAFA; display: grid; place-items: center; color: var(--pf-forest); }
.pf-askband__ic .pf-ic { width: 28px; height: 28px; }
.pf-askband h2 { margin: 0; font-family: var(--font-heading, serif); font-size: 23px; }
.pf-askband p { margin: 4px 0 0; font-size: 14px; color: var(--pf-mute); word-break: keep-all; }
.pf-askband__go { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 999px; background: var(--pf-terra); color: #fff; font-weight: 800; text-decoration: none; white-space: nowrap; box-shadow: 0 10px 22px rgba(32, 135, 135, .28); transition: transform .25s; }
.pf-askband__go:hover { transform: translateY(-2px); }
.pf-askband__alt { font-size: 13.5px; font-weight: 700; color: var(--pf-forest); white-space: nowrap; }
.pf-scrim { display: none; }
/* 중간 폭 */
@media (max-width: 1099px) { .pf-grid:not(.is-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-grid:not(.is-list) .pf-card:nth-child(3n+1) { border-left: 1px solid var(--pf-line); } .pf-grid:not(.is-list) .pf-card:nth-child(2n+1) { border-left: 0; } }
/* 휴대폰: 거르기는 아래에서 올라오는 판 */
@media (max-width: 899px) {
  .pf-band { padding: 40px 16px 110px; }
  .pf-wrap { margin-top: -84px; }
  .pf-feat { grid-template-columns: minmax(0, 1fr); border-radius: 22px; margin-bottom: 14px; }
  .pf-f1 { min-height: 250px; } .pf-f2 { display: none; }
  .pf-ft { left: 22px; top: 24px; right: 22px; }
  .pf-mbar { display: flex; margin-bottom: 12px; }
  .pf-sheet-open .pf-wrap { z-index: 61; }
  .pf-fbtn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #FAFAFA; color: var(--pf-forest); box-shadow: 0 0 0 1px var(--pf-line), 0 6px 16px rgba(28, 40, 41, .1); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
  .pf-fbtn b:empty { display: none; } .pf-fbtn b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--pf-terra); color: #fff; font-size: 11.5px; display: grid; place-items: center; }
  .pf-body { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
  .pf-side { display: none; }
  .pf-sheet-open .pf-side { display: block; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; max-height: 84vh; overflow: auto; border: 0; border-radius: 26px 26px 0 0; background: var(--pf-paper); box-shadow: 0 -10px 40px rgba(0, 0, 0, .15); padding-bottom: calc(16px + env(safe-area-inset-bottom)); animation: pf-up .38s cubic-bezier(.16, 1, .3, 1); }
  .pf-sheet-open .pf-side::before { content: ''; display: block; width: 44px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: #ccd1d2; }
  .pf-sheet-open .pf-scrim { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(19, 30, 31, .35); animation: pf-fade .25s; }
  .pf-sheet-open .pf-scrim[hidden] { display: none; }
  .pf-done { display: flex; justify-content: center; align-items: center; width: calc(100% - 44px); height: 50px; margin: 16px 22px 4px; border: 0; border-radius: 999px; background: var(--pf-forest); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
  .pf-bar { grid-template-columns: 1fr 1fr; height: auto; }
  .pf-bar > * { height: 52px; padding: 0 14px; }
  .pf-vw, .pf-saved { display: none !important; }
  .pf-grid:not(.is-list), .pf-grid.is-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-grid .pf-card, .pf-grid.is-list .pf-card { display: block; padding: 10px; border-left: 1px solid var(--pf-line) !important; }
  .pf-grid .pf-card:nth-child(2n+1) { border-left: 0 !important; }
  .pf-grid.is-list .pf-th { aspect-ratio: 4 / 4.6; }
  .pf-grid .pf-hv { display: none; }
  .pf-th { border-radius: 14px; }
  .pf-cb h3 { font-size: 14px; margin-top: 10px; }
  .pf-who { flex-wrap: wrap; font-size: 12px; } .pf-nm { max-width: 90px; } .pf-won { margin-left: 0; width: 100%; font-size: 12.5px; }
  .pf-pg button { width: 44px; } .pf-pg__arr { width: 48px !important; }
  .pf-askband { flex-wrap: wrap; padding: 22px; } .pf-askband__go { margin-left: 0; }
}
@keyframes pf-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pf-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pf-f1 img, .pf-grid.is-in .pf-card, .pf-chip, .pf-pg button.is-on::after, .pf-sheet-open .pf-side, .pf-chk input:checked + .pf-box::after { animation: none !important; }
  .pf-card, .pf-th img, .pf-hv, .pf-ask, .pf-ph { transition: none !important; }
}