/* =========================================================
   LOST FILM — 青春喪失
   Mastodon 4.7.1

   Japanese Indie Film / Summer Youth
   Dialogue Timeline Edition

   - Mastodon 기본 폰트
   - 프사 + 말풍선 타임라인
   - 스레드 연결선 없음
   ========================================================= */


/* =========================================================
   01. COLOR
   ========================================================= */

:root {
    --lost-blue: #196dff;
    --lost-blue-dark: #16458f;
    --lost-blue-light: #4da3ff;
    --lost-navy: #071b4d;

    --color-bg-primary: #ffffff !important;
    --color-bg-secondary: rgba(245, 249, 255, 0.50) !important;
    --color-bg-tertiary: rgba(224, 236, 255, 0.50) !important;

    --color-bg-brand-base: #196dff !important;
    --color-bg-brand-base-hover: #0b57d0 !important;

    --color-bg-brand-soft: #dce9ff !important;
    --color-bg-brand-softest: #f5f9ff !important;

    --color-text-primary: #071b4d !important;
    --color-text-secondary: #526b91 !important;
    --color-text-brand: #196dff !important;
    --color-text-on-brand-base: #ffffff !important;

    --color-border-primary:
        rgba(25, 109, 255, 0.18) !important;

    --color-border-brand:
        #196dff !important;
}


/* =========================================================
   02. BACKGROUND
   ========================================================= */

html,
body {
    background:
        url("https://cdn.masto.host/lostfilmlive/media_attachments/files/117/276/147/695/034/277/original/522b3fca62a5f6cc.png")
        center center / cover
        fixed no-repeat !important;
}


/* =========================================================
   03. OUTER LAYOUT
   배경 이미지가 보이도록 바깥 영역 투명화
   ========================================================= */

#mastodon,
#mastodon .app-holder,
#mastodon .columns-area,
#mastodon .columns-area__panels,
#mastodon .columns-area__panels__main {
    background: transparent !important;
}


/* =========================================================
   04. MAIN COLUMNS
   전체 UI는 흰색 반투명
   ========================================================= */

#mastodon .column,
#mastodon .drawer {
    background:
        rgba(255, 255, 255, 0.48) !important;
}


/* =========================================================
   05. TIMELINE WRAPPER
   게시글끼리 여백 확보
   ========================================================= */

.status__wrapper {
    position: relative !important;

    margin:
        14px 10px 22px 10px !important;

    padding:
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    overflow:
        visible !important;
}


/* wrapper 자체 hover 제거 */

.status__wrapper:hover {
    background:
        transparent !important;
}


/* =========================================================
   06. SPEECH BUBBLE
   게시글 본체
   ========================================================= */

.status {
    position:
        relative !important;

    /*
       왼쪽은 프사 공간
    */
    margin-left:
        64px !important;

    width:
        auto !important;

    padding:
        18px 20px 20px 20px !important;

    background:
        rgba(255, 255, 255, 0.84) !important;

    border:
        1px solid rgba(25, 109, 255, 0.16) !important;

    border-radius:
        4px !important;

    box-shadow:
        0 4px 18px
        rgba(7, 27, 77, 0.055) !important;

    overflow:
        visible !important;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease !important;
}


/* =========================================================
   07. SPEECH BUBBLE TAIL
   프사 쪽을 향하는 작은 꼬리
   ========================================================= */

.status::before {
    content:
        "" !important;

    display:
        block !important;

    position:
        absolute !important;

    top:
        19px !important;

    left:
        -7px !important;

    width:
        12px !important;

    height:
        12px !important;

    background:
        rgba(255, 255, 255, 0.84) !important;

    border-left:
        1px solid rgba(25, 109, 255, 0.16) !important;

    border-bottom:
        1px solid rgba(25, 109, 255, 0.16) !important;

    transform:
        rotate(45deg) !important;

    z-index:
        2 !important;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease !important;
}


/* =========================================================
   08. POST HOVER
   ========================================================= */

