/* =====================================================================
   首页「发布照片」入口 + 浮层 + 表单
   - 融入粉色主题（#ff5295 / #ee7c74）、Noto Serif SC、圆角、自定义光标
   - 预览卡片本身不写样式，直接复用 loveImg.css 的 .img_card 体系（所见即所得）
   - 反馈色复用 loveImg.css：绿 #37c93b / 红 #e23b3b
   ===================================================================== */

/* ---------- 发布入口按钮（标题下方居中） ---------- */
.publish-entry {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 1rem auto .5rem;
    padding: .55rem 1.6rem;
    font-family: 'Noto Serif SC', serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
    color: #ff5295;
    background: #fff;
    border: 1px solid rgba(255, 82, 149, .55) !important;
    border-radius: 2rem;
    box-shadow: 0 4px 12px #ff529522;
    cursor: pointer;
    cursor: url(../cur/hover.cur), pointer;
    transition: all .2s linear;
}
.publish-entry:hover {
    color: #fff;
    background: #ff5295;
    box-shadow: 0 6px 18px #ff529555;
    transform: translateY(-1px);
}
.publish-entry:active { transform: translateY(0); }

/* ---------- 浮层遮罩 ---------- */
.pub-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    box-sizing: border-box;
    background: rgba(60, 50, 55, .45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
body.pub-lock { overflow: hidden; }

/* ---------- 浮层主体 ---------- */
.pub-modal {
    width: min(900px, 100%);
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
    font-family: 'Noto Serif SC', serif;
    animation: pubPop .22s ease-out;
}
@keyframes pubPop {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.pub-modal-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.4rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #ff5295, #ee7c74);
    border-radius: 1.5rem 1.5rem 0 0;
}
.pub-modal-head .pub-close {
    font-style: normal;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    opacity: .85;
    transition: opacity .2s, transform .2s;
}
.pub-modal-head .pub-close:hover { opacity: 1; transform: rotate(90deg); }

/* ---------- 主体两栏：表单 | 预览 ---------- */
.pub-modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
    padding: 1.5rem;
}
@media (max-width: 760px) {
    .pub-modal-body { grid-template-columns: 1fr; }
}

/* ---------- 表单 ---------- */
.pub-field { margin-bottom: 1.1rem; }
.pub-field > label {
    display: block;
    margin-bottom: .4rem;
    font-size: .95rem;
    font-weight: 700;
    color: #5a4a50;
}
.pub-field input[type="date"],
.pub-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: .6rem .8rem;
    font-family: 'Noto Serif SC', serif;
    font-size: 1rem;
    color: #454040;
    background: #fafafa;
    border: 1px solid rgba(208, 206, 206, .7);
    border-radius: .8rem;
    transition: border-color .2s, box-shadow .2s;
}
.pub-field textarea { resize: vertical; min-height: 4.5rem; }
.pub-field input:focus,
.pub-field textarea:focus {
    border-color: #ff5295;
    box-shadow: 0 0 0 3px rgba(255, 82, 149, .15);
    background: #fff;
}
.pub-counter {
    margin-top: .25rem;
    text-align: right;
    font-size: .8rem;
    color: #b5b5b5;
}

/* 拖拽 / 选择区 */
.pub-dropzone {
    padding: 1.6rem 1rem;
    text-align: center;
    color: #9a8a90;
    background: #fafafa;
    border: 2px dashed rgba(255, 82, 149, .4);
    border-radius: .8rem;
    cursor: pointer;
    cursor: url(../cur/hover.cur), pointer;
    transition: all .2s linear;
}
.pub-dropzone small { color: #c0c0c0; font-size: .8rem; }
.pub-dropzone:hover,
.pub-dropzone.is-drag {
    border-color: #ff5295;
    background: rgba(255, 82, 149, .06);
    color: #ff5295;
}
.pub-dropzone.has-file { border-style: solid; border-color: #37c93b; color: #37c93b; }

/* 操作按钮 */
.pub-actions {
    display: flex;
    justify-content: flex-end;
    gap: .8rem;
    margin-top: 1.4rem;
}
.pub-btn {
    padding: .55rem 1.6rem;
    font-family: 'Noto Serif SC', serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
    border-radius: 2rem;
    border: none;
    cursor: pointer;
    transition: all .2s linear;
}
.pub-btn:disabled { opacity: .6; cursor: not-allowed; }
.pub-cancel { background: #f0ecef; color: #8a7a80; }
.pub-cancel:hover { background: #e6e0e3; }
.pub-submit { background: linear-gradient(135deg, #ff5295, #ee7c74); color: #fff; box-shadow: 0 4px 12px #ff529544; }
.pub-submit:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 6px 18px #ff529566; }

/* ---------- 预览栏 ---------- */
.pub-preview-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pub-preview-label {
    margin-bottom: .6rem;
    font-size: .85rem;
    color: #b5b5b5;
    letter-spacing: 1px;
}
.pub-preview-row {
    /* 不沿用 .row 的 12 列网格：否则 col-lg-4 会被挤成 ~1/3 宽，
       而 .love_img img 固定 20rem，会导致卡片被压扁、图片溢出。
       改为 flex 居中 + 卡片按内容自适应宽度，让预览以「单卡自然尺寸」
       呈现——与首页单张卡片的实际宽度（图片 20rem + 内边距）一致。 */
    display: flex !important;
    justify-content: center;
    align-items: flex-start;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
.pub-preview-row .img_card {
    flex: 0 0 auto;       /* 保持内容宽度，不被网格/弹性拉伸或压缩 */
    width: auto;          /* 由内部 20rem 图片 + 内边距撑开，≈ 真实卡片宽度 */
    max-width: 100%;
    margin: 0 auto;
    transition: none;     /* 预览不触发悬停深色态 */
}
.pub-preview-hint {
    margin-top: .8rem;
    font-size: .8rem;
    color: #c0c0c0;
}