/* ============================
   point_list.css
   ポイントリスト（冒険のクエストボード編）
   Fantasy RPG Style Design
   ============================ */

/* ── 没入感：親要素の余白（ホワイトスペース）を完全に消去 ── */
#page-point_list {
    background: #1a0f05; /* 深みのある濃い茶色（夜の宿屋の雰囲気） */
    color: #f1f5f9;
    min-height: 100vh;
    
    /* 親の .main-content の padding (48px) を打ち消して画面の端まで広げる */
    margin: calc(-1 * var(--space-2xl)) !important;
    padding: 100px var(--space-2xl) var(--space-2xl) var(--space-2xl) !important; /* 70px -> 100px (header 72px対応) */
    width: calc(100% + (var(--space-2xl) * 2)) !important;
    box-sizing: border-box;
}

#page-point_list .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.point-list-container {
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding: 20px 40px 120px 40px;
    min-height: 80vh;
    max-width: none !important;
    width: 100%;
    margin: 0 auto;
}

/* 📱 冒険のナビゲーション (ヘッダー統合・最上部配置) */
.mock-header {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #8b4513;
    padding: 10px 40px !important;
    margin-bottom: 0;
    width: calc(100% - var(--sidebar-width));
    gap: 20px;
    box-sizing: border-box;
    position: fixed !important;
    top: 0;
    left: var(--sidebar-width);
    background: #1a0f05 !important;
    z-index: 2000 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.8);
    transition: left var(--transition-base), width var(--transition-base);
    min-height: 72px !important;
}

#pl-list-area {
    display: flex;
    flex-direction: column;
    gap: 100px;
}

/* 📱 冒険のナビゲーション (ヘッダー統合・コンパクト化) */
/* 📱 冒険のナビゲーション (ヘッダー統合・最上部配置) */
.mock-header .pl-header-nav {
    display: flex;
    gap: 8px;
    margin-left: auto; /* 右寄せ */
}

.mock-header .pl-nav-item {
    background: rgba(139, 69, 19, 0.4);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 4px;
    padding: 0 14px !important; /* height固定のため上下paddingを0に */
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s;
    color: #d2b48c;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    height: 48px !important; /* 統一サイズ */
}

.mock-header .pl-nav-item:hover {
    background: rgba(139, 69, 19, 0.7);
    border-color: #ffd700;
    color: #fff;
    transform: translateY(-1px);
}

.mock-header .pl-nav-item.active {
    background: linear-gradient(135deg, #8b4513, #a0522d);
    border-color: #ffd700;
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5), inset 0 0 10px rgba(0,0,0,0.3);
    font-weight: 900;
}

.mock-header .pl-nav-icon {
    font-size: 1.1rem;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6));
}

.mock-header .pl-nav-label {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}

/* 既存の大きなナビゲーションは非表示 */
.pl-nav {
    display: none;
}

/* 📖 クエストボード (木製の大きな板) */
.pl-section {
    background-color: #2a1a0a;
    background-image: 
        linear-gradient(90deg, transparent 50%, rgba(255,255,255,.01) 50%),
        linear-gradient(rgba(255,255,255,.01) 50%, transparent 50%);
    background-size: 20px 20px;
    border: 12px solid #4a3a2a;
    border-radius: 8px;
    padding: 60px 40px;
    box-shadow: 
        15px 15px 0px rgba(0,0,0,0.3),
        inset 0 0 120px rgba(0,0,0,0.7);
    position: relative;
    overflow: visible;
}