.status:hover {
    background:
        rgba(255, 255, 255, 0.95) !important;

    border-color:
        rgba(25, 109, 255, 0.28) !important;

    box-shadow:
        0 6px 22px
        rgba(7, 27, 77, 0.075) !important;
}


.status:hover::before {
    background:
        rgba(255, 255, 255, 0.95) !important;

    border-color:
        rgba(25, 109, 255, 0.28) !important;
}


/* =========================================================
   09. AVATAR
   프사를 말풍선 바깥 왼쪽으로
   ========================================================= */

.status__avatar {
    position:
        absolute !important;

    top:
        5px !important;

    left:
        -54px !important;

    margin:
        0 !important;

    z-index:
        5 !important;
}


.status__avatar .account__avatar {
    width:
        42px !important;

    height:
        42px !important;

    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.82),
        0 2px 8px rgba(7, 27, 77, 0.08) !important;
}


/* 프사는 완전 원형 대신 살짝 각지게 */

.status__avatar .account__avatar,
.status__avatar .account__avatar img,
.account__avatar,
.account__avatar img,
.account__avatar-overlay {
    border-radius:
        3px !important;
}


/* =========================================================
   10. DISPLAY NAME
   ========================================================= */

.status__display-name {
    margin-bottom:
        7px !important;

    letter-spacing:
        0.015em !important;
}


.status__display-name .display-name strong,
.display-name strong {
    color:
        #071b4d !important;

    font-weight:
        600 !important;

    letter-spacing:
        0.025em !important;
}


/* @아이디 */

.status__display-name .display-name__account,
.display-name__account {
    color:
        #7284a0 !important;

    font-size:
        0.86em !important;

    font-weight:
        400 !important;

    letter-spacing:
        0.03em !important;
}


/* =========================================================
   11. DATE / TIME
   작은 필름 데이터 같은 느낌
   ========================================================= */

.status__relative-time,
.status__relative-time a {
    color:
        #8492aa !important;

    font-size:
        10px !important;

    font-weight:
        400 !important;

    letter-spacing:
        0.07em !important;
}


.status__relative-time:hover,
.status__relative-time a:hover {
    color:
        #196dff !important;
}


/* =========================================================
   12. POST BODY
   ========================================================= */

.status__content,
.status__content__text {
    line-height:
        1.82 !important;

    letter-spacing:
        0.012em !important;
}


.status__content p {
    margin-bottom:
        0.65em;
}


.status__content p:last-child {
    margin-bottom:
        0;
}


/* =========================================================
   13. LINKS
   ========================================================= */

a {
    color:
        #16458f !important;

    transition:
        color 0.15s ease,
        opacity 0.15s ease,
        background-color 0.15s ease !important;
}


a:hover {
    color:
        #4da3ff !important;
}


/* 본문 링크 */

.status__content a {
    text-decoration:
        underline rgba(25, 109, 255, 0.28) !important;

    text-decoration-thickness:
        1px !important;

    text-underline-offset:
        3px !important;
}


.status__content a:hover {
    text-decoration-color:
        #196dff !important;
}


/* 멘션 */

.status__content a.mention,
.detailed-status__content a.mention {
    color:
        #196dff !important;

    text-decoration:
        none !important;
}


.status__content a.mention:hover,
.detailed-status__content a.mention:hover {
    color:
        #4da3ff !important;

    text-decoration:
        underline !important;

    text-underline-offset:
        3px !important;
}


/* =========================================================
   14. ACTION BAR
   답글 / 부스트 / 좋아요
   ========================================================= */

.status__action-bar {
    margin-top:
        16px !important;

    padding-top:
        11px !important;

    border-top:
        1px solid rgba(25, 109, 255, 0.08) !important;
}


.status__action-bar button {
    opacity:
        0.60;

    transition:
        opacity 0.15s ease,
        color 0.15s ease !important;
}


.status__action-bar button:hover {
    opacity:
        1;

    color:
        #196dff !important;
}


/* =========================================================
   15. BOOST / REBLOG INFO
   ========================================================= */

