/* === Portfolio Manager v1.1 — Frontend CSS === */

.pfm-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
}

/* タブ */
.pfm-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; justify-content:center; }
.pfm-tab {
    display:inline-flex; align-items:center; gap:6px;
    font-size:14px; padding:8px 20px; border-radius:999px;
    border:1px solid #ddd; background:#fff; color:#555;
    cursor:pointer; transition:all .18s; font-family:inherit; line-height:1;
}
.pfm-tab:hover   { border-color:#aaa; color:#222; }
.pfm-tab.pfm-active { background:#1a1a1a; color:#fff; border-color:#1a1a1a; }
.pfm-dot { width:7px; height:7px; border-radius:50%; display:inline-block; flex-shrink:0; }

/* ツールバー（件数＋ソート） */
.pfm-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:8px; }
.pfm-count { font-size:13px; color:#999; margin:0; }
.pfm-sort { display:flex; gap:4px; }
.pfm-sort-btn {
    font-size:12px; padding:5px 12px; border-radius:999px;
    border:1px solid #ddd; background:#fff; color:#666;
    cursor:pointer; font-family:inherit; transition:all .18s; line-height:1;
}
.pfm-sort-btn:hover { border-color:#aaa; color:#222; }
.pfm-sort-btn.pfm-sort-active { background:#1a1a1a; color:#fff; border-color:#1a1a1a; }

/* グリッド */
.pfm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
@media (max-width:600px) { .pfm-grid { grid-template-columns:1fr; gap:12px; } }

/* カード */
.pfm-card {
    border-radius:12px; border:1px solid #e8e8e8; background:#fff;
    cursor:pointer; overflow:hidden;
    transition:transform .2s, box-shadow .2s, border-color .2s;
    animation:pfmFadeIn .28s ease both;
}
.pfm-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.08); border-color:#bbb; }
.pfm-card:focus { outline:2px solid #7F77DD; outline-offset:2px; }
.pfm-card.pfm-hidden { display:none; }
@keyframes pfmFadeIn {
    from { opacity:0; transform:translateY(8px) scale(.97); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}

/* カードサムネイル */
.pfm-card-thumb {
    position:relative;
    width:100%; aspect-ratio:3/2;
    overflow:hidden; background:#f4f4f4;
}
.pfm-card-thumb img {
    width:100%; height:100%; object-fit:cover;
    transition:transform .3s;
}
.pfm-card:hover .pfm-card-thumb img { transform:scale(1.04); }
.pfm-card-thumb-empty {
    width:100%; height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; color:inherit;
}
.pfm-card-thumb-empty .pfm-thumb-icon {
    font-size:28px; opacity:.5;
}
.pfm-card-thumb-empty .pfm-thumb-text {
    font-size:11px; font-weight:600; opacity:.6; letter-spacing:.04em;
}
.pfm-badge {
    position:absolute; bottom:8px; left:10px;
    display:inline-block; font-size:11px; font-weight:700;
    padding:3px 10px; border-radius:999px; letter-spacing:.04em;
}

.pfm-card-inner { padding:16px; }
.pfm-card-title    { font-size:15px; font-weight:700; color:#1a1a1a; margin:0 0 4px; line-height:1.4; }
.pfm-card-industry { font-size:11px; color:#888; margin:0 0 5px; }
.pfm-card-desc     { font-size:12px; color:#666; line-height:1.6; margin:0 0 8px; }
.pfm-card-result   { font-size:12px; color:#1D9E75; font-weight:600; margin:0 0 10px; }
.pfm-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.pfm-tag  { font-size:11px; padding:2px 8px; border-radius:4px; background:#f4f4f4; color:#555; }
.pfm-bar  { height:3px; border-radius:2px; }

/* オーバーレイ */
.pfm-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.55); z-index:99999;
    align-items:center; justify-content:center; padding:16px;
}
.pfm-overlay.pfm-open { display:flex; }

/* モーダル */
.pfm-modal {
    background:#fff; border-radius:16px;
    max-width:720px; width:100%; max-height:92vh;
    overflow:hidden;
    position:relative; animation:pfmModalIn .22s ease both;
}
.pfm-modal-body {
    overflow-y:auto; max-height:92vh;
    padding:28px 28px 24px;
}
@keyframes pfmModalIn {
    from { opacity:0; transform:scale(.95) translateY(6px); }
    to   { opacity:1; transform:scale(1) translateY(0); }
}
@media (max-width:600px) {
    .pfm-modal-body { padding:20px 16px; }
}

.pfm-modal-close {
    position:absolute; top:14px; right:14px;
    width:32px; height:32px; border-radius:50%;
    border:1px solid #ddd; background:#f5f5f5; color:#555;
    font-size:14px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s; line-height:1;
}
.pfm-modal-close:hover { background:#e5e5e5; }

.pfm-modal-badge {
    display:inline-block; font-size:11px; font-weight:700;
    padding:3px 10px; border-radius:999px; margin-bottom:10px;
}
.pfm-modal-title  { font-size:20px; font-weight:700; color:#1a1a1a; margin:0 0 6px; line-height:1.4; }
.pfm-modal-result { font-size:13px; color:#1D9E75; font-weight:700; margin:0 0 8px; }
.pfm-modal-desc   { font-size:14px; color:#555; line-height:1.8; margin:0 0 16px; white-space:pre-wrap; }

/* ギャラリー */
.pfm-gallery { margin-bottom:16px; }

.pfm-gallery-main {
    width:100%; aspect-ratio:3/2;
    border-radius:10px; overflow:hidden;
    background:#f7f7f7;
    position:relative;
}
.pfm-gallery-main img {
    width:100%; height:100%; object-fit:cover;
    display:block; transition:opacity .25s ease;
}
.pfm-gallery-empty {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; color:#bbb;
    border:1px dashed #ddd; border-radius:10px;
    background:#f7f7f7;
}

.pfm-gallery-thumbs {
    display:flex; gap:6px; margin-top:8px; flex-wrap:wrap;
}
.pfm-gallery-thumb {
    width:56px; height:40px;
    border-radius:6px; overflow:hidden;
    cursor:pointer; border:2px solid transparent;
    flex-shrink:0; transition:border-color .15s;
}
.pfm-gallery-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.pfm-gallery-thumb.pfm-thumb-active { border-color:#1a1a1a; }

.pfm-modal-meta { font-size:12px; color:#888; margin:0 0 14px; }
.pfm-modal-meta span { background:#f4f4f4; padding:3px 9px; border-radius:4px; margin-right:6px; }
.pfm-modal-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; }
.pfm-modal-footer { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }

.pfm-btn-primary {
    display:inline-block; padding:10px 20px;
    background:#1a1a1a; color:#fff !important;
    border-radius:8px; font-size:14px; font-weight:600;
    text-decoration:none; transition:background .15s;
}
.pfm-btn-primary:hover { background:#333; color:#fff !important; }
.pfm-btn-sec {
    padding:10px 20px; background:transparent; color:#555;
    border:1px solid #ddd; border-radius:8px; font-size:14px;
    cursor:pointer; font-family:inherit; transition:border-color .15s;
}
.pfm-btn-sec:hover { border-color:#aaa; }