/* ========================================
   CureLink Diary CSS
   推し活日記 一覧・詳細 専用
======================================== */


/* ========================================
   diary-list.ejs
======================================== */

body{
    font-family:sans-serif;
    min-height:100vh;
    background-attachment:fixed;

    padding:30px;
}

.post{
    background:white;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 6px 25px rgba(0,0,0,0.08);

    max-width:380px;
    margin:auto;
}

.thumb{
    width:100%;
    max-height:420px;
    object-fit:cover;
    display:block;
}

.post-body{

    padding:18px;

}

.meta{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

    margin:12px 0;

}

.meta span{
    background:var(--sub2);

    padding:6px 12px;

    border-radius:999px;

    font-size:13px;

}

.preview{

    color:#666;

    line-height:1.6;

    font-size:14px;

    margin-top:12px;

}

.container{
    background:white;
    overflow:hidden;
    width:min(1280px, 95%);
    margin:auto;
    border-radius:32px;
}

.post-body h2{

    margin:0 0 10px;

    font-size:18px;

}

.post-body a{

    display:inline-block;

    margin-top:15px;

    text-decoration:none;

    font-weight:bold;
    color:var(--main);

}

.grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(280px, 1fr));
    gap:24px;
}

.chips{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:30px;

}

.chip{
    background:var(--sub2);

    padding:10px 18px;

    border-radius:999px;

    text-decoration:none;

    color:#444;

    font-weight:bold;

}

.view-btn{
    display:inline-block;
    margin-top:18px;
    padding:12px 20px;
    border-radius:999px;
    background:var(--sub2);
    border:2px solid var(--main);
    color:#444;
    text-decoration:none;
    font-weight:bold;
    transition:0.2s;
}

.view-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(0,0,0,0.08);
}

.profile-card{
    display:flex;
    gap:24px;
    align-items:center;
    background:white;
    border-radius:28px;
    padding:28px;
    margin-bottom:32px;
    box-shadow:0 8px 24px rgba(0,0,0,0.08);
}

.profile-icon{
    width:110px;
    height:110px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid var(--main);
}

.profile-icon-placeholder{
    width:110px;
    height:110px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
    background:var(--sub2);
    border:4px solid var(--main);
}

.profile-info{
    flex:1;
}

.profile-name{
    font-size:28px;
    font-weight:bold;
    margin-bottom:6px;
}

.profile-id{
    color:#888;
    margin-bottom:14px;
}

.profile-bio{
    line-height:1.8;
    color:#555;
    white-space:pre-wrap;
}

.profile-stats{
    margin-top:14px;
    font-weight:bold;
    color:var(--main);
}

.album-title{
    text-align:center;
    color:var(--main);
    font-size:38px;
    font-weight:bold;
    margin-bottom:16px;
    text-shadow:0 2px 10px rgba(0,0,0,0.08);
}

.album-description{
    text-align:center;
    color:var(--main);
    opacity:0.8;
    line-height:1.8;
    margin-bottom:30px;
}

.main-area{
    min-width:0;
}


.side-icon{
    width:90px;
    height:90px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid var(--main);
    margin:14px 0;
}

.side-name{
    font-weight:bold;
    font-size:20px;
}

.side-id{
    color:#888;
    margin-top:4px;
}

.side-bio{
    margin-top:16px;
    color:#666;
    line-height:1.7;
    font-size:14px;
}

.side-stats{
    margin-top:18px;
    font-weight:bold;
}

.side-link{
    display:inline-block;
    margin-top:20px;
    padding:12px 18px;
    border-radius:999px;
    background:var(--sub2);
    color:var(--main);
    text-decoration:none;
    font-weight:bold;
}

@media(max-width:768px){
    .grid{
        grid-template-columns:1fr;
    }
}

.simple-profile{
    background:white;
    border-radius:24px;
    padding:28px;
    margin:30px 0;
    box-shadow:0 8px 24px rgba(0,0,0,0.08);
}

.simple-profile h3{
    margin-top:0;
    color:var(--main);
}

.simple-profile-inner{
    display:flex;
    gap:24px;
    align-items:flex-start;
}

.simple-icon{
    width:100px;
    height:100px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid var(--main);
}

.simple-info{
    flex:1;
}

.simple-name{
    font-size:28px;
    font-weight:bold;
}

.simple-id{
    color:#888;
    margin-top:6px;
}

.simple-bio{
    margin-top:16px;
    line-height:1.7;
    color:#666;
}

.simple-bio{
    white-space:pre-wrap;
    word-break:break-word;
}

