* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    min-height: 100vh;

    background: #f5f5f5;
    color: #222;
}

.login-container {
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 20px;
}

.login-box {
    width: 100%;
    max-width: 400px;

    background: white;

    padding: 40px;

    border-radius: 16px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

    text-align: center;
}

.login-box h1 {
    font-size: 38px;
    margin-bottom: 10px;
}

.login-box > p {
    color: #777;
    margin-bottom: 30px;
}

#loginForm {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#loginForm input {
    width: 100%;

    padding: 13px 15px;

    border: 1px solid #ddd;
    border-radius: 8px;

    font-size: 15px;

    outline: none;
}

#loginForm input:focus {
    border-color: #555;
}

#loginForm button {
    padding: 13px;

    border: none;
    border-radius: 8px;

    background: #222;
    color: white;

    font-size: 15px;

    cursor: pointer;
}

#loginForm button:hover {
    opacity: 0.8;
}

#loginMessage {
    min-height: 20px;
    font-size: 14px;
}

/* =========================
   HOME PAGE
========================= */

.site-header {
    position: relative;

    height: 70px;
    padding: 0 40px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    background: #111;
    color: white;
}

.logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 24px;
    font-weight: bold;

    text-decoration: none;
    color: inherit;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

#logoutButton {
    padding: 8px 14px;

    border: 1px solid #555;
    border-radius: 6px;

    background: transparent;
    color: white;

    cursor: pointer;
}

#logoutButton:hover {
    background: #333;
}


.home-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 50px 30px;
}


/* Hero */

.hero-section {
    position: relative;
    overflow: hidden;

    min-height: 380px;
    padding: 60px 50px;

    border-radius: 20px;

    background-image: url("crew.png");
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;

    color: white;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.small-title {
    font-size: 14px;
    letter-spacing: 3px;
    margin-bottom: 15px;
    opacity: 0.8;
}

.hero-section h1 {
    font-size: 60px;
    margin-bottom: 15px;
}

.hero-section p {
    font-size: 18px;
}


.continue-button {
    width: fit-content;

    margin-top: 30px;
    padding: 13px 22px;

    border: none;
    border-radius: 8px;

    background: white;
    color: #111;

    font-size: 15px;
    font-weight: bold;

    cursor: pointer;
}


/* Continue Watching */

.continue-section {
    margin-top: 50px;
}

.continue-section h2 {
    margin-bottom: 20px;
}

.home-episode-card {
    padding: 25px;

    border-radius: 12px;

    background: white;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.episode-number {
    color: #777;
    font-size: 14px;
    margin-bottom: 8px;
}

.home-episode-card h3 {
    font-size: 18px;
}

.home-episode-card button {
    padding: 10px 18px;

    border: none;
    border-radius: 7px;

    background: #222;
    color: white;

    cursor: pointer;
}


/* Menu */

.menu-section {
    margin-top: 40px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}

.menu-card {
    padding: 25px;

    border-radius: 12px;

    background: white;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);

    cursor: pointer;

    color: inherit;

    text-decoration: none;
}


.menu-card h3 {
    margin-bottom: 8px;
}

.menu-card p {
    color: #777;
    font-size: 14px;
}

/* =========================
   EPISODE PAGE
========================= */

.episode-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 45px 30px;
}

.episode-heading {
    margin-bottom: 30px;
}

.episode-heading h1 {
    font-size: 42px;
    margin-bottom: 8px;
}

.episode-heading > p:last-child {
    color: #777;
}


/* Episode Info */

.episode-info {
    margin-top: 30px;

    padding: 25px;

    background: white;

    border-radius: 10px;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.06);
    
    position: relative;
}

.episode-info h2 {
    margin-bottom: 8px;
}

.episode-info p {
    color: #777;
}


.logo img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.login-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
    margin: 0 auto 20px;
}


.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.hero-section > * {
    position: relative;
    z-index: 1;
}

.video-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.video-container media-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    display: block;
    overflow: hidden;
}

.video-container media-provider {
    width: 100%;
    height: 100%;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* 전체화면에서도 자막 유지 */
media-player[data-fullscreen] .smi-subtitle-layer {
    bottom: 70px;

    font-size: clamp(24px, 2.5vw, 42px);
}


/* ==========================================
   플레이어 Hover 어두워짐 제거
   ========================================== */

/*
   Vidstack Community Skin이 컨트롤을 표시할 때
   만드는 검은 그라데이션을 제거한다.
*/

media-player .vds-controls::before,
media-player .vds-controls::after {
    background: none !important;
    background-image: none !important;
}


/* ==========================================
   자막 ON/OFF 버튼
   ========================================== */

.player-extra-button {
    height: 34px;

    padding: 0 13px;

    border: 0;
    border-radius: 8px;

    background:
        rgba(18, 18, 18, 0.88);

    color: #999;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;

    white-space: nowrap;

    cursor: pointer;

    backdrop-filter:
        blur(8px);

    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}


.player-extra-button:hover {
    background:
        rgba(40, 40, 40, 0.95);

    color: white;

    transform:
        translateY(-1px);
}


.player-extra-button.active {
    color: white;
}


/* ==========================================
   자막 싱크 컨트롤
   ========================================== */

.subtitle-sync-controls {
    display: flex;
    align-items: center;

    gap: 3px;

    padding: 4px;

    border-radius: 8px;

    background:
        rgba(18, 18, 18, 0.88);

    backdrop-filter:
        blur(8px);

    transition:
        opacity 0.15s ease;
}


.sync-button,
.sync-reset-button {
    height: 26px;

    border: 0;
    border-radius: 6px;

    background: transparent;

    color: #bbb;

    font-family: inherit;
    font-size: 11px;
    font-weight: 500;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


.sync-button {
    min-width: 38px;

    padding: 0 6px;
}


.sync-reset-button {
    min-width: 88px;

    padding: 0 8px;
}


.sync-button:hover,
.sync-reset-button:hover {
    background:
        rgba(255, 255, 255, 0.12);

    color: white;
}


/* 자막 OFF 상태 */

.subtitle-sync-controls.disabled {
    opacity: 0.3;

    pointer-events: none;
}


/* ==========================================
   기존 SMI 자막
   ========================================== */

.smi-subtitle-layer {
    position: absolute;

    left: 5%;
    right: 5%;

    bottom: 70px;

    z-index: 20;

    text-align: center;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            24px,
            2.8vw,
            40px
        );

    font-weight: 600;

    line-height: 1.35;

    color: white;

    text-shadow:
        -2px -2px 2px #000,
         2px -2px 2px #000,
        -2px  2px 2px #000,
         2px  2px 2px #000,
         0     2px 4px #000;

    pointer-events: none;

    user-select: none;
}


/* 전체화면 */

media-player[data-fullscreen]
.smi-subtitle-layer {

    bottom: 90px;

    font-size:
        clamp(
            30px,
            3vw,
            48px
        );
}


/* ==========================================
   에피소드 네비게이션
   ========================================== */

.episode-navigation {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    width: 100%;
    max-width: 1200px;

    margin: 22px auto 0;

    gap: 14px;
}


.episode-nav-wrapper {
    position: relative;

    width: max-content;
}


.previous-wrapper {
    justify-self: start;
}


.next-wrapper {
    justify-self: end;
}


/* ==========================================
   이전 / 다음 버튼
   ========================================== */

.episode-nav-button,
.episode-list-button {
    height: 52px;

    border: none;
    border-radius: 12px;

    font-family: inherit;

    font-size: 15px;
    font-weight: 600;

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        opacity 0.18s ease;

    cursor: pointer;
}


.episode-nav-button {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 20px;

    background: #181818;

    color: #f5f5f5;

    white-space: nowrap;
}


.episode-nav-button:hover:not(:disabled) {
    background: #292929;

    transform:
        translateY(-2px);
}


.episode-nav-button:disabled {
    opacity: 0.25;

    cursor: default;
}


/* ==========================================
   에피소드 목록
   ========================================== */

.episode-list-button {
    display: flex;
    align-items: center;
    justify-content: center;

    justify-self: center;

    padding: 0 24px;

    background: #181818;

    color: white;

    text-decoration: none;
}


/* ==========================================
   이전 / 다음 화 미리보기
   ========================================== */

.episode-preview {
    position: absolute;

    bottom:
        calc(100% + 12px);

    width: 280px;

    padding: 14px 16px;

    background:
        rgba(20, 20, 20, 0.96);

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 12px;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.45);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(6px);

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;

    pointer-events: none;

    z-index: 100;
}


