/* UI-027 · latest reference, only the visible immersive detail route. Load after UI-026. */
.phone:has(>#routePanel:not([hidden])>.drama-detail-immersive) {
 --detail-screen-side:12px;
 --detail-screen-footer-height:calc(80px + env(safe-area-inset-bottom,0px));
 --detail-screen-episode-gap:6px;
 --detail-screen-cover-blur:12px;
 --detail-screen-topbar-height:68px;
}
.product-body:has(.drama-detail-immersive)>.phone {height:100dvh;max-height:none;align-self:start;}
.phone #routePanel:has(>.drama-detail.drama-detail-immersive):has(>.detail-route-top) {
 padding-left:var(--detail-screen-side,12px);
 padding-right:var(--detail-screen-side,12px);
 padding-bottom:calc(var(--drama-detail-footer-height,var(--detail-screen-footer-height,80px)) + 20px);
 background:#151515;
 color:#eee;
 scroll-padding-top:80px;
 scroll-padding-bottom:calc(var(--drama-detail-footer-height,var(--detail-screen-footer-height,80px)) + 20px);
}
.phone #routePanel:has(>.drama-detail.drama-detail-immersive)>.route-top.detail-route-top {
 margin-bottom:calc(-1 * var(--detail-screen-topbar-height,68px));
 margin-left:calc(-1 * var(--detail-screen-side,12px));
 margin-right:calc(-1 * var(--detail-screen-side,12px));
 padding-left:16px;
 padding-right:16px;
 background:rgb(21 21 21 / var(--drama-topbar-bg-alpha,0.6));
 color:#f4f4f4;
}
.phone #routePanel:has(>.drama-detail.drama-detail-immersive)>.detail-route-top>button {color:#f0f0f0;}
.phone #routePanel:has(>.drama-detail.drama-detail-immersive)>.detail-route-top>:nth-child(2) {font-size:16px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.phone:has(>#routePanel:not([hidden])>.drama-detail-immersive)>#bottomNav {display:none;}
.phone:has(>#routePanel:not([hidden])>.drama-detail-immersive)>#reminderDock {top:auto;bottom:calc(var(--drama-detail-footer-height,var(--detail-screen-footer-height,80px)) + 12px);translate:none;}
.drama-detail.drama-detail-immersive {--drama-text:#eee;--drama-muted:#aaa;color:#eee;}

/* The same cover forms the full blurred background and the small foreground poster. */
.drama-detail.drama-detail-immersive>.drama-reference-hero {
 position:relative;
 isolation:isolate;
 overflow:hidden;
 min-height:350px;
 margin:0 calc(-1 * var(--detail-screen-side,12px)) 0;
 padding:200px 16px 18px;
 border:0;
 border-radius:0;
 background:#202020;
}
.drama-detail-immersive>.drama-reference-hero>.drama-reference-backdrop {
 inset:-28px;
 width:calc(100% + 56px);
 height:calc(100% + 56px);
 opacity:.95;
 filter:blur(var(--detail-screen-cover-blur,12px)) brightness(.65) saturate(.8);
}
.drama-detail-immersive>.drama-reference-hero::after {background:linear-gradient(180deg,#15151520 0%,#15151555 35%,#151515dd 68%,#151515 100%);}
.drama-detail-immersive .drama-reference-layout {grid-template-columns:94px minmax(0,1fr);gap:16px;align-items:end;}
.drama-detail-immersive .drama-reference-poster {border-radius:9px;background:#333;box-shadow:0 5px 18px #0005;}
.drama-detail-immersive .drama-reference-copy>small {color:#aaa;font-size:10px;}
.drama-detail-immersive .drama-reference-copy>h1 {margin:7px 0 10px;color:#fff;font-size:23px;font-weight:650;line-height:1.35;}
.drama-detail-immersive .drama-reference-copy>.drama-reference-metadata {color:#b7b7b7;font-size:12px;gap:5px 12px;}
.drama-detail.drama-detail-immersive>.drama-detail-meta {margin:12px 4px 16px;}
.drama-detail-immersive .drama-detail-tags {gap:7px;}
.drama-detail-immersive .drama-detail-tag {padding:5px 10px;border:1px solid currentColor;border-radius:4px;background:transparent;font-size:12px;line-height:1.6;}
.drama-detail-immersive .drama-detail-tag[data-tone="0"] {--drama-tag-background:transparent;--drama-tag-text:#e4c56f;}
.drama-detail-immersive .drama-detail-tag[data-tone="1"] {--drama-tag-background:transparent;--drama-tag-text:#8d94f4;}
.drama-detail-immersive .drama-detail-tag[data-tone="2"] {--drama-tag-background:transparent;--drama-tag-text:#e78eaa;}
.drama-detail-immersive .drama-detail-tag[data-tone="3"] {--drama-tag-background:transparent;--drama-tag-text:#d46e76;}
.drama-detail-immersive .drama-detail-tag[data-tone="4"] {--drama-tag-background:transparent;--drama-tag-text:#8cbbe5;}
.drama-detail-immersive .drama-detail-tag[data-tone="5"] {--drama-tag-background:transparent;--drama-tag-text:#85cbc0;}

/* Plain introduction; the actual expand/collapse spans remain in the native summary. */
.drama-detail.drama-detail-immersive>.drama-reference-summary {position:relative;padding:0 4px;margin:12px 0 21px;border:0;border-radius:0;background:none;}
.drama-detail-immersive .drama-reference-summary>summary {position:relative;min-height:44px;padding-bottom:22px;}
.drama-detail-immersive .drama-summary-heading {display:contents;}
.drama-detail-immersive .drama-summary-heading>span:first-child:not(.drama-summary-toggle) {display:none;}
.drama-detail-immersive .drama-summary-toggle {position:absolute;right:0;bottom:0;color:#c3c3c3;font-size:12px;line-height:1.7;}
.drama-detail-immersive .drama-summary-preview {margin:0;color:#aaa;font-size:12px;line-height:1.85;}
.drama-detail-immersive .drama-reference-summary>p {margin:0;color:#b8b8b8;font-size:12px;line-height:1.9;}
.drama-detail-immersive .drama-reference-summary[open] {padding-bottom:24px;}
.drama-detail-immersive .drama-reference-summary[open]>summary {position:static;min-height:0;padding:0;}
.drama-detail-immersive .drama-reference-summary[open] .drama-summary-toggle {right:4px;}

/* Six simple number targets. Access badges are cues, never permission decisions. */
.drama-detail.drama-detail-immersive>.drama-detail-selection {padding:0;margin:19px 0 24px;border:0;border-radius:0;background:none;}
.drama-detail-immersive .drama-selection-heading {padding:0 4px;}
.drama-detail-immersive .drama-selection-heading>h2 {color:#eee;font-size:17px;}
.drama-detail-immersive .drama-selection-heading>span {color:#929292;font-size:12px;}
.drama-detail-immersive .drama-detail-selection>.drama-episodes {grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--detail-screen-episode-gap,6px);margin-top:15px;}
.drama-detail-immersive .drama-detail-selection .drama-episode {
 position:relative;
 display:grid;
 place-items:center;
 width:100%;
 min-width:0;
 min-height:0;
 aspect-ratio:1;
 gap:0;
 padding:0;
 border:0;
 border-radius:10px;
 background:#252525;
 color:#eee;
 box-shadow:none;
 overflow:hidden;
}
.drama-detail-immersive .drama-episode>.drama-episode-number {font-size:18px;font-weight:500;line-height:1.2;color:inherit;}
.drama-detail-immersive .drama-episode:is([aria-current=true],.is-current) {background:#39332a;color:#f8ce5d;}
.drama-detail-immersive .drama-episode-corner {position:absolute;top:0;right:0;display:grid;place-items:center;min-width:20px;height:16px;padding:1px 4px;border-radius:0 10px 0 6px;background:#c99a39;color:#221b10;font-size:8px;font-weight:750;line-height:1;}
.drama-detail-immersive .drama-episode-corner[data-state=vip] {background:#bca376;color:#211b12;}
.drama-detail-immersive .drama-episode-corner[data-state=free] {display:none;}
.drama-detail-immersive .drama-episode-corner[data-state=owned] {background:#546850;color:#d7e8d2;}
.drama-detail-immersive .drama-episode-corner>svg {width:10px;height:10px;}
.drama-detail-immersive .drama-episode-corner .accessmark {font:inherit;}
.drama-detail-immersive .drama-episode-corner .sr-only {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* Dark comments use the existing controller DOM. Nothing is fixed inside the scroll area. */
.drama-detail.drama-detail-immersive>.drama-comments {margin:22px 4px 18px;padding:16px 13px;background:#202020;color:#ddd;}
.drama-detail-immersive .drama-comments-heading>h2 {color:#eee;}
.drama-detail-immersive .drama-comments-heading>span {color:#999;}
.drama-detail-immersive .drama-comments .drama-comment {background:#292929;}
.drama-detail-immersive .drama-comment-avatar {background:#40364a;color:#cdb7e2;}
.drama-detail-immersive .drama-comment-by>strong {color:#ddd;}
.drama-detail-immersive .drama-comment-by>time {color:#929292;}
.drama-detail-immersive .drama-comment>.drama-comment-text {color:#bcbcbc;}
.drama-detail-immersive .drama-comment>.drama-comment-status {background:#3e3525;color:#d5b77b;}
.drama-detail-immersive .drama-comments :is(.drama-comments-empty,.drama-comments-notice) {color:#939393;}
.drama-detail-immersive .drama-comments .quiet-button {background:#303030;color:#b8b8b8;}
.drama-detail-immersive .drama-comment-form>label {color:#aaa;}
.drama-detail-immersive .drama-comment-form textarea {background:#2c2c2c;color:#eee;}
.drama-detail-immersive .drama-comment-form textarea::placeholder {color:#8e8e8e;}
.drama-detail-immersive .drama-comment-form>.primary-button {background:#3b3b3b;color:#ddd;}
.drama-detail-immersive>.drama-note {color:#838383!important;}

/* Root must hoist this footer to be a direct child of .phone, beside #routePanel. */
.drama-detail-footer {display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:12px;min-height:var(--detail-screen-footer-height,80px);padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid #ffffff08;background:#151515;color:#eee;box-sizing:border-box;}
.phone[data-detail-active=true]>.drama-detail-footer {position:absolute;z-index:30;left:0;right:0;bottom:0;}
.phone:not([data-detail-active=true])>.drama-detail-footer {display:none;}
.drama-detail-footer>.drama-follow {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:56px;min-width:44px;height:52px;padding:0;border:0;background:none;color:#d3d3d3;font-size:11px;line-height:1.5;}
.drama-detail-footer>.drama-follow>svg {width:24px;height:24px;fill:none;}
.drama-detail-footer>.drama-follow[aria-pressed=true] {color:#f6cb54;}
.drama-detail-footer>.drama-follow[aria-pressed=true]>svg path {fill:currentColor;}
.drama-detail-footer>.drama-play {display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-width:0;height:52px;padding:10px 17px;border:0;border-radius:999px;background:linear-gradient(110deg,#ffe680,#ffd541 55%,#ffc328);color:#251b08;box-shadow:0 7px 26px #ffce3826;font-size:16px;font-weight:700;line-height:1.5;}
.drama-detail-footer>.drama-play>svg {flex:0 0 19px;width:19px;height:19px;fill:currentColor;stroke:currentColor;}
.drama-detail-footer .drama-play-label {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.drama-detail-footer>button:focus-visible {outline:2px solid #ffe298;outline-offset:3px;}
@media(max-height:600px){.drama-detail.drama-detail-immersive>.drama-reference-hero{min-height:210px;padding-top:80px}.drama-detail-immersive .drama-reference-layout{grid-template-columns:90px minmax(0,1fr)}}

/* Root final visual alignment with the supplied reference. */
.drama-detail-immersive .drama-episode-corner:is([data-state=coins],[data-state=vip]){top:2px;right:2px;min-width:22px;width:22px;height:22px;padding:2px;border-radius:50%;}
.drama-detail-immersive .drama-episode-corner[data-state=coins]{background:#daf6ff;box-shadow:0 0 5px #5dcfff40;}
.drama-detail-immersive .drama-episode-corner[data-state=coins]>svg{width:18px;height:18px;}
.drama-detail-immersive .drama-episode-corner[data-state=vip]{background:#ffcf48;color:#533d0c;}