.simple-stats{
    margin-top:16px;
    font-weight:bold;
}

/* card style */
.card-style-cute .simple-profile,
.card-style-cute .post{
    border-radius:32px;
    box-shadow:0 12px 30px rgba(255,105,180,0.15);
    border:2px solid #ffd6e7;
}

.card-style-glass .simple-profile,
.card-style-glass .post{
    background:rgba(255,255,255,0.72);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,0.6);
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.card-style-luxury .simple-profile{
    position:relative;
    background:white;
    border-radius:24px;
}

.card-style-luxury .simple-profile::before{
    content:"";
    position:absolute;
    inset:0;
    padding:2px;
    border-radius:24px;
    background:linear-gradient(145deg,#f7d774,#b8860b);
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    pointer-events:none;
}

.card-style-idol .post,
.card-style-idol .simple-profile{
    box-shadow:
        0 0 16px rgba(255,105,180,0.22),
        0 0 32px rgba(255,182,193,0.16);
    border:1px solid rgba(255,182,193,0.5);
}

.card-style-idol .post:hover{
    transform:translateY(-4px);
    box-shadow:
        0 0 24px rgba(255,105,180,0.35),
        0 0 48px rgba(255,182,193,0.22);
}

.card-style-glass .navbar{
    background:rgba(255,255,255,0.7);
    backdrop-filter:blur(12px);
}

body{
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
}

body::after{
    content:'';
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.20),
            rgba(255,247,251,0.48)
        );
}

.container{
    padding:32px;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(8px);
    box-shadow:0 10px 40px rgba(0,0,0,0.10);
}

.card-style-glass .container{
    background:rgba(255,255,255,0.72);
    backdrop-filter:blur(14px);
}

.card-style-glass .simple-profile,
.card-style-glass .post{
    background:rgba(255,255,255,0.72);
    backdrop-filter:blur(14px);
}

html,
body{
    min-height:100%;
}

body{
    margin:0;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-attachment:fixed !important;
}

.container{
    background:rgba(255,255,255,0.88) !important;
    backdrop-filter:blur(8px);
    box-shadow:0 10px 40px rgba(0,0,0,0.10);
}

.simple-profile,
.post{
    background:rgba(255,255,255,0.82) !important;
    backdrop-filter:blur(6px);
}

.chip{
    background:rgba(255,255,255,0.78) !important;
    border:2px solid var(--sub);
}

.album-title,
.album-description{
    text-shadow:
        0 2px 10px rgba(255,255,255,0.85),
        0 2px 16px rgba(0,0,0,0.10);
}


/* ========================================
   diary-post.ejs
======================================== */

body{
    font-family:sans-serif;
    min-height:100vh;
    background-attachment:fixed;
}

.card{
    max-width:1100px;
    margin:auto;
    background:white;
    padding:40px;
    border-radius:32px;
}

/* STEP8 */
.card.card-style-default{}

.card.card-style-glass{
    backdrop-filter:blur(14px);
    background:rgba(255,255,255,0.72);
    border:1px solid rgba(255,255,255,0.55);
}

.card.card-style-cute{
    border-radius:40px;
    box-shadow:0 12px 30px rgba(255,105,180,0.15);
}

.card.card-style-luxury{
    border:2px solid gold;
    box-shadow:0 14px 36px rgba(0,0,0,0.15);
}

.card.card-style-idol{
    box-shadow:
        0 0 20px rgba(255,105,180,0.35),
        0 0 50px rgba(255,182,193,0.25),
        0 0 80px rgba(255,192,203,0.18);
    border:2px solid rgba(255,182,193,0.7);
}

.photo{

    width:100%;

    border-radius:18px;

    margin-top:20px;

}

.meta{

    color:#888;

}

.content{

    white-space:pre-wrap;

    line-height:1.8;

    margin-top:20px;

}

a{

    display:block;

    margin-top:30px;

}

.preview{

    color:#666;

    line-height:1.6;

    font-size:14px;

}

.edit-button{

    display:inline-block;

    margin-top:20px;

    margin-right:10px;

    padding:12px 20px;

    border-radius:16px;

    background:var(--sub2);

    text-decoration:none;

    color:#444;

    font-weight:bold;

}

.delete-button{

    display:inline-block;
    margin-top:10px;
    padding:12px 20px;
    border-radius:16px;
    background:#fff5f7;
    border:2px solid #ffb3c7;
    color:#cc3333;
    text-decoration:none;
    font-weight:bold;

}

