/**
 * 시안검색 (포트폴리오 개편) — sample_portfolio_26.php 전용 (2026-10-14)
 *  - 모든 규칙은 .spf 범위로 한정 (사이트 공통 CSS 와 충돌 방지)
 *  - 기준 시안 : picok_design_search.html (picok-design-search.lkjfddl.chatgpt.site)
 */
.spf { --spf-ink:#000; --spf-pink:#e94171; font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#202020; background:#fff; }
.spf *, .spf *:before, .spf *:after { box-sizing:border-box; }
.spf button, .spf input { font-family:inherit; }		/* font:inherit 은 클래스 규칙의 크기·굵기를 덮어써서 사용 안 함 */
.spf button { cursor:pointer; touch-action:manipulation; }
.spf button:focus-visible, .spf a:focus-visible { outline:3px solid #ccc; outline-offset:4px; }
.spf [hidden] { display:none !important; }
.spf .spf-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); margin:0; }

.spf-wrap { max-width:1642px; width:calc(100% - 2 * clamp(20px, 4.4vw, 90px)); margin-left:auto; margin-right:auto; }

/* 상단 : 제목 + 찜한 시안 */
.spf-search-area { padding:60px 0 0; text-align:center; }
.spf-heading { position:relative; padding-top:16px; margin-bottom:28px; }
.spf-heading h1 { margin:0; font-size:clamp(23.333px, calc(2.7vw - 2.667px), 39.333px); font-weight:600; line-height:1.35; letter-spacing:-.02em; word-break:keep-all; color:var(--spf-ink); }
.spf-heading-actions { position:absolute; right:0; top:-16px; }

