/* My Saju K-Drama (/drama) · My Korean Name (/korean-name) */
.brush { font-family: 'Nanum Brush Script', var(--hangul); font-weight: 400; letter-spacing: 0; text-transform: none; }
.dl { display: block; font: 600 13px var(--sans); color: var(--ink-2); margin: 16px 0 7px; }
.dl:first-child { margin-top: 0; }
.dseg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.dseg button { appearance: none; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: 600 15px var(--sans); padding: 10px 16px; border-radius: 99px; cursor: pointer; }
.dseg button .ko { font-size: 14px; color: var(--gray); margin-left: 4px; }
.dseg button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dseg button.on .ko { color: #D9D1C3; }
.btn.big { font-size: 18px; padding: 17px 28px; width: 100%; margin-top: 18px; }

/* ---------- 드라마: 시작 화면 ---------- */
body.dark-page { background: #0B0A0F; }
body.dark-page .top { background: rgba(11,10,15,.92); border-bottom-color: #26232C; }
body.dark-page .top a, body.dark-page .brand { color: #F6F1E7; }
body.dark-page footer { background: #0B0A0F; color: #8C8478; border-top-color: #26232C; }
body.dark-page footer a, body.dark-page footer b { color: #CFC8BC; }
.drama { color: #F6F1E7; }
.dhero { position: relative; min-height: min(78vh, 680px); display: flex; align-items: flex-end; overflow: hidden; }
.dhero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: dkb 22s ease-out both; }
.dhero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,10,15,.2) 0%, rgba(11,10,15,.35) 45%, #0B0A0F 100%); }
.dhero-in { position: relative; z-index: 2; padding: 0 0 34px; }
.dhero .mono { color: #F2B632; }
.dhero h1 { font: 400 clamp(46px, 8vw, 92px)/1 var(--serif); margin: 10px 0 14px; color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.dhero h1 .brush { display: block; font-size: .62em; color: #FF6A55; margin-bottom: 6px; text-shadow: 0 0 22px rgba(232,58,58,.55); }
.dhero .lede { color: #E8E1D5; max-width: 34em; font-size: 18px; }
@keyframes dkb { from { transform: scale(1.12); } to { transform: scale(1); } }
.dform { display: grid; gap: 22px; padding: 6px 0 40px; }
.dsetup { background: #F6F1E7; color: var(--ink); max-width: 620px; }
.dpair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.dwho { min-height: 24px; margin: 14px 0 0; font-size: 15px; color: var(--ink-2); }
.dwho .ko { color: var(--gray); }
#d-err { color: var(--fire); margin: 8px 0 0; min-height: 1em; }
.dcast .mono { color: #B3AA9B; margin-bottom: 10px; }
.dcast-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dcast-row figure { margin: 0; position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 2 / 3; background: #18161C; }
.dcast-row img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: saturate(1.05); }
.dcast-row figcaption { position: absolute; inset: auto 0 0; padding: 26px 8px 8px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.85)); font-size: 12px; line-height: 1.25; }
.dcast-row figcaption b { display: block; color: #fff; }
.dcast-row figcaption span { color: #F2B632; font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.dhow { color: #E8E1D5; }
.dhow h2 { color: #fff; }
.dhow a { color: #F2B632; }
@media (max-width: 640px) {
  .dpair { grid-template-columns: 1fr; gap: 0; }
  .dcast-row { grid-template-columns: repeat(5, 44%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .dcast-row figure { scroll-snap-align: start; }
  .dhero { min-height: 70vh; }
}

/* ---------- 드라마: 1화 ---------- */
.dep { width: min(680px, 100%); margin: 0 auto; padding: 0 0 60px; }
.ephead { text-align: center; padding: 40px 20px 26px; }
.ephead .mono { color: #F2B632; }
.ephead h1 { font: 400 clamp(34px, 6vw, 54px)/1.08 var(--serif); margin: 14px 0 12px; color: #fff; }
.ephead h1 .brush { display: block; font-size: 1.05em; color: #FF6A55; margin-bottom: 4px; }
.ephead p { color: #CFC8BC; margin: 6px 0; }
.sc { margin: 0 0 44px; opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
.sc.in { opacity: 1; transform: none; }
.pn { position: relative; margin: 0; overflow: hidden; background: #15131A; }
.pn img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.pn.wide img { aspect-ratio: 3 / 2; }
.pn.sq img { aspect-ratio: 1; }
.sc.in .pn img { animation: dkb 16s ease-out both; }
.pn.you figcaption, .pn.next figcaption { position: absolute; inset: auto 0 0; padding: 70px 22px 22px; background: linear-gradient(180deg, transparent, rgba(11,10,15,.92)); display: grid; gap: 4px; }
.pn.you figcaption .mono, .pn.next figcaption .mono { color: #F2B632; }
.pn.you figcaption b { font: 400 clamp(36px, 7vw, 52px)/1.05 var(--serif); color: #fff; }
.pn.you figcaption > span:last-child { color: #E8E1D5; font-size: 16px; }
.pn.you figcaption .ko { color: #FFB8A8; }
.nr { margin: 18px 20px 0; padding: 14px 18px; border-left: 2px solid #F2B632; background: rgba(255,255,255,.04); font: italic 400 21px/1.5 var(--serif); color: #F3ECDF; }
.sb { display: flex; gap: 10px; align-items: flex-end; margin: 14px 20px 0; }
.sb .av { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 2px solid #F2B632; background: #222; }
.sb .av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; transform: scale(1.5); transform-origin: 50% 20%; }
.sb p { position: relative; margin: 0; background: #FFFDF8; color: #18161A; padding: 12px 16px; border-radius: 18px 18px 18px 4px; font: 500 17px/1.45 var(--sans); max-width: 86%; box-shadow: 0 10px 24px -16px rgba(0,0,0,.8); }
.sb p b { display: block; font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #8E2C48; margin-bottom: 3px; }
.sb.li p { background: #FFF1EC; }
.dcard { margin: 18px 20px 0; padding: 18px 20px; border-radius: 14px; background: #F6F1E7; color: #18161A; box-shadow: 0 16px 40px -24px rgba(0,0,0,.9); }
.dcard .mono { color: #8E2C48; }
.dcard p { margin: 8px 0 0; font-size: 16px; line-height: 1.55; }
.dcard .small { font-size: 14px; color: #3D3A40; }
.dbig { font: 400 30px/1.15 var(--serif); margin-top: 6px; }
.dbig .han { color: #E0452B; }
.dbig .ko { font-size: 18px; color: #77716A; }
.dcard.gold { background: linear-gradient(180deg, #FFF6DD, #F6E7C1); }
.dcard.dark { background: #1D1A22; color: #E8E1D5; border: 1px solid #3A3542; }
.dcard.dark .mono { color: #F2B632; }
.dbars { display: grid; gap: 6px; margin-top: 10px; }
.dbars div { display: grid; grid-template-columns: 112px 1fr 40px; align-items: center; gap: 8px; font-size: 13px; color: #3D3A40; }
.dbars b { height: 10px; border-radius: 9px; display: block; }
.dbars em { font-style: normal; font: 500 12px var(--mono); text-align: right; }
.dbars .need span { color: #E0452B; font-weight: 700; }
.dbars .need b { outline: 2px solid #E0452B; outline-offset: 2px; }
.dletter { margin: 18px 20px 0; padding: 26px 26px 20px; background: #F8F1E1; color: #2A241E; border-radius: 4px; box-shadow: 0 18px 40px -22px rgba(0,0,0,.9); border-top: 3px solid #C8372D; }
.dletter p { margin: 0; font: italic 400 24px/1.45 var(--serif); }
.dletter span { display: block; margin-top: 12px; text-align: right; font: 500 14px var(--sans); color: #77716A; }
.dend { padding: 0 0 10px; }
.tbc { text-align: center; padding: 10px 0 22px; }
.tbc .brush { display: block; font-size: 54px; color: #FF6A55; }
.tbc span:last-child { font: 600 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #B3AA9B; }
.pn.next img { filter: blur(7px) brightness(.62) saturate(1.1); transform: scale(1.06); }
.pn.next figcaption b { font: 400 34px/1.1 var(--serif); color: #fff; }
.pn.next figcaption > span:last-child { color: #E8E1D5; font-size: 15px; }
.dwait { margin: 22px 20px 0; padding: 18px 20px; border-radius: 14px; background: #1D1A22; border: 1px solid #3A3542; }
.dwait label b { display: block; color: #fff; font-size: 18px; }
.dwait label span { display: block; color: #B3AA9B; font-size: 14px; margin-top: 2px; }
.dwait .row { display: flex; gap: 8px; margin-top: 12px; }
.dwait input { flex: 1; min-width: 0; }
.dwait .btn { padding: 13px 18px; white-space: nowrap; }
.dend > .ctas { margin: 18px 20px 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dend .btn.ghost { color: #F6F1E7; border-color: #5A5462; }
.dxsell { margin: 26px 20px 0; display: grid; gap: 10px; }
.dxsell .mono { color: #B3AA9B; }
.xs { display: block; padding: 16px 18px; border-radius: 14px; background: #F6F1E7; color: #18161A; text-decoration: none; }
.xs b { display: block; font-size: 17px; }
.xs span { display: block; font-size: 14px; color: #77716A; margin-top: 2px; }
.dend > .small { margin: 22px 20px 0; color: #8C8478; }
.dep .nr + .nr { margin-top: 10px; }

/* 장면 효과 (가볍게, 움직임 줄이기 설정이면 끔) */
.fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fx i { position: absolute; display: block; border-radius: 50%; opacity: 0; }
.fx-lanterns i { width: 10px; height: 14px; border-radius: 40%; background: radial-gradient(circle, #FFD79A, rgba(255,140,60,.2) 70%, transparent); bottom: -20px; animation: dlantern 9s linear infinite; }
.fx-dust i { width: 3px; height: 3px; background: rgba(255,240,210,.85); animation: ddrift 7s ease-in-out infinite; }
.fx-stars i { width: 3px; height: 3px; background: #fff; box-shadow: 0 0 6px #fff; animation: dtwinkle 3.2s ease-in-out infinite; }
.fx i:nth-child(1) { left: 6%; top: 18%; animation-delay: 0s; } .fx i:nth-child(2) { left: 14%; top: 62%; animation-delay: 1.1s; }
.fx i:nth-child(3) { left: 22%; top: 34%; animation-delay: 2.3s; } .fx i:nth-child(4) { left: 31%; top: 76%; animation-delay: .6s; }
.fx i:nth-child(5) { left: 39%; top: 12%; animation-delay: 3.1s; } .fx i:nth-child(6) { left: 47%; top: 48%; animation-delay: 1.7s; }
.fx i:nth-child(7) { left: 55%; top: 26%; animation-delay: 4.2s; } .fx i:nth-child(8) { left: 63%; top: 70%; animation-delay: 2.8s; }
.fx i:nth-child(9) { left: 71%; top: 16%; animation-delay: .3s; } .fx i:nth-child(10) { left: 78%; top: 54%; animation-delay: 3.6s; }
.fx i:nth-child(11) { left: 85%; top: 30%; animation-delay: 1.4s; } .fx i:nth-child(12) { left: 91%; top: 80%; animation-delay: 5s; }
.fx i:nth-child(13) { left: 10%; top: 88%; animation-delay: 2s; } .fx i:nth-child(14) { left: 60%; top: 92%; animation-delay: 4.6s; }
.fx-lanterns i { top: auto; }
@keyframes dlantern { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .9; } 100% { transform: translateY(-520px) translateX(18px); opacity: 0; } }
@keyframes ddrift { 0%, 100% { transform: translate(0, 0); opacity: 0; } 50% { transform: translate(14px, -18px); opacity: .9; } }
@keyframes dtwinkle { 0%, 100% { opacity: 0; } 50% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .fx { display: none; } .sc { opacity: 1; transform: none; transition: none; } .sc.in .pn img, .dhero-bg { animation: none; } }

/* ---------- 한국 이름 ---------- */
.kn h1 { font: 400 clamp(40px, 6vw, 64px)/1.05 var(--serif); margin: 10px 0 12px; }
.kn-form { max-width: 620px; margin: 18px 0 8px; }
.kn-form .dseg button { font-size: 14px; padding: 9px 14px; }
.kres { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 28px; margin: 26px 0 10px; align-items: start; }
.kcard { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 9 / 13; background: #2A1F17 var(--bg) center / cover; box-shadow: var(--shadow); display: grid; place-items: center; padding: 34px 26px; }
.kpaper { position: relative; width: 100%; height: 100%; background: rgba(250,245,232,.95); box-shadow: 0 20px 40px -18px rgba(0,0,0,.7); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 22px 16px; }
.kpaper .mono { color: #8E2C48; }
.kko { font: 400 clamp(76px, 15vw, 118px)/1 'Nanum Brush Script', var(--hangul); color: #18161A; margin: 14px 0 6px; }
.khan { font: 900 38px/1.1 var(--han); color: #3D3A40; letter-spacing: .08em; }
.ken { font: italic 400 32px/1.2 var(--serif); margin-top: 10px; }
.kwest { font-size: 13px; color: var(--gray); margin-top: 2px; }
.seal { position: absolute; right: 18px; bottom: 18px; width: 74px; height: 74px; background: #C8372D; color: #FAF5E8; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-auto-flow: column; direction: rtl; place-items: center; font: 900 25px/1 var(--han); border-radius: 4px; transform: rotate(-3deg); box-shadow: inset 0 0 0 3px rgba(250,245,232,.5); }
.kinfo h2 { font: 400 30px var(--serif); margin: 18px 0 8px; }
.kinfo p { font-size: 17px; line-height: 1.65; }
.kwhy { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.kwhy li { display: grid; grid-template-columns: 54px 1fr; align-items: center; column-gap: 12px; font-size: 16px; line-height: 1.5; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.kch { font: 900 38px/1 var(--han); color: #8E2C48; text-align: center; }
.kel { display: inline-block; font: 600 11px var(--mono); letter-spacing: .08em; border: 1px solid; border-radius: 99px; padding: 2px 8px; margin-left: 4px; white-space: nowrap; }
.kpure { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: #FFF6DD; border: 1px solid #EAD9A8; }
.kpure p { margin: 6px 0 0; font-size: 16px; }
.kpure b.ko { font-size: 22px; }
.kalts { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kalts .mono { flex-basis: 100%; }
.kalts > span { background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; font-size: 14px; }
.kalts .han { color: var(--gray); margin-left: 4px; }
.kdrama { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; margin-top: 22px; padding: 10px; border-radius: 16px; background: #0B0A0F; color: #F6F1E7; text-decoration: none; box-shadow: var(--shadow); }
.kdrama img { width: 110px; height: 140px; object-fit: cover; border-radius: 10px; }
.kdrama b { display: block; font: 400 24px/1.15 var(--serif); color: #fff; }
.kdrama span span { display: block; font-size: 14px; color: #CFC8BC; margin-top: 4px; }
@media (max-width: 760px) {
  .kres { grid-template-columns: 1fr; }
  .kcard { max-width: 420px; width: 100%; margin: 0 auto; }
}