.date-card{

    width:120px;

    margin:auto;

    background:var(--sub2);

    border-radius:24px;

    padding:20px;

    text-align:center;

}

.month{

    font-size:14px;

    color:#888;

}

.day{

    font-size:42px;

    font-weight:bold;

}

.year{

    color:#666;

}

.hero-image{

    width:100%;

    max-width:70vh;

    aspect-ratio:1/1;

    object-fit:contain;

}

.gallery{

    max-width:900px;

    margin:auto;

    display:grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                100px,
                1fr
            )
        );

    gap:10px;

}

.gallery-photo{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    border-radius:16px;

}

.diary-content{

    background:var(--sub2);

    border-left:
        6px solid var(--main);

    padding:24px;

    border-radius:20px;

    margin-top:30px;

    line-height:2;

    white-space:pre-wrap;
}

.card-style-cute .diary-content{
    border-radius:28px;
}

.card-style-glass .diary-content{
    background:rgba(255,255,255,0.65);
}

.card-style-luxury .diary-content{
    border:1px solid gold;
}

.card-style-idol .diary-content{
    box-shadow:
        0 0 16px rgba(255,105,180,0.22),
        0 0 32px rgba(255,182,193,0.16);
}

.lightbox{

    display:none;

    position:fixed;

    inset:0;

    background:
        rgba(
            0,
            0,
            0,
            0.9
        );

    z-index:9999;

    justify-content:center;

    align-items:center;

}

.lightbox img{

    max-width:90%;

    max-height:90%;

    border-radius:20px;

}

.lightbox.show{

    display:flex;

}

.post-nav{

    display:flex;

    justify-content:space-between;

    gap:12px;

    margin-top:40px;

    flex-wrap:wrap;

}

.nav-button{
    flex:1;
    min-width:180px;
    text-align:center;
    padding:14px;
    background:var(--sub2);
    border:2px solid var(--main);
    border-radius:18px;
    text-decoration:none;
    color:#444;
    font-weight:bold;
}

.nav-button:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(0,0,0,0.08);
}

.hero-wrap{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

}

.slide-btn{

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:#fff0f7;

    cursor:pointer;

    font-size:20px;

}

.dots{

    display:flex;

    justify-content:center;

    gap:8px;

    margin-top:15px;

}

.dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#ddd;

    transition:0.2s;

}

.dot.active{

    background:#ff7eb6;

    transform:scale(1.2);

}

.album-header{

    text-align:center;

    margin-bottom:30px;

}

.album-header h2{

    margin:0;

}

.album-header p{

    color:#777;

    line-height:1.8;

    margin-top:10px;

}

.card-style-glass .navbar{
    background:rgba(255,255,255,0.7);
    backdrop-filter:blur(12px);
}

body{
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
    padding:30px;
}

body::after{
    content:'';
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.20),
            rgba(255,247,251,0.48)
        );
}

.card{
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(8px);
    box-shadow:0 10px 40px rgba(0,0,0,0.10);
}

.card.card-style-glass{
    background:rgba(255,255,255,0.72);
    backdrop-filter:blur(14px);
}

html,
body{
    min-height:100%;
}

body{
    margin:0;
    padding:30px;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-attachment:fixed !important;
}

.card{
    background:rgba(255,255,255,0.88) !important;
    backdrop-filter:blur(8px);
    box-shadow:0 10px 40px rgba(0,0,0,0.10);
}

.date-card,
.diary-content,
.nav-button,
.edit-button,
.delete-button{
    background:rgba(255,255,255,0.80) !important;
    backdrop-filter:blur(6px);
}

.card.card-style-glass{
    background:rgba(255,255,255,0.72) !important;
    backdrop-filter:blur(14px);
}

.album-header h2,
.album-header p,
.card h1{
    text-shadow:
        0 2px 10px rgba(255,255,255,0.85),
        0 2px 16px rgba(0,0,0,0.10);
}

/* ========================================
   sakura particle effect - more natural
======================================== */

body.bg-sakura{
    --particle-size-1: 72px;
    --particle-size-2: 58px;
    --particle-size-3: 46px;
}

/* ========================================
   Diary particle z-index
======================================== */

body.bg-sakura::before,
body.bg-sakura::after,
body.bg-stars::before,
body.bg-stars::after,
body.bg-star::before,
body.bg-star::after,
body.bg-snow::before,
body.bg-snow::after{
    z-index:1;
}

.diary-wrapper,
.diary-container,
.diary-card,
.post-wrapper,
.post,
.navbar{
    position:relative;
    z-index:2;
}