.library-eyebrow { margin: 0 0 12px; color: #a05237; font-size: 10px; font-weight: 750; letter-spacing: .16em; }
.library-main { padding-top: 14px; }
.library-intro { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 0 0 38px; padding: 24px 0 16px; }
.library-intro h1 { margin: 0 0 13px; font-size: clamp(27px, 3vw, 37px); font-weight: 750; line-height: 1.4; letter-spacing: -.05em; }
.library-description { margin: 0 0 22px; color: var(--app-muted); font-size: 13px; }
.library-page .mypage-profile-summary { gap: 9px; margin: 0; }
.library-page .mypage-profile-icon { width: 26px; height: 26px; border: 0; box-shadow: none; }
.library-page .mypage-account-name { color: #737d8a; font-size: 11px; font-weight: 500; }
.library-stats { display: grid; grid-template-columns: repeat(3, minmax(88px, 1fr)); gap: 0; padding: 22px 10px; border: 1px solid var(--app-border); border-radius: 14px; background: #fff; }
.library-personal-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.library-stat { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 100px; padding: 0 16px; border: 0; color: var(--app-ink); background: transparent; cursor: pointer; }
.library-stat + .library-stat { border-left: 1px solid var(--app-border); }
.library-stat strong { font-size: 27px; font-weight: 650; line-height: 1.25; font-variant-numeric: tabular-nums; }
.library-stat span { color: var(--app-muted); font-size: 10px; white-space: nowrap; }
.library-stat:hover strong { color: var(--app-accent); }
.library-tabs { display: flex; gap: 28px; width: 100%; margin-bottom: 30px; border-bottom: 1px solid var(--app-border); overflow-x: auto; scrollbar-width: none; }
.library-tabs::-webkit-scrollbar { display: none; }
.library-tab { display: inline-flex; flex-shrink: 0; align-items: center; gap: 7px; min-height: 53px; padding: 0 0 14px; border: 0; border-bottom: 2px solid transparent; color: #737d8a; background: transparent; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.library-tab i { font-size: 15px; }
.library-tab span { padding: 0 6px; border-radius: 5px; color: #8b939d; background: #e9ecf0; font-size: 10px; font-weight: 600; }
.library-tab.active { border-bottom-color: var(--brand-orange, #ed7046); color: var(--app-ink); }
.library-tab.active i { color: var(--app-accent); }
.library-tab.active span { color: var(--app-accent); background: #fbe9df; }
.library-tab:hover { color: var(--app-accent); }
.library-page .mypage-toolbar { padding: 0; border: 0; background: transparent; box-shadow: none; }
.library-toolbar-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.library-toolbar-heading h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.library-toolbar-heading p { margin: 0; color: var(--app-muted); font-size: 12px; }
.library-result-count { margin-left: 8px; color: var(--app-muted); font-size: 12px; font-weight: 500; }
.library-toolbar-controls { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; }
.library-sort-label { color: var(--app-muted); font-size: 10px; }
.library-sort-options { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.library-sort-options .btn-group { gap: 6px; }
.library-sort-options .btn { margin: 0 !important; border: 1px solid transparent; border-radius: 6px !important; background: transparent; color: var(--app-muted); font-size: 11px; padding: 5px 10px; }
.library-sort-options .btn[aria-pressed="true"] { border-color: var(--app-border); background: #fff; color: var(--app-ink); box-shadow: 0 1px 3px #20273308; }
.library-page #mypageContent { row-gap: 14px; }
.library-page #mypageContent > .movie-grid-cell { flex: 0 0 16.66667%; max-width: 16.66667%; }
.library-page .movie-list-card { padding: 22px; }
.library-page .movie-list-card h3 { font-size: 16px; }
.library-page .movie-list-card p { color: var(--app-muted); font-size: 13px; overflow-wrap: anywhere; }
.library-page .mypage-menu-button { min-height: 36px; padding: 7px 10px; border-color: var(--app-border); border-radius: 8px; color: var(--app-muted); background: #fff; box-shadow: none; font-size: 11px; font-weight: 600; }
.library-page .mypage-menu-button .bi { font-size: 15px; }
.library-page .mypage-menu-button:hover { color: var(--app-ink); background: #f0f2f5; }
.library-page .mypage-menu-panel { width: 265px; border-color: var(--app-border); background: #fff; box-shadow: 0 12px 35px #2632471c; }
.library-page .mypage-menu-title { padding: 0 10px; font-size: 10px; }
.library-page .mypage-menu-section + .mypage-menu-section { border-top-color: var(--app-border); }
.library-page .mypage-menu-item { min-height: 38px; font-size: 12px; font-weight: 500; }
.library-page .mypage-menu-item:hover, .library-page .mypage-menu-item:focus { color: var(--app-accent); background: #fff1e9; }
.library-page .mypage-menu-item-accent { color: var(--app-accent); }
.library-page .analysis-section { padding: 24px; border: 1px solid var(--app-border); border-radius: 14px; background: #fff; }
.library-page .analysis-section h2 { font-size: 20px; }
.library-page .mypage-rank { padding: 0; border: 0; color: var(--app-accent); background: transparent; box-shadow: none; font-size: 13px; }
.library-empty { display: flex; flex-direction: column; align-items: center; width: calc(100% - 30px); min-height: 325px; margin: 0 15px; padding: 45px 24px; border: 1px dashed #dce1e7; border-radius: 14px; background: #fff; text-align: center; }
.library-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 20px; border-radius: 17px; color: #b66647; background: #fcf0e8; font-size: 25px; }
.library-empty h2 { margin-bottom: 12px; font-size: 21px; font-weight: 650; }
.library-empty p:not(.library-eyebrow) { max-width: 420px; margin-bottom: 22px; color: var(--app-muted); font-size: 13px; line-height: 1.9; }
.library-empty .btn { font-size: 12px; }
.library-empty-actions { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.library-empty-actions > a { color: var(--app-muted); font-size: 12px; }
.library-welcome { border-style: solid; background: linear-gradient(120deg, #fff, #fffbf7); }
.library-loading { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 240px; color: var(--app-muted); font-size: 13px; }
.library-loading > span { width: 20px; height: 20px; border: 2px solid var(--app-border); border-top-color: var(--app-accent); border-radius: 50%; animation: library-spin .8s linear infinite; }
@keyframes library-spin { to { transform: rotate(360deg); } }
#psychologyResult pre { padding: 18px; border-radius: 10px; background: #f5f6f8; color: var(--app-ink) !important; white-space: pre-wrap; font-family: inherit; font-size: 13px; line-height: 1.9; }

.detail-hero { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 48px; align-items: center; padding: 10px 0 38px; }
.detail-poster-wrap { align-self: start; }
.detail-poster { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; box-shadow: 0 14px 28px #242b361c; }
.detail-poster-placeholder { display: grid; place-items: center; background: #e9ecf0; color: #9ba4af; font-size: 50px; }
.detail-hero-content { min-width: 0; }
.detail-hero-content h1 { max-width: 820px; margin: 0 0 14px; font-size: clamp(26px, 3.6vw, 40px); font-weight: 750; line-height: 1.45; letter-spacing: -.04em; overflow-wrap: anywhere; }
.detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-bottom: 15px; color: var(--app-muted); font-size: 12px; }
.detail-rating { color: var(--app-ink); font-size: 16px; font-weight: 650; }
.detail-rating i { margin-right: 4px; color: #bc8a40; font-size: 13px; }
.detail-rating small { color: var(--app-muted); font-size: 10px; font-weight: 400; }
.detail-hero .movie-genre-badge { padding: 4px 9px; font-size: 10px; }
.detail-director { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 17px 0 25px; color: var(--app-muted); font-size: 11px; }
.detail-director .person-badge { margin: 0; padding: 0; border: 0; background: transparent; color: var(--app-ink); font-size: 12px; }
.detail-primary-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.detail-primary-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 45px; font-size: 12px; }
.detail-save-button.btn-active { color: #fff; background: #567363; border-color: #567363; }
.detail-discussion-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 17px; color: var(--app-muted); font-size: 12px; }
.detail-discussion-link .bi-arrow-down { font-size: 10px; }
.detail-watch-services { margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--app-border); }
.detail-watch-services > p { margin: 0 0 9px; color: #868e99; font-size: 10px; }
.detail-watch-services .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--app-border); background: #fff; color: #666f7c; font-size: 10px; font-weight: 500; }
.detail-watch-services .btn svg path { stroke: #a35048; }
.detail-watch-services .btn:hover { color: var(--app-accent); border-color: #d8b7a9; }
.detail-section-nav { display: flex; align-items: center; gap: 36px; overflow-x: auto; margin: 0 0 36px; padding: 0 0 15px; border-bottom: 1px solid var(--app-border); scrollbar-width: none; }
.detail-section-nav a { flex-shrink: 0; color: #697380; font-size: 12px; font-weight: 600; text-decoration: none; }
.detail-section-nav a:hover { color: var(--app-accent); }
.detail-section-nav span { margin-left: 4px; color: #9aa1aa; font-size: 10px; }
.movie-page #movieDetail > section[id] { scroll-margin-top: 110px; }
.detail-overview-section { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; }
.detail-story, .detail-extras { min-width: 0; }
.movie-page #movieDetail h2 { margin-bottom: 18px; font-size: 22px; font-weight: 700; }
.movie-page #movieDetail h3 { font-size: 15px; font-weight: 650; }
.movie-page .movie-overview-text { margin-bottom: 10px; color: #616c7a; font-size: 13px; line-height: 2; }
.movie-page .movie-overview-text.is-collapsed { -webkit-line-clamp: 5; }
.movie-page .link-button { color: var(--app-accent); font-size: 12px; }
.detail-credits { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 7px 14px; align-items: baseline; margin: 24px 0; font-size: 11px; }
.detail-credits dt { color: var(--app-muted); font-weight: 500; }
.detail-credits dd { margin: 0; }
.detail-credits .person-badge { margin: 0 5px 5px 0; font-size: 11px; }
.detail-cast-title { margin: 24px 0 12px; }
.movie-page .cast-cards-row { gap: 12px; width: 100%; max-width: 100%; padding: 0 0 10px; overflow-x: auto; }
.movie-page .cast-card { flex-basis: 94px; border: 0; background: transparent; border-radius: 0; box-shadow: none; }
.movie-page .cast-card-image-wrap { border-radius: 8px; overflow: hidden; }
.movie-page .cast-card-body { padding: 8px 0; }
.movie-page .cast-card-name { font-size: 11px; font-weight: 600; }
.movie-page .cast-card-character { color: var(--app-muted); font-size: 10px; }
.movie-page .cast-card.is-favorite .cast-card-image-wrap { outline: 2px solid #d89575; outline-offset: -2px; }
.detail-extras .movie-trailer { margin-top: 0 !important; }
.movie-page .trailer-frame { overflow: hidden; border-radius: 12px; }
.detail-extras .movie-strip { gap: 14px; }
.detail-extras .movie-card.card { flex-basis: 116px; width: 116px; }
.detail-community-section { margin: 38px 0 0; padding: 30px; border: 1px solid var(--app-border); border-radius: 14px; background: #fff; }
.detail-community-section > .d-flex { gap: 14px; }
.detail-community-section .library-eyebrow { margin-bottom: 6px; }
.detail-section-count { margin-left: 5px; color: #9098a2; font-size: 14px; font-weight: 400; }
.detail-section-description { margin: 14px 0 22px; color: var(--app-muted); font-size: 12px; }
.detail-section-description .link-button { margin-left: 10px; }
.detail-community-section .ranking-genre-select { max-width: 120px; margin: 0; font-size: 11px; }
.detail-community-section .movie-list-comment { padding: 20px 0; border-bottom-color: var(--app-border); }
.detail-community-section .movie-list-comment:last-child { border-bottom: 0; }
.detail-community-section .movie-list-comment-name { font-size: 12px; font-weight: 600; }
.detail-community-section .movie-list-comment p { padding-top: 6px; color: #596575; font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }
.detail-community-section .movie-list-comment-actions { margin-top: 10px; }
.detail-community-section .comment-reply-button, .detail-community-section .comment-like-button { color: #737d8a; font-size: 11px; }
.detail-community-section .comment-like-button.is-liked { color: var(--app-accent); }
.detail-empty-note { margin: 0; padding: 25px 0 10px; color: #8a929d; font-size: 12px; }
.detail-login-prompt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 18px; border: 1px solid #eddfd6; border-radius: 9px; background: #fff8f2; color: var(--app-accent); text-align: left; font-size: 12px; cursor: pointer; }
.detail-login-prompt .bi-arrow-right { margin-left: auto; }
.detail-related-section { margin-top: 44px; }
.movie-page .app-breadcrumb .breadcrumb-item.active { max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) {
    .library-tabs { gap: 24px; }
    .library-page #mypageContent > .movie-grid-cell { flex-basis: 20%; max-width: 20%; }
    .detail-hero { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
    .detail-overview-section { gap: 30px; }
}
@media (max-width: 800px) {
    .library-intro { flex-direction: column; align-items: stretch; gap: 22px; margin-bottom: 22px; padding-top: 4px; }
    .library-stats { align-self: flex-start; width: 100%; max-width: 440px; padding: 16px 10px; }
    .library-personal-tools { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
    .library-stat { min-width: 0; }
    .library-page #mypageContent > .movie-grid-cell { flex-basis: 25%; max-width: 25%; }
    .detail-hero { grid-template-columns: 174px minmax(0, 1fr); gap: 24px; align-items: start; }
    .detail-hero-content h1 { font-size: 26px; }
    .detail-overview-section { grid-template-columns: 1fr; gap: 28px; }
    .detail-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .detail-extras > section { margin-top: 0 !important; }
    .detail-primary-actions .btn { width: 100%; }
}
@media (max-width: 575px) {
    .library-main { padding-top: 0; }
    .library-intro h1 { font-size: 27px; }
    .library-description { max-width: 275px; margin-bottom: 16px; font-size: 12px; line-height: 1.9; }
    .library-tabs { gap: 24px; margin-bottom: 24px; }
    .library-tab { font-size: 11px; }
    .library-tab i { display: none; }
    .library-toolbar-heading { align-items: start; }
    .library-toolbar-heading h2 { font-size: 18px; }
    .library-toolbar-heading p { font-size: 11px; }
    .library-toolbar-heading > .btn { flex-shrink: 0; padding: 8px 10px; font-size: 10px; }
    .library-toolbar-controls { align-items: baseline; }
    .library-sort-label { flex-shrink: 0; }
    .library-page #mypageContent > .movie-grid-cell { flex-basis: 50%; max-width: 50%; }
    .library-empty { min-height: 305px; padding: 30px 20px; }
    .library-empty h2 { font-size: 18px; line-height: 1.6; }
    .library-empty p:not(.library-eyebrow) { font-size: 12px; }
    .library-stats { max-width: none; }
    .library-stat strong { font-size: 24px; }
    .library-stat span { font-size: 9px; }
    .library-page .mypage-header-actions .mypage-menu-button { min-width: 34px; padding: 6px; }
    .library-page .analysis-section { padding: 20px 16px; }
    .detail-hero { grid-template-columns: 108px minmax(0, 1fr); gap: 20px; padding-top: 3px; padding-bottom: 25px; }
    .detail-hero-content { display: contents; }
    .detail-poster-wrap { grid-row: 1 / 6; }
    .detail-hero .library-eyebrow { align-self: end; margin: 0; font-size: 8px; }
    .detail-hero-content h1 { margin: -10px 0; font-size: 23px; line-height: 1.45; }
    .detail-meta { gap: 12px; margin: -7px 0; font-size: 10px; }
    .detail-rating { font-size: 13px; }
    .detail-hero .movie-genre-badges { gap: 4px; }
    .detail-hero .movie-genre-badge { padding: 2px 6px; font-size: 9px; }
    .detail-director { margin: -9px 0 0; font-size: 10px; }
    .detail-director .person-badge { font-size: 10px; }
    .detail-primary-actions, .detail-discussion-link, .detail-watch-services { grid-column: 1 / -1; }
    .detail-primary-actions { display: grid; grid-template-columns: 1fr; margin-top: 5px; }
    .detail-primary-actions .btn { min-height: 45px; font-size: 12px; }
    .detail-discussion-link { justify-content: center; margin-top: -5px; font-size: 11px; }
    .detail-watch-services { margin-top: 0; padding-top: 15px; }
    .detail-watch-services .btn { min-height: 36px; }
    .detail-section-nav { gap: 26px; margin-bottom: 28px; }
    .detail-section-nav a { font-size: 11px; }
    .movie-page #movieDetail h2 { font-size: 20px; }
    .movie-page .movie-overview-text { font-size: 12px; }
    .detail-extras { grid-template-columns: 1fr; }
    .detail-community-section { margin-top: 28px; padding: 22px 17px; }
    .detail-community-section .ranking-genre-select { max-width: 99px; }
    .detail-community-section .movie-list-comment { gap: 8px; margin-left: calc(var(--comment-depth, 0) * 7px); }
    .detail-community-section .movie-list-comment-avatar { width: 26px; height: 26px; }
    .detail-section-description .link-button { display: block; margin: 8px 0 0; }
    .detail-community-section .movie-list-comment p { font-size: 12px; }
    .detail-login-prompt { padding: 13px; gap: 8px; font-size: 11px; }
    .detail-community-section .input-group { flex-wrap: nowrap; }
    .detail-community-section .input-group .form-control { min-width: 0; font-size: 12px; }
    .detail-community-section .input-group .btn { padding-inline: 12px; font-size: 12px; }
    .movie-page #movieDetail > section[id] { scroll-margin-top: 90px; }
}
@media (prefers-reduced-motion: reduce) { .library-loading > span { animation: none; } }