.previous-wrapper
.episode-preview {

    left: 0;
}


.next-wrapper
.episode-preview {

    right: 0;
}


.episode-nav-wrapper:hover
.episode-preview {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}


.preview-label {
    display: block;

    margin-bottom: 7px;

    color: #777;

    font-size: 11px;
    font-weight: 600;
}


.episode-preview strong {
    display: block;

    margin-bottom: 4px;

    color: white;

    font-size: 15px;
    font-weight: 700;
}


.episode-preview span:last-child {
    display: block;

    color: #aaa;

    font-size: 13px;

    line-height: 1.45;
}


/* ==========================================
   모바일
   ========================================== */

@media (max-width: 600px) {

    .player-extra-controls {
        top: 10px;
        right: 10px;

        gap: 5px;
    }


    .sync-button {
        min-width: 32px;
    }


    .sync-reset-button {
        min-width: 74px;
    }


    .episode-navigation {
        grid-template-columns:
            1fr 1fr;

        gap: 8px;
    }


    .episode-nav-wrapper {
        width: 100%;
    }


    .previous-wrapper,
    .next-wrapper {
        justify-self: stretch;
    }


    .episode-nav-button {
        width: 100%;

        padding: 0 12px;

        font-size: 12px;
    }


    .episode-list-button {
        grid-column: 1 / 3;
        grid-row: 2;

        width: 100%;

        padding: 0;

        font-size: 12px;
    }


    .episode-preview {
        display: none;
    }

    .avatar-picker-content {
        width: min(330px, calc(100vw - 20px));
    }
}

/* ==========================================
   자막 설정 UI 표시/숨김
   ========================================== */

.player-extra-controls {
    position: absolute;

    top: 16px !important;
    left: 16px !important;
    right: auto !important;

    display: flex;
    align-items: center;
    gap: 8px;

    z-index: 50;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}


/* 일반 화면
   마우스가 플레이어 안에 있으면 계속 표시 */

media-player:not([data-fullscreen]):hover
.player-extra-controls {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* 전체화면
   JS가 active를 붙였을 때만 표시 */

media-player[data-fullscreen]
.player-extra-controls.fullscreen-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ==========================================
   Episodes Page
   ========================================== */

.episodes-page {
    width: calc(100% - 48px);
    max-width: 1200px;

    margin: 0 auto;

    padding:
        54px
        0
        90px;
}


/* ==========================================
   Heading
   ========================================== */

.episodes-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 30px;
}


.episodes-heading h1 {
    margin: 0;

    color: #000000;

    font-size: 50px;
    font-weight: 700;

    letter-spacing: -0.5px;
}


.episodes-heading p {
    margin:
        9px
        0
        0;

    color: #777;

    font-size: 16px;
    padding-left: 5px;
}


/* ==========================================
   Episode / Season Title
   ========================================== */

.episode-heading-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


/* 시즌 제목 */

.episode-season-dropdown {
    position: relative;
}


.episode-season-title {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 0;

    border: 0;
    outline: none;

    background: transparent;
    color: #000;

    font-family: inherit;
    font-size: 50px;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: -0.5px;

    cursor: pointer;

    transition: color 0.15s ease;
}


.episode-season-title:hover {
    color: #444;
}


/* 화살표 */

.episode-season-arrow {
    width: 28px;
    height: 28px;

    flex-shrink: 0;

    color: #777;

    transition:
        transform 0.2s ease,
        color 0.15s ease;
}


.episode-season-title:hover
.episode-season-arrow {
    color: #333;
}


.episode-season-title.open
.episode-season-arrow {
    transform: rotate(180deg);
}


/* 에피소드 개수 + 범위 */

.episode-heading-meta {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: 10px;
}


.episode-heading-meta #episodeCount {
    margin: 0;
}


.episode-season-range {
    color: #777;

    font-size: 16px;
}


.episode-season-range:not(:empty)::before {
    content: "·";

    margin-right: 7px;
}


/* ==========================================
   Season Dropdown Menu
   ========================================== */

.episode-season-menu {
    position: absolute;

    top: calc(100% + 12px);
    left: 0;

    z-index: 200;

    width: 300px;
    max-height: 360px;

    overflow-y: auto;
    overscroll-behavior: contain;

    padding: 6px;

    border: 1px solid #2b2b2b;
    border-radius: 11px;

    background: #181818;

    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.3);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-6px);

    pointer-events: none;

    transition:
        opacity 0.15s ease,
        visibility 0.15s ease,
        transform 0.15s ease;
}


.episode-season-menu.open {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
}


/* 선택지 */

.episode-season-option {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 39px;

    padding: 0 11px;

    border: 0;
    border-radius: 7px;

    background: transparent;
    color: #aaa;

    font-family: inherit;
    font-size: 13px;
    font-weight: 500;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.12s ease,
        color 0.12s ease;
}


.episode-season-option:hover {
    background: #252525;
    color: #fff;
}


.episode-season-option.active {
    color: #fff;
}


.season-check {
    flex-shrink: 0;

    margin-left: 12px;

    color: #fff;

    font-size: 12px;

    opacity: 0;
}


.episode-season-option.active
.season-check {
    opacity: 1;
}


/* 스크롤바 */

.episode-season-menu::-webkit-scrollbar {
    width: 6px;
}


.episode-season-menu::-webkit-scrollbar-track {
    background: transparent;
}


.episode-season-menu::-webkit-scrollbar-thumb {
    background: #3b3b3b;
    border-radius: 999px;
}


.episode-season-menu::-webkit-scrollbar-thumb:hover {
    background: #555;
}


.episode-season-menu {
    scrollbar-width: thin;
    scrollbar-color: #3b3b3b transparent;
}


/* ==========================================
   Toolbar
   ========================================== */

.episodes-toolbar {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 20px;
}


/* ==========================================
   Search
   ========================================== */

.episode-search-wrapper {
    position: relative;

    flex: 1;
}


.episode-search-icon {
    position: absolute;

    top: 50%;
    left: 16px;

    width: 19px;
    height: 19px;

    color: #777;

    transform:
        translateY(-50%);

    pointer-events: none;
}


#episodeSearch {
    width: 100%;
    height: 46px;

    padding:
        0
        16px
        0
        46px;

    border:
        1px solid
        #282828;

    border-radius: 10px;

    outline: none;

    background:
        #171717;

    color: #fff;

    font-family: inherit;
    font-size: 14px;

    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}


#episodeSearch::placeholder {
    color: #666;
}


#episodeSearch:hover {
    background:
        #1a1a1a;
}


#episodeSearch:focus {
    border-color:
        #555;

    background:
        #1a1a1a;
}


/* ==========================================
   Custom Episode Sort
   ========================================== */

.episode-sort-dropdown {
    position: relative;

    flex: 0 0 auto;

    width: 140px;
}


/* ==========================================
   Sort Button
   ========================================== */

.episode-sort-button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    height: 46px;

    padding:
        0
        13px
        0
        15px;

    border:
        1px solid
        #282828;

    border-radius: 10px;

    outline: none;

    background:
        #171717;

    color: #ddd;

    font-family: inherit;
    font-size: 13px;
    font-weight: 500;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.episode-sort-button:hover {
    background:
        #1c1c1c;

    border-color:
        #353535;
}


.episode-sort-button.open {
    background:
        #1c1c1c;

    border-color:
        #444;
}


/* ==========================================
   Arrow
   ========================================== */

.episode-sort-arrow {
    width: 17px;
    height: 17px;

    margin-left: 12px;

    color: #777;

    transition:
        transform 0.2s ease,
        color 0.15s ease;
}


.episode-sort-button:hover
.episode-sort-arrow {
    color: #aaa;
}


