/* ===================================================== */
/* 추출된 기능 CSS: 스토리 + 프로필 + 차이로그           */
/* ===================================================== */

/* === 스토리/피드 관련 CSS 변수 === */
:root { --insta-border: #eeeeee; --insta-bg: #ffffff; --story-ring: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }

/* === 스토리 바 + 모달 CSS === */
/* 💡 상단 스토리 바 (좌우 부드러운 스크롤 강제 적용 및 너비 고정) */
.story-container { padding: 10px 15px 15px 15px; border-bottom: 1px solid var(--insta-border); display: flex; flex-wrap: nowrap; gap: 15px; overflow-x: auto; background: #ffffff; flex-shrink: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; width: 100%; box-sizing: border-box; }
.story-container::-webkit-scrollbar { display: none; }
.story-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; min-width: 65px; flex: 0 0 auto; transition: 0.2s; }
.story-item:hover { transform: scale(1.05); }
.story-ring { width: 66px; height: 66px; border-radius: 50%; background: var(--story-ring); display: flex; justify-content: center; align-items: center; padding: 2px; position: relative; }
.story-ring.add-story { background: #dbdbdb; }
.story-ring.student-story { background: #e0e0e0; } 
.story-ring .inner-pic { width: 100%; height: 100%; border-radius: 50%; border: 2px solid #fff; background: #f4f8f9; display: flex; align-items: center; justify-content: center; font-size: 30px; overflow: hidden; position: relative; }
.add-badge { position: absolute; bottom: 0; right: 0; background: #0095f6; color: #fff; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: bold; }
.story-name { font-size: 12px; text-align: center; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #262626; font-weight: 500; }

/* 스토리 모달창 */
.story-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 10000; display: none; justify-content: center; align-items: center; }
.story-modal-content { width: 350px; height: 600px; background: #222; border-radius: 15px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.story-progress-bar { display: flex; gap: 5px; padding: 15px; position: absolute; top: 0; width: 100%; z-index: 10; }
.story-progress-bar div { flex: 1; height: 2px; background: rgba(255,255,255,0.3); border-radius: 2px; }
.story-progress-bar div.active { background: #fff; }
.story-header { position: absolute; top: 25px; left: 15px; z-index: 10; display: flex; align-items: center; gap: 10px; color: #fff; }
.story-img-area { flex: 1; background: #333; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 20px; flex-direction: column; padding: 20px; text-align: center; }
.story-close { position: absolute; top: 20px; right: 20px; color: #fff; font-size: 24px; cursor: pointer; z-index: 10; }


/* === 프로필 모달 CSS === */

#profileModal {
    display: none; position: fixed; inset: 0; z-index: 99999;
    background: rgba(0,0,0,0.55); justify-content: center; align-items: center;
}
#profileModalBox {
    background: #fff; border-radius: 20px; width: 360px; max-width: 95vw;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25); overflow: hidden;
    display: flex; flex-direction: column;
}
#profileModalBox .pm-header {
    background: linear-gradient(135deg, #2671bc, #1a4a8a);
    color: #fff; padding: 18px 20px; font-size: 17px; font-weight: 900;
    display: flex; justify-content: space-between; align-items: center;
}
#profileModalBox .pm-header button {
    background: rgba(255,255,255,0.2); border: none; color: #fff;
    width: 28px; height: 28px; border-radius: 50%; font-size: 16px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pm-section { padding: 20px; border-bottom: 1px solid #f0f0f0; }
.pm-section h3 { margin: 0 0 14px 0; font-size: 14px; font-weight: 900; color: #333; display: flex; align-items: center; gap: 6px; }
/* 프로필 사진 */
#pmAvatarPreview {
    width: 90px; height: 90px; border-radius: 50%; object-fit: cover;
    border: 3px solid #2671bc; cursor: pointer; display: block;
    margin: 0 auto 10px; background: #e8f4fd;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; overflow: hidden;
}
#pmAvatarPreview img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#pmFileInput { display: none; }
#pmUploadBtn {
    width: 100%; padding: 9px; background: #f0f7ff; border: 1.5px dashed #2671bc;
    border-radius: 8px; color: #2671bc; font-size: 13px; font-weight: bold;
    cursor: pointer; text-align: center; transition: 0.2s;
}
#pmUploadBtn:hover { background: #e0eeff; }
/* D-day */
.dday-item {
    display: flex; align-items: center; gap: 8px;
    background: #f8f9fa; border-radius: 10px; padding: 10px 12px;
    margin-bottom: 8px; position: relative;
}
.dday-item .dday-label { font-size: 13px; font-weight: bold; color: #333; flex: 1; }
.dday-item .dday-count { font-size: 16px; font-weight: 900; color: #2671bc; min-width: 60px; text-align: right; }
.dday-item .dday-del {
    background: none; border: none; color: #ccc; font-size: 16px;
    cursor: pointer; padding: 0 4px; line-height: 1;
}
.dday-item .dday-del:hover { color: #e32533; }
.pm-dday-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pm-dday-form input {
    padding: 8px 12px; border: 1.5px solid #ddd; border-radius: 8px;
    font-size: 13px; outline: none; width: 100%; box-sizing: border-box;
}
.pm-dday-form input:focus { border-color: #2671bc; }
.pm-dday-form button {
    padding: 9px; background: #2671bc; color: #fff; border: none;
    border-radius: 8px; font-size: 13px; font-weight: bold; cursor: pointer;
}
.pm-dday-form button:hover { background: #1a5aa0; }
.pm-save-btn {
    margin: 16px 20px 20px; padding: 12px; background: #2671bc;
    color: #fff; border: none; border-radius: 10px; font-size: 15px;
    font-weight: 900; cursor: pointer; width: calc(100% - 40px);
}
.pm-save-btn:hover { background: #1a5aa0; }


/* === 차이로그방 CSS === */

.vr-slot {
    position:relative; background:#1a1a1a; overflow:hidden;
    aspect-ratio:1/1; cursor:pointer; border:2px solid #1a1a1a;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    border-radius:10px; transition:border-color 0.2s;
}
.vr-slot:hover { border-color:#444; }
.vr-slot.mine  { border-color:#2671bc; box-shadow:inset 0 0 0 3px #2671bc; }
.vr-slot.empty { background:#111; border:2px solid #1e1e1e; cursor:default; }
.vr-slot video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.vr-slot-name  {
    position:absolute; bottom:0; left:0; right:0;
    background:linear-gradient(transparent, rgba(0,0,0,0.88));
    padding:22px 8px 8px;
    font-size:16px; font-weight:900; color:#fff; text-align:center;
    text-shadow:0 1px 5px rgba(0,0,0,0.9);
}
.vr-slot-time  {
    position:absolute; top:7px; right:8px;
    font-size:12px; font-weight:bold; color:rgba(255,255,255,0.95);
    background:rgba(0,0,0,0.55); padding:2px 7px; border-radius:6px;
}
.vr-slot-empty-icon { font-size:30px; color:#2a2a2a; margin-bottom:8px; }
.vr-slot-empty-text { font-size:12px; color:#333; }

#vrRecordOverlay {
    display:none; position:fixed; inset:0; z-index:999999;
    background:rgba(0,0,0,0.93); flex-direction:column;
    align-items:center; justify-content:center; gap:14px;
}
#vrPreviewVideo { width:260px; height:260px; object-fit:cover; border-radius:16px; border:3px solid #e32533; }
#vrCountdown    { font-size:80px; font-weight:900; color:#e32533; line-height:1; }
#vrRecordMsg    { font-size:15px; color:#fff; font-weight:bold; }

.tl-hour-block  { margin-bottom:22px; }
.tl-hour-label  { font-size:13px; font-weight:900; color:#7eb3ff; margin-bottom:9px; padding-left:4px; border-left:3px solid #2671bc; padding-left:10px; }
.tl-videos      { display:flex; gap:8px; flex-wrap:wrap; }
.tl-video-card  { width:76px; background:#1a1a1a; border-radius:8px; overflow:hidden; cursor:pointer; border:1px solid #2a2a2a; transition:transform 0.2s; flex-shrink:0; }
.tl-video-card:hover { transform:scale(1.06); border-color:#2671bc; }
.tl-video-card video { width:100%; aspect-ratio:9/16; object-fit:cover; display:block; }
.tl-video-card-name  { font-size:9px; color:#aaa; text-align:center; padding:3px 2px; background:#111; }