.status__prepend {
    margin-left:
        64px !important;

    margin-bottom:
        7px !important;

    color:
        #78879e !important;

    font-size:
        11px !important;

    letter-spacing:
        0.045em !important;
}


/* =========================================================
   16. MEDIA
   영화 스틸컷처럼 각지게
   ========================================================= */

.media-gallery,
.media-gallery__item,
.media-gallery__item-thumbnail,
.audio-player,
.video-player,
.status-card,
.status-card__image,
.status-card__content {
    border-radius:
        2px !important;
}


.media-gallery {
    outline:
        1px solid rgba(25, 109, 255, 0.10);

    outline-offset:
        -1px;
}


/* =========================================================
   17. COLUMN HEADER
   ========================================================= */

.column-header,
.navigation-bar {
    border-radius:
        0 !important;

    border-bottom:
        1px solid rgba(25, 109, 255, 0.24) !important;
}


.column-header {
    letter-spacing:
        0.055em !important;
}


/* =========================================================
   18. NAVIGATION
   ========================================================= */

.column-link,
.drawer__tab {
    letter-spacing:
        0.025em !important;

    transition:
        color 0.15s ease,
        background-color 0.15s ease !important;
}


.column-link:hover,
.drawer__tab:hover {
    color:
        #196dff !important;
}


/* =========================================================
   19. LOST FILM LOGO
   ========================================================= */

.column-link--logo {
    position:
        relative !important;

    width:
        180px !important;

    height:
        72px !important;

    margin-top:
        20px !important;

    margin-right:
        0 !important;

    margin-bottom:
        0 !important;

    margin-left:
        0 !important;

    padding:
        0 !important;

    justify-content:
        flex-start !important;

    align-items:
        center !important;

    background-image:
        url("https://cdn.masto.host/lostfilmlive/media_attachments/files/117/276/166/201/829/594/original/9568e9bf2d4d528b.png")
        !important;

    background-size:
        contain !important;

    background-position:
        left center !important;

    background-repeat:
        no-repeat !important;

    color:
        transparent !important;
}


/* Mastodon 기본 로고 숨김 */

.column-link--logo svg {
    display:
        none !important;
}


/* =========================================================
   20. BUTTON
   ========================================================= */

.button {
    --button-background:
        #196dff !important;

    --button-background-hover:
        #0b57d0 !important;

    border-radius:
        0 !important;

    letter-spacing:
        0.045em !important;

    box-shadow:
        none !important;
}


/* =========================================================
   21. INPUT
   ========================================================= */

input,
textarea,
select {
    border-radius:
        0 !important;

    border-color:
        rgba(25, 109, 255, 0.24) !important;

    box-shadow:
        none !important;
}


input:focus,
textarea:focus,
select:focus {
    border-color:
        #196dff !important;

    box-shadow:
        none !important;
}


/* =========================================================
   22. PROFILE
   ========================================================= */

.account__header,
.account__header__image,
.account__header__image img {
    border-radius:
        0 !important;
}


.account__header__fields {
    letter-spacing:
        0.015em !important;
}


/* =========================================================
   23. DETAILED STATUS
   게시글 상세 화면
   스레드 선은 만들지 않음
   ========================================================= */

.detailed-status,
.detailed-status__wrapper {
    position:
        relative !important;

    overflow:
        visible !important;
}


.detailed-status {
    background:
        rgba(255, 255, 255, 0.86) !important;

    border-color:
        rgba(25, 109, 255, 0.18) !important;

    border-radius:
        4px !important;
}


/* 상세글 메타 정보 */

.detailed-status__meta {
    margin-top:
        18px !important;

    padding-top:
        12px !important;

    border-top:
        1px solid rgba(25, 109, 255, 0.10) !important;

    color:
        #8492aa !important;

    font-size:
        11px !important;

    letter-spacing:
        0.04em !important;
}


/* =========================================================
   24. ★ THREAD DECORATIONS OFF ★

   이전 실험에서 사용한
   세로선 / 가지 / 점 / REPLY 장식
   모두 확실하게 제거
   ========================================================= */

