* {box-sizing:border-box;margin:0;padding:0}
:root {
--ink:#1c1e22;
--ink-soft:#3a3d42;
--ash:#8b8b85;
--wall:#e6e2d8;
--wall-2:#ded9cd;
--wood:#7a5a3c;
--wood-dark:#5c422b;
--indigo:#31465c;
--indigo-deep:#26374a;
--cinnabar:#8e2f2a;
--cinnabar-deep:#6f221e;
--brass:#a8843f;
--line:rgba(60,52,40,.22);
--mono-num:"Songti SC","Georgia","Times New Roman",serif;
}
html {-webkit-text-size-adjust:100%}
body {
font-family:"Songti SC","SimSun","Noto Serif SC",Georgia,serif;
background:var(--wall);
color:var(--ink);
line-height:1.55;
font-size:15px;
background-image:
linear-gradient(rgba(120,110,92,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(120,110,92,.05) 1px,transparent 1px);
background-size:14px 14px;
}
img {display:block;max-width:100%}
a {color:inherit;text-decoration:none}
ul {list-style:none}
button, input, select {font:inherit;color:inherit}
h1, h2, h3 {font-weight:600;line-height:1.3}
.site-header {
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:6px 18px;
padding:10px 18px;
background:linear-gradient(180deg,var(--indigo-deep),var(--indigo));
border-bottom:2px solid var(--brass);
}
.header-brand {display:flex;align-items:baseline}
.site-name {
font-size:20px;
letter-spacing:.16em;
color:#efe9dc;
}
a[data-contract="site-name"] {
color:#efe9dc;
text-decoration:none;
border-bottom:1px solid transparent;
}
a[data-contract="site-name"]:hover {
color:#f6efdf;
border-bottom-color:var(--brass);
}
.category-bar {
display:flex;
flex-wrap:wrap;
gap:6px 10px;
align-items:center;
}
a.runtime-category {
white-space:nowrap;
font-size:13px;
color:#cfc9ba;
text-decoration:none;
padding:1px 8px;
border:1px solid rgba(168,132,63,.4);
border-radius:2px;
background:rgba(0,0,0,.12);
transition:background .15s,color .15s;
}
a.runtime-category:hover {
background:var(--cinnabar);
color:#f4ece0;
border-color:var(--cinnabar);
}
.movie-main {
max-width:1180px;
margin:0 auto;
padding:14px 16px 26px;
display:flex;
flex-direction:column;
gap:16px;
}
.section-heading {
font-size:15px;
letter-spacing:.22em;
color:var(--indigo-deep);
border-left:4px solid var(--cinnabar);
padding-left:9px;
margin-bottom:9px;
}
.overview-shell {
display:grid;
grid-template-columns:minmax(0,5fr) minmax(0,13fr);
gap:16px;
align-items:start;
background:
linear-gradient(180deg,rgba(255,253,247,.55),rgba(226,220,206,.55));
border:1px solid var(--line);
border-radius:3px;
padding:14px;
box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 6px 18px -12px rgba(28,30,34,.5);
}
.poster-column {display:flex;flex-direction:column;min-width:0}
.poster-frame {
position:relative;
border:1px solid var(--wood-dark);
border-radius:2px;
padding:6px;
background:linear-gradient(180deg,var(--wood),var(--wood-dark));
box-shadow:0 8px 20px -14px rgba(0,0,0,.7);
align-self:flex-start;
max-width:100%;
}
.poster-frame::after {
content:"";
position:absolute;
inset:6px;
border:1px solid rgba(232,222,200,.35);
pointer-events:none;
}
.poster-image {
width:100%;
height:auto;
aspect-ratio:9 / 16;
object-fit:cover;
display:block;
border:1px solid rgba(0,0,0,.35);
filter:saturate(.78) contrast(1.02);
}
.overview-body {
display:flex;
flex-direction:column;
gap:14px;
min-width:0;
}
.title-block {
position:relative;
padding:8px 10px 10px;
border-bottom:1px solid var(--line);
}
.movie-title {
font-size:clamp(20px,2.4vw,28px);
letter-spacing:.1em;
color:var(--indigo-deep);
}
.movie-tagline {
margin-top:5px;
font-size:13px;
color:var(--ink-soft);
letter-spacing:.06em;
border-left:2px solid var(--brass);
padding-left:8px;
}
.title-block::after {
content:"債據 · 民國十七年 · 青溪鎮 · 藥鋪銀三批 · 抵婚一紙";
display:block;
margin-top:9px;
font-size:9.5px;
letter-spacing:.32em;
color:rgba(90,80,62,.55);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.player-shell {
width:100%;
min-width:0;
background:var(--indigo-deep);
border:1px solid var(--wood-dark);
border-radius:3px;
padding:7px;
display:flex;
flex-direction:column;
gap:6px;
}
.movie-player {
width:100%;
aspect-ratio:16 / 9;
display:block;
background:#0d1319;
border:1px solid rgba(0,0,0,.5);
object-fit:cover;
}
.player-controls {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px;
}
.player-btn {
font-size:12px;
letter-spacing:.06em;
color:#e4ddce;
background:rgba(255,255,255,.06);
border:1px solid rgba(168,132,63,.45);
border-radius:2px;
padding:3px 9px;
cursor:pointer;
transition:background .15s,color .15s,border-color .15s;
}
.player-btn:hover {background:rgba(168,132,63,.28)}
.player-btn.is-active, .player-btn.click {
background:var(--cinnabar);
border-color:var(--cinnabar);
color:#f6eee1;
}
.player-btn.is-muted {color:var(--brass)}
.player-progress {
flex:1 1 120px;
min-width:80px;
height:4px;
-webkit-appearance:none;
appearance:none;
background:rgba(255,255,255,.18);
border-radius:2px;
cursor:pointer;
}
.player-progress::-webkit-slider-thumb {
-webkit-appearance:none;
width:11px;height:11px;border-radius:50%;
background:var(--brass);
border:1px solid #2b1f10;
}
.player-volume {
flex:0 1 74px;
min-width:56px;
height:4px;
-webkit-appearance:none;
appearance:none;
background:rgba(255,255,255,.18);
border-radius:2px;
cursor:pointer;
}
.player-volume::-webkit-slider-thumb {
-webkit-appearance:none;
width:10px;height:10px;border-radius:50%;
background:#cbb98f;
border:1px solid #2b1f10;
}
.player-speed {
font-size:12px;
background:rgba(255,255,255,.06);
color:#e4ddce;
border:1px solid rgba(168,132,63,.45);
border-radius:2px;
padding:2px 4px;
cursor:pointer;
}
.player-speed option {background:var(--indigo-deep);color:#e4ddce}
.player-shell.is-theater {background:#080c11}
.player-shell.is-lights-off {background:#04070a;border-color:#04070a}
.player-shell.is-lights-off .movie-player {filter:brightness(.92)}
.cast-strip {min-width:0}
.cast-list {
display:flex;
flex-wrap:wrap;
gap:6px 12px;
}
.cast-item {
display:grid;
grid-template-columns:auto auto;
grid-template-areas:"av actor" "av role";
align-items:center;
column-gap:7px;
padding:4px 8px 4px 4px;
border:1px solid var(--line);
border-radius:2px;
background:rgba(255,255,255,.35);
}
.cast-avatar {
grid-area:av;
width:30px;height:30px;
border-radius:50%;
background:
radial-gradient(circle at 50% 34%,rgba(255,255,255,.4),transparent 55%),
linear-gradient(160deg,var(--indigo),var(--wood-dark));
border:1px solid var(--brass);
box-shadow:0 0 0 2px rgba(122,90,60,.28);
position:relative;
}
.cast-avatar::after {
content:"";
position:absolute;
inset:5px;
border-radius:50%;
border:1px solid rgba(232,222,200,.4);
}
.cast-actor {
grid-area:actor;
font-size:13px;
letter-spacing:.06em;
color:var(--ink);
}
.cast-role {
grid-area:role;
font-size:11px;
color:var(--ash);
letter-spacing:.04em;
}
.synopsis-block {
min-width:0;
border-top:1px solid var(--line);
padding-top:11px;
}
.synopsis-body {
columns:2;
column-gap:22px;
column-rule:1px solid var(--line);
}
.synopsis-para {
font-size:13px;
line-height:1.75;
color:var(--ink-soft);
text-indent:2em;
margin-bottom:7px;
break-inside:avoid;
}
.episode-status {
border-top:1px solid var(--line);
padding-top:11px;
}
.status-line {
font-size:12.5px;
letter-spacing:.08em;
color:var(--ink-soft);
margin-bottom:6px;
}
.status-meter {
height:7px;
background:rgba(60,52,40,.16);
border:1px solid var(--line);
border-radius:2px;
overflow:hidden;
}
.status-fill {
display:block;
height:100%;
width:61%;
background:linear-gradient(90deg,var(--indigo),var(--cinnabar));
}
.detail-block {
border-top:1px solid var(--line);
padding-top:11px;
}
.detail-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
gap:0 18px;
align-items:start;
}
.detail-row {
display:flex;
gap:10px;
align-items:baseline;
padding:3px 0;
border-bottom:1px dotted var(--line);
}
.detail-key {
flex:0 0 62px;
font-size:12px;
color:var(--ash);
letter-spacing:.1em;
}
.detail-value {
font-size:12.5px;
color:var(--ink);
}
.detail-value::first-letter {font-family:var(--mono-num)}
.timeline-section {
border-top:2px solid var(--indigo);
padding-top:11px;
}
.timeline-track {
overflow-x:auto;
padding:4px 2px 10px;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
}
.timeline-list {
display:flex;
gap:0;
min-width:760px;
position:relative;
}
.timeline-list::before {
content:"";
position:absolute;
left:0;right:0;top:14px;
height:1px;
background:linear-gradient(90deg,transparent,var(--brass) 6%,var(--brass) 94%,transparent);
}
.timeline-node {
position:relative;
flex:1 1 0;
min-width:130px;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
padding:0 8px;
}
.node-coin {
width:26px;height:26px;
border-radius:50%;
background:radial-gradient(circle at 34% 30%,#d8bb74,var(--brass) 60%,#7d5f27);
border:1px solid #6b5122;
box-shadow:0 0 0 3px var(--wall),0 0 0 4px rgba(107,81,34,.45);
position:relative;
margin-bottom:8px;
z-index:1;
}
.node-coin::after {
content:"";
position:absolute;
inset:8px;
border-radius:50%;
border:1px solid rgba(60,42,12,.6);
}
.node-time {
font-family:var(--mono-num);
font-size:12px;
letter-spacing:.14em;
color:var(--indigo-deep);
}
.node-label {
font-size:11.5px;
line-height:1.5;
color:var(--ink-soft);
margin-top:3px;
}
.node-current .node-coin {
background:radial-gradient(circle at 34% 30%,#c4655c,var(--cinnabar) 60%,var(--cinnabar-deep));
border-color:var(--cinnabar-deep);
box-shadow:0 0 0 3px var(--wall),0 0 0 4px rgba(142,47,42,.5);
}
.node-current .node-time {color:var(--cinnabar)}
.node-current .node-label {color:var(--cinnabar-deep);font-weight:600}
.episodes-section {
border-top:2px solid var(--indigo);
padding-top:11px;
}
.episodes-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:9px;
align-items:start;
}
.episode-card {
border:1px solid var(--line);
border-left:3px solid var(--wood);
border-radius:2px;
background:linear-gradient(180deg,rgba(255,254,250,.7),rgba(226,220,206,.5));
padding:8px 10px 9px;
position:relative;
}
.episode-card::before {
content:"";
position:absolute;
right:7px;top:7px;
width:7px;height:7px;
border-radius:50%;
border:1px solid var(--brass);
}
.episode-current {
border-left-color:var(--cinnabar);
background:linear-gradient(180deg,rgba(142,47,42,.09),rgba(226,220,206,.5));
}
.episode-current::before {background:var(--cinnabar);border-color:var(--cinnabar-deep)}
.episode-head {
display:flex;
flex-wrap:wrap;
gap:4px 8px;
align-items:baseline;
}
.episode-number {
font-family:var(--mono-num);
font-size:12px;
letter-spacing:.1em;
color:var(--indigo);
}
.episode-title {
font-size:13.5px;
color:var(--ink);
letter-spacing:.05em;
}
.episode-meta {
font-size:10.5px;
color:var(--ash);
letter-spacing:.12em;
margin-top:2px;
}
.episode-summary {
font-size:12px;
line-height:1.65;
color:var(--ink-soft);
margin-top:5px;
max-height:0;
opacity:0;
overflow:hidden;
transition:max-height .28s ease,opacity .2s ease,margin-top .2s ease;
}
.episode-card:hover .episode-summary, .episode-card:focus-within .episode-summary {
max-height:140px;
opacity:1;
margin-top:6px;
}
.episode-current .episode-number {color:var(--cinnabar)}
.comments-section {
border-top:2px solid var(--indigo);
padding-top:11px;
}
.comments-columns {
columns:2;
column-gap:18px;
column-rule:1px solid var(--line);
}
.comments-col {break-inside:avoid}
.comment-item {
break-inside:avoid;
border-bottom:1px dotted var(--line);
padding:6px 0 7px;
}
.comment-nick {
font-size:11.5px;
letter-spacing:.1em;
color:var(--cinnabar);
}
.comment-nick::before {content:"「";opacity:.5}
.comment-nick::after {content:"」";opacity:.5}
.comment-text {
font-size:12px;
line-height:1.55;
color:var(--ink-soft);
margin-top:2px;
}
.recommend-region {
border-top:2px solid var(--indigo);
padding-top:11px;
}
.recommend-title {
font-size:14px;
letter-spacing:.3em;
color:var(--indigo-deep);
text-align:center;
writing-mode:vertical-rl;
margin:0 auto 10px;
padding:8px 0;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
max-height:180px;
}
.recommend-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:9px;
align-items:start;
}
.recommend-item {
min-width:0;
}
a.recommend-link {
display:flex;
flex-direction:column;
gap:4px;
height:100%;
padding:6px;
background:linear-gradient(180deg,rgba(255,254,250,.72),rgba(226,220,206,.5));
border:1px solid var(--line);
border-left:3px solid var(--wood);
border-radius:2px;
text-decoration:none;
color:var(--ink);
transition:border-color .15s,background .15s;
}
a.recommend-link:hover {
border-left-color:var(--cinnabar);
background:linear-gradient(180deg,rgba(142,47,42,.08),rgba(226,220,206,.5));
}
[data-runtime="recommendation"] img {
width:100%;
max-width:100%;
height:auto;
aspect-ratio:3 / 4;
object-fit:cover;
display:block;
filter:saturate(.75);
border:1px solid rgba(0,0,0,.28);
}
.recommend-pic {background:#cfc7b5}
.recommend-name {
font-size:12.5px;
letter-spacing:.05em;
color:var(--ink);
}
.recommend-blurb {
font-size:11px;
line-height:1.5;
color:var(--ash);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.site-footer {
border-top:2px solid var(--brass);
background:linear-gradient(180deg,var(--indigo),var(--indigo-deep));
color:#cfc9ba;
padding:14px 18px 18px;
display:flex;
flex-direction:column;
gap:9px;
}
.footer-disclaimer {
font-size:11px;
line-height:1.7;
letter-spacing:.04em;
color:rgba(207,201,186,.82);
max-width:900px;
}
.footer-nav {
display:flex;
flex-wrap:wrap;
gap:6px 16px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:12px;
letter-spacing:.14em;
color:#e6dfd0;
text-decoration:none;
border-bottom:1px solid transparent;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:var(--brass);
border-bottom-color:var(--brass);
}
.friend-links {
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:5px 12px;
border-top:1px dotted rgba(168,132,63,.35);
padding-top:9px;
}
.friend-links-label {
font-size:11px;
letter-spacing:.24em;
color:var(--brass);
}
a.runtime-friend-link {
font-size:11.5px;
letter-spacing:.04em;
color:rgba(207,201,186,.85);
text-decoration:none;
}
a.runtime-friend-link:hover {
color:#f0e8d8;
text-decoration:underline;
}
@media (max-width:900px){.overview-shell {grid-template-columns:minmax(0,1fr)}
.poster-column {align-items:flex-start}
.poster-frame {max-width:230px}
.synopsis-body {columns:1}
.comments-columns {columns:1}
.episodes-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){body {font-size:14px}
.site-header {padding:9px 12px;gap:5px 12px}
.movie-main {padding:11px 11px 20px;gap:13px}
.overview-shell {padding:11px;gap:12px}
.poster-frame {max-width:180px}
.synopsis-body {columns:1}
.timeline-list {min-width:640px}
.episodes-grid {grid-template-columns:minmax(0,1fr)}
.episode-summary {max-height:none;opacity:1;margin-top:6px}
.recommend-list {grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.recommend-title {writing-mode:horizontal-tb;letter-spacing:.22em;max-height:none}
.detail-list {grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.title-block::after {letter-spacing:.18em}
.player-controls {gap:5px}
.player-btn {padding:3px 7px;font-size:11.5px}
.cast-item {padding:3px 6px 3px 3px}
.recommend-list {grid-template-columns:repeat(2,minmax(0,1fr))}}

footer{text-align:center!important}
footer *{justify-content:center!important}
footer :is(div,nav,ul,ol,p,section,address){margin-left:auto!important;margin-right:auto!important}