/* 민권.com 첫 화면: 다크 인트로(looin labs 로고) → 비행선 도시 장면 → (잠금 해제) 서재. 각 칸은 MK.HUB 기존 페이지를 그대로 엶 */
html.mk-layer-open, html.mk-layer-open body { overflow: hidden; }
.mk-layer *, .mk-intro * { max-width: none !important; } /* MK.HUB 모바일 전역 *{max-width:100%!important} 해제 — 무대는 화면보다 넓어야 함 */
.mk-layer { position: fixed; inset: 0; z-index: 9000; overflow: hidden; background: #1a1220; display: none; }
.mk-layer.on { display: block; }
.mk-layer:focus { outline: none; }

@keyframes lg-squash {
  0%, 13% { transform: scale(.9, 1.14); } 15% { transform: scale(1.24, .74); } 19% { transform: scale(.95, 1.06); }
  29% { transform: scale(1, 1); } 31% { transform: scale(1.1, .9); } 35% { transform: scale(.98, 1.02); } 39%, 100% { transform: scale(1, 1); }
}
@keyframes lg-nudge { 0%, 14% { transform: translateX(0); } 17% { transform: translateX(-7px) rotate(-6deg); } 24% { transform: translateX(1px) rotate(1deg); } 28%, 100% { transform: translateX(0); } }
@keyframes lg-eye1 { 0%, 16% { transform: translate(0, 0); } 22%, 34% { transform: translate(-6px, -4px); } 40%, 54% { transform: translate(7px, 0); } 60%, 100% { transform: translate(4px, -5px); } }
@keyframes lg-eye2 { 0%, 13% { transform: translate(0, 6px); } 20%, 34% { transform: translate(0, 0); } 40%, 54% { transform: translate(-9px, 0); } 60%, 100% { transform: translate(4px, -5px); } }
@keyframes lg-blink { 0%, 72%, 76%, 100% { transform: scaleY(1); } 74% { transform: scaleY(.1); } }
@keyframes lg-ding {
  0%, 62% { transform: translateY(0) scale(1); } 64% { transform: translateY(0) scale(1.15, .85); } 68% { transform: translateY(-16px) scale(.92, 1.1); }
  72% { transform: translateY(0) scale(1.12, .88); } 75%, 100% { transform: translateY(0) scale(1); }
}


#lsStudy { background: #0d1020; }
.mk-stage { position: absolute; }
.mk-stage > * { position: absolute; }
/* 도시: 21:9 무대가 화면을 딱 덮게(가운데 맞춤). 모든 요소는 무대 기준 % */
#lsScene .mk-stage { left: 50%; top: 0; height: 100%; aspect-ratio: 3840 / 1646; transform: translateX(-50%); } /* 원본 사진과 같은 시야: 위아래를 자르지 않고 그림 높이 = 화면 높이 */
/* 화면이 21:9보다 넓을 때 양옆: 그림을 이어 그린 조각(outpaint, 원본 픽셀은 그대로) */
.mk-side { top: 0; height: 100%; width: 31.458%; pointer-events: none; }
.mk-side.l { right: 100%; } .mk-side.r { left: 100%; }
@media (min-aspect-ratio: 4/3) { #lsScene { overflow: clip; } } /* 양옆 조각이 가로 스크롤을 만들지 않게(폰은 아래에서 좌우로 밀어 봄) */
/* 서재: 그림 높이 = 화면 높이(더 넓은 화면은 가로에 맞춤). 좁으면 무대 60%를 가운데로 두되 양끝 밖으로는 안 밀림(오른쪽 끝 달력까지 보이게) */
#lsStudy .mk-stage { --w: max(100vw, 233vh); width: var(--w); aspect-ratio: 3840 / 1648; top: 50%; left: clamp(calc(100vw - var(--w)), calc(50vw - .6 * var(--w)), 0px); transform: translateY(-50%); }
/* 벽 달력·액자: 그림 속 종이 위에 그대로 덮어 그림(종이 색은 그림에서 뽑음). 글자는 칸 크기(cqw) 기준 */
button.mk-spot { background: none; border: 0; padding: 0; cursor: pointer; }
/* 액자·달력 글자: 그림 좌표(3840×1648 px) 그대로 쓰는 층을 무대 크기로 줄임(scale은 JS). 곱하기 혼합이라 종이 색·그림자가 글자에 묻어 인쇄된 것처럼 보임 */
.mk-ink { left: 0; top: 0; width: 3840px; height: 1648px; transform-origin: 0 0; pointer-events: none; mix-blend-mode: multiply; }
.mk-ink > * { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-sizing: border-box; color: #2b2119; filter: blur(.5px); }
.ink-q { display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 56px 52px 56px 58px; font: 400 40px/1.5 'Nanum Myeongjo', 'Noto Serif KR', Batang, Georgia, serif; word-break: keep-all; }
.ink-q p { margin: 0; }
.ink-q small { font-size: 24px; opacity: .72; }
.ink-t { font: 400 50px/56px Georgia, 'Times New Roman', serif; text-align: center; letter-spacing: .01em; }
.ink-g { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: .5fr repeat(var(--rows, 5), 1fr); font: 400 38px Georgia, 'Times New Roman', serif; }
.ink-g u { text-decoration: none; font-size: 21px; text-align: center; align-self: center; opacity: .85; }
.ink-g i { font-style: normal; display: grid; place-items: center; position: relative; border-top: 2px solid rgba(43, 33, 25, .28); }
.ink-g i.today { font-weight: 700; }
.ink-g i.busy::after { content: ''; position: absolute; inset: 6% 17%; border: 4px solid #b5301c; border-radius: 52% 46% 55% 44%; transform: rotate(-8deg); }
.mk-bg { inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }

.mk-dr { pointer-events: none; will-change: transform, opacity; }
.mk-cruise.l { scale: -1 1; }
.mk-cruise.far { filter: sepia(.3) saturate(.75) contrast(.7) brightness(1.12); }
.mk-cruise.mid { filter: sepia(.18) saturate(.85) contrast(.85) brightness(1.04); }
.mk-cruise { animation: mk-cruise var(--t) linear var(--d, 0s) infinite; opacity: 0; }
.mk-hover { animation: mk-hover var(--t) ease-in-out var(--d, 0s) infinite; }
@keyframes mk-cruise { 0% { transform: translateX(calc(var(--dx) * -1)); opacity: 0 } 15%, 85% { opacity: 1 } 100% { transform: translateX(var(--dx)); opacity: 0 } }
@keyframes mk-hover { 0%, 100% { transform: translate(0, 0) } 25% { transform: translate(10%, -14%) } 50% { transform: translate(18%, 4%) } 75% { transform: translate(5%, 16%) } }

/* 비행선 = 서재 입구(클릭 영역은 비행선 윤곽) */
.mk-ship { left: 44.6%; top: 38.4%; width: 6.65%; height: 9.9%; padding: 0; border: 0; background: none; cursor: pointer;
  clip-path: polygon(99.8% 20.6%, 97.8% 18.4%, 87.8% 20.1%, 84.8% 19.5%, 84.4% 17.8%, 71.9% 16.7%, 71.5% 0%, 70.7% 15.9%, 67.5% 18.4%, 63.1% 18.9%, 61.3% 17%, 61.3% 2.2%, 59.9% 1.7%, 60.5% 15%, 58.7% 19.5%, 46.9% 24.5%, 39.3% 23.7%, 36.7% 28.1%, 20.8% 32.9%, 17.6% 36.5%, 15.2% 34.5%, 14.4% 38.7%, 11.2% 39.8%, 9.8% 44%, 3% 49.9%, 0% 63.8%, 2.4% 69.1%, 4% 68.8%, 10.4% 75.5%, 9% 82.7%, 6.4% 82.7%, 6.2% 85%, 4% 86.1%, 7% 88.6%, 9.8% 87.7%, 12.4% 90.3%, 11.6% 93.6%, 15.2% 94.2%, 17.4% 96.9%, 22.4% 95.5%, 23.2% 99.7%, 39.9% 96.7%, 41.1% 94.4%, 47.3% 94.2%, 48.9% 91.4%, 57.3% 86.9%, 60.5% 83%, 65.1% 85.8%, 74.5% 78.6%, 78% 79.4%, 83% 76.6%, 87.6% 71.6%, 93.4% 55.4%, 91% 52.9%, 90.6% 50.1%, 92.4% 49.3%, 98% 39.8%, 98.2% 35.9%, 96.4% 34.3%, 96.2% 30.9%); }
.mk-ship:hover { outline: none; }
.mk-ship:focus-visible, .mk-canopy:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(127, 227, 255, .6); }
/* 꼬리 프로펠러: 고리 안쪽 타원 위에서 날개가 돌고, 허브는 그 위 */
.mk-fan { left: 51.75%; top: 38.75%; width: .9%; height: 4.2%; border-radius: 50%; overflow: hidden; pointer-events: none; }
.mk-fan svg { width: 100%; height: 100%; display: block; }
.mk-hub { left: 51.83%; top: 40.16%; width: .5%; pointer-events: none; }
/* 캐노피(흰 패러글라이더, 배경 그림에 그려져 있음) 아래 면에 인쇄된 로고 + looinlabs.com 링크 */
.mk-print { left: 49.315%; top: 32.68%; width: 1.468%; transform: rotate(9deg); transform-origin: 0 0; color: #2b2f45; opacity: 0; transition: opacity .35s; mix-blend-mode: multiply; pointer-events: none; }
.go .mk-print { opacity: .9; }
.mk-print svg { display: block; width: 100%; overflow: visible; }
.mk-canopy { left: 48.16%; top: 31.2%; width: 4.3%; height: 4.7%; border-radius: 50% 50% 40% 40%; }
/* 살아 있는 도시(scene.js LIFE): 바람에 흐르는 구름·안개, 꺼졌다 켜지는 창, 지나가는 사람, 골목의 차 */
.mk-off, .mk-win, .mk-walk, .mk-car, .mk-bb { pointer-events: none; }
.mk-off { opacity: 0; animation: mk-off var(--t) steps(1, end) var(--d) infinite; }
@keyframes mk-off { 0%, 62% { opacity: 0 } 63%, 88% { opacity: .93 } 89%, 100% { opacity: 0 } }
.mk-win, .mk-walk { overflow: hidden; }
.mk-win b, .mk-walk b { position: absolute; bottom: 0; width: 22%; height: 92%; } /* 걷는 실루엣: 발이 바닥에 붙고 다리가 번갈아 */
.mk-win b svg, .mk-walk b svg { display: block; width: 100%; height: 100%; overflow: visible; fill: url(#mkP); opacity: .94; } /* 실내 불빛이 한쪽에 비친 실루엣 */
.mk-win b svg .lg, .mk-walk b svg .lg { transform-box: fill-box; transform-origin: 50% 0; animation: mk-step .9s ease-in-out infinite alternate; }
.mk-win b svg .lg.b, .mk-walk b svg .lg.b { animation-direction: alternate-reverse; }
.mk-win b svg .ar, .mk-walk b svg .ar { transform-box: fill-box; transform-origin: 70% 0; animation: mk-step .9s ease-in-out infinite alternate-reverse; }
@keyframes mk-step { from { transform: rotate(-11deg) } to { transform: rotate(11deg) } }
.mk-win b { height: 62%; left: -30%; animation: mk-pass var(--t) linear var(--d) infinite; }
@keyframes mk-pass { 0%, 55% { left: -30% } 85%, 100% { left: 110% } }
.mk-walk b { width: 6.4%; animation: mk-stroll var(--t) linear var(--d) infinite; }
@keyframes mk-stroll { 0% { left: 2%; transform: none } 45% { left: 92%; transform: none } 50% { left: 92%; transform: scaleX(-1) } 95% { left: 2%; transform: scaleX(-1) } 100% { left: 2%; transform: none } }
.mk-car { width: .16%; aspect-ratio: 1; border-radius: 50%; background: #fff3d6; box-shadow: 0 0 6px 2px rgba(255, 236, 190, .8); opacity: 0;
  animation: mk-drive var(--t) linear var(--d) infinite; }
.mk-car.tail { background: #ff4a3a; box-shadow: 0 0 6px 2px rgba(255, 70, 50, .7); width: .12%; }
/* 전광판: 판마다 다른 간격(--t)·시작(--d)으로 다음 광고로 넘김. 바뀔 때 잠깐 꺼졌다 켜짐 */
.mk-bb { overflow: hidden; }
.mk-bb b { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--n) * 100%); background: 0 0 / 100% 100%;
  animation: mk-bb calc(var(--n) * var(--t)) steps(var(--n)) var(--d) infinite, mk-blink var(--t) linear var(--d) infinite; }
@keyframes mk-bb { to { transform: translateY(-100%) } }
@keyframes mk-blink { 0%, .4% { opacity: .2 } .8%, 100% { opacity: 1 } }
/* 빨간 경고등: 탑 꼭대기·모서리에서 천천히 깜빡 */
.mk-red { width: .22%; aspect-ratio: 1; margin: -.11% 0 0 -.11%; border-radius: 50%; background: #ff2a1a; box-shadow: 0 0 6px 2px rgba(255, 40, 20, .75), 0 0 16px 5px rgba(255, 40, 20, .25);
  animation: mk-beacon var(--t) ease-in-out var(--d) infinite; pointer-events: none; }
@keyframes mk-beacon { 0%, 100% { opacity: .08 } 45%, 55% { opacity: 1 } }
@keyframes mk-drive { 0% { left: var(--x0); top: var(--y0); opacity: 0 } 8%, 90% { opacity: 1 } 100% { left: var(--x1); top: var(--y1); opacity: 0 } }
/* 링크 물건: 그림 그대로. 가리켜도 이름·빛 없음 */
.mk-spot { border-radius: 8px; transition: box-shadow .25s; }
.mk-spot:hover, .mk-spot:focus-visible { outline: none; } /* 무엇인지 표시하지 않음(숨겨둔 저장소). 키보드 포커스만 은은히 */
.mk-spot:focus-visible { box-shadow: 0 0 18px 2px rgba(255, 190, 150, .2); }
/* 모닝 브리프 드론(= 우체통): 멀리서 날아와 떠 있고, 새 소식이 온 것처럼 이따금 부르르 떪(글자 표시 없음). 인트로가 끝나야 출발(.go) */
.mk-courier { left: 34.9%; top: 27%; width: 4.8%; aspect-ratio: 640 / 301; opacity: 0; }
.mk-courier img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 클릭 유도: 뒤에서 은은히 숨쉬는 빛 + 손가락이 닿기 쉬운 넓은 터치 영역 */
.mk-courier::before { content: ""; position: absolute; left: 50%; top: 50%; width: 130%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255, 236, 200, .9); box-shadow: 0 0 12px rgba(255, 210, 150, .8), inset 0 0 12px rgba(255, 210, 150, .5); translate: -50% -50%; animation: mk-glow 2.4s ease-out 4s infinite both; pointer-events: none; }
.mk-courier::after { content: ""; position: absolute; inset: -70% -30%; }
.go .mk-courier .body { animation: mk-bob 3.2s ease-in-out 4s infinite, mk-shine 2.4s ease-in-out 4s infinite; }
@keyframes mk-shine { 0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 220, 170, .5)) } 50% { filter: drop-shadow(0 0 8px rgba(255, 240, 210, 1)) brightness(1.25) } }
@keyframes mk-glow { 0% { opacity: 0; scale: .5 } 25% { opacity: 1 } 100% { opacity: 0; scale: 1.4 } }
.go .mk-courier { animation: mk-arrive 4s cubic-bezier(.2, .7, .3, 1) both; }
.go .mk-courier.here { animation: none; opacity: 1; }
.mk-courier.read::before { display: none; } /* 최신 브리프를 읽음 → 반짝임·고리 없음 */
.go .mk-courier.read .body { animation: mk-bob 3.2s ease-in-out infinite; filter: none; }
@keyframes mk-arrive { from { transform: translate(180%, -620%) scale(.12); opacity: 0 } 15% { opacity: 1 } to { transform: none; opacity: 1 } }
@keyframes mk-bob { 0%, 100% { translate: 0 0 } 50% { translate: 0 -9% } }
@keyframes mk-buzz { 0%, 78%, 100% { rotate: 0deg } 80% { rotate: -5deg } 82% { rotate: 5deg } 84% { rotate: -4deg } 86% { rotate: 4deg } 88% { rotate: -2deg } 90% { rotate: 1deg } }
.mk-gear { position: fixed; right: 16px; top: 16px; height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 14px 0 10px; border: 1px solid rgba(232, 220, 198, .45); border-radius: 999px; background: rgba(12, 14, 30, .66); color: #e8dcc6; text-decoration: none; font: 600 13px/1 "Pretendard Variable", Pretendard, sans-serif; backdrop-filter: blur(8px); }
.mk-gear svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mk-gear:hover { border-color: #ffb08a99; box-shadow: 0 0 14px #ffb08a44; }
.mk-sound { position: fixed; right: 102px; top: 16px; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(232, 220, 198, .35); border-radius: 50%; background: rgba(12, 14, 30, .6); cursor: pointer; }
.mk-sound svg { width: 18px; height: 18px; fill: none; stroke: #8f8a80; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mk-sound.on { border-color: #ffb08a99; box-shadow: 0 0 14px #ffb08a44; }
.mk-sound.on svg { stroke: #e8dcc6; }
.mk-back { position: fixed; left: 16px; top: 16px; color: #e8dcc6; text-decoration: none; padding: 6px 12px; border-radius: 999px; background: rgba(12, 14, 30, .6); font: 14px/1.4 "Pretendard Variable", Pretendard, sans-serif; }

/* 화면 낭독기 전용 텍스트 */
.mk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }

/* 저장고 방(rooms.js) 모양은 scene/rooms.css */
/* 서재 책상(desk.js): 잡생각·할 일 달력 — 큰 글씨(17px+), 44px 터치, 청록은 주요 버튼·선택에만 */
.dk-switch { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 22px; border: 1px solid var(--line); border-radius: 999px; }
.dk-switch a { padding: 9px 18px; border-radius: 999px; color: var(--dim); text-decoration: none; font-size: 14px; }
.dk-switch a[aria-current="page"] { background: #f2eee8; color: #0b0a0d; font-weight: 600; }
.dk-dock { position: sticky; bottom: 0; z-index: 2; margin: 24px -20px 0; padding: 10px 20px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, #060a16 30%); }
.dk-bar { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 16px; border: 1px solid #ffb08a44; border-radius: 22px; background: #0b1428f0; box-shadow: 0 10px 40px #000a; transition: box-shadow .15s, border-color .15s; }
.dk-bar.glow { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 26px #ffb08a55; }
.dk-input { flex: 1; min-height: 28px; max-height: 40vh; overflow-y: auto; scrollbar-width: none; padding: 9px 0; border: 0; background: none; color: #fff; font: 17px/1.5 inherit; resize: none; outline: none; }
.dk-input.one { min-height: 0; }
.dk-put { flex-shrink: 0; min-height: 44px; padding: 0 18px; border: 0; border-radius: 16px; background: #f2eee8; color: #0b0a0d; font: 700 15px/1 inherit; cursor: pointer; white-space: nowrap; }
.dk-put:disabled { opacity: .5; }
.dk-status { display: block; min-height: 18px; margin: 0 0 6px 6px; font-size: 12px; color: var(--c); }
.dk-notes { display: flex; flex-direction: column; gap: 10px; }
.dk-note { border-radius: 14px; background: #f6e7b8; color: #2a2318; box-shadow: 0 6px 20px #0006; overflow: hidden; }
.dk-note:nth-child(3n+2) { background: #f7cdb8; } .dk-note:nth-child(3n) { background: #f3d6e4; }
.dk-note.kept { box-shadow: 0 0 0 2px var(--c), 0 6px 20px #0006; }
.dk-note.todo { opacity: .7; }
.dk-note-body { display: block; width: 100%; min-height: 44px; padding: 14px 16px 10px; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.dk-note-body p { margin: 0; font-size: 17px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dk-note-body[aria-expanded="true"] p { -webkit-line-clamp: unset; }
.dk-note-body small { display: block; margin-top: 6px; font-size: 12px; color: #6b5d48; }
.dk-note .dk-actions { padding: 0 12px 12px; }
.dk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dk-note .rm-btn.ghost { color: #2a2318; box-shadow: inset 0 0 0 1px #2a231844; }
.dk-note .rm-btn:not(.ghost) { background: #0b0a0d; color: #fff; }
.dk-note .dk-link, .dk-note .dk-chips button, .dk-note .dk-pick { color: #2a2318; border-color: #2a231844; }
.dk-line { flex: 1 1 100%; min-height: 44px; padding: 8px 10px; border: 1px solid #ffb08a44; border-radius: 10px; background: #0b0a0d; color: #fff; font: 16px inherit; }
.dk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dk-chips button, .dk-pick { position: relative; min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: none; color: #f2eee8; font: 14px inherit; cursor: pointer; }
.dk-chips.sm button, .dk-chips.sm .dk-pick { min-height: 40px; padding: 0 11px; font-size: 13px; }
.dk-pick .dk-date { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dk-link { padding: 10px 2px; border: 0; background: none; color: var(--dim); font: 13px inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.dk-link.block { display: inline-block; margin-top: 18px; }
.dk-let { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--dim); font-size: 14px; }
.dk-search { width: 100%; margin-top: 12px; padding: 10px 2px; border: 0; border-bottom: 1px solid #ffb08a33; background: none; color: #fff; font: 15px inherit; outline: none; }
.dk-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; padding: 14px 16px; border: 1px solid #ffb08a33; border-radius: 14px; background: #ffb08a0d; }
.dk-offer p { flex: 1 1 100%; margin: 0 0 4px; font-size: 15px; }
.dk-offer.focus .dk-big { font-size: 19px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.dk-offer small { flex: 1 1 100%; font-size: 12px; color: var(--dim); }
.dk-toast { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom)); z-index: 5; translate: -50% 0; display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 18px; border-radius: 999px; background: #f2eee8; color: #0b0a0d; font-size: 14px; box-shadow: 0 10px 30px #000a; }
.dk-toast button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: #0b0a0d; color: #fff; font: 600 13px inherit; cursor: pointer; }
.dk-cal { padding-bottom: 8px; }
.dk-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.dk-monthbtn { margin-right: auto; padding: 8px 2px; border: 0; background: none; color: #fff; font: 300 22px/1 "Space Grotesk", "Pretendard Variable", sans-serif; cursor: pointer; }
.dk-week { display: grid; grid-template-columns: 28px repeat(7, 1fr) 28px; gap: 4px; align-items: stretch; margin-bottom: 18px; }
.dk-nav { border: 0; background: none; color: var(--dim); font-size: 22px; cursor: pointer; }
.dk-day { min-height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 0; border: 1px solid transparent; border-radius: 14px; background: #ffffff06; color: #f2eee8; font: inherit; cursor: pointer; }
.dk-day small { font-size: 11px; color: var(--dim); }
.dk-day b { font: 500 19px/1 "Space Grotesk", sans-serif; }
.dk-day i, .dk-cell i { min-height: 13px; font-style: normal; font-size: 10px; color: var(--c); white-space: nowrap; }
.dk-day.today { border-color: #ffb08a55; }
.dk-day.sel, .dk-cell.sel { background: #f2eee8; color: #0b0a0d; }
.dk-day.sel small, .dk-day.sel i, .dk-cell.sel i { color: #0b0a0d; }
.dk-month { margin-bottom: 18px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #ffffff05; }
.dk-month-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 15px; }
.dk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.dk-grid > small { padding: 4px 0; font-size: 11px; color: var(--dim); }
.dk-cell { min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid transparent; border-radius: 10px; background: none; color: #f2eee8; font: inherit; cursor: pointer; }
.dk-cell b { font-weight: 500; font-size: 15px; }
.dk-cell.today { border-color: #ffb08a55; }
.dk-dayhead { margin: 6px 0 10px; font: 600 17px/1.4 "Pretendard Variable", sans-serif; }
.dk-dayhead small { font-weight: 400; font-size: 13px; color: var(--dim); }
.dk-list { list-style: none; margin: 0 0 8px; padding: 0; }
.dk-todo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.dk-todo.first { padding-left: 10px; border-left: 2px solid var(--c); }
.dk-todo-text { flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; color: #f2eee8; text-align: left; font: 17px/1.45 inherit; overflow-wrap: anywhere; cursor: text; }
.dk-todo.done .dk-todo-text { color: var(--dim); text-decoration: line-through; }
.dk-todo > small { font-size: 12px; color: var(--dim); }
.dk-todo .dk-chips { flex: 1 1 100%; padding-left: 34px; padding-bottom: 6px; }
.dk-todo .rm-check { position: relative; width: 44px; height: 44px; margin: 0 -10px 0 -10px; border: 0; background: none; } /* 44px 터치, 보이는 원은 22px */
.dk-todo .rm-check::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; border: 1px solid #f2eee866; }
.dk-todo .rm-check[aria-pressed="true"]::before { background: var(--c) radial-gradient(circle, #0b0a0d 0 3px, transparent 3.5px); border-color: var(--c); }
.dk-nav { min-height: 44px; }
.dk-link { min-height: 44px; }
.dk-star { width: 44px; height: 44px; border: 0; background: none; color: var(--dim); font-size: 20px; cursor: pointer; }
.dk-star[aria-pressed="true"] { color: var(--c); text-shadow: 0 0 10px #ffb08a88; }
.dk-chip-one { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: none; color: #f2eee8; font: 13px inherit; cursor: pointer; }
.dk-empty { margin: 8px 0 16px; color: var(--dim); font-size: 15px; }
.dk-fold { margin: 10px 0; border-top: 1px solid var(--line); }
.dk-fold summary { min-height: 44px; display: flex; align-items: center; color: var(--dim); font-size: 14px; cursor: pointer; list-style: none; }
.dk-fold summary::before { content: '▸'; margin-right: 8px; } .dk-fold[open] summary::before { content: '▾'; }
.dk-nodate { margin: 8px 0 0 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--dim); font: 13px inherit; cursor: pointer; }
.dk-nodate[aria-pressed="true"] { border-color: var(--c); color: var(--c); }
@media (prefers-reduced-motion: reduce) { .dk-bar { transition: none; } }
#lsRoom button:focus-visible, #lsRoom a:focus-visible { outline: 1px solid var(--c); outline-offset: 3px; }

/* 서재 암호 — 저장고 인증(vault-client.css)과 같은 비행선 해치: 화면 전체, 다이얼 링 안에 4칸, 아래 둥근 숫자 */
.mk-pin { --c: #ffb08a; --dim: #8aa3b8; position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none !important; max-height: none; margin: 0; padding: calc(18px + env(safe-area-inset-top)) 20px calc(22px + env(safe-area-inset-bottom));
  box-sizing: border-box; border: 0; background: none; color: #f2eee8; font: 14px/1.4 "Pretendard Variable", Pretendard, sans-serif; overflow: auto; animation: mk-pin-in .45s cubic-bezier(.2, .8, .2, 1); }
.mk-pin[open] { display: flex; flex-direction: column; align-items: center; }
@keyframes mk-pin-in { from { opacity: 0; filter: blur(6px) } }
.mk-pin::backdrop { background: radial-gradient(circle at 50% 40%, #2a1a22cc, #0b0a0df2 70%); backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); }
.mk-pin-top { align-self: stretch; display: flex; justify-content: space-between; align-items: center; font: 10px ui-monospace, Consolas, monospace; letter-spacing: .3em; color: var(--dim); }
.mk-pin-top button { background: none; border: 0; padding: 8px 2px; color: var(--dim); font: inherit; letter-spacing: .1em; cursor: pointer; }
.mk-pin-top button:hover { color: #fff; }
.mk-pin-ring { position: relative; width: 150px; aspect-ratio: 1; margin: auto 0 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid #ffb08a2a; }
.mk-pin-ring::before { content: ''; position: absolute; inset: -16px; border-radius: 50%; background: repeating-conic-gradient(#ffb08a66 0 .6deg, transparent .6deg 6deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)); mask: radial-gradient(closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)); animation: mk-turn 60s linear infinite; }
@keyframes mk-turn { to { rotate: 1turn } }
.mk-pin-slots { display: flex; gap: 14px; }
.mk-pin-slots i { width: 10px; height: 10px; border-radius: 50%; background: #f2eee840; transition: background .15s, scale .2s, box-shadow .2s; }
.mk-pin-slots i.on { background: #fff; scale: 1.4; box-shadow: 0 0 12px var(--c); }
.mk-pin.bad .mk-pin-slots { animation: mk-shake .4s; } .mk-pin.bad .mk-pin-slots i.on { background: #ff8a70; box-shadow: 0 0 12px #ff8a70; }
.mk-pin.ok .mk-pin-slots i { background: #9dffd0; box-shadow: 0 0 14px #9dffd0; } .mk-pin.ok .mk-pin-ring { border-color: #9dffd088; }
@keyframes mk-shake { 20% { translate: -8px } 40% { translate: 8px } 60% { translate: -5px } 80% { translate: 4px } }
.mk-pin-title { margin: 30px 0 26px; font: 400 34px/1.1 "Instrument Serif", Georgia, serif; }
.mk-pin-face { display: flex; align-items: center; gap: 10px; margin: -8px 0 18px; padding: 11px 22px; border: 1px solid #f2eee855; border-radius: 999px; background: #f2eee80d; color: #fff; font: 600 14px/1 "Pretendard Variable", Pretendard, sans-serif; cursor: pointer; }
.mk-pin-face::before { content: ''; width: 18px; height: 18px; border: 1.5px solid var(--c); border-radius: 6px; box-shadow: 0 0 10px #ffb08a66; }
.mk-pin-face[hidden] { display: none; }
.mk-pin-face:disabled { opacity: .5; cursor: wait; }
.mk-pin-err { margin: -10px 0 14px; font-size: 12px; color: #ffab8f; text-align: center; max-width: 280px; }
.mk-pin-err:empty { display: none; }
.mk-pin-pad { display: grid; grid-template-columns: repeat(3, 68px); gap: 14px 26px; margin-bottom: auto; }
.mk-pin-pad button { width: 68px; aspect-ratio: 1; border-radius: 50%; border: 0; background: #f2eee812; color: #fff; font: 300 26px/1 "Space Grotesk", "Pretendard Variable", sans-serif; cursor: pointer; transition: background .15s, box-shadow .15s; }
.mk-pin-pad button[data-k="del"] { background: none; font-size: 20px; color: var(--dim); }
.mk-pin-pad button:hover { background: #f2eee822; }
.mk-pin-pad button:active { background: #f2eee840; }
.mk-pin button:focus-visible { outline: 1px solid var(--c); outline-offset: 3px; }
@media (max-height: 640px) { .mk-pin-ring { width: 110px; } .mk-pin-title { margin: 20px 0 16px; } .mk-pin-pad { gap: 10px 22px; } }

/* 인트로: 다크 배경에 looin labs 로고 애니메이션(looinlabs.com 로더와 같음) → 로고가 비행선 현수막으로 날아가 박힘 */
.mk-intro { position: fixed; inset: 0; z-index: 9500; background: #131313; transition: background .6s ease; display: none; }
.mk-intro.on { display: block; }
.mk-intro.leaving { background: transparent; }
.mk-intro .ld-logo { position: absolute; left: 50%; top: 50%; width: min(420px, 34vw); color: #fff; translate: -50% -50%; }
.mk-intro .mark { display: block; width: 100%; overflow: visible; transform-origin: 0 0; transition: transform .9s cubic-bezier(.7, 0, .2, 1), color .9s; }
.mk-intro .labs { font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: 30px; font-weight: 700; fill: currentColor; stroke: none; }
.mk-intro .mark * { transform-box: fill-box; animation-duration: 3.4s; animation-iteration-count: 1; animation-fill-mode: both; }
.mk-intro .drop { animation-name: lg-drop; }
.mk-intro .squash { transform-origin: 50% 100%; animation-name: lg-squash; }
.mk-intro .nudge { animation-name: lg-nudge; }
.mk-intro .eye1 { animation-name: lg-eye1; }
.mk-intro .eye2 { animation-name: lg-eye2; }
.mk-intro .blink { transform-origin: 50% 50%; animation-name: lg-blink; }
.mk-intro .ding { transform-origin: 50% 100%; animation-name: lg-ding; }
.mk-intro .labs { animation-name: lg-labs; }
@keyframes lg-labs { 0%, 36% { opacity: 0; transform: translateY(18px); } 46%, 100% { opacity: 1; transform: none; } }
@keyframes lg-drop {
  0% { transform: translateY(-190px); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  14% { transform: translateY(0); animation-timing-function: cubic-bezier(0,.55,.45,1); }
  22% { transform: translateY(-34px); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  30%, 100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mk-dr, .go .mk-courier, .go .mk-courier .body { animation: none; opacity: 1; }
  .mk-courier { opacity: 1; }
  .mk-courier::before { animation: none; opacity: .7; }
  .mk-pin, .mk-pin-ring::before, .rm-ring::before { animation: none; }
}

/* 세로 화면(폰) — 위 무대 규칙을 덮어야 해서 맨 끝에: 그림을 화면 높이에 맞추고 좌우로 밀어 보기 — 양옆 전광판·책장까지 손이 닿게 */
@media (max-aspect-ratio: 4/3) { /* 4:3보다 좁으면 가로로 잘리는 물건이 생김 */
  .mk-layer { overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mk-layer::-webkit-scrollbar { display: none; }
  #lsScene .mk-side { display: none; }
  #lsScene .mk-stage, #lsStudy .mk-stage { position: relative; left: 0; top: 0; transform: none; height: 100%; width: calc(100vh * 7 / 3); } /* 두 그림 모두 21:9(7/3) */
}

/* 큰 화면(QHD·21:9)에서 UI가 작아 보이지 않게 한 번에 키움: 방(.rm-shell)·도시/서재 버튼·암호창이 같은 배율(--z)을 씀 */
:root { --z: 1; }
@media (min-width: 1500px) { :root { --z: 1.12; } }
@media (min-width: 1800px) { :root { --z: 1.25; } }
@media (min-width: 2200px) { :root { --z: 1.4; } }
@media (min-width: 2800px) { :root { --z: 1.65; } }
.mk-gear, .mk-sound, .mk-back, .mk-pin-top { zoom: var(--z); }
@media (min-height: 1000px) { .mk-pin > * { zoom: var(--z); } } /* 키패드는 화면 높이가 넉넉할 때만 키움(낮은 화면에서 아래 줄이 잘리지 않게) */