.episode-sort-button.open
.episode-sort-arrow {
    color: #ccc;

    transform:
        rotate(180deg);
}


/* ==========================================
   Dropdown Menu
   ========================================== */

.episode-sort-menu {
    position: absolute;

    top: calc(100% + 7px);
    left: 0;

    z-index: 100;

    width: 100%;

    padding: 5px;

    border:
        1px solid
        #2b2b2b;

    border-radius: 10px;

    background:
        #181818;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.35);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-5px);

    pointer-events: none;

    transition:
        opacity 0.15s ease,
        visibility 0.15s ease,
        transform 0.15s ease;
}


.episode-sort-menu.open {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

    pointer-events: auto;
}


/* ==========================================
   Options
   ========================================== */

.episode-sort-option {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    height: 38px;

    padding:
        0
        10px;

    border: 0;

    border-radius: 7px;

    background:
        transparent;

    color: #aaa;

    font-family: inherit;
    font-size: 13px;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.12s ease,
        color 0.12s ease;
}


.episode-sort-option:hover {
    background:
        #242424;

    color: #fff;
}


/* ==========================================
   Selected
   ========================================== */

.episode-sort-option.active {
    color: #fff;
}


.sort-check {
    color: #fff;

    font-size: 12px;

    opacity: 0;
}


.episode-sort-option.active
.sort-check {
    opacity: 1;
}


/* ==========================================
   Mobile
   ========================================== */

@media (max-width: 700px) {

    .episode-sort-dropdown {
        width: 100%;
    }

}


/* ==========================================
   Episode List
   ========================================== */

.episode-list {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


/* ==========================================
   Episode Card
   ========================================== */

.episode-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 74px;

    padding:
        0
        22px;

    border-radius: 10px;

    background: #ffffff;
    
    box-shadow: 
        0 5px 20px rgba(0, 0, 0, 0.08);

    color: inherit;

    text-decoration: none;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}


.episode-card:hover {
    border-color:
        #343434;

    background:
        #1b1b1b;

    transform:
        translateX(3px);
}


/* ==========================================
   Episode Information
   ========================================== */

.episode-card-information {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 24px;
}


.episode-card-number {
    min-width: 78px;

    color: #000000;

    font-size: 14px;
    font-weight: 650;

    white-space: nowrap;
}


.episode-card-title {
    overflow: hidden;

    color: #000000;

    font-size: 14px;
    font-weight: 650;

    white-space: nowrap;

    transition:
        color 0.15s ease;
}


.episode-card:hover
.episode-card-title {
    color: #ddd;
}

.episode-card:hover
.episode-card-number {
    color: #ddd;
}


/* ==========================================
   Arrow
   ========================================== */

.episode-card-arrow {
    margin-left: 20px;

    color: #555;

    font-size: 27px;
    font-weight: 300;

    transition:
        color 0.15s ease,
        transform 0.15s ease;
}


.episode-card:hover
.episode-card-arrow {
    color: #fff;

    transform:
        translateX(3px);
}


/* ==========================================
   Loading
   ========================================== */

.episodes-loading {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 180px;

    color: #777;

    font-size: 13px;
}


.episodes-loading-spinner {
    width: 18px;
    height: 18px;

    border:
        2px solid
        #333;

    border-top-color:
        #aaa;

    border-radius: 50%;

    animation:
        episodesSpinner
        0.7s
        linear
        infinite;
}


@keyframes episodesSpinner {

    to {
        transform:
            rotate(360deg);
    }
}


/* ==========================================
   Empty / Error
   ========================================== */

.episode-empty,
.episodes-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 180px;

    color: #777;

    text-align: center;
}


.episode-empty[hidden] {
    display: none;
}


.episode-empty strong,
.episodes-error strong {
    color: #bbb;

    font-size: 15px;
    font-weight: 600;
}


.episode-empty span,
.episodes-error span {
    font-size: 13px;
}


/* ==========================================
   Mobile
   ========================================== */

@media (max-width: 700px) {

    .episodes-page {
        width:
            calc(100% - 28px);

        padding-top:
            34px;
    }


    .episode-season-title {
        gap: 7px;

        font-size: 32px;
        line-height: 1.15;
    }


    .episode-season-arrow {
        width: 20px;
        height: 20px;
    }


    .episode-heading-meta {
        flex-wrap: wrap;
        gap: 5px;

        margin-top: 7px;
    }


    .episode-heading-meta #episodeCount,
    .episode-season-range {
        font-size: 12px;
    }


    .episode-season-range:not(:empty)::before {
        margin-right: 5px;
    }


    .episode-season-menu {
        width: min(300px, calc(100vw - 28px));
        max-height: 320px;
    }


    .episodes-toolbar {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .episode-card {
        min-height:
            72px;

        padding:
            0
            16px;
    }


    .episode-card-information {
        display:
            block;

        padding:
            13px
            0;
    }


    .episode-card-number {
        display:
            block;

        margin-bottom:
            5px;

        font-size:
            13px;
    }


    .episode-card-title {
        display:
            block;

        max-width:
            calc(100vw - 90px);

        font-size:
            13px;
    }


    .episode-card-arrow {
        margin-left:
            10px;
    }
}


/* ==========================================
   에피소드 시청 진행 상태
========================================== */

.episode-card-progress {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-top: 6px;

    padding: 4px 8px;

    border-radius: 6px;

    font-size: 12px;
    font-weight: 600;

    color: #575757;

    background:
        rgba(0, 0, 0, 0.090);
}

.episode-card:hover .episode-card-progress {
    color:  #969494;
    background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 700px) {

    .site-header {
        position: relative;
        padding: 0 16px;
    }

    .site-header .logo {
        position: absolute;
        left: 50%;

        transform: translateX(-50%);
    }
}

.episode-progress-bar {
    width: 120px;
    height: 4px;

    margin-top: 8px;

    background: #e5e5e5;
    border-radius: 999px;

    overflow: hidden;
}

.episode-progress-fill {
    height: 100%;

    background: #222;
    border-radius: 999px;

    transition: width 0.3s ease;
}

.episode-card:hover .episode-progress-fill {
    background: rgb(60, 60, 60);
}

.episode-card:hover .episode-progress-bar {
    background: rgb(100, 100, 100);
}

.episode-card-progress {
    color: #555555;
}

.episode-card-progress.completed {
    color: #16a34a;
}

.home-episode-details {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;

    cursor: pointer;
    user-select: none;
}

.profile-avatar {
    position: relative;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: #2b2b2b;

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;
    font-size: 15px;
    font-weight: 600;
}

.profile-status {
    position: absolute;

    right: -1px;
    bottom: -1px;

    width: 11px;
    height: 11px;

    border: 3px solid #111;
    border-radius: 50%;
}

.profile-status.online {
    background: #23a55a;
}

.profile-status.away {
    background: #f03232;
}

.profile-status.offline {
    background: #80848e;
}

.profile-info {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

#userInfo {
    color: white;

    font-size: 14px;
    font-weight: 600;
}

#userStatusText {
    color: #a8a8a8;

    font-size: 11px;
    
    cursor: pointer;
    user-select: none;
    
    /*상태 선택 기능 다시 활성화할 때 아래 줄 삭제 */
    pointer-events: none;
}

.status-menu {
    position: fixed;
    display: none;

    min-width: 130px;
    padding: 6px;

    background: #1e1f22;
    border-radius: 8px;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);

    z-index: 9999;
}

.status-menu.show {
    display: flex;
    flex-direction: column;
}

.status-menu button {
    padding: 8px 10px;

    border: none;
    border-radius: 5px;

    background: transparent;
    color: #dbdee1;

    text-align: left;
    font-size: 12px;

    cursor: pointer;
}

.status-menu button:hover {
    background: #35373c;
    color: white;
}

.status-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.online {
    background: #23a55a;
}

.status-dot.away {
    background: #f03232;
}

.status-dot.offline {
    background: #80848e;
}

.profile-status.watching {
    background: #f0b232;
}

.profile-menu {
    position: fixed;
    display: none;

    min-width: 180px;
    padding: 8px;

    background: #1e1f22;
    border-radius: 10px;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);

    z-index: 9999;
}

