.reader-start { padding: 32px 0 12px; }
.reader-start-card { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.72fr); gap:28px; align-items:center; overflow:hidden; padding:clamp(22px,4vw,42px); border:1px solid rgba(202,154,75,.3); border-radius:20px; background:linear-gradient(135deg,#fff 0%,#fff9ec 55%,#f2e3c5 100%); box-shadow:0 22px 58px rgba(44,32,22,.13); }
.reader-start-card::before { content:""; position:absolute; width:220px; height:220px; top:-130px; left:-90px; border:38px solid rgba(172,112,39,.08); border-radius:50%; pointer-events:none; }
.reader-start h2 { margin:0 0 12px; font-size:clamp(1.45rem,3vw,2.1rem); }
.reader-start p { margin:0; line-height:1.9; }
.reader-start ul { margin:18px 0 0; padding-left:1.25rem; }
.reader-start li + li { margin-top:8px; }
.reader-visual { position:relative; overflow:hidden; min-height:240px; border-radius:14px; background:#17231f; }
.reader-visual > img { width:100%; height:100%; min-height:240px; object-fit:cover; }
.reader-visual-caption { position:absolute; inset:auto 14px 14px; padding:9px 12px; color:#fff; background:rgba(13,18,16,.82); font-size:.76rem; }
.reader-choice-section { padding:28px 0 52px; }
.reader-choice-heading { max-width:760px; margin-bottom:22px; }
.reader-choice-heading h2 { margin:0 0 8px; }
.reader-choice-heading p { margin:0; color:#5f635e; }
.reader-choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.reader-choice-card { overflow:hidden; border:1px solid rgba(93,64,39,.16); border-radius:16px; background:#fff; box-shadow:0 12px 32px rgba(44,32,22,.08); transition:transform .22s ease,box-shadow .22s ease; }
.reader-choice-card:hover { transform:translateY(-5px); box-shadow:0 22px 44px rgba(44,32,22,.16); }
.reader-choice-card .drama-recommend-visual { width:100%; min-height:0; aspect-ratio:16/9; }
.reader-choice-body { padding:18px; }
.reader-choice-body > span { color:#7b5a30; font-size:.7rem; font-weight:700; letter-spacing:.08em; }
.reader-choice-body h3 { margin:7px 0 8px; font-size:1.08rem; }
.reader-choice-body p { margin:0; color:#555c57; font-size:.86rem; line-height:1.75; }
.reader-choice-body a { display:inline-block; margin-top:13px; padding:9px 13px; border-radius:7px; background:#803f2a; color:#fff; font-weight:700; text-decoration:none; }
.reader-choice-body a:hover { background:#a25332; }
.reader-portrait-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:22px 0 28px; }
.reader-portrait { display:grid; grid-template-columns:118px minmax(0,1fr); overflow:hidden; border:1px solid rgba(93,64,39,.16); border-radius:14px; background:#fff; }
.reader-portrait img { width:118px; height:100%; min-height:150px; object-fit:cover; object-position:center top; }
.reader-portrait div { padding:17px; }
.reader-portrait h3 { margin:0 0 7px; }
.reader-portrait p { margin:0; color:#5f635e; font-size:.84rem; line-height:1.7; }
.reader-note { margin:24px 0; padding:18px 20px; border-left:4px solid #9c7138; background:#f8f1e6; }
.reader-note strong { display:block; margin-bottom:5px; }
.reader-detail-links { display:flex; flex-wrap:wrap; gap:9px; margin:20px 0 6px; }
.reader-detail-links a { display:inline-flex; align-items:center; min-height:42px; padding:9px 13px; border:1px solid #c99a58; border-radius:999px; background:#fffaf0; color:#633b24; font-size:.82rem; font-weight:750; line-height:1.35; text-decoration:none; transition:background .18s ease,color .18s ease,transform .18s ease; }
.reader-detail-links a::after { content:" →"; margin-left:5px; }
.reader-detail-links a:hover { transform:translateY(-2px); background:#803f2a; color:#fff; }
@media (max-width:760px) { .reader-start-card { grid-template-columns:1fr; } .reader-choice-grid { grid-template-columns:1fr; } .reader-portrait-row { grid-template-columns:1fr; } }
@media (max-width:440px) { .reader-portrait { grid-template-columns:92px minmax(0,1fr); } .reader-portrait img { width:92px; } }
@media (prefers-reduced-motion:reduce) { .reader-choice-card { transition:none; } .reader-choice-card:hover { transform:none; } }
@media (max-width:440px) { .reader-detail-links { display:grid; grid-template-columns:1fr; } .reader-detail-links a { justify-content:space-between; border-radius:9px; } }