.detailed-status__wrapper::before,
.detailed-status__wrapper::after,
.detailed-status__wrapper ~ .status__wrapper::before,
.detailed-status__wrapper ~ .status__wrapper::after,
.status__wrapper::before,
.status__wrapper::after,
.status__avatar::before,
.status__avatar::after {
    content:
        none !important;

    display:
        none !important;
}


/*
   주의:
   .status::before 는 위에서 정의한
   "말풍선 꼬리"이므로 제거하지 않음.
*/


/* REPLY / 같은 장식 문구 제거 */

.status__content::before {
    content:
        none !important;
}


/* =========================================================
   25. CARDS
   ========================================================= */

.card,
.status-card,
.status-card__image,
.status-card__content,
.content-warning {
    border-radius:
        0 !important;
}


/* =========================================================
   26. TEXT SELECTION
   ========================================================= */

::selection {
    background:
        #196dff !important;

    color:
        #ffffff !important;
}


/* =========================================================
   27. KEYBOARD FOCUS
   ========================================================= */

*:focus-visible {
    outline-color:
        #196dff !important;
}


/* =========================================================
   28. SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width:
        7px;

    height:
        7px;
}


::-webkit-scrollbar-track {
    background:
        rgba(245, 249, 255, 0.30);
}


::-webkit-scrollbar-thumb {
    background:
        rgba(25, 109, 255, 0.40);

    border-radius:
        0;
}


::-webkit-scrollbar-thumb:hover {
    background:
        #196dff;
}


/* =========================================================
   29. FILM FRAME
   ========================================================= */

.column {
    box-shadow:
        0 0 0 1px
        rgba(255, 255, 255, 0.22);
}


/* 전체적으로 둥근 카드 UI 최소화 */

.card,
.drawer,
.column {
    border-radius:
        0 !important;
}


/* =========================================================
   30. SMALL META TEXT
   ========================================================= */

.status__prepend,
.status__info,
.account__header__extra,
.notification__message {
    letter-spacing:
        0.025em !important;
}


/* =========================================================
   31. MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .status__wrapper {
        margin-left:
            6px !important;

        margin-right:
            6px !important;
    }


    .status {
        margin-left:
            50px !important;

        padding:
            15px 15px 17px 15px !important;
    }


    .status__avatar {
        left:
            -43px !important;
    }


    .status__avatar .account__avatar {
        width:
            34px !important;

        height:
            34px !important;
    }


    .status__prepend {
        margin-left:
            50px !important;
    }
}

/* =========================================================
   LOST FILM — 青春喪失
   EXTENSION PACK — CLEAN EDITION

   KEEP
   - Film Still Media
   - Notifications
   - Poll
   - Loading Motion
   - Login / Logged-out Pages
   - Square Modal UI

   REMOVE
   - Compose
   - Content Warning
   - Avatar
   - Hashtags
   ========================================================= */


/* =========================================================
   LOST FILM — POLAROID MEDIA
   첨부 이미지를 폴라로이드 사진처럼
   ========================================================= */


/* 사진 전체 프레임 */

.status .media-gallery {
    position: relative !important;

    box-sizing: border-box !important;

    /*
       위/좌우는 얇게,
       아래쪽만 길게 = 폴라로이드
    */
    padding:
        8px 8px 42px 8px !important;

    margin-top:
        16px !important;

    background:
        rgba(255, 255, 255, 0.96) !important;

    border:
        1px solid rgba(35, 76, 135, 0.12) !important;

    border-radius:
        1px !important;

    box-shadow:
        0 5px 16px rgba(7, 27, 77, 0.10) !important;

    overflow:
        hidden !important;
}


/* =========================================================
   실제 사진
   ========================================================= */

.status .media-gallery__item,
.status .media-gallery__item-thumbnail,
.status .media-gallery img {
    border-radius:
        0 !important;
}


/* 기존 LOST FILM / STILL 문구 제거 */

.status .media-gallery::after {
    content:
        none !important;

    display:
        none !important;
}


/* =========================================================
   사진 여러 장
   각각의 사진 사이에 작은 간격
   ========================================================= */

