.short-drama-page { padding-top: 60px; background: linear-gradient(122deg, #efff94 0%, #f6f6f4 38%, #efe9fb 68%, #d9c6ff 100%); }.section-space { padding: 12px 0; }.drama-hero { padding-top: 25px; }.drama-hero-panel, .feature-panel, .genre-panel, .product-panel, .closing-panel { border: 1px solid rgba(255,255,255,.7); border-radius: 40px; background: rgba(255,255,255,.72); box-shadow: 0 18px 45px rgba(76,57,98,.12); backdrop-filter: blur(12px); }.drama-hero-panel { min-height: 510px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 52px; align-items: center; padding: 58px 66px; }.drama-hero-copy h1 { max-width: 700px; margin: 0; font-size: clamp(42px, 5vw, 68px); line-height: .96; letter-spacing: 0; }.drama-hero-copy > p:not(.eyebrow) { max-width: 640px; margin: 24px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }.drama-screen { position: relative; min-height: 382px; display: grid; place-items: center; }.screen-orbit { position: absolute; border: 1px solid; border-radius: 50%; }.orbit-purple { width: 310px; height: 310px; border-color: rgba(168,85,247,.45); }.orbit-lime { width: 365px; height: 180px; border-color: rgba(212,255,0,.85); transform: rotate(-38deg); }.story-phone { position: relative; z-index: 2; width: 185px; height: 365px; padding: 17px 14px; overflow: hidden; border: 7px solid #141417; border-radius: 31px; background: linear-gradient(150deg, #353f87, #160d25 68%, #08090d); color: #fff; box-shadow: 0 25px 48px rgba(27,17,50,.27); transform: rotate(7deg); }.story-time { display: flex; justify-content: space-between; font-size: 9px; font-weight: 800; }.story-frame { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: end; padding: 26px 18px 32px; background: radial-gradient(circle at 72% 23%, #ffb2d6 0, rgba(255,178,214,.25) 16%, transparent 36%), linear-gradient(180deg, transparent, rgba(10,8,16,.8)); }.story-frame::before { content: ""; position: absolute; top: 75px; right: 27px; width: 50px; height: 120px; border-radius: 45px 45px 12px 12px; background: linear-gradient(145deg, #ffd1c0, #a66e8e 58%, #2c183f 59%); box-shadow: -72px 90px 0 -12px #40265a; }.story-frame span, .story-frame strong, .story-frame small { position: relative; z-index: 1; }.story-frame span { align-self: flex-start; padding: 4px 6px; background: var(--lime); color: var(--ink); font-size: 7px; font-weight: 900; }.story-frame strong { margin-top: 10px; font-size: 29px; line-height: .84; }.story-frame em { color: var(--lime); font-style: normal; }.story-frame small { margin-top: 9px; font-size: 7px; opacity: .7; }.story-progress { position: absolute; z-index: 2; right: 12px; bottom: 12px; left: 12px; height: 2px; background: rgba(255,255,255,.24); }.story-progress b { display: block; width: 58%; height: 100%; background: var(--lime); }.screen-note { position: absolute; z-index: 3; top: 28px; left: 5px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.78); border-radius: 16px; background: rgba(255,255,255,.76); box-shadow: var(--shadow-soft); font-size: 10px; font-weight: 800; line-height: 1.1; }.screen-note i { color: var(--purple); font-size: 19px; }.feature-panel, .genre-panel, .product-panel { padding: 50px 56px; }.section-intro { text-align: center; }.section-intro h2, .product-copy h2, .closing-panel h2 { max-width: 830px; margin: 0 auto; font-size: clamp(30px, 3.7vw, 48px); line-height: 1.05; letter-spacing: 0; }.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 38px; }.feature-card { min-height: 248px; padding: 26px; border: 1px solid rgba(255,255,255,.7); border-radius: 24px; background: rgba(255,255,255,.68); box-shadow: 0 10px 28px rgba(76,57,98,.08); transition: transform .3s ease-out, border-color .3s ease-out, box-shadow .3s ease-out; }.feature-card:hover { transform: translateY(-5px); border-color: rgba(168,85,247,.45); box-shadow: 0 16px 34px rgba(128,84,184,.14); }.feature-card > i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--purple); color: #fff; font-size: 18px; }.feature-card h3 { margin: 44px 0 10px; font-size: 19px; line-height: 1.2; }.feature-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }.genre-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 38px; }.genre-list span { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 18px; border: 1px solid rgba(255,255,255,.7); border-radius: 20px; background: rgba(255,255,255,.68); font-size: 16px; font-weight: 800; transition: transform .3s ease-out, border-color .3s ease-out; }.genre-list span:hover { transform: translateY(-3px); border-color: rgba(168,85,247,.45); }.genre-list i { color: var(--purple); font-size: 17px; }.product-panel { display: grid; grid-template-columns: .82fr 1.18fr; gap: 78px; align-items: center; }.product-copy h2 { margin: 0; }.product-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }.product-points span { display: flex; align-items: center; gap: 12px; padding: 17px; border: 1px solid rgba(255,255,255,.7); border-radius: 18px; background: rgba(255,255,255,.68); font-weight: 800; }.product-points span:last-child { grid-column: span 2; }.product-points b { color: var(--purple); font-size: 12px; }.closing-section { padding-bottom: 25px; }.closing-panel { display: flex; align-items: center; justify-content: space-between; gap: 42px; padding: 50px 56px; }.closing-panel h2 { margin: 0; }.closing-panel p { max-width: 720px; margin: 15px 0 0; color: var(--muted); font-size: 16px; }.closing-panel .button { flex: 0 0 auto; }
@media (max-width: 840px) { .short-drama-page { padding-top: 60px; }.drama-hero { padding-top: 18px; }.drama-hero-panel, .feature-panel, .genre-panel, .product-panel, .closing-panel { border-radius: 28px; }.drama-hero-panel { grid-template-columns: 1fr; gap: 34px; padding: 42px 24px; }.drama-screen { min-height: 330px; }.story-phone { transform: rotate(5deg) scale(.72); }.screen-note { left: 0; }.feature-panel, .genre-panel, .product-panel { padding: 34px 24px; }.feature-grid, .genre-list, .product-points { grid-template-columns: 1fr; }.feature-card { min-height: auto; }.feature-card h3 { margin-top: 28px; }.product-panel { gap: 34px; }.product-points span:last-child { grid-column: auto; }.closing-panel { align-items: flex-start; flex-direction: column; padding: 34px 24px; }.closing-panel .button { width: 100%; } }