.spf-saved-only { display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:10px 18px; border:1px solid #e5e5e5; border-radius:10px; background:#fff; color:#222; font-size:15px; font-weight:600; box-shadow:0 3px 10px #0000000e; transition:background .2s ease, box-shadow .2s ease, border-color .2s ease; }
.spf-saved-only:hover { background:#fafafa; border-color:#bbb; }
.spf-saved-only[aria-pressed=true] { background:#222; border-color:#222; color:#fff; box-shadow:0 3px 10px #00000018; }
.spf-saved-only[aria-pressed=true]:hover { background:#333; border-color:#333; color:#fff; }
.spf-saved-heart { color:var(--spf-pink); font-size:25px; line-height:1; }
.spf-save-count { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 6px; border-radius:50%; background:#fff; color:#d63566; font-size:18px; font-weight:700; }
.spf-saved-only[aria-pressed=true] .spf-save-count { background:#555; color:#fff; }

/* 검색 폼 : 날짜 범위 + 키워드 + 검색/초기화 */
.spf-search-form { display:flex; align-items:flex-end; flex-wrap:wrap; gap:14px; width:min(1060px, 100%); margin:0 auto; text-align:left; }
.spf-date-field { flex:0 0 350px; min-width:0; }
.spf-date-range { display:flex; align-items:center; gap:8px; }
.spf-date-range > span { color:#aaa; font-size:16px; }
.spf-date-range input { flex:1; width:0; min-width:0; height:52px; padding:0 14px; border:1px solid #e4e4e4; border-radius:8px; background:#fafafa; color:#222; font-size:14px; transition:border-color .2s, background .2s; }
.spf-date-range input:hover { background:#fff; border-color:#c6c6c6; }
.spf-date-range input:focus { outline:none; border-color:#333; }
.spf-date-range input:focus-visible { border-color:#333; outline:2px solid #ddd; outline-offset:2px; }

.spf-keyword-field { flex:1; min-width:220px; }
.spf-keyword-input { position:relative; display:flex; align-items:center; height:52px; border:1px solid #e1e1e1; border-radius:8px; background:#fafafa; overflow:hidden; transition:background .2s, border-color .2s, box-shadow .2s; }
.spf-keyword-input:hover { border-color:#bbb; background:#fff; }
.spf-keyword-input:focus-within { background:#fff; border-color:#333; box-shadow:0 0 0 3px rgba(0,0,0,.045); }
.spf-keyword-icon { position:absolute; left:15px; width:19px; height:19px; fill:none; stroke:#777; stroke-width:1.7; pointer-events:none; }
.spf-keyword-input input { flex:1; width:100%; min-width:0; height:50px; padding:0 43px 0 44px; border:0; border-radius:0; background:transparent; color:#222; font-size:16px; letter-spacing:-.02em; outline:none; box-shadow:none; }
.spf-keyword-input input::placeholder { color:#999; font-size:15px; }
.spf-clear-query { position:absolute; right:10px; width:25px; height:25px; padding:0; border:0; border-radius:50%; background:#eee; color:#777; font-size:18px; line-height:1; }
.spf-clear-query:hover { background:#ddd; color:#222; }

.spf-actions { display:flex; gap:7px; }
.spf-actions button { height:52px; padding:0 23px; border:1px solid #000; border-radius:8px; background:#000; color:#fff; font-size:15px; font-weight:600; transition:background .2s, box-shadow .2s; }
.spf-actions button[type=submit]:hover { background:#292929; box-shadow:0 3px 8px #0001; }
.spf-actions .spf-reset { background:#fff; border-color:#ddd; color:#777; }
.spf-actions .spf-reset:hover { opacity:.75; }
.spf-date-error { flex-basis:100%; margin:0; color:#d63566; font-size:12px; }

/* 결과 목록 (Masonry : CSS columns) */
.spf-catalog { margin-top:72px; }
.spf-grid { columns:4; column-gap:28px; transition:opacity .2s; }
.spf-grid.is-loading { opacity:.45; pointer-events:none; }
.spf-card { display:inline-block; width:100%; vertical-align:top; break-inside:avoid; -webkit-column-break-inside:avoid; margin-bottom:46px; padding:0 0 16px; border-radius:6px; transition:box-shadow .25s ease, transform .25s ease; }
.spf-card:hover, .spf-card:focus-within { box-shadow:0 10px 32px rgba(0,0,0,.12); transform:translateY(-4px); }
.spf-image-wrap { position:relative; max-height:600px; overflow:hidden; background:#fff; }
.spf-image-wrap.truncated:after { content:""; position:absolute; left:0; right:0; bottom:0; height:100px; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 67%, #fff 100%); }
.spf-open-card { display:block; width:100%; padding:0; border:0; background:none; line-height:0; }
.spf-open-card img { display:block; width:100%; height:auto; max-width:none; max-height:none; }

.spf-card-meta { padding:16px 10px 0; }
.spf-church-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.spf-church-name { min-width:0; font-size:18px; font-weight:500; color:#222; overflow-wrap:anywhere; }
.spf-save { flex-shrink:0; width:34px; height:34px; padding:0; border:0; border-radius:50%; background:transparent; color:#777; font-size:26px; line-height:1; transition:background .18s ease, color .18s ease, transform .18s ease; }
.spf-save:hover { background:#fff0f4; color:var(--spf-pink); transform:scale(1.1); }
.spf-save[aria-pressed=true] { color:var(--spf-pink); }
.spf-card-date { display:block; margin-top:7px; color:#999; font-size:13px; }

.spf-empty { padding:70px 20px; text-align:center; }
.spf-empty > span { font-size:45px; color:#c3c3c3; }
.spf-empty h3 { margin:18px 0 10px; font-size:18px; color:#202020; }
.spf-empty p { margin:0; font-size:14px; color:#999; }
.spf-empty button { margin-top:20px; font-size:14px; padding:12px 20px; border:0; border-radius:4px; background:#000; color:#fff; }

.spf-bottom { margin:10px 0 50px; text-align:center; }
.spf-more { display:inline-flex; align-items:center; justify-content:center; min-width:220px; min-height:64px; padding:20px 32px; border:1px solid #000; border-radius:999px; background:#fff; color:#000; font-size:15px; font-weight:600; }
.spf-more:hover { background:#000; color:#fff; }

.spf-toast { position:fixed; left:50%; bottom:130px; z-index:30; transform:translateX(-50%); padding:12px 23px; border-radius:5px; background:#222; color:#fff; font-size:13px; opacity:0; pointer-events:none; transition:.2s; }
.spf-toast.visible { opacity:1; }

@media (max-width:1400px) { .spf-grid { columns:3; } }
@media (max-width:1000px) { .spf-grid { columns:2; } }
@media (max-width:767px) {
	.spf-wrap { width:calc(100% - 40px); }
	.spf-search-area { padding-top:30px; }
	.spf-heading { padding-top:62px; margin-bottom:24px; }
	.spf-heading h1 { font-size:23.333px; }
	.spf-heading-actions { top:0; }
	.spf-saved-only { min-height:44px; padding:9px 15px; gap:9px; font-size:14px; }
	.spf-date-field, .spf-keyword-field { flex-basis:100%; min-width:0; }
	.spf-actions { margin-left:auto; }
	.spf-actions button { padding:0 22px; }
	.spf-catalog { margin-top:60px; }
	.spf-grid { columns:1; }
	.spf-card { margin-bottom:38px; }
	.spf-card-meta { padding:16px 8px 0; }
	.spf-church-name { font-size:17px; }
	.spf-card-date { font-size:12px; }
	.spf-toast { bottom:100px; }
}
@media (prefers-reduced-motion:reduce) {
	.spf *, .spf-card, .spf-save { transition:none !important; }
	.spf-card:hover, .spf-card:focus-within { transform:none; }
}