.status .media-gallery {
    gap:
        6px !important;
}


/* =========================================================
   HOVER
   아주 살짝 떠오르게
   ========================================================= */

.status .media-gallery {
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease !important;
}


.status .media-gallery:hover {
    transform:
        translateY(-2px) !important;

    box-shadow:
        0 8px 22px rgba(7, 27, 77, 0.13) !important;
}


/* =========================================================
   영상도 비슷한 흰 프레임
   ========================================================= */

.status .video-player {
    box-sizing:
        border-box !important;

    padding:
        8px 8px 38px 8px !important;

    margin-top:
        16px !important;

    background:
        rgba(255, 255, 255, 0.96) !important;

    border:
        1px solid rgba(35, 76, 135, 0.12) !important;

    border-radius:
        1px !important;

    box-shadow:
        0 5px 16px rgba(7, 27, 77, 0.10) !important;
}


/* =========================================================
   모바일에서는 아래 여백 조금 축소
   ========================================================= */

@media (max-width: 600px) {

    .status .media-gallery {
        padding:
            6px 6px 32px 6px !important;
    }

    .status .video-player {
        padding:
            6px 6px 30px 6px !important;
    }

}

/* =========================================================
   사진 여러 장
   각각의 사진 사이에 작은 간격
   ========================================================= */

.status .media-gallery {
    gap:
        6px !important;
}


/* =========================================================
   HOVER
   아주 살짝 떠오르게
   ========================================================= */

.status .media-gallery {
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease !important;
}


.status .media-gallery:hover {
    transform:
        translateY(-2px) !important;

    box-shadow:
        0 8px 22px rgba(7, 27, 77, 0.13) !important;
}


/* =========================================================
   영상도 비슷한 흰 프레임
   ========================================================= */

.status .video-player {
    box-sizing:
        border-box !important;

    padding:
        8px 8px 38px 8px !important;

    margin-top:
        16px !important;

    background:
        rgba(255, 255, 255, 0.96) !important;

    border:
        1px solid rgba(35, 76, 135, 0.12) !important;

    border-radius:
        1px !important;

    box-shadow:
        0 5px 16px rgba(7, 27, 77, 0.10) !important;
}


/* =========================================================
   모바일에서는 아래 여백 조금 축소
   ========================================================= */

@media (max-width: 600px) {

    .status .media-gallery {
        padding:
            6px 6px 32px 6px !important;
    }

    .status .video-player {
        padding:
            6px 6px 30px 6px !important;
    }

}

/* =========================================================
   02. NOTIFICATIONS — PRODUCTION NOTES
   알림을 얇은 제작 노트 카드처럼
   ========================================================= */

.notification {
    position: relative !important;

    margin: 8px 10px !important;

    background:
        rgba(255, 255, 255, 0.70) !important;

    border:
        1px solid rgba(25, 109, 255, 0.11) !important;

    border-radius: 2px !important;

    box-shadow: none !important;
}


/* 왼쪽 파란 인덱스 */

.notification::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 2px !important;

    background:
        rgba(25, 109, 255, 0.42) !important;
}


.notification__message {
    color: #526b91 !important;

    font-size: 12px !important;

    letter-spacing: 0.035em !important;
}


.notification:hover {
    background:
        rgba(255, 255, 255, 0.88) !important;

    border-color:
        rgba(25, 109, 255, 0.22) !important;
}


.notification__message svg {
    color: #196dff !important;

    opacity: 0.72 !important;
}


/* =========================================================
   03. POLL — FILM DATA
   투표 결과를 얇은 파란 그래프로
   ========================================================= */

.poll {
    margin-top: 15px !important;

    padding-top: 12px !important;

    border-top:
        1px solid rgba(25, 109, 255, 0.10) !important;
}


.poll__option {
    margin-bottom: 9px !important;
}


/* 투표 막대 */

.poll__chart {
    height: 3px !important;

    background:
        rgba(25, 109, 255, 0.10) !important;

    border-radius: 0 !important;
}


