/* ─────────────────────────────────────────────────────────────
* 이 파일을 여러 개로 나누지 마세요.
*
* 뒤 규칙이 앞 규칙의 같은 속성을 덮는 자리가 186군데입니다
* (.tabbar 6번, .phead 5번, .scr-foot·.slip·.sheet·.confirm 각 4번 …).
* 톤을 잡는 절(「선 줄이기」·「셜록 홈즈 톤」)이 앞 절을 일부러 덮는 구조라,
* 파일을 쪼개 불러오는 순서가 한 칸만 틀려도 화면이 조용히 무너집니다.
* 게다가 요청이 늘어 첫 로드를 3MB → 1.3MB 로 줄인 것을 되돌립니다.
*
* 얼마나 기대고 있는지 재려면: node app/tools/css-order-audit.js
* 절은 「═══」 배너로 나뉘어 있으니 그것으로 찾으세요.
* ───────────────────────────────────────────────────────────── */
/* Pretendard 가변 — 글자 범위별로 쪼갠 조각. 쓰는 범위만 내려받는다(예전엔 2MB 한 덩어리였다) */
/**
* Minified by jsDelivr using clean-css v5.3.3.
* Original file: /gh/orioncactus/pretendard@1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css
*
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
*/
@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.0.woff2) format('woff2-variations');unicode-range:U+f9ca-fa0b,U+ff03-ff05,U+ff07,U+ff0a-ff0b,U+ff0d-ff19,U+ff1b,U+ff1d,U+ff20-ff5b,U+ff5d,U+ffe0-ffe3,U+ffe5-ffe6}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.1.woff2) format('woff2-variations');unicode-range:U+d723-d728,U+d72a-d733,U+d735-d748,U+d74a-d74f,U+d752-d753,U+d755-d757,U+d75a-d75f,U+d762-d764,U+d766-d768,U+d76a-d76b,U+d76d-d76f,U+d771-d787,U+d789-d78b,U+d78d-d78f,U+d791-d797,U+d79a,U+d79c,U+d79e-d7a3,U+f900-f909,U+f90b-f92e}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.2.woff2) format('woff2-variations');unicode-range:U+d679-d68b,U+d68e-d69e,U+d6a0,U+d6a2-d6a7,U+d6a9-d6c3,U+d6c6-d6c7,U+d6c9-d6cb,U+d6cd-d6d3,U+d6d5-d6d6,U+d6d8-d6e3,U+d6e5-d6e7,U+d6e9-d6fb,U+d6fd-d717,U+d719-d71f,U+d721-d722}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.3.woff2) format('woff2-variations');unicode-range:U+d5bc-d5c7,U+d5ca-d5cb,U+d5cd-d5cf,U+d5d1-d5d7,U+d5d9-d5da,U+d5dc,U+d5de-d5e3,U+d5e6-d5e7,U+d5e9-d5eb,U+d5ed-d5f6,U+d5f8,U+d5fa-d5ff,U+d602-d603,U+d605-d607,U+d609-d60f,U+d612-d613,U+d616-d61b,U+d61d-d637,U+d63a-d63b,U+d63d-d63f,U+d641-d647,U+d64a-d64c,U+d64e-d653,U+d656-d657,U+d659-d65b,U+d65d-d666,U+d668,U+d66a-d678}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.4.woff2) format('woff2-variations');unicode-range:U+d507,U+d509-d50b,U+d50d-d513,U+d515-d53b,U+d53e-d53f,U+d541-d543,U+d545-d54c,U+d54e,U+d550,U+d552-d557,U+d55a-d55b,U+d55d-d55f,U+d561-d564,U+d566-d567,U+d56a,U+d56c,U+d56e-d573,U+d576-d577,U+d579-d583,U+d585-d586,U+d58a-d5a4,U+d5a6-d5bb}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.5.woff2) format('woff2-variations');unicode-range:U+d464-d477,U+d47a-d47b,U+d47d-d47f,U+d481-d487,U+d489-d48a,U+d48c,U+d48e-d4e7,U+d4e9-d503,U+d505-d506}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.6.woff2) format('woff2-variations');unicode-range:U+d3bf-d3c7,U+d3ca-d3cf,U+d3d1-d3eb,U+d3ee-d3ef,U+d3f1-d3f3,U+d3f5-d3fb,U+d3fd-d400,U+d402-d45b,U+d45d-d463}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.7.woff2) format('woff2-variations');unicode-range:U+d2ff,U+d302-d304,U+d306-d30b,U+d30f,U+d311-d313,U+d315-d31b,U+d31e,U+d322-d324,U+d326-d327,U+d32a-d32b,U+d32d-d32f,U+d331-d337,U+d339-d33c,U+d33e-d37b,U+d37e-d37f,U+d381-d383,U+d385-d38b,U+d38e-d390,U+d392-d397,U+d39a-d39b,U+d39d-d39f,U+d3a1-d3a7,U+d3a9-d3aa,U+d3ac,U+d3ae-d3b3,U+d3b5-d3b7,U+d3b9-d3bb,U+d3bd-d3be}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.8.woff2) format('woff2-variations');unicode-range:U+d257-d27f,U+d281-d29b,U+d29d-d29f,U+d2a1-d2ab,U+d2ad-d2b7,U+d2ba-d2bb,U+d2bd-d2bf,U+d2c1-d2c7,U+d2c9-d2ef,U+d2f2-d2f3,U+d2f5-d2f7,U+d2f9-d2fe}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.9.woff2) format('woff2-variations');unicode-range:U+d1b4,U+d1b6-d1f3,U+d1f5-d22b,U+d22e-d22f,U+d231-d233,U+d235-d23b,U+d23d-d240,U+d242-d256}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.10.woff2) format('woff2-variations');unicode-range:U+d105-d12f,U+d132-d133,U+d135-d137,U+d139-d13f,U+d141-d142,U+d144,U+d146-d14b,U+d14e-d14f,U+d151-d153,U+d155-d15b,U+d15e-d187,U+d189-d19f,U+d1a2-d1a3,U+d1a5-d1a7,U+d1a9-d1af,U+d1b2-d1b3}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.11.woff2) format('woff2-variations');unicode-range:U+d04b-d04f,U+d051-d057,U+d059-d06b,U+d06d-d06f,U+d071-d073,U+d075-d07b,U+d07e-d0a3,U+d0a6-d0a7,U+d0a9-d0ab,U+d0ad-d0b3,U+d0b6,U+d0b8,U+d0ba-d0bf,U+d0c2-d0c3,U+d0c5-d0c7,U+d0c9-d0cf,U+d0d2,U+d0d6-d0db,U+d0de-d0df,U+d0e1-d0e3,U+d0e5-d0eb,U+d0ee-d0f0,U+d0f2-d104}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.12.woff2) format('woff2-variations');unicode-range:U+cfa2-cfc3,U+cfc5-cfdf,U+cfe2-cfe3,U+cfe5-cfe7,U+cfe9-cff4,U+cff6-cffb,U+cffd-cfff,U+d001-d003,U+d005-d017,U+d019-d033,U+d036-d037,U+d039-d03b,U+d03d-d04a}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.13.woff2) format('woff2-variations');unicode-range:U+cef0-cef3,U+cef6,U+cef9-ceff,U+cf01-cf03,U+cf05-cf07,U+cf09-cf0f,U+cf11-cf12,U+cf14-cf1b,U+cf1d-cf1f,U+cf21-cf2f,U+cf31-cf53,U+cf56-cf57,U+cf59-cf5b,U+cf5d-cf63,U+cf66,U+cf68,U+cf6a-cf6f,U+cf71-cf84,U+cf86-cf8b,U+cf8d-cfa1}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.14.woff2) format('woff2-variations');unicode-range:U+ce3c-ce57,U+ce5a-ce5b,U+ce5d-ce5f,U+ce61-ce67,U+ce6a,U+ce6c,U+ce6e-ce73,U+ce76-ce77,U+ce79-ce7b,U+ce7d-ce83,U+ce85-ce88,U+ce8a-ce8f,U+ce91-ce93,U+ce95-ce97,U+ce99-ce9f,U+cea2,U+cea4-ceab,U+cead-cee3,U+cee6-cee7,U+cee9-ceeb,U+ceed-ceef}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.15.woff2) format('woff2-variations');unicode-range:U+cd92-cd93,U+cd96-cd97,U+cd99-cd9b,U+cd9d-cda3,U+cda6-cda8,U+cdaa-cdaf,U+cdb1-cdc3,U+cdc5-cdcb,U+cdcd-cde7,U+cde9-ce03,U+ce05-ce1f,U+ce22-ce34,U+ce36-ce3b}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.16.woff2) format('woff2-variations');unicode-range:U+ccef-cd07,U+cd0a-cd0b,U+cd0d-cd1a,U+cd1c,U+cd1e-cd2b,U+cd2d-cd5b,U+cd5d-cd77,U+cd79-cd91}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.17.woff2) format('woff2-variations');unicode-range:U+cc3f-cc43,U+cc46-cc47,U+cc49-cc4b,U+cc4d-cc53,U+cc55-cc58,U+cc5a-cc5f,U+cc61-cc97,U+cc9a-cc9b,U+cc9d-cc9f,U+cca1-cca7,U+ccaa,U+ccac,U+ccae-ccb3,U+ccb6-ccb7,U+ccb9-ccbb,U+ccbd-cccf,U+ccd1-cce3,U+cce5-ccee}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.18.woff2) format('woff2-variations');unicode-range:U+cb91-cbd3,U+cbd5-cbe3,U+cbe5-cc0b,U+cc0e-cc0f,U+cc11-cc13,U+cc15-cc1b,U+cc1d-cc20,U+cc23-cc27,U+cc2a-cc2b,U+cc2d,U+cc2f,U+cc31-cc37,U+cc3a,U+cc3c}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.19.woff2) format('woff2-variations');unicode-range:U+caf4-cb47,U+cb4a-cb90}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.20.woff2) format('woff2-variations');unicode-range:U+ca4a-ca4b,U+ca4e-ca4f,U+ca51-ca53,U+ca55-ca5b,U+ca5d-ca60,U+ca62-ca83,U+ca85-cabb,U+cabe-cabf,U+cac1-cac3,U+cac5-cacb,U+cacd-cad0,U+cad2,U+cad4-cad8,U+cada-caf3}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.21.woff2) format('woff2-variations');unicode-range:U+c996-c997,U+c99a-c99c,U+c99e-c9bf,U+c9c2-c9c3,U+c9c5-c9c7,U+c9c9-c9cf,U+c9d2,U+c9d4,U+c9d7-c9d8,U+c9db,U+c9de-c9df,U+c9e1-c9e3,U+c9e5-c9e6,U+c9e8-c9eb,U+c9ee-c9f0,U+c9f2-c9f7,U+c9f9-ca0b,U+ca0d-ca28,U+ca2a-ca49}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.22.woff2) format('woff2-variations');unicode-range:U+c8e9-c8f4,U+c8f6-c8fb,U+c8fe-c8ff,U+c901-c903,U+c905-c90b,U+c90e-c910,U+c912-c917,U+c919-c92b,U+c92d-c94f,U+c951-c953,U+c955-c96b,U+c96d-c973,U+c975-c987,U+c98a-c98b,U+c98d-c98f,U+c991-c995}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.23.woff2) format('woff2-variations');unicode-range:U+c841-c84b,U+c84d-c86f,U+c872-c873,U+c875-c877,U+c879-c87f,U+c882-c884,U+c887-c88a,U+c88d-c8c3,U+c8c5-c8df,U+c8e1-c8e8}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.24.woff2) format('woff2-variations');unicode-range:U+c779-c77b,U+c77e-c782,U+c786,U+c78b,U+c78d,U+c78f,U+c792-c793,U+c795,U+c797,U+c799-c79f,U+c7a2,U+c7a7-c7ab,U+c7ae-c7bb,U+c7bd-c7c0,U+c7c2-c7c7,U+c7c9-c7dc,U+c7de-c7ff,U+c802-c803,U+c805-c807,U+c809,U+c80b-c80f,U+c812,U+c814,U+c817-c81b,U+c81e-c81f,U+c821-c823,U+c825-c82e,U+c830-c837,U+c839-c83b,U+c83d-c840}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.25.woff2) format('woff2-variations');unicode-range:U+c6bb-c6bf,U+c6c2,U+c6c4,U+c6c6-c6cb,U+c6ce-c6cf,U+c6d1-c6d3,U+c6d5-c6db,U+c6dd-c6df,U+c6e1-c6e7,U+c6e9-c6eb,U+c6ed-c6ef,U+c6f1-c6f8,U+c6fa-c703,U+c705-c707,U+c709-c70b,U+c70d-c716,U+c718,U+c71a-c71f,U+c722-c723,U+c725-c727,U+c729-c734,U+c736-c73b,U+c73e-c73f,U+c741-c743,U+c745-c74b,U+c74e-c750,U+c752-c757,U+c759-c773,U+c776-c777}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.26.woff2) format('woff2-variations');unicode-range:U+c5f5-c5fb,U+c5fe,U+c602-c605,U+c607,U+c609-c60f,U+c611-c61a,U+c61c-c623,U+c626-c627,U+c629-c62b,U+c62d,U+c62f-c632,U+c636,U+c638,U+c63a-c63f,U+c642-c643,U+c645-c647,U+c649-c652,U+c656-c65b,U+c65d-c65f,U+c661-c663,U+c665-c677,U+c679-c67b,U+c67d-c693,U+c696-c697,U+c699-c69b,U+c69d-c6a3,U+c6a6,U+c6a8,U+c6aa-c6af,U+c6b2-c6b3,U+c6b5-c6b7,U+c6b9-c6ba}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.27.woff2) format('woff2-variations');unicode-range:U+c517-c527,U+c52a-c52b,U+c52d-c52f,U+c531-c538,U+c53a,U+c53c,U+c53e-c543,U+c546-c547,U+c54b,U+c54d-c552,U+c556,U+c55a-c55b,U+c55d,U+c55f,U+c562-c563,U+c565-c567,U+c569-c56f,U+c572,U+c574,U+c576-c57b,U+c57e-c57f,U+c581-c583,U+c585-c586,U+c588-c58b,U+c58e,U+c590,U+c592-c596,U+c599-c5b3,U+c5b6-c5b7,U+c5ba,U+c5be-c5c3,U+c5ca-c5cb,U+c5cd,U+c5cf,U+c5d2-c5d3,U+c5d5-c5d7,U+c5d9-c5df,U+c5e1-c5e2,U+c5e4,U+c5e6-c5eb,U+c5ef,U+c5f1-c5f3}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.28.woff2) format('woff2-variations');unicode-range:U+c475-c4ef,U+c4f2-c4f3,U+c4f5-c4f7,U+c4f9-c4ff,U+c502-c50b,U+c50d-c516}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.29.woff2) format('woff2-variations');unicode-range:U+c3d0-c3d7,U+c3da-c3db,U+c3dd-c3de,U+c3e1-c3ec,U+c3ee-c3f3,U+c3f5-c42b,U+c42d-c463,U+c466-c474}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.30.woff2) format('woff2-variations');unicode-range:U+c32b-c367,U+c36a-c36b,U+c36d-c36f,U+c371-c377,U+c37a-c37b,U+c37e-c383,U+c385-c387,U+c389-c3cf}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.31.woff2) format('woff2-variations');unicode-range:U+c26a-c26b,U+c26d-c26f,U+c271-c273,U+c275-c27b,U+c27e-c287,U+c289-c28f,U+c291-c297,U+c299-c29a,U+c29c-c2a3,U+c2a5-c2a7,U+c2a9-c2ab,U+c2ad-c2b3,U+c2b6,U+c2b8,U+c2ba-c2bb,U+c2bd-c2db,U+c2de-c2df,U+c2e1-c2e2,U+c2e5-c2ea,U+c2ee,U+c2f0,U+c2f2-c2f5,U+c2f7,U+c2fa-c2fb,U+c2fd-c2ff,U+c301-c307,U+c309-c30c,U+c30e-c312,U+c315-c323,U+c325-c328,U+c32a}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.32.woff2) format('woff2-variations');unicode-range:U+c1bc-c1c3,U+c1c5-c1df,U+c1e1-c1fb,U+c1fd-c203,U+c205-c20c,U+c20e,U+c210-c217,U+c21a-c21b,U+c21d-c21e,U+c221-c227,U+c229-c22a,U+c22c,U+c22e,U+c230,U+c233-c24f,U+c251-c257,U+c259-c269}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.33.woff2) format('woff2-variations');unicode-range:U+c101-c11b,U+c11f,U+c121-c123,U+c125-c12b,U+c12e,U+c132-c137,U+c13a-c13b,U+c13d-c13f,U+c141-c147,U+c14a,U+c14c-c153,U+c155-c157,U+c159-c15b,U+c15d-c166,U+c169-c16f,U+c171-c177,U+c179-c18b,U+c18e-c18f,U+c191-c193,U+c195-c19b,U+c19d-c19e,U+c1a0,U+c1a2-c1a4,U+c1a6-c1bb}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.34.woff2) format('woff2-variations');unicode-range:U+c049-c057,U+c059-c05b,U+c05d-c05f,U+c061-c067,U+c069-c08f,U+c091-c0ab,U+c0ae-c0af,U+c0b1-c0b3,U+c0b5,U+c0b7-c0bb,U+c0be,U+c0c2-c0c7,U+c0ca-c0cb,U+c0cd-c0cf,U+c0d1-c0d7,U+c0d9-c0da,U+c0dc,U+c0de-c0e3,U+c0e5-c0eb,U+c0ed-c0f3,U+c0f6,U+c0f8,U+c0fa-c0ff}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.35.woff2) format('woff2-variations');unicode-range:U+bfa7-bfaf,U+bfb1-bfc4,U+bfc6-bfcb,U+bfce-bfcf,U+bfd1-bfd3,U+bfd5-bfdb,U+bfdd-c048}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.36.woff2) format('woff2-variations');unicode-range:U+bf07,U+bf09-bf3f,U+bf41-bf4f,U+bf52-bf54,U+bf56-bfa6}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.37.woff2) format('woff2-variations');unicode-range:U+be56,U+be58,U+be5c-be5f,U+be62-be63,U+be65-be67,U+be69-be74,U+be76-be7b,U+be7e-be7f,U+be81-be8e,U+be90,U+be92-bea7,U+bea9-becf,U+bed2-bed3,U+bed5-bed6,U+bed9-bee3,U+bee6-bf06}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.38.woff2) format('woff2-variations');unicode-range:U+bdb0-bdd3,U+bdd5-bdef,U+bdf1-be0b,U+be0d-be0f,U+be11-be13,U+be15-be43,U+be46-be47,U+be49-be4b,U+be4d-be53}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.39.woff2) format('woff2-variations');unicode-range:U+bd03,U+bd06,U+bd08,U+bd0a-bd0f,U+bd11-bd22,U+bd25-bd47,U+bd49-bd58,U+bd5a-bd7f,U+bd82-bd83,U+bd85-bd87,U+bd8a-bd8f,U+bd91-bd92,U+bd94,U+bd96-bd98,U+bd9a-bdaf}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.40.woff2) format('woff2-variations');unicode-range:U+bc4e-bc83,U+bc86-bc87,U+bc89-bc8b,U+bc8d-bc93,U+bc96,U+bc98,U+bc9b-bc9f,U+bca2-bca3,U+bca5-bca7,U+bca9-bcb2,U+bcb4-bcbb,U+bcbe-bcbf,U+bcc1-bcc3,U+bcc5-bccc,U+bcce-bcd0,U+bcd2-bcd4,U+bcd6-bcf3,U+bcf7,U+bcf9-bcfb,U+bcfd-bd02}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.41.woff2) format('woff2-variations');unicode-range:U+bb90-bba3,U+bba5-bbab,U+bbad-bbbf,U+bbc1-bbf7,U+bbfa-bbfb,U+bbfd-bbfe,U+bc01-bc07,U+bc09-bc0a,U+bc0e,U+bc10,U+bc12-bc13,U+bc17,U+bc19-bc1a,U+bc1e,U+bc20-bc23,U+bc26,U+bc28,U+bc2a-bc2c,U+bc2e-bc2f,U+bc32-bc33,U+bc35-bc37,U+bc39-bc3f,U+bc41-bc42,U+bc44,U+bc46-bc48,U+bc4a-bc4d}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.42.woff2) format('woff2-variations');unicode-range:U+bae6-bafb,U+bafd-bb17,U+bb19-bb33,U+bb37,U+bb39-bb3a,U+bb3d-bb43,U+bb45-bb46,U+bb48,U+bb4a-bb4f,U+bb51-bb53,U+bb55-bb57,U+bb59-bb62,U+bb64-bb8f}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.43.woff2) format('woff2-variations');unicode-range:U+ba30-ba37,U+ba3a-ba3b,U+ba3d-ba3f,U+ba41-ba47,U+ba49-ba4a,U+ba4c,U+ba4e-ba53,U+ba56-ba57,U+ba59-ba5b,U+ba5d-ba63,U+ba65-ba66,U+ba68-ba6f,U+ba71-ba73,U+ba75-ba77,U+ba79-ba84,U+ba86,U+ba88-baa7,U+baaa,U+baad-baaf,U+bab1-bab7,U+baba,U+babc,U+babe-bae5}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.44.woff2) format('woff2-variations');unicode-range:U+b96e-b973,U+b976-b977,U+b979-b97b,U+b97d-b983,U+b986,U+b988,U+b98a-b98d,U+b98f-b9ab,U+b9ae-b9af,U+b9b1-b9b3,U+b9b5-b9bb,U+b9be,U+b9c0,U+b9c2-b9c7,U+b9ca-b9cb,U+b9cd,U+b9d2-b9d7,U+b9da,U+b9dc,U+b9df-b9e0,U+b9e2,U+b9e6-b9e7,U+b9e9-b9f3,U+b9f6,U+b9f8,U+b9fb-ba2f}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.45.woff2) format('woff2-variations');unicode-range:U+b8bf-b8cb,U+b8cd-b8e0,U+b8e2-b8e7,U+b8ea-b8eb,U+b8ed-b8ef,U+b8f1-b8f7,U+b8fa,U+b8fc,U+b8fe-b903,U+b905-b917,U+b919-b91f,U+b921-b93b,U+b93d-b957,U+b95a-b95b,U+b95d-b95f,U+b961-b967,U+b969-b96c}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.46.woff2) format('woff2-variations');unicode-range:U+b80d-b80f,U+b811-b817,U+b81a,U+b81c-b823,U+b826-b827,U+b829-b82b,U+b82d-b833,U+b836,U+b83a-b83f,U+b841-b85b,U+b85e-b85f,U+b861-b863,U+b865-b86b,U+b86e,U+b870,U+b872-b8af,U+b8b1-b8be}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.47.woff2) format('woff2-variations');unicode-range:U+b74d-b75f,U+b761-b763,U+b765-b774,U+b776-b77b,U+b77e-b77f,U+b781-b783,U+b785-b78b,U+b78e,U+b792-b796,U+b79a-b79b,U+b79d-b7a7,U+b7aa,U+b7ae-b7b3,U+b7b6-b7c8,U+b7ca-b7eb,U+b7ee-b7ef,U+b7f1-b7f3,U+b7f5-b7fb,U+b7fe,U+b802-b806,U+b80a-b80b}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.48.woff2) format('woff2-variations');unicode-range:U+b6a7-b6aa,U+b6ac-b6b0,U+b6b2-b6ef,U+b6f1-b727,U+b72a-b72b,U+b72d-b72e,U+b731-b737,U+b739-b73a,U+b73c-b743,U+b745-b74c}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.49.woff2) format('woff2-variations');unicode-range:U+b605-b60f,U+b612-b617,U+b619-b624,U+b626-b69b,U+b69e-b6a3,U+b6a5-b6a6}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.50.woff2) format('woff2-variations');unicode-range:U+b55f,U+b562-b583,U+b585-b59f,U+b5a2-b5a3,U+b5a5-b5a7,U+b5a9-b5b2,U+b5b5-b5ba,U+b5bd-b604}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.51.woff2) format('woff2-variations');unicode-range:U+b4a5-b4b6,U+b4b8-b4bf,U+b4c1-b4c7,U+b4c9-b4db,U+b4de-b4df,U+b4e1-b4e2,U+b4e5-b4eb,U+b4ee,U+b4f0,U+b4f2-b513,U+b516-b517,U+b519-b51a,U+b51d-b523,U+b526,U+b528,U+b52b-b52f,U+b532-b533,U+b535-b537,U+b539-b53f,U+b541-b544,U+b546-b54b,U+b54d-b54f,U+b551-b55b,U+b55d-b55e}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.52.woff2) format('woff2-variations');unicode-range:U+b3f8-b3fb,U+b3fd-b40f,U+b411-b417,U+b419-b41b,U+b41d-b41f,U+b421-b427,U+b42a-b42b,U+b42d-b44f,U+b452-b453,U+b455-b457,U+b459-b45f,U+b462-b464,U+b466-b46b,U+b46d-b47f,U+b481-b4a3}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.53.woff2) format('woff2-variations');unicode-range:U+b342-b353,U+b356-b357,U+b359-b35b,U+b35d-b35e,U+b360-b363,U+b366,U+b368,U+b36a-b36d,U+b36f,U+b372-b373,U+b375-b377,U+b379-b37f,U+b381-b382,U+b384,U+b386-b38b,U+b38d-b3c3,U+b3c6-b3c7,U+b3c9-b3ca,U+b3cd-b3d3,U+b3d6,U+b3d8,U+b3da-b3f7}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.54.woff2) format('woff2-variations');unicode-range:U+b27c-b283,U+b285-b28f,U+b292-b293,U+b295-b297,U+b29a-b29f,U+b2a1-b2a4,U+b2a7-b2a9,U+b2ab,U+b2ad-b2c7,U+b2ca-b2cb,U+b2cd-b2cf,U+b2d1-b2d7,U+b2da,U+b2dc,U+b2de-b2e3,U+b2e7,U+b2e9-b2ea,U+b2ef-b2f3,U+b2f6,U+b2f8,U+b2fa-b2fb,U+b2fd-b2fe,U+b302-b303,U+b305-b307,U+b309-b30f,U+b312,U+b316-b31b,U+b31d-b341}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.55.woff2) format('woff2-variations');unicode-range:U+b1d6-b1e7,U+b1e9-b1fc,U+b1fe-b203,U+b206-b207,U+b209-b20b,U+b20d-b213,U+b216-b21f,U+b221-b257,U+b259-b273,U+b275-b27b}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.56.woff2) format('woff2-variations');unicode-range:U+b120-b122,U+b126-b127,U+b129-b12b,U+b12d-b133,U+b136,U+b138,U+b13a-b13f,U+b142-b143,U+b145-b14f,U+b151-b153,U+b156-b157,U+b159-b177,U+b17a-b17b,U+b17d-b17f,U+b181-b187,U+b189-b18c,U+b18e-b191,U+b195-b1a7,U+b1a9-b1cb,U+b1cd-b1d5}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.57.woff2) format('woff2-variations');unicode-range:U+b05f-b07b,U+b07e-b07f,U+b081-b083,U+b085-b08b,U+b08d-b097,U+b09b,U+b09d-b09f,U+b0a2-b0a7,U+b0aa,U+b0b0,U+b0b2,U+b0b6-b0b7,U+b0b9-b0bb,U+b0bd-b0c3,U+b0c6-b0c7,U+b0ca-b0cf,U+b0d1-b0df,U+b0e1-b0e4,U+b0e6-b107,U+b10a-b10b,U+b10d-b10f,U+b111-b112,U+b114-b117,U+b119-b11a,U+b11c-b11f}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.58.woff2) format('woff2-variations');unicode-range:U+afac-afb7,U+afba-afbb,U+afbd-afbf,U+afc1-afc6,U+afca-afcc,U+afce-afd3,U+afd5-afe7,U+afe9-afef,U+aff1-b00b,U+b00d-b00f,U+b011-b013,U+b015-b01b,U+b01d-b027,U+b029-b043,U+b045-b047,U+b049,U+b04b,U+b04d-b052,U+b055-b056,U+b058-b05c,U+b05e}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.59.woff2) format('woff2-variations');unicode-range:U+af03-af07,U+af09-af2b,U+af2e-af33,U+af35-af3b,U+af3e-af40,U+af44-af47,U+af4a-af5c,U+af5e-af63,U+af65-af7f,U+af81-afab}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.60.woff2) format('woff2-variations');unicode-range:U+ae56-ae5b,U+ae5e-ae60,U+ae62-ae64,U+ae66-ae67,U+ae69-ae6b,U+ae6d-ae83,U+ae85-aebb,U+aebf,U+aec1-aec3,U+aec5-aecb,U+aece,U+aed0,U+aed2-aed7,U+aed9-aef3,U+aef5-af02}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.61.woff2) format('woff2-variations');unicode-range:U+ad9c-ada3,U+ada5-adbf,U+adc1-adc3,U+adc5-adc7,U+adc9-add2,U+add4-addb,U+addd-addf,U+ade1-ade3,U+ade5-adf7,U+adfa-adfb,U+adfd-adff,U+ae02-ae07,U+ae0a,U+ae0c,U+ae0e-ae13,U+ae15-ae2f,U+ae31-ae33,U+ae35-ae37,U+ae39-ae3f,U+ae42,U+ae44,U+ae46-ae49,U+ae4b,U+ae4f,U+ae51-ae53,U+ae55}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.62.woff2) format('woff2-variations');unicode-range:U+ace2-ace3,U+ace5-ace6,U+ace9-acef,U+acf2,U+acf4,U+acf7-acfb,U+acfe-acff,U+ad01-ad03,U+ad05-ad0b,U+ad0d-ad10,U+ad12-ad1b,U+ad1d-ad33,U+ad35-ad48,U+ad4a-ad4f,U+ad51-ad6b,U+ad6e-ad6f,U+ad71-ad72,U+ad77-ad7c,U+ad7e,U+ad80,U+ad82-ad87,U+ad89-ad8b,U+ad8d-ad8f,U+ad91-ad9b}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.63.woff2) format('woff2-variations');unicode-range:U+ac25-ac2c,U+ac2e,U+ac30,U+ac32-ac37,U+ac39-ac3f,U+ac41-ac4c,U+ac4e-ac6f,U+ac72-ac73,U+ac75-ac76,U+ac79-ac7f,U+ac82,U+ac84-ac88,U+ac8a-ac8b,U+ac8d-ac8f,U+ac91-ac93,U+ac95-ac9b,U+ac9d-ac9e,U+aca1-aca7,U+acab,U+acad-acaf,U+acb1-acb7,U+acba-acbb,U+acbe-acc0,U+acc2-acc3,U+acc5-acdf}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.64.woff2) format('woff2-variations');unicode-range:U+99df,U+99ed,U+99f1,U+99ff,U+9a01,U+9a08,U+9a0e-9a0f,U+9a19,U+9a2b,U+9a30,U+9a36-9a37,U+9a40,U+9a43,U+9a45,U+9a4d,U+9a55,U+9a57,U+9a5a-9a5b,U+9a5f,U+9a62,U+9a65,U+9a69-9a6a,U+9aa8,U+9ab8,U+9ad3,U+9ae5,U+9aee,U+9b1a,U+9b27,U+9b2a,U+9b31,U+9b3c,U+9b41-9b45,U+9b4f,U+9b54,U+9b5a,U+9b6f,U+9b8e,U+9b91,U+9b9f,U+9bab,U+9bae,U+9bc9,U+9bd6,U+9be4,U+9be8,U+9c0d,U+9c10,U+9c12,U+9c15,U+9c25,U+9c32,U+9c3b,U+9c47,U+9c49,U+9c57,U+9ce5,U+9ce7,U+9ce9,U+9cf3-9cf4,U+9cf6,U+9d09,U+9d1b,U+9d26,U+9d28,U+9d3b,U+9d51,U+9d5d,U+9d60-9d61,U+9d6c,U+9d72,U+9da9,U+9daf,U+9db4,U+9dc4,U+9dd7,U+9df2,U+9df8-9dfa,U+9e1a,U+9e1e,U+9e75,U+9e79,U+9e7d,U+9e7f,U+9e92-9e93,U+9e97,U+9e9d,U+9e9f,U+9ea5,U+9eb4-9eb5,U+9ebb,U+9ebe,U+9ec3,U+9ecd-9ece,U+9ed4,U+9ed8,U+9edb-9edc,U+9ede,U+9ee8,U+9ef4,U+9f07-9f08,U+9f0e,U+9f13,U+9f20,U+9f3b,U+9f4a-9f4b,U+9f4e,U+9f52,U+9f5f,U+9f61,U+9f67,U+9f6a,U+9f6c,U+9f77,U+9f8d,U+9f90,U+9f95,U+9f9c,U+ac02-ac03,U+ac05-ac06,U+ac09-ac0f,U+ac17-ac18,U+ac1b,U+ac1e-ac1f,U+ac21-ac23}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.65.woff2) format('woff2-variations');unicode-range:U+338c-339c,U+339f-33a0,U+33a2-33cb,U+33cf-33d0,U+33d3,U+33d6,U+33d8,U+33db-33dd,U+4e01,U+4e03,U+4e07-4e08,U+4e11,U+4e14-4e15,U+4e18-4e19,U+4e1e,U+4e32,U+4e38-4e39,U+4e42-4e43,U+4e45,U+4e4d-4e4f,U+4e56,U+4e58-4e59,U+4e5d-4e5e,U+4e6b,U+4e6d,U+4e73,U+4e76-4e77,U+4e7e,U+4e82,U+4e86,U+4e88,U+4e8e,U+4e90-4e92,U+4e94-4e95,U+4e98,U+4e9b,U+4e9e,U+4ea1-4ea2,U+4ea4-4ea6,U+4ea8,U+4eab,U+4ead-4eae,U+4eb6,U+4ec0-4ec1,U+4ec4,U+4ec7,U+4ecb,U+4ecd,U+4ed4-4ed5,U+4ed7-4ed9,U+4edd,U+4edf,U+4ee4,U+4ef0,U+4ef2,U+4ef6-4ef7,U+4efb,U+4f01,U+4f09,U+4f0b,U+4f0d-4f11,U+4f2f,U+4f34,U+4f36,U+4f38,U+4f3a,U+4f3c-4f3d}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.66.woff2) format('woff2-variations');unicode-range:U+3136,U+3138,U+313a-3140,U+3143-3144,U+3150,U+3152,U+3154-3156,U+3158-315b,U+315d-315f,U+3162,U+3164-318c,U+318e,U+3200-321b,U+3231,U+3239,U+3251-325a,U+3260-327b,U+327e-327f,U+328a-3290,U+3294,U+329e,U+32a5,U+3380-3384,U+3388-338b}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.67.woff2) format('woff2-variations');unicode-range:U+2f7d,U+2f7f-2f8b,U+2f8e-2f90,U+2f92-2f97,U+2f99-2fa0,U+2fa2-2fa3,U+2fa5-2fa9,U+2fac-2fb1,U+2fb3-2fbc,U+2fc1-2fca,U+2fcd-2fd4,U+3003,U+3012-3019,U+301c,U+301e-3020,U+3036,U+3041,U+3043,U+3045,U+3047,U+3049,U+304e,U+3050,U+3052,U+3056,U+305a,U+305c,U+305e,U+3062,U+3065,U+306c,U+3070-307d,U+3080,U+3085,U+3087,U+308e,U+3090-3091,U+30a1,U+30a5,U+30a9,U+30ae,U+30b1-30b2,U+30b4,U+30b6,U+30bc-30be,U+30c2,U+30c5,U+30cc,U+30d2,U+30d4,U+30d8-30dd,U+30e4,U+30e6,U+30e8,U+30ee,U+30f0-30f2,U+30f4-30f6,U+3133,U+3135}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.68.woff2) format('woff2-variations');unicode-range:U+2541-254b,U+25a4-25a9,U+25b1,U+25b5,U+25b9,U+25bf,U+25c1,U+25c3,U+25c9-25ca,U+25cc,U+25ce,U+25d0-25d1,U+25e6,U+25ef,U+260f,U+261d,U+261f,U+262f,U+2660,U+2664,U+2667-2669,U+266d,U+266f,U+2716,U+271a,U+273d,U+2756,U+2776-277f,U+278a-2793,U+2963,U+2965,U+2ac5-2ac6,U+2acb-2acc,U+2f00,U+2f04,U+2f06,U+2f08,U+2f0a-2f0b,U+2f11-2f12,U+2f14,U+2f17-2f18,U+2f1c-2f1d,U+2f1f-2f20,U+2f23-2f26,U+2f28-2f29,U+2f2b,U+2f2d,U+2f2f-2f32,U+2f38,U+2f3c-2f40,U+2f42-2f4c,U+2f4f-2f52,U+2f54-2f58,U+2f5a-2f66,U+2f69-2f70,U+2f72-2f76,U+2f78,U+2f7a-2f7c}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.69.woff2) format('woff2-variations');unicode-range:U+2479-2487,U+249c-24d1,U+24d3-24d7,U+24d9-24e9,U+24eb-24f4,U+2500-2501,U+2503,U+250c-2513,U+2515-2516,U+2518-2540}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.70.woff2) format('woff2-variations');unicode-range:U+215b-215e,U+2162-2169,U+2170-2179,U+2195-2199,U+21b0-21b4,U+21bc,U+21c0,U+21c4-21c5,U+21cd,U+21cf-21d4,U+21e0-21e3,U+21e6-21e9,U+2200,U+2202-2203,U+2206-2209,U+220b-220c,U+220f,U+2211,U+2213,U+221a,U+221d-2220,U+2222,U+2225-2227,U+2229-222c,U+222e,U+2234-2237,U+223d,U+2243,U+2245,U+2248,U+2250-2253,U+225a,U+2260-2262,U+2264-2267,U+226a-226b,U+226e-2273,U+2276-2277,U+2279-227b,U+2280-2287,U+228a-228b,U+2295-2297,U+22a3-22a5,U+22bb-22bc,U+22ce-22cf,U+22da-22db,U+22ee-22ef,U+2306,U+2312,U+2314,U+2467-2478}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.71.woff2) format('woff2-variations');unicode-range:U+81-82,U+84,U+a2-a5,U+a7-a8,U+aa,U+ac,U+b1-b3,U+b6,U+b8-ba,U+bc-be,U+c0,U+c2,U+c6-cb,U+ce-d0,U+d4,U+d8-d9,U+db-dc,U+de-df,U+e6,U+eb,U+ee-f0,U+f4,U+f7-f9,U+fb,U+fe-ff,U+111,U+126-127,U+132-133,U+138,U+13f-142,U+149-14b,U+152-153,U+166-167,U+2bc,U+2c7,U+2d0,U+2d8-2d9,U+2db-2dd,U+391-394,U+396-3a1,U+3a3-3a9,U+3b2-3b6,U+3b8,U+3bc,U+3be-3c1,U+3c3-3c9,U+2010,U+2015-2016,U+2018-2019,U+201b,U+201f-2021,U+2025,U+2030,U+2033-2036,U+203c,U+203e,U+2042,U+2074,U+207a-207f,U+2081-2084,U+2109,U+2113,U+2116,U+2121,U+2126,U+212b,U+2153-2154}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.72.woff2) format('woff2-variations');unicode-range:U+e8,U+2da,U+2160,U+2194,U+3054,U+3058,U+306d,U+3086,U+308d,U+30ac,U+30bb,U+30c4,U+30cd-30ce,U+30e2,U+3132,U+3146,U+3149,U+339d,U+4e3b,U+4f0a,U+4fdd,U+4fe1,U+5409,U+540c,U+5834,U+592a-592b,U+5b9a,U+5dde,U+5e0c,U+5e73,U+5f0f,U+60f3,U+653f,U+661f,U+662f,U+667a,U+683c,U+6b4c,U+6c11,U+767c,U+76ee,U+76f4,U+77f3,U+79d1,U+7a7a,U+7b2c,U+7d22,U+8207,U+8a00,U+8a71,U+9280,U+9580,U+958b,U+96c6,U+9762,U+98df,U+9ed1,U+ac2d,U+adc8,U+add3,U+af48,U+b014,U+b134-b135,U+b158,U+b2aa,U+b35f,U+b6a4,U+b9cf,U+bb63,U+bd23,U+be91,U+c29b,U+c3f4,U+c42c,U+c55c,U+c573,U+c58f,U+c78c,U+c7dd,U+c8f5,U+cad1,U+cc48,U+cf10,U+cf20,U+d03c,U+d07d,U+d2a0,U+d30e,U+d38d,U+d3a8,U+d3c8,U+d5e5,U+d5f9,U+d6e4,U+f90a,U+ff02,U+ff1c}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.73.woff2) format('woff2-variations');unicode-range:U+3b1,U+2466,U+25a1,U+25a3,U+261c,U+3008-3009,U+305b,U+305d,U+3069,U+30a7,U+30ba,U+30cf,U+30ef,U+3151,U+3157,U+4e4b,U+4e5f,U+4e8c,U+4eca,U+4ed6,U+4f5b,U+50cf,U+5149,U+5165,U+5171,U+5229,U+529b,U+5316,U+539f,U+53f2,U+571f,U+5728,U+58eb,U+591c,U+5b78,U+5c11,U+5c55,U+5ddd,U+5e02,U+5fb7,U+60c5,U+610f,U+611f,U+6625,U+66f8,U+6797,U+679c,U+682a,U+6d2a,U+706b,U+7406,U+767b,U+76f8,U+77e5,U+7acb,U+898b,U+8a69,U+8def,U+8fd1,U+901a,U+90e8,U+91cd,U+975e,U+ae14,U+ae6c,U+aec0,U+afc7,U+afc9,U+b01c,U+b028,U+b308,U+b311,U+b314,U+b31c,U+b524,U+b560,U+b764,U+b920,U+b9e3,U+bd48,U+be7d,U+c0db,U+c231,U+c270,U+c2e3,U+c37d,U+c3ed,U+c530,U+c6a5,U+c6dc,U+c7a4,U+c954,U+c974,U+d000,U+d565,U+d667,U+d6c5,U+d79d,U+ff1e}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.74.woff2) format('woff2-variations');unicode-range:U+131,U+2032,U+2465,U+2642,U+3048,U+3051,U+3083-3084,U+308f,U+30c0,U+30d1,U+30d3,U+30d6,U+30df,U+30e7,U+3153,U+4e16,U+4e8b,U+4ee5,U+5206,U+52a0,U+52d5,U+53e4,U+53ef,U+54c1,U+57ce,U+597d,U+5b8c,U+5ea6,U+5f8c,U+5f97,U+6210,U+6240,U+624b,U+6728,U+6bd4,U+7236,U+7269,U+7279,U+738b,U+7528,U+7530,U+767e,U+798f,U+8005,U+8a18,U+90fd,U+91cc,U+9577,U+9593,U+98a8,U+ac20,U+acf6,U+ad90,U+af5d,U+af80,U+afcd,U+aff0,U+b0a1,U+b0b5,U+b1fd,U+b2fc,U+b380,U+b51b,U+b584,U+b5b3,U+b8fd,U+b93c,U+b9f4,U+bb44,U+bc08,U+bc27,U+bc49,U+be55,U+be64,U+bfb0,U+bfc5,U+c178,U+c21f,U+c314,U+c4f1,U+c58d,U+c664,U+c698,U+c6a7,U+c6c1,U+c9ed,U+cac0,U+cacc,U+cad9,U+ccb5,U+cdcc,U+d0e4,U+d143,U+d320,U+d330,U+d54d,U+ff06,U+ff1f,U+ff5e}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.75.woff2) format('woff2-variations');unicode-range:U+b4,U+20a9,U+20ac,U+2190,U+24d8,U+2502,U+2514,U+2592,U+25c7-25c8,U+2663,U+3060,U+3064,U+3081,U+3088,U+30a3,U+30a6,U+30aa,U+30b5,U+30c7,U+30ca-30cb,U+30d0,U+30e3,U+30e5,U+339e,U+4e09,U+4eac,U+4f5c,U+5167-5168,U+516c,U+51fa,U+5408,U+540d,U+591a,U+5b57,U+6211,U+65b9,U+660e,U+6642,U+6700,U+6b63,U+6e2f,U+7063,U+7532,U+793e,U+81ea,U+8272,U+82b1,U+897f,U+8eca,U+91ce,U+ac38,U+ad76,U+ae84,U+aecc,U+b07d,U+b0b1,U+b215,U+b2a0,U+b310,U+b3d7,U+b52a,U+b618,U+b775,U+b797,U+bcd5,U+bd59,U+be80,U+bea8,U+bed1,U+bee4-bee5,U+c060,U+c2ef,U+c329,U+c3dc,U+c597,U+c5bd,U+c5e5,U+c69c,U+c9d6,U+ca29,U+ca5c,U+ca84,U+cc39,U+cc3b,U+ce89,U+cee5,U+cf65,U+cf85,U+d058,U+d145,U+d22d,U+d325,U+d37d,U+d3ad,U+d769,U+ff0c}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.76.woff2) format('woff2-variations');unicode-range:U+2161,U+2228,U+2299,U+2464,U+2517,U+2640,U+3042,U+304a,U+3053,U+3061,U+307f,U+3082,U+308c,U+3092,U+30a8,U+30ab,U+30ad,U+30b0,U+30b3,U+30b7,U+30c1,U+30c6,U+30c9,U+30d5,U+30d7,U+30de,U+30e0-30e1,U+30ec-30ed,U+4e0b,U+4e0d,U+4ee3,U+53f0,U+548c,U+5b89,U+5bb6,U+5c0f,U+611b,U+6771,U+6aa2,U+6bcd,U+6c34,U+6cd5,U+6d77,U+767d,U+795e,U+8ecd,U+9999,U+9ad8,U+ac07,U+ac1a,U+ac40,U+ad0c,U+ad88,U+ada4,U+ae01,U+ae65,U+aebd,U+aec4,U+afe8,U+b139,U+b205,U+b383,U+b38c,U+b42c,U+b461,U+b55c,U+b78f,U+b8fb,U+b9f7,U+bafc,U+bc99,U+bed8,U+bfcd,U+c0bf,U+c0f9,U+c167,U+c204,U+c20f,U+c22f,U+c258,U+c298,U+c2bc,U+c388,U+c501,U+c50c,U+c5b9,U+c5ce,U+c641,U+c648,U+c73d,U+ca50,U+ca61,U+cc4c,U+ceac,U+d0d4,U+d5f7,U+d6d7,U+ff1a}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.77.woff2) format('woff2-variations');unicode-range:U+2103,U+2463,U+25c6,U+25cb,U+266c,U+3001,U+300a,U+3046,U+304c-304d,U+304f,U+3055,U+3059,U+3063,U+3066-3068,U+306f,U+3089,U+30b8,U+30bf,U+314f,U+4e0a,U+570b,U+5730,U+5916,U+5929,U+5c71,U+5e74,U+5fc3,U+601d,U+6027,U+63d0,U+6709,U+6734,U+751f,U+7684,U+82f1,U+9053,U+91d1,U+97f3,U+ac2f,U+ac4d,U+adc4,U+ade4,U+ae41,U+ae4d-ae4e,U+aed1,U+afb9,U+b0e0,U+b299,U+b365,U+b46c,U+b480,U+b4c8,U+b7b4,U+b819,U+b918,U+baab,U+bab9,U+be8f,U+bed7,U+c0ec,U+c19f,U+c1a5,U+c3d9,U+c464,U+c53d,U+c553,U+c570,U+c5cc,U+c633,U+c6a4,U+c7a3,U+c7a6,U+c886,U+c9d9-c9da,U+c9ec,U+ca0c,U+cc21,U+cd1b,U+cd78,U+cdc4,U+cef8,U+cfe4,U+d0a5,U+d0b5,U+d0ec,U+d15d,U+d188,U+d23c,U+d2ac,U+d729,U+d79b,U+ff01,U+ff08-ff09,U+ff5c}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.78.woff2) format('woff2-variations');unicode-range:U+2039-203a,U+223c,U+25b3,U+25b7,U+25bd,U+25cf,U+266a,U+3002,U+300b,U+304b,U+3057,U+305f,U+306a-306b,U+307e,U+308a-308b,U+3093,U+30a2,U+30af,U+30b9,U+30c3,U+30c8,U+30e9-30eb,U+33a1,U+4e00,U+524d,U+5357,U+5b50,U+7121,U+884c,U+9751,U+ac94,U+aebe,U+aecd,U+af08,U+af41,U+af49,U+b010,U+b053,U+b109,U+b11b,U+b128,U+b154,U+b291,U+b2e6,U+b301,U+b385,U+b525,U+b5b4,U+b729,U+b72f,U+b738,U+b7ff,U+b837,U+b975,U+ba67,U+bb47,U+bc1f,U+bd90,U+bfd4,U+c27c,U+c324,U+c379,U+c3e0,U+c465,U+c53b,U+c58c,U+c610,U+c653,U+c6cd,U+c813,U+c82f,U+c999,U+c9e0,U+cac4,U+cad3,U+cbd4,U+cc10,U+cc22,U+ccb8,U+ccbc,U+cda5,U+ce84,U+cea3,U+cf67,U+cfe1,U+d241,U+d30d,U+d31c,U+d391,U+d401,U+d479,U+d5c9,U+d5db,U+d649,U+d6d4}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.79.woff2) format('woff2-variations');unicode-range:U+b0,U+e9,U+2193,U+2462,U+260e,U+261e,U+300e-300f,U+3044,U+30a4,U+30fb-30fc,U+314d,U+5973,U+6545,U+6708,U+7537,U+ac89,U+ac9c,U+acc1,U+ad04,U+ad75,U+ad7d,U+ae45,U+ae61,U+af42,U+b0ab,U+b0af,U+b0b3,U+b12c,U+b194,U+b1a8,U+b220,U+b258,U+b284,U+b2ff,U+b315,U+b371,U+b3d4-b3d5,U+b460,U+b527,U+b534,U+b810,U+b818,U+b98e,U+ba55,U+bbac,U+bc0b,U+bc40,U+bca1,U+bccd,U+bd93,U+be54,U+be5a,U+bf08,U+bf50,U+bf55,U+bfdc,U+c0c0,U+c0d0,U+c0f4,U+c100,U+c11e,U+c170,U+c20d,U+c274,U+c290,U+c308,U+c369,U+c539,U+c587,U+c5ff,U+c6ec,U+c70c,U+c7ad,U+c7c8,U+c83c,U+c881,U+cb48,U+cc60,U+ce69,U+ce6b,U+ce75,U+cf04,U+cf08,U+cf55,U+cf70,U+cffc,U+d0b7,U+d1a8,U+d2c8,U+d384,U+d47c,U+d48b,U+d5dd,U+d5e8,U+d720,U+d759,U+f981}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.80.woff2) format('woff2-variations');unicode-range:U+e0,U+e2,U+395,U+3b7,U+3ba,U+2460-2461,U+25a0,U+3010-3011,U+306e,U+30f3,U+314a,U+314c,U+5927,U+65b0,U+7e41,U+97d3,U+9ad4,U+ad49,U+ae0b,U+ae0d,U+ae43,U+ae5d,U+aecf,U+af3c,U+af64,U+afd4,U+b080,U+b084,U+b0c5,U+b10c,U+b1e8,U+b2ac,U+b36e,U+b451,U+b515,U+b540,U+b561,U+b6ab,U+b6b1,U+b72c,U+b730,U+b744,U+b800,U+b8ec,U+b8f0,U+b904,U+b968,U+b96d,U+b987,U+b9d9,U+bb36,U+bb49,U+bc2d,U+bc43,U+bcf6,U+bd89,U+be57,U+be61,U+bed4,U+c090,U+c130,U+c148,U+c19c,U+c2f9,U+c36c,U+c37c,U+c384,U+c3df,U+c575,U+c584,U+c660,U+c719,U+c816,U+ca4d,U+ca54,U+cabc,U+cb49,U+cc14,U+cff5,U+d004,U+d038,U+d0b4,U+d0d3,U+d0e0,U+d0ed,U+d131,U+d1b0,U+d31f,U+d33d,U+d3a0,U+d3ab,U+d514,U+d584,U+d6a1,U+d6cc,U+d749,U+d760,U+d799}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.81.woff2) format('woff2-variations');unicode-range:U+24,U+60,U+3b9,U+3bb,U+3bd,U+2191,U+2606,U+300c-300d,U+3131,U+3134,U+3139,U+3141-3142,U+3148,U+3161,U+3163,U+321c,U+4eba,U+5317,U+ac31,U+ac77,U+ac9f,U+acb9,U+acf0-acf1,U+acfd,U+ad73,U+af3d,U+b00c,U+b04a,U+b057,U+b0c4,U+b188,U+b1cc,U+b214,U+b2db,U+b2ee,U+b304,U+b4ed,U+b518,U+b5bc,U+b625,U+b69c-b69d,U+b7ac,U+b801,U+b86c,U+b959,U+b95c,U+b985,U+ba48,U+bb58,U+bc0c,U+bc38,U+bc85,U+bc9a,U+bf40,U+c068,U+c0bd,U+c0cc,U+c12f,U+c149,U+c1e0,U+c22b,U+c22d,U+c250,U+c2fc,U+c300,U+c313,U+c370,U+c3d8,U+c557,U+c580,U+c5e3,U+c62e,U+c634,U+c6f0,U+c74d,U+c783,U+c78e,U+c796,U+c7bc,U+c92c,U+ca4c,U+cc1c,U+cc54,U+cc59,U+ce04,U+cf30,U+cfc4,U+d140,U+d321,U+d38c,U+d399,U+d54f,U+d587,U+d5d0,U+d6e8,U+d770}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.82.woff2) format('woff2-variations');unicode-range:U+d7,U+ea,U+fc,U+2192,U+25bc,U+3000,U+3137,U+3145,U+315c,U+7f8e,U+ac13,U+ac71,U+ac90,U+acb8,U+ace7,U+ad7f,U+ae50,U+aef4,U+af34,U+afbc,U+b048,U+b09a,U+b0ad,U+b0bc,U+b113,U+b125,U+b141,U+b20c,U+b2d9,U+b2ed,U+b367,U+b369,U+b374,U+b3cb,U+b4ec,U+b611,U+b760,U+b81b,U+b834,U+b8b0,U+b8e1,U+b989,U+b9d1,U+b9e1,U+b9fa,U+ba4d,U+ba78,U+bb35,U+bb54,U+bbf9,U+bc11,U+bcb3,U+bd05,U+bd95,U+bdd4,U+be10,U+bed0,U+bf51,U+c0d8,U+c232,U+c2b7,U+c2eb,U+c378,U+c500,U+c52c,U+c549,U+c568,U+c598,U+c5c9,U+c61b,U+c639,U+c67c,U+c717,U+c78a,U+c80a,U+c90c-c90d,U+c950,U+c9e7,U+cbe4,U+cca9,U+cce4,U+cdb0,U+ce78,U+ce94,U+ce98,U+cf8c,U+d018,U+d034,U+d0f1,U+d1b1,U+d280,U+d2f8,U+d338,U+d380,U+d3b4,U+d610,U+d69f,U+d6fc,U+d758}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.83.woff2) format('woff2-variations');unicode-range:U+e7,U+2022,U+203b,U+25c0,U+2605,U+2661,U+3147,U+318d,U+672c,U+8a9e,U+acaa,U+acbc,U+ad1c,U+ae4a,U+ae5c,U+b044,U+b054,U+b0c8-b0c9,U+b2a6,U+b2d0,U+b35c,U+b364,U+b428,U+b454,U+b465,U+b4b7,U+b4e3,U+b51c,U+b5a1,U+b784,U+b790,U+b7ab,U+b7f4,U+b82c,U+b835,U+b8e9,U+b8f8,U+b9d8,U+b9f9,U+ba5c,U+ba64,U+babd,U+bb18,U+bb3b,U+bbff,U+bc0d,U+bc45,U+bc97,U+bcbc,U+be45,U+be75,U+be7c,U+bfcc,U+c0b6,U+c0f7,U+c14b,U+c2b4,U+c30d,U+c4f8,U+c5bb,U+c5d1,U+c5e0,U+c5ee,U+c5fd,U+c606,U+c6c5,U+c6e0,U+c708,U+c81d,U+c820,U+c824,U+c878,U+c918,U+c96c,U+c9e4,U+c9f1,U+cc2e,U+cd09,U+cea1,U+cef5,U+cef7,U+cf64,U+cf69,U+cfe8,U+d035,U+d0ac,U+d230,U+d234,U+d2f4,U+d31d,U+d575,U+d578,U+d608,U+d614,U+d718,U+d751,U+d761,U+d78c,U+d790}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.84.woff2) format('woff2-variations');unicode-range:U+2665,U+3160,U+4e2d,U+6587,U+65e5,U+ac12,U+ac14,U+ac16,U+ac81,U+ad34,U+ade0,U+ae54,U+aebc,U+af2c,U+afc0,U+afc8,U+b04c,U+b08c,U+b099,U+b0a9,U+b0ac,U+b0ae,U+b0b8,U+b123,U+b179,U+b2e5,U+b2f7,U+b4c0,U+b531,U+b538,U+b545,U+b550,U+b5a8,U+b6f0,U+b728,U+b73b,U+b7ad,U+b7ed,U+b809,U+b864,U+b86d,U+b871,U+b9bf,U+b9f5,U+ba40,U+ba4b,U+ba58,U+ba87,U+baac,U+bbc0,U+bc16,U+bc34,U+bd07,U+bd99,U+be59,U+bfd0,U+c058,U+c0e4,U+c0f5,U+c12d,U+c139,U+c228,U+c529,U+c5c7,U+c635,U+c637,U+c735,U+c77d,U+c787,U+c789,U+c8c4,U+c989,U+c98c,U+c9d0,U+c9d3,U+cc0c,U+cc99,U+cd0c,U+cd2c,U+cd98,U+cda4,U+ce59,U+ce60,U+ce6d,U+cea0,U+d0d0-d0d1,U+d0d5,U+d14d,U+d1a4,U+d29c,U+d2f1,U+d301,U+d39c,U+d3bc,U+d4e8,U+d540,U+d5ec,U+d640,U+d750}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.85.woff2) format('woff2-variations');unicode-range:U+5e,U+25b2,U+25b6,U+314e,U+ac24,U+ace1,U+ace4,U+ae68,U+af2d,U+b0d0,U+b0e5,U+b150,U+b155,U+b193,U+b2c9,U+b2dd,U+b3c8,U+b3fc,U+b410,U+b458,U+b4dd,U+b5a0,U+b5a4,U+b5bb,U+b7b5,U+b838,U+b840,U+b86f,U+b8f9,U+b960,U+b9e5,U+bab8,U+bb50,U+bc1d,U+bc24-bc25,U+bca8,U+bcbd,U+bd04,U+bd10,U+bd24,U+be48,U+be5b,U+be68,U+c05c,U+c12c,U+c140,U+c15c,U+c168,U+c194,U+c219,U+c27d,U+c2a8,U+c2f1,U+c2f8,U+c368,U+c554-c555,U+c559,U+c564,U+c5d8,U+c5fc,U+c625,U+c65c,U+c6b1,U+c728,U+c794,U+c84c,U+c88c,U+c8e0,U+c8fd,U+c998,U+c9dd,U+cc0d,U+cc30,U+ceec,U+cf13,U+cf1c,U+cf5c,U+d050,U+d07c,U+d0a8,U+d134,U+d138,U+d154,U+d1f4,U+d2bc,U+d329,U+d32c,U+d3d0,U+d3f4,U+d3fc,U+d56b,U+d5cc,U+d600-d601,U+d639,U+d6c8,U+d754,U+d765}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.86.woff2) format('woff2-variations');unicode-range:U+3c-3d,U+2026,U+24d2,U+314b,U+ac11,U+acf3,U+ad74,U+ad81,U+adf9,U+ae34,U+af43,U+afb8,U+b05d,U+b07c,U+b110,U+b118,U+b17c,U+b180,U+b18d,U+b192,U+b2cc,U+b355,U+b378,U+b4a4,U+b4ef,U+b78d,U+b799,U+b7a9,U+b7fd,U+b807,U+b80c,U+b839,U+b9b4,U+b9db,U+ba3c,U+bab0,U+bba4,U+bc94,U+be4c,U+c154,U+c1c4,U+c26c,U+c2ac,U+c2ed,U+c4f4,U+c55e,U+c561,U+c571,U+c5b5,U+c5c4,U+c654-c655,U+c695,U+c6e8,U+c6f9,U+c724,U+c751,U+c775,U+c7a0,U+c7c1,U+c874,U+c880,U+c9d5,U+c9f8,U+cabd,U+cc29,U+cc2c,U+cca8,U+ccab,U+ccd0,U+ce21,U+ce35,U+ce7c,U+ce90,U+cee8,U+cef4,U+cfe0,U+d070,U+d0b9,U+d0c1,U+d0c4,U+d0c8,U+d15c,U+d1a1,U+d2c0,U+d300,U+d314,U+d3ed,U+d478,U+d480,U+d48d,U+d508,U+d53d,U+d5e4,U+d611,U+d61c,U+d68d,U+d6a8,U+d798}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.87.woff2) format('woff2-variations');unicode-range:U+23,U+25,U+5f,U+a9,U+ac08,U+ac78,U+aca8,U+acac,U+ace8,U+ad70,U+adc0,U+addc,U+b137,U+b140,U+b208,U+b290,U+b2f5,U+b3c5,U+b3cc,U+b420,U+b429,U+b529,U+b530,U+b77d,U+b79c,U+b7a8,U+b7c9,U+b7f0,U+b7fc,U+b828,U+b860,U+b9ad,U+b9c1,U+b9c9,U+b9dd-b9de,U+b9e8,U+ba38-ba39,U+babb,U+bc00,U+bc8c,U+bca0,U+bca4,U+bcd1,U+bcfc,U+bd09,U+bdf0,U+be60,U+c0ad,U+c0b4,U+c0bc,U+c190,U+c1fc,U+c220,U+c288,U+c2b9,U+c2f6,U+c528,U+c545,U+c558,U+c5bc,U+c5d4,U+c600,U+c644,U+c6c0,U+c6c3,U+c721,U+c798,U+c7a1,U+c811,U+c838,U+c871,U+c904,U+c990,U+c9dc,U+cc38,U+cc44,U+cca0,U+cd1d,U+cd95,U+cda9,U+ce5c,U+cf00,U+cf58,U+d150,U+d22c,U+d305,U+d328,U+d37c,U+d3f0,U+d551,U+d5a5,U+d5c8,U+d5d8,U+d63c,U+d64d,U+d669,U+d734,U+d76c}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.88.woff2) format('woff2-variations');unicode-range:U+26,U+2b,U+3e,U+40,U+7e,U+ac01,U+ac19,U+ac1d,U+aca0,U+aca9,U+acb0,U+ad8c,U+ae09,U+ae38,U+ae40,U+aed8,U+b09c,U+b0a0,U+b108,U+b204,U+b298,U+b2d8,U+b2eb-b2ec,U+b2f4,U+b313,U+b358,U+b450,U+b4e0,U+b54c,U+b610,U+b780,U+b78c,U+b791,U+b8e8,U+b958,U+b974,U+b984,U+b9b0,U+b9bc-b9bd,U+b9ce,U+ba70,U+bbfc,U+bc0f,U+bc15,U+bc1b,U+bc31,U+bc95,U+bcc0,U+bcc4,U+bd81,U+bd88,U+c0c8,U+c11d,U+c13c,U+c158,U+c18d,U+c1a1,U+c21c,U+c4f0,U+c54a,U+c560,U+c5b8,U+c5c8,U+c5f4,U+c628,U+c62c,U+c678,U+c6cc,U+c808,U+c810,U+c885,U+c88b,U+c900,U+c988,U+c99d,U+c9c8,U+cc3d-cc3e,U+cc45,U+cd08,U+ce20,U+cee4,U+d074,U+d0a4,U+d0dd,U+d2b9,U+d3b8,U+d3c9,U+d488,U+d544,U+d559,U+d56d,U+d588,U+d615,U+d648,U+d655,U+d658,U+d65c}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.89.woff2) format('woff2-variations');unicode-range:U+d,U+7c,U+ac10,U+ac15,U+ac74,U+ac80,U+ac83,U+acc4,U+ad11,U+ad50,U+ad6d,U+adfc,U+ae00,U+ae08,U+ae4c,U+b0a8,U+b124,U+b144,U+b178,U+b274,U+b2a5,U+b2e8,U+b2f9,U+b354,U+b370,U+b418,U+b41c,U+b4f1,U+b514,U+b798,U+b808,U+b824-b825,U+b8cc,U+b978,U+b9d0,U+b9e4,U+baa9,U+bb3c,U+bc18,U+bc1c,U+bc30,U+bc84,U+bcf5,U+bcf8,U+bd84,U+be0c,U+be14,U+c0b0,U+c0c9,U+c0dd,U+c124,U+c2dd,U+c2e4,U+c2ec,U+c54c,U+c57c-c57d,U+c591,U+c5c5-c5c6,U+c5ed,U+c608,U+c640,U+c6b8,U+c6d4,U+c784,U+c7ac,U+c800-c801,U+c9c1,U+c9d1,U+cc28,U+cc98,U+cc9c,U+ccad,U+cd5c,U+cd94,U+cd9c,U+cde8,U+ce68,U+cf54,U+d0dc,U+d14c,U+d1a0,U+d1b5,U+d2f0,U+d30c,U+d310,U+d398,U+d45c,U+d50c,U+d53c,U+d560,U+d568,U+d589,U+d604,U+d6c4,U+d788}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.90.woff2) format('woff2-variations');unicode-range:U+ac04,U+ac1c,U+ac70,U+ac8c,U+acbd,U+acf5,U+acfc,U+ad00,U+ad6c,U+adf8,U+b098,U+b0b4,U+b294,U+b2c8,U+b300,U+b3c4,U+b3d9,U+b4dc,U+b4e4,U+b77c,U+b7ec,U+b85d,U+b97c,U+b9c8,U+b9cc,U+ba54,U+ba74,U+ba85,U+baa8,U+bb34,U+bb38,U+bbf8,U+bc14,U+bc29,U+bc88,U+bcf4,U+bd80,U+be44,U+c0c1,U+c11c,U+c120,U+c131,U+c138,U+c18c,U+c218,U+c2b5,U+c2e0,U+c544,U+c548,U+c5b4,U+c5d0,U+c5ec,U+c5f0,U+c601,U+c624,U+c694,U+c6a9,U+c6b0,U+c6b4,U+c6d0,U+c704,U+c720,U+c73c,U+c740,U+c744,U+c74c,U+c758,U+c77c,U+c785,U+c788,U+c790-c791,U+c7a5,U+c804,U+c815,U+c81c,U+c870,U+c8fc,U+c911,U+c9c4,U+ccb4,U+ce58,U+ce74,U+d06c,U+d0c0,U+d130,U+d2b8,U+d3ec,U+d504,U+d55c,U+d569,U+d574,U+d638,U+d654,U+d68c}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(/fonts/pretendard/PretendardVariable.subset.91.woff2) format('woff2-variations');unicode-range:U+20-22,U+27-2a,U+2c-39,U+3a-3b,U+3f,U+41-4e,U+4f-5d,U+61-7b,U+7d,U+a0-a1,U+ab,U+ad-ae,U+b7,U+bb,U+bf,U+2013-2014,U+201c-201d,U+2122,U+ac00,U+ace0,U+ae30,U+b2e4,U+b85c,U+b9ac,U+c0ac,U+c2a4,U+c2dc,U+c774,U+c778,U+c9c0,U+d558}
/*# sourceMappingURL=/sm/49af798104dba87a942919357f383e653ce9152ba9bdc9bbfa8ba846a1b04235.map */
/* ═══ 토큰 · 설계서 6-3 팔레트 + 질감 ═══ */
:root{
/* 어두운 화면 한 벌만 쓴다. 밝은 테마는 걷었다 — 켜는 길이 어디에도 없으면서
운영체제가 밝은 모드면 폰 바깥 지면만 밝아져, 어두운 폰과 따로 놀았다. */
--surface:#333333; --surface-raised:#3D3D3D; --surface-sunken:#282828;
--ink:#EEEEEE; --ink-muted:#A6A6A6; --ink-faint:#8A8A8A; --line:#484848;
--seal:#5A5A5A; --paper:#262626; --paper-edge:#1C1C1C; --danger:#E5533D; --accent:#E8B54A; --on-accent:#1A1A1A;
--lamp:rgba(232,181,74,.12); --shade:rgba(0,0,0,.45);
--ui:'Pretendard Variable','Pretendard',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
--act-h:38px; /* 카드 안 실행 버튼 높이 — 아래 공용 규칙 한 곳에서만 쓴다 */
--read:var(--ui);
--mono:var(--ui);
--grain:url("data:image/svg+xml;utf8,");
--fiber:url("data:image/svg+xml;utf8,");
color-scheme:dark;
}
/* 폰 안은 지면보다 한 단 더 짙고 등불이 조금 세다 — 손에 든 기기처럼 보이게 하는 차이다 */
.phone[data-theme="dark"]{
--lamp:rgba(232,181,74,.16); --shade:rgba(0,0,0,.5); --wax:#8E2A1F;
}
/* 투표 · 엔딩: 화면을 뒤집고 빛을 붉게 */
.phone [data-block="vote"], .phone [data-block="ending"]{
--surface:#1C1C1C; --surface-raised:#262626; --surface-sunken:#141414;
--ink:#EEEEEE; --ink-muted:#A6A6A6; --ink-faint:#707070; --line:#3A3A3A;
--paper:#222222; --paper-edge:#161616; --accent:#E5533D; --on-accent:#1A1A1A; --seal:#4A4A4A;
--lamp:rgba(229,83,61,.16); --shade:rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--grain),var(--surface);color:var(--ink);font:15px/1.6 var(--ui);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
/* 카드 안에서 무언가를 실행하는 버튼(공개·교환·합치기·열기·번호) — 높이와 꼴은 여기 한 줄로 통일한다.
색과 테두리만 자리마다 다르게 준다 */
.ec-acts button,.lk-open,.pb-go,.lp-go{min-height:max(var(--act-h),var(--tap));border-radius:9px;font-size:13px;font-weight:800}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-weight:inherit}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* ═══ 바깥 틀 ═══ */
.top{position:relative;z-index:20;background:var(--grain),var(--surface);border-bottom:1px solid var(--line)}
@media (min-width:761px){.top{position:sticky;top:0}}
.top-in{max-width:1560px;margin:0 auto;padding:14px 22px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.brand{font:700 19px/1.2 var(--read);letter-spacing:-.01em}
.brand small{display:block;font:400 12px/1.4 var(--ui);color:var(--ink-muted);margin-top:3px}
.tabs{display:flex;gap:2px;border-bottom:0}
.tabs button{border:0;background:none;padding:10px 14px 9px;color:var(--ink-muted);min-height:var(--tap);border-bottom:2px solid transparent;font-weight:500}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.speed{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-muted)}
.speed select,.sel{background:var(--surface-raised);border:1px solid var(--line);border-radius:8px;padding:7px 9px}
main{max-width:1560px;margin:0 auto;padding:22px}
.view[hidden]{display:none}
.btn{border:1px solid var(--line);background:var(--surface-raised);border-radius:8px;padding:9px 15px;min-height:var(--tap)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.btn.ghost{background:none;border-color:transparent;color:var(--ink-muted)}
.muted{color:var(--ink-muted)} .faint{color:var(--ink-faint)}
.s4{color:var(--danger)}
h2{font:700 19px/1.3 var(--read);margin:0 0 10px}
h3{font:600 13px/1.4 var(--ui);margin:22px 0 8px;color:var(--ink-muted)}
.center{text-align:center}
.hint{font-size:12.5px;color:var(--ink-muted)} /* --ink-faint 는 3.66 이라 안 읽혔다 */
/* ═══ 작가면: 원고지와 검수지 ═══ */
.studio{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:26px;align-items:start}
@media (max-width:980px){.studio{grid-template-columns:1fr}}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.chip{font-size:12px;padding:4px 10px;border-radius:4px;border:1px dashed var(--line);color:var(--ink-faint)}
.chip.on{border-style:solid;border-color:var(--accent);color:var(--ink)}
.editor{position:relative;display:flex;border-radius:3px;background:var(--fiber),var(--paper);height:74vh;min-height:420px;overflow:hidden;
box-shadow:inset 0 0 0 1px var(--line)}
.editor::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:none}
.gutter{flex:none;width:52px;padding:14px 10px 14px 0;text-align:right;font:11.5px/22px var(--mono);color:var(--ink-faint);background:color-mix(in srgb,var(--ink) 5%,transparent);overflow:hidden;white-space:pre;user-select:none}
.editor textarea{flex:1;border:0;resize:none;padding:14px 16px;font:13px/22px var(--mono);background:repeating-linear-gradient(to bottom,transparent 0 21px,color-mix(in srgb,var(--line) 70%,transparent) 21px 22px);background-attachment:local;background-position:0 14px;outline:none;white-space:pre;overflow:auto;tab-size:2;caret-color:var(--accent)}
.editor textarea::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.foot-note{font-size:12px;color:var(--ink-faint);margin:10px 0 0}
.panel{border-radius:3px;background:var(--fiber),var(--paper);padding:22px 24px;box-shadow:inset 0 0 0 1px var(--line);position:relative}
.results{max-height:calc(74vh + 56px);overflow:auto}
.proof-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.proof-k{font-size:12px;color:var(--ink-muted)}
.proof-t{font:700 24px/1.2 var(--read)}
.count{font-size:14px;margin:6px 0 0}
.stamp-big{flex:none;font:700 22px/1 var(--read);padding:10px 14px;border:3px double currentColor;border-radius:6px;transform:rotate(-7deg);opacity:.85;letter-spacing:.2em;margin-top:6px}
.stamp-big.ok{color:var(--accent)}
.stamp-big.bad{color:var(--danger)}
.msgs{list-style:none;margin:0;padding:0}
.msgs li{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:9px 0;border-top:1px dotted var(--line);font-size:14px}
.msgs li:first-child{border-top:0}
.msgs .loc{font:11.5px/1.9 var(--mono);color:var(--ink-muted);background:none;border:0;padding:0;text-align:left}
.msgs .loc:not(:disabled){text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.msgs .loc:not(:disabled):hover{color:var(--accent)}
.msgs .txt{white-space:pre-line}
.err .txt{color:var(--danger)}
.warn .txt::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin:0 8px 2px 0}
.order{margin:0;padding:0;list-style:none;counter-reset:o;font-size:14px}
.order li{counter-increment:o;display:grid;grid-template-columns:34px 1fr;padding:5px 0;border-bottom:1px dotted var(--line)}
.order li::before{content:counter(o) "장";font:12px/1.9 var(--read);color:var(--ink-faint)}
.order .t{color:var(--ink-faint);font-size:12px;margin-left:6px}
.grid{border-collapse:collapse;font-size:13px;width:100%}
.grid th,.grid td{border-bottom:1px dotted var(--line);padding:7px 8px;text-align:left;font-weight:400}
.grid thead th{color:var(--ink-muted);font-size:12px;border-bottom:1px solid var(--ink-faint)}
.grid td.dot{text-align:center}
.grid td.dot span{display:inline-block;width:14px;height:10px;background:var(--accent);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0,50% 60%,100% 0);opacity:.9}
.wide{overflow-x:auto}
.cover-row{display:flex;gap:16px;align-items:center}
.cover-row img{width:78px;border-radius:2px 4px 4px 2px;box-shadow:none}
.cover-row .title{font:700 19px/1.3 var(--read)}
.budget{font:15px/1.7 var(--read);padding:12px 14px;border-radius:8px;background:color-mix(in srgb,var(--accent) 9%,transparent);margin:0}
.okline{color:var(--ink);font-weight:600}
.minipreview{margin-top:12px;max-width:380px;height:auto!important;border-radius:14px;box-shadow:none!important;overflow:hidden}
/* ═══ 플레이: 폰 틀 ═══ */
.playbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.phonepick{display:none;gap:4px}
.phones{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:26px;align-items:start}
.pwrap{display:flex;flex-direction:column;gap:10px;min-width:0}
.plabel{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink-muted);gap:8px}
.plabel .tools{display:flex;gap:4px}
.plabel .tools button{border:1px solid var(--line);background:var(--surface-raised);border-radius:6px;font-size:12px;padding:3px 9px}
@media (max-width:760px){.phonepick{display:flex}.phones{grid-template-columns:1fr}.pwrap:not(.active){display:none}}
.phone{position:relative;height:740px;max-width:420px;width:100%;margin:0 auto;border-radius:30px;background:var(--surface);color:var(--ink);
box-shadow:0 0 0 9px #202020,0 0 0 10px #4a4a4a;overflow:hidden;display:flex;flex-direction:column}
.scr{position:relative;flex:1;display:flex;flex-direction:column;min-height:0;
background:radial-gradient(130% 55% at 50% -8%,var(--lamp),transparent 62%),radial-gradient(140% 100% at 50% 40%,transparent 55%,var(--shade)),var(--grain),var(--surface);transition:background-color .8s}
.scr-body{flex:1;overflow:auto;padding:18px 20px 128px}
.scr-foot{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 16px;background:linear-gradient(to top,var(--surface) 62%,transparent);display:flex;flex-direction:column;gap:8px;z-index:2}
.big{width:100%;min-height:54px;border-radius:12px;border:0;background:var(--accent);color:#1A1A1A;font-weight:700;font-size:16px;letter-spacing:.01em;box-shadow:none}
/* [data-block] .big 의 흰 글씨도 같은 이유로 걷어냈다 */
.big:disabled{background:var(--surface-sunken);color:var(--ink-faint);box-shadow:inset 0 0 0 1px var(--line)}
.big.soft{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.hostrow{display:flex;gap:6px;align-items:stretch;padding-top:8px;border-top:1px dashed var(--line)}
.hostk{font-size:11px;color:var(--ink-faint);writing-mode:vertical-rl;align-self:center}
.hostrow button{flex:1;min-height:var(--tap);border-radius:10px;border:1px solid var(--line);background:var(--surface-sunken);font-size:13px}
.hostrow button.go{flex:1.6;border-color:color-mix(in srgb,var(--accent) 60%,var(--line));color:var(--ink)}
/* 머리 */
.phead{position:relative;padding:18px 20px 12px}
.phead .grp{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-muted)}
.phead .row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:2px}
.phead .title{margin:0;font:700 25px/1.25 var(--read);color:var(--accent);letter-spacing:-.01em}
.timer{font:500 21px/1 var(--ui);font-variant-numeric:tabular-nums;color:var(--ink-muted);transition:font-size .2s,color .2s;padding-bottom:3px}
.timer.hot{color:var(--accent);font-size:32px;font-weight:600}
.timer.over{color:var(--ink-faint);font-size:13px}
.progress{display:flex;gap:4px;margin-top:14px;align-items:center}
.progress i{flex:1;height:2px;background:var(--line)}
.progress i.done{background:var(--ink-faint)}
.progress i.now{height:4px;border-radius:2px;background:var(--accent);box-shadow:none}
.flash .scr{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{background-color:var(--surface-sunken)}}
.lede{font-size:12.5px;color:var(--ink-muted);margin:0 0 6px}
.h1{font:700 25px/1.3 var(--read);margin:6px 0 16px;letter-spacing:-.01em}
.prose{font-family:var(--read);font-size:16.5px;line-height:1.9}
.prose p{margin:0 0 1em}
.prose p:last-child{margin-bottom:0}
.guide{font-size:14px;color:var(--ink-muted);margin:0 0 16px}
.guide p{margin:0 0 .4em}
.sec{font:600 12px/1 var(--ui);color:var(--ink-muted);margin:22px 0 10px;display:flex;align-items:center;gap:10px}
.sec::after{content:"";flex:1;height:1px;background:var(--line)}
.field{display:block;margin:12px 0}
.field span{display:block;font-size:12.5px;color:var(--ink-muted);margin-bottom:6px}
.field input{width:100%;min-height:56px;border-radius:0;border:0;border-bottom:2px solid var(--ink-faint);background:none;padding:0 4px;font:600 22px/1 var(--mono);letter-spacing:.14em;outline:none}
.field input:focus{border-bottom-color:var(--accent)}
.empty{padding:50px 8px;text-align:center;color:var(--ink-muted);font-family:var(--read)}
/* 문 · 서재 */
.door{width:120px;height:160px;margin:26px auto 10px;border-radius:60px 60px 4px 4px;background:linear-gradient(var(--surface-sunken),var(--surface-sunken)) padding-box;box-shadow:inset 0 0 0 2px var(--line);position:relative}
.door-lamp{position:absolute;left:50%;top:40px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--accent);box-shadow:none;animation:flicker 4s infinite}
.door-lamp.off{background:var(--seal);box-shadow:none;animation:none}
@keyframes flicker{0%,100%{opacity:1}47%{opacity:1}48%{opacity:.7}50%{opacity:1}72%{opacity:.85}}
.book{display:flex;gap:16px;align-items:flex-end;padding:18px 4px}
.book-cover{flex:none;width:130px;transform:perspective(600px) rotateY(12deg);transform-origin:left;box-shadow:none}
.book-cover img{border-radius:1px 4px 4px 1px}
.book-meta h3{font:700 21px/1.3 var(--read);color:var(--ink);margin:0 0 6px}
.book-meta p{margin:0;font-size:13px;color:var(--ink-muted)}
/* 초대장 · 자리 */
.invite,.cover-hero{position:relative;background:var(--fiber),var(--paper);border-radius:3px;padding:18px 18px 16px;margin:0 2px 8px;text-align:center;box-shadow:inset 0 0 0 1px var(--paper-edge)}
.invite::before{content:"";position:absolute;inset:6px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);pointer-events:none}
.inv-k{font-size:11.5px;color:var(--ink-muted);letter-spacing:.3em}
.inv-title{font:700 20px/1.3 var(--read);margin:2px 0 12px}
.qr{width:168px;height:168px;margin:0 auto 12px;background:#FFF;padding:12px;border-radius:4px}
.qr svg{width:100%;height:100%;display:block}
.qr svg path,.qr svg rect[fill="#000000"]{fill:#000}
.qr svg rect[fill="#ffffff"],.qr svg rect[fill="#FFFFFF"]{fill:#FFF}
.code{font:600 26px/1.2 var(--mono);letter-spacing:.14em;display:flex;justify-content:center;align-items:center}
.code span{display:inline-block;width:10px;height:2px;background:var(--ink-faint);margin:0 8px}
.link{font:11.5px var(--mono);color:var(--ink-muted);word-break:break-all;margin:6px 0 4px}
.cover-hero{display:flex;gap:14px;align-items:center;text-align:left;padding:12px}
.cover-hero img{width:70px;border-radius:2px}
.cover-hero .inv-title{margin:2px 0 0}
.seat{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:8px 12px 8px 8px;border:0;border-bottom:1px solid var(--line);background:none;min-height:66px;position:relative}
.seat-pic{flex:none;width:46px;height:58px;border-radius:3px;overflow:hidden;background:var(--surface-sunken);box-shadow:0 0 0 1px var(--line)}
.seat-pic img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05)}
.seat.taken .seat-pic img{filter:none}
.seat-txt{display:flex;flex-direction:column;min-width:0}
.seat .nm{font:700 17px/1.3 var(--read)}
.seat .who{font-size:12.5px;color:var(--ink-muted);display:flex;align-items:center;gap:6px}
.seat:not(.taken) .who{color:var(--ink-faint)}
.seat .in{font-size:12.5px;color:var(--ink);line-height:1.5;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
button.seat{border-radius:10px;border:1px solid var(--line);margin-bottom:8px;background:var(--surface-raised)}
button.seat:not(:disabled):hover{border-color:var(--accent)}
.seat:disabled{opacity:.45}
.seat.me .seat-pic{box-shadow:0 0 0 2px var(--accent)}
.seat.me .nm{color:var(--accent)}
.badge{font-size:10.5px;padding:0 6px;border-radius:3px;border:1px solid var(--line);color:var(--ink-muted);font-style:normal}
.on-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink-faint)}
.on-dot.on{background:var(--accent);box-shadow:none}
.who-in{font-family:var(--ui);font-weight:400;font-size:.8em;color:var(--ink-muted)}
/* 낭독 · 발언 */
.script{padding:4px 0 0}
.listen,.stage{text-align:center;padding:26px 16px 22px;margin:4px 0 18px;position:relative}
.listen .face,.stage .face{width:96px;height:120px;object-fit:cover;margin:0 auto 14px;border-radius:48px 48px 6px 6px;box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--line)}
.stage.mine .face{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent)}
.listen-k{font-size:12px;color:var(--ink-muted)}
.listen-n{font:700 22px/1.35 var(--read)}
.stage-sub{font-size:13px;color:var(--ink-muted);margin-top:4px}
.wave{display:flex;gap:4px;justify-content:center;margin-top:14px;height:18px;align-items:center}
.wave i{width:3px;background:var(--accent);border-radius:2px;animation:wave 1.1s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.15s}.wave i:nth-child(3){animation-delay:.3s}.wave i:nth-child(4){animation-delay:.45s}.wave i:nth-child(5){animation-delay:.6s}
@keyframes wave{0%,100%{height:4px}50%{height:18px}}
.speakers{list-style:none;padding:0;margin:0;counter-reset:s}
.speakers li{counter-increment:s;display:flex;justify-content:space-between;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line);font:600 15px/1.4 var(--read)}
.speakers li::before{content:counter(s);font:12px var(--ui);color:var(--ink-faint);width:22px}
.speakers li span:first-of-type{flex:1}
.speakers li .st{font:12px var(--ui);color:var(--ink-muted)}
.speakers li.now{color:var(--accent)}
.speakers li.now .st{color:var(--accent)}
.speakers li.past{opacity:.45}
.book-open{width:150px;height:92px;margin:18px auto 22px;display:flex;perspective:400px}
.book-open div{flex:1;background:var(--fiber),var(--paper);box-shadow:inset 0 0 0 1px var(--paper-edge);background-image:repeating-linear-gradient(transparent 0 11px,var(--line) 11px 12px),var(--fiber)}
.book-open div:first-child{transform:rotateY(14deg);transform-origin:right;border-radius:4px 0 0 4px;background-position:10px 16px}
.book-open div:last-child{transform:rotateY(-14deg);transform-origin:left;border-radius:0 4px 4px 0;background-position:-10px 16px}
.tally-dots{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--ink-muted);margin-top:14px}
.tally-dots.center{justify-content:center}
.tally-dots i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-faint)}
.tally-dots i.on{background:var(--accent);box-shadow:none}
.tally-dots span{margin-left:6px}
/* 조사 */
/* 조사 횟수 — 동전을 한 닢씩 쓰는 것처럼 보이게 한다.
i.on = 아직 가진 것, i.spent = 이미 쓴 것. 개수는 그 장의 조사 횟수다. */
.picks{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-muted);margin-bottom:14px;flex-wrap:wrap}
.picks > span{margin-right:2px}
.picks i{width:13px;height:13px;border-radius:2px;flex:none;transform:rotate(45deg);transition:transform .18s cubic-bezier(.34,1.3,.64,1),opacity .18s,filter .18s}
/* 45° 돌린 칸이라 135deg 는 화면에서 마름모의 꼭대기 → 바닥이 된다. 빛이 위 꼭짓점에서 온다 */
.picks i.on{background:linear-gradient(135deg,#FFD9A8 0%,#FF9F45 38%,#F0771B 63%,#B24A08 100%);box-shadow:inset 0 -1px 2px rgba(0,0,0,.3),inset 0 1px 1px rgba(255,255,255,.45),0 1px 3px rgba(0,0,0,.4)}
.picks i.spent{background:none;box-shadow:inset 0 0 0 1.5px var(--ink-faint);opacity:.45;transform:rotate(45deg) scale(.72)}
.picks .picks-n{font-style:normal;font-weight:800;color:var(--ink);letter-spacing:.02em;margin-left:2px}
.picks .picks-lap{margin-left:8px;font-size:11px;color:var(--ink-faint)}
.targets{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tgt{display:flex;gap:10px;align-items:center;min-height:58px;border-radius:10px;border:1px solid var(--line);background:var(--surface-raised);text-align:left;padding:7px 10px;line-height:1.25;transition:border-color .15s,transform .1s}
.tgt:not(:disabled):hover{border-color:var(--accent)}
.tgt:not(:disabled):active{transform:scale(.98)}
.tgt b{font:700 15px/1.3 var(--read);display:block}
.tgt small{display:block;color:var(--ink-muted);font-size:11px}
.tgt img{width:32px;height:40px;object-fit:cover;border-radius:3px;flex:none}
.tgt .pin{flex:none;width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--ink-faint);margin:0 6px 0 4px}
.tgt:disabled{background:transparent;border-style:dashed;color:var(--ink-faint);cursor:default}
.tgt:disabled img{filter:grayscale(1);opacity:.4}
.tgt:disabled b{font-weight:400}
/* 증거: 꼬리표 달린 종이 */
.clue{position:relative;background:var(--fiber),var(--paper);border-radius:2px;padding:18px 16px 14px;margin:6px 2px 14px;box-shadow:none;transform:rotate(-.4deg)}
.clue:nth-of-type(even){transform:rotate(.5deg)}
.clue::before{content:"";position:absolute;top:10px;right:14px;width:10px;height:10px;border-radius:50%;background:var(--surface);box-shadow:none}
.clue-tag{display:flex;gap:6px;font-size:11px;color:var(--ink-muted)}
.clue-tag span{padding:1px 7px;border:1px solid var(--line);border-radius:2px}
.clue-tag .only{border-style:dashed}
.clue .cn{font:700 19px/1.3 var(--read);margin:8px 0 10px}
.clue .prose{font-size:15.5px;line-height:1.8}
.clue .cm{font-size:11.5px;color:var(--ink-faint);margin-top:10px;text-align:right}
.photo{margin:0 0 12px;padding:6px 6px 16px;background:#EEEEEE;box-shadow:none;transform:rotate(1.2deg);width:88%}
.photo img{filter:none}
.clue .reveal{margin-top:12px;border:1px solid var(--line);background:none;border-radius:8px;padding:8px 12px;min-height:var(--tap);width:100%}
.clue.fresh.anim{animation:unfold .55s cubic-bezier(.2,.8,.2,1)}
.clue.fresh::after{content:"";position:absolute;inset:-1px;border-radius:2px;box-shadow:0 0 0 1.5px var(--accent);pointer-events:none}
@keyframes unfold{from{opacity:0;transform:translateY(-10px) rotateX(35deg) scale(.96)}to{opacity:1;transform:rotate(-.4deg)}}
/* 쪽지 봉투 */
.envelope{position:relative;width:190px;height:124px;margin:40px auto 30px}
.env-back,.env-front{position:absolute;inset:0;border-radius:4px}
.env-back{background:var(--paper-edge)}
.env-letter{position:absolute;left:14px;right:14px;top:-26px;height:90px;background:var(--fiber),var(--paper);background-image:repeating-linear-gradient(transparent 0 13px,var(--line) 13px 14px),var(--fiber);background-position:0 18px;animation:peek 3.5s ease-in-out infinite;box-shadow:none}
@keyframes peek{0%,100%{transform:translateY(12px)}50%{transform:translateY(0)}}
.env-front{background:linear-gradient(to top right,var(--paper) 49.5%,transparent 50.5%) left/51% 100% no-repeat,linear-gradient(to top left,var(--paper) 49.5%,transparent 50.5%) right/51% 100% no-repeat,linear-gradient(transparent 38%,var(--paper) 38%)}
.envelope .wax{position:absolute;left:50%;top:46%;margin:-15px 0 0 -15px}
.wax{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.3),transparent 40%),radial-gradient(circle,var(--wax,#8E2A1F) 55%,color-mix(in srgb,var(--wax,#8E2A1F) 70%,#000) 100%);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--wax,#8E2A1F) 80%,#000)}
/* 투표: 지목 쪽지 */
.ballot{display:flex;flex-direction:column;gap:10px}
.slip{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:8px 14px 8px 8px;border:0;border-radius:2px;text-align:left;background:var(--fiber),var(--paper);box-shadow:none;font-size:16px}
.slip .face{width:40px;height:50px;object-fit:cover;border-radius:2px;filter:grayscale(.6)}
/* 초상 위에 놓이는 글이라 그늘이 있어야 밝은 사진에서도 읽힌다 */
.slip-n{flex:1;font:700 18px/1.3 var(--read);text-shadow:0 1px 4px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.55)}
.slip .mark{font:700 15px/1 var(--read);color:var(--accent);border:2px solid var(--accent);border-radius:50%;width:54px;height:54px;display:grid;place-items:center;transform:rotate(-14deg) scale(1.4);opacity:0;transition:opacity .15s,transform .2s cubic-bezier(.3,1.6,.5,1)}
/* 고른 표시는 초상 **위**에 그린다. box-shadow 는 제 상자에 칠해지는데 초상은
그 위에 얹힌 자식이라, 왼쪽 절반에서 테두리가 초상에 덮여 끊겼다.
덮개 한 겹을 띄워 테두리가 끝까지 이어지게 한다. */
.slip.picked{box-shadow:none}
.slip.picked::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
border-radius:inherit;box-shadow:inset 0 0 0 1.5px var(--accent)}
.slip.picked .face{filter:none}
.slip.picked .mark{opacity:.95;transform:rotate(-14deg) scale(1)}
/* 엔딩: 봉인 */
.sealed{display:flex;justify-content:center;margin:26px 0 18px}
.letter{width:200px;height:140px;background:var(--fiber),var(--paper);border-radius:2px;display:grid;place-items:center;box-shadow:none;position:relative}
.letter::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 49.6%,var(--paper-edge) 50%,transparent 50.4%),linear-gradient(to bottom left,transparent 49.6%,var(--paper-edge) 50%,transparent 50.4%);background-size:100% 70%;background-repeat:no-repeat}
.wax.big{width:74px;height:74px;display:grid;place-items:center;position:relative;z-index:1;font:700 26px/1 var(--read);color:rgba(0,0,0,.35);animation:glow 2.8s ease-in-out infinite}
.wax.big span{border:2px solid rgba(0,0,0,.2);border-radius:50%;width:54px;height:54px;display:grid;place-items:center}
@keyframes glow{}
.reveal-wrap{position:relative;height:0;overflow:visible}
.reveal-wrap .half{position:absolute;top:-10px;left:50%;margin-left:-37px;animation:none;opacity:0}
.reveal-wrap .half.l{clip-path:polygon(0 0,52% 0,44% 30%,56% 55%,46% 100%,0 100%)}
.reveal-wrap .half.r{clip-path:polygon(52% 0,100% 0,100% 100%,46% 100%,56% 55%,44% 30%)}
.reveal-wrap.breaking .half.l{animation:splitL 1.4s ease-in forwards}
.reveal-wrap.breaking .half.r{animation:splitR 1.4s ease-in forwards}
@keyframes splitL{0%{opacity:1;transform:none}30%{opacity:1;transform:translateX(-4px) rotate(-6deg)}100%{opacity:0;transform:translate(-70px,120px) rotate(-60deg)}}
@keyframes splitR{0%{opacity:1;transform:none}30%{opacity:1;transform:translateX(4px) rotate(6deg)}100%{opacity:0;transform:translate(70px,130px) rotate(50deg)}}
.verdict{font:700 30px/1.25 var(--read);color:var(--accent);margin:14px 0 6px}
.culprit{color:var(--ink-muted);margin:0 0 4px}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.tally{margin:18px 0 22px}
.tally div{display:grid;grid-template-columns:66px 1fr 34px;gap:10px;align-items:center;font-size:13px;margin-bottom:8px}
.tally i{display:block;height:6px;background:linear-gradient(var(--accent),var(--accent)) left/var(--w) 100% no-repeat,var(--line);border-radius:3px}
.tally span:last-child{text-align:right;color:var(--ink-muted)}
.epilogue{padding:18px 16px;background:var(--fiber),var(--paper);border-radius:2px;box-shadow:none}
.ending-first .verdict{animation:rise 1s .5s both}.ending-first .culprit{animation:rise 1s .8s both}.ending-first .tally{animation:rise 1s 1s both}.ending-first .epilogue{animation:rise 1.2s 1.3s both}
/* 핸드북: 책장 */
.fab{position:absolute;right:16px;bottom:140px;width:62px;height:62px;border-radius:50%;border:0;background:var(--fiber),var(--paper);font-size:11px;font-weight:600;box-shadow:0 0 0 1px var(--paper-edge);z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.fab-book{width:20px;height:15px;border:2px solid var(--ink-muted);border-radius:1px 1px 3px 3px;position:relative}
.fab-book::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:var(--ink-muted)}
.fab.has-new::before{content:"";position:absolute;top:4px;right:6px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--paper);animation:pulse 1.8s infinite}
@keyframes pulse{50%{transform:scale(1.25)}}
.hb{position:absolute;inset:0;background:var(--grain),#1E1E1E;z-index:5;display:flex;flex-direction:column;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.hb-top{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 10px;color:#EEEEEE}
.hb-top b{font:700 17px var(--read)}
.hb-top .who-in{color:#A6A6A6}
.hb-k{font-size:11.5px;color:#A6A6A6;margin-top:2px}
.hb-top button{border:0;background:none;min-height:var(--tap);min-width:44px;font-size:14px;color:#EEEEEE}
.hb-card{position:relative;flex:1;overflow:auto;margin:0 12px;padding:26px 24px 44px;border-radius:2px 8px 8px 2px;color:var(--ink);
background:linear-gradient(to right,rgba(0,0,0,.14),transparent 18px),var(--fiber),var(--paper);box-shadow:0 0 0 1px var(--paper-edge)}
.hb-card.turn{animation:turn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes turn{from{transform:perspective(900px) rotateY(-10deg);transform-origin:left;opacity:.4}}
.hb-card h4{font:700 26px/1.25 var(--read);margin:0 0 16px}
.hb-card .k{font-size:12px;color:var(--ink-muted);margin:18px 0 6px}
.hb-card .prose.list p{margin:0 0 .8em}
.hb-card .photo.portrait{width:130px;float:right;margin:0 0 10px 12px;transform:rotate(2deg)}
.folio{position:absolute;bottom:14px;left:0;right:0;text-align:center;font:12px var(--read);color:var(--ink-faint)}
.stamp{position:absolute;top:22px;right:20px;font:700 17px/1 var(--read);color:var(--accent);border:2.5px solid var(--accent);padding:6px 10px;border-radius:4px;transform:rotate(9deg);opacity:.75;letter-spacing:.2em}
.route{list-style:none;padding:0;margin:0 0 8px;position:relative}
.route li{display:grid;grid-template-columns:44px 1fr;gap:30px;padding:7px 0;position:relative;font:16px/1.5 var(--read)}
.route li::after{content:"";position:absolute;left:52px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 1.5px var(--accent)}
.route time{font:12.5px/2 var(--ui);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.route small{display:block;font:12.5px var(--ui);color:var(--ink-muted)}
blockquote.prose{margin:0;padding:12px 14px;border-radius:8px;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.rel{position:relative;min-height:112px;padding:12px 0 12px 132px;border-bottom:1px dotted var(--line);overflow:hidden}
.rel .bg-left{width:150px;border-radius:6px 0 0 6px; /* 초상은 꽉 차게, 오른쪽은 글 쪽으로 스며든다 */
-webkit-mask-image:linear-gradient(to right,#000 0,#000 58%,rgba(0,0,0,.55) 78%,transparent 100%);
mask-image:linear-gradient(to right,#000 0,#000 58%,rgba(0,0,0,.55) 78%,transparent 100%)}
.rel .rel-txt{text-shadow:0 1px 3px rgba(0,0,0,.6)} /* 꼬리가 닿아도 읽히게 */
.rel-txt{position:relative;z-index:1;min-width:0}
.rel-who{font:700 15px var(--read);color:var(--accent);margin-bottom:2px}
.slip-note{margin:14px 4px;padding:22px 20px;background:var(--surface-raised);background-image:repeating-linear-gradient(transparent 0 29px,var(--line) 29px 30px);background-position:0 18px;transform:rotate(-1.2deg);box-shadow:none;font-size:17px}
.hb-card .clue{margin-left:0;margin-right:0}
.hb-nav{display:flex;align-items:center;gap:10px;padding:14px 16px 18px}
.hb-nav button{min-height:48px;flex:1;border-radius:10px;border:1px solid #555;background:#2a2a2a;color:#EEEEEE}
.hb-nav button:disabled{opacity:.35}
.hb-dots{display:flex;gap:6px;justify-content:center;flex:1.2;flex-wrap:wrap}
.hb-dots i{width:6px;height:6px;border-radius:50%;background:#666}
.hb-dots i.on{background:var(--accent);box-shadow:none}
.hb-dots i.new{background:transparent;box-shadow:inset 0 0 0 1.5px var(--accent)}
/* 장이 바뀌는 순간 — 챕터 표지가 한 장 지나간다 */
.turning{position:absolute;inset:0;z-index:60;pointer-events:none;display:flex;align-items:center;justify-content:center;
overflow:hidden;background:var(--surface);animation:turnveil 1.8s ease-in-out forwards}
/* 그 작품의 표지를 뒤에 깔고, 글이 읽히도록 어둡게 덮는다 */
.turn-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;opacity:.5;filter:saturate(.75)}
.turning::after{content:"";position:absolute;inset:0;
background:radial-gradient(130% 85% at 50% 46%,transparent 18%,rgba(0,0,0,.5) 78%),linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,.12) 42%,rgba(0,0,0,.62))}
.turn-in{position:relative;z-index:1}
@keyframes turnveil{0%{opacity:0}28%{opacity:.95}72%{opacity:.95}100%{opacity:0}}
.turn-in{text-align:center;padding:0 28px;max-width:100%}
.turn-in .fell{display:block;font-size:11px;letter-spacing:.34em;color:var(--accent);opacity:0;
animation:turnUp 1.8s ease-out forwards}
.turn-in b{display:block;margin-top:10px;font:700 25px/1.35 var(--read);color:var(--ink);word-break:keep-all;opacity:0;
animation:turnUp 1.8s ease-out .18s forwards}
.turn-in i{display:block;width:0;height:1px;margin:16px auto 0;background:var(--accent);
animation:turnRule 1.8s cubic-bezier(.2,.8,.3,1) .2s forwards}
.turn-in small{display:block;margin-top:12px;font-size:11.5px;color:var(--ink-muted);opacity:0;
animation:turnUp 1.8s ease-out .26s forwards}
@keyframes turnUp{0%{opacity:0;transform:translateY(6px)}30%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0}}
@keyframes turnRule{0%{width:0;opacity:0}34%{width:132px;opacity:1}70%{width:132px;opacity:1}100%{width:132px;opacity:0}}
@media (prefers-reduced-motion:reduce){
.turning{animation-duration:.5s}
.turn-in .fell,.turn-in b,.turn-in small{animation:none;opacity:1}
.turn-in i{animation:none;width:132px}
}
.toast{position:absolute;left:16px;right:16px;bottom:200px;z-index:9;background:var(--surface-raised);border:1px solid var(--accent);border-radius:8px;padding:11px 14px;font-size:13px;box-shadow:none;animation:rise .25s}
.toast.bad{border-color:var(--danger);color:var(--ink)}
/* ═══ 서버: 사건 기록실 ═══ */
.srv{display:grid;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));gap:34px 22px;padding-top:18px}
@media (max-width:520px){.srv{grid-template-columns:1fr}}
.srv .panel{min-width:0;border-radius:0 4px 4px 4px}
.srv .panel h2{position:absolute;top:-30px;left:0;margin:0;padding:6px 18px 4px;font-size:15px;background:var(--fiber),var(--paper);border-radius:6px 6px 0 0;box-shadow:none}
.srv .panel h2::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:var(--seal);vertical-align:1px}
.srv .panel.sealed-db h2::before{background:var(--wax,#8E2A1F)}
.srv h3{margin-top:18px}
pre.json{font:11.5px/1.55 var(--mono);background:repeating-linear-gradient(transparent 0 17px,color-mix(in srgb,var(--line) 60%,transparent) 17px 18px),var(--surface-raised);background-attachment:local;padding:10px 12px;border-radius:2px;max-height:320px;overflow:auto;margin:10px 0 0;white-space:pre-wrap;word-break:break-all;box-shadow:inset 0 0 0 1px var(--line)}
table.t{border-collapse:collapse;font-size:12.5px;width:100%;font-variant-numeric:tabular-nums}
table.t th,table.t td{border-bottom:1px dotted var(--line);padding:6px 7px;text-align:left;white-space:nowrap;font-weight:400}
table.t th{color:var(--ink-muted);font-size:11.5px;border-bottom:1px solid var(--ink-faint)}
table.t td.w{white-space:normal;font-family:var(--mono);font-size:11.5px}
table.t tr.pick td{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.req tbody tr{cursor:pointer}
.req tbody tr:hover td{background:var(--surface-sunken)}
.ops{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ops select{background:var(--surface-raised);border:1px solid var(--line);border-radius:8px;padding:8px}
.pass{font:700 15px var(--read)}
.leak{display:flex;gap:14px;align-items:center;margin:10px 0}
.leak .stamp-big{font-size:17px;padding:7px 10px}
.phone[data-theme] .big.soft{color:var(--ink)}
.phone[data-theme] .big:disabled{color:var(--ink-faint)}
/* ═══ 핸드북 시트 ═══ */
.scr-body.has-handle{padding-bottom:180px}
.scr-foot.has-handle{bottom:60px;padding-bottom:10px}
.scr-foot.has-handle:empty{display:none}
.handle{position:absolute;left:0;right:0;bottom:0;height:60px;z-index:4;border:0;border-top:1px solid var(--paper-edge);border-radius:16px 16px 0 0;
background:var(--fiber),var(--paper);display:grid;grid-template-columns:auto 1fr;grid-template-rows:10px 1fr;column-gap:12px;align-items:center;padding:0 18px 6px;text-align:left;box-shadow:none}
.handle .grab{grid-column:1/3;justify-self:center;align-self:start;margin-top:6px}
.grab{display:block;width:40px;height:4px;border-radius:2px;background:var(--ink-faint)}
.handle-k{font:700 15px var(--read);display:flex;align-items:center;gap:6px}
.handle-k::before{content:"";width:16px;height:12px;border:1.8px solid var(--ink-muted);border-radius:1px 1px 3px 3px;background:linear-gradient(var(--ink-muted),var(--ink-muted)) center/1.8px 100% no-repeat}
.cheat{font-size:13px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.handle.has-new .handle-k::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:none;animation:pulse 1.8s infinite}
.handle.has-new .cheat{color:var(--accent)}
.sheet-dim{position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.28)}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;flex-direction:column;border-radius:18px 18px 0 0;
background:var(--fiber),var(--paper);box-shadow:none;transition:height .28s cubic-bezier(.2,.8,.2,1)}
.sheet.half,.sheet.full{height:calc(100% - 10px)} /* 한 단계만 쓴다 */
.sheet.anim{animation:sheetUp .3s cubic-bezier(.2,.8,.2,1)}
.sheet.closing{animation:sheetDown .26s cubic-bezier(.4,0,.8,.4) forwards}
@keyframes sheetUp{from{transform:translateY(100%)}}
@keyframes sheetDown{to{transform:translateY(100%)}}
.sheet.closing ~ .sheet-dim,.sheet-dim.closing{opacity:0;transition:opacity .26s ease}
.sheet-top{flex:none;padding:0 14px;border-bottom:1px solid var(--paper-edge);position:relative}
.grabber{display:block;width:100%;height:var(--tap);border:0;background:none;padding:14px 0;touch-action:none;cursor:grab}
.grabber .grab{margin:0 auto}
.sheet-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 4px}
.sheet-who b{font:700 17px var(--read)}
.sheet-tools{display:flex;gap:4px}
.sheet-tools button{border:1px solid var(--line);background:none;border-radius:8px;min-height:var(--tap);min-width:var(--tap);padding:0 10px;font-size:13px;display:flex;align-items:center;gap:4px}
.sheet-tools button:first-child{font:700 15px var(--read)}
.sheet-tools small{font:11px var(--ui);color:var(--ink-muted)}
.chips{display:flex;gap:4px;padding:10px 0 0;overflow-x:auto;scrollbar-width:none}
.chips button{flex:1 0 auto;position:relative;border:0;background:none;min-height:var(--tap);padding:0 10px;font-size:14px;color:var(--ink-muted);border-bottom:2.5px solid transparent}
.chips button[aria-selected="true"]{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
.chips button i{position:absolute;top:8px;right:2px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:none}
.sheet-notice{position:absolute;left:12px;right:12px;top:calc(100% + 8px);z-index:2;padding:9px 12px;border-radius:8px;font-size:13px;background:var(--surface);border:1px solid var(--accent);box-shadow:none;animation:rise .25s}
/* 위 여백은 .sheet-page 가 진다 — 스크롤 통에 padding-top 이 있으면 sticky 머리글이
그만큼 내려가 붙고, 그 틈으로 본문이 비쳐 지나간다 */
.sheet-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 22px 30px;touch-action:pan-y;overscroll-behavior:contain}
.sheet-page{padding-top:18px}
.sheet-page.from-next{animation:fromR .24s ease-out}
.sheet-page.from-prev{animation:fromL .24s ease-out}
@keyframes fromR{from{opacity:.2;transform:translateX(28px)}}
@keyframes fromL{from{opacity:.2;transform:translateX(-28px)}}
.sheet-page h4{font:700 25px/1.25 var(--read);margin:0 0 12px}
.me-head::after{content:"";display:block;clear:both}
.me-head .photo.portrait{width:112px;float:right;margin:0 0 10px 12px;transform:rotate(2deg)}
.hsec{margin:0 0 22px}
.hsec h5{font:700 13px/1 var(--ui);color:var(--accent);margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid var(--paper-edge);display:flex;align-items:center;gap:8px;letter-spacing:.02em}
.hsec.secret{margin-top:22px;padding-top:4px}
.stamp-sm{font:700 11px/1 var(--read);color:var(--accent);border:1.5px solid var(--accent);border-radius:3px;padding:3px 5px;transform:rotate(6deg);opacity:.8;letter-spacing:.15em}
.sheet .prose{font-size:var(--fsz);line-height:1.85}
.sheet .prose.list p{margin:0 0 .7em}
.sheet.fs0{--fsz:15px}.sheet.fs1{--fsz:17px}.sheet.fs2{--fsz:19px}
.sheet .route li{font-size:var(--fsz)}
.sheet .rel{display:grid;grid-template-columns:42px 1fr;gap:12px;padding:12px 0;border-bottom:1px dotted var(--line);align-items:start}
.sheet .rel .prose{font-size:calc(var(--fsz) - 1px)}
.slip-k{font-size:11.5px;color:var(--ink-muted);margin-bottom:6px}
.slip-k b{color:var(--accent);margin-left:6px}
.sheet .slip-note{margin:6px 2px 16px;padding:16px 16px 14px}
.sheet .slip-note.new{box-shadow:0 0 0 1.5px var(--accent)}
.sheet .slip-note .prose{font-size:var(--fsz)}
.sheet .clue{margin:4px 0 14px}
.sheet .clue .prose{font-size:calc(var(--fsz) - 1.5px)}
.sheet-host{flex:none;margin:0;padding:10px 14px 12px;background:var(--paper);border-top:1px solid var(--paper-edge)}
/* ═══ 하단 탭 ═══ */
.scr-body.has-nav{padding-bottom:200px}
.scr-foot.has-nav{bottom:96px;padding-bottom:8px}
.scr-foot.has-nav:empty{display:none}
.tabbar{position:absolute;left:0;right:0;bottom:0;height:62px;z-index:7;display:grid;grid-template-columns:repeat(4,1fr);
background:var(--grain),var(--surface-sunken);border-top:1px solid var(--line);padding:0 6px 4px}
.tabbar button{position:relative;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11.5px;color:var(--ink-muted);min-height:56px}
.tabbar button[aria-selected="true"]{color:var(--accent)}
.tabbar button[aria-selected="true"]::before{content:"";position:absolute;top:-1px;left:28%;right:28%;height:2px;background:var(--accent);box-shadow:none}
.tabbar i{position:absolute;top:9px;left:calc(50% + 9px);width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:none}
.ico{width:22px;height:20px;position:relative;display:block}
.ico-hb{border:1.8px solid currentColor;border-radius:2px 2px 4px 4px;height:17px;margin-top:2px}
.ico-hb::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1.8px;margin-left:-.9px;background:currentColor}
.ico-clues::before{content:"";position:absolute;left:2px;top:1px;width:12px;height:12px;border:1.8px solid currentColor;border-radius:50%}
.ico-clues::after{content:"";position:absolute;left:14px;top:13px;width:7px;height:1.8px;background:currentColor;transform:rotate(45deg);transform-origin:left}
.ico-map{border:1.8px solid currentColor;border-radius:2px;background:linear-gradient(currentColor,currentColor) 33% 0/1.8px 100% no-repeat,linear-gradient(currentColor,currentColor) 66% 0/1.8px 100% no-repeat;transform:skewY(-6deg);height:16px;margin-top:2px}
.ico-log{background:linear-gradient(currentColor,currentColor) 6px 3px/16px 1.8px no-repeat,linear-gradient(currentColor,currentColor) 6px 9px/16px 1.8px no-repeat,linear-gradient(currentColor,currentColor) 6px 15px/12px 1.8px no-repeat,radial-gradient(circle,currentColor 1.4px,transparent 1.8px) 0 0/4px 6px repeat-y}
.cheat-strip{position:absolute;left:10px;right:10px;bottom:68px;z-index:3;height:30px;border:0;border-radius:8px;padding:0 12px;text-align:left;
background:var(--fiber),var(--paper);box-shadow:inset 0 0 0 1px var(--paper-edge);font-size:12.5px;color:var(--ink-muted);display:flex;align-items:center}
.cheat-strip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cheat-strip.new{color:var(--accent)}
.sheet{bottom:62px}
.sheet-dim{bottom:62px}
.sheet.half,.sheet.full{height:calc(100% - 72px)}
.sheet.anim{animation:sheetUp .3s cubic-bezier(.2,.8,.2,1)}
@keyframes sheetUp{from{transform:translateY(40%);opacity:0}}
/* 조사 패널 */
.panel-cta{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;margin-bottom:14px;border-radius:8px;background:color-mix(in srgb,var(--accent) 12%,transparent);font-size:13.5px}
.panel-cta b{color:var(--accent)}
.panel-cta button{border:1px solid var(--accent);background:none;border-radius:8px;min-height:var(--tap);padding:0 12px;font-size:13px}
.panel-cta.soft{background:var(--surface-sunken)}
.panel-cta.soft button{border-color:var(--line)}
.cgroup{margin-bottom:18px}
.cgroup h5{display:flex;justify-content:space-between;font:700 15px var(--read);margin:0 0 6px;padding-bottom:6px;border-bottom:1px solid var(--paper-edge)}
.cgroup h5 span{font:12px var(--ui);color:var(--ink-faint)}
.clue-row{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:var(--tap);border:0;border-bottom:1px dotted var(--line);background:none;text-align:left;padding:4px 2px}
.clue-row b{font:600 16px var(--read)}
.clue-row span{font-size:11.5px;color:var(--ink-faint);flex:none}
.clue-row::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--ink-faint);border-bottom:1.5px solid var(--ink-faint);transform:rotate(-45deg);flex:none}
.clue-fold{display:block;margin:-6px 0 14px auto;border:0;background:none;color:var(--ink-muted);font-size:12.5px;min-height:var(--tap)}
/* 맵 패널 */
.mapfig{margin:0 0 16px;padding:6px;background:#EEEEEE;border-radius:2px;box-shadow:none}
.mapfig img{width:100%}
.place{padding:12px 0 12px 14px;border-bottom:1px dotted var(--line);position:relative}
.place::before{content:"";position:absolute;left:0;top:18px;width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-faint)}
.place.been::before{background:var(--accent);box-shadow:none}
.place-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.place-h b{font:700 17px var(--read)}
.me-time{font-size:12px;color:var(--accent);font-variant-numeric:tabular-nums}
.place-f{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--ink-muted)}
.place-f button{border:1px solid var(--line);background:none;border-radius:6px;min-height:var(--tap);padding:0 10px;font-size:12px;color:var(--ink)}
/* 로그 패널 */
.feed{list-style:none;margin:10px 0 0;padding:0;position:relative}
.feed li{display:grid;grid-template-columns:40px 1fr;gap:20px;padding:7px 0;font-size:13.5px;line-height:1.55;position:relative}
.feed li::after{content:"";position:absolute;left:44px;top:13px;width:7px;height:7px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink-faint)}
.feed time{font-size:11.5px;color:var(--ink-muted);font-variant-numeric:tabular-nums;padding-top:1px}
.feed .f-block{padding-top:16px}
.feed .f-block span{font:700 15px var(--read);color:var(--accent)}
.feed .f-block::after{background:var(--accent);box-shadow:none;top:22px}
.feed .f-reveal::after{background:var(--ink-muted)}
.feed .f-etc span,.feed .f-seat span{color:var(--ink-muted)}
.feed button{border:0;background:none;padding:0;font:inherit;font-family:var(--read);font-weight:700;color:var(--ink);text-decoration:underline dotted;text-underline-offset:3px}
.place-f{flex-wrap:wrap}
.place-n{display:flex;align-items:center;gap:8px;margin-left:auto}
/* HOST 확인 창 */
.hostk{writing-mode:horizontal-tb;font:700 10px/1 var(--mono);letter-spacing:.12em;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);border-radius:3px;padding:4px 5px;align-self:center}
.confirm-dim{position:absolute;inset:0;z-index:36;background:rgba(0,0,0,.6);animation:fade .15s}
.confirm{position:absolute;left:22px;right:22px;top:50%;transform:translateY(-50%);z-index:37;padding:22px 20px 22px;border-radius:6px;
background:var(--fiber),var(--paper);box-shadow:0 0 0 1px var(--paper-edge);animation:pop .18s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:translateY(-46%) scale(.96)}}
.confirm-k{display:inline-block;font:700 10px/1 var(--mono);letter-spacing:.12em;color:var(--accent);border:1px solid var(--accent);border-radius:3px;padding:4px 6px}
.confirm h3{font:700 21px/1.35 var(--read);color:var(--ink);margin:12px 0 8px}
.confirm p{font-size:14px;line-height:1.65;color:var(--ink-muted);margin:0 0 18px}
.confirm p b{color:var(--accent)}
.confirm-row{display:flex;gap:8px}
.confirm-row button{flex:1;min-height:50px;border-radius:10px;border:1px solid var(--line);background:none;font-size:15px}
.confirm-row .ok{flex:1.4;border:0;background:var(--accent);color:#1A1A1A;font-weight:600}
/* ═══ 그림자 대신 경계선 ═══ */
.editor,.panel{border:1px solid var(--line);box-shadow:none}
.clue{border:1px solid var(--line)}
.clue.fresh::after{box-shadow:0 0 0 1.5px var(--accent)}
.photo,.mapfig{border:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.invite,.cover-hero{border:1px solid var(--paper-edge)}
.slip{border:1px solid var(--line)}
.slip.picked{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.letter{border:1px solid var(--line)}
.epilogue{border:1px solid var(--line)}
.slip-note{border:1px solid var(--line)}
.sheet .slip-note.new{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.sheet{border-top:1px solid var(--line)}
.sheet-top{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.sheet-host{border-top:1px solid var(--line)}
.cheat-strip{border:1px solid var(--line)}
.book-cover{border:1px solid var(--line)}
.confirm{border:1px solid var(--line)}
.toast{border:1px solid var(--accent)}
.sheet-notice{border:1px solid var(--accent)}
.big{border:1px solid transparent}
.big.soft{border-color:var(--line)}
.big:disabled{border-color:var(--line)}
.tabbar{border-top:1px solid var(--line)}
.scr-foot{background:var(--surface);border-top:1px solid var(--line)}
.scr-foot:empty{display:none}
.phead{border-bottom:1px solid var(--line)}
.hsec{padding-bottom:18px;border-bottom:1px solid var(--line)}
.hsec:last-child{border-bottom:0;padding-bottom:0}
.sheet .rel:last-child{border-bottom:0}
.cgroup{padding:12px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--ink) 3%,transparent)}
.cgroup .clue{margin:8px 0}
.clue-row:last-child{border-bottom:0}
.place{padding:12px 12px 12px 26px;margin-bottom:8px;border:1px solid var(--line);border-radius:8px}
.place::before{left:12px}
.place.been{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.feed li{border-bottom:1px dotted var(--line)}
.feed .f-block{border-bottom:1px solid var(--line)}
.listen,.stage{border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--ink) 3%,transparent)}
.stage.mine{border-color:var(--accent)}
.script{padding:16px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--ink) 3%,transparent)}
.speakers{border:1px solid var(--line);border-radius:10px;padding:0 12px}
.speakers li:last-child{border-bottom:0}
.seat{border-bottom:1px solid var(--line)}
.targets+.sec,.picks+.guide{margin-top:18px}
.guide{padding-bottom:14px;border-bottom:1px solid var(--line)}
.guide.center{border-bottom:0}
.tally-dots i.on,.picks i.on,.on-dot.on,.progress i.now,.tabbar i,.chips button i,.hb-dots i.on,.place.been::before,.feed .f-block::after,.handle.has-new .handle-k::after{box-shadow:none}
.listen .face,.stage .face{box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--line)}
.stage.mine .face{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent)}
.phone{box-shadow:0 0 0 9px #202020,0 0 0 10px #4a4a4a}
.scr{background:var(--grain),var(--surface)}
.scr-foot .hostrow{border-top:0;padding-top:0}
.scr-foot{padding-top:12px}
/* ═══ 이미지 영역(비어 있음) ═══ */
.ph{display:grid;place-items:center;width:100%;background:repeating-linear-gradient(-45deg,transparent 0 9px,color-mix(in srgb,var(--ink) 6%,transparent) 9px 10px),color-mix(in srgb,var(--ink) 4%,transparent);
border:1px dashed color-mix(in srgb,var(--ink) 28%,transparent);border-radius:4px;color:color-mix(in srgb,var(--ink) 38%,transparent);overflow:hidden}
.ph span{font-size:11px;font-weight:600;letter-spacing:.08em;white-space:nowrap;text-align:center;line-height:1.3}
.ph-photo{aspect-ratio:4/3}
.ph-map{aspect-ratio:1/1}
.ph-portrait{aspect-ratio:4/5}
.ph-cover{aspect-ratio:3/4}
.ph-face{height:100%;min-height:40px;border-radius:3px}
.ph-face span,.face.ph span{font-size:9px;letter-spacing:0;white-space:nowrap;line-height:1.35}
.listen .ph.face span,.stage .ph.face span{font-size:11px}
.photo,.mapfig{background:none;padding:0;border:0;transform:none}
.photo .ph,.mapfig .ph{border-radius:6px}
.clue .photo{width:100%}
.me-head .photo.portrait,.hb-card .photo.portrait{transform:none}
.seat-pic .ph{border-radius:3px}
.tgt .ph{width:32px;height:40px;flex:none}
.tgt .ph span{font-size:8px}
.slip .ph,.slip .face{width:40px;height:50px;flex:none}
.slip .ph span{font-size:8.5px}
.sheet .rel .ph span{font-size:8.5px}
.listen .ph.face,.stage .ph.face{width:96px;height:120px;margin:0 auto 14px;border-radius:48px 48px 6px 6px}
.book-cover .ph{width:130px}
.book-cover{border:0;transform:none}
.cover-hero .ph{width:70px;flex:none}
.cover-row .ph{width:78px;flex:none}
.book-cover .ph span,.cover-hero .ph span,.cover-row .ph span{font-size:10px}
/* ═══ 알림 카드: 최근 소식 + 할 일 ═══ */
.scr-body.has-nav{padding-bottom:240px}
.scr-foot.has-nav{bottom:136px}
.notify{position:absolute;left:10px;right:10px;bottom:68px;z-index:3;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;background:var(--grain),var(--surface-raised);overflow:hidden}
.notify .news{display:flex;align-items:center;gap:10px;min-height:var(--tap);width:100%;border:0;background:none;padding:0 12px;text-align:left;font-size:12.5px;color:var(--ink-muted)}
.notify>*+*{border-top:1px solid var(--line)}
.notify .nk{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:2px 6px;border-radius:4px;border:1px solid var(--line);color:var(--ink)}
.notify .nt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notify .na{flex:none;font-size:11px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.notify .news.hot .nk{background:var(--accent);border-color:var(--accent);color:#1A1A1A}
.notify .news.hot .nt{color:var(--ink)}
.tabbar.with-notify::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:80px;background:var(--grain),var(--surface);border-top:1px solid var(--line);z-index:-1}
.scr-foot.has-nav{bottom:142px;border-top:1px solid var(--line)}
.notify{z-index:8}
/* 시스템 그림 자리 */
.ph-ui{margin:26px auto 18px}
.ph-ui b{font-size:12px;letter-spacing:.06em}
.ph-door{width:120px;aspect-ratio:3/4}
.ph-book{width:160px;aspect-ratio:16/10}
.ph-envelope{width:190px;aspect-ratio:3/2}
.ph-sealed{width:200px;aspect-ratio:3/2}
.ph-broken{width:160px;aspect-ratio:3/2;margin:8px auto 4px}
.myrole{margin:4px 0 16px}
.myrole-k{display:block;font-size:12.5px;font-weight:600;color:var(--accent)}
.myrole .h1{margin:2px 0 0;font-size:30px}
/* 초대장: 상자 없이 */
.invite{background:none;border:0;box-shadow:none;padding:6px 0 18px;margin:0}
.invite::before{content:none}
/* 발언자 · 낭독자: 테두리 없이, 초상 크게 */
.listen,.stage,.stage.mine{border:0;background:none;padding:10px 0 6px}
.listen .face,.stage .face,.listen .ph.face,.stage .ph.face{width:168px;height:210px;border-radius:84px 84px 8px 8px}
.listen .ph.face span,.stage .ph.face span{font-size:13px}
/* 대비 예외: 앞뒤가 섞이는 자리는 #FFF */
/* 붉은 테마 위에서는 흰 글씨가 3.32, 검은 글씨가 5.24 다 — 밝게 덮으면 되레 안 보인다 */
.btn.primary{color:#1A1A1A}
.tally-dots i.on+span{color:var(--ink-muted)}
/* 조사 결과가 탭으로 들어가는 동작 */
.fly{position:absolute;z-index:30;width:190px;height:64px;padding:10px 14px;border-radius:10px;border:1px solid var(--accent);background:var(--grain),var(--surface-raised);
display:flex;flex-direction:column;justify-content:center;pointer-events:none;animation:flyIn 1.15s cubic-bezier(.5,0,.2,1) forwards}
.fly b{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fly-k{font-size:11px;font-weight:700;color:var(--accent)}
@keyframes flyIn{
0%{transform:translate(0,0) scale(.6);opacity:0}
18%{transform:translate(0,-14px) scale(1.06);opacity:1}
42%{transform:translate(0,-14px) scale(1);opacity:1}
100%{transform:translate(var(--dx),var(--dy)) scale(.12);opacity:.15}}
.tabbar button.bump.anim{animation:bump .9s ease-out}
.tabbar button.bump.anim .ico{animation:bumpIco .9s ease-out}
@keyframes bump{0%,100%{color:var(--ink-faint)}25%,60%{color:var(--accent)}}
@keyframes bumpIco{0%{transform:scale(1)}25%{transform:scale(1.35)}50%{transform:scale(.95)}100%{transform:scale(1)}}
/* 참가자 대기: 위에서부터 꽉 찬 이미지, 아래로 사라진다 */
.lobby-hero{position:relative;margin:-18px -20px 10px;height:300px}
.hero-media{position:absolute;inset:0;-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent 100%);mask-image:linear-gradient(to bottom,#000 40%,transparent 100%)}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-ph{height:100%;border:0;border-radius:0;align-items:start;padding-top:96px}
.hero-ph span{font-size:12px}
.hero-txt{position:absolute;left:20px;right:20px;bottom:6px}
.hero-txt .h1{margin:2px 0 4px;font-size:30px}
.hero-case{font-size:14px;color:var(--ink-muted)}
/* 아직 배역이 없는 사람의 대기실 머리 — 표지를 못 받으므로 글만 세운다 */
.lobby-hero.joining{height:auto;margin:0 0 4px}
.lobby-hero.joining .hero-txt{position:static}
.lobby-hero.joining .hero-txt .h1{font-size:26px}
/* 대기실 안의 이름 한 칸. 로그인했으면 닉네임이 채워져 나온다 */
.lobby-name{margin:14px 0 4px}
.lobby-name label{display:block}
.lobby-name span{display:block;font-size:12.5px;color:var(--ink-muted);margin-bottom:6px}
.lobby-name input{width:100%;min-height:var(--tap);border-radius:0;border:0;border-bottom:2px solid var(--ink-faint);
background:none;padding:0 4px;font:600 18px/1 var(--ui);color:var(--ink);outline:none}
.lobby-name input:focus{border-bottom-color:var(--accent)}
.lobby-name.miss input{border-bottom-color:var(--danger)}
.lobby-name .hint{margin:8px 0 0}
/* 자리 목록: 왼쪽 끝부터 깔리고 오른쪽으로 사라지는 초상 */
.seat,button.seat{position:relative;display:flex;align-items:center;width:calc(100% + 40px);margin:0 -20px;padding:16px 20px 16px 132px;min-height:92px;
border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;overflow:hidden;text-align:left}
button.seat:not(:disabled):hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
button.seat:not(:disabled):hover .nm{color:var(--accent)}
.seat-pic,.seat.taken .seat-pic{position:absolute;left:0;top:0;bottom:0;width:65%;height:auto;border-radius:0;box-shadow:none;background:none;
-webkit-mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.85) 25%,transparent 100%);mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.85) 25%,transparent 100%)}
.seat-pic img{width:100%;height:100%;object-fit:cover;object-position:center 25%;filter:none}
.seat:not(.taken) .seat-pic{opacity:.55}
.seat-ph{display:grid;height:100%;border:0;border-radius:0;place-items:center start;padding-left:14px}
.seat-ph span{font-size:10.5px}
.seat.me .seat-pic{box-shadow:none}
.seat-txt{position:relative}
.seat .nm{font-size:19px}
.seat .in{max-width:100%}
.badge.mine{border-color:var(--accent);color:var(--accent);font-weight:700}
.seat:disabled{opacity:.45}
/* 발언자 · 낭독자: 화면 폭 전체 초상, 아래로 사라진다 */
.listen,.stage,.stage.mine{position:relative;margin:-18px -20px 12px;padding:300px 20px 8px;text-align:center}
.stage-media{position:absolute;left:0;right:0;top:0;height:380px;-webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 100%);mask-image:linear-gradient(to bottom,#000 45%,transparent 100%)}
.stage-media img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.stage-ph{height:100%;border:0;border-radius:0;align-items:start;padding-top:130px}
.stage-ph span{font-size:12px}
.listen .listen-k,.stage .listen-k,.listen .listen-n,.stage .listen-n,.stage-sub,.listen .wave{position:relative}
.stage .listen-n{font-size:28px}
.listen .listen-n{font-size:28px}
.stage.mine .listen-k{color:var(--accent);font-weight:700}
.stage.mine .listen-n{color:var(--accent)}
/* ── 스크롤 표시: 오른쪽에 1픽셀 ──────────────────────────────────────
옆에 붙어 있다는 느낌만 준다. 규칙은 셋이다.
· 1픽셀 선이 위에서 아래까지 늘 있다 — 스크롤이 없는 화면에도 있다
· 그 위를 표시가 미끄러진다. 가운데 110px 만 진하고 양쪽은 긴 그라데이션이다
· 맨 위·맨 아래에 닿으면 진한 구간이 10px 로 줄어든다
결론은 스크롤이 있든 없든 너비가 변하지 않는다는 것.
왜 네이티브 스크롤바를 안 쓰나
::-webkit-scrollbar 는 iOS 사파리가 무시한다. 폰으로 하는 앱이라 그러면
정작 폰에서 안 보인다. 그리고 네이티브는 스크롤이 생길 때만 자리를 차지해
그만큼 폭이 흔들린다.
왜 겹치는 요소를 안 만들고 배경으로 그리나
화면을 morph 로 다시 그리므로 끼워 넣은 요소는 사라지거나 겹친다.
배경은 요소가 아니라서 다시 그려도 그대로 있다. */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;background:transparent}
*::-webkit-scrollbar-thumb,*::-webkit-scrollbar-track,*::-webkit-scrollbar-corner{background:transparent}
*::-webkit-scrollbar-button{display:none;height:0;width:0}
:root{
--sc-core:10px; /* 진한 알맹이. 이것이 지금 자리를 가리킨다 */
/* 뒤가 어두운 사진일 때도 밝은 종이일 때도 보여야 해서 강조색을 옅게 쓴다.
글자색(--ink) 으로 잡으면 스킨에 따라 배경에 묻힌다. */
--sc-rail:color-mix(in srgb,var(--accent) 26%,transparent);
--sc-mark:var(--accent);
}
/* 굴리는 칸의 맨 끝에 붙는 조각. 높이 0 이라 자리를 차지하지 않고, sticky 로 늘
보이는 자리에 붙어 있는다. 배경으로 그리면 전체폭 카드에 가려져서 요소로 얹는다.
morph 는 남는 자식을 지우므로 화면을 그릴 때마다 markScroll 이 다시 붙인다. */
/* 첫 자식이므로 top:0 으로 붙인다. bottom:0 으로 두면 제자리(맨 위)에 그대로 있어
선이 보이는 자리 위쪽으로 뻗어 나가 화면에서 사라진다. */
.scbar{position:sticky;top:0;display:block;height:0;z-index:8;pointer-events:none}
/* --sc-pad·--sc-padr 는 칸의 위·오른쪽 안쪽여백이다. 조각이 앉는 자리가 여백을 뺀
안쪽이라 그냥 두면 그만큼 들어와 보인다 — 같은 만큼 끌어내 맨 오른쪽 끝에 붙인다.
자세한 것은 scUpdate. */
.scbar>i{position:absolute;right:calc(-1 * var(--sc-padr,0px));top:calc(-1 * var(--sc-pad,0px));width:1px;height:var(--sc-track,0px);background:var(--sc-rail);overflow:hidden}
/* 미끄러지는 표시 — 알맹이만 진하고 위아래로 긴 그라데이션이 뻗는다.
--sc-y 는 알맹이가 놓일 자리다. 띠를 그 자리에 가운데로 맞춰 걸므로, 맨 위에서는
윗꼬리가 선 밖으로 나가 잘리고 아랫꼬리만, 맨 아래에서는 그 반대가 된다.
자르는 일은 위의 overflow:hidden 이 한다. --sc-len 이 0 이면 안 보인다. */
.scbar>i::after{content:"";position:absolute;right:0;width:1px;
top:calc(var(--sc-y,0px) - var(--sc-len,0px) / 2);height:var(--sc-len,0px);
background:linear-gradient(to bottom,transparent,
var(--sc-mark) calc(50% - var(--sc-core) / 2),
var(--sc-mark) calc(50% + var(--sc-core) / 2),
transparent)}
/* 조사 대상: 이미지를 배경에, 왼쪽으로 갈수록 사라진다 */
.tgt{position:relative;overflow:hidden;min-height:84px;padding:12px 14px;align-items:flex-end;gap:0}
.tgt-bg{position:absolute;top:0;bottom:0;right:0;width:78%;-webkit-mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.8) 35%,transparent 100%);mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.8) 35%,transparent 100%)}
.tgt-bg img{width:100%;height:100%;object-fit:cover;object-position:center 25%;border-radius:0}
.tgt-ph{display:grid;height:100%;border:0;border-radius:0;place-items:start end;padding:8px 10px}
.tgt .tgt-ph span{display:block;font-size:10px}
.tgt-txt{position:relative}
.tgt b{font-size:17px}
.tgt:disabled .tgt-bg{opacity:.3;filter:grayscale(1)}
.tgt:disabled .tgt-ph span{visibility:hidden}
.tgt .tgt-ph{width:100%;height:100%;flex:none}
.tgt .tgt-ph span{font-size:10px;white-space:nowrap}
/* ═══ 넓게 깔리는 배경 이미지 ═══ */
.bgart{position:absolute;pointer-events:none;overflow:hidden}
.bgart img{width:100%;height:100%;object-fit:cover;object-position:center 25%;border-radius:0}
.bgart-ph{display:grid;width:100%;height:100%;border:0;border-radius:0;padding:10px 12px}
.bgart-ph span{font-size:10.5px;white-space:nowrap}
.bg-left{left:0;top:0;bottom:0;width:46%} /* 꽉 찬 이미지 (그라데이션 없음) */
.bg-left::after{content:'';position:absolute;right:0;top:0;bottom:0;width:26px;background:linear-gradient(to right,transparent,var(--fill))}
.bg-left .bgart-ph{place-items:center start}
.bg-top{left:0;right:0;top:0;height:260px;-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent 100%);mask-image:linear-gradient(to bottom,#000 40%,transparent 100%)}
.bg-top .bgart-ph{place-items:start center;padding-top:80px}
/* 투표 쪽지 */
.slip{overflow:hidden;min-height:78px;padding:10px 16px 10px 120px}
.slip .slip-n,.slip .mark{position:relative}
.slip.picked .bgart{opacity:1}
.slip:not(.picked) .bg-left img{filter:grayscale(.5)}
/* 쪽지가 끝에서 끝까지 하나의 면으로 보이게 한다.
예전에는 초상이 46% 만 덮고 쪽지 바탕이 흰색 6% 라, 이미지가 있는 데까지만
쪽지처럼 보이고 오른쪽 절반은 배경 사진에 묻혔다. 누르는 자리는 처음부터 버튼
전체였지만 그렇게 보이지 않아 이미지만 누르게 된다.
고치는 방법은 둘이었다. 초상을 100% 로 늘리면 끝까지 이어지지만 가로로 크게
잘려 얼굴이 덜 읽힌다. 그래서 초상은 읽히는 크기(58%)로 두고 쪽지의 면을
또렷하게 해 끝까지 잇는다. 오른쪽으로는 스며들게 해 이름과 「지목」이 그 위에서도
읽히게 한다(.slip-n 의 그늘이 그 몫이다) — .wd-place·.place.art 와 같은 방식이다. */
/* 네 변을 다 흘려 내린다. 오른쪽만 흐리면 위·아래·왼쪽이 용지 가장자리에 딱 붙어
초상이 잘린 사진처럼 보이고, 고른 표시의 테두리와도 부딪힌다. 위·아래·왼쪽은
얼굴을 씻지 않을 만큼만(7~8px) 흘린다. 마스크 둘을 곱해서 건다(intersect). */
.slip .bg-left{width:58%;
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 8px,#000 52%,rgba(0,0,0,.5) 78%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7px,#000 calc(100% - 7px),transparent 100%);
mask-image:linear-gradient(to right,transparent 0,#000 8px,#000 52%,rgba(0,0,0,.5) 78%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7px,#000 calc(100% - 7px),transparent 100%);
-webkit-mask-composite:source-in;mask-composite:intersect}
.slip .bg-left::after{display:none} /* 26px 짜리 하드컷은 마스크와 겹친다 */
.ballot .slip{background:color-mix(in srgb,var(--ink) 13%,transparent)}
/* 핸드북 사람들 */
.sheet .rel{display:block;position:relative;margin:0 -22px;padding:14px 22px 14px 118px;min-height:84px;overflow:hidden}
.rel-txt{position:relative}
/* 핸드북 나 · 작가면 미리보기 */
.me-head{position:relative;margin:-18px -22px 6px;padding:196px 22px 0;overflow:hidden}
.hb-card .me-head{margin:-26px -24px 6px;padding:196px 24px 0}
.me-head h4,.me-head .prose{position:relative}
/* 서재 · 작가면 요약 */
.book{position:relative;display:block;margin:0 -20px;padding:210px 20px 12px;overflow:hidden}
.book .bg-top{height:280px}
.book-meta{position:relative}
.cover-row{position:relative;padding:18px 0 18px 120px;min-height:110px;overflow:hidden;border-radius:8px}
.cover-row .bg-left{width:55%}
.cover-row>div:last-child{position:relative}
/* 증거 카드: 테두리 없이 */
.cgroup{border:0;background:none;padding:0}
.clue,.cgroup .clue,.sheet .clue{border:0;background:none;padding:12px 0 16px;margin:0;transform:none;border-bottom:1px solid var(--line);border-radius:0}
.clue:nth-of-type(even){transform:none}
.clue::before{content:none}
.clue:last-child{border-bottom:0}
.clue.fresh::after{content:none}
.clue-fold{margin-top:4px}
.bgart>img,.bgart>.ph{width:100%!important;height:100%!important;max-width:none;flex:none;border-radius:0}
.bgart .bgart-ph span{font-size:10.5px!important;display:block}
.slip .slip-n{flex:1}
.budget{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.budget b{color:var(--accent)}
.panel-cta{background:color-mix(in srgb,var(--ink) 6%,transparent)}
/* ═══ 셜록 홈즈 톤: 세리프 활자, 서류 표기, 흑백 + 노랑 ═══ */
:root{--serif:'Noto Serif KR','Nanum Myeongjo','AppleMyungjo',serif;--read:var(--serif);--fell:'IM Fell English SC','IM Fell English',var(--serif)}
.fell{font-family:var(--fell);font-weight:400;letter-spacing:.08em}
.brand{font-family:var(--serif);font-weight:900}
.brand-latin{display:block;font-size:11px;color:var(--accent);letter-spacing:.2em}
.prose,.sheet .prose,.clue .prose,.epilogue,.script,blockquote.prose{font-family:var(--serif);font-weight:400}
.h1,.phead .title,.verdict,.sheet-page h4,.hb-card h4,.clue .cn,.seat .nm,.tgt b,.slip-n,.listen-n,.hero-txt .h1,.myrole .h1,.inv-title,.book-meta h3,.proof-t,.cgroup h5,.place-h b,.rel-who,.sheet-who b,.sec,.feed .f-block span,h2{font-family:var(--serif)}
.h1,.phead .title,.verdict,.hero-txt .h1{font-weight:900;letter-spacing:-.02em}
.seat .nm,.tgt b,.slip-n,.listen-n,.clue .cn,.sheet-page h4{font-weight:700}
/* 장 머리: 라틴 장 번호 + 한글, 아래 이중선 */
.phead{border-bottom:0}
.phead::after{content:"";position:absolute;left:20px;right:20px;bottom:0;height:4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.phead .grp .fell{color:var(--accent);font-size:13px;letter-spacing:.14em}
.phead .title{font-size:27px}
/* 라틴 머리말 */
.lead-latin{display:block;font-size:13px;color:var(--accent);letter-spacing:.18em;margin-bottom:2px}
.lead-latin.center{text-align:center}
.verdict-latin{font-size:15px;letter-spacing:.3em;color:var(--ink-muted);margin-top:14px}
.verdict{font-size:36px;margin-top:2px}
.sheet-latin{display:block;font-size:11px;color:var(--accent);letter-spacing:.16em;line-height:1.2}
.exhibit{font-size:12px;color:var(--accent);letter-spacing:.18em;margin-bottom:6px}
.inv-k.fell{font-size:14px;letter-spacing:.3em;color:var(--accent)}
.stamp-sm{font-family:var(--fell);letter-spacing:.12em}
.stamp{font-family:var(--fell)}
/* 구분 장식: 가는 선 사이 마름모 */
.sec{font-weight:700;color:var(--ink);font-size:13px}
.sec::after{height:4px;background:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hsec h5{font-family:var(--serif);font-size:14px;border-bottom:0;padding-bottom:10px;position:relative}
.hsec h5::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hsec{border-bottom:0}
.hsec+.hsec{padding-top:6px}
.hsec+.hsec::before{content:"◆";display:block;text-align:center;font-size:8px;color:var(--accent);margin:-4px 0 14px;letter-spacing:0}
.clue+.clue,.clue-row+.clue,.clue+.clue-row{position:relative}
/* 읽는 글 */
.prose{font-size:17px;line-height:1.95}
.script{font-size:17.5px}
.epilogue{font-size:17.5px}
.culprit{font-family:var(--serif);font-size:15px}
blockquote.prose{font-style:normal}
/* 알림 카드 라벨 */
.notify .nk{font-size:11px}
.script,.epilogue{border:0;background:none;border-radius:0;padding:18px 0;position:relative}
.script::before,.epilogue::before,.script::after,.epilogue::after{content:"";position:absolute;left:0;right:0;height:4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.script::before,.epilogue::before{top:0}
.script::after,.epilogue::after{bottom:0}
.speakers{border:0;padding:0}
/* 라틴 머리말: 전부 대문자, 더 작게 */
.fell{text-transform:uppercase;font-family:'IM Fell English',var(--serif);letter-spacing:.16em}
.lead-latin{font-size:10px}
.phead .grp .fell{font-size:10px;letter-spacing:.18em}
.sheet-latin{font-size:9px}
.exhibit{font-size:9.5px}
.verdict-latin{font-size:11px;letter-spacing:.3em}
.inv-k.fell{font-size:11px}
.brand-latin{font-size:9px}
.stamp-sm{text-transform:uppercase;font-size:9px}
/* 배역 행: 참가자 이름은 오른쪽 */
.seat{justify-content:space-between;gap:12px}
.seat .nm{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.seat-right{position:relative;flex:none;display:flex;align-items:center;gap:6px;margin-left:auto;text-align:right}
.seat-who{font-size:14px;font-weight:700;color:var(--ink-muted)}
.seat-who.empty{font-weight:400;color:var(--ink-faint)}
.seat.me .seat-who{color:var(--accent);font-weight:700}
.seat.me .nm{color:var(--accent)}
.taken-k{font-size:10.5px;font-weight:700;color:var(--ink-muted);border:1px solid var(--line);border-radius:4px;padding:1px 6px}
.seat-txt{flex:1;min-width:0}
/* 이미 선택된 배역: 비활성 */
button.seat:disabled{opacity:1;cursor:not-allowed}
button.seat:disabled .seat-pic{opacity:.22;filter:grayscale(1)}
button.seat:disabled .nm,button.seat:disabled .in,button.seat:disabled .seat-who{color:var(--ink-faint)}
button.seat:disabled:hover{background:none}
button.seat:not(:disabled) .seat-pic{opacity:1}
div.seat:not(.taken) .seat-pic{opacity:.45}
/* 누를 수 없는 버튼은 버튼 모양을 버리고 상태 문구로 */
.big:disabled,.phone[data-theme] .big:disabled{background:none;border:0;box-shadow:none;color:var(--ink-faint);font-size:14px;font-weight:500;min-height:var(--tap);cursor:default;
display:flex;align-items:center;justify-content:center;gap:10px}
.big:disabled::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-faint);animation:waitDot 1.6s ease-in-out infinite}
@keyframes waitDot{0%,100%{opacity:.25}50%{opacity:1}}
/* ═══ 선 줄이기: 구분은 면(바탕 톤)과 여백으로 ═══ */
:root,.phone{--fill:color-mix(in srgb,var(--ink) 6%,transparent);--fill-2:color-mix(in srgb,var(--ink) 10%,transparent)}
/* 머리 · 아래 · 탭 */
.phead::after{content:none}
.phead{padding-bottom:14px}
.scr-foot,.scr-foot.has-nav{border-top:0}
.tabbar{border-top:0}
.tabbar.with-notify::before{border-top:0}
.hostrow,.sheet-host{border-top:0}
.hostrow button{border:0;background:var(--fill)}
.hostrow button.go{border:0;background:var(--fill-2);color:var(--ink);font-weight:600}
.hostk{border:0;padding:0}
.big.soft,.big.soft:not(:disabled){border:0;background:var(--fill)}
/* 섹션 제목 · 안내 */
.sec::after{content:none}
.sec{margin:26px 0 10px;color:var(--ink-muted)}
.guide{border-bottom:0;padding-bottom:0;margin-bottom:22px}
/* 조사 타일 · 장소 · 증거 */
.tgt{border:0;background:var(--fill)}
.tgt:not(:disabled):hover{border:0;background:var(--fill-2)}
.tgt:disabled{border:0;background:transparent}
.targets{gap:10px}
.ph,.seat-ph,.tgt-ph,.bgart-ph,.stage-ph,.hero-ph{border:0}
.ph-ui{border:0}
.place{border:0;background:var(--fill)}
.place.been{border:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.place-f button,.panel-cta button{border:0;background:var(--fill-2)}
.panel-cta.soft button{border:0}
.clue,.cgroup .clue,.sheet .clue{border-bottom:0;padding:14px 0 26px}
.clue-tag span{border:0;background:var(--fill);border-radius:4px;padding:2px 8px}
.clue-tag .only{border:0}
.cgroup h5{border-bottom:0;padding-bottom:2px}
.clue-row{border-bottom:0;background:var(--fill);border-radius:8px;padding:6px 12px;margin-bottom:6px}
.clue .reveal{border:0;background:var(--fill-2)}
/* 목록 · 행 */
.seat,button.seat{border-bottom:0;margin-bottom:4px}
.speakers li{border-bottom:0;border-radius:8px;padding:10px 12px;margin-bottom:4px}
.speakers li.now{background:var(--fill)}
.feed li,.feed .f-block{border-bottom:0}
.sheet .rel{border-bottom:0;margin-bottom:4px}
.hsec h5::after{content:none}
.hsec h5{padding-bottom:4px}
.script,.epilogue{padding:18px 16px;background:var(--fill);border-radius:10px}
.script::before,.epilogue::before,.script::after,.epilogue::after{content:none}
/* 시트 · 알림 · 딱지 */
.sheet{border-top:0}
.sheet-top{border-bottom:0}
.sheet-tools button{border:0;background:var(--fill)}
.notify{border:0;background:var(--grain),var(--surface-raised)}
.notify>*+*{border-top:0}
.notify .nk{border:0;background:var(--fill-2)}
.badge,.taken-k{border:0;background:var(--fill-2)}
.slip{border:0;background:var(--fill)}
.slip.picked{border:0;box-shadow:inset 0 0 0 1.5px var(--accent)}
.confirm{border:0}
.confirm-row button{border:0;background:var(--fill)}
.confirm-row .ok{background:var(--accent)}
.toast,.sheet-notice{border:0;background:var(--surface-raised)}
.toast::before,.sheet-notice::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin:0 8px 1px 0}
.toast.bad::before{background:var(--danger)}
.plabel .tools button{border:0}
/* 작가면 · 서버 */
.panel,.editor{border:0}
.msgs li{border-top:0;padding:6px 0}
.order li{border-bottom:0}
.grid th,.grid td{border-bottom:0}
.grid thead th{border-bottom:1px solid var(--line)}
table.t th,table.t td{border-bottom:0}
table.t th{border-bottom:1px solid var(--line)}
.chip{border:0;background:var(--fill)}
.chip.on{border:0;background:var(--fill-2)}
.srv .panel h2{box-shadow:none}
.proof-head{border-bottom:1px solid var(--line)}
.editor textarea{background:none}
.gutter{background:var(--fill)}
pre.json{background:var(--surface-raised)}
/* ═══ 레이아웃: 아래 영역을 띄우지 않고 쌓는다 ═══
본문(scr-body)은 남은 높이만 차지하고 그 안에서만 스크롤한다.
→ 방장처럼 버튼이 많아도 본문이 가려지지 않고, 스크롤 막대가 탭 아래로 삐져나가지 않는다. */
.scr-body,.scr-body.has-nav{flex:1 1 auto;min-height:0;padding-bottom:24px}
.scr-foot,.scr-foot.has-nav{position:relative;left:auto;right:auto;bottom:auto;flex:none;background:var(--grain),var(--surface);padding:12px 16px 12px;z-index:2}
.notify{position:relative;left:auto;right:auto;bottom:auto;flex:none;margin:0 10px 6px;z-index:2}
.tabbar{position:relative;left:auto;right:auto;bottom:auto;flex:none;z-index:7}
.tabbar.with-notify::before{content:none}
.scr-foot+.notify{margin-top:0}
/* ═══ 수집 차례 ═══ */
.turnbox{display:flex;flex-direction:column;gap:2px;padding:14px 16px;margin:0 0 10px;border-radius:12px;background:var(--fill)}
.turnbox b{font-family:var(--serif);font-size:20px;font-weight:700}
.turnbox>span:last-child,.turnbox .tb-txt>span:last-child{font-size:13px;color:var(--ink-muted)}
/* 남은 조사 횟수를 배너 오른쪽에 붙인다 — 따로 한 줄을 쓰던 것을 접었다 */
.turnbox:has(.picks){flex-direction:row;align-items:center;gap:12px}
.tb-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.turnbox .picks{flex:none;flex-direction:column;align-items:flex-end;gap:3px;margin:0;text-align:right}
.turnbox .picks .picks-k{font-size:11px;letter-spacing:.06em;color:var(--ink-muted);white-space:nowrap}
.turnbox .picks .picks-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end;max-width:112px}
.turnbox .picks i{width:11px;height:11px}
.turnbox .picks .picks-n{font-size:13.5px;margin-left:-2px}
.turnbox .picks .only-picks{margin:1px 0 0}
.turnbox .picks .only-picks i{width:8px;height:8px}
.turnbox.mine{background:color-mix(in srgb,var(--accent) 16%,var(--surface))}
.turnbox.mine b{color:var(--accent)}
.turnorder{list-style:none;display:flex;gap:4px;padding:0;margin:0 0 16px;flex-wrap:wrap;counter-reset:t}
.turnorder li{counter-increment:t;font-size:12px;padding:4px 9px;border-radius:99px;background:var(--fill);color:var(--ink-muted)}
.turnorder li::before{content:counter(t) " ";color:var(--ink-faint)}
.turnorder li.past{opacity:.4;text-decoration:line-through}
.turnorder li.now{background:var(--accent);color:#1A1A1A;font-weight:700}
.turnorder li.now::before{color:#1A1A1A}
.turnorder li.me:not(.now){color:var(--accent);font-weight:700}
.targets.waiting .tgt:disabled .tgt-bg{opacity:.55;filter:none}
.targets.waiting .tgt:disabled .tgt-ph span{visibility:visible}
.targets.waiting .tgt:disabled b{color:var(--ink-muted)}
/* 증거: 소지품 표시와 행동 */
.clue-tag .own{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.clue-tag .lock{background:var(--fill-2);color:var(--ink)}
.clue-acts{display:flex;gap:8px;margin-top:12px}
.clue-acts .reveal{flex:1;margin:0}
/* 교환 */
.panel-cta button:disabled{opacity:.4}
.tradeline{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:10px;background:var(--fill);margin-bottom:8px}
.tradeline button{flex:none;border:0;background:var(--fill-2);border-radius:8px;min-height:var(--tap);padding:0 10px;font-size:12.5px}
.tl-k{font-size:13px;font-weight:600;margin-bottom:4px}
.tl-row{font-size:13px;color:var(--ink-muted);line-height:1.6}
.tl-row span{display:inline-block;min-width:44px;font-size:11px;font-weight:700;margin-right:6px}
.tl-row .give{color:var(--ink-faint)}
.tl-row .take{color:var(--accent)}
.partners{display:flex;gap:6px;flex-wrap:wrap}
.partners button{border:0;background:var(--fill);border-radius:10px;padding:8px 12px;text-align:left;font-size:14px;font-family:var(--serif);font-weight:700;min-height:48px}
.partners button small{display:block;font-family:var(--ui);font-weight:400;font-size:11px;color:var(--ink-muted)}
.partners button.on{background:color-mix(in srgb,var(--accent) 18%,var(--surface));color:var(--accent)}
.partners button:disabled{opacity:.35}
.pick{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;border:0;background:var(--fill);border-radius:10px;padding:8px 12px;margin-bottom:6px;text-align:left;font-size:14.5px}
.pick i{flex:none;width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--ink-faint)}
.pick.on{background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.pick.on i{background:var(--accent);box-shadow:none}
.pick small{display:block;font-size:11px;color:var(--ink-muted)}
.pick:disabled{opacity:.4}
.trade-send{display:flex;gap:8px;margin-top:22px}
.trade-send .big{flex:1}
.trade-send .big:last-child{flex:2}
/* 받은 교환 신청: 화면 위에 고정 */
.incoming{position:absolute;left:12px;right:12px;top:12px;z-index:25;padding:14px 16px 16px;border-radius:12px;background:var(--grain),var(--surface-raised)}
.incoming.anim{animation:dropIn .3s cubic-bezier(.2,.8,.2,1)} /* 처음 뜰 때만 내려온다 */
/* 건네주기 — 화면 가운데. 그림은 늘 쓰던 방식으로 위에서부터 꽉 채우고
아래로 갈수록 지워 글자와 겹치는 자리에서 판에 녹아들게 한다.
다만 스킨 틀은 9분할 border-image, 곧 「테두리」다. 테두리는 내용보다 먼저
그려지므로 꽉 찬 그림이 모서리 장식을 덮어 버린다. 그래서 같은 틀을 ::after 로
한 겹 더 얹어 그림 위로 올린다 — 가운데는 비우려고 fill 을 뺐다.
스킨이 없으면 변수도 없어 border-image 가 통째로 무효가 되고 아무것도 안 그려진다. */
/* --hp/--hpt 는 그 창이 쓰는 안여백이다. 그림은 이만큼 음수 margin 으로 되밀어
테두리까지 꽉 찬다. absolute 로는 안 된다 — 절대 배치의 기준은 padding box 라
left:0/top:0 이 안여백 안쪽에 붙어 버린다(처음에 그렇게 짰다가 117px 밀렸다). */
.confirm.hand{--hp:20px;--hpt:22px;text-align:center;overflow:hidden auto}
[data-skin~="PN-05"] .confirm.hand{--hp:24px;--hpt:26px}
.incoming.hand{--hp:16px;--hpt:14px;text-align:center;overflow:hidden;
top:50%;transform:translateY(-50%);left:22px;right:22px}
.incoming.hand.anim{animation:handIn .32s cubic-bezier(.2,.8,.2,1)}
@keyframes handIn{from{opacity:0;transform:translateY(calc(-50% + 14px)) scale(.96)}}
.incoming.hand .in-row{margin-top:18px}
/* 아래로 지우는 것만으로는 모자랐다. 9분할 틀은 「테두리」라 내용보다 먼저 그려지니
꽉 찬 그림이 모서리 장식을 덮는다. 위·좌·우도 함께 지워 그림이 틀에 스며들게 한다 —
그러면 그림 밑에 깔린 틀(장식과 테두리 선)이 그대로 비쳐 보인다.
mask-composite 를 모르는 브라우저는 세 겹이 합집합이 되어 예전처럼 꽉 차기만 한다. */
.hand-art{height:186px;overflow:hidden;pointer-events:none;
margin:calc(var(--hpt) * -1) calc(var(--hp) * -1) -30px;
-webkit-mask-image:
linear-gradient(to bottom,#000 46%,rgba(0,0,0,.45) 74%,transparent 95%),
linear-gradient(to right,transparent 2px,#000 56px,#000 calc(100% - 56px),transparent calc(100% - 2px)),
linear-gradient(to bottom,transparent 2px,#000 52px);
-webkit-mask-composite:source-in,source-in;
mask-image:
linear-gradient(to bottom,#000 46%,rgba(0,0,0,.45) 74%,transparent 95%),
linear-gradient(to right,transparent 2px,#000 56px,#000 calc(100% - 56px),transparent calc(100% - 2px)),
linear-gradient(to bottom,transparent 2px,#000 52px);
mask-composite:intersect,intersect}
.hand-art img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
.hand-art.dummy img{object-position:center 46%} /* 더미 아트는 가운데 카드가 살짝 아래에 있다 */
.confirm.hand>*,.incoming.hand>*{position:relative} /* 글자는 그림 위로 */
/* 틀을 ::after 로 한 겹 더 얹어 봤지만 그것이 「테두리에 검은 면」의 정체였다.
/* 머리 칩은 그림이 다 지워진 자리에 놓는다 */
.confirm.hand .confirm-k,.incoming.hand .confirm-k{display:inline-block;margin-bottom:2px}
.incoming.hand>b{font-size:17px;margin:6px 0 4px;line-height:1.45}
.incoming.hand .nc-sub{margin:0}
/* 아래 단추들: 사람과 그만두기를 같은 폭·같은 키로 맞춘다. 사람이 많으면 줄을 바꾼다. */
.confirm.hand p{margin-bottom:16px}
/* 사람을 고르는 것이 이 창의 본 동작이다 — 주색(테를 두르고 속을 물들인다).
그만두기는 빠져나가는 길이니 보조색으로 한 단 낮춘다. */
.confirm.hand .partners{gap:8px}
.confirm.hand .partners button{flex:1 1 84px;min-width:0;text-align:center;padding:9px 6px;min-height:58px;
background:color-mix(in srgb,var(--accent) 15%,var(--fill));
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 48%,transparent)}
.confirm.hand .partners button small{color:var(--ink-muted)} /* 금색 바탕에 금색 글씨는 1.66 이었다 */
.confirm.hand .partners button:active{background:var(--accent);color:#1A1A1A;box-shadow:none}
.confirm.hand .partners button:active small{color:rgba(26,26,26,.7)}
.confirm.hand .confirm-row{margin-top:10px}
.confirm.hand .confirm-row button{min-height:var(--tap);font-size:14px;color:var(--ink-muted);background:none;
box-shadow:inset 0 0 0 1px var(--line)}
@keyframes dropIn{from{opacity:0;transform:translateY(-16px)}}
.incoming>b{display:block;font-family:var(--serif);font-size:16px;margin:2px 0 6px}
.in-row{display:flex;gap:8px;margin-top:10px}
.in-row button{flex:1;min-height:var(--tap);border:0;border-radius:10px;background:var(--fill-2);font-size:14px}
.in-row .ok{flex:1.6;background:var(--accent);color:#1A1A1A;font-weight:700}
.feed .f-trade span{color:var(--ink)}
/* 노랑을 바탕에 섞지 않는다 (섞으면 갈색이 된다) */
.turnbox.mine{background:var(--fill-2)}
.partners button.on{background:var(--fill-2)}
.pick.on{background:var(--fill-2)}
.clue-tag .own{background:var(--fill-2)}
table.t tr.pick td{background:var(--fill-2)}
/* ═══ 내 소지품 다이얼 ═══ */
.dial{position:relative;height:300px;margin:4px -22px 0;overflow:hidden;perspective:700px;touch-action:pan-y;user-select:none;outline:none;cursor:grab}
.dial:active{cursor:grabbing}
.dcard{position:absolute;top:0;left:50%;height:284px;width:var(--S);padding:0;border:0;border-radius:10px;background:var(--fill-2);color:var(--ink);overflow:hidden;
transition:transform .26s cubic-bezier(.2,.9,.25,1),width .26s cubic-bezier(.2,.9,.25,1),opacity .2s,background .2s;transform-style:preserve-3d;will-change:transform}
.dcard.on{width:var(--W);background:var(--fill)}
.dc-strip{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:16px 0;writing-mode:vertical-rl;text-orientation:upright;
font-family:var(--serif);font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--ink-muted);white-space:nowrap;overflow:hidden;transition:opacity .15s}
.dc-full{position:absolute;inset:0;display:flex;flex-direction:column;padding:14px 16px 16px;opacity:0;transition:opacity .15s}
.dcard.on .dc-strip{opacity:0}
.dcard.on .dc-full{opacity:1;transition-delay:.08s}
.dc-head{display:flex;align-items:center;gap:8px;min-width:0;margin-bottom:12px;text-align:left}
.dc-where{flex:none;font-size:13px;color:var(--ink-muted)}
.dc-sep{flex:none;width:1px;height:14px;background:var(--ink-faint)}
.dc-head b{font-family:var(--serif);font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-img{flex:1;min-height:0;border-radius:6px;overflow:hidden;background:#1E1E1E;display:block}
.dc-img img{width:100%;height:100%;object-fit:cover}
.dc-ph{height:100%;background:#1E1E1E;color:#CFCFCF;place-items:center}
.dc-ph span{font-size:14px;letter-spacing:.04em}
.dial-count{text-align:center;font-size:12px;color:var(--ink-faint);margin:8px 0 10px;font-variant-numeric:tabular-nums}
.dial-now{color:var(--accent);font-weight:700}
.dial-detail{padding:14px 16px;border-radius:10px;background:var(--fill);margin-bottom:10px}
.dial-detail .prose{margin-top:10px;font-size:calc(var(--fsz,17px) - 1px)}
@media (prefers-reduced-motion: reduce){.dcard{transition:none}}
.dcard{background:color-mix(in srgb,var(--ink) 13%,var(--surface))}
.dcard.on{background:color-mix(in srgb,var(--ink) 7%,var(--surface))}
.dcard.far .dc-strip{opacity:0}
/* ═══ 책장 다이얼 다듬기 ═══ */
.shelf{position:relative;margin:4px -22px 0;padding:18px 0 22px;overflow:hidden}
.shelf-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.ph-bg{background:repeating-linear-gradient(-45deg,transparent 0 9px,color-mix(in srgb,var(--ink) 5%,transparent) 9px 10px),color-mix(in srgb,var(--ink) 3%,transparent)}
.ph-code{position:absolute;right:10px;top:8px;font-size:9.5px;font-weight:700;letter-spacing:.06em;color:color-mix(in srgb,var(--ink) 38%,transparent);white-space:nowrap}
.shelf-bg .ph-code::after{content:" 책장 배경 이미지 영역"}
.shelf::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:10px;background:color-mix(in srgb,var(--ink) 9%,var(--surface))}
.dial{margin:0;height:300px;position:relative;z-index:1}
.dcard{height:292px;border-radius:6px 6px 3px 3px;background:color-mix(in srgb,var(--ink) 14%,var(--surface))}
.dcard.on{background:color-mix(in srgb,var(--ink) 9%,var(--surface));border-radius:8px}
.dc-spine,.dc-cover{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .15s}
.dc-cover{opacity:0}
.dcard.on .dc-spine{opacity:0}
.dcard.on .dc-cover{opacity:1}
.dc-spine .ph-code,.dc-cover .ph-code{top:auto;bottom:6px;right:50%;transform:translateX(50%);font-size:8px}
.dc-cover .ph-code{right:12px;transform:none;bottom:8px}
.dc-spine .ph-code::after,.dc-cover .ph-code::after{content:none}
.dc-strip{font-size:14px;padding:18px 0 26px;letter-spacing:.04em;z-index:1}
.dcard.far .dc-strip{opacity:0}
.dc-full{padding:14px 14px 26px;z-index:1}
.dc-head{align-items:flex-start;gap:8px;margin-bottom:12px}
.dc-where{padding-top:3px;font-size:12px}
.dc-sep{margin-top:5px}
.dc-head b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:17px;line-height:1.35}
.dc-img{border-radius:4px}
.dial-count{margin:4px 0 12px}
/* 가운데 카드 상세 */
.dial-detail{padding:16px 18px 18px;border-radius:12px;background:var(--fill)}
.dd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.dd-latin{display:block;font-size:9.5px;color:var(--accent)}
.dd-head b{display:block;font-family:var(--serif);font-size:20px;line-height:1.3;margin:2px 0 4px}
.dd-meta{display:block;font-size:12px;color:var(--ink-muted)}
.dd-state{flex:none;font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px;background:var(--fill-2);color:var(--ink-muted)}
.dd-state.open{color:var(--accent)}
.dd-body{margin:14px 0 0;font-size:calc(var(--fsz,17px) - 1px)}
.dd-acts{display:flex;gap:8px;margin-top:16px}
.dd-acts button{flex:1;min-height:46px;border:0;border-radius:10px;background:var(--fill-2);color:var(--ink);font-size:14px;font-weight:600}
.dd-acts button:last-child{background:var(--accent);color:#1A1A1A}
/* 책등 글자 가운데 */
.dc-strip{align-items:center;justify-content:center;text-align:center;padding:16px 0 26px}
/* 공개한 증거 안내 */
.dd-note{margin:14px 0 0}
/* 시간 추가: 분 다이얼 */
.mdial{position:relative;height:88px;margin:6px -20px 10px;perspective:500px;overflow:hidden;touch-action:none;cursor:grab;outline:none;user-select:none}
.mdial::before{content:"";position:absolute;left:50%;top:10px;width:64px;height:68px;margin-left:-32px;border-radius:12px;background:var(--fill-2)}
.mnum{position:absolute;left:50%;top:14px;width:44px;text-align:center;font:700 44px/60px var(--ui);font-variant-numeric:tabular-nums;color:var(--ink-muted);
transition:transform .2s cubic-bezier(.2,.9,.25,1),opacity .2s,color .2s}
.mnum.on{color:var(--accent)}
.munit{position:absolute;left:calc(50% + 34px);top:44px;font-size:13px;font-weight:700;color:var(--accent)}
.cf-line{display:block;text-align:center;font-size:15px;color:var(--ink)}
.cf-sub{display:block;text-align:center;font-size:12.5px;color:var(--ink-muted);margin-top:4px}
.mdial{height:104px}
.mdial::before{width:76px;height:64px;margin-left:-38px;top:8px}
.mnum{width:60px;top:10px;font-size:38px;line-height:60px}
.munit{left:50%;top:80px;transform:translateX(-50%);font-size:12px}
.turnbox em{font-style:normal;color:var(--accent);font-weight:700}
/* ═══ 옵션 ═══ */
.optbtn{position:absolute;top:12px;right:12px;z-index:9;width:var(--tap);height:var(--tap);border:0;border-radius:10px;
background:color-mix(in srgb,var(--surface) 80%,transparent);box-shadow:0 0 0 1px var(--line);
-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;gap:3px}
.optbtn i{width:4px;height:4px;border-radius:50%;background:var(--ink)}
.phead .grp{padding-right:44px}
.phead .row .timer{margin-right:0}
.opts{top:auto;bottom:12px;transform:none;padding:14px 12px 10px;animation:dropUp .22s cubic-bezier(.2,.8,.2,1)}
@keyframes dropUp{from{opacity:0;transform:translateY(20px)}}
.opts-head{display:flex;justify-content:space-between;align-items:center;padding:0 6px 8px}
.opts-head button{border:0;background:var(--fill);border-radius:8px;min-height:var(--tap);min-width:var(--tap);padding:0 12px;font-size:13px}
.optrow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:58px;border:0;background:none;border-radius:10px;padding:8px 10px;text-align:left}
.optrow:hover{background:var(--fill)}
.optrow b{display:block;font-size:15px}
.optrow small{display:block;font-size:12px;color:var(--ink-muted)}
.optrow.danger-t b{color:var(--danger)}
.sw{flex:none;position:relative;width:44px;height:26px;border-radius:13px;background:var(--fill-2);transition:background .2s}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--ink-muted);transition:transform .2s,background .2s}
.sw.on{background:var(--accent)}
.sw.on::after{transform:translateX(18px);background:#FFF}
/* 소리·진동·전체 화면 — 한 줄에 스위치 셋. 이름이 곧 설명이다 */
.optrow3{display:flex;gap:6px;padding:2px 0 10px;border-bottom:1px solid var(--line)}
.optrow3 .tog{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:var(--tap);padding:10px 4px;border:1px solid var(--line);border-radius:10px;background:none;color:var(--ink);font-size:13px;font-weight:600}
.optrow3 .tog[aria-checked="true"]{border-color:var(--accent)}
/* 방장의 참가자 목록 — 한 줄에 사람 하나, 넘기기·풀기 */
.people .person{display:flex;align-items:center;gap:6px;padding:8px 0;border-bottom:1px dotted var(--line)}
.people .person>span{flex:1;min-width:0}
.people .person b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.people .person small{display:block;font-size:11.5px;color:var(--ink-muted)}
.people .person button{flex:none;min-height:var(--tap);padding:0 10px;border:1px solid var(--line);border-radius:8px;background:none;color:var(--ink);font-size:12.5px}
.people .hint{margin:10px 0 0}
.leave-ask{padding:12px 10px 4px}
.leave-ask b{display:block;font-size:15px;color:var(--danger)}
.leave-ask span{display:block;font-size:12.5px;color:var(--ink-muted);margin-top:2px}
.in-row .danger{background:var(--danger);color:#FFF;font-weight:700}
/* 글자 크게 */
.phone.large .scr-body,.phone.large .sheet-body,.phone.large .phead,.phone.large .notify,.phone.large .incoming{zoom:1.15}
.optbtn{z-index:4}
.fell .lnum{font-family:var(--serif);font-weight:600;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.04em;font-size:1.08em}
.fell .lnum{margin:0 .1em}
/* 라틴 머리말: Pretendard, 대문자, 작게 */
:root{--fell:var(--ui)}
.fell,.stamp,.stamp-sm{font-family:var(--ui);font-weight:600;letter-spacing:.14em}
.fell .lnum{font-family:inherit;font-weight:inherit;font-size:1em;margin:0;letter-spacing:inherit}
/* 글자 크기: 기본(작게)을 더 줄이고, 크게는 한 단계 위 */
/* 손가락 표적: 배율(--z)을 되돌린 44px. 버튼마다 숫자를 올리는 대신 이것을 쓴다 */
.phone{--z:.88;--tap:calc(44px / var(--z))}
.phone.large{--z:1.04;--tap:calc(44px / var(--z))}
.phone .scr-body,.phone .sheet-body,.phone .phead,.phone .notify,.phone .incoming,.phone .sheet-top,.phone .confirm{zoom:var(--z)}
.phone.large .scr-body,.phone.large .sheet-body,.phone.large .phead,.phone.large .notify,.phone.large .incoming{zoom:var(--z)}
.prose{font-size:15.5px;line-height:1.85}
.script,.epilogue{font-size:16px}
.sheet.fs0{--fsz:14px}.sheet.fs1{--fsz:15.5px}.sheet.fs2{--fsz:17px}
.h1{font-size:23px}
.phead .title{font-size:25px}
/* 헤더 안의 옵션 버튼 */
.phead .grp{padding-right:0;align-items:center}
.grp-r{display:flex;align-items:center;gap:8px}
.optbtn.inline{position:static;width:var(--tap);height:var(--tap);border-radius:8px}
.phead .row{margin-top:4px}
/* 가운데 큰 타이머 */
.bigtimer{display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 0 24px}
.bt-k{font-size:12.5px;color:var(--ink-muted)}
.timer.tbig{font-size:64px;font-weight:700;line-height:1.05;letter-spacing:-.02em;color:var(--ink);padding:0;min-height:68px}
.timer.tbig.hot{font-size:72px;color:var(--accent)}
.timer.tbig.over{font-size:30px;color:var(--ink-faint);min-height:68px;display:flex;align-items:center}
.bt-bar{display:block;width:62%;height:4px;border-radius:2px;background:var(--fill-2);overflow:hidden;margin-top:8px}
.bt-bar i{display:block;height:100%;width:100%;background:var(--accent);border-radius:2px;transition:width .25s linear}
.listen+.bigtimer,.stage+.bigtimer{padding-top:6px}
/* 종료 */
.closed{padding-top:60px}
.summary{margin:28px 0 20px;padding:6px 16px;border-radius:12px;background:var(--fill)}
.summary div{display:flex;justify-content:space-between;padding:12px 0}
.summary dt{color:var(--ink-muted);font-size:14px}
.summary dd{margin:0;font-family:var(--serif);font-weight:700;font-size:16px}
.confirm-row .ok.danger{background:var(--danger);color:#FFF}
/* 큰 타이머가 함께 보이도록 초상 배경을 조금 낮춘다 */
.listen,.stage,.stage.mine{padding-top:196px}
.stage-media{height:270px}
.stage-ph{padding-top:90px}
.bigtimer{padding:18px 0 16px}
/* 전체 화면 권유 */
.fsask{position:absolute;left:12px;right:12px;bottom:140px;z-index:26;padding:14px 16px;border-radius:12px;background:var(--grain),var(--surface-raised);animation:dropUp .25s cubic-bezier(.2,.8,.2,1)}
.fsask b{display:block;font-size:15px}
.fsask>span{display:block;font-size:12.5px;color:var(--ink-muted);margin-top:2px}
/* 전체 화면일 때 폰 틀을 화면에 맞춘다 (시험판) */
.phone:fullscreen{max-width:none;height:100%;border-radius:0;box-shadow:none}
/* 기기 하단 제스처 영역 피하기 */
.tabbar{padding-bottom:max(4px,env(safe-area-inset-bottom));height:calc(62px + env(safe-area-inset-bottom))}
/* ═══ 서재 탭 · 엔딩 크레딧 ═══ */
.libtabs{display:flex;gap:4px;margin:4px 0 18px}
/* 서재 맨 위 계정 줄 — 그냥 맨 위에 둔다. 배경을 덮지 않는다.
아래로 밀면 ⋯ 옵션 단추가 「진행 중인 사건」 노란 단추 위에 올라탄다 */
.lib-top{margin:0 0 2px;padding-right:46px} /* ⋯ 단추 자리를 비운다 */
.lib-top .lede,.lib-top .login-nudge{margin:0}
.lib-top + .resume{margin-top:24px} /* ⋯ 단추(아래 y48) 밑으로 내려보낸다 */
.libtabs button{flex:1;min-height:var(--tap);border:0;background:none;border-bottom:2.5px solid transparent;color:var(--ink-muted);font-size:14px}
.libtabs button[aria-selected="true"]{color:var(--ink);font-weight:700;border-bottom-color:var(--accent)}
.libtabs span{font-size:12px;color:var(--accent);margin-left:2px}
/* 작품 리스트 — 보기 필터와 정렬 */
.libbar{margin:-6px 0 4px}
/* 칩은 줄을 바꾼다. 가로로 흘려보내면 스크롤바를 숨겨 둔 폰에서는 잘린 칩이 있는지
알 길이 없다 — 작품이 하나뿐이던 체험판에서는 이 줄 자체가 안 나와 여태 몰랐다. */
.lfrow{display:flex;align-items:flex-start;gap:6px}
.libfilter{display:flex;flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;gap:6px;padding-bottom:2px}
.libfilter::-webkit-scrollbar{display:none}
.libfilter.open{flex-wrap:wrap;overflow-x:visible}
/* 오른쪽 끝에 세워 두는 펼치기 단추. 스크롤바를 숨겨 둔 폰에서는 옆에 칩이 더 있는지
알 길이 없어서, 이 단추가 「아래로 펼쳐 한눈에 보기」를 맡는다. */
.lf-more{flex:none;min-height:var(--tap);min-width:var(--tap);padding:0;border:1px solid var(--line);border-radius:99px;background:none;display:grid;place-items:center}
.lf-more i{display:block;width:8px;height:8px;border-right:1.8px solid var(--ink-muted);border-bottom:1.8px solid var(--ink-muted);transform:translateY(-2px) rotate(45deg);transition:transform .18s}
.lf-more.on{border-color:var(--accent)}
.lf-more.on i{border-color:var(--accent);transform:translateY(1px) rotate(225deg)}
.libfilter .lf{flex:none;display:inline-flex;align-items:center;gap:5px;min-height:var(--tap);padding:0 11px;border:1px solid var(--line);
border-radius:99px;background:none;font-size:12.5px;color:var(--ink-muted);white-space:nowrap}
.libfilter .lf span{font:600 10.5px/1 var(--mono);color:var(--ink-faint)}
.libfilter .lf.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.libfilter .lf.on span{color:var(--on-accent);opacity:.75}
.libsort{display:flex;align-items:center;gap:2px;margin-top:9px;flex-wrap:wrap}
.libsort>span{font-size:11px;color:var(--ink-muted);margin-right:5px;letter-spacing:.04em}
.libsort .ls{min-height:var(--tap);min-width:var(--tap);padding:0 7px;border:0;background:none;font-size:12px;color:var(--ink-muted)}
.libsort .ls.on{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.libfilter .lf-gap{flex:none;width:1px;align-self:stretch;margin:5px 4px;background:var(--line)}
.libfilter .lf.g{border-style:dashed}
.libfilter .lf.g.on{border-style:solid}
/* 몇 열로 볼지 — 단추는 하나뿐이고 누를 때마다 1 → 2 → 3 → 1 로 돈다 */
.lcols{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 10px;
border:1px solid var(--line);border-radius:99px;background:none;font-size:12px;color:var(--ink-muted)}
.lcols .ci{display:inline-flex;gap:2px;width:14px;height:11px}
.lcols .ci s{flex:1;background:currentColor;border-radius:1px;text-decoration:none;opacity:.8}
/* 두 열·세 열 — 서가에 꽂은 책 모양으로 줄인다. 표지와 제목, 한 줄뿐이고
빌리고 여는 단추는 「자세히 보기」에 있다(카드를 누르면 그리로 간다). */
.booklist.lib-g2,.booklist.lib-g3{display:grid;align-items:start;margin-top:12px}
.lib-g2{grid-template-columns:repeat(2,1fr);gap:20px 12px}
.lib-g3{grid-template-columns:repeat(3,1fr);gap:16px 10px}
.lib-g2>*:not(.gcard),.lib-g3>*:not(.gcard){grid-column:1/-1}
.gcard{display:block;width:100%;padding:0;border:0;background:none;text-align:left;color:inherit;font:inherit}
.gcover{display:block;position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:2px 4px 4px 2px;background:var(--fill-2);
box-shadow:0 8px 20px rgba(0,0,0,.45),inset -7px 0 14px -9px rgba(0,0,0,.95),inset 2px 0 0 rgba(255,255,255,.08)}
.gcover .g-art{position:absolute;inset:0;width:100%;height:100%}
.gcover .g-art img{object-position:center 30%}
/* 제목이 한 줄인 책과 두 줄인 책이 섞이면 아래 글이 들쭉날쭉해진다. 두 줄을 늘 비운다 */
.gcard b{min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
font-family:var(--serif);font-weight:700;color:var(--ink);line-height:1.3}
.gcard .gmeta{display:block;color:var(--ink-muted)}
.lib-g2 .gcard b{font-size:14.5px;margin:9px 0 2px}
.lib-g2 .gcard .gmeta{font-size:12px}
.lib-g3 .gcard b{font-size:12px;margin:7px 0 1px}
.lib-g3 .gcard .gmeta{font-size:10.5px}
.gbadge{position:absolute;left:5px;top:5px;font:700 9.5px/1 var(--ui);letter-spacing:.02em;padding:3px 5px;
border-radius:3px;background:rgba(0,0,0,.72);color:#F2EEE8}
.gbadge.own{background:var(--accent);color:var(--on-accent)}
/* 돌아가는 길 — 서재로 · 처음으로. 막혔다고 느끼는 자리가 여기라 눈에 띄어야 한다.
.big.soft 는 바탕에 묻혀 있어서 「나갈 데가 없다」로 읽혔다 */
.phone .big.soft[data-a="lib"],
.phone .big.soft[data-a="go-lib"],
.phone .big.soft[data-a="work-back"],
.phone .big.soft[data-a="rent-back"],
.phone .big.soft[data-a="leave"],
.phone .big.soft[data-a="back-idle"],
.phone[data-theme] .big.soft[data-a="lib"],
.phone[data-theme] .big.soft[data-a="go-lib"],
.phone[data-theme] .big.soft[data-a="work-back"],
.phone[data-theme] .big.soft[data-a="rent-back"],
.phone[data-theme] .big.soft[data-a="leave"],
.phone[data-theme] .big.soft[data-a="back-idle"]{
background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent);border-color:transparent}
/* 목록 접기 — 손가락에 닿는 크기를 줄 전체로 준다 */
.my-more{list-style:none;padding:0}
.my-more .linkbtn{width:100%;min-height:var(--tap);text-align:center;font-size:13.5px}
/* 가입 동의 — 필수 둘. 손가락에 닿는 크기를 줄 전체로 준다 */
.agrees{margin:14px 0 2px;display:flex;flex-direction:column;gap:2px}
.agree{display:flex;align-items:flex-start;gap:10px;min-height:var(--tap);padding:6px 2px;font-size:13px;line-height:1.5;color:var(--ink)}
.agree input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent)}
.agree b{font-weight:700;color:var(--accent);font-size:12px}
.agree.bad{color:var(--danger)}
.agree.bad input{outline:2px solid var(--danger);outline-offset:2px}
/* 낸 곳 — 책 아래에 찍는 판권 표시. 어떤 표지 위에도 읽히게 옅은 그늘을 깐다 */
.gorig{position:absolute;left:0;right:0;bottom:0;padding:18px 7px 5px;font-size:9px;letter-spacing:.2em;
color:rgba(242,238,232,.82);background:linear-gradient(to top,rgba(0,0,0,.62),transparent)}
/* 장르 — 한 열의 .gtags 와 같은 말, 크기만 줄인다. 세 열에서는 첫 하나만 */
.ggen{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;overflow:hidden}
/* min-width:0 이 없으면 칩이 제 글자 폭을 우겨서 옆 칸까지 밀고 나간다 —
「호러 어트랙션 미스터리」가 세 열에서 실제로 그랬다 */
.ggen span{min-width:0;font-size:9.5px;letter-spacing:.02em;padding:2px 6px;border-radius:3px;
background:var(--fill-2);color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lib-g2 .ggen span{font-size:10px}
/* 세 열은 칩 하나만. 앞의 것(현대·아포칼립스…)은 배경이라 거의 다 같다 —
뒤의 것(본격 추리·실화풍 밀실…)이 이 작품을 가르는 말이라 그쪽을 남긴다 */
.lib-g3 .ggen span:not(:last-child){display:none}
.gtags{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 7px}
.gtags span{font-size:10.5px;letter-spacing:.02em;padding:2px 7px;border-radius:3px;background:var(--fill-2);color:var(--ink-muted)}
/* 리뷰 목록 */
button.rating{border:0;background:none;padding:0 2px;font:inherit;color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.rv-pop{max-height:86%;overflow-y:auto;overscroll-behavior:contain}
.rv-avg{font:600 13px/1 var(--mono);color:var(--accent);margin:0 0 14px}
.rv-list{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:12px}
.rv-list li{padding:11px 13px;border:1px solid var(--line);border-radius:8px}
.rv-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.rv-top b{font-size:13.5px;color:var(--ink)}
.rv-top em{font-style:normal;font-size:11.5px;letter-spacing:.06em;color:var(--accent)}
.rv-txt{display:block;margin-top:7px;font-size:13px;line-height:1.7;color:var(--ink-muted)}
/* ═══ 작품 자세히 보기 ═══ */
/* 돌아가는 칩. 배경 그림 위에 얹히는 자리라 흐린 선으로는 있는 줄도 모른다 */
.wd-back{margin:0 0 14px;min-height:var(--tap);padding:7px 14px 7px 11px;border:1px solid var(--accent);border-radius:99px;background:rgba(0,0,0,.35);font-size:12.5px;font-weight:600;color:var(--accent)}
.wd-badges{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.wd-cover{margin:0 -20px 16px;aspect-ratio:16/9;overflow:hidden;background:var(--fill-2)}
.wd-cover img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.wd-badge{font-size:11px;padding:3px 8px;border-radius:3px;background:var(--fill-2);color:var(--ink-muted)}
.wd-badge.hot{background:var(--accent);color:var(--on-accent);font-weight:700}
.wd .h1{margin:0 0 12px}
.wd-intro{font-family:var(--read);font-size:14.5px;line-height:1.85;color:var(--ink);margin:0 0 18px;word-break:keep-all}
.wd-facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0}
.wd-facts>div{flex:1 0 auto;min-width:72px;padding:9px 11px;border:1px solid var(--line);border-radius:8px}
.wd-facts dt{font-size:10.5px;color:var(--ink-faint);margin:0 0 3px}
.wd-facts dd{margin:0;font:600 13.5px/1.2 var(--ui);color:var(--ink)}
.wd-note{padding:12px 14px;border-radius:9px;background:var(--fill);margin:0 0 4px}
.wd-note b{display:block;font-size:12.5px;color:var(--accent);margin-bottom:5px}
.wd-note span{font-size:13px;line-height:1.7;color:var(--ink-muted)}
/* 사건 현장 — 관계 화면과 같은 방식: 그림이 왼쪽으로 꽉 차고 글 쪽으로 스며든다 */
.wd-places{margin-bottom:6px}
.wd-place{position:relative;min-height:116px;padding:15px 6px 15px 140px;border-bottom:1px dotted var(--line);overflow:hidden}
.wd-place:last-child{border-bottom:0}
.wd-place .bg-left{width:82%;
-webkit-mask-image:linear-gradient(to right,#000 0,#000 30%,rgba(0,0,0,.42) 58%,transparent 94%);
mask-image:linear-gradient(to right,#000 0,#000 30%,rgba(0,0,0,.42) 58%,transparent 94%)}
.wd-place .bg-left::after{display:none}
.wd-ptxt{position:relative;z-index:1;min-width:0;text-shadow:0 1px 4px rgba(0,0,0,.85),0 0 12px rgba(0,0,0,.6)}
.wd-ptxt b{display:block;font:700 15px/1.3 var(--read);color:var(--accent);margin-bottom:4px}
.wd-ptxt span{display:block;font-size:12px;line-height:1.65;color:var(--ink);word-break:keep-all}
/* 등장인물 · 사건 현장 · 리뷰 탭 */
.wd-tabs{display:flex;gap:4px;margin:20px 0 14px;border-bottom:1px solid var(--line)}
.wd-tabs button{flex:1;min-height:var(--tap);border:0;background:none;border-bottom:2.5px solid transparent;margin-bottom:-1px;color:var(--ink-muted);font-size:14px}
.wd-tabs button[aria-selected="true"]{color:var(--ink);font-weight:700;border-bottom-color:var(--accent)}
.wd-tabs span{font-size:11.5px;color:var(--accent);margin-left:3px;font-family:var(--mono)}
.wd-panel{min-height:200px}
.wd-avgline{margin:0 0 12px}
.wd-cast{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px}
.wd-person{display:flex;flex-direction:column}
.wd-face{display:block;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:var(--fill-2);margin-bottom:7px}
.wd-face img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.wd-face{position:relative}
.wd-face .who-tag{position:absolute;left:6px;top:6px;z-index:1;box-shadow:0 1px 4px rgba(0,0,0,.45)}
.wd-person.victim b{color:var(--danger)}
.wd-person b{font-size:13.5px;color:var(--ink);margin-bottom:3px}
.wd-person>span:last-child{font-size:11.5px;line-height:1.6;color:var(--ink-muted);word-break:keep-all}
.wd-list{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:10px}
.wd-list li{padding:11px 13px;border:1px solid var(--line);border-radius:8px}
.wd-list b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:4px}
.wd-list span{font-size:12.5px;line-height:1.7;color:var(--ink-muted)}
.wd-avg{font:600 11.5px/1 var(--mono);color:var(--accent);margin-left:2px}
.wd .ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:10px;color:var(--ink-faint)}
.credit-work{margin-bottom:26px}
.cw-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cw-head b{margin-right:auto}
.cw-head b{font-family:var(--serif);font-size:16px}
.cw-head span{font-size:12px;color:var(--ink-muted)}
.cw-bar{height:4px;border-radius:2px;background:var(--fill-2);margin:8px 0 14px;overflow:hidden}
.cw-bar i{display:block;height:100%;background:var(--accent)}
.credit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ccard{position:relative;display:block;width:100%;aspect-ratio:5/7;padding:0;border:0;border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--ink) 8%,var(--surface));text-align:left;color:var(--ink);transition:transform .15s}
.ccard:not(.lg):active{transform:scale(.97)}
.cc-frame{position:absolute;inset:0;z-index:3;pointer-events:none;background-size:cover}
.cc-frame.ph-bg{background:none}
.cc-frame .ph-code{top:auto;bottom:6px;right:8px;font-size:8px}
.cc-frame .ph-code::after{content:" 카드 틀"}
.cc-art{position:absolute;inset:0;-webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 88%);mask-image:linear-gradient(to bottom,#000 45%,transparent 88%)}
.cc-art img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.cc-ph{height:100%;border:0;border-radius:0;place-items:center;padding-bottom:40%}
.cc-ph span{font-size:10px}
.cc-top{position:absolute;left:10px;right:10px;top:9px;display:flex;justify-content:space-between;z-index:2}
.cc-top .fell{font-size:8.5px;color:var(--accent)}
.cc-date{font-size:9px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.cc-mark{position:absolute;right:10px;top:28px;z-index:2;font-size:10px;font-weight:700;color:#FFF;background:var(--danger);border-radius:4px;padding:2px 6px}
.cc-body{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;display:flex;flex-direction:column;gap:2px}
.cc-body b{font-family:var(--serif);font-size:20px;line-height:1.2}
.cc-work{font-size:11px;color:var(--ink-muted)}
.cc-branch{align-self:flex-start;margin-top:6px;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:99px;background:var(--fill-2);color:var(--ink-muted)}
.cc-branch.b-correct{color:var(--accent)}
.ccard.culprit .cc-branch.b-wrong{color:var(--danger)}
.ccard.lg{width:62%;margin:0 auto 4px}
.ccard.lg .cc-body b{font-size:22px}
.credit-pop{max-height:92%;overflow:auto;top:50%}
.credit-pop .summary{margin:16px 0 12px}
.summary .cast{font-family:var(--ui);font-weight:500;font-size:12.5px;text-align:right;max-width:62%}
.got-credit{margin:18px 0 6px}
/* ═══ 소설 — 완주한 작품에만 열리는 읽을거리 ═══ */
/* 작품 이름 옆에 붙는 작은 단추. 책등 모양 표시 하나와 글자 한 마디 */
.novel-open{display:inline-flex;align-items:center;gap:7px;min-height:var(--tap);padding:0 13px;
border:1px solid var(--line);border-radius:999px;background:var(--fill);
font:600 12.5px var(--ui);color:var(--ink);white-space:nowrap}
.novel-open .nv-mark{flex:none;width:11px;height:14px;border-radius:1px 3px 3px 1px;
background:var(--accent);box-shadow:inset -2px 0 0 rgba(0,0,0,.18)}
.novel-pop{position:absolute;inset:12px;z-index:37;display:flex;flex-direction:column;border-radius:6px;overflow:hidden;
background:var(--fiber),var(--paper);box-shadow:0 0 0 1px var(--paper-edge);animation:fade .18s}
.novel-head{flex:none;display:flex;align-items:baseline;gap:8px;padding:14px 46px 11px 18px;border-bottom:1px solid var(--line);position:relative}
.novel-head .fell{font-size:10.5px;letter-spacing:.14em;color:var(--accent);flex:none}
.novel-head b{font-family:var(--serif);font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nv-x{position:absolute;right:6px;top:6px;width:36px;height:36px;border:0;background:none;color:var(--ink-muted);font-size:15px}
.nv-tabs{flex:none;display:flex;gap:6px;padding:9px 12px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.nv-tabs::-webkit-scrollbar{display:none}
.nv-tab{flex:none;padding:6px 11px;border:1px solid var(--line);border-radius:99px;background:none;font-size:12px;color:var(--ink-muted);white-space:nowrap}
.nv-tab.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.novel-text{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:20px 20px 28px}
.novel-text h4{font-family:var(--serif);font-size:17px;line-height:1.45;color:var(--ink);margin:0 0 16px}
.novel-text p{font-family:var(--read);font-size:14.5px;line-height:1.95;color:var(--ink);margin:0 0 15px;word-break:keep-all}
.novel-text p b{font-weight:700;color:var(--ink)}
.novel-foot{flex:none;display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.novel-foot button{flex:1;min-height:var(--tap);border:1px solid var(--line);border-radius:9px;background:none;font-size:13.5px;color:var(--ink)}
.novel-foot button:disabled{opacity:.35}
.novel-foot .ok{border:0;background:var(--accent);color:var(--on-accent);font-weight:600}
.nv-count{flex:none;font:600 11.5px/1 var(--mono);color:var(--ink-muted);letter-spacing:.06em}
.novel-wait{padding:44px 20px;text-align:center;font-size:13.5px;color:var(--ink-muted);line-height:1.7}
.got-credit .ccard.lg{animation:cardIn .6s cubic-bezier(.2,.9,.25,1.2) both}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) rotate(-4deg) scale(.9)}}
.closed{padding-top:40px}
/* 슬롯 표시 모드 */
.slot-layer{position:absolute;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.slot{position:absolute;outline:1.5px dashed rgba(232,181,74,.9);outline-offset:-1px}
.slot.k-bg{outline-color:rgba(120,200,255,.8);outline-offset:-4px}
.slot.k-icon{outline-color:rgba(255,120,160,.95)}
.slot span{position:absolute;left:2px;top:2px;font:700 8.5px/1 var(--ui);letter-spacing:.02em;color:#1A1A1A;background:rgba(232,181,74,.95);padding:2px 3px;border-radius:3px;white-space:nowrap}
.slot.k-bg span{background:rgba(120,200,255,.95);top:auto;bottom:2px;left:auto;right:2px}
.slot.k-icon span{background:rgba(255,120,160,.95);top:-9px}
/* ═══ 화면 전체 배경 이미지 영역 ═══ */
.scr{isolation:isolate}
.scr-art{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.scr-art img{width:100%;height:100%;object-fit:cover;object-position:center}
.scr-art-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,20,20,.25),rgba(20,20,20,.55) 45%,rgba(20,20,20,.85))}
.scr-art-ph{position:absolute;inset:0;border:0;border-radius:0;place-items:start end;padding:78px 14px 0;background:repeating-linear-gradient(-45deg,transparent 0 12px,rgba(255,255,255,.035) 12px 13px)}
.scr-art-ph span{font-size:10px;text-align:right;line-height:1.5;color:rgba(255,255,255,.38)}
.scr-art-ph b{font-size:11px;letter-spacing:.06em}
.scr-art-ph small{font-size:9.5px}
.scr-art:has(.scr-art-ph) .scr-art-shade{display:none}
.scr-body,.scr-foot,.notify,.tabbar{background-color:transparent}
.scr-foot{background:linear-gradient(to top,rgba(24,24,24,.92) 60%,rgba(24,24,24,0))}
.tabbar{background:rgba(26,26,26,.94)}
.center-stack{display:flex;flex-direction:column;justify-content:center;padding-top:40px}
.art-gap{height:180px}
.art-gap.small{height:120px}
.phead{background:linear-gradient(to bottom,rgba(24,24,24,.85),rgba(24,24,24,0))}
.scr-art-ph{place-items:center end;padding:0 3px 0 0}
.scr-art-ph span{writing-mode:vertical-rl;text-align:center;font-size:9px;line-height:1.3;color:rgba(255,255,255,.3)}
.scr-art-ph span br{display:none}
.scr-art-ph small{margin-top:6px}
/* ═══ 받은 이미지 적용 ═══ */
.scr-art.has-img{background-size:cover;background-position:center top}
.scr-art-shade{background:linear-gradient(to bottom,rgba(16,16,16,.15),rgba(16,16,16,.35) 40%,rgba(16,16,16,.78))}
.scr-art:not(.has-img) .scr-art-shade{display:none}
.dc-spine.has-img,.dc-cover.has-img{background-size:cover;background-position:center}
.shelf-bg.has-img{background-size:cover;background-position:center bottom}
.shelf:has(.shelf-bg.has-img)::after{content:none}
.cc-frame.has-img{background-size:100% 100%}
/* 붉은 카드 위 글자 */
.dcard:has(.dc-spine.has-img) .dc-strip{color:#F2EEE8}
.dcard:has(.dc-cover.has-img) .dc-head b,.dcard:has(.dc-cover.has-img) .dc-where{color:#F2EEE8}
.dcard:has(.dc-cover.has-img) .dc-sep{background:rgba(242,238,232,.5)}
.dcard:has(.dc-cover.has-img){background:#5a1414}
/* 아이콘: 선택 안 된 탭은 흐리게 */
[data-skin~="IC-01"] .tabbar button:not([aria-selected="true"]) .ico,[data-skin~="IC-02"] .tabbar button:not([aria-selected="true"]) .ico{opacity:.55}
.tabbar .ico{width:26px;height:26px}
/* 주 버튼 황동 판 위 글자 */
/* 틀이 border-image-width 48px 로 안쪽까지 그려진다. 아래는 버튼이 틀선과
모서리 장식을 피하도록 더 준다 (20px 이던 값은 틀이 20px 이던 시절 것) */
[data-skin~="PN-05"] .confirm{padding:26px 24px 34px}
[data-skin~="IC-13"] .slip .mark{width:64px;height:64px}
/* 배경 그림은 분위기지 읽을거리가 아니다. 앞의 글이 서도록 더 눌러 둔다 —
전(.35→.55→.86)에는 마이페이지 카드 뒤로 거울과 촛대가 그대로 비쳐 글이 묻혔다 */
.scr-art-shade{background:linear-gradient(to bottom,rgba(12,12,12,.62),rgba(12,12,12,.80) 32%,rgba(12,12,12,.94))}
/* 목록이 긴 화면은 더. 여기는 글자 수가 많아 배경이 조금만 새도 어지럽다 */
.scr[data-screen="lobby"] .scr-art-shade,.scr[data-screen="library"] .scr-art-shade,.scr[data-screen="closed"] .scr-art-shade,.scr[data-screen="mypage"] .scr-art-shade,.scr[data-screen="account"] .scr-art-shade{background:linear-gradient(to bottom,rgba(12,12,12,.74),rgba(12,12,12,.88) 28%,rgba(12,12,12,.96))}
.big.danger{background:var(--danger);color:#FFF}
/* ═══ 자물쇠 쪽지 ═══ */
.lock-note{margin:6px 0 18px;padding:16px;border-radius:12px;background:var(--fill)}
.lock-note .slip-k b{color:var(--accent)}
.lock-q{font-family:var(--serif);font-size:16px;line-height:1.6;margin:6px 0 14px}
.lock-q .fell{display:block;font-size:9.5px;color:var(--accent);margin-bottom:2px}
.lock-boxes{display:flex;justify-content:center;gap:8px;margin-bottom:14px}
.lock-boxes i{width:44px;height:56px;border-radius:10px;background:#141414;color:var(--accent);font:700 28px/56px var(--ui);text-align:center;font-style:normal;box-shadow:inset 0 0 0 1.5px var(--line)}
.lock-boxes i.on{box-shadow:inset 0 0 0 1.5px var(--accent)}
.lock-boxes i.cur{box-shadow:inset 0 0 0 2px var(--ink-muted)}
.lock-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lock-pad button{min-height:50px;border:0;border-radius:10px;background:var(--fill-2);font:600 20px var(--ui);color:var(--ink)}
.lock-pad button:active{transform:scale(.96)}
.lock-pad button:disabled{opacity:.35}
.lock-pad .enter{background:var(--accent);color:#1A1A1A;font-size:14px;letter-spacing:.08em;font-weight:800}
.lock-pad .enter:disabled{background:var(--fill-2);color:var(--ink-faint)}
/* 화살표 자물쇠 — 십자로 놓는다. 숫자판과 같은 격자를 쓰되 빈 칸이 셋 들어간다.
빈 칸은 이라 눌리지 않는다. 화살표는 크게, 지우기는 한 단 작게. */
.lock-pad.dirpad button{font-size:26px;line-height:1}
.lock-pad.dirpad button[data-k="back"]{font-size:19px}
.lock-pad.dirpad .enter{font-size:14px}
.lock-warn{font-size:11.5px;color:var(--ink-muted);text-align:center;margin:12px 0 0}
.lock-note.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.slip-note.lost{opacity:.55;transform:none}
.lost-t{font-size:13.5px;color:var(--ink-muted)}
.slip-note.unlocked{animation:unlockIn .6s cubic-bezier(.2,.9,.25,1.2)}
@keyframes unlockIn{from{opacity:0;transform:scale(.9) rotate(-3deg)}}
.lockmark{font-style:normal;font-size:10.5px;font-weight:700;color:var(--accent);background:var(--fill-2);border-radius:4px;padding:1px 5px;white-space:nowrap}
.demo-note{position:sticky;top:0;z-index:100;padding:10px 16px;background:#09090B;color:#fff;font:600 13px/1.4 var(--ui);text-align:center}
.demo-note .phonepick{justify-content:center;margin-top:8px}
.demo-note .demo-works{display:inline-block;margin-left:10px;color:#A6A6A6;font-weight:500}
.demo-note .demo-works a{color:#E8B54A;text-decoration:underline;text-underline-offset:3px;padding:6px 2px} /* 손가락 표적 */
.demo-note .demo-works b{color:#fff}
.demo-note .phonepick .btn:not(.primary){color:var(--ink)} /* 검은 띠 안에서 글자색을 물려받으면 흰 단추에 흰 숫자가 된다 */
/* ═══ 시트 높이와 상단 안전 영역 ═══ */
/* 크게 펼쳐도 장 머리(제목·타이머)가 보이도록 위를 남긴다. 손잡이가 엄지 닿는 곳에 있게 */
.sheet.half,.sheet.full{height:calc(100% - 150px - env(safe-area-inset-bottom))} /* 탭 막대(62px) 위로 올라온다 */
/* 휴대폰 상단 바(시계·노치) 영역은 비운다. 전체 화면에서도 최소 여백을 둔다 */
body.solo .phone{padding-top:env(safe-area-inset-top)}
html.is-full body.solo .phone{padding-top:max(env(safe-area-inset-top), 28px)}
html.is-full .phone:fullscreen{padding-top:max(env(safe-area-inset-top), 28px)}
/* ═══ 스킨 선택 ═══ */
.optskin{padding:12px 4px 14px;border-bottom:1px solid var(--line)}
.optskin>b{display:block;font-size:15px;margin-bottom:10px}
.skin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.skin-grid button{min-height:52px;border-radius:10px;border:1px solid var(--line);background:var(--fill);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px}
.skin-grid button span{font-size:14px;font-weight:700}
.skin-grid button small{font-size:10.5px;color:var(--ink-muted)}
.skin-grid button.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.skin-grid button.on span{color:var(--accent)}
.skin-grid button:disabled{opacity:.4}
/* 심플: 시스템 그림 자리 표시를 숨기고 깔끔한 기본 모양만 */
[data-skin-id="simple"] .scr-art-ph{display:none}
[data-skin-id="simple"] .ph-bg{background:none!important}
[data-skin-id="simple"] .ph-bg .ph-code{display:none}
[data-skin-id="simple"] .shelf-bg{background:none}
/* 크레딧 카드: 틀 그림이 있을 때 글자를 장식 안쪽으로 */
.ccard:has(.cc-frame.has-img) .cc-top{left:14%;right:14%;top:9%}
.ccard:has(.cc-frame.has-img) .cc-body{left:14%;right:14%;bottom:10%}
.ccard:has(.cc-frame.has-img) .cc-top .fell{font-size:8px;letter-spacing:.1em}
.ccard:has(.cc-frame.has-img) .cc-date{font-size:8.5px}
.ccard:has(.cc-frame.has-img) .cc-body b{font-size:18px}
.ccard.lg:has(.cc-frame.has-img) .cc-body b{font-size:21px}
.ccard:has(.cc-frame.has-img) .cc-art{inset:4%;border-radius:6px;overflow:hidden}
/* 서재에서 진행 중인 사건으로 돌아가기 */
.resume{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;margin:0 0 16px;padding:14px 16px;border:0;border-radius:12px;background:var(--accent);color:#1A1A1A;text-align:left}
.resume .fell{font-size:9.5px;opacity:.7}
.resume b{font-size:16px}
.resume small{font-size:12px;opacity:.75}
/* 서재: 가격과 받기 */
.book .price{display:flex;align-items:baseline;gap:6px;margin:6px 0 2px;font-size:14px}
.book .price b{font-size:16px;color:var(--accent)}
.book .price s{color:var(--ink-faint);font-size:12.5px}
.book .price em{font-style:normal;font-size:11px;font-weight:700;color:#1A1A1A;background:var(--accent);border-radius:4px;padding:1px 6px}
.book .price.free,.book .price.own{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:4px;background:var(--fill-2);color:var(--ink)}
.book .price.own{color:var(--accent)}
.book-act{margin-top:12px}
.book-act .big{min-height:max(46px,var(--tap));font-size:15px}
.book-act.two{display:flex;gap:8px}
.book-act.two .big{flex:1.55}
.book-act.two .more{flex:1}
.book-act .more{display:flex;align-items:center;justify-content:center;text-decoration:none}
/* ═══ 계정 ═══ */
.acct .field{margin-top:12px}
.acct .field.bad input{box-shadow:inset 0 -2px 0 var(--danger)}
.acct-err{margin:12px 0 0;padding:10px 12px;border-radius:8px;background:color-mix(in srgb,var(--danger) 18%,transparent);color:#FFD9D3;font-size:13.5px}
.acct .hint{margin-top:16px}
.linkbtn{border:0;background:none;color:var(--accent);font-size:13.5px;font-weight:600;min-height:var(--tap);min-width:var(--tap);padding:8px 10px;text-decoration:underline;text-underline-offset:3px}
.linkbtn.inline{padding:0;font-size:inherit}
.rec-code{margin:22px auto 10px;padding:16px 18px;border-radius:12px;background:var(--fill-2);font:700 24px/1 var(--ui);letter-spacing:.12em;color:var(--accent);text-align:center;user-select:all}
.login-nudge{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;padding:10px 12px;border-radius:10px;background:var(--fill)}
.login-nudge span{font-size:12.5px;color:var(--ink-muted)}
.login-nudge button{flex:none;min-height:var(--tap);padding:0 14px;border:0;border-radius:100px;background:var(--accent);color:#1A1A1A;font-weight:700;font-size:13px}
.login-nudge{margin-right:46px}
/* ═══ 마이페이지 ═══ */
.my .sec{margin-top:22px}
.my-card{padding:6px 14px;border-radius:12px;background:var(--fill)}
.my-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.my-row:last-of-type{border-bottom:0}
.my-row span{flex:none;width:64px;color:var(--ink-muted);font-size:13px}
.my-row b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.my-form{padding:4px 0 12px}
.btn-s{min-height:var(--tap);padding:0 16px;margin-top:10px;border:0;border-radius:100px;background:var(--accent);color:#1A1A1A;font-weight:700;font-size:13.5px}
.my-list{list-style:none;margin:0;padding:0;border-radius:12px;background:var(--fill);overflow:hidden}
.my-item{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.my-item:last-child{border-bottom:0}
.my-item b{font-size:14.5px}
.my-item span{grid-column:1;font-size:12.5px;color:var(--ink-muted)}
.my-item em{grid-column:2;grid-row:1 / span 2;align-self:center;font-style:normal;font-size:12px;font-weight:700;color:var(--accent)}
.my-item em.st-closed,.my-item em.st-finished{color:var(--ink)}
.my-item.empty{display:block;font-size:13px;color:var(--ink-muted)}
.my-credit{display:flex;align-items:baseline;gap:10px;width:100%;padding:14px;border:0;border-radius:12px;background:var(--fill);color:var(--ink);text-align:left}
.my-credit b{font-size:20px;color:var(--accent)}
.my-credit span{font-size:13px;color:var(--ink-muted)}
.book .price em:first-child{background:var(--fill-2);color:var(--ink)}
.my-item em.rs-used,.my-item em.rs-expired{color:var(--ink-muted)}
.confirm b{color:var(--accent)}
.inline-link{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
/* 환불·취소 */
.my-item .my-refund{grid-column:1 / -1;justify-self:start;margin-top:8px;min-height:var(--tap);padding:0 12px;border:1px solid var(--line);border-radius:100px;background:none;color:var(--ink);font-size:12.5px;font-weight:600}
.my-confirm{grid-column:1 / -1;margin-top:10px;padding:12px;border-radius:10px;background:var(--fill-2)}
.my-confirm b{display:block;font-size:14px;margin-bottom:4px}
.my-confirm>span{display:block;font-size:12.5px;line-height:1.6;color:var(--ink-muted)}
.my-confirm .in-row,.in-row.adm{display:flex;gap:8px;margin-top:10px}
.my-confirm .in-row button,.in-row.adm button{flex:1;min-height:var(--tap);border:1px solid var(--line);border-radius:10px;background:none;color:var(--ink);font-weight:700;font-size:13.5px}
.my-confirm .in-row .danger,.in-row.adm .danger{background:var(--danger);border-color:var(--danger);color:#fff}
.in-row.adm{grid-column:1 / -1}
.my-item em.rs-refund_pending{color:var(--accent)}
.my-item em.rs-refunded,.my-item em.rs-cancelled{color:var(--ink-muted)}
/* 방장 부재 · 자동 종료 */
.host-absent{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent) 16%,var(--surface));border:1px solid var(--accent)}
.host-absent span{flex:1;font-size:12px;line-height:1.5;color:var(--ink-muted)}
.host-absent b{display:block;font-size:13.5px;color:var(--ink)}
.host-absent button{flex:none;min-height:var(--tap);padding:0 12px;border:0;border-radius:100px;background:var(--accent);color:#1A1A1A;font-weight:700;font-size:13px}
.auto-close{margin:18px 0 0;text-align:center;font-size:12px;color:var(--ink-muted)}
/* 이미 플레이함 · 참가자 로그인 */
.badge.warn{background:var(--danger);color:#fff}
.played-warn{margin:12px 0;padding:10px 12px;border-radius:10px;border:1px solid var(--danger);background:color-mix(in srgb,var(--danger) 12%,var(--surface))}
.played-warn b{display:block;font-size:13.5px}
.played-warn span{font-size:12px;color:var(--ink-muted)}
.played-note{margin:4px 0 0;font-size:12px;font-weight:700;color:var(--danger)}
.login-nudge.in-case{margin:12px 0 4px}
/* ═══ 첫 판 안내 ═══ */
.rules{margin:14px 0 6px;border-radius:12px;background:var(--fill);border:1px solid var(--line)}
.rules-head{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--tap);padding:12px 14px;border:0;background:none;color:var(--ink);text-align:left}
.rules-head b{font-size:14px}
.rules-head span{font-size:12px;color:var(--accent);font-weight:700}
.rules-list{margin:0;padding:0 14px 4px 14px;list-style:none;counter-reset:r}
.rules-list li{position:relative;padding:8px 0 8px 30px;border-top:1px solid var(--line);counter-increment:r}
.rules-list li::before{content:counter(r);position:absolute;left:0;top:9px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#1A1A1A;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.rules-list b{display:block;font-size:13.5px}
.rules-list span{display:block;font-size:12.5px;line-height:1.55;color:var(--ink-muted)}
.rules-ok{display:block;width:calc(100% - 28px);margin:6px 14px 14px;min-height:var(--tap);border:0;border-radius:10px;background:var(--fill-2);color:var(--ink);font-weight:700;font-size:13px}
/* ═══ 결말 ═══ */
.culprit-reveal{display:flex;flex-direction:column;align-items:center;gap:4px;margin:14px auto 6px;padding:14px 16px;max-width:320px;border-radius:12px;border:1px solid color-mix(in srgb,var(--danger) 60%,transparent);background:color-mix(in srgb,var(--danger) 10%,transparent)}
.culprit-reveal .k{font-size:11px;letter-spacing:.2em;color:var(--danger);font-weight:800}
.culprit-reveal b{font-family:var(--serif);font-size:26px}
.culprit-reveal .how{font-size:13px;color:var(--ink-muted);text-align:center}
.end-tabs{margin:18px 0 10px}
.end-pane{min-height:120px}
.truth-line{list-style:none;margin:0;padding:0 0 0 4px;border-left:2px solid var(--line)}
.tl-where{font-style:normal;font-size:11px;font-weight:700;color:var(--accent);margin-right:6px}
.truth-line li{position:relative;display:flex;gap:10px;padding:8px 0 8px 14px}
.truth-line li::before{content:'';position:absolute;left:-6px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.truth-line time{flex:none;width:44px;font-weight:800;font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums}
.truth-line p{margin:0;font-size:13.5px;line-height:1.55}
.secret-cards{display:flex;flex-direction:column;gap:8px}
.secret-card{border-radius:12px;background:var(--fill);border:1px solid var(--line);overflow:hidden}
.secret-card.culprit{border-color:var(--danger)}
.secret-card summary{display:flex;align-items:center;gap:8px;padding:12px 14px;cursor:pointer;list-style:none}
.secret-card summary::-webkit-details-marker{display:none}
.secret-card summary b{font-size:15px}
.secret-card summary span{font-size:12.5px;color:var(--ink-muted)}
.secret-card summary em{margin-left:auto;font-style:normal;font-size:11px;font-weight:800;padding:2px 8px;border-radius:100px;background:var(--danger);color:#fff}
.secret-card summary em.me{background:var(--accent);color:#1A1A1A}
.secret-card summary em + em{margin-left:4px}
.secret-card .prose{padding:0 14px 14px;font-size:13.5px}
.end-actions{display:flex;gap:8px}
.end-actions .big{flex:1}
.share-box{max-width:340px}
.share-box img{display:block;width:100%;border-radius:10px;margin-bottom:8px}
.share-box .in-row{display:flex;gap:8px}
.share-box .in-row>*{flex:1;min-height:42px;border:1px solid var(--line);border-radius:10px;background:none;color:var(--ink);font-weight:700;font-size:13.5px;display:flex;align-items:center;justify-content:center;text-decoration:none}
.share-box .in-row .danger{background:var(--accent);border-color:var(--accent);color:#1A1A1A}
.ending-first .art-gap.small,.end-pane ~ .art-gap{height:8px}
.culprit-reveal{margin-top:10px}
/* ═══ 인원 선택 · 별점 ═══ */
.pick-row{display:flex;flex-direction:column;gap:8px;margin:14px 0 6px}
.book .rating{color:var(--accent);font-weight:700;white-space:nowrap}
.book .rating small{color:var(--ink-muted);font-weight:400}
.review-box{display:flex;flex-direction:column;gap:8px;margin:18px 0 4px;padding:14px;border-radius:12px;background:var(--fill);border:1px solid var(--line)}
.review-box b{font-size:14px}
.review-box>span{font-size:12.5px;color:var(--ink-muted)}
.review-box .btn-s{align-self:flex-start;margin-top:0}
.review-box input{width:100%;min-height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px}
.stars{display:flex;gap:4px}
.stars button{width:40px;height:40px;border:0;background:none;font-size:28px;line-height:1;color:var(--line);padding:0}
.stars button.on{color:var(--accent)}
.my-item .review-box{grid-column:1 / -1}
.rv-mine{font-style:normal;color:var(--accent)}
.role-b{margin-left:6px;font-style:normal;font-size:11px;padding:2px 7px;border-radius:100px;background:var(--accent);color:#1A1A1A;font-weight:800}
.my-tools{display:flex;flex-direction:column;gap:8px}
/* ═══ 작가 스튜디오 ═══ */
.stu .guide{margin-bottom:12px}
.stu-list{display:flex;flex-direction:column;gap:8px;margin:10px 0 14px}
.stu-work{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--fill);color:var(--ink);text-align:left}
.stu-work b{display:block;font-size:14.5px}
.stu-work small{display:block;font-size:12px;color:var(--ink-muted);margin-top:2px}
.stu-work small.bad{color:var(--danger)}
.stu-work .in-row{grid-column:1 / -1}
[class*="st-"]{font-style:normal}
.stu-work em,.stu-state em{font-style:normal;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:100px;background:var(--fill-2);color:var(--ink);white-space:nowrap}
em.st-ok{background:color-mix(in srgb,#34C759 25%,transparent);color:#8BE3A0}
em.st-wait{background:var(--accent);color:#1A1A1A}
em.st-bad{background:var(--danger);color:#fff}
em.st-mute{color:var(--ink-muted)}
.stu-state{margin:0 0 10px;font-size:12.5px;color:var(--danger)}
.stu-file{display:block;margin:0 0 8px;font-size:12.5px;color:var(--ink-muted)}
.stu-file input{display:block;margin-top:6px;font-size:12.5px;color:var(--ink)}
.stu textarea{width:100%;min-height:46vh;padding:12px;border-radius:12px;border:1px solid var(--line);background:#0E0F12;color:#E7E7EA;font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical;white-space:pre;overflow:auto}
.stu-check{margin:12px 0 4px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--fill)}
.stu-check.ok{border-color:#34C759}
.stu-check.bad{border-color:var(--danger)}
.stu-check>b{display:block;font-size:14px}
.stu-check>span{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-muted)}
.stu-check ul{margin:8px 0 0;padding:0;list-style:none;max-height:32vh;overflow:auto}
.stu-check li{padding:6px 0;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5}
.stu-check li.err{color:#FFB4AA}
.stu-check li.warn{color:var(--ink-muted)}
.stu-check li i{display:inline-block;min-width:44px;font-style:normal;font-weight:800;color:var(--accent)}
.stu-foot{gap:8px}
.stu-foot .in-row{display:flex;gap:8px}
.stu-foot .in-row .big{flex:1}
/* ═══ 관리자 ═══ */
.adm-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.adm-tabs button{min-height:var(--tap);padding:0 12px;border-radius:100px;border:1px solid var(--line);background:none;color:var(--ink);font-size:12.5px;font-weight:700}
.adm-tabs button.on{background:var(--accent);border-color:var(--accent);color:#1A1A1A}
.adm-alerts{display:flex;flex-wrap:wrap;gap:6px}
.adm-alerts button{min-height:var(--tap);padding:0 12px;border:0;border-radius:10px;background:var(--danger);color:#fff;font-weight:700;font-size:12.5px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.kpis div{padding:10px;border-radius:10px;background:var(--fill);border:1px solid var(--line)}
.kpis b{display:block;font-size:19px;color:var(--accent)}
.kpis span{font-size:11px;color:var(--ink-muted)}
.adm-table{overflow-x:auto;border-radius:10px;border:1px solid var(--line)}
.adm-table table{width:100%;border-collapse:collapse;font-size:12px}
.adm-table th,.adm-table td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.adm-table th:first-child,.adm-table td:first-child{text-align:left}
.adm-btn{display:flex;align-items:center;justify-content:center;margin:10px 0;text-decoration:none}
.hidden-rv{opacity:.55}
/* ═══ 긴 창: 화면 안에서 스크롤 (옵션 메뉴가 길어져 닫기 버튼이 가려지던 문제) ═══ */
.confirm{max-height:calc(100% - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* 창 안의 퍼센트는 글자 배율(zoom)이 걸린 좌표로 계산되므로 배율 보정을 하지 않는다 */
/* 옵션 창: 바깥 틀(스킨 테두리)은 그대로, 제목 줄은 고정, 본문만 스크롤 */
.confirm.opts{display:flex;flex-direction:column;overflow:hidden;top:auto;
bottom:calc(12px + env(safe-area-inset-bottom));
max-height:calc(100% - 24px - env(safe-area-inset-bottom))}
body.solo .confirm.opts{max-height:calc(100% - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
.opts-head{flex:none;padding:0 6px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
/* 아래 10px: 스크롤이 항목 한가운데를 자르면 고장난 것처럼 보인다 */
.opts-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px 10px}
.optrow.note{cursor:default}
.optrow.note:hover{background:none}
.stu-imgs{margin:12px 0 4px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--fill)}
.stu-imgs>b{display:block;font-size:14px}
.stu-imgs>span{display:block;margin:4px 0 8px;font-size:12px;line-height:1.5;color:var(--ink-muted)}
.stu-imglist{list-style:none;margin:8px 0 0;padding:0;max-height:28vh;overflow:auto;display:flex;flex-direction:column;gap:2px}
.stu-imglist li{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;font-size:12.5px;border-bottom:1px solid var(--line);padding:5px 0}
.stu-imglist li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stu-imglist small{color:var(--ink-muted)}
/* 끌어서 넘기는 곳: 글자 선택·길게 누르기 메뉴 막기 */
.dialbox .shelf,.dial,.dcard,.dcard *,.grabber,.sheet-top,.mdial,.mdial *,.tabbar,.phead{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.dcard img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.dial-init .dcard{transition:none!important}
/* ═══ 현장 지도: 장소 핀 + 내 동선 ═══ */
.mapfig.mlive{position:relative;margin:0 0 10px;border-radius:10px;overflow:hidden;background:#0b1118;-webkit-user-select:none;user-select:none}
.mapfig.mlive>img{display:block;width:100%;height:auto;-webkit-user-drag:none}
/* 점은 26px 그대로 두고 손가락이 닿는 면만 넓힌다 — 핀을 키우면 지도가 가려진다 */
.mpin{position:absolute;transform:translate(-50%,-50%);display:block;width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;z-index:2}
.mpin::after{content:"";position:absolute;left:50%;top:50%;width:var(--tap);height:var(--tap);transform:translate(-50%,-50%)}
.mpin .dot{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.6)}
.mpin .mp-label{position:absolute;left:calc(50% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap;font-size:10.5px;font-weight:700;color:#fff;padding:1px 5px;border-radius:4px;background:rgba(0,0,0,.62);pointer-events:none}
.mpin.lbl-left .mp-label{left:auto;right:calc(50% + 10px)}
.mpin.focus .dot{outline:2px solid #fff;outline-offset:3px}
.mroute-list{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:4px}
.mroute-list li{display:grid;grid-template-columns:22px 44px 1fr;align-items:start;gap:6px;font-size:12.5px;line-height:1.45}
.mroute-list b{width:20px;height:20px;border-radius:50%;background:var(--accent);color:#1A1A1A;font-size:11px;display:flex;align-items:center;justify-content:center}
.mroute-list time{font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;padding-top:1px}
.mroute-list em{font-style:normal;font-weight:700}
.place.focus{outline:2px solid var(--accent);outline-offset:2px}
/* ═══ 현장 탭: 장소 그림을 깐 넓은 줄 ═══
작품마다 장소 그림을 그려 두고도 플레이 화면에서는 한 번도 안 썼다.
작품 상세(.wd-place)와 같은 기법 — 왼쪽에서 꽉 차고 글 쪽으로 스며든다. */
/* 소개 글을 뺀 뒤로 카드가 제목 한 줄과 바닥 줄뿐이다 — 위아래로 벌려 그림 자리를 남긴다 */
.place.art{display:flex;flex-direction:column;justify-content:space-between;
position:relative;overflow:hidden;min-height:112px;padding:14px 12px 14px 120px;
border-radius:10px;border:0;margin-bottom:8px;background:var(--fill)}
.place.art::before{content:none} /* 왼쪽 점 대신 사진이 자리를 맡는다 */
.place.art>:not(.bgart){position:relative;z-index:1;text-shadow:0 1px 4px rgba(0,0,0,.85),0 0 12px rgba(0,0,0,.55)}
.place.art .bg-left{width:80%;
-webkit-mask-image:linear-gradient(to right,#000 0,#000 26%,rgba(0,0,0,.4) 56%,transparent 92%);
mask-image:linear-gradient(to right,#000 0,#000 26%,rgba(0,0,0,.4) 56%,transparent 92%)}
.place.art .bg-left::after{display:none}
.place.art .place-h b{color:var(--accent)}
.place.art .place-f{color:var(--ink-muted)}
.place.art.been{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.place.art .me-time{background:var(--accent);color:#1A1A1A;border-radius:100px;padding:2px 9px;font-size:11px;font-weight:700;text-shadow:none;flex:none}
/* 「내 동선 표시」는 탭이 아니라 켬/끔이다 — 탭 줄에서 내려 지도 밑에 둔다 */
.mroute-sw{display:flex;justify-content:flex-end;margin:8px 0 2px}
.mroute-sw button{min-height:var(--tap);padding:0 12px;border:1px solid var(--line);background:none;border-radius:100px;
font-size:12.5px;color:var(--ink-muted)}
.mroute-sw button[aria-checked="true"]{border-color:color-mix(in srgb,var(--accent) 55%,transparent);
background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.mroute-sw button::before{content:"○ ";font-size:11px}
.mroute-sw button[aria-checked="true"]::before{content:"● "}
.mpin .mp-label{font-family:inherit;letter-spacing:0}
/* 현장 지도: 그림 전체를 원래 비율로, 누르면 크게 */
.mapfig.mapimg{padding:0;border:0;background:none;border-radius:10px;overflow:hidden}
.map-open{position:relative;display:block;width:100%;padding:0;border:0;background:#0b1118;cursor:zoom-in;-webkit-user-select:none;user-select:none}
.map-open img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;-webkit-user-drag:none}
.map-hint{position:absolute;right:8px;bottom:8px;font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.6);padding:3px 8px;border-radius:100px}
.map-zoom{position:absolute;inset:0;z-index:40;background:#05070a}
.mz-stage{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
.mz-stage:active{cursor:grabbing}
.mz-img{position:absolute;left:0;top:0;max-width:none;width:auto;height:auto;transform-origin:0 0;will-change:transform;-webkit-user-drag:none;pointer-events:none}
.mz-img.glide{transition:transform .22s ease-out}
.mz-bar{position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:6px}
.mz-mode{min-height:38px;padding:0 18px;border:0;border-radius:100px;background:rgba(255,255,255,.92);color:#111;font-weight:800;font-size:13px}
.mz-tip{white-space:nowrap;font-size:11.5px;font-weight:700;color:#fff;background:rgba(0,0,0,.6);padding:5px 12px;border-radius:100px;pointer-events:none}
.mz-close{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;min-height:38px;padding:0 16px;border:0;border-radius:100px;background:rgba(0,0,0,.7);color:#fff;font-weight:700;font-size:14px}
/* 탐정(형사·검사) 표시 */
.badge.det{background:var(--accent);color:#1A1A1A}
.picks .only-picks{margin-left:10px;padding-right:2px;display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--accent);font-weight:700}
/* 전용 표시도 아래의 테두리 고리에 얹는다 — outline 을 따로 두면 고리가 두 겹으로 겹친다 */
.tgt-txt .only-b{color:var(--accent);font-weight:700}
.det-verdict{display:flex;flex-direction:column;align-items:center;gap:3px;margin:10px auto 0;padding:10px 14px;max-width:320px;border-radius:12px;border:1px solid var(--line);background:var(--fill)}
.det-verdict.ok{border-color:#34C759}
.det-verdict .k{font-size:11px;letter-spacing:.2em;font-weight:800;color:var(--ink-muted)}
.det-verdict b{font-size:16px}
.det-verdict.ok b{color:#8BE3A0}
.det-verdict .how{font-size:12px;color:var(--ink-muted)}
/* 쪽지 도착 카드 (교환 신청과 같은 자리에서 위에서 내려온다) */
.incoming.note{border:1px solid var(--accent)}
.incoming.note .nc-sub{margin:0 0 8px;font-size:12.5px;line-height:1.55;color:var(--ink-muted)}
.nc-queued{margin:10px -16px -14px;padding:8px 16px 10px;border-top:1px dashed var(--accent);font-size:11.5px;font-weight:700;color:var(--accent)}
/* 목표 점검 · 성적표 */
.goalq{margin:14px 0 12px;padding:14px 16px;border-radius:12px;border:1px solid var(--accent);background:var(--fill)}
.goalq>b{display:block;font-family:var(--serif);font-size:18px;line-height:1.45;margin:4px 0 6px}
.goalq .hint{display:block}
.score-cards{display:flex;flex-direction:column;gap:10px}
.score-card{border-radius:12px;border:1px solid var(--line);background:var(--fill);padding:12px 14px}
.score-card.mine{border-color:var(--accent)}
.sc-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.sc-head b{font-size:15.5px}
.sc-head span{font-size:12px;color:var(--ink-muted)}
.sc-head em{margin-left:auto;font-style:normal;font-weight:800;font-size:13px;color:var(--accent)}
.score-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.score-card li{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.5}
.score-card li i{flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--fill-2);position:relative}
.score-card li.ok i{background:#34C759}
.score-card li.no i{background:var(--danger)}
.score-card li.ok i::after,.score-card li.no i::after{content:'';position:absolute;left:5px;top:4px;width:5px;height:8px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}
.score-card li.no i::after{left:4px;top:7px;width:8px;height:0;border-width:0 0 2px 0;transform:none}
.score-card li small{display:block;color:var(--ink-muted);font-size:11.5px;margin-top:2px}
.sc-note{margin:8px 0 0;font-size:12px;color:var(--ink-muted);line-height:1.5}
.goal-note{margin-top:12px}
/* 카드 틀이 있는 스킨: 그림과 글자를 틀 안쪽으로 */
.ccard:has(.cc-frame.has-img) .cc-art{inset:var(--cc-t, 5%) var(--cc-x, 6%) var(--cc-b, 5%);border-radius:4px;overflow:hidden}
.ccard:has(.cc-frame.has-img) .cc-top{left:calc(var(--cc-tx, var(--cc-x, 6%)) + 8px);right:calc(var(--cc-tx, var(--cc-x, 6%)) + 8px);top:calc(var(--cc-tt, var(--cc-t, 5%)) + 7px)}
/* 그림이 틀 안쪽까지 차오르므로 글자는 사진 위에 놓인다 — 읽히게 그림자를 준다 */
.ccard:has(.cc-frame.has-img) .cc-top,.ccard:has(.cc-frame.has-img) .cc-body{text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.6)}
.ccard:has(.cc-frame.has-img) .cc-body{left:calc(var(--cc-tx, var(--cc-x, 6%)) + 10px);right:calc(var(--cc-tx, var(--cc-x, 6%)) + 10px);bottom:calc(var(--cc-tb, var(--cc-b, 5%)) + 10px)}
.stu-imglist li{align-items:center}
.stu-imglist li.unused span{color:var(--ink-muted)}
.stu-imglist li em{font-style:normal;margin-left:6px;font-size:10.5px;color:var(--accent)}
.stu-imglist .imgdel{margin-left:6px;min-height:24px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:none;color:var(--ink-muted);font-size:11px;font-weight:700}
.stu-imglist .imgdel:hover{color:var(--danger);border-color:var(--danger)}
/* 사람들 목록: 피해자 → 배역 (나 포함) */
.rel-who{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.who-tag{font-style:normal;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:100px;background:var(--fill-2);color:var(--ink)}
.who-tag.victim{background:var(--danger);color:#fff}
.who-tag.npc{background:var(--fill-2);color:var(--ink-muted)} /* 참고인 — 자리를 차지하지 않는다 */
.who-tag.me{background:var(--accent);color:#1A1A1A}
.who-tag.det{background:var(--accent);color:#1A1A1A}
.rel .prose.intro{color:var(--ink-muted);font-size:13px;margin-bottom:4px}
/* ═══ 증거 카드: 그림과 설명을 한 장으로 ═══ */
.ecards{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.ecards.vdial{position:relative;display:block;height:min(56vh,430px);overflow:hidden;touch-action:pan-x;-webkit-user-select:none;user-select:none}
.ecards.vdial>.ecard{position:absolute;left:2px;right:2px;top:0;transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
.ecards.vdial>.ecard:not(.on){cursor:pointer}
.ecard{border-radius:12px;border:1px solid var(--line);background:var(--fill);padding:12px;position:relative}
.ecard.mine{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.ec-top{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start}
.ec-thumb{position:relative;width:88px;height:66px;flex:none;border:0;padding:0;border-radius:8px;overflow:hidden;background:var(--fill-2);cursor:zoom-in}
.ec-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ec-thumb.ph{display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--ink-muted)}
/* 어두운 사진 위에서 검은 원은 안 보인다 — 조금 키우고 테두리를 둘러 띄운다 */
.ec-zoom{position:absolute;right:5px;bottom:5px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:14px;line-height:22px;text-align:center;font-weight:800;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 1px 4px rgba(0,0,0,.6)}
.ec-head{min-width:0}
.ec-where{display:block;font-size:11px;letter-spacing:.06em;color:var(--accent);font-weight:800}
.ec-head b{display:block;font-family:var(--serif);font-size:16.5px;line-height:1.3;margin:1px 0 3px}
.ec-meta{display:block;font-size:11.5px;color:var(--ink-muted);line-height:1.45}
.ec-state{flex:none;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:100px;background:var(--accent);color:#1A1A1A;white-space:nowrap}
.ec-state.open{background:var(--fill-2);color:var(--ink-muted)}
.ec-body{margin-top:9px;font-size:13.5px;line-height:1.6}
.ec-acts{display:flex;gap:6px;margin-top:10px}
.clueview>.ec-acts{flex:0 0 auto;margin:0;padding:10px 14px 14px} /* 4px 이던 것 — 단추가 창 끝에 붙었다 */
/* 틀의 모서리 장식은 아래쪽으로 30px 남짓 올라온다. 단추가 폭 가득이라
그 장식 위에 닿았다 — 점이 없을 때는 여백을 단추가 직접 챙긴다. */
[data-skin~="PN-05"] .clueview>.ec-acts{padding:10px 4px 24px}
[data-skin~="PN-05"] .clueview:has(.cv-dots)>.ec-acts{padding-bottom:6px}
[data-skin~="PN-05"] .clueview:has(.cv-dots) .cv-dots{padding-bottom:12px}
.ec-acts button{flex:1;border:1px solid var(--line);background:none;color:var(--ink)}
/* 행동 단추는 세 단이다.
① 금색 — 되돌릴 수 없는 것(모두에게 공개). 엔진에 내리는 동작이 없다.
② 채움 — 그 화면의 주 액션이지만 되돌릴 여지가 있는 것.
③ 테두리 — 곁들이는 보조 행동.
순서(:first-child)로 붙이면 잠긴 증거처럼 공개가 없는 경우에 건네주기가
엉뚱하게 금색이 됐다. 그래서 뜻(.grave)으로 붙이고, 금색이 없는 줄에서는
남은 단추가 ②로 올라선다 — 계층은 남기고 금색만 아낀다. */
.ec-acts .grave,.clue-acts .grave{background:var(--accent);border-color:var(--accent);color:#1A1A1A;font-weight:800}
.ec-acts:not(:has(.grave))>button:first-child,
.clue-acts:not(:has(.grave))>button:first-child{background:var(--fill-2);border-color:transparent;color:var(--ink);font-weight:800}
.ec-note{margin:8px 0 0}
/* 잠긴 증거 (금고·자물쇠) */
.ec-lock{margin-top:10px;padding:10px 12px;border-radius:10px;border:1px dashed var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.ec-lock.open{border-style:solid;border-color:#34C759;background:color-mix(in srgb,#34C759 10%,transparent)}
.lk-k{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--accent);margin-bottom:4px}
.ec-lock.open .lk-k{color:#8BE3A0}
.lk-hint{margin:0 0 8px;font-size:12.5px;line-height:1.55;color:var(--ink-muted)}
.lk-open{width:100%;border:0;background:var(--accent);color:#1A1A1A}
.ec-reward{position:relative;display:block;width:100%;margin-top:8px;border:0;padding:0;border-radius:8px;overflow:hidden;background:none;cursor:zoom-in}
.ec-reward img{width:100%;max-height:180px;object-fit:cover;display:block}
/* 합성 짝 표시 (같은 색 = 같은 조합) */
.ecard{position:relative}
.ec-pair{position:absolute;left:-6px;top:-6px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;background:var(--pc,#888);box-shadow:0 1px 4px rgba(0,0,0,.45);z-index:2}
.ec-pair.c1{--pc:#FF4B3E}.ec-pair.c2{--pc:#3B82F6}.ec-pair.c3{--pc:#22C55E}
.ec-pair.c4{--pc:#A855F7}.ec-pair.c5{--pc:#F59E0B}.ec-pair.c6{--pc:#14B8A6}
.ec-pairbox{margin-top:9px;padding:9px 11px;border-radius:10px;border:1px dashed var(--pc,#888);background:color-mix(in srgb,var(--pc,#888) 10%,transparent)}
.ec-pairbox.c1{--pc:#FF4B3E}.ec-pairbox.c2{--pc:#3B82F6}.ec-pairbox.c3{--pc:#22C55E}
.ec-pairbox.c4{--pc:#A855F7}.ec-pairbox.c5{--pc:#F59E0B}.ec-pairbox.c6{--pc:#14B8A6}
.ec-pairbox.ready{border-style:solid}
/* 짝 색은 테두리·배경·동그라미가 이미 나른다. 11px 글자까지 그 색이면 3.8:1 로 못 읽는다 */
.ec-pairbox .pb-k{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--ink-muted);margin-bottom:3px}
.ec-pairbox p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-muted)}
.ec-pairbox b{color:var(--ink)}
.pb-go{width:100%;border:0;background:var(--pc,#888);color:#fff}
/* 프롤로그 다시 읽기 */
.hsec.pro{padding-top:4px}
.hsec.pro .prose{font-size:14.5px;line-height:1.75}
/* 남이 알면 안 되는 대목 강조 */
.hotw{font-style:normal;font-weight:800;color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent);border-radius:4px;padding:0 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.secret .hotw{color:#FF6B5E}
/* 책장식 증거 목록: 접힌 카드는 제목만, 펼친 카드만 자세히 */
.ecards.vdial .ecard{padding:0;overflow:hidden;transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s ease,border-color .2s ease,background .2s ease}
.ecards.vdial .ec-top{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;width:100%;padding:9px 11px}
.ecards.vdial .ec-title{border:0;background:none;color:var(--ink);text-align:left;padding:0;min-width:0;cursor:pointer}
.ecards.vdial .ecard:not(.on){background:color-mix(in srgb,var(--fill) 70%,transparent);border-color:var(--line)}
.ecards.vdial .ecard:not(.on) .ec-top{padding:7px 11px}
.ecards.vdial .ecard:not(.on) .ec-title{opacity:.72}
.ecards.vdial .ecard:not(.on) .ec-thumb{width:38px;height:29px}
.ecards.vdial .ecard:not(.on) .ec-head b{font-size:14px;margin:0}
.ecards.vdial .ecard:not(.on) .ec-meta,.ecards.vdial .ecard:not(.on) .ec-state{display:none}
.ecards.vdial .ecard.on{background:var(--fill);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.ecards.vdial .ec-open{padding:0 12px 12px}
.ecards.vdial .ec-thumb{position:relative;width:56px;height:44px;border:0;padding:0;cursor:zoom-in;border-radius:7px;overflow:hidden;background:var(--fill-2);display:block;transition:width .2s ease,height .2s ease}
.ecards.vdial .ec-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ecards.vdial .ec-thumb.ph{display:flex;align-items:center;justify-content:center;font-size:9.5px;color:var(--ink-muted)}
.ecards.vdial .ec-thumb .ec-zoom{right:2px;bottom:2px;width:15px;height:15px;font-size:10px;line-height:15px}
.ecards.vdial .ecard:not(.on) .ec-thumb .ec-zoom{display:none}
.ecards.vdial .ec-open{padding:0 11px 11px}
.ecards.vdial .ec-body{margin-top:2px}
/* 다이얼: 끄는 동안은 손끝을 따라오고, 놓으면 부드럽게 자리 잡는다 */
.ecards.vdial.dragging>.ecard{transition:none}
.ecards.vdial>.ecard .ec-open{max-height:0;opacity:0;overflow:hidden;padding-top:0;padding-bottom:0;transition:max-height .26s cubic-bezier(.2,.8,.2,1),opacity .18s ease,padding .26s ease}
.ecards.vdial>.ecard.on .ec-open{max-height:min(46vh,340px);opacity:1;padding-bottom:11px}
/* 조사 대상에 남은 장수 */
.tgt-left{position:absolute;right:8px;top:8px;z-index:2;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:100px;background:rgba(0,0,0,.55);color:#fff}
.tgt:disabled .tgt-left{opacity:.55}
/* 장소·사람 칸의 테두리 — 칸이 어디서 끝나는지 보이게 한다.
오른쪽 78%가 사진이고 그 사진이 왼쪽으로 흐려지며 배경에 녹아들어, 테두리가 없으면
칸의 경계가 사라진다. 고르는 자리를 못 찾는다.
일반 border 로는 모자란다. 사진(.tgt-bg)은 자리를 잡은 자식이라 칸 자신의 테두리보다
뒤에 그려지긴 하지만, 밝은 사진 위에서는 옅은 회색 한 줄이 묻힌다. 그래서 고리를
::after 로 띄워 사진 위에 얹고(z-index 3), 안팎으로 음영을 겹쳐 어느 바탕에서도 남게 한다.
inset:0 은 여기서 칸 전체다 — .tgt 는 border:0 이라 padding 상자가 곧 바깥 상자다. */
.tgt::after{
content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
border:1px solid var(--line); border-radius:inherit;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 0 0 1px rgba(0,0,0,.05);
}
.tgt.only::after{border-color:var(--accent)}
.tgt:not(:disabled):hover::after{border-color:var(--accent)}
/* 더 볼 것이 없는 칸은 한 단 죽인다 — 테두리는 남겨 자리를 알리되 고르라고 부르지는 않는다 */
.tgt:disabled::after{border-style:dashed;opacity:.7}
/* 초대: 복사 버튼 */
.inv-btns{display:flex;gap:6px;margin:10px 0 2px;flex-wrap:wrap;justify-content:center}
.inv-copy{min-height:var(--tap);padding:0 16px;border:0;border-radius:100px;background:var(--accent);color:#1A1A1A;font-size:13px;font-weight:800}
.inv-copy.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
/* ═══ 증거 격자 (한눈에) ═══ */
.egrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:4px 0 8px}
/* 길게 눌러 끌면 다른 증거와 합쳐진다 — 그 손짓을 글자 고르기나 그림 메뉴가 가로채면 안 된다.
touch-callout 은 사파리에서 그림 메뉴를 막는다. 안드로이드는 듣지 않으므로 90-boot.js 가
contextmenu 자체를 막는다. 그림에 pointer-events 를 끊어 두면 누르는 자리가 늘 칸이 된다. */
.gcell{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--fill-2);padding:0;cursor:pointer;
-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.gcell.mine{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.gcell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
-webkit-user-drag:none;user-drag:none;pointer-events:none}
.gph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10.5px;color:var(--ink-muted)}
.gshade{position:absolute;left:0;right:0;bottom:0;height:58%;background:linear-gradient(to top,rgba(0,0,0,.82),transparent)}
.gname{position:absolute;left:6px;right:6px;bottom:6px;font-size:11.5px;font-weight:700;line-height:1.3;color:#fff;text-align:left;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.gmarks{position:absolute;left:5px;top:5px;display:flex;gap:3px;flex-wrap:wrap;max-width:calc(100% - 10px)}
.gm.act{background:#B91C1C;letter-spacing:.02em}
.gm.wit{background:#0F766E;letter-spacing:.02em}
.ec-wit{display:flex;align-items:center;gap:9px;margin:10px 0 2px}
.ec-wit img,.ec-wit .ec-wit-ph{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;background:color-mix(in srgb,var(--ink-muted) 20%,transparent)}
.ec-wit span{font-size:12.5px;color:var(--ink-muted)}
.ec-wit b{color:var(--ink)}
.prose.ec-body.said{border-left:2px solid #0F766E;padding-left:12px;font-style:italic}
.ec-act{margin-top:9px;padding:9px 11px;border-radius:10px;border:1px solid #B91C1C;background:color-mix(in srgb,#B91C1C 10%,transparent)}
.ec-act.spent{border-color:var(--ink-muted);background:color-mix(in srgb,var(--ink-muted) 8%,transparent)}
.ec-act .ea-k{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;color:#B91C1C;margin-bottom:3px}
.ec-act.spent .ea-k{color:var(--ink-muted)}
.ec-act p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-muted)}
.goalq.act b{color:#B91C1C}
.turnbox.down{border-color:#B91C1C}
.turnbox.down b{color:#B91C1C}
.slip.downed{opacity:.72}
.slip.downed .slip-n{text-decoration:line-through;text-decoration-color:color-mix(in srgb,#B91C1C 70%,transparent)}
.slip-down{margin-left:6px;font-style:normal;font-size:10.5px;font-weight:800;padding:2px 5px;border-radius:100px;background:#B91C1C;color:#fff;text-decoration:none;vertical-align:middle}
.culprit-reveal.fled{border-color:#B45309}
.fled-tag{display:block;margin-top:6px;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.04em;color:#B45309}
.rules-more{margin:4px 14px 0}
.rules-more a{display:inline-block;padding:7px 0;font-size:12.5px;color:var(--ink-muted);text-decoration:underline;text-underline-offset:3px}
.actpop{position:absolute;left:14px;right:14px;top:50%;transform:translateY(-50%);z-index:60;
padding:22px 18px 18px;border-radius:14px;text-align:center;
background:var(--grain),var(--surface-raised);border:1px solid #B91C1C;
box-shadow:0 18px 50px rgba(0,0,0,.45)}
.actpop.anim{animation:apIn .42s cubic-bezier(.16,.9,.24,1)}
@keyframes apIn{from{opacity:0;transform:translateY(-50%) scale(.88)}to{opacity:1;transform:translateY(-50%) scale(1)}}
.actpop .verdict-latin{color:#B91C1C}
.ap-faces{display:flex;align-items:center;justify-content:center;gap:14px;margin:16px 0 4px}
.ap-who{margin:0;display:grid;gap:6px;justify-items:center;width:84px}
.ap-face{display:block;width:72px;height:88px;border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--ink-muted) 20%,transparent)}
.ap-face img{width:100%;height:100%;object-fit:cover;filter:grayscale(.45)}
.ap-who.to .ap-face img{filter:grayscale(.1) contrast(1.05)}
.ap-face .ap-none{display:grid;place-items:center;width:100%;height:100%;font-size:28px;font-style:normal;color:var(--ink-muted)}
.ap-who figcaption{font-size:12.5px;font-weight:700}
.ap-arrow{width:34px;height:2px;background:#B91C1C;position:relative;flex:none}
.ap-arrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left-color:#B91C1C}
.ap-say{margin:14px 2px 0;font-size:16px;line-height:1.6}
.ap-say b{color:#B91C1C}
.ap-dots{display:flex;gap:5px;justify-content:center;margin:14px 0 0}
.ap-dots i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--ink-muted) 40%,transparent)}
.ap-dots i.on{background:#B91C1C}
.actpop .big{margin-top:16px}
.act-reveal p.blocked{border-color:var(--line);background:color-mix(in srgb,var(--ink-muted) 7%,transparent);color:var(--ink-muted)}
.act-reveal p.blocked b{color:var(--ink-muted)}
.actpop.blocked{border-color:var(--ink-muted)}
.actpop.blocked .verdict-latin{color:var(--ink-muted)}
.actpop.blocked .ap-arrow{background:var(--ink-muted);opacity:.5}
.actpop.blocked .ap-arrow::after{border-left-color:var(--ink-muted)}
.actpop.blocked .ap-say b{color:var(--ink-muted)}
.actpop.blocked .ap-who.to .ap-face img{filter:grayscale(.6)}
.act-reveal{margin:18px 0;display:grid;gap:10px}
.act-reveal p{margin:0;padding:14px 16px;border-radius:12px;border:1px solid #B91C1C;background:color-mix(in srgb,#B91C1C 10%,transparent);font-size:16px;line-height:1.55;text-align:center}
.act-reveal b{color:#B91C1C}
.act-reveal.quiet p{border-color:var(--line);background:color-mix(in srgb,var(--ink-muted) 6%,transparent);color:var(--ink-muted)}
.act-note{margin:0 0 10px;padding:8px 11px;border-radius:9px;font-size:12.5px;line-height:1.5;background:color-mix(in srgb,var(--ink-muted) 10%,transparent);color:var(--ink-muted)}
.act-note.done{background:color-mix(in srgb,#B91C1C 10%,transparent);color:#B91C1C;font-weight:700}
.end-acts{margin-top:14px;display:grid;gap:10px}
.end-acts .ea{padding:11px 13px;border-radius:11px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink-muted) 5%,transparent)}
.end-acts .ea.ok{border-color:#B91C1C;background:color-mix(in srgb,#B91C1C 8%,transparent)}
.end-acts .ea-k{display:flex;gap:7px;align-items:center;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--ink-muted);margin-bottom:5px}
.end-acts .ea-k em{font-style:normal;padding:2px 6px;border-radius:100px;background:var(--ink-muted);color:var(--paper);font-size:10px}
.end-acts .ea.ok .ea-k em{background:#B91C1C}
.score-card li small{display:block;font-size:11px;color:var(--ink-muted);font-weight:500}
.gm{font-size:10px;font-weight:800;line-height:1;padding:3px 5px;border-radius:100px;background:rgba(0,0,0,.6);color:#fff}
.gm.pair.c1{background:#FF4B3E}.gm.pair.c2{background:#3B82F6}.gm.pair.c3{background:#22C55E}
.gm.pair.c4{background:#A855F7}.gm.pair.c5{background:#F59E0B}.gm.pair.c6{background:#14B8A6}
.gm.open{background:var(--accent);color:#1A1A1A}
.gm.wait{background:var(--danger)}
/* ═══ 한 장 크게 보기 ═══ */
.cv-dim{position:absolute;inset:0;z-index:30;background:rgba(0,0,0,.66);backdrop-filter:blur(2px)}
.clueview{position:absolute;left:50%;width:calc(100% - 68px);transform:translate(-50%,-50%);top:50%;z-index:32;max-height:88%;
display:flex;flex-direction:column;border-radius:14px;border:1px solid var(--line);background:var(--grain),var(--surface-raised);overflow:hidden;
animation:cvIn .22s cubic-bezier(.2,.8,.2,1)}
@keyframes cvIn{from{opacity:0;transform:translate(-50%,-46%) scale(.98)}}
.cv-top{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 4px}
.cv-n{font-size:11.5px;font-weight:800;color:var(--ink-muted);letter-spacing:.06em}
.cv-x{border:0;background:none;color:var(--ink-muted);font-size:16px;padding:2px 6px;min-height:var(--tap);min-width:var(--tap)}
/* 사진이 있으면 쪽수와 ✕ 는 사진 위에 얹는다 — 빈 막대가 42px 을 먹고 사진을
아래로 밀어내고 있었다. 사진이 없는 증거는 예전처럼 제자리에 남는다. */
.clueview:has(.cv-photo) .cv-top{position:absolute;top:0;left:0;right:0;z-index:2;padding:10px 12px;
background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent)}
.clueview:has(.cv-photo) .cv-n,.clueview:has(.cv-photo) .cv-x{color:#F2EEE8;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.clueview:has(.cv-photo) .cv-x{font-size:18px}
.cv-photo{position:relative;display:block;width:100%;border:0;padding:0;background:var(--fill-2);cursor:zoom-in;flex:none}
.cv-photo img{width:100%;height:190px;object-fit:cover;display:block}
.cv-body{padding:12px 14px;overflow-y:auto;flex:1}
.cv-body h3{font-family:var(--serif);font-size:19px;margin:2px 0 4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* 좌우 맛보기: 옆 장이 살짝 보이고, 눌러도 넘어간다 */
.cv-peek{position:absolute;top:50%;transform:translateY(-50%);z-index:31;width:var(--tap);height:190px;border:0;padding:0;overflow:hidden;background:var(--fill-2);cursor:pointer;opacity:.55}
.cv-peek.left{left:0;border-radius:0 10px 10px 0}
.cv-peek.right{right:0;border-radius:10px 0 0 10px}
.cv-peek img{width:120px;height:100%;object-fit:cover;display:block;filter:brightness(.7)}
.cv-peek.right img{margin-left:-86px}
.pk-arrow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:22px;font-weight:800;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.cv-dots{display:flex;gap:5px;justify-content:center;padding:9px 10px 11px;border-top:1px solid var(--line)}
.clueview .cv-dots{order:1;border-top:0;padding:4px 10px 0} /* 넘기는 표시는 단추 위에 */
.clueview>.ec-acts{order:2}
.cv-dots i{width:6px;height:6px;border-radius:50%;background:var(--fill-2)}
.cv-dots i.on{background:var(--accent);width:16px;border-radius:100px}
.clueview{transition:transform .18s ease}
.clueview.dragging{transition:none}
.clueview{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pan-y} /* 가로로 미는 것은 앱이 처리 */
.clueview .cv-body{touch-action:pan-y}
.cv-peek{touch-action:none}
.clueview .cv-body{-webkit-user-select:none;user-select:none}
.cv-peek img{pointer-events:none}
/* 크게 보기: 스킨 틀이 입혀졌을 때 안쪽 여백과 모서리 */
/* 크게 보기: 스킨 틀이 입혀지면 내용을 틀 안쪽으로 */
[data-skin~="PN-05"] .clueview{background:none;padding:12px 14px;overflow:hidden}
[data-skin~="PN-05"] .clueview .cv-photo{margin:0;width:100%;border-radius:8px;overflow:hidden}
[data-skin~="PN-05"] .clueview .cv-photo img{width:100%;border-radius:8px}
/* 쪽수와 ✕ 도 모서리 장식 위에 얹혀 있었다 — 장식 아래로 내린다 */
/* 틀이 있는 스킨은 쪽수·✕ 를 사진 위로 띄우지 않는다 — 사진이 모서리 장식을 덮는다.
틀이 이미 화면을 짜 주므로 막대가 한 줄 있어도 허전하지 않다. */
[data-skin~="PN-05"] .clueview .cv-top{position:static;padding:14px 10px 5px;background:none}
[data-skin~="PN-05"] .clueview .cv-n{color:var(--ink-muted);text-shadow:none}
[data-skin~="PN-05"] .clueview .cv-x{color:var(--ink-muted);text-shadow:none;font-size:16px}
[data-skin~="PN-05"] .clueview .cv-body{padding:10px 2px 2px}
[data-skin~="PN-05"] .clueview .cv-dots{border-top:0;padding:4px 0 0}
/* 사람들 줄: 모두 같은 모양으로, 글은 사진 위에 겹치지 않는다 */
.rel .prose{font-size:13.5px;line-height:1.6}
.rel .prose.intro{color:var(--ink-muted);margin-bottom:3px}
.rel-who{margin-bottom:3px}
/* 새로 생긴 증거 표시 */
.gcell.fresh{outline:2px solid var(--accent);outline-offset:-2px}
.gcell.fresh::after{content:"NEW";position:absolute;right:5px;top:5px;font-size:9px;font-weight:800;letter-spacing:.06em;padding:2px 6px;border-radius:100px;background:var(--accent);color:#1A1A1A}
/* 잠긴 장소 */
.lplaces{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px}
.lplace{padding:10px 12px;border-radius:11px;border:1px dashed var(--line);background:var(--fill)}
.lplace.can{border-style:solid;border-color:var(--accent)}
.lp-top{display:flex;align-items:baseline;gap:8px}
.lp-k{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--ink-muted)}
.lplace.can .lp-k{color:var(--accent)}
.lp-top b{font-family:var(--serif);font-size:16px}
.lp-hint{margin:5px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-muted)}
.lp-go{width:100%;margin-top:8px;border:0;background:var(--accent);color:#1A1A1A}
/* 교환: 양쪽 진행 상태 */
.trade-state{display:flex;gap:6px;margin:10px 0 4px}
.trade-state .ts{flex:1;text-align:center;font-size:12px;font-weight:700;padding:7px 8px;border-radius:9px;border:1px dashed var(--line);color:var(--ink-muted)}
.trade-state .ts.on{border-style:solid;border-color:var(--accent);color:var(--accent)}
/* 끌어서 합치기 */
.egrid{touch-action:pan-y}
.gcell.draggable{cursor:grab;touch-action:none}
.gcell.pairready{box-shadow:inset 0 0 0 2px var(--accent)}
.gcell.pairready .gm.pair{background:var(--accent);color:#1A1A1A}
.gcell.dragging{opacity:.35}
.gcell.dropok{outline:2px dashed var(--accent);outline-offset:-2px}
.gcell.over{outline:3px solid var(--accent);outline-offset:-3px;transform:scale(1.04);transition:transform .12s ease}
.gcell.ghost{border-radius:10px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.55);transform:scale(1.06);opacity:.95}
.gcell.shake{animation:cellShake .36s ease}
@keyframes cellShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
/* ═══ 서버판: 폰 한 대, 화면 전체 ═══ */
html,body{margin:0;height:100%;background:#111}
body.solo{overflow:hidden}
body.solo #phones{display:block;height:100dvh;padding:0;margin:0}
body.solo .pwrap{display:block;height:100dvh}
body.solo .plabel{display:none}
body.solo .phone{height:100dvh;max-width:480px;border-radius:0;box-shadow:none;margin:0 auto}
@media(min-width:520px){body.solo .phone{box-shadow:0 0 0 1px #2a2a2a}}
/* PC 에서 작가 스튜디오·BOLO 관리자만 화면 폭을 다 쓴다 — 다른 화면·좁은 창은 폰 그대로.
body.solo .phone 이 max-width:480px 를 걸어 두므로 같은 구체성으로 받아친다 */
@media (min-width:900px){
body.has-wide main{max-width:none;padding:12px}
.pwrap.wide{grid-column:1/-1}
body.solo .phone.wide,.phone.wide{max-width:none;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.phone.wide{height:calc(100vh - 128px);min-height:700px}
body.solo .phone.wide{height:100dvh;min-height:0;border-radius:0}
.phone.wide .scr-body{padding:22px 28px 128px}
.phone.wide .scr-foot{padding-left:28px;padding-right:28px}
/* 넓은 화면의 작가 스튜디오: 왼쪽 원고 · 오른쪽 미리보기 */
.phone.wide .stu-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:26px;align-items:start}
.phone.wide .stu-split .stu-pv{display:block}
.phone.wide .stu-split textarea[name="stumd"]{min-height:calc(100vh - 430px)}
}
/* 미리보기 — 넓은 화면에서만 나온다 */
.stu-pv{display:none;border:1px solid var(--line);border-radius:12px;padding:18px 18px 22px;background:var(--fill);
position:sticky;top:0;max-height:calc(100vh - 210px);overflow-y:auto;overscroll-behavior:contain}
.pv-empty{padding:48px 12px;text-align:center;font-size:13px;line-height:1.8;color:var(--ink-faint)}
.pv-head{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.pv-flag{font:700 11px/1 var(--ui);padding:5px 9px;border-radius:99px;background:var(--fill-2);color:var(--ink-muted)}
.pv-flag.ok{background:var(--accent);color:var(--on-accent)}
.pv-flag.bad{background:var(--danger);color:#fff}
.pv-flag.warn{background:var(--fill-2);color:var(--ink)}
.pv-cover{margin-bottom:10px}
.pv-img{display:inline-block;font:11px/1.5 var(--mono);color:var(--ink-faint);background:var(--fill-2);border-radius:4px;padding:2px 6px;margin-left:6px}
.pv-img.none{margin:0;opacity:.6}
.pv-title{font-family:var(--serif);font-size:20px;color:var(--ink);margin:0 0 8px}
.pv-badges{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px}
.pv-badges span{font-size:11px;padding:3px 8px;border-radius:3px;background:var(--fill-2);color:var(--ink-muted)}
.pv-intro{font-size:13px;line-height:1.8;color:var(--ink-muted);margin:0 0 14px;white-space:pre-line;word-break:keep-all}
.pv-facts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0}
.pv-facts>div{flex:1 0 auto;min-width:56px;padding:7px 9px;border:1px solid var(--line);border-radius:7px}
.pv-facts dt{font-size:10px;color:var(--ink-faint);margin:0 0 2px}
.pv-facts dd{margin:0;font:600 13px/1.2 var(--ui);color:var(--ink)}
.pv-truth{padding:9px 12px;border-radius:8px;background:var(--fill-2);margin-bottom:14px}
.pv-truth b{display:block;font-size:11px;color:var(--danger);margin-bottom:3px}
.pv-truth span{font-size:12.5px;color:var(--ink)}
.pv-h{display:flex;align-items:baseline;gap:7px;font:600 12px/1 var(--ui);color:var(--ink-muted);margin:16px 0 8px}
.pv-h i{font-style:normal;font:600 11px/1 var(--mono);color:var(--accent)}
.pv-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pv-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px;padding:8px 10px;border:1px solid var(--line);border-radius:7px}
.pv-list li>i{font-style:normal;font:600 10.5px/1 var(--mono);color:var(--ink-faint);min-width:16px}
.pv-list b{font-size:12.5px;color:var(--ink)}
.pv-list small{font:11px var(--mono);color:var(--ink-faint);margin-left:auto}
.pv-list span{flex:1 0 100%;font-size:11.5px;line-height:1.6;color:var(--ink-muted);word-break:keep-all}
.pv-tag{font-style:normal;font-size:10px;font-weight:800;padding:2px 6px;border-radius:99px;background:var(--fill-2);color:var(--ink-muted)}
.pv-tag.victim{background:var(--danger);color:#fff}
.pv-tag.det,.pv-tag.lock{background:var(--accent);color:var(--on-accent)}
/* ═══ 핸드북 「나」: 접는 칸 ═══
머리글은 스크롤을 타고 위에 붙는다(sticky). 다음 칸의 머리글이 올라오면서
밀어낸다 — 긴 비밀을 읽는 동안에도 지금 무슨 칸인지가 늘 위에 있다. */
.accbox{margin-top:2px}
/* 칸 전체를 시트 여백만큼 밖으로 뺀다 — 구분선이 좌우 끝까지 간다 */
.hsec.acc{margin:0 -22px;padding:0 22px;border-bottom:1px solid var(--line)}
.hsec.acc:last-child{border-bottom:1px solid var(--line)}
.hsec.acc+.hsec.acc{padding-top:0}
.hsec.acc+.hsec.acc::before{content:none} /* 스킨의 ◆ 장식은 접는 칸에선 뺀다 */
/* 머리글은 판을 깔지 않는다 — 시트에 깔린 스킨 무늬를 사각형으로 덮어 버렸다.
대신 살짝 흐리게만 해서 무늬는 비치되 밑으로 지나가는 글줄은 읽히지 않게 한다. */
/* 띠는 좌우 끝까지 가고, 글과 아이콘은 안으로 22px 들어와 본문과 같은 자리에 선다.
전에는 띠가 글 폭에 딱 맞아 글자와 아이콘이 양 끝에 붙어 있었다. */
.hsec.acc h5{position:sticky;top:0;z-index:3;margin:0 -22px;padding:0 22px;border:0;
background:color-mix(in srgb,var(--paper) 58%,transparent);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hsec.acc h5::after{content:none}
.acc-h{display:flex;align-items:center;gap:8px;width:100%;min-height:var(--tap);
padding:11px 0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.acc-t{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.acc-i{flex:none;position:relative;width:15px;height:15px}
.acc-i::before,.acc-i::after{content:"";position:absolute;background:var(--ink-muted);border-radius:1px}
.acc-i::before{left:0;right:0;top:6.5px;height:2px}
.acc-i::after{top:0;bottom:0;left:6.5px;width:2px;transition:transform .18s ease}
.hsec.acc.open .acc-i::after{transform:scaleY(0)}
.hsec.acc.open .acc-i::before{background:var(--accent)}
/* 펼친 칸의 머리글에는 밑줄을 준다 — 본문이 그 밑으로 미끄러져 들어갈 때
글줄이 반쯤 걸린 채 잘려 보이지 않도록 자르는 선이 있어야 한다 */
.hsec.acc.open>h5{border-bottom:1px solid var(--line)}
.acc-b{padding:12px 0 20px;animation:accIn .18s ease-out}
@keyframes accIn{from{opacity:0;transform:translateY(-5px)}}
/* 핸드북 시트 머리: 이름을 손잡이 줄 왼쪽에 얹어 한 줄을 없앤다.
닫기 단추는 뺐다 — 손잡이를 누르거나 내리면, 또 바깥을 누르면 닫힌다. */
.sheet-top.compact .sheet-who{position:absolute;left:18px;top:0;height:var(--tap);
display:flex;align-items:center;gap:5px;pointer-events:none;z-index:1}
.sheet-top.compact .sheet-who b{font:700 14.5px var(--read)}
.sheet-top.compact .sheet-who .who-in{font-size:12px}
/* ═══ 한글 줄바꿈 ═══
기본값(word-break:normal)은 한글을 음절 단위로 끊는다 — 「심지어」가 「심 / 지어」로,
「명품」이 「명 / 품」으로 갈라졌다. keep-all 로 어절을 통째로 넘긴다.
한 줄에 못 들어가는 긴 덩어리(주소 같은 것)만 break-word 로 풀어 준다. */
.prose,.guide,.hint,.script,.epilogue,.lock-q,.lost-t,.slip-k,.rel-txt,.tb-txt,.cm,.clue-tag{
word-break:keep-all;overflow-wrap:break-word}
/* ═══ 잠긴 쪽지: 카드 + 번호판 팝업 ═══
전에는 번호판을 쪽지 목록 안에 통째로 깔아 한 쪽지가 화면을 다 먹었다.
이제 카드에는 물음과 「잠금 풀기」만 두고, 번호판은 가운데 팝업으로 띄운다. */
.lock-card{margin:6px 0 18px;padding:16px;border-radius:12px;background:var(--fill)}
.lock-card .slip-k b{color:var(--accent)}
.lock-go{display:block;width:100%;min-height:var(--tap);border:0;border-radius:10px;
background:var(--fill-2);color:var(--ink);font:700 15px var(--read)}
.lock-go:active{transform:scale(.99)}
.lock-card .lock-warn{margin:10px 0 0}
/* 팝업 안에서는 물음이 제목 자리에 오고, 경고가 번호판 바로 위에 붙는다 */
.confirm.notepad h3{font:700 17px/1.55 var(--read);margin:10px 0 14px}
.confirm.notepad .lock-note{margin:0;padding:0;background:none}
.confirm.notepad .lock-warn{margin:0 0 12px}
.confirm.notepad .linkbtn{display:block;margin:10px auto 0}
/* 크레딧 카드는 바탕이 페이지보다 밝다(--ink 8% + --surface). 그 위에서 --ink-muted 는
4.13 으로 4.5 를 못 넘는다 — 카드 안에서만 한 단계 올린다. 크레딧 화면은 시험이
닿지 않던 곳이라 이제껏 걸리지 않았다. */
.ccard{--cc-muted:color-mix(in srgb,var(--ink) 74%,transparent)}
.cc-date,.cc-work,.cc-branch{color:var(--cc-muted)}
/* 서재 「작품」 칸에서 이미 빌린 작품에 붙는 작은 표 */
.book-meta h3 .own-tag{margin-left:7px;font:700 10.5px/1 var(--ui);letter-spacing:.02em;
color:var(--accent);border:1px solid var(--accent);border-radius:99px;padding:3px 7px;vertical-align:middle}
.rent-terms{margin-top:14px}
/* ═══ 앱처럼 — 글자를 끌어 고르거나 그림을 길게 눌러 메뉴가 뜨지 않는다 ═══
마우스로 끄는 동작(시트 손잡이 · 지도 밀기 · 증거 다이얼 · 분 다이얼)이 글자 선택에
잡아먹히지 않게 하는 것이 목적이다. 웹에서도 손으로 쥔 것처럼 끌린다.
여태 필요한 자리마다 하나씩 붙이고 있었다 — 붙이지 않은 곳이 계속 남았다. */
.phone{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
/* 글을 넣고 고치는 곳은 열어 둔다 */
.phone input,.phone textarea,.phone select,.phone [contenteditable]{-webkit-user-select:text;user-select:text}
/* 작가 스튜디오와 마이페이지는 일하는 면이다 — 검수 메시지나 값을 집어 가야 한다 */
.phone .stu,.phone .my{-webkit-user-select:text;user-select:text}
/* 되찾기 코드는 한 번에 집히게 (다시 안 보여 준다) */
.rec-code{-webkit-user-select:all;user-select:all}
/* 그림은 끌어내지 못한다 */
.phone img{-webkit-user-drag:none}
/* ═══ 받은 쪽지 — 증거 격자에 같은 모양으로 앉는다 ═══
쪽지 탭을 없애고 여기로 옮겼다. 사진이 없으므로 글자 한 마디로 상태를 말한다. */
.gcell.note{background:var(--fill)}
/* 카드 **안쪽** 위에 두르는 띠. 바깥에 머리를 달면 목록이 또 갈린다 —
증거와 한 격자에 섞여 있으므로 무엇인지는 이 띠가 말한다. */
.gcell.note .nband{position:absolute;left:0;right:0;top:0;z-index:2;
padding:4px 6px;font:700 10px/1.2 var(--ui);letter-spacing:.04em;text-align:center;
background:var(--accent);color:var(--on-accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 꽝 띠도 읽혀야 한다 — 흐린 회색에 흐린 글자는 2.98 이었다 */
.gcell.note.dud .nband{background:color-mix(in srgb,var(--ink) 22%,#000);color:var(--ink-muted)}
/* 그림은 어느 작품이나 같다. 무엇인지는 위의 띠가, 어느 장 것인지는 아래 이름이 말한다.
모서리 NEW 표는 쪽지에서 뺀다 — 띠(z-index 2)가 카드 위 18px 를 가로지르는데 이 표는
5px 자리라, 띠 뒤에 깔려 보이지도 않으면서 띠와 맞붙어 한 덩어리로 읽힌다.
안 읽었다는 것은 fresh 가 두르는 테두리만으로 말한다. */
.gcell.note.fresh::after{content:none}
.gcell.note.dud img{filter:grayscale(1)}
.gcell.note.dud{opacity:.55}
.gcell.note.dud .note-ph{color:var(--ink-faint)}
.gm.dud{background:rgba(0,0,0,.72);color:var(--ink-faint)}
/* 쪽지 읽기 팝업 */
.confirm.noteview .prose{font-size:15px;line-height:1.85;margin-bottom:6px}
.confirm.noteview .linkbtn{display:block;margin:12px auto 0}
/* ═══ 누르면 바로 반응한다 ═══
서버에 다녀오는 버튼은 답이 올 때까지 화면이 아무 말도 하지 않았다. 회선 왕복이
150ms 면 버튼 하나에 300ms 가까이 먹통이라 렉처럼 느껴진다.
누른 것은 흐려지고, 폰 맨 위에 얇은 띠가 흐른다.
둘 다 120ms 늦게 나타난다 — 금방 끝나는 동작에서 깜빡이면 오히려 지저분하다.
흐려지는 것은 가짜 요소(::after) 대신 opacity 로 한다. .sending 은 아무 요소에나
붙으므로, ::after 를 쓰면 이미 그것을 쓰고 있는 곳(.mpin 의 손가락 자리 등)을 덮는다. */
.sending{opacity:.5;pointer-events:none;transition:opacity .16s .12s}
.phone.busy::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;z-index:40;opacity:0;pointer-events:none;
background:linear-gradient(90deg,transparent,var(--accent),transparent);
animation:send-bar-in .16s .12s forwards,send-bar .9s .12s linear infinite}
@keyframes send-bar-in{to{opacity:.95}}
@keyframes send-bar{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
.phone.busy::before{animation:send-bar-in .16s .12s forwards}
.sending{transition:none}
}
/* ══ 게임 전 화면 ══════════════════════════════════════════════
서재·마이페이지·대여 상세는 「고르고 · 빌리고 · 확인하는」 한 덩어리다.
여기 규칙은 그 셋이 같이 쓴다. */
/* ── 아래 칸 막대 ──────────────────────────────────────────
마이페이지로 가는 길이 머리말의 작은 글자와 ⋯ 시트 안뿐이었다.
빌린 것도 결제한 것도 거기 있는데 길이 숨어 있으면 없는 것과 같다. */
.navtabs{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;
background:var(--surface);border-top:1px solid var(--line);
padding-bottom:env(safe-area-inset-bottom)}
.navtabs button{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
min-height:58px;border:0;background:none;color:var(--ink-muted);font-size:11px;font-weight:600;letter-spacing:.01em}
.navtabs button[aria-selected="true"]{color:var(--accent)}
.nt-i{display:block;width:19px;height:19px;border:1.6px solid currentColor;border-radius:3px}
.nt-i.nt-works{border-radius:2px 4px 4px 2px;border-left-width:3.4px} /* 책등 */
.nt-i.nt-rentals{border-radius:3px;border-style:dashed} /* 기한이 있는 표 */
.nt-i.nt-credits{border-radius:50%} /* 카드의 인장 */
.nt-i.nt-me{width:17px;height:17px;border-radius:50% 50% 40% 40%} /* 사람 */
.nt-n{position:absolute;top:8px;left:50%;margin-left:4px;min-width:15px;height:15px;padding:0 4px;
border-radius:99px;background:var(--accent);color:var(--on-accent);font:700 10px/15px var(--mono);text-align:center}
/* 막대가 선 화면은 바닥에 그만큼 자리를 비운다 */
.scr.has-nav .scr-body{padding-bottom:196px}
.scr.has-nav.nav-bare .scr-body{padding-bottom:92px}
.scr.has-nav .scr-foot{bottom:58px}
.scr.has-nav .scr-foot:empty{display:none}
.scr.has-nav .scr-foot:empty + .navtabs,
.scr.has-nav .scr-foot:empty ~ .navtabs{box-shadow:0 -10px 20px -12px rgba(0,0,0,.5)}
/* ── 첫 화면 ───────────────────────────────────────────────
맞이하는 자리라 전부 가운데로 세운다. 왼쪽 정렬한 목록은 읽을거리로 보이고,
처음 온 사람에게 「읽고 나서 들어오라」는 말이 된다. */
.wel{text-align:center;padding-top:34px;word-break:keep-all;overflow-wrap:anywhere}
.wel-hero{padding:0 4px}
.wel .wel-h{margin:8px 0 14px;font-size:27px;line-height:1.3}
.wel-lede{margin:0;font-size:13.5px;line-height:1.85;color:var(--ink-muted)}
/* 준비물 셋 — 한 줄에 나란히. 값이 먼저 눈에 들어오고 이름은 아래 작게 */
.wel-need{list-style:none;display:flex;margin:26px 0 0;padding:17px 4px;border-radius:14px;
background:color-mix(in srgb,var(--surface-sunken) 82%,transparent);border:1px solid var(--line)}
.wel-need li{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px}
/* 칸 사이 가는 선 — 세 가지가 따로따로 읽히게 한다 */
.wel-need li + li::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;
background:color-mix(in srgb,var(--ink) 18%,transparent)}
.wel-need b{font-size:16px;line-height:1.25;letter-spacing:-.01em}
.wel-need span{font-size:11.5px;color:var(--ink-muted);letter-spacing:.02em}
.wel-note{max-width:25em;margin:13px auto 0;font-size:12.5px;line-height:1.75;color:var(--ink-muted)}
.wel-rule{height:1px;margin:30px auto 24px;width:64px;
background:linear-gradient(to right,transparent,var(--line) 20%,var(--line) 80%,transparent)}
.wel-sec{margin:0 0 22px;font:600 12.5px/1 var(--ui);letter-spacing:.08em;color:var(--ink-muted)}
/* 흐름 — 번호를 글 위 가운데 두고, 단계 사이를 실선으로 잇는다 */
.wel-flow{list-style:none;margin:0;padding:0;counter-reset:wf}
.wel-flow li{position:relative;counter-increment:wf;padding:0 6px 26px}
.wel-flow li:last-child{padding-bottom:6px}
.wel-flow li::before{content:counter(wf);display:block;width:24px;height:24px;margin:0 auto 9px;
border-radius:50%;border:1px solid var(--accent);color:var(--accent);
font:700 12px/22px var(--mono)}
/* 다음 번호로 이어지는 선. 마지막 단계 아래로는 잇지 않는다 */
.wel-flow li:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:18px;
margin-left:-.5px;background:color-mix(in srgb,var(--accent) 45%,transparent)}
.wel-flow b{display:block;font-size:15.5px;margin-bottom:5px}
.wel-flow span{display:block;max-width:21.5em;margin:0 auto;font-size:12.5px;line-height:1.7;color:var(--ink-muted)}
.wel-login{margin:24px 0 0;font-size:13px;color:var(--ink-muted)}
.wel-more{margin:10px 0 0;font-size:13px}
/* ── 대여 한 건의 얼굴 (서재 · 마이페이지 · 상세가 같이 쓴다) ── */
.rc-state{display:inline-flex;align-items:center;height:21px;padding:0 9px;border-radius:99px;
font-size:11.5px;font-weight:700;letter-spacing:.01em}
.rc-go{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.rc-live{background:var(--accent);color:var(--on-accent)}
.rc-done{background:var(--fill);color:var(--ink-muted)}
.rc-off{background:var(--fill);color:var(--ink-faint)}
.rc-facts{display:block;margin-top:7px}
.rc-facts span{display:block;font-size:12.5px;line-height:1.65;color:var(--ink-muted)}
.rc-line{display:block;margin:8px 0 2px}
/* ── 서재: 검색 ─────────────────────────────────────────────── */
.libsearch{position:relative;margin:2px 0 12px}
.libsearch input{width:100%;min-height:var(--tap);padding:0 38px 0 13px;border-radius:99px;
border:1px solid var(--line);background:var(--surface-sunken);color:var(--ink);font-size:14px}
.libsearch input::placeholder{color:var(--ink-faint)}
.libsearch input:focus{outline:none;border-color:var(--accent)}
.libsearch input::-webkit-search-cancel-button{display:none}
.libq-x{position:absolute;right:2px;top:50%;transform:translateY(-50%);min-width:var(--tap);min-height:var(--tap);
border:0;background:none;color:var(--ink-muted);font-size:19px;line-height:1}
.lib-qn{margin:0 0 4px;font-size:12.5px;color:var(--ink-muted)}
.lib-join{margin:8px 0 0}
/* ── 마이페이지: 대여 한 줄은 상세로 들어가는 문이다 ──────────── */
.my-item.rent{display:block;padding:0}
.rent-go{display:block;width:100%;position:relative;padding:13px 34px 14px 14px;border:0;background:none;text-align:left;color:var(--ink)}
.rent-go b{display:block;font-size:14.5px;margin-bottom:7px}
.rent-chev{position:absolute;right:15px;top:50%;width:7px;height:7px;margin-top:-4px;
border-right:1.6px solid var(--ink-faint);border-bottom:1.6px solid var(--ink-faint);transform:rotate(-45deg)}
/* ── 대여 상세 (영수증) ─────────────────────────────────────── */
.rd .h1{margin-bottom:10px}
.rd-badge{margin-bottom:18px}
.rd-list{margin:0;padding:0;border-radius:12px;background:var(--fill);overflow:hidden}
.rd-row{display:grid;grid-template-columns:82px 1fr;gap:12px;align-items:baseline;padding:12px 14px;border-bottom:1px solid var(--line)}
.rd-row:last-child{border-bottom:0}
.rd-row dt{font-size:12.5px;color:var(--ink-muted)}
.rd-row dd{margin:0;font-size:14px;line-height:1.55}
.rd-row.amt dd{font-size:17px;font-weight:700}
.rd-em{font-style:normal;margin-left:6px;font-size:11.5px;font-weight:700;color:var(--accent)}
.rd-was{display:block;margin-top:3px;font-size:12px;font-weight:400;color:var(--ink-muted);text-decoration:line-through}
.rd-code{font:600 13px/1.5 var(--mono);letter-spacing:.04em;word-break:break-all}
.rd-refund{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;
padding:13px 14px;border-radius:12px;border:1px solid var(--line)}
.rd-refund b{display:block;font-size:13.5px;margin-bottom:3px}
.rd-refund span{font-size:12.5px;line-height:1.6;color:var(--ink-muted)}
.rd-act{flex:none;min-height:var(--tap);padding:0 14px;border-radius:99px;border:1px solid var(--line);
background:none;color:var(--ink);font-size:13px;font-weight:600}
/* ══ 작가 스튜디오: 흐름 편집기 ═══════════════════════════════
장을 카드로 세우고 위아래로 옮긴다. 원본은 여전히 원고이고, 고칠 때마다
「# 블록」 절만 다시 찍어 갈아 끼운다 — 나머지 글자는 그대로 남는다. */
.stu-tabs{display:flex;gap:4px;margin:0 0 10px;border-bottom:1px solid var(--line)}
.stu-tabs button{min-height:var(--tap);padding:0 14px;border:0;background:none;color:var(--ink-muted);
font-size:13.5px;font-weight:600;border-bottom:2.5px solid transparent;margin-bottom:-1px}
.stu-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.stu-tabs span{font:600 11px/1 var(--mono);color:var(--accent);margin-left:4px}
.flow{display:block}
.flow-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;
font-size:12.5px;color:var(--ink-muted)}
.btn-s.flow-add{margin-top:10px}
.fl-card{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--surface-sunken)}
.fl-card.open{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.fl-card.bad{border-color:color-mix(in srgb,var(--danger) 55%,var(--line))}
.fl-head{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 10px}
/* 몇 번째 장인지. 순서가 이 편집기의 주인공이라 번호를 먼저 보여 준다 */
.fl-n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--fill);color:var(--ink-muted);
font:700 11px/22px var(--mono);text-align:center}
.fl-title{flex:1;min-width:0;display:block;border:0;background:none;text-align:left;padding:6px 2px;
min-height:var(--tap);color:var(--ink)}
.fl-title b{display:block;font-size:14px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-title small{display:block;margin-top:2px;font-size:11.5px;color:var(--ink-muted)}
.fl-move{flex:none;display:flex;gap:2px}
.fl-move button{min-width:var(--tap);min-height:var(--tap);border:0;background:none;
color:var(--ink-muted);font-size:11px}
.fl-move button:disabled{opacity:.3}
.fl-msg{list-style:none;margin:0;padding:0 10px 8px 40px}
.fl-msg li{font-size:12px;line-height:1.55;padding:1px 0}
.fl-msg li.err{color:var(--danger)}
.fl-msg li.warn{color:var(--ink-muted)}
.fl-body{padding:2px 10px 12px;border-top:1px solid var(--line)}
.fl-f{display:block;margin-top:10px}
.fl-f>span{display:block;margin-bottom:4px;font-size:11.5px;color:var(--ink-muted)}
.fl-f input,.fl-f select,.fl-f textarea{width:100%;min-height:var(--tap);padding:8px 10px;border-radius:8px;
border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:13.5px;font-family:inherit}
.fl-f textarea{min-height:64px;line-height:1.6;resize:vertical}
.fl-f input:focus,.fl-f select:focus,.fl-f textarea:focus{outline:none;border-color:var(--accent)}
.fl-hint{margin:10px 0 0}
.fl-act{display:flex;gap:6px;margin-top:14px}
.fl-act .btn-s{flex:1}
.btn-s.danger-t{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
/* ══ 원고 편집기 ══════════════════════════════════════════════
작가는 글만 쓰고, 고르는 것은 목록에서 고른다. id 는 화면에 거의 안 나온다. */
.stu-tabs{flex-wrap:wrap}
.ed{display:block}
.ed-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;
font-size:12.5px;color:var(--ink-muted)}
.ed-one{padding-bottom:8px}
.ed-h{margin:22px 0 2px;font:700 13px/1.3 var(--read);color:var(--ink)}
.ed-h:first-of-type{margin-top:18px}
/* 한 줄 목록 (배역·현장·증거) */
.ed-row{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;margin-bottom:6px;
border:1px solid var(--line);border-radius:10px;background:var(--surface-sunken);text-align:left;color:var(--ink)}
.ed-row-t{flex:1;min-width:0}
.ed-row-t b{display:block;font-size:14.5px;line-height:1.3}
.ed-row-t small{display:block;margin-top:2px;font-size:11.5px;color:var(--ink-muted)}
.ed-chev{flex:none;width:7px;height:7px;border-right:1.6px solid var(--ink-faint);
border-bottom:1.6px solid var(--ink-faint);transform:rotate(-45deg)}
/* 초상 자리 */
.ed-face{flex:none;position:relative;display:block;width:38px;height:46px;border-radius:4px;overflow:hidden;
background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.ed-face.sm{width:28px;height:34px}
.ed-face.lg{width:72px;height:90px;border-radius:6px}
.ed-face img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.ed-noface{position:absolute;inset:0;background:repeating-linear-gradient(-45deg,transparent 0 6px,color-mix(in srgb,var(--ink) 7%,transparent) 6px 7px)}
/* 칸 */
.ed-f{display:block;margin-top:12px}
.ed-f>span{display:block;margin-bottom:4px;font-size:11.5px;color:var(--ink-muted)}
.ed-f input,.ed-f select,.ed-f textarea{width:100%;min-height:var(--tap);padding:9px 11px;border-radius:8px;
border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px;font-family:inherit;line-height:1.6}
.ed-f textarea{resize:vertical}
.ed-f input:focus,.ed-f select:focus,.ed-f textarea:focus{outline:none;border-color:var(--accent)}
.ed-two{display:flex;gap:8px}
.ed-two>.ed-f{flex:1;min-width:0}
/* 여럿 고르기 — 눌러서 켜고 끈다 */
.ed-chips{display:flex;flex-wrap:wrap;gap:6px}
.ed-chip{min-height:var(--tap);padding:0 11px;border-radius:99px;border:1px solid var(--line);
background:none;color:var(--ink-muted);font-size:12.5px}
.ed-chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
/* 머리 — 초상과 이름·역할이 나란히 */
.ed-head{display:flex;gap:12px;align-items:flex-start;margin-top:4px}
.ed-head-t{flex:1;min-width:0}
.ed-head-t .ed-f:first-child{margin-top:0}
/* 이 사람이 보는 다른 사람들 */
.ed-rels{margin-top:4px}
.ed-rel{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px dotted var(--line)}
.ed-rel:last-child{border-bottom:0}
.ed-rel-f{flex:1;min-width:0;display:block}
.ed-rel-f>span{display:block;margin-bottom:4px;font-size:12.5px;font-weight:600}
.ed-rel-f input{width:100%;min-height:var(--tap);padding:8px 10px;border-radius:8px;border:1px solid var(--line);
background:var(--surface);color:var(--ink);font-size:13.5px}
.ed-rel-f input:focus{outline:none;border-color:var(--accent)}
.ed-rel-back{display:block;margin-top:4px;font-style:normal;font-size:11.5px;color:var(--ink-muted)}
.ed-rel-back.off{color:var(--ink-faint)}
/* 접어 두는 묶음 (엔진이 채점하는 목표 · 작가 메모) */
.ed-more{display:block;width:100%;margin-top:16px;min-height:var(--tap);padding:0 12px;text-align:left;
border:1px solid var(--line);border-radius:8px;background:none;color:var(--ink-muted);font-size:12.5px}
.ed-more[aria-expanded="true"]{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.ed-sub{padding:2px 12px 14px;border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px}
.ed-msg{list-style:none;margin:0 0 10px;padding:9px 12px;border-radius:8px;background:var(--fill)}
.ed-msg li{font-size:12px;line-height:1.6;color:var(--ink-muted)}
.ed-act{margin-top:20px}
.ed code{font:600 12px/1.5 var(--mono);padding:1px 5px;border-radius:4px;background:var(--fill)}
/* 사건 중에 방장이 꺼내는 초대 창 — 나간 사람을 다시 부를 때 */
.inv-pop{max-width:320px}
.inv-pop .qr{width:168px;height:168px;margin:14px auto 10px;padding:9px;border-radius:8px;background:#fff}
.inv-pop .qr svg{width:100%;height:100%;display:block}
.inv-pop .code{font:700 25px/1 var(--mono);letter-spacing:.16em;text-align:center;color:var(--accent);margin:0 0 12px}
.inv-pop .code span{display:inline-block;width:12px}
.inv-pop .inv-btns{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.inv-pop .inv-copy{min-height:var(--tap);padding:0 13px;border-radius:99px;border:0;background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:700}
.inv-pop .inv-copy.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.inv-pop .hint{margin-top:12px;text-align:left}
.inv-gone{margin:0 0 4px;font-size:12.5px;color:var(--accent)}