.profile-menu.show {
    display: flex;
    flex-direction: column;
}

.profile-menu-title {
    padding: 8px 10px;

    color: #a8a8a8;
    font-size: 11px;
    font-weight: 600;
}

.profile-menu button {
    padding: 9px 10px;

    border: none;
    border-radius: 6px;

    background: transparent;
    color: #dbdee1;

    text-align: left;
    font-size: 13px;

    cursor: pointer;
}

.profile-menu button:hover {
    background: #35373c;
    color: white;
}

.avatar-picker {
    position: fixed;
    display: none;

    z-index: 9999;
}

.avatar-picker.show {
    display: block;
}

.avatar-picker-content {
    width: 330px;
    padding: 20px;

    background: #1e1f22;
    border-radius: 12px;

    color: white;
}
.avatar-picker-title {
    margin-bottom: 16px;
    font-size: 11px;
    font-weight: 600;
    color: #a8a8a8;
}

.avatar-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.avatar-option {
    width: 64px;
    height: 64px;

    padding: 0;
    border: none;
    border-radius: 50%;

    background: #2b2d31;
    color: white;

    cursor: pointer;
}

.avatar-option:hover {
    background: #35373c;
}

.avatar-option img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    border-radius: 50%;
}

.avatar-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.avatar-picker-title {
    margin-bottom: 0;
}

.avatar-delete-button {
    padding: 4px 7px;

    border: none;
    border-radius: 5px;

    background: transparent;
    color: #a8a8a8;

    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.avatar-delete-button:hover {
    background: #35373c;
    color: #f23f42;
}

.avatar-picker.delete-mode
.avatar-delete-button {
    color: #f23f42;
}

.uploaded-avatar {
    position: relative;
}

.avatar-picker.delete-mode .uploaded-avatar {
    position: relative;
}

.avatar-picker.delete-mode .uploaded-avatar:hover {
    outline: 2px solid #f23f42;
    outline-offset: 2px;

    transform: scale(1.05);
}

.avatar-picker.delete-mode
.avatar-option:not(.uploaded-avatar) {
    opacity: 0.35;
    cursor: default;
}

.avatar-picker.delete-mode
.avatar-option:not(.uploaded-avatar):hover {
    background: #2b2d31;
    transform: none;
}

.name-change-menu {
    position: fixed;
    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;
    box-sizing: border-box;

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

    z-index: 10000;
}

.name-change-menu.show {
    display: flex;
}

.name-change-content {
    width: 260px;
    padding: 18px;

    box-sizing: border-box;

    background: #111;
    border-radius: 12px;
    color: white;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.name-change-title {
    margin-bottom: 12px;

    font-size: 14px;
    font-weight: 600;
}

.name-change-input {
    width: 100%;
    padding: 9px 10px;

    box-sizing: border-box;

    border: 1px solid #3f4147;
    border-radius: 6px;
    outline: none;

    background: #2b2d31;
    color: white;

    font-size: 13px;
}

.name-change-input:focus {
    border-color: #8e9297;
}

.name-change-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;

    margin-top: 14px;
}

.name-change-actions button {
    padding: 7px 12px;

    border: none;
    border-radius: 6px;

    font-size: 12px;
    cursor: pointer;
}

.name-cancel-button {
    background: #111;
    color: #b5bac1;
    font-weight: 600;
}

.name-cancel-button:hover {
    background: #ffffff;
    color:#111;
}

.name-save-button {
    background: #111;
    color: #b5bac1;
    font-weight: 600;
}

.name-save-button:hover {
    background: #ffffff;
    color:#111;
}

.favorite-button {
    padding: 7px 12px;

    border: 1px solid #d1d1d1;
    border-radius: 7px;

    background: white;
    color: #111;

    font-size: 13px;
    font-weight: 600;

    position: absolute;
    top: 40px;
    right: 20px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.favorite-button {
    padding: 7px 12px;

    border: 1px solid #d1d1d1;
    border-radius: 7px;

    background: white;
    color: #111;

    font-size: 13px;
    font-weight: 600;

    position: absolute;
    top: 40px;
    right: 20px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

/* 즐겨찾기 안 된 상태에서만 hover */
.favorite-button:not(.active):hover {
    background: #f5f5f5;
    color: #111;
    border-color: #aaa;
}

/* 즐겨찾기 상태 */
.favorite-button.active {
    background: #111;
    color: white;
    border-color: #111;
}

.favorite-star {
    color: #111;
}

/* 즐겨찾기 상태의 별 */
.favorite-button.active .favorite-star {
    color: #f0b232;
}

.episode-card-favorite {
    margin-left: auto;
    margin-right: 12px;

    color: #f0b232;
    font-size: 18px;
}

.home-episode-card
.episode-card-progress.completed {
    color: #16a34a;
}

/* ==========================================
   Progress Page
   ========================================== */

.progress-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 40px;
}

.progress-heading {
    margin-bottom: 30px;
}

.progress-heading h1 {
    margin: 0 0 8px;
    font-size: 28px;
    color: #111;
}

.progress-heading p {
    margin: 0;
    color: #777;
    font-size: 14px;
}


/* ==========================================
   Progress Cards
   ========================================== */

.progress-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.progress-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding: 22px 24px;

    background: white;
    border-radius: 12px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.08);
}


/* ==========================================
   User
   ========================================== */

.progress-user {
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 180px;
}

.progress-avatar {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #2b2b2b;
    background-size: cover;
    background-position: center;

    color: white;
    font-size: 17px;
    font-weight: 600;
}

.progress-user-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.progress-user-info strong {
    color: #111;
    font-size: 15px;
}

.progress-user-info span {
    color: #888;
    font-size: 12px;
}


/* ==========================================
   Episode Progress
   ========================================== */

.progress-episode {
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.progress-episode > strong {
    color: #111;
    font-size: 15px;
}

.progress-episode > span {
    color: #666;
    font-size: 13px;
}

.progress-percentage {
    margin-top: 5px;

    color: #555;
    font-size: 12px;
    font-weight: 600;
}

.progress-page-bar {
    width: 100%;
    height: 5px;

    margin-top: 3px;

    background: #e5e5e5;
    border-radius: 999px;

    overflow: hidden;
}

.progress-page-fill {
    height: 100%;

    background: #111;
    border-radius: 999px;
}

.progress-card {
    flex-wrap: wrap;
    cursor: pointer;
}

.progress-stats {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;

    max-height: 0;
    opacity: 0;
    overflow: hidden;

    transition:
        max-height 0.3s ease,
        opacity 0.2s ease,
        margin-top 0.3s ease;

    margin-top: 0;
}

.progress-card.expanded .progress-stats {
    max-height: 150px;
    opacity: 1;
    margin-top: 12px;
}

.progress-stat {
    padding: 14px;

    display: flex;
    flex-direction: column;
    gap: 5px;

    background: #f5f5f5;
    border-radius: 8px;
}

.progress-stat span {
    color: #888;
    font-size: 11px;
}

.progress-stat strong {
    color: #111;
    font-size: 14px;
    font-weight: 600;
}

.progress-expand-arrow {
    width: 8px;
    height: 8px;

    margin-left: auto;
    margin-right: 4px;

    border-right: 2px solid #888;
    border-bottom: 2px solid #888;

    transform: rotate(45deg);

    transition:
        transform 0.25s ease,
        border-color 0.2s ease;
}

.progress-card:hover .progress-expand-arrow {
    border-color: #111;
}

.progress-card.expanded .progress-expand-arrow {
    transform: rotate(225deg);
}

.new-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 7px;

    background: #e53935;
    color: #fff;

    font-size: 10px;
    font-weight: 700;

    border-radius: 5px;
    vertical-align: middle;
}

.spoiler-title {
    position: relative;
    filter: blur(6px);
    cursor: pointer;
    user-select: none;
    transition: filter 0.2s ease;
}

.spoiler-title:hover {
    filter: blur(8px);
}

.spoiler-title.revealed {
    filter: blur(0);
    cursor: default;
}

.spoiler-title-wrapper {
    position: relative;
    display: inline-block;
}

