/* ============================================================
   css/internal-lock.css — 内测「暂锁」样式（纯前端装饰）
   韩系法式唯美风：暖米纸底 / 玫瑰色 / 金色细线 / 多层阴影
   零 emoji，线条 SVG 图标，精致过渡，防闪
   ============================================================ */

/* ===== 图标右上角「暂锁」小灰框 ===== */
.il-lock-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 4px;
    font-family: var(--font-body, 'Noto Serif SC', 'PingFang SC', 'STSong', 'Georgia', serif);
    font-size: 9px;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: rgba(140, 132, 122, 0.9);
    background: rgba(240, 236, 229, 0.72);
    border: 0.5px solid rgba(150, 142, 130, 0.35);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(90, 82, 72, 0.12);
    pointer-events: auto;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    backdrop-filter: none; /* 滚动容器内禁 backdrop-filter，防重栅格闪动 */
}

/* ===== 图标右上角「制作中」小角标（2028-09-28 甲方：半成品先开放）=====
   与「暂锁」的区别就两点，其它（位置/字号/圆角）全沿用上面那一套：
     ① **它不吃点击**（pointer-events:none）—— 这个功能能进，角标只是说明"还没做完"；
     ② 颜色走玫瑰/暖白，不用暂锁那种灰 —— 一眼能看出"这个是能点的"。 */
.il-lock-badge.il-making {
    pointer-events: none;
    color: rgba(166, 118, 118, 0.92);
    background: rgba(248, 238, 236, 0.8);
    border-color: rgba(201, 168, 168, 0.5);
    letter-spacing: 0;
}

/* 加号面板图标：灰框贴图标右上 */
.plus-item-icon {
    position: relative; /* 暂锁灰框锚点（图标右上角） */
}

/* 小窝首页图标：灰框贴图标圆环右上 */
.nh-icon-circle .il-lock-badge {
    top: -2px;
    right: -2px;
}

/* 会客厅按钮：灰框贴右上（header 内，绝对定位）*/
.cl-guest-btn {
    position: relative;
}
.cl-guest-btn .il-lock-badge {
    top: -4px;
    right: -4px;
}

/* ===== 「暂锁」精致小窗 ===== */
.il-notify-overlay {
    position: absolute;
    inset: 0;
    z-index: 2600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(40, 34, 28, 0.28);
    opacity: 0;
    transition: opacity 0.22s ease;
}
.il-notify-overlay.show {
    opacity: 1;
    transition: none; /* open 方向 animation 独占 */
    animation: ilFadeIn 0.28s ease;
}
.il-notify-overlay.show .il-notify-card {
    animation: ilCardIn 0.36s cubic-bezier(0.22, 0.9, 0.36, 1);
}
.il-notify-overlay:not(.show) {
    pointer-events: none;
}

.il-notify-card {
    width: min(300px, 86%);
    background: var(--bg-primary, #F8F4EF);
    border: 0.5px solid var(--border, rgba(180, 170, 155, 0.22));
    border-radius: 20px;
    padding: 26px 24px 22px;
    text-align: center;
    box-shadow: var(--shadow-lg, 0 18px 44px rgba(70, 60, 50, 0.24)), 0 2px 0 rgba(255, 255, 255, 0.5) inset;
    position: relative;
}
.il-notify-card::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 1px;
    background: var(--gold, #C4A86A);
    opacity: 0.55;
}

.il-notify-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    color: var(--rose, #C9A8A8);
}
.il-notify-icon svg { display: block; }

.il-notify-title {
    font-family: var(--font-body, 'Noto Serif SC', 'PingFang SC', 'STSong', 'Georgia', serif);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-primary, #2E2822);
    margin-bottom: 8px;
}
.il-notify-sub {
    font-family: var(--font-body, 'Noto Serif SC', 'PingFang SC', 'STSong', 'Georgia', serif);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted, rgba(120, 112, 102, 0.9));
    margin-bottom: 20px;
}

.il-notify-ok {
    font-family: var(--font-body, 'Noto Serif SC', 'PingFang SC', 'STSong', 'Georgia', serif);
    font-size: 14px;
    letter-spacing: 0.08em;
    color: #fff;
    background: var(--accent-rose, #C9A8A8);
    border: none;
    border-radius: 999px;
    padding: 10px 34px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    box-shadow: 0 4px 12px rgba(200, 160, 160, 0.35);
}
.il-notify-ok:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 2px 6px rgba(200, 160, 160, 0.3);
}

@keyframes ilFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes ilCardIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}