·붙여넣기
/
같은 요소는 인라인 글꼴이
없어서 * 규칙에 막혀 기본(UI) 글꼴로 그려졌다. 그 결과
· 다음 줄이 '서식이 풀린' 기본 글꼴로 입력되고,
· 상자를 눌러 글꼴을 다시 지정해도(상자 값=상속 경로) 화면이 안 바뀌며,
· 드래그 선택+글꼴(인라인 span)만 먹히는 모순이 생겼다.
모든 자식 요소에 font-family:inherit 를 둠으로써 상자 글꼴이 상속으로
내려가도록 원복한다. 인라인으로 명시한 글꼴(서식 span 등)은 그대로 우선. */
.tb-content *{font-family:inherit;}
.tb.pdf-text .tb-content{border-width:0;border-radius:0;}
.tb.pdf-text.sel .tb-content,.tb.pdf-text.edit .tb-content{outline:1px solid var(--accent);}
/* PDF 표 셀도 일반 표와 같이 바깥 셀 outline 만 사용한다. */
.tb.in-tbl.pdf-text.sel .tb-content,
.tb.in-tbl.pdf-text.edit .tb-content{outline:none!important;}
.tb.tight.edit .tb-content{display:block;white-space:pre-wrap;line-height:1.4;}
/* 14.40 · 논문 상자 '줄 흐름' 편집 — 줄(.sdy-tl)은 절대위치(원본 top·높이),
줄 안은 인라인 흐름. 단어 간격 스페이서(.sdy-tg)는 폭만 있고 높이가 0.
14.44 · 줄은 nowrap — 원문 줄은 '한 줄'이라 실측 오차로 상자 폭을
1px 미만 넘어가도 줄 끝에서 접혀 아래 원문 줄과 겹치지 않는다. */
.tb-content .sdy-tl{position:absolute;left:0;width:100%;box-sizing:border-box;overflow:visible;white-space:nowrap;}
.tb-content .sdy-tg{display:inline-block;height:0;overflow:hidden;}
.tb-content .sdy-ts{display:inline;white-space:nowrap;}
/* 안 보이는 스페이스바: 흐름에서 빼 글자 맞춤은 안 건드리고,
font-size:0 은 Chromium 이 ::selection / Selection.toString() 에서
공백을 건너뛰게 하므로 쓰지 않는다. 글자는 투명, 하이라이트만 남는다. */
.tb.tight .zsp{position:absolute;left:100%;top:0;font-size:1em;font-style:normal;letter-spacing:0;line-height:inherit;white-space:pre;color:transparent;transform-origin:left center;}
/* 가져온 텍스트 간격 조절 바 */
.tight-bar{position:fixed;top:64px;left:50%;transform:translateX(-50%);
z-index:1250;display:none;align-items:center;gap:5px;padding:6px 10px;
background:var(--card);border:1px solid var(--border);border-radius:8px;
box-shadow:var(--shadow);}
.tight-bar.show{display:flex;}
.tight-bar button{padding:4px 8px;border:1px solid var(--border);border-radius:5px;
background:var(--bg2);color:var(--text1);font-size:11.5px;font-weight:700;cursor:pointer;}
.tight-bar button:active{transform:scale(.95);}
.tight-bar .v{min-width:58px;text-align:center;font-size:11px;color:var(--text2);white-space:nowrap;}
/* 비어 있는 상자도 위치가 보이도록 은은한 점선 유지 */
.tb.empty .tb-content{
border-color:rgba(150,150,150,.35)!important;
border-style:dashed!important;
background:transparent;
}
.tb.empty:hover .tb-content{border-color:rgba(79,110,247,.5)!important;}
/* ===== 펜/지우개 실제 크기 커서 ===== */
.tool-cursor{
position:fixed;left:0;top:0;z-index:1000;pointer-events:none;display:none;
transform:translate3d(var(--cursor-x,0),var(--cursor-y,0),0) translate(-50%,-50%);
will-change:transform;border-radius:50%;box-sizing:border-box;
}
.tool-cursor.pen{border:1.5px solid rgba(0,0,0,.65);background:rgba(0,0,0,.12);}
.tool-cursor.marker{border:1.5px solid currentColor;background:rgba(255,235,59,.22);}
.tool-cursor.paint{border:2px solid currentColor;background:currentColor;opacity:.55;border-radius:3px 55% 55% 55%;transform:translate3d(var(--cursor-x,0),var(--cursor-y,0),0) translate(-50%,-50%) rotate(45deg);}
.dark .tool-cursor.pen:not(:where(.sdy-editor-light,.sdy-editor-light *)){border-color:rgba(255,255,255,.8);}
.dark .tool-cursor.marker:not(:where(.sdy-editor-light,.sdy-editor-light *)){border-color:rgba(255,255,255,.8);}
.tool-cursor.eraser{
border:2px dotted #ef4444;
background:rgba(255,255,255,.34);
box-shadow:0 0 0 1px rgba(255,255,255,.72),0 1px 4px rgba(15,23,42,.18);
}
.tool-cursor .dot{
position:absolute;left:50%;top:50%;width:2px;height:2px;border-radius:50%;
background:rgba(0,0,0,.55);transform:translate(-50%,-50%);
}
/* 15.30 · 마우스로 접속한 컴퓨터 화면에서는 점 대신 도구 모양 글리프를
포인터 위치 옆에 붙인다 — 펜촉 끝이 정확히 현재 위치를 가리킨다.
펜 호버(아이패드)/터치에서는 실제 접촉 원만 보여 방해하지 않는다.
15.56.2 · 글리프(#ed-i-pen · #ed-i-marker · #ed-i-paint)가 선 그림에서 '채운 윤곽'으로 바뀌었다.
· 색은 stroke 가 아니라 color 로 준다 — 글리프가 fill:currentColor 로 받는다.
· 자리: 심볼 viewBox(-0.5 -0.5 25 25)를 26px 상자에 그리므로 1칸 = 26/25px 이다.
연필 끝점 (3, 20.89) 은 상자 왼쪽 위에서 (3.5, 21.39)칸 — 그만큼 당기면 끝점이 포인터에 온다.
형광펜은 같은 자리에서 넓적촉이 포인터 바로 위에 놓인다(촉 아랫변과의 틈 0.7px).
· 다크 테마 예외를 두지 않는다. 종이는 다크 테마에서도 밝은데(.sdy-editor-light), 예전 예외는
글리프를 흰색으로 바꿔 흰 종이 위에서 보이지 않게 만들었다. (:not(.sdy-editor-light …) 가드가
있었지만 updateToolCursor() 가 className 을 통째로 써서 #toolCursor 의 그 클래스가 떨어지므로
실제로 걸렸다.) */
.tool-cursor .tc-icon{
position:absolute;left:calc(50% - 26px*3.5/25);top:calc(50% - 26px*21.39/25);
width:26px;height:26px;display:none;overflow:visible;pointer-events:none;
color:rgba(23,32,51,.88);
filter:drop-shadow(0 1px 2px rgba(15,23,42,.32));
}
/* 페인트 커서는 물방울 모양을 만들려고 통째로 45° 돌아가 있다(위 .tool-cursor.paint).
양동이 글리프는 이미 기울어진 그림이라 그만큼 되돌려 바로 세우고(회전 중심 = 포인터),
물방울 오른쪽에 나란히 둔다. */
.tool-cursor.paint .tc-icon{left:calc(50% + 6px);top:calc(50% - 13px);transform-origin:-6px 13px;transform:rotate(-45deg);}
.tool-cursor.ptr-mouse .tc-icon{display:block;}
.tool-cursor.eraser .tc-icon{display:none!important;}
/* 배치될 실제 크기를 그대로 보여주는 고스트 */
.text-ghost{
position:fixed;left:0;top:0;pointer-events:none;display:none;z-index:1001;
border:1.5px solid color-mix(in srgb,var(--accent) 78%,white 22%);border-radius:10px;
background:color-mix(in srgb,var(--accent) 8%,var(--card));
box-shadow:0 12px 30px rgba(40,55,120,.16),inset 0 0 0 1px rgba(255,255,255,.35);
}
.text-ghost .tg-label,.place-ghost .tg-label{
position:absolute;left:0;top:-34px;white-space:nowrap;
background:linear-gradient(135deg,var(--accent),#8b5cf6);color:#fff;font-size:10.5px;
padding:6px 8px;border-radius:9px;display:flex;align-items:center;gap:6px;
box-shadow:0 5px 16px color-mix(in srgb,var(--accent) 35%,transparent);}
.text-ghost .tg-label b,.place-ghost .tg-label b{font-size:11px}
.text-ghost .tg-label em, .tg-label kbd,.place-ghost .tg-label em{font-style:normal;opacity:.82;}
.text-ghost .tg-label kbd,.place-ghost .tg-label kbd{margin-left:2px;padding:1px 5px;border-radius:5px;background:rgba(255,255,255,.2);
font:700 9px/1.5 ui-monospace,monospace;}
/* 15.36 · 배치 모드 휠로 고르는 '앞으로 입력될 글자 크기'를 라벨에 숫자로 보여 준다 */
.text-ghost .tg-label .tg-size{margin-left:2px;padding:1px 5px;border-radius:5px;background:rgba(255,255,255,.2);
font:700 9.5px/1.5 ui-monospace,monospace;font-style:normal;letter-spacing:.2px;}
.text-ghost .tg-placeholder{position:absolute;left:14px;top:50%;transform:translateY(-50%);
font-size:11px;line-height:1.2;color:var(--accent);opacity:.62;white-space:nowrap;}
.text-ghost .tg-caret{
position:absolute;left:10px;top:50%;width:2px;height:16px;background:var(--accent);border-radius:2px;
transform:translateY(-50%); /* 상자 높이가 몇이든 캐럿은 안내 문구와 함께 세로 중앙 */
animation:caretBlink 1s steps(1) infinite;
}
.text-ghost .tg-corner{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;
border:2px solid var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.18);}
.text-ghost .tg-corner.c1{left:-4px;top:-4px}.text-ghost .tg-corner.c2{right:-4px;top:-4px}
.text-ghost .tg-corner.c3{left:-4px;bottom:-4px}.text-ghost .tg-corner.c4{right:-4px;bottom:-4px}
@keyframes caretBlink{50%{opacity:0}}
/* ===== 그림·수식 배치 고스트 — 상자·표 고스트와 같은 규칙(누른 자리 = 생기는 자리) ===== */
.place-ghost{
position:fixed;left:0;top:0;pointer-events:none;display:none;z-index:1003;overflow:visible;
border:1.5px solid color-mix(in srgb,var(--accent) 78%,white 22%);border-radius:10px;
background:color-mix(in srgb,var(--accent) 8%,var(--card));
box-shadow:0 12px 30px rgba(40,55,120,.16),inset 0 0 0 1px rgba(255,255,255,.35);
}
.pg-body{position:absolute;inset:0;overflow:hidden;border-radius:inherit;}
.pg-body .pg-scale{transform-origin:0 0;width:100%;height:100%;opacity:.92;
background-size:contain;background-repeat:no-repeat;background-position:center;}
.pg-body .pg-latex{display:flex;align-items:center;justify-content:center;overflow:hidden;
color:var(--text);padding:2px;}
body.placing-text #pagesStage .paper,body.placing-table #pagesStage .paper,
body.placing-el #pagesStage .paper{cursor:crosshair;}
.table-ghost{
position:fixed;left:0;top:0;pointer-events:none;display:none;z-index:1002;
border:2px solid color-mix(in srgb,var(--accent) 82%,white 18%);border-radius:3px;
background-color:color-mix(in srgb,var(--accent) 7%,var(--card));
background-image:linear-gradient(to right,color-mix(in srgb,var(--accent) 55%,transparent) 1px,transparent 1px),
linear-gradient(to bottom,color-mix(in srgb,var(--accent) 55%,transparent) 1px,transparent 1px);
background-size:calc(100% / var(--tbl-cols,3)) 100%,100% calc(100% / var(--tbl-rows,3));
box-shadow:0 14px 34px rgba(40,55,120,.18);opacity:.9;
}
.table-ghost .tg-label{
position:absolute;left:0;top:-34px;white-space:nowrap;
background:linear-gradient(135deg,var(--accent),#8b5cf6);color:#fff;font-size:10.5px;
padding:6px 8px;border-radius:9px;display:flex;align-items:center;gap:6px;
box-shadow:0 5px 16px color-mix(in srgb,var(--accent) 35%,transparent);
}
.table-ghost .tg-label b{font-size:11px}.table-ghost .tg-label em{font-style:normal;opacity:.82;}
.table-ghost .tg-label kbd{margin-left:2px;padding:1px 5px;border-radius:5px;background:rgba(255,255,255,.2);
font:700 9px/1.5 ui-monospace,monospace;}
/* 펜/형광펜 색 상자는 페이지를 가리는 화면 아래가 아니라,
편집 툴바 바로 아래 — 페이지 위쪽에 띄운다. */
.draw-toolbar{
position:fixed;top:calc(var(--sdy-edbar-bottom, 56px) + 10px);bottom:auto;
left:50%;transform:translateX(-50%);
background:var(--card);border:1px solid var(--border);border-radius:16px;
padding:7px 10px;display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;align-items:center;
box-shadow:0 10px 28px rgba(0,0,0,.18);z-index:1250;
max-width:min(960px, calc(100vw - 20px));
overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
}
/* 15.30 · 도구별 노출 — 막대에는 '펜' 라벨 대신 지금 도구에 맞는 조작만.
펜: 색+굵기+펜촉+도형 · 형광펜: 색+굵기+도형 · 페인트: 색만
지우개: 지우개 모드(픽셀/획)+지우개 굵기 */
/* 15.31 · 도구별 노출의 기준값은 '숨김' 이다. 예전엔 색·굵기·도형이
기본 표시라, 도구 표시 클래스가 붙기 전(또는 페인트·지우개에서)
도형 묶음이 남아 도구막대가 두 줄로 커졌다. */
/* 15.31.1 · 도형 묶음이 세로로 쌓이던 원인 — 15.30 에는 .dt-shapes 규칙이
아예 없어 평범한 block div 였고, 안의 버튼은 .tool-btn{display:flex}
(블록 레벨)이라 다섯 개가 위에서 아래로 쌓여 상자가 다섯 줄로 커졌다.
이제 묶음은 언제나 가로 한 줄(flex-direction:row · nowrap)이다. */
.dt-nibs,.dt-eraser,.dt-shapes{display:none;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:2px;flex:none;}
/* 도형 뒤의 지우개 설정은 별도 모드에서만 보이므로 끝 구분선은 필요 없다. */
.draw-toolbar .dt-e-sep{display:none;}
.draw-toolbar.pen-on .dt-nibs{display:flex;}
.draw-toolbar.pen-on .dt-shapes,
.draw-toolbar.marker-on .dt-shapes{display:flex;}
/* 클래스가 아직 안 붙은 찰나에도 펜 기준으로 보여 준다(두 줄로 커짐 방지) */
.draw-toolbar:not(.pen-on):not(.marker-on):not(.paint-on):not(.eraser-on) .dt-shapes,
.draw-toolbar:not(.pen-on):not(.marker-on):not(.paint-on):not(.eraser-on) .dt-nibs{display:flex;}
.draw-toolbar.eraser-on .dt-eraser{display:flex;}
.draw-toolbar.eraser-on .dt-colors,
.draw-toolbar.eraser-on .dt-shapes,
.draw-toolbar.eraser-on .dt-nibs,
.draw-toolbar.eraser-on .dt-c-sep,
.draw-toolbar.eraser-on .dt-n-sep,
.draw-toolbar.eraser-on .dt-e-sep{display:none;}
.draw-toolbar.paint-on .dt-sizes,
.draw-toolbar.paint-on .dt-s-sep,
.draw-toolbar.paint-on .dt-nibs,
.draw-toolbar.paint-on .dt-n-sep,
.draw-toolbar.paint-on .dt-shapes,
.draw-toolbar.paint-on .dt-e-sep,
.draw-toolbar.paint-on .dt-c-sep{display:none;}
.draw-toolbar.marker-on .dt-nibs,
.draw-toolbar.marker-on .dt-n-sep{display:none;}
.dt-colors{
display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px;flex:none;
padding:5px 7px;border-radius:999px;background:#fff;
box-shadow:0 1px 2px rgba(0,0,0,.16), inset 0 0 0 1px rgba(15,23,42,.06);
}
.dt-sizes{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:4px;flex:none;padding:0 2px;}
.color-pick{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;flex:none;box-sizing:border-box;}
.color-pick:hover,.color-pick.sel{border-color:var(--text1);transform:scale(1.1);}
.draw-toolbar .dt-colors .color-pick{
width:24px;height:24px;min-width:24px;border:2px solid #fff;
box-shadow:0 0 0 1px rgba(15,23,42,.22);transform:none;
}
.draw-toolbar .dt-colors .color-pick:hover{transform:translateY(-1px);}
.draw-toolbar .dt-colors .color-pick.sel{
border-color:#fff;transform:none;
box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--accent);
}
#penCustom.color-pick{
appearance:none;-webkit-appearance:none;padding:0;border:2px solid #fff;
background:conic-gradient(from 210deg,#ff4d4d,#ffb020,#ffe14a,#3ddc78,#3aa0ff,#b06bff,#ff4d4d);
box-shadow:0 0 0 1px rgba(15,23,42,.22);
}
#penCustom.color-pick.sel{border-style:solid;border-color:#fff;outline:none;
box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--accent);}
#penCustom::-webkit-color-swatch-wrapper{padding:3px;border:0;border-radius:50%;}
#penCustom::-webkit-color-swatch{border:0;border-radius:50%;}
#penCustom::-moz-color-swatch{border:3px solid transparent;border-radius:50%;}
/* 15.30 · 굵기 버튼은 전부 같은 크기(26px) — 안에 보이는 점만 굵기별.
얇은 굵기를 고르려고 콩알만한 버튼을 누르는 일이 없게 한다. */
.size-opt{
width:26px;height:26px;min-width:26px;min-height:26px;flex:none;
border-radius:50%;border:0;padding:0;background:transparent;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;position:relative;
}
/* 15.32 · 굵기 점은 버튼 정중앙에 못 박는다 — 굵은 점(17px)일수록
0.5px 어긋나도 흰 띠 폭이 달라 보여 '중심이 안 맞는' 것처럼 보였다.
flex 정렬 대신 left/top 50% + translate 로 어느 브라우저에서도 정확히 중앙. */
.size-opt::after{
content:'';position:absolute;left:50%;top:50%;
width:var(--d,8px);height:var(--d,8px);margin:0;flex:none;
transform:translate(-50%,-50%);
border-radius:50%;background:var(--text1);transition:transform .12s ease;
}
.size-opt:hover::after{transform:translate(-50%,-50%) scale(1.18);}
.size-opt.sel{outline:2px solid var(--accent);outline-offset:1px;}
.size-opt.sel::after{background:var(--accent);}
.draw-toolbar .tool-btn{flex:none;}
.draw-toolbar .ed-icon{
display:block;flex:none;width:21px;height:21px;overflow:visible;
fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
/* 15.42.16 · 펜·형광펜 색상판이 떠도 화면이 내려가지 않게 한다.
과거엔 색상판 높이만큼 .editor-body 에 padding-top 을 붙여 첫 페이지
제목을 가리지 않게 했는데, 그 여백이 화면을 아래로 밀어 사용자가
서 있는 자리까지 쏠리게 했다. 색상판은 position:fixed 라 본문 흐름에
영향을 주지 않으므로, 여백은 언제나 일정하게 유지한다. */
.toast{
position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-80px);
background:var(--text1);color:var(--bg);padding:10px 24px;border-radius:4px;
font-size:13px;opacity:0;transition:all .4s;z-index:9998;
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,0.4);backdrop-filter:blur(4px);z-index:1900;display:none;align-items:center;justify-content:center;padding:16px;}
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.modal-box{background:var(--card);border:1px solid var(--border);border-radius:5px;padding:24px;max-width:420px;width:100%;animation:fadeInUp .28s ease-out;}
/* 14.13 · 토글은 앱 전체의 라운드/필(999px) 디자인 언어에 맞춰 사각을 버림 */
.tgl{position:relative;width:44px;height:24px;background:var(--border);border-radius:999px;cursor:pointer;transition:background .25s;}
.tgl.on{background:var(--accent);}
.tgl .dot{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .3s;}
.tgl.on .dot{transform:translateX(20px);}
.set-row{padding:14px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.set-row:last-child{border:none;}
.set-row .set-label{display:flex;flex-direction:column;gap:2px;min-width:0;}
.set-row .set-label .dim{font-size:11px;color:var(--text3);}
/* 16.x · 설정값(select·스위치·스와치)은 오른쪽에 가지런히 — 강조색 9개 스와치가
두 줄로 흘러 '강조색' 라벨만 덩그러니 남던 문제 정리 */
.set-row > .set-label ~ *{margin-left:auto;}
.set-row.accent-row{flex-direction:column;align-items:stretch;gap:10px;}
.set-row.accent-row .set-label ~ *{margin-left:0;}
.set-row select,.set-row input[type=number],.set-row input[type=text]{
padding:7px 10px;border:1px solid var(--border);border-radius:4px;
background:var(--bg2);color:var(--text1);font-size:13px;outline:none;max-width:150px;
}
/* 강조색 스와치 */
.accent-picks{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-start;}
.accent-swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;
transition:transform .12s ease;flex:none;}
.accent-swatch:hover{transform:scale(1.15);}
.accent-swatch.on{border-color:var(--text1);box-shadow:0 0 0 2px var(--bg);}
/* 카드 크기 */
body.card-s .note-card,body.card-s .folder-card,body.card-s .add-card{width:160px;flex-basis:160px;}
body.card-s .note-preview,body.card-s .folder-thumb{height:200px;}
body.card-l .note-card,body.card-l .folder-card,body.card-l .add-card{width:244px;flex-basis:244px;}
body.card-l .note-preview,body.card-l .folder-thumb{height:322px;}
/* 휴지통 목록 */
.trash-item{display:flex;align-items:center;gap:10px;padding:11px 6px;border-bottom:1px solid var(--border);}
.trash-item b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--text1);}
.trash-item .days{font-size:11px;color:var(--text3);flex:none;}
.trash-item button{flex:none;padding:6px 11px;border-radius:4px;border:1px solid var(--border);
background:var(--bg2);color:var(--text1);font-size:12px;cursor:pointer;}
.trash-item button:hover{border-color:var(--accent);color:var(--accent);}
.trash-item button.danger{color:#e74c3c;border-color:rgba(231,76,60,.3);}
.trash-item button.danger:hover{border-color:#e74c3c;background:rgba(231,76,60,.07);}
.size-preset-card{
border:1px solid var(--border);border-radius:4px;padding:12px;cursor:pointer;
display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;
background:var(--bg2);transition:all .2s;
}
.size-preset-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.size-preset-thumb{border:2px solid var(--text3);border-radius:3px;background:#fff;}
.dark .size-preset-thumb:not(:where(.sdy-editor-light,.sdy-editor-light *)){background:#2b2b31;border-color:#888;}
.select-bar{
position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);
background:var(--card);border:1px solid var(--border);border-radius:5px;
padding:10px 20px;display:flex;align-items:center;gap:12px;
box-shadow:0 8px 32px rgba(0,0,0,0.12);z-index:1900;
transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s;opacity:0;
}
.select-bar.show{transform:translateX(-50%) translateY(0);opacity:1;}
.emoji-badge{
position:absolute;top:8px;left:8px;z-index:12;font-size:22px;
width:32px;height:32px;display:flex;align-items:center;justify-content:center;
cursor:pointer;border-radius:3px;transition:background .2s,opacity .2s;opacity:0;
}
.note-card:hover .emoji-badge,.emoji-badge.has-emoji{opacity:1;}
.emoji-badge:hover{background:rgba(0,0,0,0.06);}
/* 15.19 · 빈 반응 칸 자리표 — 글자 '◌' 대신 CSS 원. 글자는 베이스라인 때문에
네모 칸의 정중앙과 원 중심이 어긋나 보였다(사용자 지적). CSS 원은 칸의
기하학적 중앙에 정확히 온다. */
.emoji-badge .emoji-ph{
display:block;width:16px;height:16px;border-radius:50%;box-sizing:border-box;
border:2px dotted var(--text3);opacity:.55;
}
/* 15.19 · 반응을 남긴 뒤에는 이모지만 보인다 — 주변 배경(칩)을 완전히
없앤다(사용자 요청: "이모지 말구 주변 배경이 안보이게. 바로 이모지만
딱 들어가게"). 칩은 아직 반응 없는 칸(자리표)에만 남는다. */
.emoji-badge.has-emoji,
.emoji-badge.has-emoji:hover{
background:transparent!important;border-color:transparent!important;
box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.emoji-picker{
position:absolute;top:38px;left:4px;z-index:30;
background:var(--card);border:1px solid var(--border);border-radius:4px;
padding:6px;display:none;flex-wrap:wrap;gap:2px;width:180px;
box-shadow:0 6px 20px rgba(0,0,0,0.12);
}
.emoji-picker.open{display:flex;}
.emoji-opt{
width:30px;height:30px;display:flex;align-items:center;justify-content:center;
font-size:18px;cursor:pointer;border-radius:3px;
}
.emoji-opt:hover{background:rgba(0,0,0,0.08);}
/* 업로드 진행 중 이미지 */
.paper-img.pending{opacity:.62;}
.paper-img.pending::after{
content:'';position:absolute;left:6px;top:6px;width:14px;height:14px;border-radius:50%;
border:2px solid rgba(79,110,247,.35);border-top-color:var(--accent);
animation:spin .8s linear infinite;z-index:7;
}
.paper-img.failed{outline:2px dashed #e74c3c;opacity:.85;}
/* 잠긴 노트 카드 */
.note-card.locked .note-preview-frame{filter:blur(9px);opacity:.5;}
.lock-overlay{
position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:8px;z-index:13;color:var(--text2);background:rgba(255,255,255,.30);pointer-events:none;
}
.dark .lock-overlay:not(:where(.sdy-editor-light,.sdy-editor-light *)){background:rgba(20,20,24,.35);}
.lock-overlay i{font-size:30px;color:var(--accent);}
.lock-overlay span{font-size:11px;font-weight:600;}
.unlock-badge{
position:absolute;right:8px;top:8px;z-index:14;width:24px;height:24px;border-radius:50%;
background:var(--card);color:var(--accent);display:flex;align-items:center;justify-content:center;
box-shadow:0 1px 5px rgba(0,0,0,.15);font-size:13px;
}
.note-card:hover .unlock-badge{opacity:0;}
.pin-badge{
position:absolute;left:8px;top:8px;z-index:14;font-size:13px;color:var(--accent);
background:var(--card);border-radius:50%;width:24px;height:24px;
display:flex;align-items:center;justify-content:center;box-shadow:0 1px 5px rgba(0,0,0,.15);
}
.card-menu{
position:absolute;right:6px;top:6px;z-index:15;width:26px;height:26px;border-radius:3px;
display:none;align-items:center;justify-content:center;cursor:pointer;
background:var(--card);color:var(--text2);box-shadow:0 1px 6px rgba(0,0,0,.16);font-size:15px;
}
.note-card:hover .card-menu{display:flex;}
@media(hover:none){
.card-menu{display:flex;} /* 터치 기기: 항상 보이게 */
.emoji-badge{opacity:.55;}
}
.card-menu:hover{color:var(--accent);}
body:has(#ctxMenu.show) #musicPlayer,
body:has(#ctxMenu.show) #mpReopen{display:none!important;}
/* 우클릭 메뉴 — 확대 배율(--ctxz)에 맞춰 같이 커지고,
길어지면 잘리지 않고 스스로 스크롤된다. */
.ctx-menu{
--ctxz:1;
position:fixed;z-index:600;background:var(--card);border:1px solid var(--border);
border-radius:calc(10px * var(--ctxz));padding:calc(6px * var(--ctxz));
min-width:calc(184px * var(--ctxz));
/* 9.0 · 종이를 아무리 확대해도 메뉴는 이 폭을 넘지 않는다 */
max-width:min(300px, calc(100vw - 16px));
box-shadow:0 12px 34px rgba(0,0,0,.20);display:none;
overflow-y:auto;overscroll-behavior:contain;
/* 확대된 종이 위에 떠도 메뉴만은 원래 크기로 (transform 상속 차단) */
transform:none!important;zoom:normal;
}
.ctx-menu.show{display:block;}
.ctx-menu::-webkit-scrollbar{width:calc(8px * var(--ctxz));}
.ctx-item{
display:flex;align-items:center;gap:calc(9px * var(--ctxz));
padding:calc(9px * var(--ctxz)) calc(11px * var(--ctxz));
border-radius:calc(7px * var(--ctxz));
font-size:calc(13px * var(--ctxz));color:var(--text1);cursor:pointer;white-space:nowrap;
}
.ctx-item i{font-size:calc(15px * var(--ctxz));width:calc(17px * var(--ctxz));
text-align:center;flex:none;color:var(--text2);}
.ctx-item:hover{background:var(--bg2);}
.ctx-item.danger,.ctx-item.danger i{color:#e74c3c;}
.ctx-key{margin-left:auto;color:var(--text3);font-size:calc(11px * var(--ctxz));
padding-left:calc(10px * var(--ctxz));}
.ctx-sep{height:1px;background:var(--border);margin:calc(4px * var(--ctxz)) calc(2px * var(--ctxz));}
/* 접힌 묶음 */
.ctx-group .ctx-caret{margin-left:auto;transition:transform .15s;
font-size:calc(15px * var(--ctxz));}
.ctx-group.open{background:var(--bg2);font-weight:700;}
.ctx-group.open .ctx-caret{transform:rotate(90deg);}
.ctx-subwrap{margin:calc(2px * var(--ctxz)) 0 calc(4px * var(--ctxz));
padding-left:calc(10px * var(--ctxz));
border-left:2px solid var(--border);}
.ctx-subwrap .ctx-item{font-size:calc(12.5px * var(--ctxz));
padding-top:calc(8px * var(--ctxz));padding-bottom:calc(8px * var(--ctxz));}
/* ===== 암기 카드 — 10.7 · 음악플레이어식 플로팅 윈도우 ===== */
/* 서버 팝오버(1650)보다 위에 떠야 겹쳐 보이지 않는다 */
/* 10.8 · 완전 플로팅: 배경 어둡힘/블러 없음(음악플레이어와 동일),
창만 떠 있고 바깥 터치로 닫힌다 */
/* 10.9 · 배경 흐림(블러) 완전 제거 — 음악 플레이어와 똑같이 뒤가 또렷하게 보인다.
.modal-bg 공통 규칙(blur 4~5px)이 여기까지 따라오지 않도록 !important 로 끊는다. */
#cardsModal{z-index:1700;background:transparent !important;pointer-events:none;padding:0;
backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
filter:none !important;}
#cardsModal::before,#cardsModal::after{display:none !important;}
.fcard-win{pointer-events:auto;width:min(760px,96vw) !important;max-width:min(760px,96vw) !important;
max-height:92vh;display:flex;flex-direction:column;
padding:0 !important;overflow:hidden;position:fixed;left:50%;top:50%;
transform:translate(-50%,-50%);
box-shadow:0 22px 70px rgba(0,0,0,.30);
animation:fcIn .32s cubic-bezier(.22,.9,.3,1.08);}
.fcard-win.closing{animation:fcOut .26s cubic-bezier(.5,0,.8,.4) forwards;}
.fcard-win.moved{left:var(--fx,top);transform:none;}
@keyframes fcIn{from{opacity:0;transform:translate(-50%,-50%) translateY(30px) scale(.96);}
to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
@keyframes fcOut{to{opacity:0;transform:translate(-50%,-50%) translateY(40px) scale(.9);}}
@keyframes fcInMove{from{opacity:0;transform:translateY(30px) scale(.96);}
to{opacity:1;transform:none;}}
.fcard-win.moved{animation:fcInMove .32s cubic-bezier(.22,.9,.3,1.08);}
.fcard-win.moved.closing{animation:fcOutMove .26s forwards !important;}
@keyframes fcOutMove{to{opacity:0;transform:translateY(40px) scale(.9);}}
.fcard-head{display:flex;align-items:center;gap:8px;padding:3px 8px;flex:none;
background:var(--bg2);border-bottom:1px solid var(--border);min-height:20px;
cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;}
.fcard-head:active{cursor:grabbing;}
.fcard-head>i{color:var(--text3);font-size:12px;opacity:.7;}
.fcard-head>b{font-size:12px;color:var(--text2);font-weight:700;}
.fcard-head .sp{flex:1;}
.fcard-head .cards-x{width:22px;height:19px;font-size:14px;border-radius:6px;}
/* 10.8 · 크기 조절 손잡이 제거(음악플레이어와 동일) */
/* 학습 모드 선택 카드 (Quizlet 스타일) */
.fc-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px;}
@media(max-width:560px){.fc-modes{grid-template-columns:repeat(2,1fr);}}
.fc-mode{display:flex;flex-direction:row;align-items:center;gap:8px;padding:13px 12px;
border:1px solid var(--border);border-radius:12px;background:var(--bg2);cursor:pointer;
text-align:left;transition:transform .15s,border-color .15s;}
.fc-mode:hover{border-color:var(--accent);transform:translateY(-2px);}
.fc-mode:active{transform:scale(.97);}
.fc-mode i{font-size:19px;color:var(--accent);margin-bottom:0;flex:none;}
.fc-mode b{font-size:12.5px;color:var(--text1);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;min-width:0;}
/* 오답 순위 목록 — 눌러서 바로 그 문제 다시 보기 */
.cd-hard .h{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:8px;
border:1px solid transparent;cursor:pointer;}
.cd-hard .h:hover{background:var(--bg2);border-color:color-mix(in srgb,var(--accent) 30%,transparent);}
.cd-hard .h b{margin-left:auto;color:#ef4444;font-size:11px;flex:none;}
.cd-hard .h .go{flex:none;color:var(--text3);font-size:13px;}
.cards-head{display:none;}
.cards-x{width:32px;height:32px;border:none;background:transparent;color:var(--text3);
border-radius:8px;cursor:pointer;font-size:19px;}
.cards-x:hover{background:var(--bg2);}
#cardsHome,#cardsStudy,#cardsPaste,#cardsStats,#cardsAnalytics,#cardsBrowse{padding:14px 16px 16px;overflow-y:auto;min-height:0;}
.cards-actions{display:flex;gap:7px;flex-wrap:wrap;}
.cd-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
padding:10px 13px;border:1px solid var(--border);border-radius:10px;
background:var(--bg2);color:var(--text1);font-size:12.5px;font-weight:700;cursor:pointer;}
.cd-btn:hover{border-color:var(--accent);color:var(--accent);}
.cd-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.cd-btn.primary:hover{filter:brightness(1.08);color:#fff;}
.cards-list{margin-top:13px;display:flex;flex-direction:column;gap:7px;}
.cd-deck{display:flex;align-items:center;gap:11px;padding:12px;border-radius:11px;
border:1px solid var(--border);background:var(--bg2);cursor:pointer;}
.cd-deck:hover{border-color:var(--accent);}
.cd-deck .t{flex:1;min-width:0;}
.cd-deck .t b{display:block;font-size:13.5px;color:var(--text1);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cd-deck .t span{font-size:11px;color:var(--text3);}
.cd-ring{width:38px;height:38px;flex:none;border-radius:50%;display:flex;
align-items:center;justify-content:center;font-size:10.5px;font-weight:800;
color:var(--accent);}
.cd-deck .more{width:30px;height:30px;border:none;background:transparent;flex:none;
color:var(--text3);border-radius:7px;cursor:pointer;font-size:17px;}
.cd-deck .more:hover{background:var(--card);color:var(--text1);}
.cd-empty{padding:34px 12px;text-align:center;color:var(--text3);font-size:12.5px;line-height:1.7;}
/* 학습 */
.cd-topbar{display:flex;align-items:center;gap:10px;margin-bottom:13px;}
.cd-back{width:32px;height:32px;border:none;background:var(--bg2);color:var(--text1);
border-radius:8px;cursor:pointer;font-size:16px;flex:none;
display:flex;align-items:center;justify-content:center;line-height:1;}
.cd-prog{flex:1;height:6px;border-radius:99px;background:var(--bg2);overflow:hidden;}
#cdProgFill{height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .3s;}
.cd-count{font-size:11.5px;color:var(--text3);flex:none;font-variant-numeric:tabular-nums;}
.cd-flip{perspective:1200px;cursor:pointer;user-select:none;display:block;width:100%;}
/* 높이를 확실히 잡아 준다 (min-height 만 주면 절대배치 면이 0 이 된다) */
.cd-inner{position:relative;width:100%;height:230px;
transition:transform .45s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d;}
.cd-flip.flipped .cd-inner{transform:rotateY(180deg);}
.cd-face{position:absolute;inset:0;backface-visibility:hidden;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:9px;padding:24px 20px;border-radius:16px;border:1px solid var(--border);
background:var(--bg2);text-align:center;}
.cd-rear{transform:rotateY(180deg);
background:color-mix(in srgb,var(--accent) 9%,var(--bg2));
border-color:color-mix(in srgb,var(--accent) 32%,var(--border));}
.cd-txt{font-size:17px;font-weight:700;color:var(--text1);line-height:1.55;
word-break:break-word;white-space:pre-wrap;}
.cd-hint{font-size:12px;color:var(--text3);}
.cd-note{font-size:12px;color:var(--text2);line-height:1.6;white-space:pre-wrap;}
.cd-tap{position:absolute;bottom:12px;font-size:10.5px;color:var(--text3);opacity:.75;}
.cd-grade{display:flex;gap:9px;margin-top:13px;}
.cd-grade button{flex:1;padding:14px;border:none;border-radius:12px;cursor:pointer;
font-size:13.5px;font-weight:800;display:flex;align-items:center;
justify-content:center;gap:6px;}
.cd-ng{background:rgba(239,68,68,.13);color:#ef4444;}
.cd-ok{background:rgba(16,185,129,.15);color:#059669;}
.cd-ng:active,.cd-ok:active{transform:scale(.97);}
.cd-done{display:flex;flex-direction:column;align-items:center;gap:9px;padding:40px 16px;text-align:center;}
.cd-done i{font-size:42px;color:#10b981;}
.cd-done b{font-size:15px;color:var(--text1);}
.cd-done span{font-size:12px;color:var(--text3);}
.cd-name{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;
background:var(--bg2);color:var(--text1);font-size:13px;outline:none;margin-bottom:8px;}
.cd-name:focus{border-color:var(--accent);}
.cd-paste{width:100%;height:min(290px,40vh);padding:12px;border:1px solid var(--border);
border-radius:11px;background:var(--bg2);color:var(--text1);font-size:12.5px;
line-height:1.6;resize:vertical;outline:none;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.cd-paste:focus{border-color:var(--accent);}
.cd-pinfo{min-height:19px;margin:8px 2px 10px;font-size:11.5px;color:var(--text3);}
.cd-pinfo.ok{color:#059669;}
.cd-pinfo.ok b{color:#059669;}
.cd-pinfo.bad{color:#e74c3c;}
.cd-pinfo span{color:var(--text3);font-weight:400;}
/* ── 채점 4단계 (SM-2) ── */
.cd-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:13px;}
.cd-grade button{flex:1;padding:11px 4px;border:none;border-radius:11px;cursor:pointer;
display:flex;flex-direction:column;align-items:center;gap:2px;}
.cd-grade button b{font-size:12.5px;font-weight:800;}
.cd-grade button span{font-size:9.5px;opacity:.75;font-weight:600;}
.cd-grade .g0{background:rgba(239,68,68,.13);color:#ef4444;}
.cd-grade .g1{background:rgba(245,158,11,.15);color:#b45309;}
.cd-grade .g2{background:rgba(59,130,246,.13);color:#2563eb;}
.cd-grade .g3{background:rgba(16,185,129,.15);color:#059669;}
.cd-grade button:active{transform:scale(.96);}
.dark .cd-grade .g1:not(:where(.sdy-editor-light,.sdy-editor-light *)){color:#fbbf24;}
/* ── 객관식 ── */
.cd-qq{font-size:16px;font-weight:700;color:var(--text1);line-height:1.55;
padding:16px 14px;border-radius:14px;background:var(--bg2);
border:1px solid var(--border);text-align:center;white-space:pre-wrap;}
.cd-opts{display:flex;flex-direction:column;gap:7px;margin-top:11px;}
.cd-opt{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:11px;
border:1.5px solid var(--border);background:var(--bg2);color:var(--text1);
font-size:13.5px;cursor:pointer;text-align:left;transition:all .15s;}
.cd-opt:hover{border-color:var(--accent);}
.cd-opt i.num{width:22px;height:22px;border-radius:50%;background:var(--card);
border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:800;font-style:normal;color:var(--text2);flex:none;}
.cd-opt span{flex:1;}
.cd-opt.ok{border-color:#10b981;background:rgba(16,185,129,.14);color:#059669;font-weight:700;}
.cd-opt.ok i.num{background:#10b981;color:#fff;border-color:#10b981;}
.cd-opt.no{border-color:#ef4444;background:rgba(239,68,68,.12);color:#ef4444;}
.cd-opt.no i.num{background:#ef4444;color:#fff;border-color:#ef4444;}
.cd-opt[disabled]{cursor:default;}
/* ── 직접 입력 ── */
.cd-typein{width:100%;margin-top:11px;padding:14px;border:1.5px solid var(--border);
border-radius:12px;background:var(--bg2);color:var(--text1);font-size:15px;outline:none;}
.cd-typein:focus{border-color:var(--accent);}
.cd-typeres{min-height:22px;margin:9px 2px;font-size:12.5px;font-weight:700;}
.cd-typeres.ok{color:#059669;} .cd-typeres.no{color:#ef4444;}
.cd-typeres em{font-style:normal;color:var(--text2);font-weight:400;}
.cd-hintbtn{position:absolute;bottom:34px;padding:5px 12px;border-radius:99px;
border:1px solid var(--border);background:var(--card);color:var(--text3);
font-size:11px;cursor:pointer;}
.cd-hintbtn:hover{color:var(--accent);border-color:var(--accent);}
/* ── 학습 방식 고르기 ── */
.cd-statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px;}
.cd-stat{padding:10px 4px;border-radius:11px;background:var(--bg2);text-align:center;}
.cd-stat b{display:block;font-size:17px;font-weight:800;color:var(--text1);}
.cd-stat span{font-size:10px;color:var(--text3);}
.cd-stat.due b{color:var(--accent);}
.cd-lbl{font-size:11px;font-weight:800;color:var(--text3);margin:4px 2px 7px;letter-spacing:.04em;}
.cd-modes{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;}
.cd-mode{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg2);
color:var(--text1);cursor:pointer;text-align:left;}
.cd-mode:hover{border-color:var(--accent);}
.cd-mode i{font-size:18px;color:var(--accent);margin-bottom:3px;}
.cd-mode b{font-size:13px;}
.cd-mode span{font-size:10.5px;color:var(--text3);line-height:1.4;}
.cd-mode[disabled]{opacity:.4;cursor:not-allowed;}
.cd-tagpick{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.cd-tag{padding:6px 11px;border-radius:99px;border:1px solid var(--border);
background:var(--bg2);color:var(--text2);font-size:11.5px;cursor:pointer;}
.cd-tag.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;}
.cd-hard{margin-top:12px;}
.cd-hard .h{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;
font-size:11.5px;color:var(--text2);}
.cd-hard .h b{margin-left:auto;color:#ef4444;font-size:11px;flex:none;}
/* ═══════ 11.7 · 짝 맞추기 (Match) ═══════ */
.cd-match{display:flex;flex-direction:column;gap:10px;}
.cd-mtop{display:flex;align-items:center;justify-content:space-between;
font-size:11.5px;color:var(--text3);padding:0 2px;}
.cd-mtop b{font-variant-numeric:tabular-nums;font-size:13px;color:var(--accent);}
.cd-mgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;}
@media(min-width:620px){ .cd-mgrid{grid-template-columns:repeat(3,1fr);} }
.cd-tile{position:relative;min-height:62px;padding:11px 12px;border-radius:12px;
border:1.5px solid var(--border);background:var(--bg2);color:var(--text1);
font-size:12.5px;line-height:1.4;cursor:pointer;text-align:left;
display:flex;align-items:center;word-break:break-word;
transition:transform .14s,border-color .16s,background .16s,opacity .3s;}
.cd-tile:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));}
.cd-tile:active{transform:scale(.97);}
.cd-tile.pick{border-color:var(--accent);
background:color-mix(in srgb,var(--accent) 15%,transparent);font-weight:700;}
.cd-tile.bad{border-color:#ef4444;background:rgba(239,68,68,.13);
animation:cdShake .32s;}
@keyframes cdShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}
75%{transform:translateX(5px)}}
.cd-tile.gone{opacity:0;pointer-events:none;transform:scale(.9);}
.cd-tile .ans{color:var(--text2);}
.cd-mdone{text-align:center;padding:16px 10px 6px;}
.cd-mdone b{display:block;font-size:20px;color:var(--accent);
font-variant-numeric:tabular-nums;margin-bottom:4px;}
.cd-mdone span{font-size:12px;color:var(--text3);}
.cd-mdone .best{color:#10b981;font-weight:800;}
/* 마스터 학습 진행 표시 */
.cd-mastery{display:flex;align-items:center;gap:7px;font-size:11px;
color:var(--text3);margin:-4px 2px 8px;}
.cd-mastery .bar{flex:1;height:5px;border-radius:99px;background:var(--bg2);overflow:hidden;}
.cd-mastery .bar i{display:block;height:100%;width:0;border-radius:99px;
background:linear-gradient(90deg,var(--accent),#10b981);transition:width .4s;}
.cd-mastery b{color:var(--accent);font-variant-numeric:tabular-nums;}
/* ═══════ 11.1 · 문제가 많아져도 편한 목록 · 페이지 넘기기 ═══════ */
.cd-listbar{display:flex;align-items:center;gap:8px;margin:11px 0 2px;padding:7px 10px;
border:1px solid var(--border);border-radius:10px;background:var(--bg2);}
.cd-listbar>i{color:var(--text3);font-size:14px;flex:none;}
.cd-listbar input{flex:1;min-width:0;border:none;outline:none;background:transparent;
color:var(--text1);font-size:12.5px;font-weight:600;}
.cd-listbar select{border:1px solid var(--border);background:var(--card);color:var(--text2);
border-radius:8px;font-size:11px;font-weight:700;padding:4px 6px;outline:none;cursor:pointer;flex:none;}
.cd-listbar .cd-count{white-space:nowrap;}
.cd-pager{display:none;align-items:center;justify-content:center;gap:10px;margin-top:11px;
font-size:11.5px;color:var(--text3);font-variant-numeric:tabular-nums;}
.cd-pager button{border:1px solid var(--border);background:var(--bg2);color:var(--text1);
border-radius:8px;cursor:pointer;padding:6px 12px;font-size:11.5px;font-weight:700;}
.cd-pager button:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.cd-pager button:disabled{opacity:.35;cursor:default;}
.cd-icobtn{width:32px;height:32px;flex:none;border:1px solid var(--border);background:var(--bg2);
color:var(--text2);border-radius:8px;cursor:pointer;font-size:16px;
display:flex;align-items:center;justify-content:center;}
.cd-icobtn:hover{color:var(--accent);border-color:var(--accent);}
/* 문제 관리 목록 */
.cd-brlist{display:flex;flex-direction:column;gap:6px;margin-top:9px;}
.cd-br{display:flex;align-items:flex-start;gap:9px;padding:10px 10px 9px;border-radius:10px;
border:1px solid var(--border);background:var(--bg2);cursor:pointer;}
.cd-br:hover{border-color:var(--accent);}
.cd-br .n{flex:none;min-width:22px;height:22px;padding:0 5px;border-radius:6px;background:var(--card);
border:1px solid var(--border);color:var(--text3);font-size:10.5px;font-weight:800;
display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;}
.cd-br .q{flex:1;min-width:0;}
.cd-br .q b{display:block;font-size:12.5px;font-weight:700;color:var(--text1);line-height:1.45;
overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.cd-br .cs{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;}
.cd-br .cs em{font-style:normal;font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:99px;
background:var(--card);border:1px solid var(--border);color:var(--text3);}
.cd-br .cs em.due{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);}
.cd-br .cs em.bad{color:#ef4444;border-color:rgba(239,68,68,.4);}
.cd-br .cs em.good{color:#059669;border-color:rgba(16,185,129,.4);}
.dark .cd-br .cs em.good:not(:where(.sdy-editor-light,.sdy-editor-light *)){color:#34d399;}
.cd-br .mo{width:26px;height:26px;flex:none;border:none;background:transparent;color:var(--text3);
border-radius:7px;cursor:pointer;font-size:15px;}
.cd-br .mo:hover{background:var(--card);color:var(--text1);}
/* 뒤집기 카드 채점(2단계) */
.cd-grade2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
.cd-grade2 button{padding:13px;border:none;border-radius:12px;cursor:pointer;
font-size:13px;font-weight:800;}
.cd-grade2 button:active{transform:scale(.97);}
/* 시험 문항 수 고르기 */
.cd-testpick{display:none;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px;
padding:9px 10px;border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--border));
border-radius:11px;background:color-mix(in srgb,var(--accent) 6%,var(--bg2));}
.cd-testpick.show{display:flex;}
.cd-testpick b{font-size:11.5px;color:var(--text2);margin-right:2px;}
.cd-testpick button{border:1px solid var(--border);background:var(--card);color:var(--text1);
border-radius:8px;cursor:pointer;padding:6px 12px;font-size:11.5px;font-weight:800;}
.cd-testpick button:hover{border-color:var(--accent);color:var(--accent);}
/* 객관식 — 시험 모드는 정오답을 숨기고 고른 것만 표시 */
.cd-opt.pick{border-color:var(--accent);
background:color-mix(in srgb,var(--accent) 14%,transparent);font-weight:700;}
.cd-opt.pick i.num{background:var(--accent);color:#fff;border-color:var(--accent);}
/* 시험 성적표 */
.cd-report{display:flex;flex-direction:column;gap:12px;padding:4px 0 2px;}
.rep-top{display:flex;align-items:center;gap:14px;padding:14px;border-radius:14px;
background:var(--bg2);border:1px solid var(--border);}
.rep-score{width:78px;height:78px;flex:none;border-radius:50%;display:flex;
align-items:center;justify-content:center;}
.rep-score span{width:62px;height:62px;border-radius:50%;background:var(--card);
display:flex;align-items:center;justify-content:center;
font-size:18px;font-weight:900;color:var(--accent);}
.rep-sum{flex:1;min-width:0;}
.rep-sum b{display:block;font-size:14.5px;color:var(--text1);margin-bottom:3px;}
.rep-sum span{font-size:11.5px;color:var(--text3);line-height:1.6;}
.rep-wrong{display:flex;flex-direction:column;gap:8px;}
.rep-w{padding:11px 12px;border-radius:11px;border:1px solid var(--border);background:var(--bg2);}
.rep-w>b{display:block;font-size:12.5px;color:var(--text1);line-height:1.5;margin-bottom:6px;}
.rep-w .a{font-size:11.5px;line-height:1.7;}
.rep-w .a i{font-style:normal;font-weight:800;}
.rep-w .mine{color:#ef4444;}
.rep-w .real{color:#059669;}
.dark .rep-w .real:not(:where(.sdy-editor-light,.sdy-editor-light *)){color:#34d399;}
.rep-w .why{margin-top:6px;font-size:11px;color:var(--text3);line-height:1.65;white-space:pre-wrap;}
@media(max-width:640px){
.cd-br .q b{-webkit-line-clamp:3;}
.cd-listbar{flex-wrap:wrap;}
}
@media(max-width:640px){
.cd-modes{grid-template-columns:1fr;}
.cd-grade button b{font-size:13px;}
}
.cd-desc{font-size:12px;color:var(--text3);line-height:1.75;margin:10px 0 11px;}
.cd-prompt{width:100%;height:min(300px,42vh);padding:12px;border:1px solid var(--border);
border-radius:11px;background:var(--bg2);color:var(--text1);font-size:11.5px;
line-height:1.65;resize:vertical;outline:none;margin-bottom:11px;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
@media(max-width:640px){
/* 10.9 · 모바일에서도 '음악 플레이어'와 똑같은 떠 있는 창 모양.
(예전에는 전체 화면을 덮어서 뒤가 안 보였다) */
.modal-bg .modal-box.cards-box{
width:calc(100vw - 14px);max-width:calc(100vw - 14px) !important;
height:auto;max-height:88dvh;
border-radius:16px;padding:0 !important;}
/* 배경을 화면에 정확히 맞춘다 (100vw 는 스크롤바 때문에 더 넓다) */
#cardsModal{padding:0 !important;overflow:hidden;
left:0;right:0;top:0;bottom:0;width:auto;height:auto;
backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
/* 안쪽이 스크롤되어야 시트가 화면을 넘지 않는다 */
#cardsHome,#cardsStudy,#cardsPaste,#cardsStats,#cardsAnalytics,#cardsBrowse{flex:1;min-height:0;}
.cd-inner{height:40vh;}
.cd-grade button{padding:16px;font-size:14.5px;}
}
/* 6.13 카드 학습 단순화: 답 확인 후 자동 채점·자동 간격 반복 */
#cardsModal{z-index:1700;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
#cardsModal .pl-mini{z-index:1805;}
#cdAutoResult{min-height:25px;margin-top:11px;text-align:center;}
.cd-explain{margin:8px 0 10px;padding:12px 13px;border-radius:12px;
background:color-mix(in srgb,var(--accent) 7%,var(--bg2));
border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border));
color:var(--text2);font-size:12.5px;line-height:1.7;white-space:pre-wrap;}
.cd-explain::before{content:'해설';display:block;color:var(--accent);font-size:10.5px;
font-weight:900;letter-spacing:.06em;margin-bottom:3px;}
.cd-next{width:100%;margin-top:2px;padding:12px!important;}
.cd-analytics{display:flex;flex-direction:column;gap:12px;}
.ana-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.ana-kpi{padding:12px 5px;border:1px solid var(--border);border-radius:12px;background:var(--bg2);text-align:center;}
.ana-kpi b{display:block;font-size:19px;color:var(--text1);}.ana-kpi span{font-size:10.5px;color:var(--text3);}
.ana-sec{padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg2);}
.ana-title{font-size:11.5px;font-weight:900;color:var(--text2);margin-bottom:9px;}
.ana-days{display:flex;align-items:flex-end;gap:4px;height:92px;}
.ana-day{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;}
.ana-day i{display:block;width:100%;max-width:18px;min-height:3px;border-radius:5px 5px 2px 2px;background:var(--accent);}
.ana-day span{font-size:8.5px;color:var(--text3);white-space:nowrap;}
.ana-row{display:grid;grid-template-columns:minmax(70px,1fr) 2fr auto;align-items:center;gap:8px;margin:7px 0;font-size:11.5px;}
.ana-row .track{height:6px;border-radius:99px;background:var(--card);overflow:hidden;}
.ana-row .track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),#8b5cf6);}
.ana-row em{font-style:normal;color:var(--text3);font-size:10.5px;}
.ana-weak{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px dashed var(--border);font-size:11.5px;}
.ana-weak:first-of-type{border-top:0}.ana-weak span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ana-weak b{color:#ef4444;font-size:10.5px;}
#cardsAnalytics{padding:14px 16px 16px;overflow-y:auto;min-height:0;}
.cd-streak{flex:none;padding:3px 8px;border-radius:99px;
background:color-mix(in srgb,#f59e0b 14%,var(--bg2));color:#b45309;
font-size:10.5px;font-weight:800;white-space:nowrap;}
.dark .cd-streak:not(:where(.sdy-editor-light,.sdy-editor-light *)){color:#fbbf24;}
.cd-quiz{position:relative;}
.cd-quiz.cd-cheer .cd-qq{animation:cdHappy .48s cubic-bezier(.2,.9,.3,1);}
@keyframes cdHappy{0%{transform:scale(1)}45%{transform:scale(1.018);box-shadow:0 8px 24px rgba(16,185,129,.16)}100%{transform:scale(1)}}
.cd-spark{position:absolute;z-index:4;left:50%;top:42%;pointer-events:none;
font-size:16px;animation:cdSpark .62s ease-out forwards;}
@keyframes cdSpark{from{opacity:1;transform:translate(-50%,-50%) scale(.5)}
to{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(1.15)}}
.cd-memory{margin:4px 0 15px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg2);}
.cd-memory .line{height:7px;border-radius:99px;background:linear-gradient(90deg,#f59e0b 0%,#60a5fa 48%,#10b981 100%);margin:10px 0 6px;position:relative;}
.cd-memory .dot{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:var(--card);border:3px solid var(--accent);transform:translate(-50%,-50%);}
.cd-memory small{font-size:11px;color:var(--text3);}
.cd-topbar .cd-back[title="학습 나가기"]{color:#e74c3c;}
/* ===== 서버 상태 계기판 (자동차 게이지) ===== */
.srv-gauge{width:40px;height:26px;cursor:pointer;flex:none;display:flex;
align-items:center;justify-content:center;border-radius:8px;
transition:background .15s;}
.srv-gauge:hover{background:var(--bg2);}
.srv-gauge svg{width:38px;height:24px;overflow:visible;}
/* 세 구간을 늘 함께 보여 주고, 바늘이 어디를 가리키는지로 상태를 읽는다 */
.srv-zone{fill:none;stroke-width:3.6;stroke-linecap:butt;opacity:.30;
transition:opacity .35s;}
.srv-zone.z-bad{stroke:#ef4444;}
.srv-zone.z-warn{stroke:#f59e0b;}
.srv-zone.z-good{stroke:#10b981;}
/* 지금 해당하는 구간만 진하게 */
.srv-gauge.bad .z-bad,
.srv-gauge.warn .z-warn,
.srv-gauge.good .z-good{opacity:1;stroke-width:4.4;}
/* ★ transform-box 를 쓰면 선 자체의 상자가 기준이 되어 바늘이 옆으로 틀어진다.
SVG 좌표 그대로 회전해야 중심(20,21)에 정확히 박힌다. */
/* 회전 기준을 SVG 사용자 좌표(20,21)로 못박는다.
transform-box:view-box 를 빼면 선 자신의 상자가 기준이 돼 옆으로 틀어진다. */
.srv-needle{transform-box:view-box;transform-origin:20px 21px;
transition:transform .6s cubic-bezier(.34,1.25,.5,1);}
.srv-needle line{stroke:var(--text1);stroke-width:1.9;stroke-linecap:round;}
.srv-hub{fill:var(--text1);}
.srv-hub2{fill:var(--card);}
.srv-gauge.bad{animation:srvPulse 1.6s ease-in-out infinite;}
@keyframes srvPulse{0%,100%{opacity:1}50%{opacity:.55}}
/* 14.72.4 · '확인 불가'(상태 요청 실패) 는 부하 읽기 값이 없다.
빨강·0점(=진짜 과부하) 과 구별되게 구간도 바늘도 눕히고 흐리게만 둔다. */
.srv-gauge.down{opacity:.62;}
.srv-gauge.down .srv-zone,.srv-gauge.down .srv-needle{opacity:.22;}
/* 상세 팝오버 */
.srv-pop{position:fixed;z-index:1650;width:min(296px,92vw);display:none;
background:var(--card);border:1px solid var(--border);border-radius:14px;
box-shadow:var(--shadow-lg);padding:13px 14px;}
.srv-pop.show{display:block;}
.srv-pop h4{display:flex;align-items:center;gap:7px;font-size:13.5px;
font-weight:800;color:var(--text1);margin-bottom:3px;}
.srv-dot{width:9px;height:9px;border-radius:50%;background:#10b981;flex:none;}
.srv-pop.warn .srv-dot{background:#f59e0b;} .srv-pop.bad .srv-dot{background:#ef4444;}
.srv-pop.down .srv-dot{background:#9aa3b0;}
.srv-sub{font-size:11.5px;color:var(--text3);margin-bottom:11px;}
.srv-row{display:flex;align-items:center;gap:8px;margin:7px 0;font-size:11.5px;color:var(--text2);}
.srv-row b{flex:none;width:52px;font-weight:600;color:var(--text2);}
.srv-track{flex:1;min-width:64px;height:7px;border-radius:99px;background:var(--bg2);overflow:hidden;
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--border) 55%,transparent);}
/* width 전환은 일부 모바일 Chrome에서 팝오버가 display:none→block 될 때
첫 계산값(0)을 붙잡는 일이 있어, 항상 100%인 막대를 scaleX로 그린다. */
.srv-fillbar{display:block;height:100%;width:100%;border-radius:99px;background:#10b981;
transform-origin:left center;transform:scaleX(var(--srv-pct,0));
transition:transform .5s cubic-bezier(.2,.8,.3,1),background .4s;will-change:transform;}
.srv-fillbar.w{background:#f59e0b;} .srv-fillbar.b{background:#ef4444;}
.srv-val{flex:none;min-width:74px;text-align:right;color:var(--text3);
font-variant-numeric:tabular-nums;white-space:nowrap;}
@media(max-width:640px){ .srv-gauge{width:34px;height:24px;} .srv-gauge svg{width:32px;} }
/* ===== 알림 센터 ===== */
.notif-btn{position:relative;overflow:visible!important;}
.notif-badge{position:absolute;right:-2px;top:-3px;min-width:17px;height:17px;padding:0 4px;
border-radius:99px;background:var(--notif-dot);color:var(--notif-dot-ink);font-size:9.5px;font-weight:900;
align-items:center;justify-content:center;border:2px solid var(--bg);line-height:13px;}
.notif-pop{position:fixed;z-index:1660;display:none;width:min(380px,calc(100vw - 16px));
max-height:min(620px,78dvh);overflow:hidden;flex-direction:column;
background:var(--card);border:1px solid var(--border);border-radius:16px;
box-shadow:var(--shadow-lg);}
.notif-pop.show{display:flex;animation:notifIn .18s cubic-bezier(.2,.85,.3,1);}
@keyframes notifIn{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
.notif-head{display:flex;align-items:center;gap:10px;padding:13px 13px 11px;border-bottom:1px solid var(--border);}
.notif-head>div{flex:1;display:flex;align-items:center;gap:9px;}.notif-head b{font-size:15px;}
.notif-head span{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:#059669;font-weight:700;}
.notif-head span i{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.12);}
.notif-head button{border:0;background:var(--bg2);color:var(--text3);border-radius:8px;padding:6px 8px;font-size:10.5px;cursor:pointer;}
.notif-list{overflow-y:auto;padding:6px;min-height:80px;}
.notif-item{display:grid;grid-template-columns:34px minmax(0,1fr) 28px;gap:9px;align-items:start;
padding:10px 8px;border-radius:11px;position:relative;}
.notif-item:hover{background:var(--bg2)}.notif-item.unread{background:color-mix(in srgb,var(--accent) 7%,transparent);}
.notif-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
background:color-mix(in srgb,var(--accent) 12%,var(--bg2));color:var(--accent);font-size:17px;}
.notif-item[data-kind="error"] .notif-ico,.notif-item[data-kind="server"] .notif-ico{background:rgba(239,68,68,.11);color:#ef4444;}
.notif-item[data-kind="study"] .notif-ico{background:rgba(245,158,11,.13);color:#d97706;}
.notif-item[data-kind="achievement"] .notif-ico{background:rgba(16,185,129,.12);color:#059669;}
.notif-copy{min-width:0}.notif-copy b{display:block;font-size:12.5px;color:var(--text1);line-height:1.35;}
.notif-copy p{font-size:11.5px;color:var(--text2);line-height:1.5;margin-top:3px;word-break:break-word;}
.notif-copy time{display:block;font-size:9.5px;color:var(--text3);margin-top:4px;}
.notif-del{width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--text3);cursor:pointer;}
.notif-del:hover{background:rgba(239,68,68,.1);color:#ef4444;}
.notif-empty{padding:34px 12px;text-align:center;color:var(--text3);font-size:12px;line-height:1.7;}
.notif-foot{padding:8px 12px;border-top:1px solid var(--border);color:var(--text3);font-size:9.5px;text-align:center;}
@media(max-width:640px){
.notif-pop{left:6px!important;right:6px!important;top:58px!important;width:auto;max-height:70dvh;border-radius:15px;}
}
.editor-body::-webkit-scrollbar{width:8px;}
.editor-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
/* ================= 5.34 UI 폴리시 ================= */
:root{
--grad:linear-gradient(135deg,#6366f1 0%,#8b5cf6 55%,#ec4899 120%);
--shadow-lg:0 18px 44px -14px rgba(30,40,90,.20);
}
.dark{ --shadow-lg:0 18px 44px -14px rgba(0,0,0,.6); }
::selection{background:rgba(99,102,241,.28);}
*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px;border:2px solid var(--bg);}
*::-webkit-scrollbar-thumb:hover{background:var(--text3);}
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
/* 헤더: 글래스 + 헤어라인 그라데이션 */
.header{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
background:var(--bg);
background:color-mix(in srgb, var(--bg) 84%, transparent);
border-bottom:none;}
.header::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--border) 70%,var(--accent) 30%) 20%,color-mix(in srgb,var(--border) 70%,var(--accent) 30%) 80%,transparent);}
/* 카드: 등장 애니메이션 없음 (로딩 때 띠용거림 제거) */
.note-card,.folder-card{
border-radius:12px;
box-shadow:0 1px 2px rgba(16,24,40,.06),0 10px 26px -14px rgba(16,24,40,.14);}
.dark .note-card:not(:where(.sdy-editor-light,.sdy-editor-light *)),.dark .folder-card:not(:where(.sdy-editor-light,.sdy-editor-light *)){box-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -14px rgba(0,0,0,.5);}
.note-card:hover,.folder-card:hover{
transform:translateY(-5px) scale(1.012);
box-shadow:var(--shadow-lg);
border-color:color-mix(in srgb, var(--accent) 45%, var(--border));}
.note-card::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:13;
background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.14) 48%,transparent 62%);
transform:translateX(-130%);transition:transform .55s ease;}
.note-card:hover::after{transform:translateX(130%);}
.dark .note-card:not(:where(.sdy-editor-light,.sdy-editor-light *))::after{background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.06) 48%,transparent 62%);}
/* 미리보기 로딩 시 튀는(띠용) 애니메이션 제거: transform 전환 없이 바로 표시 */
.note-preview-frame{transition:none;}
.folder-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:13;
background:var(--grad);opacity:0;transition:opacity .25s;}
.folder-card:hover::before{opacity:1;}
/* 에디터 툴바 글래스 + 버튼 마이크로인터랙션 */
.editor-toolbar{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
background:var(--bg);background:color-mix(in srgb, var(--bg) 86%, transparent);}
.tool-btn{border-radius:9px;transition:background .16s,color .16s,transform .1s;}
.tool-btn:active{transform:scale(.88);}
.tool-btn.active{background:var(--grad);color:#fff;
box-shadow:0 3px 12px -2px rgba(99,102,241,.55);}
/* 종이: 깊이감 */
.paper{box-shadow:0 1px 3px rgba(16,24,40,.10),0 18px 44px -18px rgba(16,24,40,.28);border-radius:0;}
.dark .paper:not(:where(.sdy-editor-light,.sdy-editor-light *)){box-shadow:0 1px 3px rgba(0,0,0,.5),0 20px 50px -18px rgba(0,0,0,.7);}
/* 모달/토스트/컨텍스트: 글래스 + 깊이 */
.modal-bg{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
.modal-box{border-radius:16px;box-shadow:var(--shadow-lg);
border-color:color-mix(in srgb, var(--border) 55%, var(--accent) 15%);}
.toast{border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
background:var(--card);background:color-mix(in srgb, var(--card) 88%, transparent);
color:var(--text1);font-weight:600;
box-shadow:var(--shadow-lg);}
.ctx-menu{border-radius:12px;overflow:hidden;
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
background:var(--card);background:color-mix(in srgb, var(--card) 90%, transparent);
box-shadow:var(--shadow-lg);}
.ctx-item{transition:background .14s,transform .14s;}
.ctx-item:hover{background:color-mix(in srgb, var(--accent) 12%, transparent);
transform:translateX(2px);}
/* 포커스 가시성(접근성) */
button:focus-visible,input:focus-visible,select:focus-visible{
outline:2px solid color-mix(in srgb, var(--accent) 70%, transparent);
outline-offset:2px;border-radius:8px;}
/* ================= /5.34 ================= */
/* ================= 5.35 ================= */
/* 첫 화면 가독성 + 부드러움 */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;}
.note-card-name{font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--text1);}
.note-card,.folder-card{
transition:transform .26s cubic-bezier(.22,.9,.32,1),
box-shadow .26s cubic-bezier(.22,.9,.32,1),
border-color .26s cubic-bezier(.22,.9,.32,1);}
.note-card::after{transition:transform .45s cubic-bezier(.22,.9,.32,1);}
/* 카드 렌더 격리 → 스크롤/호버 시 리페인트 범위 축소 (버벅임 감소) */
.note-card,.folder-card{contain:layout paint style;}
/* 글래스 블러 완화 → 스크롤 성능 개선 (모바일) */
.header{backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);}
.editor-toolbar{backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);}
/* ================= /5.35 ================= */
/* ================= 6.1 ================= */
/* 전체 번역 진행률 바 */
#trProg{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:1600;
width:min(420px,86vw);background:var(--card);border:1px solid var(--border);
border-radius:99px;box-shadow:var(--shadow-lg);padding:6px 12px;display:none;
align-items:center;gap:10px;}
#trProg .tr-track{flex:1;height:6px;border-radius:4px;background:var(--bg2);overflow:hidden;}
#trProg .tr-fill{display:block;height:100%;width:0;background:var(--grad);
border-radius:4px;transition:width .25s;}
#trProg .tr-label{font-size:11px;font-weight:700;color:var(--text2);
white-space:nowrap;max-width:46vw;overflow:hidden;text-overflow:ellipsis;}
#trProg .tr-cancel{flex:none;border:none;border-radius:99px;cursor:pointer;
background:var(--bg2);color:var(--text2);font-size:11px;font-weight:800;
padding:5px 11px;line-height:1;transition:background .15s,color .15s;}
#trProg .tr-cancel:hover{background:#e5484d;color:#fff;}
#trProg .tr-cancel:active{transform:scale(.96);}
#trProg .tr-fill.indet{width:38%;transition:none;
animation:trIndet 1.15s ease-in-out infinite;}
@keyframes trIndet{0%{margin-left:0}50%{margin-left:62%}100%{margin-left:0}}
/* 11.3 · '예전 버전 화면' 안내 바 */
#staleBar{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:3000;
display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
max-width:min(680px,94vw);padding:10px 14px;border-radius:14px;
background:color-mix(in srgb,var(--card) 94%,transparent);
border:1px solid color-mix(in srgb,#f59e0b 55%,var(--border));
box-shadow:0 12px 34px rgba(0,0,0,.22);backdrop-filter:blur(10px);
animation:staleIn .3s cubic-bezier(.22,.9,.3,1.08);}
@keyframes staleIn{from{opacity:0;transform:translateX(-50%) translateY(-12px)}
to{opacity:1;transform:translateX(-50%)}}
#staleBar>i{color:#f59e0b;font-size:18px;flex:none;}
#staleBar b{font-size:13px;color:var(--text1);flex:none;}
#staleBar span{font-size:11.5px;color:var(--text3);flex:1;min-width:180px;line-height:1.5;}
#staleBar button{flex:none;border:none;border-radius:10px;cursor:pointer;
background:var(--accent);color:#fff;font-size:12.5px;font-weight:800;padding:8px 14px;}
#staleBar button:hover{filter:brightness(1.08);}
@media(max-width:640px){ #staleBar{left:8px;right:8px;transform:none;max-width:none;}
@keyframes staleIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}} }
/* ================= /6.1 ================= */
/* === style block 2 === */
@keyframes spin{to{transform:rotate(360deg)}}
/* === style block 3 === */
.mp{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:1500;
display:flex;align-items:center;gap:10px;width:min(680px,95vw);padding:7px 11px;
background:var(--card);border:1px solid var(--border);border-radius:14px;
box-shadow:0 8px 30px rgba(0,0,0,.18);
transition:all .38s cubic-bezier(.22,.9,.3,1.12);}
/* 19.0 · 플로팅 모드는 #musicPlayer 가 아니라 전용 음반(#mpDisc)이 맡는다 —
이 자리의 옛 .mp-float 규칙(64px 원형·conic 진행링·모서리 재생 버튼)은
16.1 스킨이 #musicPlayer .mp-cover 크기(50px)를 ID 선택자로 덮어 쓰면서
표지가 중앙에서 4px 어긋나고 진행링이 스킨 배경과 싸우던 근원이라 아래
'19.0 플로팅 음반' 블록으로 통째로 옮겨 다시 만들었다. */
.mp-cover{width:42px;height:42px;border-radius:8px;object-fit:cover;flex:none;background:var(--bg2);}
@keyframes mpspin{to{transform:rotate(360deg)}}
.mp-spin{display:inline-block;animation:mpspin .9s linear infinite;}
/* 11.5 · 머리말의 아주 작은 새로고침 버튼 */
.mpb-head .mpb-mini{width:16px;height:16px;min-width:16px;padding:0;margin-left:1px;
border:none;background:transparent;color:var(--text3);border-radius:5px;
font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;
cursor:pointer;opacity:.65;flex:none;}
.mpb-head .mpb-mini:hover{opacity:1;color:var(--accent);background:var(--bg);}
.mpb-head .mpb-mini.spin i{display:inline-block;animation:mpspin .9s linear infinite;}
.mpb-head .mpb-mini[disabled]{opacity:.4;cursor:default;}
/* 11.4 · 새로고침 버튼 (도는 동안 회전) */
.mpb-icon.spin i,.mp-addpl.spin i{display:inline-block;animation:mpspin .9s linear infinite;}
.mpb-icon[disabled],.mp-addpl[disabled]{opacity:.55;cursor:default;}
.mp-emptybox{padding:22px 14px;text-align:center;color:var(--text3);font-size:12.5px;line-height:1.75;}
.mp-emptybox b{display:block;color:var(--text1);font-size:13.5px;margin-bottom:4px;}
.mp-emptybox button{margin-top:11px;border:1px solid var(--accent);background:var(--accent);
color:#fff;border-radius:10px;cursor:pointer;padding:9px 16px;font-size:12.5px;font-weight:800;
display:inline-flex;align-items:center;gap:6px;}
.mp-emptybox button:hover{filter:brightness(1.08);}
.mp-emptybox .sub{font-size:11px;opacity:.8;margin-top:7px;}
.mp-mid{flex:1;min-width:0;}
.mp-line1{display:flex;align-items:center;gap:6px;min-width:0;}
.mp-title{font-size:12.5px;font-weight:700;color:var(--text1);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;}
/* 지금 재생목록으로 듣는 중이면 알려 준다 */
.mp-badge{flex:none;font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:99px;
background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);
max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* ── 진행바: 얇게 두되 잡기 쉽게 (위아래 여백이 터치 영역) ── */
.mp-prog{position:relative;height:4px;background:var(--bg2);border-radius:99px;
margin:6px 0 3px;cursor:pointer;touch-action:none;
transition:height .12s ease;}
.mp-prog::before{content:'';position:absolute;left:0;right:0;top:-9px;bottom:-9px;}
.mp-prog:hover,.mp-prog.seeking{height:7px;}
.mp-buf{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;
background:var(--border);opacity:.75;}
#mpFill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;
background:linear-gradient(90deg,var(--accent),var(--accent2));}
.mp-knob{position:absolute;top:50%;left:0;width:11px;height:11px;border-radius:50%;
background:var(--accent);border:2px solid var(--card);box-shadow:0 1px 4px rgba(0,0,0,.3);
transform:translate(-50%,-50%) scale(0);transition:transform .12s ease;pointer-events:none;}
.mp-prog:hover .mp-knob,.mp-prog.seeking .mp-knob{transform:translate(-50%,-50%) scale(1);}
/* 드래그 중 위에 뜨는 시간 말풍선 */
.mp-seektip{position:absolute;bottom:16px;left:0;transform:translateX(-50%);
padding:3px 7px;border-radius:6px;background:var(--text1);color:var(--bg);
font-size:10.5px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;
transition:opacity .12s;}
.mp-prog.seeking .mp-seektip{opacity:1;}
.mp-time{display:flex;align-items:center;font-size:11px;font-weight:600;color:var(--text2);}
.mp-time #mpCur{color:var(--text1);font-weight:700;}
.mp-time #mpDur{color:var(--text2);font-weight:600;}
.mp-time .mp-sp{flex:1;}
.mp-dur{cursor:pointer;}
.mp-btns{display:flex;gap:3px;align-items:center;flex:none;}
.mp-btns button,#mpX{width:28px;height:28px;border:none;background:transparent;color:var(--text2);
border-radius:8px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;
transition:background .15s,color .15s;}
.mp-btns button:hover,#mpX:hover{background:var(--bg2);color:var(--text1);}
.mp-btns button:active{transform:scale(.92);}
.mp-btns button.on{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);}
/* 재생 버튼만 강조 — 눈이 갈 곳을 하나로 */
.mp-btns .mp-pp{width:34px;height:34px;font-size:18px;background:transparent;color:var(--text1);
border-radius:50%;box-shadow:none;border:none;}
.mp-btns .mp-pp:hover{background:transparent;color:var(--accent);filter:none;}
.mp-rate{font-size:11px !important;font-weight:800;}
/* 부가 버튼은 눌렀을 때만 펼친다 (평소엔 4개만 = 심플) */
/* 더보기 묶음은 '떠 있는 판'으로 연다.
예전엔 줄 안에 끼어들어(display:flex) 열 때마다 ⋯ 버튼이 옆으로 밀렸다
→ 같은 자리에서 눌러 열고 닫기가 어려웠다. 이제 버튼은 제자리에 고정. */
.mp-xtra{display:none;position:absolute;right:0;bottom:calc(100% + 8px);
align-items:center;gap:4px;padding:6px;border-radius:12px;
background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-lg);
z-index:5;}
.mp-xtra .mp-narrow{display:none !important;} /* 기본 숨김 — 좁은 폰에서만 켠다 */
.mp-xtra.show{display:flex;}
.mp-xtra button{background:var(--bg2) !important;color:var(--text2);border:1px solid transparent;border-radius:8px;transition:all .18s ease;}
.mp-xtra button:hover{background:var(--bg3,var(--bg2)) !important;color:var(--text1);}
.mp-xtra button.on{background:color-mix(in srgb,var(--accent) 18%,var(--bg2)) !important;color:var(--accent) !important;border-color:color-mix(in srgb,var(--accent) 40%,transparent) !important;font-weight:700;box-shadow:0 0 8px color-mix(in srgb,var(--accent) 25%,transparent);}
.mp-xtra button.on i{color:var(--accent) !important;}
.mp-xtra button:active{transform:scale(.92);}
.mp-xtra-btn.on{background:color-mix(in srgb,var(--accent) 15%,transparent) !important;
color:var(--accent) !important;}
.mp-btns{position:relative;}
@media(max-width:640px){
/* 14.14 · 크기·위치(.mp / .mp-cover / .mp-btns / #mpX / .mp-title)는
문서 끝 v1414-phone 블록 한 곳에서만 정한다. 여기는 그 외의
레이아웃 규칙만 남긴다. */
/* 진행바가 손가락으로 잡을 만큼 넓어야 한다 → 중앙에 우선권 */
.mp-mid{flex:1 1 auto;min-width:0;}
.mp-btns{flex:0 0 auto;}
/* 아주 좁은 폰: 이전/다음은 더보기 안으로 내려 진행바를 넓게 쓴다
(곡 넘기기는 더보기 · 목록 · Shift+←/→ 로 그대로 가능) */
@media(max-width:430px){
.mp-bar .mp-btns>#mpPrev,.mp-bar .mp-btns>#mpNext{display:none;}
.mp-xtra.show .mp-narrow{display:flex !important;}
}
.mp-time{font-size:10px;}
/* 버튼이 늘어도 넘치지 않게 3열로 접는다 (위치는 위 공통 규칙을 따름) */
.mp-xtra.show{display:grid;grid-template-columns:repeat(3,1fr);padding:7px;gap:5px;}
.mp-xtra.show button{width:38px;height:38px;font-size:17px;}
}
.mp-volwrap{position:relative;}
.mp-volpop{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
background:var(--card);border:1px solid var(--border);border-radius:8px;
padding:8px 6px;display:none;box-shadow:var(--shadow);z-index:1502;}
.mp-volpop.show{display:block;}
.mp-volpop input{writing-mode:vertical-lr;direction:rtl;width:22px;height:90px;cursor:pointer;}
.mp-list{position:fixed;bottom:92px;left:50%;transform:translateX(-50%);z-index:1501;
width:min(440px,92vw);max-height:min(560px,78vh);overflow:hidden;display:none;
flex-direction:column;
background:var(--card);border:1px solid var(--border);border-radius:12px;
box-shadow:var(--shadow);padding:8px;}
.mp-list .mp-search{width:100%;box-sizing:border-box;padding:7px 10px;margin-bottom:6px;font-size:1.35rem;
border:1px solid var(--border);border-radius:8px;background:var(--bg2);
color:var(--text1);font-size:12px;outline:none;}
.mp-tabs{display:flex;align-items:center;gap:4px;margin-bottom:6px;}
.mp-tabs button{border:1px solid var(--border);background:var(--bg2);color:var(--text2);
border-radius:8px;cursor:pointer;padding:5px 10px;font-size:11.5px;font-weight:600;}
.mp-tabs button.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.mp-tabs .sp{flex:1;}
.mp-addpl{margin-left:auto;width:22px;height:22px;border-radius:50%;padding:0!important;
display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;}
.mp-pl{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;
font-size:12.5px;color:var(--text1);cursor:pointer;}
.mp-pl:hover{background:var(--bg2);}
.mp-pl.on{background:rgba(79,110,247,.15);color:var(--accent);font-weight:700;}
.mp-pl b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
.mp-pl em{color:var(--text3);font-style:normal;font-size:10.5px;flex:none;}
.mp-pl i{color:var(--text3);font-size:14px;flex:none;padding:2px;cursor:pointer;font-style:normal;}
.mp-pl i:hover{color:#ef4444;}
.mp-li .pl-add{color:var(--text3);font-size:14px;flex:none;padding:2px;cursor:pointer;font-style:normal;}
.mp-li .pl-add:hover{color:var(--accent);}
/* 재생목록 선택 드롭다운 (스크롤 가능) */
#plPickPop{position:fixed;z-index:1503;background:var(--card);border:1px solid var(--border);
border-radius:10px;box-shadow:var(--shadow);padding:6px;display:none;
max-height:min(320px,60vh);overflow:auto;width:min(280px,86vw);}
.plpick-item{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:6px;
font-size:12.5px;color:var(--text1);cursor:pointer;}
.plpick-item:hover{background:var(--bg2);}
.plpick-item b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
.plpick-item em{color:var(--text3);font-style:normal;font-size:10.5px;flex:none;}
.plpick-item.on{background:rgba(79,110,247,.15);color:var(--accent);}
.plpick-item.new{color:var(--accent);font-weight:700;}
/* 재생목록 내용(곡 목록) */
.mp-pl .pl-play{color:var(--accent);font-size:14px;flex:none;padding:2px;cursor:pointer;font-style:normal;}
.mp-pl.drop{outline:2px dashed var(--accent);outline-offset:-2px;background:rgba(79,110,247,.10);}
.mp-plsub{display:flex;align-items:center;gap:6px;padding:5px 8px 5px 30px;border-radius:6px;
font-size:12px;color:var(--text2);}
.mp-plsub .pl-rm{color:var(--text3);font-size:12px;flex:none;padding:2px;cursor:pointer;font-style:normal;margin-left:auto;}
.mp-plsub .pl-rm:hover{color:#ef4444;}
.mp-plsub.empty{color:var(--text3);font-style:italic;}
.mp-li.dragsrc{opacity:.5;}
.mp-lbody{flex:1;min-height:60px;overflow:auto;}
.mp-li{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;
font-size:12px;color:var(--text1);cursor:pointer;}
.mp-li:hover{background:var(--bg2);}
.mp-li.on{background:rgba(79,110,247,.15);color:var(--accent);font-weight:700;}
.mp-li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mp-li em{color:var(--text3);font-style:normal;font-size:10px;flex:none;}
.mp-li .mp-del{color:#ef4444;cursor:pointer;font-size:14px;flex:none;padding:2px;}
.mp-lfoot{display:flex;align-items:center;justify-content:center;gap:10px;
padding-top:6px;font-size:11px;color:var(--text3);}
/* ── 재생목록 UI 정리 (심플 + 터치) ─────────────────────── */
.mp-pl{gap:6px;}
.mp-pl .pl-exp{transition:transform .15s;color:var(--text3);}
.mp-pl.open .pl-exp{transform:rotate(90deg);}
.mp-pl.open{background:var(--bg2);}
.mp-pl b{cursor:pointer;}
.mp-pl em{min-width:18px;text-align:right;}
.mp-pl i:hover{color:var(--accent);}
.mp-pl [data-plmenu]:hover{color:var(--text1);}
.mp-plsub{padding-left:34px;cursor:pointer;}
.mp-plsub:hover{background:var(--bg2);}
.mp-plsub span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mp-plempty{padding:22px 10px;text-align:center;color:var(--text3);font-size:12.5px;}
.mp-plempty em{display:block;margin-top:4px;font-style:normal;font-size:11px;opacity:.8;}
.mp-li .mp-cur{color:var(--accent);margin-right:5px;font-size:12px;}
.pl-mini{position:fixed;z-index:1805;background:var(--card);border:1px solid var(--border);
border-radius:10px;box-shadow:var(--shadow-lg);padding:4px;min-width:120px;}
.pl-mini button{display:block;width:100%;text-align:left;padding:9px 12px;border:none;
background:transparent;color:var(--text1);font-size:12.5px;border-radius:7px;cursor:pointer;}
.pl-mini button:hover{background:var(--bg2);}
.pl-mini button.d{color:#ef4444;}
/* 모바일: 목록을 아래에서 올라오는 시트로 */
@media(max-width:640px){
/* 14.14 · .mp-list 위치·크기는 문서 끝 v1414-phone 에서만 정한다 */
.mp-li,.mp-pl{padding:11px 10px;font-size:13.5px;}
.mp-plsub{padding:10px 10px 10px 34px;font-size:13px;}
.mp-li i,.mp-pl i{font-size:17px;padding:5px;}
.mp-tabs button{padding:8px 12px;font-size:12.5px;}
.mp-list .mp-search{padding:10px 12px;font-size:13px;}
}
.mp-lfoot button{border:1px solid var(--border);background:var(--bg2);color:var(--text1);
border-radius:6px;cursor:pointer;padding:3px 8px;font-size:11px;}
#mpReopen{position:fixed;right:14px;bottom:max(14px,env(safe-area-inset-bottom));z-index:1500;
width:42px;height:42px;border-radius:50%;border:none;background:var(--accent);color:#fff;
font-size:19px;box-shadow:0 6px 18px rgba(0,0,0,.25);cursor:pointer;display:none;
align-items:center;justify-content:center;}
/* 12.0 · 첫 로딩(스플래시) 동안에도 음악 플로팅 칩을 바로 보여준다 */
body.sdy-booting #mpReopen,
body.sdy-booting #musicPlayer,
body.sdy-booting #musicListPop{z-index:10001;}
/* 14.14 · 이 자리에 있던 폰 규칙(.mp / .mp-cover / .mp-btns button / .mp-list)은
문서 끝 v1414-phone 블록 로 옮겼다.
위쪽 18680행대 블록과 값이 서로 달라(예: .mp-btns button 이 34px vs 25px)
파일 순서로 승자가 정해지고 있었다. 중복을 없애고 한 곳에서만 정한다. */
/* ═════════ 10.1 · 큰 플로팅 뮤직플레이어 (스포티파이/Apple Music 풍) ═════════ */
.mpb{position:fixed;z-index:1504;display:none;flex-direction:column;
width:min(600px,96vw);max-height:92vh;
background:var(--card);border:1px solid var(--border);border-radius:16px;
box-shadow:0 18px 60px rgba(0,0,0,.28);overflow:hidden;}
.mpb.open{display:flex;animation:mpbIn .3s cubic-bezier(.22,.9,.3,1.08);}
@keyframes mpbIn{from{opacity:0;transform:translateY(30px) scale(.96);}to{opacity:1;transform:none;}}
.mpb-head{display:flex;align-items:center;gap:6px;padding:2px 6px;flex:none;
background:var(--bg2);border-bottom:1px solid var(--border);
cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;min-height:18px;}
.mpb-head:active{cursor:grabbing;}
.mpb-head>i{color:var(--text3);font-size:12px;opacity:.7;}
.mpb-head .sp{flex:1;}
.mpb-head button{width:20px;height:18px;border:none;background:transparent;color:var(--text3);
border-radius:6px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;padding:0;}
.mpb-head button:hover{background:var(--bg);color:var(--text1);}
.mpb-body{display:flex;flex-direction:column;min-height:0;flex:1;padding:12px 12px 10px;gap:10px;overflow:hidden;}
.mpb-now{display:flex;gap:14px;flex:none;}
.mpb-cover{width:132px;height:132px;border-radius:12px;object-fit:cover;flex:none;
background:var(--bg2);box-shadow:0 6px 18px rgba(0,0,0,.16);cursor:pointer;
user-select:none;-webkit-user-drag:none;touch-action:manipulation;}
.mpb-cover:hover{filter:brightness(1.06);}
.mpb-cover.spin{animation:mpspin 7s linear infinite;}
.mpb-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.mpb-title{font-size:16px;font-weight:800;color:var(--text1);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mpb-artist{font-size:13px;font-weight:700;color:var(--accent);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;}
.mpb-album{font-size:11.5px;color:var(--text3);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mpb-chips{display:flex;gap:5px;flex-wrap:wrap;min-height:18px;}
.mpb-chips span{font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;
background:var(--bg2);color:var(--text3);border:1px solid var(--border);
max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mpb-chips span.src{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,transparent);}
/* 10.9 · 자동으로 찾은 곡 표시 — 체크표시 하나만 (출처·제목 글자 없음) */
.mpb-chips span.src.ok{padding:2px 6px;display:inline-flex;align-items:center;justify-content:center;
max-width:none;background:color-mix(in srgb,var(--accent) 12%,transparent);}
.mpb-chips span.src.ok i{font-size:12px;line-height:1;}
.mpb-prog{position:relative;height:5px;background:var(--bg2);border-radius:99px;
margin:6px 0 2px;cursor:pointer;touch-action:none;
user-select:none;-webkit-user-select:none;}
.mpb-prog::before{content:'';position:absolute;left:0;right:0;top:-10px;bottom:-10px;}
/* 17.4 · 위치를 잡는 동안 — 막대가 살짝 굵어지고 손잡이가 커진다 (아래 컨트롤 바와 동일) */
.mpb-prog.seeking{height:8px;cursor:grabbing;}
.mpb-prog.seeking #mpBKnob{
transform:translate(-50%,-50%) scale(1.28);
box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 55%,rgba(0,0,0,.3));}
#mpBig.mpb-fs .mpb-prog.seeking #mpBKnob,#mpBig:fullscreen .mpb-prog.seeking #mpBKnob{opacity:1;}
#mpBFill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;
background:linear-gradient(90deg,var(--accent),var(--accent2));}
#mpBKnob{position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;
background:var(--accent);border:2px solid var(--card);box-shadow:0 1px 5px rgba(0,0,0,.3);
transform:translate(-50%,-50%);pointer-events:none;}
/* 시간 표시는 평소엔 숨기고, 재생 위치를 잡을 때만 잠깐 뜬다 (현재 | 전체).
17.4 · 진행바 위에 오버레이로 띄운다 — 레이아웃에서 빠져 있어야(display:none)
시간이 나타날 때 막대가 아래로 밀리지 않는다.
(#mpBTime 은 #mpBProg 안에 있다: position:absolute + bottom:100% 로 막대를 안 밀고
그 위쪽 공간만 비친다.) */
.mpb-time{position:absolute;left:0;right:0;bottom:calc(100% + 8px);
display:none;align-items:center;justify-content:center;font-size:11.5px;color:var(--text1);gap:7px;letter-spacing:.01em;
opacity:0;visibility:hidden;transform:translateY(4px);pointer-events:none;
transition:opacity .22s ease,transform .22s ease,visibility .22s;}
.mpb-time.show{display:flex !important;opacity:1;visibility:visible;transform:translateY(0);}
.mpb-time .sep{opacity:.6;color:var(--text2);}
.mpb-time .current{color:var(--text1);font-weight:700;font-variant-numeric:tabular-nums;}
.mpb-time .end{font-variant-numeric:tabular-nums;color:var(--text2);font-weight:600;}
.mpb-ctl{display:flex;align-items:center;justify-content:center;gap:8px;}
.mpb-ctl button{width:36px;height:36px;border:none;background:transparent;color:var(--text2);
border-radius:10px;cursor:pointer;font-size:19px;display:flex;align-items:center;justify-content:center;}
.mpb-ctl button:hover{background:var(--bg2);color:var(--text1);}
.mpb-ctl button:active{transform:scale(.93);}
.mpb-ctl button.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);}
.mpb-ctl .pp{width:50px;height:50px;font-size:24px;background:transparent;color:var(--text1);
border-radius:50%;box-shadow:none;border:none;}
.mpb-ctl .pp:hover{background:transparent;color:var(--accent);filter:none;}
.mpb-row2{display:flex;align-items:center;gap:7px;}
.mpb-row2 button{height:28px;padding:0 9px;border:1px solid var(--border);background:var(--bg2);
color:var(--text2);border-radius:8px;cursor:pointer;font-size:11px;font-weight:700;
display:flex;align-items:center;gap:4px;}
.mpb-row2 button:hover{color:var(--text1);border-color:var(--text3);}
.mpb-row2 button.on{color:var(--accent);border-color:var(--accent);}
.mpb-vol{flex:1;display:flex;align-items:center;gap:7px;min-width:60px;color:var(--text3);}
.mpb-vol input{flex:1;accent-color:var(--accent);min-width:40px;}
.mpb-tabs{display:flex;gap:4px;flex:none;align-items:center;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.mpb-tabs::-webkit-scrollbar{display:none;}
.mpb-tabs button{border:1px solid var(--border);background:var(--bg2);color:var(--text2);
border-radius:8px;cursor:pointer;padding:5px 11px;font-size:11.5px;font-weight:700;
white-space:nowrap;flex:none;}
.mpb-tabs button.on{background:var(--accent);color:#fff;border-color:var(--accent);}
/* 10.9 · 아이콘만 있는 검색 버튼 */
.mpb-tabs button.mpb-icon{padding:0;width:29px;height:26px;display:flex;align-items:center;
justify-content:center;font-size:15px;}
.mpb-tabs button.mpb-icon:hover{color:var(--text1);border-color:var(--text3);}
.mpb-tabs button.mpb-icon.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.mpb-searchbar{display:none;align-items:center;gap:8px;flex:none;
padding:7px 13px;border:1px solid var(--border);border-radius:999px;background:var(--bg2);
transition:border-color .2s,box-shadow .2s;}
.mpb-searchbar.show{display:flex;}
/* 17.4 · 검색칸은 옆 칩들과 같은 둥근 알약 모양으로 — 포커스될 때만 은은하게 켜진다 */
.mpb-searchbar:focus-within{
border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent);}
.mpb-searchbar>i{color:var(--text3);font-size:14px;flex:none;}
.mpb-searchbar input{flex:1;min-width:0;border:none;background:transparent;outline:none;
color:var(--text1);font-size:12.5px;font-weight:600;}
.mpb-searchbar button{border:none;background:transparent;color:var(--text3);cursor:pointer;
font-size:15px;line-height:1;padding:2px 3px;border-radius:50%;flex:none;}
.mpb-searchbar button:hover{color:var(--text1);background:var(--bg);}
.mpb-list{flex:1;min-height:70px;overflow:auto;border-top:1px solid var(--border);padding-top:6px;}
.mpb-li{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;
font-size:12.5px;color:var(--text1);cursor:pointer;flex-wrap:nowrap;min-width:0;}
.mpb-li:hover{background:var(--bg2);}
.mpb-li.on{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);font-weight:700;}
.mpb-li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mpb-li em{color:var(--text3);font-style:normal;font-size:10.5px;flex:0 1 auto;max-width:42%;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 18.3 · 대기열 관리: 위로/아래로/다음에 재생/빼기 + 전체 비우기 */
.mpb-qhead{display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:3px 8px 7px;font-size:11px;font-weight:700;color:var(--text3);}
.mpb-qclear{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);
background:var(--bg2);color:var(--text2);border-radius:7px;cursor:pointer;
padding:3px 9px;font-size:10.5px;font-weight:700;white-space:nowrap;}
.mpb-qclear:hover{color:var(--accent);border-color:var(--accent);}
.mpb-qops{display:flex;align-items:center;gap:1px;flex:none!important;margin-left:2px;}
.mpb-qop{width:22px;height:22px;border:none;background:transparent;color:var(--text3);
border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;
padding:0;flex:0 0 auto;font-size:12px;opacity:.55;transition:opacity .12s,color .12s,background .12s;}
.mpb-li:hover .mpb-qop,.mpb-qop:focus-visible{opacity:1;}
.mpb-qop:hover{background:var(--bg2);color:var(--text1);opacity:1;}
.mpb-qop.del:hover{color:#ef4444;}
/* 폰에서는 관리 버튼이 항상 보이도록 */
@media(max-width:640px){
.mpb-qop{opacity:.85;width:26px;height:26px;font-size:13px;}
}
.mpb-artgrp{font-size:11px;font-weight:800;color:var(--text2);padding:7px 8px 3px;
display:flex;align-items:center;gap:6px;white-space:nowrap;min-width:0;overflow:hidden;}
.mpb-artgrp em{color:var(--text3);font-style:normal;font-weight:600;flex:none;}
.mpb-empty{padding:18px 10px;text-align:center;color:var(--text3);font-size:12px;}
@media(max-width:640px){
.mpb{width:calc(100vw - 14px);max-height:88vh;}
.mpb-cover{width:92px;height:92px;}
.mpb-title{font-size:14.5px;}
.mpb-ctl button{width:38px;height:38px;}
.mpb-ctl .pp{width:46px;height:46px;}
/* 10.9 · 탭 + 검색 아이콘이 좁은 화면에서도 넘치지 않게 */
.mpb-tabs{flex-wrap:wrap;gap:3px;}
.mpb-tabs button{padding:5px 9px;font-size:11px;}
.mpb-tabs button.mpb-icon{width:28px;}
#mpBUp{padding:5px 8px !important;font-size:11px !important;}
}
/* 10.5 · 큰 표지: 표지는 정지. 재생 시작 순간 LP판이 잠깐 튀어나왔다가
다시 커버 안으로 숨는 한 번의 연출만 (계속 걸쳐 있지 않게) */
.mpb-cwrap{position:relative;flex:none;width:132px;height:132px;}
.mpb-vinyl{position:absolute;left:4px;top:0;width:132px;height:132px;border-radius:50%;
background:repeating-radial-gradient(circle at 50% 50%,#15151a 0 2.5px,#23232b 2.5px 5px);
box-shadow:0 5px 16px rgba(0,0,0,.4);z-index:1;
transform:translateX(4px);opacity:0;pointer-events:none;}
.mpb-vinyl::after{content:'';position:absolute;left:50%;top:50%;width:40px;height:40px;
transform:translate(-50%,-50%);border-radius:50%;
background:var(--accent);opacity:.92;
box-shadow:0 0 0 6px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.2);}
.mpb-cwrap.playing .mpb-vinyl{animation:vinylPop 1.15s cubic-bezier(.3,.7,.3,1) forwards;}
@keyframes vinylPop{
0%{transform:translateX(4px);opacity:0;}
18%{opacity:1;}
45%{transform:translateX(56px);opacity:1;} /* 잠깐 밖으로 */
100%{transform:translateX(6px);opacity:0;} /* 다시 커버 안으로 */}
.mpb-cwrap .mpb-cover{position:relative;z-index:2;width:132px;height:132px;}
/* 컨트롤 바로 작아지며 닫히는 애니메이션 */
.mpb.closing{animation:mpbOut .26s cubic-bezier(.5,0,.8,.4) forwards;}
@keyframes mpbOut{to{opacity:0;transform:translateY(46px) scale(.72);}}
/* ═══════ 11.7 · 싱크 가사 — 애플뮤직 스타일 ═══════
· 굵고 큰 글씨, 왼쪽 정렬
· 현재 줄은 또렷하고 살짝 커지며 강조색, 멀어질수록 부드럽게 흐려짐
· 글자 크기는 절대 바뀌지 않는다(transform 만 사용) → 줄 높이가 변하지 않아
현재 줄이 화면 한가운데에서 밀려나지 않는다 */
.mpb-list.lyrmode{display:flex;flex-direction:column;overflow:hidden;padding-top:0;border-top:0;}
.mpb-list.lyrmode .mpb-lyr{flex:1;min-height:0;}
.mpb-lyr{position:relative;flex:1;min-height:80px;overflow-y:auto;overflow-x:hidden;
display:block;padding:0 clamp(12px,3.5%,30px);text-align:left;
/* 12.1 · 랩·빠른 곡에서도 가사 줄이 바로바로 따라오도록 즉시 이동 (smooth 는 밀린다) */
scroll-behavior:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 85%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 85%,transparent 100%);}
/* 첫 줄·끝 줄도 한가운데까지 올라오게 하는 위·아래 빈 자리 */
.mpb-lyr .lyrpad{display:block;height:44%;min-height:60px;pointer-events:none;}
.mpb-lyr .ll{display:block;margin:0;padding:9px 2px;
font-size:clamp(15.5px,1.45vw,21px);line-height:1.36;font-weight:800;
letter-spacing:-.016em;color:var(--text1);
opacity:.26;filter:blur(2px);
transform:scale(.985);transform-origin:left center;
/* 12.1 · 하이라이트가 즉각 반응하도록 0.55s → 0.16s (빠른 곡 대응) */
transition:opacity .16s ease,
filter .16s ease,
transform .16s cubic-bezier(.2,.8,.2,1.03),
color .12s ease;
cursor:pointer;white-space:pre-wrap;word-break:keep-all;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;}
/* 지금 부르는 줄 */
.mpb-lyr .ll.now{opacity:1;filter:none;transform:scale(1.055);font-weight:900;
color:var(--accent);
text-shadow:0 2px 22px color-mix(in srgb,var(--accent) 26%,transparent);}
/* 가까울수록 또렷하게 */
.mpb-lyr .ll.n1{opacity:.72;filter:blur(.2px);transform:scale(1);}
.mpb-lyr .ll.n2{opacity:.5;filter:blur(.75px);transform:scale(.995);}
.mpb-lyr .ll.n3{opacity:.36;filter:blur(1.3px);transform:scale(.99);}
.mpb-lyr .ll.past{opacity:.2;}
/* 전주·간주·아웃트로 — 부를 가사가 없을 땐 앞뒤 줄을 또렷하게 */
.mpb-lyr .ll.edge{opacity:.88;filter:none!important;transform:scale(1);}
/* 휠·손가락으로 직접 넘기는 동안에는 흐림을 전부 푼다 */
.mpb-lyr.manual .ll{filter:none!important;opacity:.8;transform:scale(1);
transition:opacity .12s,filter .12s,transform .12s;}
.mpb-lyr.manual .ll.now{opacity:1;transform:scale(1.03);}
.mpb-lyr .ll:hover{opacity:.95;filter:none;}
/* 싱크 없이 그냥 가사만 있는 곡 */
.mpb-lyr.plain{-webkit-mask-image:none;mask-image:none;}
.mpb-lyr.plain .ll{opacity:.92;filter:none;transform:none;font-weight:600;cursor:default;
font-size:14.5px;line-height:1.7;padding:2px 2px;color:var(--text1);}
.mpb-lyr.plain .lyrpad{height:10px;min-height:10px;}
.mpb-lyrhead{display:flex;align-items:center;justify-content:center;gap:6px;flex:none;
padding:2px 0 6px;font-size:10.5px;font-weight:800;color:var(--text3);}
@media(max-width:640px){
.mpb-lyr{padding:0 14px;}
.mpb-lyr .ll{font-size:16.5px;padding:10px 2px;}
}
.mpb-lyrempty{padding:26px 12px;text-align:center;color:var(--text3);font-size:12px;line-height:1.7;}
.mp-lyrfind{margin-top:12px;padding:7px 16px;border:1px solid #3b4252;border-radius:8px;background:#1a1e27;color:#dbe2f0;cursor:pointer;font-size:13px;}
.mp-lyrfind:hover{background:#232936;border-color:#4a5470;}
@media(max-width:640px){
.mpb-lyr{padding:0 14px;}
.mpb-lyr .ll{font-size:15px;padding:9px 3px;}
}
/* 포맷(음질) 뱃지 */
.mpb-chips span.fmt{color:var(--text1);font-weight:800;
border-color:color-mix(in srgb,var(--text2) 40%,transparent);}
.mpb-chips span.fmt.lossless{color:var(--accent);
border-color:color-mix(in srgb,var(--accent) 45%,transparent);}
/* 10.8 · 크기 조절 손잡이 제거 — 창은 황금비(가로:세로 = 1.618:1) 고정 */
/* 10.3 · 곡 우클릭 메뉴 */
.mpctx{position:fixed;z-index:1806;min-width:196px;max-width:280px;display:none;
background:var(--card);border:1px solid var(--border);border-radius:11px;
box-shadow:var(--shadow-lg);padding:5px;user-select:none;}
.mpctx.show{display:block;animation:mpbIn .14s ease-out;}
.mpctx .ci{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;
font-size:12.5px;color:var(--text1);cursor:pointer;font-weight:600;}
.mpctx .ci i{color:var(--text3);font-size:15px;flex:none;}
.mpctx .ci:hover{background:var(--bg2);}
.mpctx .ci:hover i{color:var(--accent);}
.mpctx .ci.danger{color:#ef4444;}
.mpctx .ci.danger i{color:#ef4444;}
.mpctx .cinfo{padding:7px 10px 8px;border-bottom:1px solid var(--border);margin-bottom:4px;}
.mpctx .cinfo b{display:block;font-size:12.5px;color:var(--text1);line-height:1.35;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mpctx .cinfo span{display:block;font-size:10.5px;color:var(--text3);margin-top:2px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mpctx .csep{height:1px;background:var(--border);margin:4px 6px;}
/* 큰 플레이어 목록 페이저 */
.mpb-pager{display:flex;align-items:center;justify-content:center;gap:12px;
padding:6px 0 2px;font-size:11px;color:var(--text3);flex:none;flex-wrap:nowrap;white-space:nowrap;}
.mpb-pager button{border:1px solid var(--border);background:var(--bg2);color:var(--text1);
border-radius:7px;cursor:pointer;padding:4px 10px;font-size:11px;font-weight:700;white-space:nowrap;flex:none;}
.mpb-pager button:disabled{opacity:.35;cursor:default;}
@media(max-width:640px){
.mpb-cwrap{width:96px;height:96px;}
.mpb-vinyl{width:96px;height:96px;}
.mpb-cwrap .mpb-cover{width:96px;height:96px;}
.mpb-vinyl::after{width:30px;height:30px;}
.mpb-cwrap.playing .mpb-vinyl{transform:translateX(38px);}
}
/* ── 태그·표지 편집 창 ── */
.mp-tagm{position:fixed;inset:0;z-index:1506;display:none;
align-items:center;justify-content:center;background:rgba(15,18,25,.45);
padding:14px;}
.mp-tagm.show{display:flex;}
.mp-tagm .box{width:min(420px,94vw);max-height:88vh;overflow:auto;background:var(--card);
border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);}
.mp-tagm .head{display:flex;align-items:center;gap:8px;padding:12px 14px;
border-bottom:1px solid var(--border);font-size:13.5px;color:var(--text1);}
.mp-tagm .head b{display:flex;align-items:center;gap:7px;flex:1;}
.mp-tagm .head b i{color:var(--accent);}
.mp-tagm .head button{width:28px;height:28px;border:none;background:transparent;color:var(--text3);
font-size:17px;cursor:pointer;border-radius:7px;}
.mp-tagm .head button:hover{background:var(--bg2);color:var(--text1);}
.mp-tagm .inner{padding:13px 14px;display:flex;flex-direction:column;gap:9px;}
.mp-tagm .crow{display:flex;gap:12px;align-items:center;}
.mp-tagm .crow img{width:84px;height:84px;border-radius:10px;object-fit:cover;
background:var(--bg2);flex:none;box-shadow:0 3px 10px rgba(0,0,0,.15);}
.mp-tagm .cbtns{display:flex;flex-direction:column;gap:6px;}
.mp-tagm .cbtns button{height:30px;padding:0 10px;border:1px solid var(--border);background:var(--bg2);
color:var(--text2);border-radius:8px;cursor:pointer;font-size:11.5px;font-weight:700;
display:flex;align-items:center;gap:5px;}
.mp-tagm .cbtns button:hover{color:var(--text1);border-color:var(--text3);}
.mp-tagm label{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:700;
color:var(--text3);}
.mp-tagm .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;width:100%;align-items:stretch;}
.mp-tagm .two label{min-width:0;width:auto;}
.mp-tagm input[type=text]{height:34px;width:100%;min-width:0;max-width:100%;display:block;box-sizing:border-box;padding:0 10px;border:1px solid var(--border);border-radius:8px;
background:var(--bg2);color:var(--text1);font-size:13px;outline:none;}
.mp-tagm input[type=text]:focus{border-color:var(--accent);}
.mp-tagm textarea{box-sizing:border-box;width:100%;min-height:110px;max-height:220px;resize:vertical;
padding:7px 10px;border:1px solid var(--border);border-radius:8px;
background:var(--bg2);color:var(--text1);font-size:11.5px;line-height:1.6;outline:none;
font-family:ui-monospace,'SF Mono',Menlo,monospace;}
.mp-tagm textarea:focus{border-color:var(--accent);}
.mp-tagm label em{font-size:9.5px;color:var(--text3);font-style:normal;}
.mp-tagm .hint{font-size:10.5px;color:var(--text3);line-height:1.5;}
.mp-tagm .acts{display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--border);
padding:10px 14px;}
.mp-tagm .acts button{height:34px;padding:0 12px;border-radius:9px;cursor:pointer;
font-size:12px;font-weight:700;border:1px solid var(--border);background:var(--bg2);color:var(--text1);}
.mp-tagm .acts button:hover{border-color:var(--text3);}
.mp-tagm .acts #mpTagRecog.off{opacity:.55;}
.mp-tagm .acts .primary{margin-left:auto;background:var(--accent);border-color:var(--accent);color:#fff;}
.mp-tagm .acts .primary:hover{filter:brightness(1.07);}
/* 12.0 · 노래 추가 팝업 (파일 or 유튜브 링크 → mp3 320kbps) */
.mp-addpop{position:fixed;z-index:2600;display:none;width:min(360px,calc(100vw - 20px));
background:var(--card);border:1px solid var(--border);border-radius:14px;
box-shadow:0 22px 60px rgba(0,0,0,.32);padding:12px;flex-direction:column;gap:10px;}
.mp-addpop.show{display:flex;}
.mp-addpop .head{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--text1);}
.mp-addpop .head>i{color:var(--accent);font-size:17px;}
.mp-addpop .head .sp{flex:1;}
.mp-addpop .head button{width:28px;height:28px;border:none;background:transparent;color:var(--text3);border-radius:8px;cursor:pointer;font-size:16px;}
.mp-addpop .head button:hover{background:var(--bg2);}
.mp-addpop .file{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;
border:1px solid var(--border);border-radius:11px;background:var(--bg2);cursor:pointer;text-align:left;}
.mp-addpop .file:hover{border-color:var(--accent);}
.mp-addpop .file>i{font-size:22px;color:var(--accent);}
.mp-addpop .file span{display:flex;flex-direction:column;font-size:13px;font-weight:700;color:var(--text1);}
.mp-addpop .file em{font-style:normal;font-size:10.5px;color:var(--text3);font-weight:400;margin-top:2px;}
.mp-addpop .sep{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--text3);font-weight:700;}
.mp-addpop .sep::before,.mp-addpop .sep::after{content:'';flex:1;height:1px;background:var(--border);}
.mp-addpop .row{display:flex;gap:7px;}
.mp-addpop input{flex:1;min-width:0;padding:10px 11px;border:1px solid var(--border);border-radius:10px;
background:var(--bg2);color:var(--text1);font-size:13px;outline:none;}
.mp-addpop input:focus{border-color:var(--accent);}
.mp-addpop .go{display:inline-flex;align-items:center;gap:5px;padding:0 14px;border:none;border-radius:10px;
background:var(--accent);color:#fff;font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap;}
.mp-addpop .go:hover{filter:brightness(1.07);}
.mp-addpop .go:disabled{opacity:.55;cursor:default;}
.mp-addpop .hint{font-size:10.5px;color:var(--text3);line-height:1.5;}
.mp-addpop .status{font-size:11.5px;color:var(--text2);background:var(--bg2);border:1px solid var(--border);
border-radius:9px;padding:8px 10px;line-height:1.6;max-height:84px;overflow-y:auto;}
.mp-addpop .status b{color:var(--accent);}
.mp-addpop .cookies{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--text3);
background:var(--bg2);border:1px dashed var(--border);border-radius:9px;padding:6px 8px;}
.mp-addpop .cookies span{flex:1;line-height:1.4;}
.mp-addpop .cookies button{border:1px solid var(--border);background:var(--card);color:var(--text2);
border-radius:7px;cursor:pointer;font-size:10.5px;font-weight:700;padding:3px 8px;white-space:nowrap;}
.mp-addpop .cookies button:hover{border-color:var(--accent);color:var(--accent);}
.mp-addpop .cookies button.ok{border-color:#10b981;color:#10b981;}
/* 12.3 · 준비 상태 쿠키 카드 (예전 회색 안내문 대체) */
.mp-addpop .ytcard{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:11px;
border:1px solid var(--border);background:linear-gradient(180deg,var(--bg2),var(--card));}
.mp-addpop .ytcheck{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:var(--bg2);color:var(--text3);font-size:13px;flex:none;border:1px solid var(--border);}
.mp-addpop .ytcheck.ok{background:#10b98114;border-color:#10b98155;color:#10b981;}
.mp-addpop .ytcheck.no{background:#f59e0b14;border-color:#f59e0b55;color:#f59e0b;}
.mp-addpop .ytcheck i{font-size:13px;}
.mp-addpop .yttext{flex:1;font-size:11.5px;color:var(--text2);line-height:1.4;min-width:0;}
.mp-addpop .yttext b{color:var(--text1);font-weight:700;}
.mp-addpop .ytup{border:1px solid var(--accent);background:var(--accent);color:#fff;
border-radius:8px;cursor:pointer;font-size:10.5px;font-weight:800;padding:5px 10px;white-space:nowrap;}
.mp-addpop .ytup.ok{background:transparent;color:var(--accent);}
.mp-addpop .ytdel{width:24px;height:24px;border:none;background:transparent;color:var(--text3);
border-radius:7px;cursor:pointer;font-size:14px;display:none;flex:none;}
.mp-addpop .ytcard.has .ytdel{display:inline-flex;align-items:center;justify-content:center;}
.mp-addpop .ytdel:hover{background:var(--bg2);color:#e74c3c;}
/* 진행 큐 + 게이지바 */
.mp-addpop .queue{display:flex;flex-direction:column;gap:6px;}
.mp-addpop .qbar{height:6px;border-radius:99px;background:var(--bg2);overflow:hidden;border:1px solid var(--border);}
.mp-addpop .qfill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent),#8b5cf6);
transition:width .35s cubic-bezier(.22,.9,.3,1);}
.mp-addpop .qmeta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text3);}
.mp-addpop .qmeta b{color:var(--text1);font-weight:800;}
.mp-addpop .qcur{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2);}
.mp-addpop .qlist{display:flex;flex-direction:column;gap:4px;max-height:120px;overflow-y:auto;}
.mp-addpop .qitem{display:flex;align-items:center;gap:7px;font-size:11px;padding:4px 7px;border-radius:7px;}
.mp-addpop .qitem.run{background:var(--bg2);}
.mp-addpop .qitem .qi{width:14px;text-align:center;flex:none;}
.mp-addpop .qitem .qt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2);}
.mp-addpop .qitem.ok .qi{color:#10b981;}
.mp-addpop .qitem.fail .qi{color:#e74c3c;}
.mp-addpop .qitem.fail .qt{color:#e74c3c;}
.mp-addpop .ready{width:7px;height:7px;border-radius:50%;background:var(--text3);flex:none;display:inline-block;}
.mp-addpop .ready.ok{background:#10b981;box-shadow:0 0 0 3px #10b98122;}
.mp-addpop .ready.no{background:#f59e0b;}
/* === style block 4 === */
/* 시작 화면에서는 장식용 집게를 숨긴다. */
#splash:not(.hide)~#clawFx,body.sdy-booting #clawFx{display:none!important}
/* 8.8 responsive pass: phone and tablet prioritize the current task, not decorative controls */
@media (max-width:1024px){
.link-bar{display:none!important}.header{position:sticky}.app-brand h1{max-width:42vw}
/* 9.2 · 좁아지면 가운데 정렬을 포기하고 한 줄 가로 스크롤로 바꾼다.
(grid 3분할을 유지하면 가운데 묶음이 찌그러진다)
15.27 · ⑨ 유리 툴바 규칙(파일 아래쪽 display:grid!important · 3칸 그리드)이
이 규칙을 이기고 있어서 641~1024px 에서 도구가 서로 겹쳤다. 같은 선택자를
한 번 더 얹어 좁은 화면에서는 '한 줄 가로 스크롤' 이 이기게 되살린다. */
.editor-toolbar,html.theme-pro .editor-toolbar{
display:flex!important;overflow-x:auto!important;overflow-y:hidden!important;
gap:4px;padding:6px!important;min-height:48px;flex-wrap:nowrap;align-items:center;
-webkit-overflow-scrolling:touch;touch-action:pan-x;overscroll-behavior-x:contain;scrollbar-width:thin}
.editor-toolbar::-webkit-scrollbar,html.theme-pro .editor-toolbar::-webkit-scrollbar{display:none}
/* 가로 스크롤 모드에서는 세 묶음 모두 '줄어들지 않게' 고정한다.
(flex 기본값인 shrink 가 걸리면 제목칸이 0px 로 찌부러진다) */
.editor-toolbar .tb-left{flex:0 0 auto;justify-self:auto}
.editor-toolbar .tb-mid,.editor-toolbar .tb-right{flex:0 0 auto;justify-self:auto}
/* 제목은 자리를 다 차지하지 않게 고정폭으로 (스크롤 없이 도구가 먼저 보이도록) */
.editor-toolbar #edTitle{flex:0 0 auto;width:150px;min-width:110px}
.editor-toolbar #saveState,.editor-toolbar #liveBadge,.editor-toolbar #zoomLabel{display:none!important}
.editor-toolbar .tb-group{padding:0;background:transparent;border:0}
.cards-box{width:min(600px,96vw);max-height:88dvh}.cards-head{padding:12px 14px}
#cardsHome,#cardsStudy,#cardsPaste,#cardsStats,#cardsAnalytics,#cardsBrowse{padding:12px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.cd-inner{height:min(42dvh,290px)}
/* 14.14 · 태블릿 폭에서만. 폰(≤640px)은 문서 끝 v1414-phone 이 좌우를
직접 잡으므로 여기서 max-width 를 또 걸면 규칙이 둘로 갈린다. */
@media (min-width:641px){
.mp{max-width:calc(100vw - 12px)!important}.mp-list{max-width:calc(100vw - 12px)!important}
}
.ctx-menu.show{max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;
overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain}
}
@media (max-width:640px){
/* Android Chrome는 html/body를 동시에 스크롤러로 두면 카드에서 시작한 스와이프가
루트 스크롤로 전달되지 않는 경우가 있다. 홈/폴더 전용 스크롤러를 하나만 두어
Chrome·Samsung Internet 모두 같은 경로로 스크롤하게 한다. */
html,body{width:100%;height:100%;overflow:hidden!important}
body{min-height:100%;touch-action:auto;overscroll-behavior-y:auto}
#mainView{position:fixed!important;inset:0!important;width:100%;height:100dvh!important;
min-height:0!important;overflow-x:hidden!important;overflow-y:scroll!important;
overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;
scrollbar-gutter:auto}
#mainView main{min-height:calc(100dvh - 42px);padding-bottom:max(112px,env(safe-area-inset-bottom))!important;touch-action:pan-y}
.vault-desk,#cardsHome,#cardsStudy,#cardsPaste,#cardsStats,#cardsAnalytics,#cardsBrowse{touch-action:pan-y;-webkit-overflow-scrolling:touch}
/* 카드 위에서 시작한 Android Chrome 스와이프도 반드시 폴더 목록 스크롤로 보낸다. */
#noteGrid,.note-card,.folder-card,.note-preview,.note-card-name{touch-action:pan-y!important}
/* 14.14 · 헤더/본문/툴바 크기와 음악바·목록 위치는 문서 끝
v1414-phone 블록 한 곳에서만 정한다. (여기 값들과 위쪽 블록들이
서로 달라 파일 순서로 승자가 갈리고 있었다.) 여기는 '무엇을 숨길지' 등
겹치지 않는 규칙만 남긴다. */
.hdr-right>#vaultBtn,.hdr-right>#adminToggleBtn{display:none!important}
.search-wrap{display:none!important}
.editor-toolbar .tool-cat{height:34px;padding:0 8px;font-size:12px}.editor-toolbar .tool-cat .caret{font-size:11px}
.page-badge{height:30px;padding:0 6px;font-size:11px}
.pg-nav{padding:2px 5px!important}.pg-nav input{width:32px;height:22px;font-size:12px}
.pg-nav .tot{font-size:11px}
.side-bar,.side-open{display:none!important}
.side-panel{left:0!important}.side-panel.show{width:min(82vw,300px)!important}
.editor-body{overflow:auto!important;padding:6px 2px 100px!important;
overflow-anchor:none;
}
/* 펜 색·굵기·도형 툴바도 화면 안에서 가로 스와이프 */
.draw-toolbar{left:6px!important;right:6px!important;
top:calc(var(--sdy-edbar-bottom, 56px) + 8px)!important;bottom:auto!important;
width:auto!important;max-width:none!important;transform:none!important;overflow-x:auto!important;
justify-content:flex-start;white-space:nowrap;padding:7px 9px!important;z-index:1350!important;
-webkit-overflow-scrolling:touch;touch-action:pan-x}
/* 모바일 길게 누르기 메뉴는 항상 화면 아래 시트로 열고 내부만 스크롤 */
.ctx-menu.show{left:8px!important;right:8px!important;top:auto!important;
bottom:max(8px,env(safe-area-inset-bottom))!important;width:auto!important;min-width:0!important;
max-height:min(68dvh,560px)!important;overflow-x:hidden!important;overflow-y:auto!important;
overscroll-behavior:contain;border-radius:16px!important;padding:7px!important}
.ctx-menu.show .ctx-item{padding:12px 13px!important;font-size:14px!important;border-radius:10px!important}
.vd-selbar{position:sticky;top:0;z-index:8;background:var(--vd-field);box-shadow:0 7px 18px -12px rgba(0,0,0,.22)}
.vd-selbar.on{background:var(--vd-acc-soft)}
#vaultList .vd-item,#stkList .v-file{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.cards-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.cards-actions .cd-btn{width:100%;padding:10px 7px}
.cd-statrow{grid-template-columns:repeat(3,1fr)}.cd-stat{padding:9px 2px}.cd-memory{padding:10px}.cd-opts{gap:6px}.cd-opt{padding:12px 10px;font-size:13px}
/* 14.14 · 음악바/목록의 크기·위치는 문서 끝 v1414-phone 에서만 정한다.
(여기서 .mp-btns button 을 29px 로 줄이던 규칙이 위쪽 34px 규칙을
덮어써서 단추가 손가락보다 작아져 있었다.) */
}
/* === style block 5 === */
#focusClock{position:fixed;inset:0;z-index:2100;display:none;flex-direction:column;
align-items:center;justify-content:center;gap:0;
padding:74px 12px calc(118px + env(safe-area-inset-bottom));box-sizing:border-box;
/* 11.7 · 뒤 화면은 은은히 비치되, 숫자가 확실히 읽히도록 더 진하게 */
background:color-mix(in srgb,var(--bg) 82%,transparent);
backdrop-filter:blur(26px) saturate(135%) brightness(1.02);
-webkit-backdrop-filter:blur(26px) saturate(135%) brightness(1.02);
color:var(--text1);user-select:none;-webkit-user-select:none;
animation:fcFade .28s ease;overflow:hidden;}
#focusClock.show{display:flex;}
#focusClock.closing{animation:fcFadeOut .22s ease forwards;}
@keyframes fcFade{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1}}
@keyframes fcFadeOut{to{opacity:0;transform:scale(1.01)}}
/* 은은한 빛 — 화면 가운데로 시선을 모은다 */
#focusClock::before{content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(60% 55% at 50% 45%,
color-mix(in srgb,var(--accent) 12%,transparent) 0,transparent 70%);}
.fc-wrap{position:relative;display:flex;flex-direction:column;align-items:center;
gap:14px;max-width:min(1100px,92vw);width:100%;text-align:center;}
/* 위쪽 모드 전환 · 오른쪽 위 닫기 — 가만히 있으면 사라진다 */
.fc-chrome{position:fixed;left:0;right:0;display:flex;align-items:center;
justify-content:center;gap:8px;padding:14px 16px;
transition:opacity .45s ease,transform .45s ease;z-index:3;}
.fc-chrome.top{top:0;}
.fc-chrome.bottom{bottom:0;padding-bottom:max(16px,env(safe-area-inset-bottom));flex-wrap:wrap;}
#focusClock.idle .fc-chrome{opacity:0;pointer-events:none;}
#focusClock.idle .fc-chrome.top{transform:translateY(-8px);}
#focusClock.idle .fc-chrome.bottom{transform:translateY(8px);}
#focusClock.idle{cursor:none;}
/* 11.2 · 모드 알약 바 — #focusClock 으로 스코프한다.
같은 .fc-modes 클래스를 암기 카드 학습 방식 그리드(1937)도 쓰는데,
스코프가 없으면 이 flex 알약 규칙이 파일 뒤에 와서 카드 그리드를 덮어써
버튼이 컨테이너 왼쪽에 몰리는 원인이 된다. */
#focusClock .fc-modes{display:flex;gap:4px;padding:4px;border-radius:99px;
background:color-mix(in srgb,var(--card) 94%,transparent);
border:1px solid color-mix(in srgb,var(--border) 80%,transparent);
box-shadow:0 6px 22px rgba(0,0,0,.12);backdrop-filter:blur(8px);}
#focusClock .fc-modes button{border:none;background:transparent;color:var(--text2);cursor:pointer;
padding:7px 16px;border-radius:99px;font-size:12.5px;font-weight:800;
display:flex;align-items:center;gap:6px;transition:background .18s,color .18s;}
#focusClock .fc-modes button i{font-size:15px;}
#focusClock .fc-modes button:hover{color:var(--text1);}
#focusClock .fc-modes button.on{background:var(--accent);color:#fff;
box-shadow:0 3px 12px color-mix(in srgb,var(--accent) 40%,transparent);}
.fc-x{position:fixed;top:12px;right:14px;z-index:4;width:38px;height:38px;border-radius:12px;
border:1px solid color-mix(in srgb,var(--border) 95%,transparent);
background:color-mix(in srgb,var(--card) 94%,transparent);color:var(--text2);
font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;
backdrop-filter:blur(8px);transition:opacity .45s,color .18s,border-color .18s;}
.fc-x:hover{color:var(--text1);border-color:var(--text3);}
#focusClock.idle .fc-x{opacity:0;pointer-events:none;}
.fc-full{right:60px;}
/* 커다란 숫자 */
.fc-time{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
font-weight:300;letter-spacing:-.035em;line-height:1.0;
font-size:clamp(62px,16.5vw,220px);color:var(--text1);
text-shadow:0 2px 18px color-mix(in srgb,var(--bg) 85%,transparent),
0 6px 44px color-mix(in srgb,var(--accent) 18%,transparent);
display:block;white-space:nowrap;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.fc-time .sec{font-size:.4em;font-weight:500;color:var(--text2);opacity:.85;
letter-spacing:-.02em;margin-left:.14em;}
/* 23.0 · 1/100초 — 작은 숫자가 큰 숫자 아래로 내려가 붙어 보이던 문제.
같은 baseline 에 앉히고(vertical-align), 굵기·색은 유지하되 조금 키웠다. */
.fc-time .ms{display:inline-block;vertical-align:baseline;font-size:.44em;font-weight:500;
color:var(--accent);letter-spacing:-.01em;margin-left:.08em;min-width:1.75em;text-align:left;
line-height:1;}
/* 23.0 · 자릿수가 길어지면(1:00:00 타이머·1:02:33.45 스톱워치) 숫자가 링·화면 밖으로
삐져나온다. 길이에 따라 한 단씩 줄여 늘 상자 안에 들어오게 한다. */
.fc-time.len-mid{font-size:clamp(46px,11.5vw,164px);}
.fc-time.len-long{font-size:clamp(38px,9vw,128px);}
.fc-time.len-xl{font-size:clamp(32px,7.4vw,106px);}
.fc-ring .fc-time.len-mid{font-size:clamp(42px,9.6vw,108px);}
.fc-ring .fc-time.len-long{font-size:clamp(34px,7.4vw,82px);}
.fc-ring .fc-time.len-xl{font-size:clamp(28px,6.2vw,68px);}
.fc-timer-sub{display:block;text-align:center;margin-top:14px;}
.fc-done-msg{display:block;text-align:center;margin-top:10px;}
.fc-time .cl{opacity:.35;font-weight:200;animation:fcBlink 2s steps(1,end) infinite;}
@keyframes fcBlink{0%,60%{opacity:.35}61%,100%{opacity:.10}}
.fc-time.run .cl{animation:none;opacity:.35;}
.fc-sub{font-size:clamp(12.5px,1.5vw,17px);font-weight:700;color:var(--text2);
letter-spacing:.02em;text-shadow:0 1px 10px color-mix(in srgb,var(--bg) 80%,transparent);}
.fc-label{font-size:11.5px;font-weight:900;letter-spacing:.2em;color:var(--accent);
text-transform:uppercase;opacity:1;
text-shadow:0 1px 10px color-mix(in srgb,var(--bg) 80%,transparent);}
/* 타이머 진행 링 */
.fc-ring{position:relative;margin:0 auto;width:min(54vh,440px);height:min(54vh,440px);
max-width:88vw;max-height:88vw;display:flex;align-items:center;justify-content:center;}
.fc-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}
.fc-ring circle{fill:none;stroke-linecap:round;}
.fc-ring .trk{stroke:color-mix(in srgb,var(--text3) 22%,transparent);stroke-width:4;}
.fc-ring .bar{stroke:var(--accent);stroke-width:4;
transition:stroke-dashoffset .35s linear,stroke .3s;}
.fc-ring.warn .bar{stroke:#f59e0b;}
.fc-ring.over .bar{stroke:#ef4444;}
.fc-ring .inner{position:relative;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:6px;padding:0 6%;}
.fc-ring .fc-time{font-size:clamp(52px,12vw,132px);}
/* 조작 버튼 */
.fc-btns{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center;}
.fc-btn{border:1px solid color-mix(in srgb,var(--border) 95%,transparent);
background:color-mix(in srgb,var(--card) 94%,transparent);color:var(--text1);
border-radius:14px;cursor:pointer;padding:11px 20px;font-size:13.5px;font-weight:800;
display:flex;align-items:center;gap:7px;backdrop-filter:blur(8px);
transition:transform .14s,border-color .18s,background .18s,color .18s;}
.fc-btn i{font-size:17px;}
.fc-btn:hover{border-color:var(--accent);color:var(--accent);}
.fc-btn:active{transform:scale(.96);}
.fc-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;
box-shadow:0 8px 26px color-mix(in srgb,var(--accent) 38%,transparent);}
.fc-btn.primary:hover{color:#fff;filter:brightness(1.07);}
.fc-btn.ghost{background:transparent;}
.fc-btn[disabled]{opacity:.4;cursor:default;transform:none;}
/* 타이머 프리셋 */
.fc-presets{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:min(720px,92vw);}
.fc-preset{border:1px solid color-mix(in srgb,var(--border) 85%,transparent);
background:color-mix(in srgb,var(--card) 70%,transparent);color:var(--text2);
border-radius:99px;cursor:pointer;padding:7px 15px;font-size:12px;font-weight:800;
backdrop-filter:blur(6px);transition:all .15s;}
.fc-preset:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px);}
.fc-preset.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.fc-preset em{font-style:normal;opacity:.7;font-size:10px;margin-left:4px;}
.fc-custom{display:flex;align-items:center;gap:6px;}
.fc-custom input{width:58px;height:34px;text-align:center;font-size:15px;font-weight:800;
font-variant-numeric:tabular-nums;border-radius:10px;color:var(--text1);
border:1px solid color-mix(in srgb,var(--border) 85%,transparent);
background:color-mix(in srgb,var(--card) 75%,transparent);outline:none;}
.fc-custom input:focus{border-color:var(--accent);}
.fc-custom span{color:var(--text3);font-size:12px;font-weight:800;}
/* 랩(구간) 기록 */
.fc-laps{width:min(430px,90vw);margin:0 auto;max-height:min(24vh,190px);overflow-y:auto;
display:flex;flex-direction:column;gap:3px;padding:8px;border-radius:14px;
background:color-mix(in srgb,var(--card) 88%,transparent);
border:1px solid color-mix(in srgb,var(--border) 70%,transparent);
backdrop-filter:blur(8px);}
.fc-laps:empty{display:none;}
.fc-lap{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:9px;
font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--text2);}
.fc-lap:nth-child(odd){background:color-mix(in srgb,var(--bg2) 55%,transparent);}
.fc-lap b{flex:none;width:34px;text-align:left;color:var(--text3);font-size:11px;}
.fc-lap .gap{flex:1;text-align:right;color:var(--text1);font-weight:800;}
.fc-lap .tot{flex:none;width:92px;text-align:right;color:var(--text3);}
.fc-lap.best .gap{color:#10b981;}
.fc-lap.worst .gap{color:#ef4444;}
/* 타이머 종료 */
#focusClock.done .fc-time{color:#ef4444;animation:fcPulse 1s ease-in-out infinite;}
@keyframes fcPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.985)}}
.fc-done-msg{font-size:14px;font-weight:800;color:#ef4444;}
.fc-hint{display:none!important;position:fixed;bottom:8px;left:0;right:0;text-align:center;font-size:10.5px;
color:var(--text3);opacity:.5;transition:opacity .4s;pointer-events:none;}
#focusClock.idle .fc-hint{opacity:0;}
/* 헤더 버튼의 '돌아가는 중' 점 */
.clock-btn{position:relative;}
.clock-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;
background:var(--accent);box-shadow:0 0 0 2px var(--card);animation:fcDot 1.6s ease-in-out infinite;}
@keyframes fcDot{0%,100%{opacity:1}50%{opacity:.25}}
@media(max-width:640px){
.fc-time{font-size:clamp(52px,20vw,120px);}
.fc-ring{width:min(52vh,340px);height:min(52vh,340px);}
.fc-btn{padding:10px 16px;font-size:12.5px;}
#focusClock .fc-modes button{padding:7px 12px;font-size:12px;}
.fc-laps{max-height:22vh;}
}
/* === style block 6 === */
/* 12.6 · Apple Music 영감의 탐색형 라이브러리 */
.mp-library-tools{display:flex;gap:7px;padding:10px 10px 2px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,var(--card)),var(--card));}.mp-library-tools .mp-search{flex:1;min-width:0;font-size:1.35rem;}.mp-goto input{border:1px solid var(--border);background:var(--bg2);color:var(--text1);border-radius:8px;padding:6px;font-size:11px;font-weight:700}.mp-goto{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text3)}.mp-goto input{width:42px;padding:4px;text-align:center}.mp-discover{padding:4px 10px 12px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 10%,var(--card)),var(--card) 62%);border-bottom:1px solid var(--border)}.mp-dis-head{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0}.mp-dis-head b{font-size:16px;letter-spacing:-.04em}.mp-dis-head span{font-size:9px;color:var(--text3)}.mp-rec-title{font-size:11px;font-weight:800;margin:7px 0 5px;color:var(--text2)}.mp-rec-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}.mp-rec-row::-webkit-scrollbar{display:none}.mp-rec-card{border:0;background:transparent;color:var(--text1);width:78px;min-width:78px;text-align:left;cursor:pointer;padding:0}.mp-rec-card img{width:78px;height:78px;object-fit:cover;border-radius:10px;box-shadow:0 5px 14px rgba(0,0,0,.16)}.mp-rec-card span,.mp-rec-card em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mp-rec-card span{font-size:10px;font-weight:800;margin-top:4px}.mp-rec-card em{font-size:9px;color:var(--text3);font-style:normal;margin-top:1px}.mp-rec-empty{font-size:10px;color:var(--text3);padding:10px 0}.mp-lfoot{gap:7px}.mp-lfoot button{white-space:nowrap}/* 14.14 · 정렬은 큰 select 대신 작은 아이콘 버튼 하나 (크로스바·확장 공통) */
.mp-sortbtn{flex:none;width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--bg2);color:var(--text3);border-radius:9px;cursor:pointer;font-size:15px;line-height:1;transition:color .15s,border-color .15s,background .15s;margin-left:auto;}
.mp-sortbtn:hover{color:var(--text1);border-color:var(--text3);}
.mp-sortbtn.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
background:color-mix(in srgb,var(--accent) 12%,var(--bg2));}
.mp-sortbtn i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;line-height:1;}
#mpBig .mpb-tabs button.mp-sortbtn{width:29px;height:26px;border:1px solid var(--border);border-radius:9px;background:var(--bg2);color:var(--text3);display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;font-size:15px;}
#mpBig .mpb-tabs button.mp-sortbtn i{margin:0;font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center;}
#mpBig .mpb-tabs button.mp-sortbtn.on{background:color-mix(in srgb,var(--accent) 13%,var(--card));color:var(--accent);
border-color:color-mix(in srgb,var(--accent) 45%,var(--border));}
/* 16.x · 가사 탭에서는 정렬 버튼이 필요 없다 (가사는 한 곡만 보여 준다) */
body.lyrmode #mpBig .mpb-tabs button.mp-sortbtn{display:none;}
@media(max-width:640px){.mp-dis-head span{display:none}.mp-rec-card{width:68px;min-width:68px}.mp-rec-card img{width:68px;height:68px}.mp-goto{display:none}.mp-sortbtn{width:28px;height:28px;font-size:14px;}}
/* === style block 7 === */
/* 13.0 · 음악 UI — 작은 컨트롤바 재생/일시정지 버튼: 파란색 배경 제거 및 고대비 텍스트 색상 */
.mp.mp-bar .mp-cover{box-shadow:0 3px 11px rgba(0,0,0,.16);border-radius:10px;}
.mp.mp-bar .mp-title{letter-spacing:-.02em;font-weight:800;}
.mp.mp-bar .mp-prog{background:color-mix(in srgb,var(--text3) 18%,var(--bg2));}
.mp.mp-bar .mp-btns button{color:color-mix(in srgb,var(--text1) 72%,var(--text3));}
.mp.mp-bar .mp-btns button:hover{background:color-mix(in srgb,var(--accent) 9%,var(--bg2));color:var(--accent);}
.mp.mp-bar .mp-btns .mp-pp{
background:transparent !important;
background-image:none !important;
color:var(--text1) !important;
box-shadow:none !important;
border:none !important;
font-size: 17px !important;
width: 34px !important;
height: 34px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
transition: color .15s, transform .1s !important;
}
.mp.mp-bar .mp-btns .mp-pp:hover{
background:transparent !important;
background-image:none !important;
color:var(--accent) !important;
filter:none !important;
box-shadow:none !important;
}
/* 13.0 · 확대 플레이어 창 곡률(암기노트와 동일 16px) 및 유리판 스타일 */
#mpBig{
border-radius:16px!important;
border-color:color-mix(in srgb,var(--border) 78%,transparent)!important;
background:color-mix(in srgb,var(--card) 91%,transparent)!important;
box-shadow:0 28px 90px rgba(15,23,42,.28),0 5px 18px rgba(0,0,0,.12)!important;
backdrop-filter:blur(24px) saturate(135%);
-webkit-backdrop-filter:blur(24px) saturate(135%);
overflow:hidden;
}
/* 13.0 · 암기 카드와 음악 창 상단 손잡이 두께·스타일·위치 100% 통일 */
.fcard-head,#mpBig .mpb-head{
height:20px!important;
min-height:20px!important;
padding:3px 8px!important;
box-sizing:border-box!important;
gap:8px!important;
background:var(--bg2)!important;
border-bottom:1px solid var(--border)!important;
cursor:grab!important;
touch-action:none!important;
user-select:none!important;
-webkit-user-select:none!important;
display:flex!important;
align-items:center!important;
}
.fcard-head:active,#mpBig .mpb-head:active{cursor:grabbing!important;}
.fcard-head>i,#mpBig .mpb-head>i{font-size:12px!important;opacity:.7!important;color:var(--text3)!important;flex:none!important;}
.fcard-head .sp,#mpBig .mpb-head .sp{flex:1!important;display:block!important;}
.fcard-head .cards-x,#mpBig .mpb-head #mpBX,#mpBig .mpb-head button.cards-x{
width:22px!important;
height:19px!important;
padding:0!important;
border-radius:6px!important;
font-size:14px!important;
border:none!important;
background:transparent!important;
color:var(--text3)!important;
cursor:pointer!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
flex:none!important;
}
/* 15.0 · 전체 화면 버튼 — 접기 버튼과 같은 모양 */
#mpBig .mpb-head #mpBFull{
width:22px!important;height:19px!important;padding:0!important;
border-radius:6px!important;font-size:13px!important;
border:none!important;background:transparent!important;color:var(--text3)!important;
cursor:pointer!important;display:flex!important;align-items:center!important;
justify-content:center!important;flex:none!important;
}
#mpBig .mpb-head #mpBFull:hover{background:var(--bg)!important;color:var(--text1)!important;}
/* 15.0 → 16.0 · 전체 화면 규칙은 아래