.spoiler-hint {
    display: block;
    margin-top: 5px;

    font-size: 12px;
    opacity: 0.55;

    pointer-events: none;
}

.spoiler-title.revealed + .spoiler-hint {
    display: none;
}

.spoiler-container {
    position: relative;
    display: inline-block;
}

.spoiler-tooltip {
    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%) rotate(-5deg);

    padding: 4px 10px;

    color: #d62828;
    border: 3px solid #d62828;
    border-radius: 3px;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;

    text-transform: uppercase;
    white-space: nowrap;

    opacity: 0.9;
    pointer-events: none;

    box-shadow:
        inset 0 0 0 1px rgba(214, 40, 40, 0.4);

    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
}

.spoiler-tooltip small {
    display: block;

    margin-top: 1px;

    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.5px;

    text-align: center;
}

.spoiler-container:has(.spoiler-title.revealed) .spoiler-tooltip {
    display: none;
}

/* =========================================
   Header Watch Streak
   ========================================= */

.streak-section {
    position: absolute;
    left: 28px;
    top: 50%;

    transform: translateY(-50%);

    display: flex;
    align-items: flex-end;
    gap: 26px;

    margin: 0;
    padding: 0;

    color: white;
    white-space: nowrap;
}


/* =========================================
   현재 연속 기록
   ========================================= */

.streak-current {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.streak-eyebrow {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;

    opacity: 0.45;
}

.streak-main {
    position: relative;

    display: flex;
    align-items: baseline;
    gap: 6px;
}


/* 불꽃 */

.streak-fire {
    width: 26px;
    height: 26px;

    object-fit: contain;

    display: block;
    transform: translate(-3px, 3px);
}

/* 현재 연속 일수 */

#currentStreak {
    position: relative;

    font-size: 29px;
    line-height: 1;
    font-weight: 800;

    letter-spacing: -0.8px;

    text-shadow:
        0 0 15px
        rgba(255, 120, 50, 0.2);
}

.streak-days {
    position: relative;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;

    opacity: 0.5;
}


/* =========================================
   최장 기록
   ========================================= */

.streak-record {
    display: flex;
    flex-direction: column;
    gap: 4px;

    padding-left: 20px;

    border-left:
        1px solid
        rgba(255, 255, 255, 0.12);
}

.streak-record span {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.2px;

    opacity: 0.4;
}

#longestStreak {
    font-size: 12px;
    font-weight: 650;

    opacity: 0.8;
}


/* =========================================
   Streak Mobile
   ========================================= */

@media (max-width: 700px) {

    .streak-section {
        left: 16px;
        gap: 10px;
    }

    .streak-eyebrow {
        display: block;
        font-size: 8px;
        letter-spacing: 1.3px;
    }

    .streak-fire {
        font-size: 21px;
    }

    #currentStreak {
        font-size: 26px;
    }

    .streak-days {
        font-size: 9px;
    }

    .streak-record {
        display: none;
    }
}

/* =========================================
   Episode Comments
   ========================================= */

.comments-section {
    width: 100%;
    max-width: 1100px;

    margin: 50px auto 90px;
    padding: 0 24px;

    box-sizing: border-box;
}


/* =========================================
   Header
   ========================================= */

.comments-header {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 32px;
}

.comments-header h2 {
    margin: 0;

    color: #111;

    font-size: 20px;
    font-weight: 700;

    letter-spacing: -0.4px;
}

#commentCount {
    color: #999;

    font-size: 13px;
    font-weight: 500;
}


/* =========================================
   Comment Input
   ========================================= */

.comment-form {
    margin-bottom: 44px;
}

#commentInput {
    display: block;

    width: 100%;
    min-height: 58px;

    padding: 5px 0 13px;

    resize: none;

    box-sizing: border-box;

    background: transparent;
    color: #181818;

    border: none;
    border-bottom: 1px solid #d8d8d8;

    outline: none;

    font-family: inherit;
    font-size: 15px;
    line-height: 1.65;

    transition: border-color 0.2s ease;
}

#commentInput::placeholder {
    color: #aaa;
}

#commentInput:focus {
    border-bottom-color: #222;
}


/* =========================================
   Input Footer
   ========================================= */

.comment-form-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    gap: 15px;

    margin-top: 10px;
}

#commentLength {
    color: #bbb;

    font-size: 11px;
}


/* 등록 버튼 */

#commentSubmit {
    padding: 6px 0;

    background: none;
    border: none;

    color: #777;

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition: color 0.15s ease;
}

#commentSubmit:hover {
    color: #111;
}

#commentSubmit:active {
    opacity: 0.55;
}


/* =========================================
   Comments List
   ========================================= */

.comments-list {
    width: 100%;
}


/* 댓글 하나 */

.comment-item {
    display: flex;
    align-items: flex-start;

    gap: 16px;

    padding: 25px 0;

    border-bottom: 1px solid #eeeeee;
}


/* =========================================
   Avatar
   ========================================= */

.comment-avatar {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    overflow: hidden;

    border-radius: 50%;

    background: #222;
    color: #fff;

    font-size: 12px;
    font-weight: 700;
}

.comment-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================
   Comment Content
   ========================================= */

.comment-content {
    flex: 1;
    min-width: 0;
}


/* 이름 + 시간 */

.comment-meta {
    display: flex;
    align-items: center;

    gap: 7px;
}

.comment-user {
    color: #181818;

    font-size: 13px;
    font-weight: 700;
}

.comment-date {
    color: #aaa;

    font-size: 11px;
}


/* 댓글 내용 */

.comment-text {
    margin-top: 7px;

    color: #333;

    font-size: 14px;
    line-height: 1.7;

    white-space: pre-wrap;
    word-break: break-word;
}


/* =========================================
   Comment Actions
   ========================================= */

.comment-actions {
    display: flex;
    align-items: center;

    gap: 4px;

    margin-top: 9px;

    min-height: 27px;
}

.comment-action {
    flex-shrink: 0;
}

.comment-action {
    padding: 0;

    background: none;
    border: none;

    color: #aaa;

    font-family: inherit;
    font-size: 11px;
    font-weight: 500;

    cursor: pointer;

    transition: color 0.15s ease;
}

.comment-action:hover {
    color: #333;
}

.comment-delete:hover {
    color: #d43c3c;
}


/* =========================================
   Empty Comments
   ========================================= */

.comments-empty {
    padding: 40px 0;

    color: #aaa;

    font-size: 13px;
    text-align: center;
}


/* =========================================
   Mobile
   ========================================= */

@media (max-width: 700px) {

    .comments-section {
        margin-top: 38px;
        margin-bottom: 65px;

        padding: 0 16px;
    }

    .comments-header {
        margin-bottom: 25px;
    }

    .comments-header h2 {
        font-size: 18px;
    }

    #commentCount {
        font-size: 12px;
    }

    .comment-form {
        margin-bottom: 34px;
    }

    #commentInput {
        min-height: 54px;

        font-size: 14px;
    }

    #commentSubmit {
        font-size: 11px;
    }

    .comment-item {
        gap: 12px;

        padding: 21px 0;
    }

    .comment-avatar {
        width: 36px;
        height: 36px;
    }

    .comment-user {
        font-size: 12px;
    }

    .comment-date {
        font-size: 10px;
    }

    .comment-text {
        font-size: 13px;
    }

    .comment-action {
        font-size: 10px;
    }
}

/* =========================================
   Delete Confirm
   ========================================= */

.delete-confirm {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-left: 12px;
    padding: 6px 10px;

    background: #6f6f6f;
    border: 1px solid #7c7c7c;
    border-radius: 6px;

    color: #eeeeee;

    font-family: inherit;
    font-size: 10px;
    font-weight: 500;

    white-space: nowrap;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.08);

    animation:
        deleteConfirmIn 0.18s ease-out;
}

