/* 3부 화면: 타이틀 · 프롤로그 · 따라 하기 · 대화 · 계승 연출 · 다시 만든 창. ui2.css(남색 + 금)의 색을 그대로 쓴다. */
kbd { display: inline-block; min-width: 22px; padding: 1px 6px; margin: 0 2px; border-radius: 5px; background: linear-gradient(#3a4266, #1c2240); border: 1px solid #6b76a8; border-bottom-width: 3px; color: #f4f6ff; font: 800 12px var(--font); text-align: center; line-height: 18px; vertical-align: 1px; }
.mute { color: #8f99bb; font-size: 12.5px; }
body.critflash #c { filter: brightness(1.5) saturate(1.3); }
body.hitstop #c { filter: brightness(1.16) contrast(1.06); }

/* ---------- 타이틀 ---------- */
#login.title { position: fixed; inset: 0; z-index: 60; background: #05070f; overflow: hidden; display: block; padding: 0; }
#login.title .tbg { position: absolute; inset: -4%; background: url(../assets/img/art/title.jpg) center 40% / cover no-repeat; animation: tzoom 38s ease-in-out infinite alternate; }
#login.title .tbg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 30%, rgba(5,7,15,0) 30%, rgba(5,7,15,.82) 100%), linear-gradient(rgba(5,7,15,.55), rgba(5,7,15,0) 30%, rgba(5,7,15,0) 55%, rgba(5,7,15,.92)); }
@keyframes tzoom { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.09) translate(-1.2%, -1.4%); } }
#login.title .tfx { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(2px 2px at 12% 80%, #ffd98a, transparent), radial-gradient(2px 2px at 28% 62%, #9fe6ff, transparent), radial-gradient(3px 3px at 44% 88%, #ffd98a, transparent), radial-gradient(2px 2px at 61% 70%, #fff3c4, transparent), radial-gradient(2px 2px at 77% 84%, #9fe6ff, transparent), radial-gradient(3px 3px at 90% 66%, #ffd98a, transparent), radial-gradient(2px 2px at 36% 96%, #fff, transparent), radial-gradient(2px 2px at 69% 94%, #ffd98a, transparent); background-size: 100% 60%; background-repeat: repeat-y; animation: trise 16s linear infinite; opacity: .85; }
@keyframes trise { from { background-position: 0 0; } to { background-position: 0 -60vh; } }
.tlogo { position: absolute; left: 0; right: 0; top: 11vh; text-align: center; color: #fff; animation: tin 1.6s ease-out both; }
.tlogo small { display: block; font: 600 clamp(13px, 1.3vw, 18px) var(--serif); letter-spacing: .5em; color: #cfe6ff; text-shadow: 0 0 18px #2f7fff, 0 2px 4px #000; margin-bottom: 14px; }
.tlogo h1 { margin: 0; font: 900 clamp(46px, 7.4vw, 118px) var(--serif); letter-spacing: .08em; background: linear-gradient(#fffbe8 10%, #f3d27a 48%, #b07a1c 78%, #6d4a10); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 2px rgba(0,0,0,.9)) drop-shadow(0 0 34px rgba(255,190,80,.5)); }
.tlogo i { display: block; width: min(520px, 46vw); height: 2px; margin: 16px auto 14px; background: linear-gradient(90deg, transparent, #e0b44c, #fff3c4, #e0b44c, transparent); box-shadow: 0 0 16px #e0b44c; }
.tlogo p { margin: 0; font: 600 clamp(13px, 1.25vw, 17px) var(--font); color: #e8ecf8; text-shadow: 0 2px 6px #000; letter-spacing: .12em; }
@keyframes tin { from { opacity: 0; transform: translateY(-18px); letter-spacing: .3em; } to { opacity: 1; transform: none; } }
#tMenu { position: absolute; left: 50%; bottom: 15vh; transform: translateX(-50%); display: flex; flex-direction: column; gap: 12px; width: min(340px, 80vw); animation: tin2 1.2s .7s ease-out both; }
@keyframes tin2 { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.tbtn { position: relative; padding: 13px 20px; font: 800 18px var(--serif); letter-spacing: .25em; color: #fff3d0; background: linear-gradient(90deg, rgba(10,14,30,0), rgba(18,26,56,.92) 18%, rgba(18,26,56,.92) 82%, rgba(10,14,30,0)); border: 0; border-top: 1px solid rgba(224,180,76,.75); border-bottom: 1px solid rgba(224,180,76,.75); border-radius: 0; text-shadow: 0 2px 4px #000; transition: .18s; }
.tbtn:hover { color: #fff; letter-spacing: .34em; background: linear-gradient(90deg, rgba(10,14,30,0), rgba(60,90,170,.9) 18%, rgba(60,90,170,.9) 82%, rgba(10,14,30,0)); box-shadow: 0 0 34px rgba(90,150,255,.45); filter: none; }
.tbtn.sub { font-size: 14px; padding: 8px 20px; color: #c9d2ee; border-color: rgba(152,162,196,.4); }
#regCard { position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%); width: min(560px, 92vw); margin: 0; background: radial-gradient(120% 90% at 50% 0%, rgba(28,36,66,.96), rgba(13,17,34,.97) 62%); border: 1px solid #8a6a22; border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(224,180,76,.2), 0 30px 90px rgba(0,0,0,.8); color: #e8ecf8; padding: 20px 26px 16px; animation: tin2 .35s ease-out both; }
#regCard h2 { margin: 0 0 12px; font: 800 20px var(--serif); color: #f6e7b8; letter-spacing: .1em; } #regCard h2 small { font: 500 12px var(--font); color: #98a2c4; margin-left: 10px; letter-spacing: 0; }
#regCard label { display: block; font-size: 13px; color: #b9c2e0; } #regCard input#name { display: block; width: 100%; margin-top: 5px; padding: 10px 12px; font: 700 17px var(--font); color: #fff; background: rgba(6,8,18,.7); border: 1px solid #5a6692; border-radius: 6px; outline: 0; } #regCard input#name:focus { border-color: #e0b44c; box-shadow: 0 0 0 3px rgba(224,180,76,.2); }
#regCard .looks { display: flex; gap: 12px; margin: 14px 0 6px; align-items: stretch; } #regCard .look { flex: 1; display: flex; gap: 10px; align-items: center; padding: 8px 10px; text-align: left; background: rgba(8,10,22,.6); border: 1px solid #47507a; border-radius: 8px; color: #dfe5f6; } #regCard .look img { width: 64px; height: 64px; border-radius: 6px; object-fit: cover; object-position: 50% 8%; } #regCard .look b { display: block; font-size: 15px; } #regCard .look small { color: #98a2c4; font-weight: 500; }
#regCard .look.on { border-color: #e0b44c; background: rgba(60,48,16,.55); box-shadow: 0 0 18px rgba(224,180,76,.3); color: #fff; }
#regCard .hue { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #b9c2e0; } #regCard .hue input { flex: 1; }
#regCard .acts { display: flex; gap: 10px; margin-top: 14px; } #regCard #go { flex: 1; padding: 11px; font: 800 17px var(--serif); letter-spacing: .2em; background: linear-gradient(#e9c160, #a9781c); border: 1px solid #ffe9a8; color: #2a1c04; border-radius: 6px; } #regCard #tBack { background: rgba(8,10,22,.6); color: #c9d2ee; border: 1px solid #47507a; }
#regCard .tiny { font-size: 12px; color: #98a2c4; margin: 10px 0 0; } #loginMsg { color: #ffb38a !important; min-height: 16px; }
.tfoot { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 12px; color: rgba(200,210,240,.55); letter-spacing: .08em; }

/* ---------- 프롤로그 ---------- */
#story { position: fixed; inset: 0; z-index: 70; background: #000; cursor: pointer; transition: opacity .7s; } #story.out { opacity: 0; }
#stImgs { position: absolute; inset: 0; overflow: hidden; }
.simg { position: absolute; inset: -5%; background: center / cover no-repeat; animation: sfade 1.3s ease-out both, kb0 14s ease-out both; }
.simg.k1 { animation-name: sfade, kb1; } .simg.k2 { animation-name: sfade, kb2; } .simg.k3 { animation-name: sfade, kb3; }
@keyframes sfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kb0 { from { transform: scale(1.12) translate(2%, 1%); } to { transform: scale(1) translate(0, 0); } }
@keyframes kb1 { from { transform: scale(1) translate(-2%, 0); } to { transform: scale(1.1) translate(1.5%, -1%); } }
@keyframes kb2 { from { transform: scale(1.1) translate(-2%, -1.5%); } to { transform: scale(1.02) translate(1%, 1%); } }
@keyframes kb3 { from { transform: scale(1.02) translate(0, 2%); } to { transform: scale(1.12) translate(0, -1.5%); } }
#story .bars { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(#000 0, #000 7%, rgba(0,0,0,0) 17%, rgba(0,0,0,0) 83%, #000 93%, #000 100%), radial-gradient(70% 34% at 50% 50%, rgba(0,0,0,.5), rgba(0,0,0,0) 100%); }
/* 글은 화면 한가운데(진행자 지시). 읽히도록 뒤에 옅은 어둠 띠를 깐다 */
#stCap { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 3; text-align: center; padding: 30px 8vw; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.5) 22%, rgba(0,0,0,.5) 78%, rgba(0,0,0,0)); }
#stCap p { display: inline-block; margin: 0; font: 700 clamp(22px, 2.8vw, 42px) var(--serif); color: #fff; line-height: 1.6; letter-spacing: .04em; text-shadow: 0 2px 10px #000, 0 0 30px rgba(0,0,0,.9); min-height: 1.6em; }
#stCap p.in { animation: capin .5s ease-out both; } @keyframes capin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#stDots { position: absolute; left: 0; right: 0; bottom: 5.5vh; z-index: 3; display: flex; justify-content: center; gap: 8px; } #stDots i { width: 26px; height: 3px; background: rgba(255,255,255,.22); border-radius: 2px; } #stDots i.d { background: rgba(224,180,76,.7); } #stDots i.on { background: #fff3c4; box-shadow: 0 0 10px #e0b44c; }
#stSkip { position: absolute; right: 26px; top: 22px; z-index: 4; background: rgba(0,0,0,.45); color: #dfe5f6; border: 1px solid rgba(255,255,255,.3); padding: 7px 14px; border-radius: 20px; font-size: 13px; } #stHint { position: absolute; right: 28px; bottom: 5vh; z-index: 4; font-style: normal; font-size: 12px; color: rgba(255,255,255,.55); animation: blink 1.6s infinite; } @keyframes blink { 50% { opacity: .3; } }

/* ---------- 따라 하기 ---------- */
#coach { position: fixed; left: 50%; top: 92px; transform: translateX(-50%); z-index: 22; width: min(470px, 86vw); padding: 10px 16px 12px; color: #e8ecf8; background: linear-gradient(rgba(16,22,46,.95), rgba(10,14,30,.92)); border: 1px solid rgba(224,180,76,.7); border-radius: 10px; box-shadow: 0 10px 34px rgba(0,0,0,.6), 0 0 0 3px rgba(224,180,76,.12); pointer-events: auto; }
#coach.pop { animation: cpop .45s cubic-bezier(.2,1.5,.4,1) both; } @keyframes cpop { from { transform: translateX(-50%) scale(.9); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
#coach .hd { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: #e0b44c; letter-spacing: .1em; } #coach .hd span { flex: 1; display: flex; gap: 4px; } #coach .hd span i { width: 16px; height: 3px; background: rgba(255,255,255,.18); border-radius: 2px; } #coach .hd span i.d { background: #63e08a; } #coach .hd span i.on { background: #ffe27a; box-shadow: 0 0 8px #e0b44c; } #coach .hd button { padding: 0 6px; background: none; border: 0; color: #98a2c4; }
#coach h3 { margin: 5px 0 3px; font: 800 19px var(--serif); color: #fff3c4; } #coach p { margin: 0; font-size: 14px; line-height: 1.6; } #coach .bar { height: 5px; margin-top: 8px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; } #coach .bar i { display: block; height: 100%; background: linear-gradient(90deg, #e0b44c, #fff3c4); transition: width .25s; }

/* ---------- 대화 ---------- */
#dlg { position: fixed; left: 50%; bottom: 168px; transform: translateX(-50%); z-index: 31; width: min(900px, 92vw); display: flex; align-items: flex-end; pointer-events: auto; cursor: pointer; }
#dlgPt { width: 276px; height: 368px; object-fit: cover; object-position: 50% 12%; border-radius: 12px 12px 0 12px; border: 2px solid #8a6a22; box-shadow: 0 0 0 1px #000, 0 14px 40px rgba(0,0,0,.7); margin-right: -26px; z-index: 2; background: #0b1020; -webkit-mask-image: linear-gradient(#000 78%, rgba(0,0,0,.75)); mask-image: linear-gradient(#000 78%, rgba(0,0,0,.75)); }
#dlgPt.in { animation: ptin .32s ease-out both; } @keyframes ptin { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
#dlg.nopt #dlgPt { display: none; } #dlg.nopt #dlgBox { padding-left: 26px; }
#dlgBox { flex: 1; position: relative; min-height: 112px; padding: 16px 26px 20px 46px; background: linear-gradient(rgba(18,24,48,.96), rgba(9,12,26,.96)); border: 1px solid #8a6a22; border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(224,180,76,.14), 0 14px 40px rgba(0,0,0,.7); color: #f1f4ff; }
#dlgName { position: absolute; left: 40px; top: -17px; display: flex; align-items: baseline; gap: 10px; padding: 4px 16px; background: linear-gradient(#e9c160, #a9781c); border-radius: 5px; box-shadow: 0 3px 10px rgba(0,0,0,.6); } #dlgName:empty { display: none; } #dlgName b { font: 800 17px var(--serif); color: #24180a; } #dlgName small { font-size: 11.5px; color: #4a3610; font-weight: 700; }
#dlgText { margin: 8px 0 0; font-size: 18px; line-height: 1.7; min-height: 2.6em; text-shadow: 0 1px 2px #000; } #dlgBox em { position: absolute; right: 16px; bottom: 8px; font-style: normal; font-size: 11px; color: #e0b44c; animation: blink 1.4s infinite; }
#dlg.narr #dlgBox { text-align: center; background: linear-gradient(90deg, rgba(9,12,26,0), rgba(9,12,26,.93) 14%, rgba(9,12,26,.93) 86%, rgba(9,12,26,0)); border: 0; border-top: 1px solid rgba(224,180,76,.6); border-bottom: 1px solid rgba(224,180,76,.6); border-radius: 0; box-shadow: none; } #dlg.narr #dlgText { font-family: var(--serif); font-style: italic; color: #f6e7b8; }
#dlg.gold #dlgBox { border-color: #ffe27a; box-shadow: inset 0 0 0 2px rgba(255,226,122,.3), 0 0 50px rgba(255,200,90,.35); } #dlg.gold #dlgText { color: #fff3c4; font-family: var(--serif); font-size: 21px; }

/* ---------- 계승 연출 ---------- */
#learn { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: radial-gradient(60% 60% at 50% 46%, rgba(20,16,4,.5), rgba(3,4,10,.86)); cursor: pointer; overflow: hidden; }
#learn.go { animation: lfade .35s ease-out both; } @keyframes lfade { from { opacity: 0; } to { opacity: 1; } }
#learn .rays { position: absolute; left: 50%; top: 46%; width: 220vmax; height: 220vmax; margin: -110vmax; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 22%, transparent) 0 5deg, transparent 5deg 14deg); -webkit-mask-image: radial-gradient(closest-side, #000 0, rgba(0,0,0,.5) 22%, transparent 46%); mask-image: radial-gradient(closest-side, #000 0, rgba(0,0,0,.5) 22%, transparent 46%); animation: spin 26s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#learn .lc { position: relative; text-align: center; color: #fff; width: min(760px, 92vw); }
#learn .ring { position: absolute; left: 50%; top: 82px; width: 330px; height: 330px; margin: -165px; background: url(../assets/img/ui/ring.jpg) center / contain no-repeat; mix-blend-mode: screen; animation: spin 18s linear infinite reverse; opacity: .9; }
#learn .ic { position: relative; width: 164px; height: 164px; margin: 0 auto 18px; border-radius: 22px; background: center / cover; border: 3px solid var(--c); box-shadow: 0 0 0 2px #000, 0 0 60px var(--c), 0 0 140px color-mix(in srgb, var(--c) 60%, transparent); }
#learn.go .ic { animation: icin .7s cubic-bezier(.2,1.6,.3,1) both; } @keyframes icin { from { transform: scale(2.4) rotate(-14deg); opacity: 0; filter: brightness(4); } to { transform: none; opacity: 1; filter: none; } }
#learn .how { display: block; font: 700 14px var(--font); letter-spacing: .4em; color: var(--c); text-shadow: 0 2px 4px #000; }
#learn h1 { margin: 6px 0 8px; font: 900 clamp(40px, 5.4vw, 74px) var(--serif); letter-spacing: .12em; background: linear-gradient(#fff, #fff3c4 45%, var(--c)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 2px #000) drop-shadow(0 0 24px color-mix(in srgb, var(--c) 70%, transparent)); }
#learn.go h1 { animation: h1in .6s .25s ease-out both; } @keyframes h1in { from { opacity: 0; letter-spacing: .5em; } to { opacity: 1; } }
#learn p { margin: 0 auto 12px; max-width: 560px; font-size: 16px; line-height: 1.6; color: #e8ecf8; text-shadow: 0 1px 3px #000; }
#learn .meta { display: flex; justify-content: center; gap: 10px; font-size: 13px; } #learn .meta span { padding: 4px 12px; background: rgba(8,10,22,.75); border: 1px solid rgba(224,180,76,.4); border-radius: 14px; }
#learn .morehd { margin: 22px 0 10px; font: 700 15px var(--serif); color: #fff3c4; letter-spacing: .06em; } #learn .more { display: flex; justify-content: center; gap: 14px; }
#learn .mc { position: relative; width: 150px; padding: 12px 8px 10px; background: linear-gradient(rgba(30,37,66,.92), rgba(14,18,36,.92)); border: 1px solid rgba(224,180,76,.55); border-radius: 10px; animation: mcin .5s ease-out both; } #learn .mc:nth-child(1) { animation-delay: 1.3s; } #learn .mc:nth-child(2) { animation-delay: 1.75s; } #learn .mc:nth-child(3) { animation-delay: 2.2s; }
@keyframes mcin { from { opacity: 0; transform: translateY(26px) scale(.8); filter: brightness(3); } to { opacity: 1; transform: none; filter: none; } }
#learn .mc i { display: block; width: 72px; height: 72px; margin: 0 auto 8px; border-radius: 12px; background: center / cover; border: 2px solid #e0b44c; box-shadow: 0 0 22px rgba(224,180,76,.5); } #learn .mc b { display: block; font-size: 15px; } #learn .mc small { color: #98a2c4; } #learn .mc kbd { position: absolute; right: 8px; top: 8px; }
#learn em { display: block; margin-top: 20px; font-style: normal; font-size: 12px; color: #98a2c4; }

/* ---------- 창 공통 ---------- */
#winBody .tabs { display: flex; align-items: center; gap: 6px; margin: 4px 0 14px; border-bottom: 1px solid rgba(224,180,76,.3); } #winBody .tabs button { padding: 8px 18px; border: 0; border-radius: 6px 6px 0 0; background: none; color: #98a2c4; font: 700 14px var(--font); border-bottom: 3px solid transparent; }
#winBody .tabs button.on { color: #fff3c4; background: linear-gradient(rgba(224,180,76,.16), rgba(224,180,76,0)); border-bottom-color: #e0b44c; } #winBody .tabs .right { margin-left: auto; font-size: 12px; color: #98a2c4; } #winBody .tabs .right button { padding: 4px 10px; font-size: 12px; border: 1px solid rgba(152,162,196,.4); border-radius: 12px; }
.qart { position: relative; height: 150px; margin: -2px -2px 12px; border-radius: 6px; background: center / cover; box-shadow: inset 0 -60px 50px -20px rgba(10,13,26,.95); } .qart span { position: absolute; left: 10px; bottom: 8px; font: 700 12px var(--font); letter-spacing: .14em; color: #f6e7b8; text-shadow: 0 1px 3px #000; }
#winBody h2 { margin: 0 0 8px; font: 800 22px var(--serif); color: #fff3c4; letter-spacing: .04em; }
#winBody .bar { height: 8px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; } #winBody .bar i { display: block; height: 100%; background: linear-gradient(90deg, #c9982e, #ffe9a8); border-radius: 4px; }
button.big { width: 100%; padding: 11px; font-size: 16px; margin-top: 12px; }
/* 의뢰 */
.qwin { display: grid; grid-template-columns: 250px minmax(0, 1fr) 230px; gap: 14px; min-height: 470px; }
.qlist h4 { margin: 2px 0 8px; font: 800 14px var(--serif); color: #f6e7b8; letter-spacing: .1em; } .qlist h4 small { color: #98a2c4; font: 500 11.5px var(--font); margin-left: 6px; } .qlist h4:not(:first-child) { margin-top: 14px; }
.qscroll { max-height: 300px; overflow-y: auto; padding-right: 4px; }
.qrow { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; width: 100%; margin-bottom: 4px; padding: 7px 9px; text-align: left; background: rgba(18,22,42,.7); border: 1px solid rgba(120,132,180,.25); border-radius: 6px; color: #c9d2ee; font-weight: 600; }
.qrow i { width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; background: rgba(255,255,255,.08); font-style: normal; font-size: 11.5px; } .qrow b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qrow small { font-size: 11px; color: #8f99bb; }
.qrow.done { color: #8f99bb; } .qrow.done i { background: rgba(99,224,138,.2); color: #63e08a; } .qrow.cur { border-color: rgba(224,180,76,.7); color: #fff; } .qrow.cur i { background: #e0b44c; color: #24180a; } .qrow.cur small { color: #ffe27a; } .qrow.lock { opacity: .4; font-style: italic; } .qrow.on { background: linear-gradient(90deg, rgba(224,180,76,.28), rgba(224,180,76,.06)); box-shadow: inset 3px 0 0 #e0b44c; }
.qdet { padding: 12px 16px 16px; } .qdet p { font-size: 15px; line-height: 1.7; margin: 0 0 12px; }
.qobj { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; color: #b9c2e0; } .qrw { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #b9c2e0; margin-bottom: 12px; }
.qgo { padding: 9px 12px; background: rgba(224,180,76,.12); border-left: 3px solid #e0b44c; border-radius: 4px; font-size: 13.5px; color: #ffe9a8; } .qgo.done { background: rgba(99,224,138,.1); border-color: #63e08a; color: #a8f0c0; }
.qside { display: flex; flex-direction: column; gap: 12px; } .near1 { margin-bottom: 9px; font-size: 12.5px; } .near1 span { display: block; margin-bottom: 4px; }
/* 지도 */
.mapwin { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; } .mapcv { position: relative; border: 1px solid rgba(224,180,76,.4); border-radius: 8px; overflow: hidden; background: #090c18; } .mapcv canvas { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; }
.mapname { position: absolute; left: 12px; top: 10px; font: 800 17px var(--serif); color: #f6e7b8; text-shadow: 0 2px 4px #000; letter-spacing: .08em; }
.mapsvg { border: 1px solid rgba(224,180,76,.4); border-radius: 8px; background: radial-gradient(90% 90% at 50% 40%, #16203e, #090c18); } .mapsvg svg { display: block; width: 100%; height: auto; }
.maplist { padding: 12px 14px; max-height: 62vh; overflow-y: auto; } .ml { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; padding: 6px 2px; border-bottom: 1px solid rgba(120,132,180,.16); font-size: 13px; } .ml b { color: #e0b44c; font-size: 12px; }
.ml i, .lg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #63e08a; margin-right: 3px; } .ml.p i, .lg.p { background: #6fd0ff; } .ml.s i, .lg.s { background: #ffd76a; border-radius: 2px; transform: rotate(45deg); } .ml.sd i { background: #6a6f86; border-radius: 2px; transform: rotate(45deg); } .ml.sd span { color: #8f99bb; } .lg.me { background: #fff; box-shadow: 0 0 0 2px #ffb02e; } .lg.g { background: none; box-shadow: inset 0 0 0 2px #ffe27a; } .lg { margin-left: 8px; }
/* 순위 */
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin: 4px 0 16px; } .pod { position: relative; width: 170px; padding: 14px 10px 12px; text-align: center; background: linear-gradient(rgba(30,37,66,.9), rgba(14,18,36,.9)); border: 1px solid rgba(224,180,76,.4); border-radius: 10px; }
.pod.p1 { order: 2; padding-top: 22px; border-color: #ffe27a; box-shadow: 0 0 34px rgba(255,210,90,.25); } .pod.p2 { order: 1; } .pod.p3 { order: 3; } .pod b { display: block; font-size: 16px; color: #fff; } .pod small { color: #98a2c4; } .pod em { display: block; margin-top: 4px; font: 900 26px var(--serif); font-style: normal; color: #ffe9a8; } .pod em small { font: 500 12px var(--font); }
.av { width: 54px; height: 54px; margin: 0 auto 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 900 24px var(--serif); color: #fff3c4; background: radial-gradient(circle at 35% 30%, #4a5a9a, #1a2244); border: 2px solid #8a6a22; box-shadow: 0 0 0 1px #000; }
.medal { display: inline-block; min-width: 24px; height: 24px; line-height: 24px; border-radius: 12px; text-align: center; font: 800 12px var(--font); font-style: normal; background: rgba(255,255,255,.08); color: #c9d2ee; } .medal.m1 { background: linear-gradient(#ffe9a8, #c9982e); color: #24180a; } .medal.m2 { background: linear-gradient(#f0f4ff, #9aa6c8); color: #1a2036; } .medal.m3 { background: linear-gradient(#f0c09a, #a8643a); color: #2a1408; } .pod .medal { position: absolute; left: 10px; top: 10px; }
table.rk td, table.rk th { padding: 7px 10px; } table.rk tr.me td { background: rgba(224,180,76,.16); color: #fff; font-weight: 800; box-shadow: inset 0 1px 0 rgba(224,180,76,.5), inset 0 -1px 0 rgba(224,180,76,.5); }
/* 게시판 · 도움말 */
.post { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 10px 6px; border-bottom: 1px solid rgba(120,132,180,.18); } .post .av { margin: 0; width: 46px; height: 46px; font-size: 20px; } .post p { margin: 3px 0 0; color: #c9d2ee; font-size: 13.5px; }
.hrow { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; padding: 8px 2px; border-bottom: 1px solid rgba(120,132,180,.16); } .hrow .hk { text-align: center; font: 800 16px var(--serif); color: #e0b44c; } .hrow b { display: block; font-size: 14.5px; color: #fff; } .hrow small { color: #a9b3d4; font-size: 12.5px; } .sw { display: inline-block; width: 46px; height: 22px; border-radius: 11px; box-shadow: 0 0 14px currentColor, inset 0 0 0 2px rgba(255,255,255,.35); }
.promise { text-align: center; padding: 26px 20px; } .promise p { margin: 0 0 12px; font: 700 20px var(--serif); color: #fff3c4; letter-spacing: .06em; } .promise small { display: block; margin-top: 18px; color: #98a2c4; font-size: 12.5px; }
.boxc.first { margin-bottom: 12px; border-color: #e0b44c; box-shadow: 0 0 24px rgba(224,180,76,.2); }
/* 상점·창구의 사람 얼굴을 크게 */
.npcHead img { width: 112px !important; height: 112px !important; border-radius: 10px !important; border: 2px solid #8a6a22; box-shadow: 0 6px 20px rgba(0,0,0,.6); object-fit: cover; object-position: 50% 8%; }
@media (max-width: 1100px) { .qwin { grid-template-columns: 220px minmax(0, 1fr); } .qside { display: none; } .mapwin { grid-template-columns: 1fr; } #dlgPt { width: 180px; height: 240px; } }

/* 상태 · 설정 */
.stwin { display: grid; grid-template-columns: 250px minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; }
.idcard { position: relative; text-align: center; padding-bottom: 14px; } .idcard img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 10%; border-radius: 8px; border: 1px solid #8a6a22; } .idcard .rk { position: absolute; right: 18px; top: 18px; width: 58px; height: 58px; line-height: 54px; border-radius: 50%; font: 900 34px var(--serif); color: #24180a; background: radial-gradient(circle at 35% 30%, #fff3c4, #c9982e); border: 2px solid #fff3c4; box-shadow: 0 4px 14px rgba(0,0,0,.7); } .idcard .rk small { font-size: 12px; }
.idcard h2 { margin: 10px 0 2px !important; } .idcard .lv { display: flex; justify-content: space-between; font-size: 13px; margin: 8px 2px 4px; color: #c9d2ee; } .idcard table { margin-top: 10px; text-align: left; }
.strow { display: grid; grid-template-columns: 44px 62px 1fr auto; gap: 8px; align-items: center; padding: 7px 0 4px; border-bottom: 1px solid rgba(120,132,180,.16); } .strow > b { color: #f6e7b8; } .strow em { font: 800 20px var(--serif); font-style: normal; color: #fff; } .strow em small { font: 600 12px var(--font); color: #63e08a; }
.strow .track { position: relative; height: 10px; background: rgba(255,255,255,.08); border-radius: 5px; } .strow .track i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #3f7fe0, #8fd0ff); } .strow .track u { position: absolute; top: -3px; width: 2px; height: 16px; background: #e0b44c; }
.strow span button { padding: 2px 8px; margin-left: 3px; font-size: 12px; } .strow > small { grid-column: 1 / -1; color: #8f99bb; font-size: 12px; } .strow > small.hot { color: #ffe27a; }
.setrow3 { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; padding: 8px 0; } .setrow3 button { margin-right: 5px; padding: 5px 14px; }

/* 계승 연출 — 왼쪽: 잔향의 주인 · 가운데: 기술 · 오른쪽: 내 캐릭터의 시범 */
#learn .lc3 { position: relative; display: grid; grid-template-columns: 250px minmax(0, 720px) 250px; gap: 26px; align-items: center; width: min(1280px, 97vw); }
#learn .lc3 .lc { width: auto; }
#learn .lt, #learn .lm { position: relative; text-align: center; color: #fff; padding: 12px 12px 16px; background: linear-gradient(rgba(22,28,52,.92), rgba(9,12,26,.92)); border: 1px solid var(--c); border-radius: 12px; box-shadow: 0 0 0 1px #000, 0 0 44px color-mix(in srgb, var(--c) 35%, transparent); }
#learn.go .lt { animation: ltin .6s .15s ease-out both; } #learn.go .lm { animation: lmin .6s .3s ease-out both; }
@keyframes ltin { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } } @keyframes lmin { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
#learn .lt img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 12%; border-radius: 8px; display: block; margin-bottom: 10px; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--c) 50%, transparent)); }
#learn .lm canvas { width: 100%; aspect-ratio: 3 / 4; display: block; border-radius: 8px; margin-bottom: 10px; background: #070912; }
#learn .lt small, #learn .lm small { display: block; font-size: 11.5px; letter-spacing: .3em; color: var(--c); } #learn .lt b, #learn .lm b { display: block; margin: 3px 0 6px; font: 800 19px var(--serif); color: #fff3c4; }
#learn .lt p { margin: 0; font: italic 600 14.5px var(--serif); color: #e8ecf8; line-height: 1.6; } #learn .lm p { margin: 0; font-size: 13.5px; color: #ffe27a; }
#learn .mc.on { border-color: #fff3c4; box-shadow: 0 0 26px rgba(255,226,122,.55); transform: translateY(-4px); }
@media (max-width: 1100px) { #learn .lc3 { grid-template-columns: minmax(0, 1fr); } #learn .lt, #learn .lm { display: none; } }

/* 레벨 업 알림: 작은 금빛 띠(전에는 화면 가운데의 52px 글씨였다) */
#banner .lvl { background: linear-gradient(90deg, transparent, rgba(60,44,8,.88) 18%, rgba(60,44,8,.88) 82%, transparent); font-size: 24px; color: #ffe9a8; padding: 7px 60px; border-radius: 0; border-top: 1px solid rgba(224,180,76,.7); border-bottom: 1px solid rgba(224,180,76,.7); }

/* ---------- 대화: 테두리 없는 스탠딩(진행자 지시) — 네모 카드 대신 인물만 오려서 대화창보다 크게 세운다 ---------- */
#dlg { --ph: clamp(360px, 60vh, 640px); display: block; width: min(1080px, 95vw); bottom: 158px; }
#dlgPt { position: absolute; left: -46px; bottom: -6px; height: var(--ph); width: auto; max-width: none; margin: 0; z-index: 1; pointer-events: none;
  object-fit: contain; object-position: left bottom; border: 0; border-radius: 0; background: none; box-shadow: none;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.9)) drop-shadow(0 10px 26px rgba(0,0,0,.65)) drop-shadow(0 0 34px rgba(90,120,255,.22));
  -webkit-mask-image: linear-gradient(#000 0, #000 80%, rgba(0,0,0,.0) 99%); mask-image: linear-gradient(#000 0, #000 80%, rgba(0,0,0,0) 99%); }
#dlgPt.in { animation: ptin2 .38s cubic-bezier(.2,.9,.3,1) both; } @keyframes ptin2 { from { opacity: 0; transform: translateX(-46px) scale(.97); } to { opacity: 1; transform: none; } }
#dlgBox { position: relative; z-index: 2; min-height: 128px; padding: 22px 34px 24px calc(var(--ph) * 0.75 - 40px);
  background: linear-gradient(90deg, rgba(9,12,26,.38) 0, rgba(9,12,26,.9) calc(var(--ph) * 0.42), rgba(9,12,26,.96) 60%, rgba(9,12,26,.9));
  border: 0; border-top: 1px solid rgba(224,180,76,.75); border-bottom: 1px solid rgba(224,180,76,.4); border-radius: 4px; box-shadow: 0 16px 44px rgba(0,0,0,.6); }
#dlgName { left: calc(var(--ph) * 0.75 - 46px); top: -19px; }
#dlg.nopt #dlgBox { padding-left: 40px; background: linear-gradient(rgba(18,24,48,.96), rgba(9,12,26,.96)); } #dlg.nopt #dlgName { left: 34px; }
#dlg.narr #dlgBox { padding-left: 34px; }
#dlg.gold #dlgPt { filter: drop-shadow(0 0 2px rgba(0,0,0,.9)) drop-shadow(0 0 40px rgba(255,210,100,.5)); }
@media (max-width: 1100px) { #dlg { --ph: clamp(280px, 46vh, 420px); } #dlgPt { width: auto; height: var(--ph); } }
/* 계승 연출의 잔향의 주인도 카드 없이 인물만 */
#learn .lt { background: none; border: 0; box-shadow: none; padding: 0; } #learn .lt img { aspect-ratio: auto; width: 118%; margin: 0 -9% 6px; border-radius: 0; object-fit: contain; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--c) 55%, transparent)); -webkit-mask-image: linear-gradient(#000 78%, transparent 99%); mask-image: linear-gradient(#000 78%, transparent 99%); }
#learn .lt small, #learn .lt b, #learn .lt p { text-shadow: 0 2px 6px #000, 0 0 14px #000; }

.tlogo p { text-shadow: 0 2px 6px #000, 0 0 16px #000, 0 0 30px #000; } .tlogo small { text-shadow: 0 0 18px #2f7fff, 0 2px 4px #000, 0 0 22px #000; }

/* ---- 촬영 모드(F9) */
#demoBtn { position: fixed; right: 12px; top: 50%; z-index: 21; padding: 5px 9px; font: 600 11.5px var(--sans, sans-serif); color: #ffd98a; background: rgba(12,16,34,.72); border: 1px solid rgba(224,180,76,.45); border-radius: 14px; cursor: pointer; opacity: .55; } #demoBtn:hover { opacity: 1; } #demoBtn kbd { margin-left: 4px; }
#demo { position: fixed; right: 0; top: 0; bottom: 0; z-index: 60; width: min(440px, 94vw); display: flex; flex-direction: column; color: #e8ecf8; background: linear-gradient(rgba(14,18,40,.97), rgba(8,10,24,.97)); border-left: 1px solid rgba(224,180,76,.55); box-shadow: -12px 0 40px rgba(0,0,0,.55); font-size: 13px; }
#demo.hidden { display: none; }
#demo .dh { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 12px 14px 8px; border-bottom: 1px solid rgba(255,255,255,.1); } #demo .dh b { font: 800 19px var(--serif, serif); color: #fff3c4; } #demo .dh span { grid-column: 1 / 3; font-size: 12px; color: #aab3d0; } #demo .dh button { grid-row: 1; grid-column: 2; background: none; border: 0; color: #cfd6ee; font-size: 16px; cursor: pointer; }
#demo .dnow { padding: 6px 14px; font-size: 12px; color: #9fd6ff; background: rgba(60,110,200,.14); } #demo .dnow b { color: #ffd98a; }
#demo .dl { flex: 1; overflow-y: auto; padding: 4px 12px 10px; } #demo h4 { margin: 12px 2px 5px; font-size: 11.5px; letter-spacing: .14em; color: #e0b44c; }
#demo .dc { display: grid; grid-template-columns: 30px 1fr; gap: 1px 8px; width: 100%; margin: 0 0 5px; padding: 8px 10px; text-align: left; color: inherit; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; cursor: pointer; }
#demo .dc:hover { background: rgba(224,180,76,.14); border-color: rgba(224,180,76,.7); } #demo .dc.on { border-color: #e0b44c; background: rgba(224,180,76,.1); }
#demo .dc i { grid-row: 1 / 4; font: 800 17px var(--serif, serif); font-style: normal; color: #e0b44c; } #demo .dc b { font-size: 14.5px; color: #fff; } #demo .dc em { font-style: normal; display: flex; flex-wrap: wrap; gap: 3px; } #demo .dc u { text-decoration: none; padding: 1px 6px; font-size: 10.5px; color: #bcd0ff; background: rgba(90,130,230,.2); border-radius: 8px; } #demo .dc p { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: #b9c0d8; }
#demo .dt p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 6px; } #demo .dt span { width: 74px; font-size: 11.5px; color: #aab3d0; }
#demo .dt button { padding: 4px 8px; font-size: 12px; color: #e8ecf8; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 6px; cursor: pointer; } #demo .dt button:hover { border-color: #e0b44c; } #demo .dt button.on { color: #1a1408; background: #e0b44c; border-color: #e0b44c; font-weight: 700; }
#demo .df { padding: 8px 14px 10px; font-size: 11.5px; line-height: 1.6; color: #8f98b6; border-top: 1px solid rgba(255,255,255,.1); } #demo code { color: #cfe0ff; }
body.nohud1 #hud, body.nohud1 #coach, body.nohud1 #demoBtn { display: none !important; }
body.nohud2 #labels { display: none !important; }
/* 계승 연출이 떠 있는 동안: 대화창 · 인물 그림 · 따라 하기 · 알림 · 이름표가 뒤로 비치지 않게 감춘다 */
body.learning #dlg, body.learning #coach, body.learning #banner, body.learning #labels, body.learning #demoBtn, body.learning #scene, body.learning #prompt, body.learning #toasts { visibility: hidden !important; }
#learn { background: radial-gradient(60% 60% at 50% 46%, rgba(20,16,4,.72), rgba(3,4,10,.93)); }