From 7941e5a9f6597b14408dd38052f0e3b69cb1a521 Mon Sep 17 00:00:00 2001 From: Mina Choi Date: Mon, 28 Sep 2026 16:06:44 +0900 Subject: [PATCH] =?UTF-8?q?[feat]=20solution/site:=20=EA=B3=A0=ED=83=9D=20?= =?UTF-8?q?=EB=85=B8=EB=9E=98=20=EB=AA=A9=EB=A1=9D=20=EC=83=81=EC=9E=90?= =?UTF-8?q?=EB=A5=BC=20=EC=A2=85=EC=9D=B4=20=ED=86=A4=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=E2=80=94=20=EA=B0=80=EB=8A=94=20=EC=84=A0=20=C2=B7=20=EB=AA=85?= =?UTF-8?q?=EC=A1=B0=20=EC=A0=9C=EB=AA=A9=20=C2=B7=20=ED=9D=99=EC=83=89=20?= =?UTF-8?q?=ED=8C=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit stay2 는 머리글 아래로 펼치는 목록이지만 떠 있는 상자가 쓰기 낫다(대표 결정). 모양만 고택에 맞춘다. - paper.css: #w4d-panel 배경 --paper · 1px --line · 4px 모서리 · 옅은 그림자 - 줄 구분 실선, 지금 곡은 --soft 바탕, 판 라벨·이퀄라이저 #8c4a2f, 가사 명조 site vitest 105 passed, 390px 에서 목록을 펼쳐 확인 Co-Authored-By: Claude Opus 5.5 (1M context) --- solution/site/src/layouts/paper/paper.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/solution/site/src/layouts/paper/paper.css b/solution/site/src/layouts/paper/paper.css index b195d57..653ed69 100644 --- a/solution/site/src/layouts/paper/paper.css +++ b/solution/site/src/layouts/paper/paper.css @@ -320,3 +320,21 @@ .w4p #w4d-mini button{width:40px;height:40px;padding:8px;border-radius:0;opacity:1;color:var(--ink)} .w4p #w4d-mini button svg{width:100%;height:100%} .w4p #w4d-mini[data-playing='1'] #w4d-tape{color:#8c4a2f} +.w4p #w4d-panel{background:var(--paper);border:1px solid var(--line);border-radius:4px;box-shadow:0 10px 28px rgb(31 29 25 / .14);color:var(--ink);font-family:-apple-system,'Apple SD Gothic Neo','Noto Sans KR',sans-serif} +.w4p #w4d-panel .w4d-head{padding:12px 8px 12px 16px;border-bottom:1px solid var(--line)} +.w4p #w4d-panel .w4d-head-t{font-family:'Noto Serif KR','AppleMyungjo',serif;font-size:15.5px;font-weight:400;letter-spacing:.03em} +.w4p #w4d-panel .w4d-head-n{font-size:13.5px;color:var(--sub);opacity:1} +.w4p #w4d-panel .w4d-head button{width:36px;height:36px;opacity:1;color:var(--sub)} +.w4p #w4d-panel .w4d-head svg{width:16px;height:16px} +.w4p #w4d-panel .w4d-item{min-height:56px;padding:10px 16px;gap:12px} +.w4p #w4d-panel .w4d-item + .w4d-item{border-top:1px solid #efece6} +.w4p #w4d-panel .w4d-item:hover,.w4p #w4d-panel .w4d-item[aria-current='true']{background:var(--soft)} +.w4p #w4d-panel .w4d-item[aria-current='true'] .w4d-t{color:var(--ink);font-weight:500} +.w4p #w4d-panel .w4d-t{font-size:15.5px;font-weight:400} +.w4p #w4d-panel .w4d-sub{margin-top:2px;font-size:13.5px;color:var(--sub);opacity:1} +.w4p #w4d-panel .w4d-time{font-size:13.5px;color:var(--sub);opacity:1} +.w4p #w4d-panel .w4d-disc-sm{--w4d-lbl:#8c4a2f} +.w4p #w4d-panel .w4d-disc-sm::after{background:var(--paper)} +.w4p #w4d-panel .w4d-eq i{background:#8c4a2f} +.w4p #w4d-lyrics-box{padding:14px 16px 18px;border-top:1px solid var(--line);font-family:'Noto Serif KR','AppleMyungjo',serif;font-size:15px;line-height:1.95;color:#39352e} +.w4p #w4d-panel .w4d-info{line-height:1.45}