@keyframes deleteConfirmIn {

    from {
        opacity: 0;
        transform: translateX(-6px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* =========================================
   Confirm Buttons
   ========================================= */

.delete-confirm button {
    padding: 0;

    background: transparent;
    border: none;

    font-family: inherit;
    font-size: 10px;
    font-weight: 600;

    cursor: pointer;

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


/* 삭제 */

.delete-confirm-yes {
    color: #ff7373;
}

.delete-confirm-yes:hover {
    color: #ff9696;
}


/* 취소 */

.delete-confirm-cancel {
    color: #dedede;
}

.delete-confirm-cancel:hover {
    color: #ffffff;
}


/* 비활성화 */

.delete-confirm button:disabled {
    opacity: 0.45;
    cursor: default;
}


/* =========================================
   Chat Widget
   ========================================= */

.chat-widget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 5000;
}

.chat-launcher {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: #181818;
    color: white;

    font-size: 22px;

    cursor: pointer;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.18);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.chat-launcher:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.24);
}


/* 친구 목록 창 */

.chat-panel {
    position: absolute;

    right: 0;
    bottom: 72px;

    width: 340px;
    height: 460px;

    overflow: hidden;

    background: #fff;

    border: 1px solid #e8e8e8;
    border-radius: 14px;

    box-shadow:
        0 14px 45px rgba(0, 0, 0, 0.16);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(12px)
        scale(0.97);

    transform-origin:
        bottom right;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s;
}

.chat-panel.show {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


/* 상단 */

.chat-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20px 20px 17px;

    border-bottom: 1px solid #eeeeee;
}

.chat-eyebrow {
    display: block;

    margin-bottom: 3px;

    color: #aaa;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}

.chat-panel-header h2 {
    margin: 0;

    color: #181818;

    font-size: 18px;
    font-weight: 700;
}

.chat-close {
    padding: 4px;

    background: none;
    border: none;

    color: #999;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;
}

.chat-close:hover {
    color: #222;
}


/* 친구 영역 */

.chat-friends {
    height: calc(100% - 78px);
    overflow-y: auto;
}

.chat-empty {
    padding: 40px 20px;

    color: #aaa;

    font-size: 12px;
    text-align: center;
}


/* 모바일 */

@media (max-width: 700px) {

    .chat-widget {
        right: 16px;
        bottom: 16px;
    }

    .chat-panel {
        width:
            min(
                340px,
                calc(100vw - 32px)
            );

        height: 440px;
    }

    .chat-launcher {
        width: 54px;
        height: 54px;
    }
}

.chat-friend {
    display: flex;
    align-items: center;
    gap: 13px;

    width: 100%;

    padding: 15px 18px;

    background: transparent;
    border: none;

    text-align: left;

    cursor: pointer;

    transition: background 0.15s ease;
}

.chat-friend:hover {
    background: #f7f7f7;
}

.chat-friend-avatar {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    overflow: hidden;

    border-radius: 50%;

    background: #222;
    color: #fff;

    font-size: 13px;
    font-weight: 700;
}

.chat-friend-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.chat-friend-info {
    min-width: 0;
}

.chat-friend-name {
    margin-bottom: 5px;

    color: #181818;

    font-size: 13px;
    font-weight: 700;
}

.chat-friend-status {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #999;

    font-size: 11px;
}

.chat-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #aaa;
}

.chat-status-dot.online {
    background: #23a55a;
}

.chat-status-dot.watching {
    background: #f0b232;
}

.chat-status-dot.away {
    background: #f03232;
}

.chat-status-dot.offline {
    background: #80848e;
}

/* =========================================
   Chat Conversation
   ========================================= */

.chat-conversation-header {
    display: flex;
    align-items: center;

    height: 78px;
    padding: 0 16px;

    box-sizing: border-box;

    border-bottom: 1px solid #eeeeee;
}

.chat-back {
    margin-right: 12px;
    padding: 0 4px;

    background: none;
    border: none;

    color: #777;

    font-size: 30px;
    line-height: 1;

    cursor: pointer;
}

.chat-back:hover {
    color: #111;
}

.chat-conversation-user {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
}

.chat-conversation-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    overflow: hidden;
    flex-shrink: 0;

    border-radius: 50%;

    background: #222;
    color: #fff;

    font-size: 12px;
    font-weight: 700;
}

.chat-conversation-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.chat-conversation-name {
    color: #181818;

    font-size: 13px;
    font-weight: 700;
}

.chat-conversation-status {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-top: 3px;

    color: #999;

    font-size: 10px;
}


/* 메시지 영역 */

.chat-messages {
    height: calc(100% - 139px);

    padding: 16px;

    box-sizing: border-box;

    overflow-y: auto;
}


/* 입력창 */

.chat-message-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;

    min-height: 61px;

    padding: 10px 14px;

    box-sizing: border-box;

    border-top: 1px solid #eeeeee;

    background: #fff;
}

#chatMessageInput {
    flex: 1;

    max-height: 90px;

    padding: 8px 11px;

    resize: none;

    border: 1px solid #e1e1e1;
    border-radius: 8px;
    outline: none;

    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
}

#chatMessageInput:focus {
    border-color: #aaa;
}

#chatMessageSend {
    padding: 8px 5px;

    background: none;
    border: none;

    color: #777;

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

#chatMessageSend:hover {
    color: #111;
}

/* =========================================
   Chat Messages
   ========================================= */

.chat-message {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 9px;
}

.chat-message.mine {
    align-items: flex-end;
}

.chat-message.theirs {
    align-items: flex-start;
}

.chat-message-bubble {
    max-width: 72%;

    padding: 8px 11px;

    border-radius: 12px;

    font-size: 12px;
    line-height: 1.5;

    white-space: pre-wrap;
    word-break: break-word;
}

.chat-message.mine
.chat-message-bubble {
    background: #222;
    color: #fff;

    border-bottom-right-radius: 4px;
}

.chat-message.theirs
.chat-message-bubble {
    background: #f1f1f1;
    color: #222;

    border-bottom-left-radius: 4px;
}

/* =========================================
   Chat Unread
   ========================================= */

.chat-launcher {
    position: relative;
}

.chat-unread-badge {
    position: absolute;

    top: -4px;
    right: -4px;

    display: none;
    align-items: center;
    justify-content: center;

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    box-sizing: border-box;

    border: 2px solid #fff;
    border-radius: 999px;

    background: #e53935;
    color: #fff;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

.chat-unread-badge.show {
    display: flex;
}


/* =========================================
   Friend Unread
   ========================================= */

.chat-friend-info {
    flex: 1;
    min-width: 0;
}

.chat-friend-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    margin-left: auto;

    flex-shrink: 0;
}

.chat-friend-unread {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    box-sizing: border-box;

    border-radius: 999px;

    background: #e53935;
    color: #fff;

    font-size: 9px;
    font-weight: 800;
}


/* =========================================
   Read Receipt
   ========================================= */

.chat-read-receipt {
    margin-top: 3px;

    color: #aaa;

    font-size: 9px;
    font-weight: 500;

    text-align: right;
}

.chat-panel-header,
.chat-conversation-header {
    position: relative;
}

.chat-panel-header .chat-close,
.chat-conversation-header .chat-close {
    position: absolute;
    top: 16px;
    right: 16px;
}

.chat-launcher-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
}


/* ==========================================
   Mobile Header
   ========================================== */

@media (max-width: 700px) {

    .site-header {
        height: 60px;
        padding: 0 12px;
    }

    /* 로고는 화면 정중앙 유지 */
    .site-header .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
    }

    .site-header .logo img {
        width: 54px;
        height: 54px;
    }

    /* 오른쪽 프로필 */
    .header-right {
        margin-left: auto;
        gap: 0;
        z-index: 2;
    }

    /* 모바일에서는 로그아웃 숨김 */
    #logoutButton {
        display: none;
    }

    .profile-avatar {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 700px) {

    .hero-section {
        min-height: 230px;
        padding: 28px 22px;
        border-radius: 14px;

        background-position: center 30%;
    }

    .hero-section h1 {
        font-size: 38px;
        margin-bottom: 10px;
    }

    .hero-section p {
        font-size: 14px;
        line-height: 1.5;
    }

    .hero-section .small-title {
        font-size: 11px;
        letter-spacing: 1.5px;
        margin-bottom: 8px;
    }

    .continue-button {
        margin-top: 18px;
        padding: 10px 16px;
        font-size: 13px;
    }
}