.poll__chart.leading,
.poll__chart__fill,
.poll__chart > span {
    background: #196dff !important;

    border-radius: 0 !important;
}


/* 선택 표시 */

.poll__input {
    border-color:
        rgba(25, 109, 255, 0.38) !important;

    border-radius: 0 !important;
}


/* 투표 정보 */

.poll__footer {
    color: #8492aa !important;

    font-size: 10px !important;

    letter-spacing: 0.055em !important;
}


/* =========================================================
   04. LOADING — FILM REEL
   ========================================================= */

.loading-indicator,
.circular-progress {
    color: #196dff !important;
}


.loading-indicator svg,
.circular-progress svg {
    animation:
        lost-film-reel 1.4s linear infinite !important;
}


@keyframes lost-film-reel {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


.loading-indicator {
    letter-spacing: 0.08em !important;
}


/* =========================================================
   05. LOGIN / LOGGED-OUT
   ========================================================= */

body.lighter,
body.app-body {
    background:
        url("https://cdn.masto.host/lostfilmlive/media_attachments/files/117/276/147/695/034/277/original/522b3fca62a5f6cc.png")
        center center / cover
        fixed no-repeat !important;
}


/* 로그인 카드 */

.simple_form,
.authentication-form,
.form-container {
    border-radius: 2px !important;
}


/* 입력창 */

.simple_form input[type="text"],
.simple_form input[type="email"],
.simple_form input[type="password"] {
    background:
        rgba(255, 255, 255, 0.84) !important;

    border:
        1px solid rgba(25, 109, 255, 0.20) !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}


.simple_form input:focus {
    border-color: #196dff !important;

    box-shadow: none !important;
}


/* 로그인 버튼 */

.simple_form .button,
.authentication-form .button {
    border-radius: 0 !important;

    box-shadow: none !important;

    letter-spacing: 0.055em !important;
}


/* =========================================================
   06. LOGIN LOGO — LOST FILM
   ========================================================= */

.logo-container {
    min-height: 90px !important;

    background-image:
        url("https://cdn.masto.host/lostfilmlive/media_attachments/files/117/276/166/201/829/594/original/9568e9bf2d4d528b.png")
        !important;

    background-size: contain !important;

    background-position: center center !important;

    background-repeat: no-repeat !important;
}


.logo-container svg {
    opacity: 0 !important;
}


/* =========================================================
   07. MODALS / DROPDOWNS
   팝업도 살짝 각지게
   ========================================================= */

.dropdown-menu,
.dropdown-menu__item,
.modal-root__modal,
.report-dialog-modal,
.confirmation-modal,
.boost-modal {
    border-radius: 2px !important;
}


/* =========================================================
   08. THREAD CLEANUP
   스레드 실험 흔적 제거
   ========================================================= */

.detailed-status__wrapper::before,
.detailed-status__wrapper::after,
.detailed-status__wrapper ~ .status__wrapper::before,
.detailed-status__wrapper ~ .status__wrapper::after,
.status__wrapper::before,
.status__wrapper::after,
.status__avatar::before,
.status__avatar::after {
    content: none !important;
    display: none !important;
}


.status__content::before {
    content: none !important;
}


/* =========================================================
   09. SPEECH BUBBLE TAIL
   기존 말풍선 꼬리는 유지
   ========================================================= */

.status::before {
    content: "" !important;

    display: block !important;

    position: absolute !important;

    top: 19px !important;
    left: -7px !important;

    width: 12px !important;
    height: 12px !important;

    background:
        rgba(255, 255, 255, 0.84) !important;

    border-left:
        1px solid rgba(25, 109, 255, 0.16) !important;

    border-bottom:
        1px solid rgba(25, 109, 255, 0.16) !important;

    transform: rotate(45deg) !important;

    z-index: 2 !important;
}


/* =========================================================
   10. MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .status .media-gallery::after {
        font-size: 7px !important;

        letter-spacing: 0.08em !important;
    }


    .notification {
        margin-left: 6px !important;
        margin-right: 6px !important;
    }

}