/* ボードの角のネジ（装飾） */
.pl-section::before {
    content: '';
    position: absolute;
    top: 10px; left: 10px; width: 14px; height: 14px;
    background: #333; border-radius: 50%; box-shadow: 0 0 5px #000;
    background: radial-gradient(circle at 30% 30%, #666, #111);
}
.pl-section::after {
    content: '';
    position: absolute;
    top: 10px; right: 10px; width: 14px; height: 14px;
    background: #333; border-radius: 50%; box-shadow: 0 0 5px #000;
    background: radial-gradient(circle at 30% 30%, #666, #111);
}

.pl-section__header {
    margin-bottom: 40px;
    text-align: center;
    border-bottom: 2px dashed rgba(139, 69, 19, 0.4);
    padding-bottom: 25px;
}

.pl-section__title {
    font-family: 'Cinzel', serif;
    font-size: 2.4rem;
    color: #eab308;
    text-shadow: 3px 3px 0px #000, 0 0 20px rgba(234, 179, 8, 0.4);
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* 🃏 アイテムグリッド */
.pl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 40px;
}

/* 📜 依頼書（羊皮紙のカード） */
.pl-item {
    background: #fdf5e6;
    background-image: 
        radial-gradient(at 0% 0%, rgba(255,255,255,0.6), transparent),
        linear-gradient(to bottom, transparent, rgba(139, 69, 19, 0.08));
    border: 1px solid #d2b48c;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    position: relative;
    box-shadow: 8px 8px 0px #1a0f05;
    color: #4a3a2a;
    min-height: 220px;
    white-space: pre-wrap;
}

/* 📌 押しピン */
.pl-item::before {
    content: '📌';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.8rem;
    z-index: 2;
    filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.4));
    transition: transform 0.4s;
}

.pl-item:hover {
    transform: rotate(-1.5deg) translateY(-12px) scale(1.02);
    box-shadow: 15px 15px 0px #1a0f05;
    background-color: #fffaf0;
    z-index: 5;
}

.pl-item:hover::before {
    transform: translateX(-50%) scale(1.3) rotate(15deg);
}

.pl-item__main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 2px solid rgba(139, 69, 19, 0.15);
    padding-bottom: 15px;
}

.pl-item__name {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.4;
    color: #2a1a0a;
}

.pl-item__points {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    font-weight: 900;
    color: #8b4513;
    white-space: nowrap;
    text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
}

/* 🏷️ バッジ (封蝋・ワックスシール風) */
.pl-item__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* 発動条件 (Condition Box) - 最下部に配置 */
.pl-item__condition-wrapper {
    margin-top: auto; /* 下端に寄せる */
    padding-top: 15px;
    border-top: 1px dashed rgba(139, 69, 19, 0.2);
}

.pl-condition-box {
    background: rgba(139, 69, 19, 0.06);
    border: 1px solid rgba(139, 69, 19, 0.15);
    padding: 8px 12px;
    border-radius: 4px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    overflow: hidden;
}

.pl-condition-label {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 950;
    color: #8b4513;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.8;
    background: rgba(139, 69, 19, 0.1);
    padding: 2px 6px;
    border-radius: 2px;
}

.pl-condition-text {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 800;
    color: #2a1a0a;
    line-height: 1.4;
    white-space: normal;
}

.pl-badge {
    font-size: 0.8rem;
    font-weight: 800;
    padding: 5px 15px;
    border-radius: 4px;
    background: #8b0000;
    color: #ffd700;
    box-shadow: inset 1px 1px 4px rgba(0,0,0,0.4), 2px 2px 4px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,215,0,0.2);
}

/* メモ (説明文) - 条件より上に配置 */
.pl-item__memo {
    font-size: 0.95rem;
    color: #5d4a36;
    font-style: italic;
    padding-top: 5px;
    white-space: pre-wrap;
    line-height: 1.6;
    flex: 1; /* 余白を埋める */
    display: flex;
    align-items: center; /* 中央寄せで広がりを感じさせる */
    min-height: 80px;
}

/* ⚔️ ボード内サブナビゲーション (木札・インデックスタブ風) */
.pl-sub-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
    padding: 0;
    background: transparent;
}

.pl-sub-nav-item {
    padding: 8px 18px;
    border-radius: 4px;
    background: #3a2a1a;
    background-image: linear-gradient(to bottom, #4a3a2a, #2a1a0a);
    color: #d2b48c;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #8b4513;
    border-bottom: 3px solid #1a0f05; /* 立体感を出す */
    box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
    position: relative;
    letter-spacing: 0.05em;
}

.pl-sub-nav-item::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: #0d0804;
    border-radius: 50%;
    box-shadow: 0 1px 1px rgba(255,255,255,0.1);
}