@media (max-width: 700px) {

    /* =========================
       최근 업데이트
       ========================= */

    .continue-section {
        margin-top: 28px;
    }

    .continue-section h2 {
        margin-bottom: 12px;
        font-size: 18px;
    }

    .home-episode-card {
        padding: 16px;
        border-radius: 10px;
        gap: 12px;
    }

    .episode-number {
        font-size: 12px;
        margin-bottom: 5px;
    }

    .home-episode-card h3 {
        font-size: 14px;
    }

    .home-episode-card button {
        flex-shrink: 0;

        padding: 8px 11px;
        border-radius: 6px;

        font-size: 12px;
    }


    /* =========================
       회차 목록 / 좋아하는 회차 /
       현재 진행도
       ========================= */

    .menu-section {
        margin-top: 24px;

        grid-template-columns: 1fr;
        gap: 10px;
    }

    .menu-card {
        padding: 16px;
        border-radius: 10px;
    }

    .menu-card h3 {
        margin-bottom: 4px;
        font-size: 15px;
    }

    .menu-card p {
        font-size: 12px;
        line-height: 1.4;
    }


    /* NEW 뱃지도 조금 축소 */

    .new-badge {
        margin-left: 5px;
        padding: 2px 5px;

        font-size: 8px;
        border-radius: 4px;
    }
}

@media (max-width: 700px) {

    /* 연속 시청 기록 */
    .streak-section {
        gap: 7px;
    }

    .streak-eyebrow {
        font-size: 6px;
        letter-spacing: 1px;
    }

    .streak-fire {
        width: 19px;
        height: 19px;
    }

    #currentStreak {
        font-size: 21px;
    }

    .streak-days {
        font-size: 7px;
    }

    .streak-record {
        padding-left: 10px;
    }

    .streak-record span {
        font-size: 6px;
    }

    #longestStreak {
        font-size: 9px;
    }


    /* 프로필 이름 / 상태 */
    #userInfo {
        font-size: 11px;
    }

    #userStatusText {
        font-size: 9px;
    }

    .user-profile {
        gap: 7px;
    }

    .profile-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .profile-status {
        width: 9px;
        height: 9px;
        border-width: 2px;
    }
}

@media (max-width: 700px) {

    /* =========================
       Episode Watch Page
       ========================= */

    .episode-page {
        width: 100%;
        padding: 24px 14px 45px;
    }

    /* 상단 회차 제목 */
    .episode-heading {
        margin-bottom: 18px;
    }

    .episode-heading h1 {
        font-size: 26px;
        line-height: 1.2;
        margin-bottom: 5px;
    }

    .episode-heading > p:last-child {
        font-size: 12px;
    }


    /* =========================
       Video
       ========================= */

    .video-container {
        width: 100%;
    }

    .video-container media-player {
        width: 100%;
        border-radius: 8px;
    }


    /* =========================
       Episode Info
       ========================= */

    .episode-info {
        margin-top: 18px;
        padding: 16px;

        border-radius: 9px;
    }

    .episode-info h2 {
        font-size: 17px;
        margin-bottom: 5px;
    }

    .episode-info p {
        font-size: 12px;
        line-height: 1.5;
    }


@media (max-width: 700px) {

    .favorite-button {
        top: 24px;      /* 기존 16px → 아래로 8px */
        right: 14px;

        padding: 6px 9px;

        font-size: 11px;
        border-radius: 6px;
    }
}


    /* =========================
       이전 / 다음 / 목록
       ========================= */

    .episode-navigation {
        margin-top: 14px;
        gap: 7px;
    }

    .episode-nav-button,
    .episode-list-button {
        height: 42px;

        border-radius: 8px;
        font-size: 11px;
    }

    .episode-nav-button {
        padding: 0 8px;
    }

    .episode-list-button {
        height: 38px;
    }


    /* =========================
       플레이어 추가 컨트롤
       ========================= */

    .player-extra-controls {
        top: 8px !important;
        left: 8px !important;

        gap: 4px;
    }

    .player-extra-button {
        height: 28px;

        padding: 0 8px;

        font-size: 10px;
        border-radius: 6px;
    }

    .subtitle-sync-controls {
        padding: 2px;
        gap: 2px;
    }

    .sync-button,
    .sync-reset-button {
        height: 24px;
        font-size: 9px;
    }

    .sync-button {
        min-width: 29px;
        padding: 0 4px;
    }

    .sync-reset-button {
        min-width: 62px;
        padding: 0 5px;
    }


    /* 일반 화면 자막 */
    media-player:not([data-fullscreen])
    .smi-subtitle-layer {
        bottom: 25px;

        font-size: clamp(
            15px,
            4vw,
            20px
        );

        line-height: 1.3;
    }
}

/* PC에서만 즐겨찾기 hover 사용 */
@media (hover: hover) and (pointer: fine) {

    .favorite-button:hover {
        background: #111;
        color: white;
        border-color: #111;
    }
}


/* 모바일 즐겨찾기 */
@media (max-width: 700px) {

    /* 기본 = 즐겨찾기 해제 */
    .favorite-button,
    .favorite-button:hover {
        background: white;
        color: #111;
        border-color: #d1d1d1;
    }

    .favorite-button .favorite-star,
    .favorite-button:hover .favorite-star {
        color: #111;
        position: static;
    }

    .favorite-button:hover .favorite-star::after {
        content: none;
    }


    /* 즐겨찾기 ON */
    .favorite-button.active,
    .favorite-button.active:hover {
        background: #111;
        color: white;
        border-color: #111;
    }

    .favorite-button.active .favorite-star,
    .favorite-button.active:hover .favorite-star {
        color: #f0b232;
    }
}

/* ==========================================
   Chat Widget - Mobile
   ========================================== */

@media (max-width: 700px) {

    /* =========================
       채팅 위젯 위치
       ========================= */

    .chat-widget {
        right: 12px;
        bottom: 12px;
    }


    /* =========================
       채팅 열기 버튼
       ========================= */

    .chat-launcher {
        width: 48px;
        height: 48px;

        font-size: 18px;
    }

    .chat-launcher-icon {
        width: 34px;
        height: 34px;
    }


    /* =========================
       채팅창
       크기는 기존 그대로
       ========================= */

    .chat-panel {
        right: 0;
        bottom: 60px;

        width: min(320px, calc(100vw - 24px));
        height: min(430px, calc(100dvh - 100px));

        border-radius: 12px;
    }


    /* =========================
       친구 목록 상단
       ========================= */

    .chat-panel-header {
        padding: 16px 17px 14px;
    }

    .chat-panel-header h2 {
        font-size: 20px;
    }

    .chat-eyebrow {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .chat-panel-header .chat-close {
        top: 13px;
        right: 14px;

        font-size: 22px;
    }


    /* =========================
       친구 목록
       ========================= */

    .chat-friend {
        padding: 12px 14px;
    }

    .chat-friend-avatar {
        width: 40px;
        height: 40px;

        font-size: 13px;
    }

    .chat-friend-info {
        gap: 3px;
    }

    .chat-friend-name {
        font-size: 14px;
    }

    .chat-friend-status {
        font-size: 11px;
    }

    .chat-status-dot {
        width: 8px;
        height: 8px;
    }


    /* =========================
       대화방 상단
       ========================= */

    .chat-conversation-header {
        height: 66px;
        padding: 0 13px;
    }

    .chat-conversation-header .chat-close {
        top: 13px;
        right: 14px;

        font-size: 22px;
    }

    .chat-back {
        margin-right: 9px;
        padding: 0 3px;

        font-size: 27px;
    }

    .chat-conversation-user {
        gap: 9px;
    }

    .chat-conversation-avatar {
        width: 36px;
        height: 36px;

        font-size: 12px;
    }

    .chat-conversation-name {
        font-size: 14px;
    }

    .chat-conversation-status {
        margin-top: 3px;

        gap: 5px;

        font-size: 11px;
    }


    /* =========================
       메시지 영역
       ========================= */

    .chat-messages {
        height: calc(100% - 123px);

        padding: 13px;
    }

    .chat-message {
        margin-bottom: 9px;
    }

    .chat-message-bubble {
        max-width: 80%;

        padding: 8px 11px;

        font-size: 14px;
        line-height: 1.5;

        border-radius: 11px;
    }

    .chat-message.mine .chat-message-bubble {
        border-bottom-right-radius: 4px;
    }

    .chat-message.theirs .chat-message-bubble {
        border-bottom-left-radius: 4px;
    }


    /* 읽음 */
    .chat-read-receipt {
        margin-top: 3px;

        font-size: 10px;
    }


    /* =========================
       메시지 입력창
       ========================= */

    .chat-message-form {
        min-height: 57px;

        padding: 8px 10px;
        gap: 7px;
    }

    #chatMessageInput {
        max-height: 80px;

        padding: 8px 10px;

        font-size: 16px;
        line-height: 1.4;

        border-radius: 8px;
    }

    #chatMessageSend {
        padding: 8px 5px;

        font-size: 13px;
    }


    /* =========================
       안 읽은 메시지
       ========================= */

    .chat-unread-badge {
        min-width: 18px;
        height: 18px;

        padding: 0 5px;

        font-size: 10px;
    }

    .chat-friend-unread {
        min-width: 18px;
        height: 18px;

        padding: 0 5px;

        font-size: 10px;
    }
}

/* ==========================================
   Progress Page - Mobile
   ========================================== */

@media (max-width: 700px) {

    .progress-page {
        width: 100%;
        padding: 32px 16px 55px;
        box-sizing: border-box;
    }

    /* 제목 */
    .progress-heading {
        margin-bottom: 24px;
    }

    .progress-heading h1 {
        margin-bottom: 7px;
        font-size: 28px;
    }

    .progress-heading p {
        font-size: 14px;
        line-height: 1.5;
    }


    /* 카드 */
    .progress-list {
        gap: 14px;
    }

    .progress-card {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 17px;

        padding: 19px;

        border-radius: 12px;
    }


    /* 사용자 */
    .progress-user {
        width: 100%;
        min-width: 0;

        gap: 12px;
    }

    .progress-avatar {
        width: 46px;
        height: 46px;

        font-size: 16px;
    }

    .progress-user-info {
        gap: 3px;
    }

    .progress-user-info strong {
        font-size: 15px;
    }

    .progress-user-info span {
        font-size: 12px;
    }


    /* 에피소드 정보 */
    .progress-episode {
        width: 100%;
        gap: 5px;
    }

    .progress-episode > strong {
        font-size: 15px;
    }

    .progress-episode > span {
        font-size: 13px;
        line-height: 1.45;
    }

    .progress-percentage {
        margin-top: 5px;

        font-size: 12px;
        font-weight: 600;
    }


    /* 진행도 바 */
    .progress-page-bar {
        height: 5px;
        margin-top: 4px;
    }


    /* 펼치기 화살표 */
    .progress-expand-arrow {
        position: absolute;

        top: 36px;
        right: 20px;

        width: 8px;
        height: 8px;

        margin: 0;
    }


    /* 상세 통계 */
    .progress-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 9px;
    }

    .progress-card.expanded .progress-stats {
        max-height: 320px;
        margin-top: 4px;
    }

    .progress-stat {
        padding: 13px;
        gap: 5px;

        border-radius: 8px;
    }

    .progress-stat span {
        font-size: 11px;
    }

    .progress-stat strong {
        font-size: 14px;
    }
}

@media (max-width: 700px) {

    /* 모바일에서는 스포일러 방지 사용 안 함 */
    .spoiler-title {
        filter: none !important;
        cursor: default;
    }

    .spoiler-tooltip,
    .spoiler-hint {
        display: none !important;
    }
}

/* ==========================================
   Login Page - Mobile
   ========================================== */

@media (max-width: 700px) {

    html,
    body {
        width: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
    }

    .login-container {
        position: fixed;
        inset: 0;

        width: 100%;
        height: 100dvh;
        min-height: 100dvh;

        padding: 0;
        margin: 0;

        background: white;
    }

    .login-box {
        width: 100%;
        height: 100%;
        max-width: none;
        min-height: 0;

        margin: 0;
        padding: 40px 28px;

        border-radius: 0;
        box-shadow: none;

        display: flex;
        flex-direction: column;
        justify-content: center;

        background: white;
    }


    /* 로고 */
    .login-logo {
        width: 100px;
        height: 100px;

        margin: 0 auto 20px;
    }


    /* ONE PIECE */
    .login-box h1 {
        margin-bottom: 30px;

        font-size: 34px;
        line-height: 1.1;
    }


    /* 폼 */
    #loginForm {
        width: 100%;

        gap: 14px;
    }


    /* 아이디 / 비밀번호 */
    #loginForm input {
        width: 100%;
        height: 52px;

        padding: 0 16px;

        border-radius: 9px;

        font-size: 16px;
    }


    /* 로그인 버튼 */
    #loginForm button {
        width: 100%;
        height: 52px;

        padding: 0;

        border-radius: 9px;

        font-size: 16px;
        font-weight: 600;
    }


    /* 오류 메시지 */
    #loginMessage {
        min-height: 20px;

        font-size: 13px;
    }
}

/* ==========================================
   스포일러 방지 임시 OFF 삭제
   ========================================== */

.spoiler-title {
    filter: none !important;
    cursor: default !important;
}

.spoiler-tooltip,
.spoiler-hint {
    display: none !important;
}

.chat-message-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.chat-message.mine .chat-message-row {
    justify-content: flex-end;
}

.chat-message.theirs .chat-message-row {
    justify-content: flex-start;
}

.chat-message-time {
    flex-shrink: 0;

    margin-bottom: 2px;

    font-size: 9px;
    line-height: 1;

    color: #999;

    white-space: nowrap;
}

/* ==========================================
   오프닝 / 다음 에피소드 버튼 위치
   ========================================== */

.episode-skip-overlay {
    position: absolute;

    right: 24px;
    bottom: 95px;

    z-index: 50;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    pointer-events: none;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}


/* 플레이어에 마우스가 있으면 표시 */
media-player:not([data-fullscreen]):hover
.episode-skip-overlay {
    opacity: 1;
    visibility: visible;
}


/* 전체화면에서 마우스가 활성 상태면 표시 */
media-player[data-fullscreen]
.episode-skip-overlay.fullscreen-active {
    opacity: 1;
    visibility: visible;
}


/* 버튼이 처음 등장하는 순간에는
   마우스 위치와 관계없이 강제로 표시 */
.episode-skip-overlay.force-visible {
    opacity: 1 !important;
    visibility: visible !important;
}


/* ==========================================
   기본 버튼 - PC
   ========================================== */

.episode-skip-button {
    display: none;

    padding: 13px 21px;

    border: 0;
    border-radius: 9px;

    background: rgba(18, 18, 18, 0.88);
    color: white;

    font-family: inherit;
    font-size: 15px;
    font-weight: 600;

    white-space: nowrap;

    cursor: pointer;
    pointer-events: auto;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}


.episode-skip-button:hover {
    background: rgba(40, 40, 40, 0.95);
    color: white;

    transform: translateY(-1px);
}


.episode-skip-button.visible {
    display: block;
}


/* ==========================================
   PC 전체화면
   ========================================== */

media-player[data-fullscreen]
.episode-skip-overlay {
    right: 42px;

    /* 기존 100px보다 위 */
    bottom: 135px;
}


media-player[data-fullscreen]
.episode-skip-button {
    padding: 17px 28px;

    border-radius: 10px;

    font-size: 18px;
}


/* ==========================================
   모바일
   ========================================== */

@media (max-width: 700px) {

    .episode-skip-overlay {
        right: 12px;
        bottom: 55px;
    }


    .episode-skip-button {
        padding: 9px 14px;

        border-radius: 7px;

        font-size: 11px;
        font-weight: 600;
    }


    /* 모바일 전체화면 */

    media-player[data-fullscreen]
    .episode-skip-overlay {
        right: 18px;
        bottom: 75px;
    }


    media-player[data-fullscreen]
    .episode-skip-button {
        padding: 11px 17px;

        border-radius: 8px;

        font-size: 13px;
    }
}