.pl-sub-nav-item:hover {
    color: #fdf5e6;
    background-image: linear-gradient(to bottom, #5d4a36, #3a2a1a);
    transform: translateY(-2px);
    box-shadow: 2px 4px 10px rgba(0,0,0,0.8);
}

.pl-sub-nav-item.active {
    background: #8b0000;
    background-image: linear-gradient(to bottom, #a52a2a, #8b0000);
    color: #ffd700;
    border-color: #d4af37;
    border-bottom-color: #4a0000;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4), inset 0 2px 4px rgba(255,255,255,0.1);
    text-shadow: 1px 1px 2px #000;
}

.pl-sub-nav-item.active::before {
    background: #ffd700;
    box-shadow: 0 0 4px #ffd700;
}

/* 🖼️ 古びた手紙風モーダル */
.pl-modal {
    background: #fdf5e6;
    padding: 20px;
    border: 3px solid #8b4513;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

/* 🖼️ ギルドの依頼書風プレミアムモーダル */
.pl-quest-modal {
    background: #fdf5e6;
    background-image: 
        radial-gradient(at 0% 0%, rgba(255,255,255,0.4), transparent),
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 86c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm66 3c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm-46-17c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm54-46c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM37 64c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm43-36c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm-9-14c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm-54 2c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM48 3s.552 0 1-.448 1-1-.448-1-1-1-1 .448-1 1 .448 1 1 1zm24 55c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM33 7c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm52 74c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM21 27c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm75 7c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM8 46c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm91 22c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM44 71c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm52-30c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM58 80c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm33-40c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM28 54c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm71 29c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM38 46c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM7 2c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1z' fill='%238b4513' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
    padding: 60px;
    border: 8px double #8b4513;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    position: relative;
    border-radius: 4px;
    color: #2a1a0a;
}

/* ギルドの刻印（封蝋） */
.pl-quest-modal::after {
    content: '';
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 80px;
    height: 80px;
    background: #8b0000;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 2px 2px 5px rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: rgba(255, 215, 0, 0.4);
    opacity: 0.8;
    background-image: radial-gradient(circle at 30% 30%, transparent 60%, rgba(0,0,0,0.4));
    transform: rotate(-15deg);
}

.pl-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid #8b4513;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.pl-modal-title {
    font-family: 'Cinzel', serif;
    font-size: 2.4rem;
    font-weight: 900;
    color: #4a3a2a;
    margin: 0;
    flex: 1;
}

.pl-modal-pts {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 800;
    color: #8b4513;
    background: rgba(139, 69, 19, 0.1);
    padding: 5px 20px;
    border-radius: 4px;
}

.pl-modal-condition {
    margin-bottom: 25px;
}

.pl-modal-condition-box {
    background: rgba(139, 69, 19, 0.04);
    border: 2px solid rgba(139, 69, 19, 0.1);
    padding: 20px;
    border-radius: 8px;
    position: relative;
}

.pl-modal-condition-text {
    font-size: 1.2rem;
    font-weight: 900;
    color: #8b4513;
    line-height: 1.6;
}

.pl-modal-body {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.pl-modal-section-title {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #8b4513;
    border-bottom: 1px dashed #d2b48c;
    padding-bottom: 5px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pl-modal-memo {
    white-space: pre-wrap;
    line-height: 1.8;
    color: #2a1a0a;
    font-size: 1.15rem;
}

.modal-width-wide {
    max-width: 900px !important;
}

/* モバイル調整 */
@media (max-width: 600px) {
    #page-point_list {
        padding: 20px !important;
    }
    .pl-section {
        padding: 40px 20px;
    }
    .pl-nav-item {
        width: 140px !important;
        height: 110px !important;
        padding: 10px;
    }
}