/* @font-face 시작 — tools/subset-font.py 가 만듦 (손으로 고치지 마세요) */
@font-face {
  font-family: 'Galmuri11';
  src: url('../fonts/galmuri-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+20A3-20A4, U+20A7, U+20A9, U+20AC, U+20B9, U+20BD, U+2103, U+2109, U+2113, U+2116, U+2121-2122, U+2126, U+212E, U+2150-217F, U+2189-218B, U+2463-2482, U+249C-24CF, U+24EA-24F4, U+24FF, U+2501, U+2503-254F, U+2551-259F, U+2706, U+2776-2793, U+2800-283E, U+2840-28FF, U+3200-321C, U+3232-3233, U+3239, U+3260-327B, U+327E-327F, U+32A4-32A8, U+3303, U+330D, U+3314, U+3318, U+3322-3323, U+3326-3327, U+332B, U+3336, U+333B, U+3349-334A, U+334D, U+3351, U+3357, U+337B-337E, U+3380-3384, U+3388-33C1, U+33C3-33C6, U+33C8-33CA, U+33CD, U+33CF-33D0, U+33D3, U+33D6, U+33DB-33DD, U+AC02-AC03, U+AC05-AC06, U+AC0B-AC0F, U+AC18, U+AC1E-AC1F, U+AC21-AC23, U+AC25-AC2B, U+AC2E, U+AC32-AC37, U+AC3A-AC3B, U+AC3D-AC3F, U+AC41-AC4A, U+AC4C, U+AC4E-AC53, U+AC55-AC57, U+AC59-AC5B, U+AC5D-AC6F, U+AC72-AC73, U+AC75-AC76, U+AC79, U+AC7B-AC7F, U+AC82, U+AC87-AC88, U+AC8D-AC8F, U+AC91-AC93, U+AC95-AC9B, U+AC9E, U+ACA2-ACA7, U+ACAB, U+ACAD-ACAE, U+ACB1-ACB7, U+ACBA, U+ACBE-ACC0, U+ACC2-ACC3, U+ACC5-ACC7, U+ACC9-ACCB, U+ACCD-ACD4, U+ACD6, U+ACD8-ACDF, U+ACE2-ACE3, U+ACE5-ACE6, U+ACE9, U+ACEB, U+ACED-ACEE, U+ACF2, U+ACF4, U+ACF7-ACFB, U+ACFE-ACFF, U+AD01-AD03, U+AD05, U+AD07-AD0B, U+AD0E, U+AD10, U+AD12-AD17, U+AD19-AD1B, U+AD1D-AD1F, U+AD21-AD28, U+AD2A-AD2B, U+AD2E-AD33, U+AD36-AD37, U+AD39-AD3B, U+AD3D-AD43, U+AD46, U+AD48, U+AD4A-AD4F, U+AD51-AD53, U+AD55-AD57, U+AD59-AD60, U+AD62, U+AD64-AD6B, U+AD6E-AD6F, U+AD71-AD72, U+AD77-AD7A, U+AD7E, U+AD80, U+AD83-AD87, U+AD8A-AD8B, U+AD8D-AD8F, U+AD91-AD9B, U+AD9E-ADA3, U+ADA5-ADB6, U+ADB8-ADBF, U+ADC2-ADC3, U+ADC5-ADC7, U+ADC9-ADCF, U+ADD2, U+ADD4-ADDB, U+ADDD-ADDF, U+ADE1-ADE3, U+ADE5-ADF7, U+ADFA-ADFB, U+ADFD-ADFE, U+AE02-AE07, U+AE0A, U+AE0C, U+AE0E-AE13, U+AE15-AE2F, U+AE32-AE33, U+AE35-AE36, U+AE39, U+AE3B-AE3F, U+AE42, U+AE44, U+AE47-AE49, U+AE4B, U+AE4F, U+AE51-AE53, U+AE55, U+AE57-AE5B, U+AE5E, U+AE62-AE64, U+AE66-AE67, U+AE6A-AE6B, U+AE6D-AE6F, U+AE71-AE77, U+AE7A, U+AE7E-AE83, U+AE86-AE8B, U+AE8D-AEBB, U+AEBF, U+AEC1-AEC3, U+AEC5-AECB, U+AECE, U+AED2-AED7, U+AEDA-AEDB, U+AEDD-AEE7, U+AEE9-AEEA, U+AEEC, U+AEEE-AEF3, U+AEF5-AEF7, U+AEF9-AEFB, U+AEFD-AF06, U+AF09-AF0C, U+AF0E-AF0F, U+AF11-AF2B, U+AF2E-AF2F, U+AF31, U+AF33, U+AF35-AF3B, U+AF3E, U+AF40, U+AF44-AF47, U+AF4A-AF4F, U+AF51-AF5B, U+AF5E-AF63, U+AF66-AF78, U+AF7A-AF7F, U+AF81-AF83, U+AF85-AF87, U+AF89-AF8F, U+AF92-AF94, U+AF96-AF9B, U+AF9D-AFB7, U+AFBA-AFBB, U+AFBD-AFBF, U+AFC1-AFC6, U+AFCA, U+AFCC, U+AFCF-AFD3, U+AFD5-AFDB, U+AFDD-AFE7, U+AFEA-AFEF, U+AFF2-AFF3, U+AFF5-AFF7, U+AFF9-AFFF, U+B002-B003, U+B005-B00B, U+B00D-B00F, U+B011-B013, U+B015-B01B, U+B01E-B027, U+B029-B043, U+B046-B047, U+B049, U+B04B, U+B04D, U+B04F-B052, U+B056, U+B058, U+B05A-B05C, U+B05E-B07B, U+B07E-B07F, U+B081-B083, U+B085-B08B, U+B08E, U+B090, U+B092-B097, U+B09B, U+B09D-B09E, U+B0A3-B0A7, U+B0AA, U+B0B0, U+B0B2, U+B0B6-B0B7, U+B0B9-B0BB, U+B0BD-B0C3, U+B0C6, U+B0CA-B0CF, U+B0D2-B0D3, U+B0D5-B0D7, U+B0D9-B0DF, U+B0E1-B0E4, U+B0E6-B107, U+B10A, U+B10D-B10F, U+B111, U+B114-B117, U+B11A, U+B11E-B122, U+B126-B127, U+B129-B12B, U+B12D-B133, U+B136, U+B13A-B13F, U+B142-B143, U+B145-B147, U+B149-B14F, U+B152-B153, U+B156-B157, U+B159-B15B, U+B15D-B15F, U+B161-B177, U+B17A-B17B, U+B17D-B17F, U+B181, U+B183-B187, U+B18A, U+B18C, U+B18E-B191, U+B195-B197, U+B199-B19B, U+B19D-B1A7, U+B1A9-B1CB, U+B1CD-B1CF, U+B1D1-B1D3, U+B1D5-B1DB, U+B1DE, U+B1E0-B1E7, U+B1EA-B1EB, U+B1ED-B1EF, U+B1F1-B1F8, U+B1FA, U+B1FC, U+B1FE-B203, U+B206-B207, U+B209-B20A, U+B20D-B213, U+B216, U+B218, U+B21A-B21F, U+B221-B233, U+B235-B23B, U+B23D-B257, U+B259-B25B, U+B25D-B25F, U+B261-B267, U+B26A-B273, U+B276-B27B, U+B27D-B283, U+B286-B288, U+B28A-B28F, U+B292-B293, U+B295-B297, U+B29B-B29F, U+B2A2, U+B2A4, U+B2A7-B2A9, U+B2AB, U+B2AD-B2AF, U+B2B1-B2B3, U+B2B5-B2C7, U+B2CA-B2CB, U+B2CD-B2CF, U+B2D1, U+B2D3-B2D7, U+B2DA, U+B2DC, U+B2DE-B2E1, U+B2E3, U+B2E7, U+B2E9-B2EA, U+B2F0-B2F2, U+B2F6, U+B2FC-B2FE, U+B302-B303, U+B305-B307, U+B309-B30F, U+B312, U+B316-B31B, U+B31D-B353, U+B357, U+B359-B35A, U+B35D, U+B360-B363, U+B366, U+B368, U+B36A, U+B36C-B36D, U+B36F, U+B372-B373, U+B375-B377, U+B379-B37F, U+B382, U+B386-B38B, U+B38D-B38F, U+B391-B393, U+B395-B39F, U+B3A2-B3A7, U+B3A9-B3AB, U+B3AD-B3C3, U+B3C6-B3C7, U+B3C9-B3CA, U+B3CD, U+B3CF, U+B3D1-B3D3, U+B3D6, U+B3D8, U+B3DA, U+B3DC, U+B3DE-B3DF, U+B3E1-B3E3, U+B3E5-B3E7, U+B3E9-B3FB, U+B3FD-B40F, U+B411-B417, U+B419-B41B, U+B41D-B41F, U+B421-B427, U+B42A, U+B42C-B433, U+B435-B44F, U+B452-B453, U+B455-B457, U+B459-B45F, U+B462, U+B464, U+B466-B46B, U+B46D-B47F, U+B481-B487, U+B489-B49C, U+B49E-B4A3, U+B4A5-B4A7, U+B4A9-B4AB, U+B4AD-B4B4, U+B4B6, U+B4B8, U+B4BA-B4BF, U+B4C1-B4C3, U+B4C5-B4C7, U+B4C9-B4CF, U+B4D1-B4D4, U+B4D6-B4DB, U+B4DE-B4DF, U+B4E1-B4E2, U+B4E5, U+B4E7-B4EB, U+B4EE, U+B4F0, U+B4F2-B4F7, U+B4F9-B513, U+B516-B517, U+B519-B51A, U+B51D-B523, U+B526, U+B52B-B52F, U+B532-B533, U+B535-B537, U+B539-B53F, U+B542, U+B546-B54A, U+B54E-B54F, U+B551-B553, U+B555-B55B, U+B55E, U+B562-B59F, U+B5A2-B5A3, U+B5A5-B5A7, U+B5A9, U+B5AC-B5AF, U+B5B2, U+B5B6-B5BA, U+B5BE-B5BF, U+B5C1-B5C3, U+B5C5-B5CB, U+B5CE, U+B5D2-B5D7, U+B5D9-B5EB, U+B5ED-B60F, U+B612-B613, U+B615-B617, U+B619-B624, U+B626-B62B, U+B62D-B633, U+B635-B647, U+B649-B663, U+B665-B667, U+B669-B69B, U+B69E-B69F, U+B6A1-B6A3, U+B6A5-B6AA, U+B6AD-B6B0, U+B6B2-B6D3, U+B6D5-B6EF, U+B6F1-B6F3, U+B6F5-B6F7, U+B6F9-B6FF, U+B702-B704, U+B706-B727, U+B72A-B72B, U+B72D-B72E, U+B731-B737, U+B73A, U+B73C-B743, U+B745-B747, U+B749-B74B, U+B74D-B753, U+B756-B75F, U+B761-B763, U+B765-B767, U+B769-B76F, U+B772, U+B774, U+B776-B77B, U+B77E-B77F, U+B781-B783, U+B785-B78B, U+B78E, U+B793-B795, U+B79A-B79B, U+B79D-B79F, U+B7A1-B7A7, U+B7AA, U+B7AE-B7B3, U+B7B6-B7B7, U+B7B9-B7C6, U+B7C8, U+B7CA-B7EB, U+B7EE-B7EF, U+B7F1-B7F3, U+B7F5-B7FB, U+B7FE, U+B802-B806, U+B80A-B80B, U+B80D-B80F, U+B811-B817, U+B81A, U+B81C, U+B81E-B823, U+B826-B827, U+B829-B82B, U+B82D-B833, U+B836, U+B83A-B83F, U+B841-B843, U+B845-B850, U+B852, U+B854-B85B, U+B85E-B85F, U+B861-B863, U+B865-B86B, U+B86E, U+B870, U+B872-B877, U+B879-B87B, U+B87D-B88C, U+B88E-B8A7, U+B8A9-B8AF, U+B8B1-B8B3, U+B8B5-B8B7, U+B8B9-B8BF, U+B8C2, U+B8C4, U+B8C6-B8CB, U+B8CD-B8CF, U+B8D1-B8D3, U+B8D5-B8DC, U+B8DE, U+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+B93E-B93F, U+B941-B943, U+B945-B94B, U+B94D-B94E, U+B950, U+B952-B957, U+B95A-B95B, U+B95D-B95F, U+B961-B967, U+B96A, U+B96C, U+B96E-B973, U+B976-B977, U+B979-B97B, U+B97D-B983, U+B986, U+B988, U+B98B-B98C, 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+B9D3-B9D7, U+B9DA, U+B9DC, U+B9DF-B9E0, U+B9E2, U+B9E6-B9E7, U+B9E9-B9EB, U+B9ED-B9F3, U+B9F6, U+B9FB-B9FF, U+BA02-BA07, U+BA09-BA14, U+BA16-BA37, U+BA3A-BA3B, U+BA3D-BA3F, U+BA41, U+BA43-BA47, U+BA4A, U+BA4C, U+BA4F-BA52, U+BA56-BA57, U+BA59-BA5B, U+BA5D-BA63, U+BA66, U+BA6A-BA6F, U+BA72-BA73, U+BA75-BA77, U+BA79-BA82, U+BA86, U+BA88-BA8B, U+BA8D-BAA7, U+BAAA, U+BAAD-BAAF, U+BAB1, U+BAB3-BAB7, U+BABA, U+BABC, U+BABE-BAC3, U+BAC5-BAC7, U+BAC9-BAD7, U+BADA-BAFB, U+BAFD-BAFF, U+BB01-BB03, U+BB05-BB0C, U+BB0E, U+BB10, U+BB12-BB17, U+BB19-BB1B, U+BB1D-BB1F, U+BB21-BB28, U+BB2A, U+BB2C-BB33, U+BB37, U+BB39-BB3A, U+BB3F-BB43, U+BB46, U+BB48, U+BB4A-BB4C, U+BB4E, U+BB51-BB53, U+BB55-BB57, U+BB59-BB60, U+BB62, U+BB64-BB6B, U+BB6D-BB87, U+BB89-BB8B, U+BB8D-BB8F, U+BB91-BBA3, U+BBA5-BBA7, U+BBA9-BBAB, U+BBAD-BBB3, U+BBB5-BBB6, U+BBB8-BBBF, U+BBC1-BBC3, U+BBC5-BBC7, U+BBC9-BBCF, U+BBD1-BBD2, U+BBD4-BBF7, U+BBFA-BBFB, U+BBFD-BBFE, U+BC01, U+BC03-BC07, U+BC0A, U+BC0E, U+BC10, U+BC12-BC13, U+BC19-BC1A, U+BC20-BC23, U+BC26, U+BC28, U+BC2A-BC2C, U+BC2E-BC2F, U+BC32-BC33, U+BC35-BC37, U+BC39-BC3F, U+BC42, U+BC46-BC48, U+BC4A-BC4B, U+BC4E-BC4F, U+BC51-BC5C, U+BC5E-BC83, U+BC86-BC87, U+BC89-BC8A, U+BC8D, U+BC8F-BC93, U+BC96, U+BC98, U+BC9B-BC9F, U+BCA2-BCA3, U+BCA5-BCA6, U+BCA9-BCAF, U+BCB2, U+BCB6-BCBB, U+BCBE-BCBF, U+BCC1-BCC3, U+BCC5-BCCC, U+BCCE, U+BCD2-BCD4, U+BCD6-BCD7, U+BCD9-BCDB, U+BCDD-BCF3, U+BCF7, U+BCF9-BCFB, U+BCFD-BD03, U+BD06, U+BD08, U+BD0A-BD0F, U+BD11-BD13, U+BD15-BD23, U+BD25-BD2B, U+BD2D-BD3F, U+BD41-BD47, U+BD4A-BD4B, U+BD4D-BD4F, U+BD51-BD57, U+BD5A-BD63, U+BD65-BD67, U+BD69-BD7F, U+BD82-BD83, U+BD85-BD86, U+BD8B-BD8F, U+BD92, U+BD94, U+BD96-BD98, U+BD9B, U+BD9D-BDA3, U+BDA5-BDAF, U+BDB1-BDB7, U+BDB9-BDD3, U+BDD6-BDD7, U+BDD9-BDDB, U+BDDD-BDE8, U+BDEA-BDEF, U+BDF1-BDF3, U+BDF5-BDF7, U+BDF9-BDFF, U+BE01-BE02, U+BE04, U+BE06-BE0B, U+BE0E-BE0F, U+BE11-BE13, U+BE15-BE1B, U+BE1E, U+BE20-BE43, U+BE46-BE47, U+BE49-BE4B, U+BE4D, U+BE4F-BE53, U+BE56, U+BE58, U+BE5C-BE5F, U+BE62-BE63, U+BE65-BE67, U+BE69, U+BE6B-BE6F, U+BE72, U+BE76-BE7A, U+BE7E-BE7F, U+BE81-BE83, U+BE85-BE8B, U+BE8E, U+BE92-BE97, U+BE9A-BEA7, U+BEA9-BECF, U+BED2-BED3, U+BED5-BED6, U+BED9-BEDF, U+BEE1-BEE2, U+BEE6-BEEB, U+BEED-BF00, U+BF02-BF07, U+BF0A-BF17, U+BF1A, U+BF1E-BF3F, U+BF42-BF43, U+BF45-BF47, U+BF49-BF4F, U+BF52-BF54, U+BF56-BF93, U+BF95-BFAF, U+BFB1-BFC4, U+BFC6-BFCB, U+BFCE-BFCF, U+BFD1-BFD3, U+BFD5-BFDB, U+BFDD-BFDE, U+BFE0, U+BFE2-C03B, U+C03D-C050, U+C052-C057, U+C059-C05B, U+C05D-C05F, U+C061-C067, U+C06A-C08F, U+C092-C093, U+C095-C097, U+C099-C09F, U+C0A2, U+C0A4, U+C0A6-C0AB, U+C0AE, U+C0B1-C0B2, U+C0B7-C0BB, U+C0BE, U+C0C2-C0C4, U+C0C6-C0C7, U+C0CA-C0CB, U+C0CD-C0CF, U+C0D1-C0D7, U+C0DA, U+C0DE-C0E3, U+C0E6-C0E7, U+C0E9-C0EB, U+C0ED-C0F3, U+C0F6, U+C0F8, U+C0FA-C0FF, U+C101-C103, U+C105-C107, U+C109-C10F, U+C111-C114, U+C116-C11B, U+C121-C122, U+C125, U+C128-C12B, U+C12E, U+C132-C135, U+C137, U+C13A-C13B, U+C13D-C13F, U+C141-C147, U+C14A, U+C14E-C153, U+C156-C157, U+C159-C15B, U+C15D-C163, U+C166, U+C16A-C16F, U+C171-C173, U+C175-C177, U+C179-C184, U+C186-C18B, U+C18F, U+C191-C193, U+C195, U+C197-C19B, U+C19E, U+C1A0, U+C1A2-C1A4, U+C1A6-C1A7, U+C1AA-C1AB, U+C1AD-C1AF, U+C1B1-C1BC, U+C1BE-C1C3, U+C1C5-C1C7, U+C1C9-C1CB, U+C1CD-C1D3, U+C1D5-C1D6, U+C1D9-C1DF, U+C1E1-C1E3, U+C1E5-C1E7, U+C1E9-C1EF, U+C1F2, U+C1F4-C1FB, U+C1FE-C1FF, U+C201-C203, U+C205-C20B, U+C20E, U+C210, U+C212-C217, U+C21A-C21B, U+C21D-C21E, U+C221-C227, U+C22A, U+C22C, U+C22E, U+C230, U+C233, U+C235-C247, U+C249-C24F, U+C252-C253, U+C255-C257, U+C259-C25F, U+C261-C264, U+C266-C26B, U+C26E-C26F, U+C271-C273, U+C275-C27B, U+C27E, U+C280, U+C282-C287, U+C28A-C28F, U+C291-C297, U+C299-C29A, U+C29C, U+C29E-C2A3, U+C2A6-C2A7, U+C2A9-C2AB, U+C2AE-C2B3, U+C2B6, U+C2B8, U+C2BA-C2DB, U+C2DE-C2DF, U+C2E1-C2E2, U+C2E5-C2EA, U+C2EE, U+C2F0, U+C2F2-C2F5, U+C2F7, U+C2FA, U+C2FD-C2FF, U+C301-C307, U+C30A-C30B, U+C30E-C312, U+C316-C317, U+C319-C31B, U+C31D-C323, U+C326-C327, U+C32A-C344, U+C346-C367, U+C36A-C36B, U+C36D-C36F, U+C371, U+C373-C377, U+C37A-C37B, U+C37E-C383, U+C385-C387, U+C389-C38B, U+C38D-C3BF, U+C3C1-C3D7, U+C3DA-C3DB, U+C3DD-C3DE, U+C3E1, U+C3E3-C3E7, U+C3EA-C3EC, U+C3EE-C3F3, U+C3F6-C3F7, U+C3F9-C407, U+C409-C40F, U+C411-C423, U+C425-C42B, U+C42D-C42F, U+C431-C433, U+C435-C43B, U+C43E-C447, U+C449-C463, U+C466-C467, U+C469-C46B, U+C46D-C473, U+C476-C478, U+C47A-C47F, U+C481-C493, U+C495-C49B, U+C49D-C4B7, U+C4B9-C4BB, U+C4BD-C4E8, U+C4EA-C4EF, U+C4F2-C4F3, U+C4F5-C4F7, U+C4F9, U+C4FB-C4FE, U+C502-C50B, U+C50D-C50F, U+C511-C513, U+C515-C51B, U+C51D-C527, U+C52A-C52B, U+C52D-C52F, U+C531-C537, U+C53A, U+C53C, U+C53E-C543, U+C546-C547, U+C54B, U+C54F-C552, U+C556, U+C55A-C55C, U+C55F, U+C562-C563, U+C565-C567, U+C569-C56F, U+C572, U+C576-C57B, U+C57E-C57F, U+C581-C583, U+C585-C586, U+C588-C58B, U+C58E, U+C590, U+C592-C594, U+C596, U+C599-C59B, U+C59D-C59F, U+C5A1-C5A8, U+C5AA-C5B3, U+C5B6-C5B7, U+C5BA, U+C5BF-C5C3, U+C5CB, U+C5CD, U+C5CF, U+C5D2-C5D3, U+C5D5-C5D7, U+C5D9-C5DF, U+C5E2, U+C5E4, U+C5E6-C5EB, U+C5EF, U+C5F1-C5F3, U+C5F5, U+C5F8-C5FB, U+C602-C604, U+C609-C60B, U+C60D-C60F, U+C611-C617, U+C61A, U+C61D-C623, U+C626-C627, U+C629-C62B, U+C62F, U+C631-C632, U+C636, U+C638, U+C63A, U+C63C-C63F, U+C642-C643, U+C645-C647, U+C649-C64F, U+C652, U+C656-C65B, U+C65E-C65F, U+C661-C66B, U+C66D-C66E, U+C670, U+C672-C677, U+C67A-C67B, U+C67D-C67F, U+C681-C687, U+C68A, U+C68C, U+C68E-C693, U+C696-C697, U+C699-C69B, U+C69D-C6A3, U+C6A6, U+C6A8, U+C6AA-C6AF, U+C6B2-C6B3, U+C6B5-C6B7, U+C6BB-C6BF, U+C6C2, U+C6C4, U+C6C6-C6CB, U+C6CE-C6CF, U+C6D1-C6D3, U+C6D5-C6DB, U+C6DE-C6DF, U+C6E2-C6E7, U+C6EA-C6EB, U+C6ED-C6EF, U+C6F1-C6F7, U+C6FA-C6FC, U+C6FE-C703, U+C706-C707, U+C709-C70B, U+C70D-C713, U+C716, U+C718, U+C71A-C71F, U+C722-C723, U+C725-C727, U+C729-C72F, U+C732, U+C734, U+C736, U+C738-C73B, U+C73E-C73F, U+C741-C743, U+C745-C749, U+C74B, U+C74E, U+C750, U+C759-C75B, U+C75D-C75F, U+C761-C767, U+C769-C76A, U+C76C-C773, U+C776-C777, U+C779-C77B, U+C77F-C782, U+C786, U+C78B-C78D, U+C78F, U+C792-C793, U+C795, U+C799, U+C79B-C79F, U+C7A2, U+C7A7-C7AB, U+C7AE-C7AF, U+C7B1-C7B3, U+C7B5-C7BB, U+C7BE, U+C7C2-C7C7, U+C7CA-C7CB, U+C7CD, U+C7CF, U+C7D1-C7D7, U+C7D9-C7DC, U+C7DE-C7E3, U+C7E5-C7E7, U+C7E9-C7EB, U+C7ED-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-C82B, U+C82E, U+C830, U+C832-C837, U+C839-C83B, U+C83D-C83F, U+C841-C847, U+C84A-C84B, U+C84E-C853, U+C855-C86F, U+C872-C873, U+C875-C877, U+C879, U+C87B-C87F, U+C882, U+C884, U+C888-C88A, U+C88E-C893, U+C895-C89C, U+C89E, U+C8A0, U+C8A2-C8A7, U+C8A9-C8BB, U+C8BE-C8C3, U+C8C5-C8C7, U+C8C9-C8CB, U+C8CD-C8D3, U+C8D6, U+C8D8, U+C8DA-C8DF, U+C8E2-C8E3, U+C8E5-C8F4, U+C8F6-C8FB, U+C8FE-C8FF, U+C901-C903, U+C907-C90B, U+C90E, U+C910, U+C912-C917, U+C919-C92B, U+C92D-C933, U+C935-C94F, U+C952-C953, U+C955-C957, U+C959-C95F, U+C962, U+C964-C96B, U+C96D-C96F, U+C971-C973, U+C975-C97B, U+C97D-C987, U+C98A-C98B, U+C98D-C98F, U+C991-C997, U+C99A, U+C99C, U+C99E-C9BF, U+C9C2-C9C3, U+C9C5-C9C6, U+C9C9, U+C9CB-C9CF, U+C9D2, U+C9D4, U+C9D7-C9D8, U+C9DB, U+C9DE-C9DF, U+C9E1, U+C9E3, U+C9E5-C9E6, U+C9E8-C9EB, U+C9EE, U+C9F2-C9F7, U+C9FA-C9FB, U+C9FD-C9FF, U+CA01-CA07, U+CA0A, U+CA0E-CA13, U+CA15-CA17, U+CA19-CA28, U+CA2A-CA4B, U+CA4E-CA4F, U+CA51-CA53, U+CA55-CA5B, U+CA5E, U+CA62-CA67, U+CA69-CA7C, U+CA7E-CA83, U+CA85-CA97, U+CA99-CABB, U+CABE-CABF, U+CAC1-CAC3, U+CAC5-CACB, U+CACE, U+CAD0, U+CAD2, U+CAD4-CAD7, U+CADA-CADF, U+CAE1-CAEB, U+CAED-CAF3, U+CAF5-CB07, U+CB09-CB0F, U+CB11-CB13, U+CB15-CB17, U+CB19-CB1F, U+CB22-CB40, U+CB42-CB47, U+CB4A-CB4B, U+CB4D-CB4F, U+CB51-CB57, U+CB5A-CB5C, U+CB5E-CB63, U+CB65-CB77, U+CB7A-CB9B, U+CB9D-CBB7, U+CBB9-CBD3, U+CBD5-CBE3, U+CBE5-CBE6, U+CBE8, U+CBEA-CC0B, U+CC0E-CC0F, U+CC11-CC13, U+CC15-CC1B, U+CC1E-CC20, U+CC23-CC26, U+CC2A-CC2B, U+CC2D, U+CC2F, U+CC31-CC37, U+CC3A, U+CC3F-CC43, U+CC46-CC47, U+CC49-CC4B, U+CC4D-CC53, U+CC56, U+CC5A-CC5F, U+CC61-CC63, U+CC65, U+CC67, U+CC69-CC6F, U+CC71-CC74, U+CC76-CC97, U+CC9A-CC9B, U+CC9D-CC9F, U+CCA1-CCA7, U+CCAA, U+CCAE-CCB3, U+CCB6-CCB7, U+CCB9-CCBB, U+CCBD-CCC3, U+CCC6, U+CCC8, U+CCCA-CCCF, U+CCD1-CCD3, U+CCD5-CCE3, U+CCE5-CCEB, U+CCED-CCEF, U+CCF1-CD00, U+CD02-CD07, U+CD0A-CD0B, U+CD0D-CD0F, U+CD11-CD17, U+CD1A, U+CD1C, U+CD1E-CD23, U+CD25-CD27, U+CD29-CD2B, U+CD2D-CD38, U+CD3A-CD5B, U+CD5D-CD5F, U+CD61-CD63, U+CD65-CD6B, U+CD6E, U+CD70, U+CD72-CD77, U+CD79-CD87, U+CD89-CD93, U+CD96-CD97, U+CD99-CD9B, U+CD9D-CDA3, U+CDA6, U+CDA8, U+CDAA-CDAF, U+CDB1-CDC3, U+CDC5-CDCB, U+CDCD-CDCF, U+CDD1-CDE7, U+CDE9-CDEB, U+CDED-CDEF, U+CDF1-CDF7, U+CDFA, U+CDFC, U+CDFE-CE03, U+CE05-CE07, U+CE09-CE0B, U+CE0D-CE13, U+CE15-CE18, U+CE1A-CE1F, U+CE22-CE23, U+CE25-CE27, U+CE29-CE2F, U+CE32, U+CE34, U+CE36-CE57, U+CE5A-CE5B, U+CE5D-CE5E, U+CE62-CE67, U+CE6A, U+CE6C, U+CE6E-CE73, U+CE76-CE77, U+CE79-CE7B, U+CE7D-CE83, U+CE86, U+CE88, U+CE8A-CE8F, U+CE92-CE93, U+CE95-CE97, U+CE99-CE9F, U+CEA2, U+CEA6-CEAB, U+CEAE-CEC0, U+CEC2-CEE3, U+CEE6-CEE7, U+CEE9-CEEA, U+CEED-CEF3, U+CEF6, U+CEFA-CEFF, U+CF02-CF03, U+CF05-CF07, U+CF09-CF0F, U+CF12, U+CF14, U+CF16-CF1B, U+CF1D-CF1F, U+CF21-CF23, U+CF25-CF2B, U+CF2E, U+CF32-CF37, U+CF39-CF53, U+CF56-CF57, U+CF59-CF5B, U+CF5D-CF63, U+CF66, U+CF68, U+CF6A-CF6F, U+CF72-CF73, U+CF75-CF77, U+CF79-CF7F, U+CF81-CF84, U+CF86-CF8B, U+CF8D-CFA0, U+CFA2-CFA7, U+CFA9-CFAF, U+CFB1-CFC3, U+CFC5-CFDF, U+CFE2-CFE3, U+CFE5-CFE7, U+CFE9-CFEF, U+CFF2, U+CFF4, U+CFF6-CFFB, U+CFFD-CFFF, U+D001-D003, U+D005-D010, U+D012-D017, U+D019-D02C, U+D02E-D033, U+D036-D037, U+D039-D03B, U+D03D-D043, U+D046, U+D048, U+D04A-D04F, U+D051-D053, U+D055-D057, U+D059-D05F, U+D061-D06B, U+D06E-D06F, U+D071-D073, U+D075-D07B, U+D07E-D080, U+D082-D0A3, U+D0A6-D0A7, U+D0A9-D0AB, U+D0AD-D0B3, U+D0B6, U+D0B8, U+D0BA-D0BF, U+D0C2-D0C3, U+D0C5-D0C7, U+D0CA-D0CF, U+D0D2, U+D0D6-D0DB, U+D0DE-D0DF, U+D0E1-D0E3, U+D0E5-D0EB, U+D0EE, U+D0F2-D0F7, U+D0F9-D10C, U+D10E-D12F, U+D132-D133, U+D135-D137, U+D139, U+D13B-D13F, U+D142, U+D146-D14B, U+D14E-D14F, U+D151-D153, U+D155-D15B, U+D15E, U+D160, U+D162-D167, U+D169-D16B, U+D16D-D17B, U+D17D-D183, U+D185-D187, U+D189-D19F, U+D1A2-D1A3, U+D1A5-D1A7, U+D1A9-D1AF, U+D1B2, U+D1B4, U+D1B6-D1B9, U+D1BB, U+D1BD-D1BF, U+D1C1-D1D7, U+D1D9-D1F3, U+D1F5-D1F7, U+D1F9-D206, U+D208, U+D20A-D20F, U+D211-D22B, U+D22E-D22F, U+D231-D233, U+D235-D23B, U+D23E, U+D240, U+D242-D247, U+D249-D25B, U+D25D-D263, U+D265-D27F, U+D282-D283, U+D285-D287, U+D289-D28F, U+D292-D294, U+D296-D29B, U+D29D-D29F, U+D2A1-D2A3, U+D2A5-D2AB, U+D2AD-D2B0, U+D2B2-D2B7, U+D2BA-D2BB, U+D2BD-D2BE, U+D2C1, U+D2C3-D2C7, U+D2CA, U+D2CC-D2D3, U+D2D5-D2D7, U+D2D9-D2DB, U+D2DD-D2E3, U+D2E6-D2EF, U+D2F2-D2F3, U+D2F5-D2F7, U+D2F9-D2FF, U+D302, U+D304, U+D306-D30B, U+D30F, U+D311-D313, U+D315, U+D317-D31B, U+D31E, U+D322-D324, U+D326-D327, U+D32A-D32B, U+D32D-D32F, U+D331-D337, U+D33A, U+D33E-D343, U+D346-D37B, U+D37E-D37F, U+D381-D383, U+D385-D38B, U+D38E, U+D392-D397, U+D39A-D39B, U+D39D-D39F, U+D3A1-D3A7, U+D3AA, U+D3AC, U+D3AE-D3B3, U+D3B5-D3B7, U+D3B9-D3BB, U+D3BD-D3C3, U+D3C6-D3C7, U+D3CA-D3CF, U+D3D1-D3D7, U+D3D9-D3E0, U+D3E2, U+D3E4-D3EB, U+D3EE-D3EF, U+D3F1-D3F3, U+D3F5-D3FB, U+D3FE, U+D400, U+D402-D407, U+D409-D41C, U+D41E-D43F, U+D441-D443, U+D445-D45B, U+D45D-D45F, U+D461-D463, U+D465-D46C, U+D46E, U+D470-D477, U+D47A-D47B, U+D47D-D47E, U+D481, U+D483-D487, U+D48A, U+D48C, U+D48E-D493, U+D495-D4A8, U+D4AA-D4CB, U+D4CD-D4CF, U+D4D1-D4D3, U+D4D5-D4DB, U+D4DD-D4DE, U+D4E0-D4E7, U+D4E9-D4EB, U+D4ED-D4EF, U+D4F1-D4F7, U+D4F9-D4FA, U+D4FC, U+D4FE-D503, U+D505-D507, U+D509-D50B, U+D50D-D513, U+D516, U+D518-D53B, U+D53E-D53F, U+D541-D543, U+D545-D54B, 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-D57B, U+D57D-D583, U+D586, U+D58A-D58F, U+D591-D5A4, U+D5A6-D5C7, U+D5CA-D5CB, U+D5CD-D5CF, U+D5D1, U+D5D3-D5D7, U+D5DA, U+D5DC, U+D5DE-D5E3, U+D5E6-D5E7, U+D5E9-D5EB, U+D5ED-D5F3, U+D5F6, U+D5F8, U+D5FA-D5FF, U+D602-D603, U+D605-D607, U+D609-D60F, U+D612, U+D616-D61B, U+D61D-D61F, U+D621-D623, U+D625-D62C, U+D62E-D637, U+D63A-D63B, U+D63D-D63F, U+D641-D644, U+D646-D647, U+D64A, U+D64C, U+D64E-D650, U+D652-D653, U+D656-D657, U+D659-D65B, U+D65D-D666, U+D668, U+D66A-D66F, U+D672-D673, U+D675-D682, U+D684, U+D686-D68B, U+D68E-D68F, U+D691-D693, U+D695-D69C, U+D69E, U+D6A0, U+D6A2-D6A7, U+D6A9-D6AB, U+D6AD-D6AF, U+D6B1-D6B8, U+D6BA, U+D6BC-D6C3, U+D6C6-D6C7, U+D6C9-D6CB, U+D6CD-D6D0, U+D6D2-D6D3, U+D6D5-D6D6, U+D6D8, U+D6DA-D6DF, U+D6E1-D6E3, U+D6E5-D6E7, U+D6E9-D6EF, U+D6F1-D6F4, U+D6F6-D6FB, U+D6FE-D6FF, U+D701-D703, U+D705-D710, U+D712-D717, U+D71A-D71B, U+D71D-D71F, U+D721-D727, U+D72A, U+D72C, U+D72E-D733, U+D736-D737, U+D739-D73B, U+D73D-D743, U+D745-D746, U+D748, U+D74A-D74F, U+D752-D753, U+D755, U+D75A-D75F, U+D762, U+D764, U+D766-D768, U+D76A-D76B, U+D76D-D76F, U+D771-D773, U+D775-D77B, U+D77E-D780, U+D782-D787, U+D78A-D78B, U+D78D-D78F, U+D791-D797, U+D79A, U+D79C, U+D79E-D7A3, U+E000-E00D, U+E010-E01B, U+E020-E02E, U+E030-E03D, U+E040-E05D, U+E060-E06B, U+E070-E07E, U+E080-E08D, U+E090-E0A7, U+E0B0-E0B7, U+E0C0-E0CB, U+E0D0-E0DB, U+F000-F001, U+F007, U+F8FF, U+FE10-FE19, U+FE30, U+FF5F-FF60, U+FFE0-FFE6, U+FFE8, U+FFED-FFEE, U+FFFC-FFFD;
}
@font-face {
  font-family: 'Galmuri11';
  src: url('../fonts/galmuri-base.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+20-7E, U+A0-FF, U+2010-2027, U+2030-2031, U+2038-203D, U+2043-2049, U+204B, U+2190-2193, U+2460-2462, U+2500, U+2502, U+2550, U+25A0-25AF, U+25B2-25B3, U+25B6-25B7, U+25BA-25BD, U+25C0-25C1, U+25C4-2603, U+2605-2606, U+2610-2612, U+262E, U+2630-2637, U+2639-263C, U+2660-2667, U+2669-266F, U+2680-2689, U+26A0, U+26C4, U+26D4, U+2709, U+2753, U+2757, U+283F, U+3000-3002, U+3007-3011, U+301C, U+3131-3164, U+AC00-AC01, U+AC04, U+AC07-AC0A, U+AC10-AC17, U+AC19-AC1D, U+AC20, U+AC24, U+AC2C-AC2D, U+AC2F-AC31, U+AC38-AC39, U+AC3C, U+AC40, U+AC4B, U+AC4D, U+AC54, U+AC58, U+AC5C, U+AC70-AC71, U+AC74, U+AC77-AC78, U+AC7A, U+AC80-AC81, U+AC83-AC86, U+AC89-AC8C, U+AC90, U+AC94, U+AC9C-AC9D, U+AC9F-ACA1, U+ACA8-ACAA, U+ACAC, U+ACAF-ACB0, U+ACB8-ACB9, U+ACBB-ACBD, U+ACC1, U+ACC4, U+ACC8, U+ACCC, U+ACD5, U+ACD7, U+ACE0-ACE1, U+ACE4, U+ACE7-ACE8, U+ACEA, U+ACEC, U+ACEF-ACF1, U+ACF3, U+ACF5-ACF6, U+ACFC-ACFD, U+AD00, U+AD04, U+AD06, U+AD0C-AD0D, U+AD0F, U+AD11, U+AD18, U+AD1C, U+AD20, U+AD29, U+AD2C-AD2D, U+AD34-AD35, U+AD38, U+AD3C, U+AD44-AD45, U+AD47, U+AD49, U+AD50, U+AD54, U+AD58, U+AD61, U+AD63, U+AD6C-AD6D, U+AD70, U+AD73-AD76, U+AD7B-AD7D, U+AD7F, U+AD81-AD82, U+AD88-AD89, U+AD8C, U+AD90, U+AD9C-AD9D, U+ADA4, U+ADB7, U+ADC0-ADC1, U+ADC4, U+ADC8, U+ADD0-ADD1, U+ADD3, U+ADDC, U+ADE0, U+ADE4, U+ADF8-ADF9, U+ADFC, U+ADFF-AE01, U+AE08-AE09, U+AE0B, U+AE0D, U+AE14, U+AE30-AE31, U+AE34, U+AE37-AE38, U+AE3A, U+AE40-AE41, U+AE43, U+AE45-AE46, U+AE4A, U+AE4C-AE4E, U+AE50, U+AE54, U+AE56, U+AE5C-AE5D, U+AE5F-AE61, U+AE65, U+AE68-AE69, U+AE6C, U+AE70, U+AE78-AE79, U+AE7B-AE7D, U+AE84-AE85, U+AE8C, U+AEBC-AEBE, U+AEC0, U+AEC4, U+AECC-AECD, U+AECF-AED1, U+AED8-AED9, U+AEDC, U+AEE8, U+AEEB, U+AEED, U+AEF4, U+AEF8, U+AEFC, U+AF07-AF08, U+AF0D, U+AF10, U+AF2C-AF2D, U+AF30, U+AF32, U+AF34, U+AF3C-AF3D, U+AF3F, U+AF41-AF43, U+AF48-AF49, U+AF50, U+AF5C-AF5D, U+AF64-AF65, U+AF79, U+AF80, U+AF84, U+AF88, U+AF90-AF91, U+AF95, U+AF9C, U+AFB8-AFB9, U+AFBC, U+AFC0, U+AFC7-AFC9, U+AFCB, U+AFCD-AFCE, U+AFD4, U+AFDC, U+AFE8-AFE9, U+AFF0-AFF1, U+AFF4, U+AFF8, U+B000-B001, U+B004, U+B00C, U+B010, U+B014, U+B01C-B01D, U+B028, U+B044-B045, U+B048, U+B04A, U+B04C, U+B04E, U+B053-B055, U+B057, U+B059, U+B05D, U+B07C-B07D, U+B080, U+B084, U+B08C-B08D, U+B08F, U+B091, U+B098-B09A, U+B09C, U+B09F-B0A2, U+B0A8-B0A9, U+B0AB-B0AF, U+B0B1, U+B0B3-B0B5, U+B0B8, U+B0BC, U+B0C4-B0C5, U+B0C7-B0C9, U+B0D0-B0D1, U+B0D4, U+B0D8, U+B0E0, U+B0E5, U+B108-B109, U+B10B-B10C, U+B110, U+B112-B113, U+B118-B119, U+B11B-B11D, U+B123-B125, U+B128, U+B12C, U+B134-B135, U+B137-B139, U+B140-B141, U+B144, U+B148, U+B150-B151, U+B154-B155, U+B158, U+B15C, U+B160, U+B178-B179, U+B17C, U+B180, U+B182, U+B188-B189, U+B18B, U+B18D, U+B192-B194, U+B198, U+B19C, U+B1A8, U+B1CC, U+B1D0, U+B1D4, U+B1DC-B1DD, U+B1DF, U+B1E8-B1E9, U+B1EC, U+B1F0, U+B1F9, U+B1FB, U+B1FD, U+B204-B205, U+B208, U+B20B-B20C, U+B214-B215, U+B217, U+B219, U+B220, U+B234, U+B23C, U+B258, U+B25C, U+B260, U+B268-B269, U+B274-B275, U+B27C, U+B284-B285, U+B289, U+B290-B291, U+B294, U+B298-B29A, U+B2A0-B2A1, U+B2A3, U+B2A5-B2A6, U+B2AA, U+B2AC, U+B2B0, U+B2B4, U+B2C8-B2C9, U+B2CC, U+B2D0, U+B2D2, U+B2D8-B2D9, U+B2DB, U+B2DD, U+B2E2, U+B2E4-B2E6, U+B2E8, U+B2EB-B2EF, U+B2F3-B2F5, U+B2F7-B2FB, U+B2FF-B301, U+B304, U+B308, U+B310-B311, U+B313-B315, U+B31C, U+B354-B356, U+B358, U+B35B-B35C, U+B35E-B35F, U+B364-B365, U+B367, U+B369, U+B36B, U+B36E, U+B370-B371, U+B374, U+B378, U+B380-B381, U+B383-B385, U+B38C, U+B390, U+B394, U+B3A0-B3A1, U+B3A8, U+B3AC, U+B3C4-B3C5, U+B3C8, U+B3CB-B3CC, U+B3CE, U+B3D0, U+B3D4-B3D5, U+B3D7, U+B3D9, U+B3DB, U+B3DD, U+B3E0, U+B3E4, U+B3E8, U+B3FC, U+B410, U+B418, U+B41C, U+B420, U+B428-B429, U+B42B, U+B434, U+B450-B451, U+B454, U+B458, U+B460-B461, U+B463, U+B465, U+B46C, U+B480, U+B488, U+B49D, U+B4A4, U+B4A8, U+B4AC, U+B4B5, U+B4B7, U+B4B9, U+B4C0, U+B4C4, U+B4C8, U+B4D0, U+B4D5, U+B4DC-B4DD, U+B4E0, U+B4E3-B4E4, U+B4E6, U+B4EC-B4ED, U+B4EF, U+B4F1, U+B4F8, U+B514-B515, U+B518, U+B51B-B51C, U+B524-B525, U+B527-B52A, U+B530-B531, U+B534, U+B538, U+B540-B541, U+B543-B545, U+B54B-B54D, U+B550, U+B554, U+B55C-B55D, U+B55F-B561, U+B5A0-B5A1, U+B5A4, U+B5A8, U+B5AA-B5AB, U+B5B0-B5B1, U+B5B3-B5B5, U+B5BB-B5BD, U+B5C0, U+B5C4, U+B5CC-B5CD, U+B5CF-B5D1, U+B5D8, U+B5EC, U+B610-B611, U+B614, U+B618, U+B625, U+B62C, U+B634, U+B648, U+B664, U+B668, U+B69C-B69D, U+B6A0, U+B6A4, U+B6AB-B6AC, U+B6B1, U+B6D4, U+B6F0, U+B6F4, U+B6F8, U+B700-B701, U+B705, U+B728-B729, U+B72C, U+B72F-B730, U+B738-B739, U+B73B, U+B744, U+B748, U+B74C, U+B754-B755, U+B760, U+B764, U+B768, U+B770-B771, U+B773, U+B775, U+B77C-B77D, U+B780, U+B784, U+B78C-B78D, U+B78F-B792, U+B796-B799, U+B79C, U+B7A0, U+B7A8-B7A9, U+B7AB-B7AD, U+B7B4-B7B5, U+B7B8, U+B7C7, U+B7C9, U+B7EC-B7ED, U+B7F0, U+B7F4, U+B7FC-B7FD, U+B7FF-B801, U+B807-B809, U+B80C, U+B810, U+B818-B819, U+B81B, U+B81D, U+B824-B825, U+B828, U+B82C, U+B834-B835, U+B837-B839, U+B840, U+B844, U+B851, U+B853, U+B85C-B85D, U+B860, U+B864, U+B86C-B86D, U+B86F, U+B871, U+B878, U+B87C, U+B88D, U+B8A8, U+B8B0, U+B8B4, U+B8B8, U+B8C0-B8C1, U+B8C3, U+B8C5, U+B8CC, U+B8D0, U+B8D4, U+B8DD, U+B8DF, U+B8E1, U+B8E8-B8E9, U+B8EC, U+B8F0, U+B8F8-B8F9, U+B8FB, U+B8FD, U+B904, U+B918, U+B920, U+B93C-B93D, U+B940, U+B944, U+B94C, U+B94F, U+B951, U+B958-B959, U+B95C, U+B960, U+B968-B969, U+B96B, U+B96D, U+B974-B975, U+B978, U+B97C, U+B984-B985, U+B987, U+B989-B98A, U+B98D-B98E, U+B9AC-B9AD, U+B9B0, U+B9B4, U+B9BC-B9BD, U+B9BF, U+B9C1, U+B9C8-B9C9, U+B9CC, U+B9CE-B9D2, U+B9D8-B9D9, U+B9DB, U+B9DD-B9DE, U+B9E1, U+B9E3-B9E5, U+B9E8, U+B9EC, U+B9F4-B9F5, U+B9F7-B9FA, U+BA00-BA01, U+BA08, U+BA15, U+BA38-BA39, U+BA3C, U+BA40, U+BA42, U+BA48-BA49, U+BA4B, U+BA4D-BA4E, U+BA53-BA55, U+BA58, U+BA5C, U+BA64-BA65, U+BA67-BA69, U+BA70-BA71, U+BA74, U+BA78, U+BA83-BA85, U+BA87, U+BA8C, U+BAA8-BAA9, U+BAAB-BAAC, U+BAB0, U+BAB2, U+BAB8-BAB9, U+BABB, U+BABD, U+BAC4, U+BAC8, U+BAD8-BAD9, U+BAFC, U+BB00, U+BB04, U+BB0D, U+BB0F, U+BB11, U+BB18, U+BB1C, U+BB20, U+BB29, U+BB2B, U+BB34-BB36, U+BB38, U+BB3B-BB3E, U+BB44-BB45, U+BB47, U+BB49, U+BB4D, U+BB4F-BB50, U+BB54, U+BB58, U+BB61, U+BB63, U+BB6C, U+BB88, U+BB8C, U+BB90, U+BBA4, U+BBA8, U+BBAC, U+BBB4, U+BBB7, U+BBC0, U+BBC4, U+BBC8, U+BBD0, U+BBD3, U+BBF8-BBF9, U+BBFC, U+BBFF-BC00, U+BC02, U+BC08-BC09, U+BC0B-BC0D, U+BC0F, U+BC11, U+BC14-BC18, U+BC1B-BC1F, U+BC24-BC25, U+BC27, U+BC29, U+BC2D, U+BC30-BC31, U+BC34, U+BC38, U+BC40-BC41, U+BC43-BC45, U+BC49, U+BC4C-BC4D, U+BC50, U+BC5D, U+BC84-BC85, U+BC88, U+BC8B-BC8C, U+BC8E, U+BC94-BC95, U+BC97, U+BC99-BC9A, U+BCA0-BCA1, U+BCA4, U+BCA7-BCA8, U+BCB0-BCB1, U+BCB3-BCB5, U+BCBC-BCBD, U+BCC0, U+BCC4, U+BCCD, U+BCCF-BCD1, U+BCD5, U+BCD8, U+BCDC, U+BCF4-BCF6, U+BCF8, U+BCFC, U+BD04-BD05, U+BD07, U+BD09, U+BD10, U+BD14, U+BD24, U+BD2C, U+BD40, U+BD48-BD49, U+BD4C, U+BD50, U+BD58-BD59, U+BD64, U+BD68, U+BD80-BD81, U+BD84, U+BD87-BD8A, U+BD90-BD91, U+BD93, U+BD95, U+BD99-BD9A, U+BD9C, U+BDA4, U+BDB0, U+BDB8, U+BDD4-BDD5, U+BDD8, U+BDDC, U+BDE9, U+BDF0, U+BDF4, U+BDF8, U+BE00, U+BE03, U+BE05, U+BE0C-BE0D, U+BE10, U+BE14, U+BE1C-BE1D, U+BE1F, U+BE44-BE45, U+BE48, U+BE4C, U+BE4E, U+BE54-BE55, U+BE57, U+BE59-BE5B, U+BE60-BE61, U+BE64, U+BE68, U+BE6A, U+BE70-BE71, U+BE73-BE75, U+BE7B-BE7D, U+BE80, U+BE84, U+BE8C-BE8D, U+BE8F-BE91, U+BE98-BE99, U+BEA8, U+BED0-BED1, U+BED4, U+BED7-BED8, U+BEE0, U+BEE3-BEE5, U+BEEC, U+BF01, U+BF08-BF09, U+BF18-BF19, U+BF1B-BF1D, U+BF40-BF41, U+BF44, U+BF48, U+BF50-BF51, U+BF55, U+BF94, U+BFB0, U+BFC5, U+BFCC-BFCD, U+BFD0, U+BFD4, U+BFDC, U+BFDF, U+BFE1, U+C03C, U+C051, U+C058, U+C05C, U+C060, U+C068-C069, U+C090-C091, U+C094, U+C098, U+C0A0-C0A1, U+C0A3, U+C0A5, U+C0AC-C0AD, U+C0AF-C0B0, U+C0B3-C0B6, U+C0BC-C0BD, U+C0BF-C0C1, U+C0C5, U+C0C8-C0C9, U+C0CC, U+C0D0, U+C0D8-C0D9, U+C0DB-C0DD, U+C0E4-C0E5, U+C0E8, U+C0EC, U+C0F4-C0F5, U+C0F7, U+C0F9, U+C100, U+C104, U+C108, U+C110, U+C115, U+C11C-C120, U+C123-C124, U+C126-C127, U+C12C-C12D, U+C12F-C131, U+C136, U+C138-C139, U+C13C, U+C140, U+C148-C149, U+C14B-C14D, U+C154-C155, U+C158, U+C15C, U+C164-C165, U+C167-C169, U+C170, U+C174, U+C178, U+C185, U+C18C-C18E, U+C190, U+C194, U+C196, U+C19C-C19D, U+C19F, U+C1A1, U+C1A5, U+C1A8-C1A9, U+C1AC, U+C1B0, U+C1BD, U+C1C4, U+C1C8, U+C1CC, U+C1D4, U+C1D7-C1D8, U+C1E0, U+C1E4, U+C1E8, U+C1F0-C1F1, U+C1F3, U+C1FC-C1FD, U+C200, U+C204, U+C20C-C20D, U+C20F, U+C211, U+C218-C219, U+C21C, U+C21F-C220, U+C228-C229, U+C22B, U+C22D, U+C22F, U+C231-C232, U+C234, U+C248, U+C250-C251, U+C254, U+C258, U+C260, U+C265, U+C26C-C26D, U+C270, U+C274, U+C27C-C27D, U+C27F, U+C281, U+C288-C289, U+C290, U+C298, U+C29B, U+C29D, U+C2A4-C2A5, U+C2A8, U+C2AC-C2AD, U+C2B4-C2B5, U+C2B7, U+C2B9, U+C2DC-C2DD, U+C2E0, U+C2E3-C2E4, U+C2EB-C2ED, U+C2EF, U+C2F1, U+C2F6, U+C2F8-C2F9, U+C2FB-C2FC, U+C300, U+C308-C309, U+C30C-C30D, U+C313-C315, U+C318, U+C31C, U+C324-C325, U+C328-C329, U+C345, U+C368-C369, U+C36C, U+C370, U+C372, U+C378-C379, U+C37C-C37D, U+C384, U+C388, U+C38C, U+C3C0, U+C3D8-C3D9, U+C3DC, U+C3DF-C3E0, U+C3E2, U+C3E8-C3E9, U+C3ED, U+C3F4-C3F5, U+C3F8, U+C408, U+C410, U+C424, U+C42C, U+C430, U+C434, U+C43C-C43D, U+C448, U+C464-C465, U+C468, U+C46C, U+C474-C475, U+C479, U+C480, U+C494, U+C49C, U+C4B8, U+C4BC, U+C4E9, U+C4F0-C4F1, U+C4F4, U+C4F8, U+C4FA, U+C4FF-C501, U+C50C, U+C510, U+C514, U+C51C, U+C528-C529, U+C52C, U+C530, U+C538-C539, U+C53B, U+C53D, U+C544-C545, U+C548-C54A, U+C54C-C54E, U+C553-C555, U+C557-C559, U+C55D-C55E, U+C560-C561, U+C564, U+C568, U+C570-C571, U+C573-C575, U+C57C-C57D, U+C580, U+C584, U+C587, U+C58C-C58D, U+C58F, U+C591, U+C595, U+C597-C598, U+C59C, U+C5A0, U+C5A9, U+C5B4-C5B5, U+C5B8-C5B9, U+C5BB-C5BE, U+C5C4-C5CA, U+C5CC, U+C5CE, U+C5D0-C5D1, U+C5D4, U+C5D8, U+C5E0-C5E1, U+C5E3, U+C5E5, U+C5EC-C5EE, U+C5F0, U+C5F4, U+C5F6-C5F7, U+C5FC-C601, U+C605-C608, U+C60C, U+C610, U+C618-C619, U+C61B-C61C, U+C624-C625, U+C628, U+C62C-C62E, U+C630, U+C633-C635, U+C637, U+C639, U+C63B, U+C640-C641, U+C644, U+C648, U+C650-C651, U+C653-C655, U+C65C-C65D, U+C660, U+C66C, U+C66F, U+C671, U+C678-C679, U+C67C, U+C680, U+C688-C689, U+C68B, U+C68D, U+C694-C695, U+C698, U+C69C, U+C6A4-C6A5, U+C6A7, U+C6A9, U+C6B0-C6B1, U+C6B4, U+C6B8-C6BA, U+C6C0-C6C1, U+C6C3, U+C6C5, U+C6CC-C6CD, U+C6D0, U+C6D4, U+C6DC-C6DD, U+C6E0-C6E1, U+C6E8-C6E9, U+C6EC, U+C6F0, U+C6F8-C6F9, U+C6FD, U+C704-C705, U+C708, U+C70C, U+C714-C715, U+C717, U+C719, U+C720-C721, U+C724, U+C728, U+C730-C731, U+C733, U+C735, U+C737, U+C73C-C73D, U+C740, U+C744, U+C74A, U+C74C-C74D, U+C74F, U+C751-C758, U+C75C, U+C760, U+C768, U+C76B, U+C774-C775, U+C778, U+C77C-C77E, U+C783-C785, U+C787-C78A, U+C78E, U+C790-C791, U+C794, U+C796-C798, U+C79A, U+C7A0-C7A1, U+C7A3-C7A6, U+C7AC-C7AD, U+C7B0, U+C7B4, U+C7BC-C7BD, U+C7BF-C7C1, U+C7C8-C7C9, U+C7CC, U+C7CE, U+C7D0, U+C7D8, U+C7DD, U+C7E4, U+C7E8, U+C7EC, U+C800-C801, U+C804, U+C808, U+C80A, U+C810-C811, U+C813, U+C815-C816, U+C81C-C81D, U+C820, U+C824, U+C82C-C82D, U+C82F, U+C831, U+C838, U+C83C, U+C840, U+C848-C849, U+C84C-C84D, U+C854, U+C870-C871, U+C874, U+C878, U+C87A, U+C880-C881, U+C883, U+C885-C887, U+C88B-C88D, U+C894, U+C89D, U+C89F, U+C8A1, U+C8A8, U+C8BC-C8BD, U+C8C4, U+C8C8, U+C8CC, U+C8D4-C8D5, U+C8D7, U+C8D9, U+C8E0-C8E1, U+C8E4, U+C8F5, U+C8FC-C8FD, U+C900, U+C904-C906, U+C90C-C90D, U+C90F, U+C911, U+C918, U+C92C, U+C934, U+C950-C951, U+C954, U+C958, U+C960-C961, U+C963, U+C96C, U+C970, U+C974, U+C97C, U+C988-C989, U+C98C, U+C990, U+C998-C999, U+C99B, U+C99D, U+C9C0-C9C1, U+C9C4, U+C9C7-C9C8, U+C9CA, U+C9D0-C9D1, U+C9D3, U+C9D5-C9D6, U+C9D9-C9DA, U+C9DC-C9DD, U+C9E0, U+C9E2, U+C9E4, U+C9E7, U+C9EC-C9ED, U+C9EF-C9F1, U+C9F8-C9F9, U+C9FC, U+CA00, U+CA08-CA09, U+CA0B-CA0D, U+CA14, U+CA18, U+CA29, U+CA4C-CA4D, U+CA50, U+CA54, U+CA5C-CA5D, U+CA5F-CA61, U+CA68, U+CA7D, U+CA84, U+CA98, U+CABC-CABD, U+CAC0, U+CAC4, U+CACC-CACD, U+CACF, U+CAD1, U+CAD3, U+CAD8-CAD9, U+CAE0, U+CAEC, U+CAF4, U+CB08, U+CB10, U+CB14, U+CB18, U+CB20-CB21, U+CB41, U+CB48-CB49, U+CB4C, U+CB50, U+CB58-CB59, U+CB5D, U+CB64, U+CB78-CB79, U+CB9C, U+CBB8, U+CBD4, U+CBE4, U+CBE7, U+CBE9, U+CC0C-CC0D, U+CC10, U+CC14, U+CC1C-CC1D, U+CC21-CC22, U+CC27-CC29, U+CC2C, U+CC2E, U+CC30, U+CC38-CC39, U+CC3B-CC3E, U+CC44-CC45, U+CC48, U+CC4C, U+CC54-CC55, U+CC57-CC59, U+CC60, U+CC64, U+CC66, U+CC68, U+CC70, U+CC75, U+CC98-CC99, U+CC9C, U+CCA0, U+CCA8-CCA9, U+CCAB-CCAD, U+CCB4-CCB5, U+CCB8, U+CCBC, U+CCC4-CCC5, U+CCC7, U+CCC9, U+CCD0, U+CCD4, U+CCE4, U+CCEC, U+CCF0, U+CD01, U+CD08-CD09, U+CD0C, U+CD10, U+CD18-CD19, U+CD1B, U+CD1D, U+CD24, U+CD28, U+CD2C, U+CD39, U+CD5C, U+CD60, U+CD64, U+CD6C-CD6D, U+CD6F, U+CD71, U+CD78, U+CD88, U+CD94-CD95, U+CD98, U+CD9C, U+CDA4-CDA5, U+CDA7, U+CDA9, U+CDB0, U+CDC4, U+CDCC, U+CDD0, U+CDE8, U+CDEC, U+CDF0, U+CDF8-CDF9, U+CDFB, U+CDFD, U+CE04, U+CE08, U+CE0C, U+CE14, U+CE19, U+CE20-CE21, U+CE24, U+CE28, U+CE30-CE31, U+CE33, U+CE35, U+CE58-CE59, U+CE5C, U+CE5F-CE61, U+CE68-CE69, U+CE6B, U+CE6D, U+CE74-CE75, U+CE78, U+CE7C, U+CE84-CE85, U+CE87, U+CE89, U+CE90-CE91, U+CE94, U+CE98, U+CEA0-CEA1, U+CEA3-CEA5, U+CEAC-CEAD, U+CEC1, U+CEE4-CEE5, U+CEE8, U+CEEB-CEEC, U+CEF4-CEF5, U+CEF7-CEF9, U+CF00-CF01, U+CF04, U+CF08, U+CF10-CF11, U+CF13, U+CF15, U+CF1C, U+CF20, U+CF24, U+CF2C-CF2D, U+CF2F-CF31, U+CF38, U+CF54-CF55, U+CF58, U+CF5C, U+CF64-CF65, U+CF67, U+CF69, U+CF70-CF71, U+CF74, U+CF78, U+CF80, U+CF85, U+CF8C, U+CFA1, U+CFA8, U+CFB0, U+CFC4, U+CFE0-CFE1, U+CFE4, U+CFE8, U+CFF0-CFF1, U+CFF3, U+CFF5, U+CFFC, U+D000, U+D004, U+D011, U+D018, U+D02D, U+D034-D035, U+D038, U+D03C, U+D044-D045, U+D047, U+D049, U+D050, U+D054, U+D058, U+D060, U+D06C-D06D, U+D070, U+D074, U+D07C-D07D, U+D081, U+D0A4-D0A5, U+D0A8, U+D0AC, U+D0B4-D0B5, U+D0B7, U+D0B9, U+D0C0-D0C1, U+D0C4, U+D0C8-D0C9, U+D0D0-D0D1, U+D0D3-D0D5, U+D0DC-D0DD, U+D0E0, U+D0E4, U+D0EC-D0ED, U+D0EF-D0F1, U+D0F8, U+D10D, U+D130-D131, U+D134, U+D138, U+D13A, U+D140-D141, U+D143-D145, U+D14C-D14D, U+D150, U+D154, U+D15C-D15D, U+D15F, U+D161, U+D168, U+D16C, U+D17C, U+D184, U+D188, U+D1A0-D1A1, U+D1A4, U+D1A8, U+D1B0-D1B1, U+D1B3, U+D1B5, U+D1BA, U+D1BC, U+D1C0, U+D1D8, U+D1F4, U+D1F8, U+D207, U+D209, U+D210, U+D22C-D22D, U+D230, U+D234, U+D23C-D23D, U+D23F, U+D241, U+D248, U+D25C, U+D264, U+D280-D281, U+D284, U+D288, U+D290-D291, U+D295, U+D29C, U+D2A0, U+D2A4, U+D2AC, U+D2B1, U+D2B8-D2B9, U+D2BC, U+D2BF-D2C0, U+D2C2, U+D2C8-D2C9, U+D2CB, U+D2D4, U+D2D8, U+D2DC, U+D2E4-D2E5, U+D2F0-D2F1, U+D2F4, U+D2F8, U+D300-D301, U+D303, U+D305, U+D30C-D30E, U+D310, U+D314, U+D316, U+D31C-D31D, U+D31F-D321, U+D325, U+D328-D329, U+D32C, U+D330, U+D338-D339, U+D33B-D33D, U+D344-D345, U+D37C-D37D, U+D380, U+D384, U+D38C-D38D, U+D38F-D391, U+D398-D399, U+D39C, U+D3A0, U+D3A8-D3A9, U+D3AB, U+D3AD, U+D3B4, U+D3B8, U+D3BC, U+D3C4-D3C5, U+D3C8-D3C9, U+D3D0, U+D3D8, U+D3E1, U+D3E3, U+D3EC-D3ED, U+D3F0, U+D3F4, U+D3FC-D3FD, U+D3FF, U+D401, U+D408, U+D41D, U+D440, U+D444, U+D45C, U+D460, U+D464, U+D46D, U+D46F, U+D478-D479, U+D47C, U+D47F-D480, U+D482, U+D488-D489, U+D48B, U+D48D, U+D494, U+D4A9, U+D4CC, U+D4D0, U+D4D4, U+D4DC, U+D4DF, U+D4E8, U+D4EC, U+D4F0, U+D4F8, U+D4FB, U+D4FD, U+D504, U+D508, U+D50C, U+D514-D515, U+D517, U+D53C-D53D, U+D540, U+D544, U+D54C-D54D, U+D54F, U+D551, U+D558-D559, U+D55C, U+D560, U+D565, U+D568-D569, U+D56B, U+D56D, U+D574-D575, U+D578, U+D57C, U+D584-D585, U+D587-D589, U+D590, U+D5A5, U+D5C8-D5C9, U+D5CC, U+D5D0, U+D5D2, U+D5D8-D5D9, U+D5DB, U+D5DD, U+D5E4-D5E5, U+D5E8, U+D5EC, U+D5F4-D5F5, U+D5F7, U+D5F9, U+D600-D601, U+D604, U+D608, U+D610-D611, U+D613-D615, U+D61C, U+D620, U+D624, U+D62D, U+D638-D639, U+D63C, U+D640, U+D645, U+D648-D649, U+D64B, U+D64D, U+D651, U+D654-D655, U+D658, U+D65C, U+D667, U+D669, U+D670-D671, U+D674, U+D683, U+D685, U+D68C-D68D, U+D690, U+D694, U+D69D, U+D69F, U+D6A1, U+D6A8, U+D6AC, U+D6B0, U+D6B9, U+D6BB, U+D6C4-D6C5, U+D6C8, U+D6CC, U+D6D1, U+D6D4, U+D6D7, U+D6D9, U+D6E0, U+D6E4, U+D6E8, U+D6F0, U+D6F5, U+D6FC-D6FD, U+D700, U+D704, U+D711, U+D718-D719, U+D71C, U+D720, U+D728-D729, U+D72B, U+D72D, U+D734-D735, U+D738, U+D73C, U+D744, U+D747, U+D749, U+D750-D751, U+D754, U+D756-D759, U+D760-D761, U+D763, U+D765, U+D769, U+D76C, U+D770, U+D774, U+D77C-D77D, U+D781, U+D788-D789, U+D78C, U+D790, U+D798-D799, U+D79B, U+D79D, U+FF01-FF5E;
}
/* @font-face 끝 */

:root {
  --ink: #1b1828;
  --ink-2: #262139;
  --ink-3: #3a3355;
  --ink-4: #4d4570;
  --paper: #fdf6e3;
  --muted: #b9b1d0;
  --sun: #ffd34e;
  --sun-dark: #d9a91a;
  --leaf: #4ade80;
  --rose: #ff6b8b;
  --sky: #7cc4f0;
  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --pixel: 'Galmuri11', var(--font);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--paper); font-family: var(--font); -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; color: inherit; }
.hidden { display: none !important; }
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
.pixel-font { font-family: var(--pixel); letter-spacing: 0.01em; }
.mirror { transform: scaleX(-1); }

/* 월드: 월드 해상도 캔버스를 CSS 로 정수 배율 확대 (render.js 가 크기·위치를 정함) */
#game {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; display: block; touch-action: none;
  transform-origin: 0 0; will-change: transform; image-rendering: pixelated; image-rendering: crisp-edges;
}
/* 글자 레이어: 화면 해상도, 클릭은 아래 월드로 통과 */
#ui { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; pointer-events: none; }

/* ── 카드·폼 ───────────────────────────── */

.screen {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; overflow: auto;
  background: radial-gradient(ellipse at center, rgba(27, 24, 40, 0.35), rgba(27, 24, 40, 0.88));
  z-index: 10;
}
.card {
  width: min(400px, 100%);
  background: var(--ink-2);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 0 0 3px var(--ink-3), 8px 8px 0 3px rgba(0, 0, 0, 0.35);
  padding: 28px 24px 22px;
}
.logo { margin: 0; font-size: 40px; font-weight: 400; color: var(--sun); text-shadow: 3px 3px 0 var(--ink), 3px 3px 0 var(--ink); line-height: 1.1; }
.sub { margin: 8px 0 18px; color: var(--muted); font-size: 14px; }
.live { margin: -6px 0 16px; font-size: 13px; color: var(--leaf); }
h2 { margin: 0; font-size: 20px; font-weight: 400; }
h3 { margin: 18px 0 8px; font-size: 13px; color: var(--muted); font-weight: 700; letter-spacing: 0.02em; }

.tabs { display: flex; gap: 4px; background: var(--ink); padding: 4px; border-radius: 8px; margin-bottom: 16px; }
.tabs button { flex: 1; border: 0; padding: 8px; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-weight: 700; }
.tabs button.on { background: var(--ink-3); color: var(--paper); }

.form { display: flex; flex-direction: column; gap: 12px; }
.form label, .settings label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.form input, .settings select {
  background: var(--ink); color: var(--paper); border: 2px solid var(--ink-3); border-radius: 8px;
  padding: 10px 12px; font-size: 15px; outline: none; width: 100%;
}
.form input:focus, .settings select:focus { border-color: var(--sun); }
/* 첫 화면: 버튼 하나로 입장 */
.btn.big.enter-btn { display: block; width: auto; min-width: 260px; margin: 10px auto; padding: 14px 26px; }
.hint.center { text-align: center; }

.error { color: var(--rose); font-size: 13px; margin: 0; min-height: 1em; }
.warn { margin: 14px 0 0; font-size: 12px; color: var(--sun); line-height: 1.5; }
.hint { margin: 0; font-size: 12px; color: var(--muted); }

.btn {
  border: 2px solid var(--ink); border-radius: 8px; padding: 10px 16px; cursor: pointer; font-weight: 700;
  background: var(--ink-3); color: var(--paper); box-shadow: 0 3px 0 var(--ink); transition: transform 0.05s, filter 0.1s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn.primary { background: var(--sun); color: var(--ink); box-shadow: 0 3px 0 var(--sun-dark), 0 3px 0 2px var(--ink); }
.btn.big { width: 100%; padding: 14px; font-size: 17px; font-family: var(--pixel); font-weight: 400; }
.btn.small { padding: 7px 12px; font-size: 13px; }
.btn.ghost { background: transparent; border-color: var(--ink-3); box-shadow: none; }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 13px; }
.row { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; margin-top: 14px; }

.avatar-stage {
  background:
    radial-gradient(ellipse 40% 10% at 50% 86%, rgba(0, 0, 0, 0.22), transparent 70%),
    repeating-conic-gradient(#7ec850 0 25%, #74bd48 0 50%) 0 0 / 12px 12px;
  border: 3px solid var(--ink); border-radius: 10px; padding: 6px; display: inline-flex; flex-direction: column; align-items: center;
}

/* ── HUD ─────────────────────────────────── */

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud > * { pointer-events: auto; }
#hud > #feed { pointer-events: none; }

/* 위쪽 막대 (넓은 화면 · 왼쪽 위): 막대 하나 = 구역 이름 │ 손님 수 │ 날씨
   오른쪽 위 🖥 내 책상 머리줄과 같은 높이 · 같은 모양 (둥근 유리 막대 · 누르는 것만 알약 · 유리는 아래 '위쪽 막대' 묶음)
   (예전엔 알약 셋이 높이 · 모서리 · 글꼴 · 테두리 색이 저마다 달라서 들쭉날쭉) */
#topbar {
  position: absolute; top: 12px; left: 12px; max-width: calc(100% - 24px); box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 16px; /* 끝이 글자라 양쪽 같게 */
  color: var(--paper); font-size: 13px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --tb-row: 27px; /* 줄 높이 = 내 책상 머리줄 단추(.dz-hb) 높이 → 두 막대 높이가 같음 */
}
/* 손가락 화면 (아이패드 · 터치 노트북): 책상 머리줄 단추가 34px 로 커지니 막대 줄도 34px (예전엔 막대만 낮아서 책상 머리줄과 어긋났음) */
@media (pointer: coarse) { #topbar { --tb-row: 34px; } }
/* 📱 휴대폰 배치 (휴대폰 · 세워 든 아이패드 — js/media.js PHONE_Q): 위쪽 막대(구역 이름 · 손님 수 · 날씨)는 숨김 → 게임 화면 · 내 책상이 그만큼 위로
   (책상 · 지도 · 채팅 자리는 막대 아래 끝을 재서 정함 → 숨기면 0 이라 저절로 맨 위부터 · js/desk.js · js/layout.js · js/minimap.js) */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px), (pointer: coarse) and (max-width: 900px) and (orientation: portrait) { #topbar { display: none; } }
/* 구역 이름: 한 줄 (좁으면 … 로 줄어듦 · 나머지는 그대로) · OFFICE 흰색 · 세부 구역은 민트 */
#zone-badge { flex: 0 1 auto; min-width: 0; }
#zone-badge b { display: block; font-size: 14px; font-weight: 400; line-height: var(--tb-row); color: var(--g-hi, #f3effc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#zone-badge .zb-sep { font-style: normal; color: var(--muted); }
#zone-badge .zb-area { font-style: normal; color: #9ff0da; }
/* 손님 수 · 날씨: 바탕 없이 글자만 · 앞에 얇은 세로 줄 */
#online-pill, #wx-pill {
  flex: none; height: var(--tb-row); padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 12.5px; font-weight: 700; line-height: var(--tb-row); white-space: nowrap;
}
#online-pill small { color: var(--muted); font-weight: 600; }
/* 🌦 서울 날씨 (js/hud.js · 누르면 출처 Open-Meteo.com) */
#wx-pill { color: inherit; text-decoration: none; }
#wx-pill:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

#status {
  position: absolute; top: 72px; left: 50%; transform: translateX(-50%);
  background: var(--rose); color: var(--ink); font-weight: 800; font-size: 13px; padding: 8px 14px; border-radius: 999px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
}

#toolbar {
  position: absolute; bottom: calc(14px + var(--safe-b)); left: 50%; transform: translateX(-50%); z-index: 7;
  display: flex; align-items: center; gap: 6px; background: rgba(27, 24, 40, 0.92); border: 2px solid var(--ink-3);
  border-radius: 14px; padding: 6px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
}
.tool {
  width: 44px; height: 44px; border-radius: 10px; border: 0; background: var(--ink-3); cursor: pointer; font-size: 20px;
  position: relative; flex: none; transition: filter 0.1s, transform 0.05s;
}
.tool:hover { filter: brightness(1.25); }
.tool:active { transform: translateY(1px); }
.tool.on { background: var(--ink-4); box-shadow: inset 0 0 0 2px var(--sun); }
.tool.off { background: #5a2a3a; }
.tool.off::after {
  content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 3px; background: var(--rose);
  transform: rotate(-40deg); border-radius: 2px;
}
.tool:disabled { opacity: 0.4; cursor: default; }
/* 먹이 뿌리기 쿨타임: 흐리게 + 남은 초 */
.tool.cool { filter: grayscale(0.7) brightness(0.8); }
.tool.cool::after {
  content: attr(data-left); position: absolute; right: 1px; bottom: 1px; min-width: 18px; height: 18px; padding: 0 3px;
  border-radius: 9px; background: var(--ink-4); color: #fff; font-size: 11px; line-height: 18px; font-weight: 700;
  box-shadow: 0 0 0 2px rgba(27, 24, 40, 0.92); font-variant-numeric: tabular-nums;
}
.sep { width: 2px; height: 28px; background: var(--ink-3); margin: 0 2px; flex: none; }
#help {
  position: absolute; bottom: var(--help-b, calc(80px + var(--safe-b))); left: 50%; transform: translateX(-50%);
  margin: 0; font-size: 10px; letter-spacing: -0.2px; color: rgba(253, 246, 227, 0.78); text-shadow: 0 1px 2px #000; white-space: nowrap; pointer-events: none;
}
/* 채팅과 겹치거나 판이 열려 있으면 키 안내는 잠깐 숨김 (js/layout.js) */
#help.crowded, body:has(.sheet:not(.min)) #help { visibility: hidden; }
.emote { width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; font-size: 22px; cursor: pointer; }
.emote:hover { background: var(--ink-3); transform: translateY(-2px); }

/* 숲 소식: 화면 왼쪽 아래에 잠깐 떴다 사라지는 알림 */
#feed {
  position: absolute; left: 12px; bottom: var(--feed-b, calc(14px + var(--safe-b))); width: min(290px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 4px; pointer-events: none;
}
.feed-line {
  align-self: flex-start; max-width: 100%; padding: 4px 8px; border-radius: 7px; font-size: 11px; line-height: 1.4;
  background: rgba(27, 24, 40, 0.8); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); word-break: break-word;
  animation: feed-in 0.3s ease; transition: opacity 0.5s, transform 0.5s;
}
.feed-line.gone { opacity: 0; transform: translateY(6px); }
@keyframes feed-in { from { opacity: 0; transform: translateY(6px); } }

/* 🗺️ 미니맵 (오른쪽 위 · js/minimap.js) */
#minimap-wrap { position: absolute; right: 12px; top: 12px; z-index: 3; }
#minimap-wrap.away { display: none; }
.mm-panel {
  width: 248px; background: rgba(27, 24, 40, 0.9); border: 2px solid var(--ink-3); border-radius: 12px; padding: 6px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px);
}
.mm-head { display: flex; align-items: center; gap: 6px; padding: 0 2px 5px; font-size: 12px; }
.mm-head b { font-weight: 400; color: var(--sun); white-space: nowrap; }
.mm-where { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-toggle {
  width: 24px; height: 22px; border-radius: 6px; border: 1px solid var(--ink-4); background: var(--ink-3); color: var(--paper);
  font-size: 11px; line-height: 1; cursor: pointer; padding: 0;
}
.mm-toggle:hover, .mm-fab:hover { border-color: var(--sun); }
#minimap-wrap canvas { width: 100%; display: block; border-radius: 6px; cursor: crosshair; touch-action: manipulation; }
.mm-fab {
  display: none; width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--ink-3); background: rgba(27, 24, 40, 0.9);
  font-size: 20px; cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
}
#minimap-wrap.closed .mm-panel { display: none; }
#minimap-wrap.closed .mm-fab { display: block; }
.mm-toggle:focus-visible, .mm-fab:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
@media (max-width: 720px), (pointer: coarse) and (max-width: 900px) and (orientation: portrait) { .mm-panel { width: min(200px, calc(100vw - 24px)); } }
.mini-btn {
  border: 1px solid var(--ink-4); background: var(--ink-3); color: var(--paper); border-radius: 6px; padding: 3px 7px;
  font-size: 11px; cursor: pointer; font-weight: 700; white-space: nowrap;
}
.mini-btn:hover { border-color: var(--sun); }
.mini-btn.go { background: var(--sun); color: var(--ink); border-color: var(--sun); }

/* 아래에서 올라오는 판 (피드 · 💌 쪽지): 메뉴 막대 버튼으로 열고 닫음 · 넓은 화면·휴대폰 같음
   자리·크기는 js/layout.js 가 메뉴 막대를 재서 정함 (--sheet-*) · 변수가 없을 때는 아래 값 */
.sheet {
  position: absolute; left: var(--sheet-x, 50%); bottom: var(--sheet-b, calc(76px + var(--safe-b))); width: var(--sheet-w, min(520px, calc(100vw - 16px)));
  height: var(--sheet-h, min(66vh, calc(100vh - 150px - var(--safe-b)))); z-index: 6;
  display: flex; flex-direction: column; background: rgba(27, 24, 40, 0.97); border: 2px solid var(--ink-3); border-radius: 14px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35), 0 4px 0 rgba(0, 0, 0, 0.3); overflow: hidden;
  transform: translate(-50%, 0); opacity: 1; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s, visibility 0s;
}
.sheet.min { transform: translate(-50%, calc(100% + var(--sheet-b, 76px) + 14px)); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.24s ease-in, opacity 0.24s, visibility 0s 0.24s; }
.chat-unread.count { background: var(--sun); color: var(--ink); }
@keyframes fresh-ring { 50% { box-shadow: 0 0 0 3px rgba(255, 63, 191, 0.35); } }

/* 접속자 목록 */
#panel {
  z-index: 2; position: absolute; top: 70px; right: 12px; bottom: calc(80px + var(--safe-b)); width: 300px;
  background: rgba(27, 24, 40, 0.95); border: 2px solid var(--ink-3); border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
}
#panel header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 8px; }
#panel header b { font-weight: 400; color: var(--sun); }
#panel header .modal-x { position: static; }
.person { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; }
.person:hover { background: var(--ink-3); }

/* 알림 */
#toast {
  position: fixed; left: 50%; bottom: 140px; transform: translate(-50%, 12px); opacity: 0; z-index: 30;
  background: var(--paper); color: var(--ink); font-weight: 800; font-size: 12px; padding: 7px 12px; border-radius: 9px;
  border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); transition: opacity 0.2s, transform 0.2s; pointer-events: none;
  max-width: calc(100vw - 32px); text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
/* 🖱 둘러보다 내가 화면 가운데에서 멀어지면: 아래 독 바로 위 가운데 [📍 내 자리로] (js/main.js pan) */
#pan-home {
  position: fixed; left: 50%; bottom: calc(100px + var(--safe-b)); transform: translateX(-50%); z-index: 8;
  font: inherit; font-size: 13px; font-weight: 800; color: #1b1828; background: #ffd34e; cursor: pointer;
  border: 2px solid #1b1828; border-radius: 999px; padding: 7px 14px; box-shadow: 0 3px 0 #1b1828; white-space: nowrap;
}
#pan-home:hover { filter: brightness(1.06); }
#pan-home:active { transform: translate(-50%, 2px); box-shadow: 0 1px 0 #1b1828; }
#pan-home .pan-key { margin-left: 8px; padding: 1px 6px; border-radius: 5px; background: #1b1828; color: #ffd34e; font-size: 11px; font-weight: 800; vertical-align: 1px; }
@media (pointer: coarse) { #pan-home .pan-key { display: none; } }
/* 대화 상자가 떠 있으면 알림은 그 위로 */
body:has(#dialog:not(.hidden)) #toast { bottom: 250px; }

/* ── 모달 ─────────────────────────────────── */

#modal { position: fixed; inset: 0; background: rgba(10, 8, 18, 0.62); display: grid; place-items: center; padding: 16px; z-index: 20; }
.modal-card {
  position: relative; width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  background: var(--ink-2); border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: 0 0 0 3px var(--ink-3), 8px 8px 0 3px rgba(0, 0, 0, 0.35); padding: 24px;
}
.modal-card.wide { width: min(700px, 100%); }
.modal-card h2 { margin-bottom: 14px; }
.modal-x { position: absolute; top: 10px; right: 10px; border: 0; background: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 4px 8px; }

.joined { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.where { margin: 2px 0 0; color: var(--sun); font-size: 13px; font-weight: 700; }
.empty { color: var(--muted); font-size: 13px; }
.links { list-style: none; padding: 0; margin: 14px 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }

.chip { border: 2px solid var(--ink-3); background: var(--ink); color: var(--paper); border-radius: 6px; padding: 5px 9px; font-size: 13px; cursor: pointer; }
.chip.on { background: var(--sun); color: var(--ink); border-color: var(--sun); font-weight: 800; }


/* ── 놀이: 대화 상자 · 카드 · 보상 · 행동 버튼 ─────────────── */

#dialog {
  position: fixed; left: 50%; bottom: calc(84px + var(--safe-b)); transform: translateX(-50%); z-index: 18;
  width: min(600px, calc(100vw - 20px)); display: flex; gap: 12px; align-items: flex-start;
  background: rgba(27, 24, 40, 0.97); border: 3px solid var(--paper); border-radius: 12px; padding: 12px 14px 14px;
  box-shadow: 0 0 0 3px var(--ink), 0 6px 0 rgba(0, 0, 0, 0.35); cursor: pointer; user-select: none;
  animation: dlg-in 0.16s ease-out;
}
@keyframes dlg-in { from { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes blink { 50% { opacity: 0.15; } }

#card {
  position: fixed; left: 50%; top: 16%; transform: translateX(-50%); z-index: 22; width: min(340px, calc(100vw - 24px));
  background: var(--ink-2); border: 3px solid var(--paper); border-radius: 12px; padding: 16px; text-align: center;
  box-shadow: 0 0 0 3px var(--ink), 0 8px 0 rgba(0, 0, 0, 0.35); animation: card-in 0.28s cubic-bezier(0.2, 1.4, 0.4, 1);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
@keyframes card-in { from { opacity: 0; transform: translate(-50%, 20px) scale(0.85); } }
#card p { margin: 2px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
@keyframes badge-pop { from { transform: scale(0.3); } }
@keyframes reward-in { from { opacity: 0; transform: translate(-50%, -20px) scale(0.7); } }

/* 행동 버튼(휴대폰): 내 책상 창(z 4)보다 위 — 앉아 있을 땐 이 버튼으로만 일어나요 */
#act-btn {
  position: absolute; right: 14px; bottom: var(--act-b, calc(84px + var(--safe-b))); min-width: 74px; height: 74px; border-radius: 50%; z-index: 5;
  border: 3px solid var(--ink); background: var(--sun); color: var(--ink); box-shadow: 0 4px 0 var(--sun-dark), 0 4px 0 3px var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; padding: 4px 8px; touch-action: manipulation;
}
#act-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sun-dark), 0 1px 0 3px var(--ink); }
#act-btn .act-icon { font-size: 24px; line-height: 1; }
#act-btn .act-label { font-size: 11px; font-weight: 900; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (pointer: fine) { #act-btn { display: none; } }

/* 🎮 화면 게임패드 (손가락 화면 · js/pad.js): 왼쪽 아래 십자 패드 · 오른쪽 아래 A(액션) · B(점프) — 게임기처럼 도트 모양
   자리: 아래 메뉴 막대 바로 위 (막대 옆에 자리가 있으면 바닥 · js/layout.js --pad-dir-b · --pad-btn-b) · 켜 두면 예전 행동 버튼(#act-btn) 대신 A */
.pad { position: absolute; z-index: 5; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.pad.hidden { display: none; }
#pad-dir { --pd: 132px; left: calc(10px + env(safe-area-inset-left, 0px)); bottom: var(--pad-dir-b, calc(84px + var(--safe-b))); width: var(--pd); height: var(--pd); }
#pad-dir svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 0 rgba(27, 24, 40, 0.35)); }
#pad-dir .pd-plate { fill: rgba(27, 24, 40, 0.26); }
#pad-dir .pd-edge { fill: var(--ink); }
#pad-dir .pd-body { fill: #3b3556; }
#pad-dir .pd-fill { fill: transparent; }
#pad-dir .pd-arrow { fill: #cfc7e6; }
#pad-dir .pd-hub { fill: #2a2540; }
#pad-dir .pd-arm.on .pd-fill { fill: var(--sun); }
#pad-dir .pd-arm.on .pd-arrow { fill: var(--ink); }
#pad-btns { --pa: 72px; --pb: 60px; right: calc(10px + env(safe-area-inset-right, 0px)); bottom: var(--pad-btn-b, calc(84px + var(--safe-b))); width: calc(var(--pa) + var(--pb) + 14px); height: calc(var(--pa) + var(--pb) * 0.55); }
.pad-btn {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; margin: 0;
  border: 3px solid var(--ink); border-radius: 50%; color: var(--ink); cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent;
}
#pad-a { right: 0; top: 0; width: var(--pa); height: var(--pa); background: var(--sun); box-shadow: 0 4px 0 var(--sun-dark), 0 4px 0 3px var(--ink); }
#pad-b { left: 0; bottom: 4px; width: var(--pb); height: var(--pb); background: #ff8fab; box-shadow: 0 4px 0 #d8607f, 0 4px 0 3px var(--ink); }
#pad-a.down { transform: translateY(3px); box-shadow: 0 1px 0 var(--sun-dark), 0 1px 0 3px var(--ink); }
#pad-b.down { transform: translateY(3px); box-shadow: 0 1px 0 #d8607f, 0 1px 0 3px var(--ink); }
/* 🙇 꾸벅 인사: B 위 작은 단추 · 💃 덩실덩실 춤: A 위 작은 단추 (같은 크기 · A 와 조금 띄움) */
#pad-c, #pad-d { --pc: calc(var(--pb) * 0.72); width: var(--pc); height: var(--pc); }
#pad-c { left: calc((var(--pb) - var(--pc)) / 2); top: calc(var(--pc) * -0.62); background: #9fe3c9; box-shadow: 0 3px 0 #5fb594, 0 3px 0 3px var(--ink); }
#pad-c.down { transform: translateY(2px); box-shadow: 0 1px 0 #5fb594, 0 1px 0 3px var(--ink); }
#pad-d { right: calc((var(--pa) - var(--pc)) / 2); top: calc(var(--pc) * -1 - 7px); background: #cdb8ff; box-shadow: 0 3px 0 #9b84df, 0 3px 0 3px var(--ink); }
#pad-d.down { transform: translateY(2px); box-shadow: 0 1px 0 #9b84df, 0 1px 0 3px var(--ink); }
#pad-c .pb-face, #pad-d .pb-face { font-size: 17px; }
#pad-c .pb-cap, #pad-d .pb-cap { font-size: 9px; }
.pad-btn .pb-face { font-family: var(--pixel); font-weight: 400; font-size: 26px; line-height: 1; }
.pad-btn.emoji .pb-face { font-family: var(--font); font-size: 24px; }
.pad-btn .pb-cap { font-size: 10px; font-weight: 900; line-height: 1.1; max-width: calc(100% - 10px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pad-b .pb-face { font-size: 22px; }
#pad-a.idle { background: #f2e6b0; box-shadow: 0 4px 0 #cdb768, 0 4px 0 3px var(--ink); }
#pad-a.idle .pb-face, #pad-a.idle .pb-cap { opacity: 0.7; }
#pad-a.idle.down { box-shadow: 0 1px 0 #cdb768, 0 1px 0 3px var(--ink); }
body.pad-on #act-btn { display: none !important; }
/* 좁은 휴대폰: [📍 내 자리로] 를 패드 위로 (B 단추와 겹치지 않게) */
@media (max-width: 520px) { body.pad-on #pan-home { bottom: calc(var(--pad-btn-b, 84px) + 120px); } }
/* 가로로 눕힌 휴대폰 (높이가 낮음): 조금 작게 */
@media (max-height: 500px) {
  #pad-dir { --pd: 112px; }
  #pad-btns { --pa: 62px; --pb: 52px; }
  .pad-btn .pb-face { font-size: 22px; }
  #pad-b .pb-face { font-size: 19px; }
}
/* 💼 회의 화면이 맵을 덮으면 숨김 (걷지 않음) */
body.lv-full .pad { visibility: hidden; }
.stamp { background: var(--ink); border: 2px dashed var(--ink-3); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stamp i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--ink-3); color: var(--muted); font-size: 16px; }
.stamp.on { border-style: solid; border-color: #e8705e; }
.stamp.on i { border-color: #e8705e; color: #ff8a7a; transform: rotate(-12deg); }
.stamp b { font-size: 12px; text-align: center; }
.stamp small { font-size: 10px; color: var(--muted); }
.bar { height: 6px; background: var(--ink-3); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--leaf); }
.chip.locked { opacity: 0.55; border-style: dashed; }
.btn.like.on { background: var(--rose); color: var(--ink); }
.pal { background: var(--ink); border: 2px solid var(--ink-3); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; color: var(--paper); }
.pal canvas { width: 32px; height: 32px; }
.pal span { font-size: 11px; }
.pal small { font-size: 10px; color: var(--muted); }
.pal.on { border-color: var(--sun); }
.pal.locked { opacity: 0.55; }

/* 피드 (js/feed.js) */
.fd-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; user-select: none; }
.fd-head b { font-weight: 400; color: var(--sun); font-size: 14px; }
.fd-count { font-size: 11px; color: var(--muted); flex: 1; white-space: nowrap; }
.fd-fold { color: var(--muted); font-size: 12px; }
.fd-write { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 4px; }
.fd-write textarea {
  width: 100%; resize: none; height: 38px; background: var(--ink); color: var(--paper); border: 2px solid var(--ink-3); border-radius: 8px;
  padding: 7px 9px; font: inherit; font-size: 13px; line-height: 1.4; outline: none; transition: height 0.15s;
}
.fd-write textarea.tall { height: 96px; }
.fd-write textarea:focus { border-color: var(--sun); }
.fd-write-row { display: flex; align-items: center; gap: 6px; }
.fd-write-row small { flex: 1; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-write-btn { border: 0; border-radius: 8px; padding: 5px 12px; background: var(--sun); color: var(--ink); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.fd-write-btn:disabled { opacity: 0.5; }
.fd-list { flex: 1 1 auto; min-height: 60px; overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain; }
.fd-empty { margin: 6px 2px; font-size: 12px; color: var(--muted); }
.fd-post { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 10px; padding: 8px 10px; }
.fd-post.mine { border-color: rgba(255, 211, 78, 0.35); }
.fd-post.fresh { border-color: #ff3fbf; animation: fresh-ring 1.6s ease 2; }
.fd-meta { display: flex; align-items: baseline; gap: 6px; }
.fd-meta time, .fd-cm time { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.fd-nick { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 700; color: #9fd8ff; cursor: pointer; text-align: left; }
.fd-nick:hover { text-decoration: underline; }
.fd-text { margin: 4px 0 6px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.fd-text a, .fd-cm-t a { color: #ffd27a; }
.fd-foot { display: flex; gap: 6px; }
.fd-btn { border: 1px solid var(--ink-4); background: transparent; color: var(--paper); border-radius: 999px; padding: 2px 9px; font: inherit; font-size: 11.5px; cursor: pointer; }
.fd-btn:hover, .fd-btn.on { border-color: var(--sun); }
.fd-btn.on { color: #ff8fb1; }
.fd-del { margin-left: auto; color: var(--muted); border-color: transparent; }
.fd-cms { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--ink-4); display: flex; flex-direction: column; gap: 4px; }
.fd-cm { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; line-height: 1.45; }
.fd-cm .fd-nick { font-size: 12px; flex: none; }
.fd-cm-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fd-cm-x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 13px; }
.fd-cm-empty { margin: 0; font-size: 11.5px; color: var(--muted); }
.fd-cm-form { display: flex; gap: 4px; margin-top: 4px; }
.fd-cm-form input { flex: 1; min-width: 0; background: var(--ink); color: var(--paper); border: 2px solid var(--ink-3); border-radius: 7px; padding: 4px 8px; font-size: 12.5px; outline: none; }
.fd-cm-form input:focus { border-color: var(--sun); }
.fd-cm-form button { border: 0; border-radius: 7px; padding: 0 10px; background: var(--ink-4); color: var(--paper); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.fd-more { border: 1px dashed var(--ink-4); background: transparent; color: var(--muted); border-radius: 8px; padding: 6px; font: inherit; font-size: 12px; cursor: pointer; }

/* 누가 들어왔어요 (오른쪽 아래) */
#hud > #joins { pointer-events: none; }
#joins { position: absolute; right: 12px; bottom: var(--joins-b, calc(14px + var(--safe-b))); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 4; }
.join-line {
  background: rgba(27, 24, 40, 0.92); border: 2px solid var(--leaf); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--paper);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); animation: join-in 0.25s ease; transition: opacity 0.5s, transform 0.5s;
}
.join-line b { color: #b8f5c9; font-weight: 700; }
.join-line.gone { opacity: 0; transform: translateY(6px); }
@keyframes join-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── 작은 화면 ─────────────────────────────── */

/* 손가락으로 쓰는 화면엔 키보드 안내가 필요 없음 */
@media (pointer: coarse) { #help { display: none; } }

/* 휴대폰 (세로 · 가로): 도구 막대는 오른쪽 아래로 비켜 줌 · 피드·쪽지 판은 도구 막대 위로 올라옴 */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px), (pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
  #toolbar { left: auto; right: 10px; transform: none; }
  #feed { bottom: var(--feed-b, calc(66px + var(--safe-b))); }
  .sheet { bottom: var(--sheet-b, calc(70px + var(--safe-b))); height: var(--sheet-h, min(72vh, calc(100vh - 130px - var(--safe-b)))); }
}
/* 가로로 눕힌 휴대폰: 판은 화면 높이에 맞게 */
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  .sheet { height: var(--sheet-h, calc(100vh - 90px - var(--safe-b))); }
}

@media (max-width: 720px), (pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
  #help { display: none; }
  .tool { width: 38px; height: 38px; font-size: 17px; }
  #toolbar { gap: 3px; padding: 5px; bottom: calc(10px + var(--safe-b)); }
  .sep { display: none; }
  #panel { top: 64px; left: 8px; right: 8px; width: auto; bottom: calc(66px + var(--safe-b)); }
  #feed { bottom: var(--feed-b, calc(66px + var(--safe-b))); width: min(300px, calc(100vw - 24px)); }
  #toolbar { max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none; }
  #dialog { bottom: calc(66px + var(--safe-b)); }
  #act-btn { bottom: var(--act-b, calc(150px + var(--safe-b))); right: 10px; }
  .modal-card { padding: 18px 14px; }
}

/* ── 첫 화면 (js/home.js): 링크 미리보기 그림(icons/og.png)과 같은 모양 ───────────────
   노란 바탕 · 갈무리 도트 글자 세 줄 (Indie / hacker / Online) · 밑줄 막대 · 인디해커온라인
   오른쪽에 OFFICE 창 (실제 오피스 화면 그림 · 검은 테두리와 그림자) · 좁은 화면은 창이 위 · 글자와 버튼이 아래 */
.screen.home { background: #ffd34e; color: #1b1828; padding: 32px 24px calc(32px + var(--safe-b)); }
.home-main {
  width: min(1160px, 100%); display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  align-items: center; gap: clamp(32px, 5vw, 80px);
}
.home-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.home-title { margin: 0; font-family: var(--pixel); font-weight: 400; font-size: clamp(54px, 8vw, 112px); line-height: 0.98; letter-spacing: 0; color: #1b1828; }
.home-title span { display: block; }
.home-bar { display: block; width: clamp(64px, 7vw, 96px); height: 6px; margin: clamp(18px, 2.4vw, 28px) 0 clamp(14px, 1.8vw, 22px); background: #1b1828; }
.home-name { margin: 0; font-family: var(--pixel); font-size: clamp(26px, 3vw, 38px); line-height: 1.2; color: #1b1828; }
.home-sub { margin: 14px 0 28px; font-family: var(--pixel); font-size: clamp(16px, 1.6vw, 21px); line-height: 1.6; color: #5a4510; word-break: keep-all; }
.home-sub > span { display: block; }
/* 첫 화면 단추 둘을 위아래로: 위 Google 로그인 (진한 단추) · 아래 게스트로 입장 (연한 단추) · 크기는 같게
   혼자일 때 (이미 로그인 · Google 설정 없음 → #auth.solo) 는 남은 단추가 진한 단추 */
.home .enter-row { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px; width: min(380px, 100%); margin: 0 0 14px; }
.home .enter-row .btn.big.enter-btn, .home .enter-row .btn.big.login-btn {
  width: 100%; min-width: 0; margin: 0; padding: 15px 24px; border: 3px solid #1b1828; border-radius: 6px;
  font-family: var(--pixel); font-weight: 400; font-size: 18px; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.home .enter-row .btn.big.login-btn, .home.solo .enter-row .btn.big.enter-btn { background: #1b1828; color: #ffd34e; box-shadow: 6px 6px 0 rgba(27, 24, 40, 0.22); }
.home .enter-row .btn.big.login-btn:hover, .home.solo .enter-row .btn.big.enter-btn:hover { filter: none; background: #2d2742; }
.home .enter-row .btn.big.login-btn:active, .home.solo .enter-row .btn.big.enter-btn:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 rgba(27, 24, 40, 0.22); }
.home .enter-row .btn.big.enter-btn { background: #fdf6e3; color: #1b1828; box-shadow: none; }
.home .enter-row .btn.big.enter-btn:hover { filter: none; background: #fff; }
.home .live { margin: 0 0 6px; color: #1b1828; font-size: 13px; line-height: 1.4; min-height: 1.4em; transition: opacity 0.6s; }
.home .live.off { opacity: 0; }
.home .hint { margin: 0; color: #5a4510; font-size: 13px; line-height: 1.5; text-align: left; word-break: keep-all; }
.home .error { margin-top: 10px; }
.home .warn { max-width: 360px; }
.home .legal-links, .home .legal-links a { color: #5a4510; }
.home .legal-links a:hover { color: #1b1828; }
/* 동의 칸 (만 14세 이상 · 약관 동의 · 방침 확인): 체크해야 단추가 켜짐 · 검은 테두리 네모 + 노란 픽셀 체크 */
.home-agree { display: flex; align-items: flex-start; gap: 10px; max-width: 30em; margin: 0 0 16px; color: #1b1828; font-size: 14px; line-height: 1.55; word-break: keep-all; cursor: pointer; }
.home-agree input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 3px solid #1b1828; border-radius: 3px; background: #fdf6e3; cursor: pointer; }
.home-agree input:checked { background: #1b1828 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2 4-4.4' fill='none' stroke='%23ffd34e' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center / 14px no-repeat; }
.home-agree input:focus-visible { outline: 3px solid #ff6b8b; outline-offset: 2px; }
.home-agree a { color: #1b1828; font-weight: 700; text-underline-offset: 3px; }
.home-agree.nudge { animation: agree-nudge 0.45s; }
@keyframes agree-nudge { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.home .enter-row .btn.big:disabled, .home.solo .enter-row .btn.big:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; }
/* OFFICE 창: 검은 테두리 · 위 막대(점 셋 + 이름) · 오른쪽 아래로 검은 그림자 */
.home-window { margin: 0; min-width: 0; border: 6px solid #1b1828; background: #1b1828; box-shadow: 14px 14px 0 #1b1828; }
.hw-bar { position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px; background: #262139; }
.hw-bar > i { width: 12px; height: 12px; background: #ff6b8b; }
.hw-bar > i:nth-child(2) { background: #ffd34e; }
.hw-bar > i:nth-child(3) { background: #5fe0c0; }
.hw-bar > span { position: absolute; left: 0; right: 0; text-align: center; font-family: var(--pixel); font-size: 15px; color: #b9b1d0; pointer-events: none; }
/* ♪ 카페 노래 단추 (OFFICE 창 위 막대 오른쪽 · js/home.js) · 막대 셋은 소리에 맞춰 높이가 바뀜 */
.hw-music { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #ffd34e; font-family: var(--pixel); font-size: 13px; line-height: 1; cursor: pointer; }
.hw-music:hover { background: rgba(255, 255, 255, 0.16); }
.hw-music:focus-visible { outline: 2px solid #ff6b8b; outline-offset: 2px; }
.hw-music.off { color: #8a83a3; }
.hw-music .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.hw-music .eq i { display: block; width: 3px; height: 3px; background: currentColor; }
.hw-music.off .eq i { height: 3px !important; }
/* 켜졌는데 브라우저가 소리를 막아 둔 동안: ▶ 가 깜빡 (화면 어디든 누르면 나와요) */
.hw-music .play { display: none; font-size: 9px; }
.hw-music.wait .play { display: inline; }
.hw-music.wait .eq { display: none; }
.hw-music.wait { animation: hw-wait 1.6s ease-in-out infinite; }
@keyframes hw-wait { 50% { background: rgba(255, 211, 78, 0.24); } }
@media (prefers-reduced-motion: reduce) { .hw-music.wait { animation: none; } }
/* 🌊 노래에 맞춰 일렁이는 물결 캔버스 (js/home.js): 화면 맨 뒤 · 큰 픽셀 그대로 */
.home-waves { position: fixed; left: 0; top: 0; z-index: 0; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; }
.screen.home > .home-main { position: relative; z-index: 1; }
.home-window img { display: block; width: 100%; height: auto; aspect-ratio: 1220 / 1093; object-fit: cover; }
/* 좁은 화면 (휴대폰): 창은 위에 낮게 · 이름은 두 줄 (Indiehacker / Online) · 버튼까지 한 화면에 */
@media (max-width: 760px) {
  .screen.home { padding: 16px 18px calc(20px + var(--safe-b)); }
  .home-main { grid-template-columns: minmax(0, 1fr); gap: 18px; width: min(460px, 100%); }
  .home-window { order: -1; margin-right: 8px; border-width: 4px; box-shadow: 8px 8px 0 #1b1828; }
  .hw-bar { height: 28px; padding: 0 10px; gap: 7px; }
  .hw-bar > i { width: 9px; height: 9px; }
  .hw-bar > span { font-size: 13px; }
  .hw-music { height: 20px; right: 6px; font-size: 12px; }
  .home-window img { aspect-ratio: 2.2 / 1; }
  .home-title { font-size: clamp(38px, 12.5vw, 60px); }
  .home-title span:nth-child(-n + 2) { display: inline; }
  .home-bar { height: 5px; margin: 12px 0 10px; }
  .home-name { font-size: 24px; }
  .home-sub { margin: 8px 0 18px; font-size: 15px; }
  .home .enter-row { width: 100%; }
  .home .enter-row .btn.big.enter-btn, .home .enter-row .btn.big.login-btn { width: 100%; }
}
.form select { background: var(--ink); color: var(--paper); border: 2px solid var(--ink-3); border-radius: 8px; padding: 10px 12px; font-size: 15px; width: 100%; }

/* 축하 폭죽 (게임 위 · 창 아래) · 공지 띠 (화면 위 가운데) — js/celebrate.js */
#fireworks { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 19; }
#announce {
  position: fixed; left: 50%; top: calc(64px + var(--safe-t, 0px)); transform: translate(-50%, -16px); z-index: 25; opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px; max-width: calc(100vw - 24px); padding: 10px 18px; border-radius: 12px;
  background: rgba(27, 24, 40, 0.94); border: 2px solid #ff3fbf; box-shadow: 0 0 0 3px rgba(255, 63, 191, 0.18), 0 6px 0 rgba(0, 0, 0, 0.35);
  text-align: center; transition: opacity 0.3s, transform 0.3s;
}
#announce.show { opacity: 1; transform: translate(-50%, 0); }
#announce b { font-size: 15px; color: #fff4c2; font-weight: 800; }
#announce small { font-size: 11px; color: rgba(253, 246, 227, 0.75); }

/* 채팅 (js/chat.js): 넓은 화면은 왼쪽 아래에 펼쳐 둠 · 휴대폰은 💬 로 아래에서 열림
   펼쳐 두면 알림(#feed)은 채팅 위로 비켜 줌
   자리·너비·말 목록 높이는 js/layout.js 가 메뉴 막대를 재서 정함 (--chat-*):
   막대 옆에 들어가면 바닥에, 좁으면 막대 위로 · 위쪽 막대에 닿지 않게 말 목록을 줄임 */
#chat {
  position: absolute; left: 12px; bottom: var(--chat-b, calc(14px + var(--safe-b))); width: var(--chat-w, min(340px, calc(100vw - 24px))); z-index: 2;
  display: flex; flex-direction: column; background: rgba(27, 24, 40, 0.86); border: 2px solid var(--ink-3); border-radius: 12px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); overflow: hidden;
}
#chat.closed { display: none; }
/* 좁은 화면에서 판과 채팅이 겹치면 판이 열린 동안만 채팅을 숨김 */
body:has(.sheet:not(.min):not(#mt-side)) #chat.under-sheet { visibility: hidden; }
/* 💌 쪽지 · 친구: 넓은 화면은 넓은 판 (--wsheet-*) · 좁으면 보통 판 */
@media (min-width: 900px) { body:has(#mt-side:not(.min)) #chat.under-wsheet { visibility: hidden; } }
@media (max-width: 899px) { body:has(#mt-side:not(.min)) #chat.under-sheet { visibility: hidden; } }
body.chat-open #feed { bottom: var(--feed-b, calc(14px + 268px + var(--safe-b))); }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 4px 12px; }
.chat-head b { flex: 1; font-weight: 400; color: var(--sun); font-size: 13px; }
.chat-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 2px 6px; line-height: 1; }
.chat-x:hover { color: var(--paper); }
.chat-log { height: var(--chat-log, 180px); overflow-y: auto; padding: 2px 10px 6px; display: flex; flex-direction: column; gap: 2px; overscroll-behavior: contain; }
.chat-line { margin: 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; color: var(--paper); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.chat-line.me .t { color: #ffe9a8; }
.chat-nick { border: 0; background: none; padding: 0 6px 0 0; font: inherit; font-weight: 700; color: #9fd8ff; cursor: pointer; }
.chat-line.me .chat-nick { color: var(--sun); }
.chat-nick:hover { text-decoration: underline; }
.chat-empty { margin: auto 0 4px; font-size: 12px; color: var(--muted); }
.chat-form { display: flex; gap: 6px; padding: 6px 8px 8px; border-top: 1px solid var(--ink-3); }
.chat-form input {
  flex: 1; min-width: 0; background: var(--ink); color: var(--paper); border: 2px solid var(--ink-3); border-radius: 8px;
  padding: 7px 10px; font-size: 14px; outline: none;
}
.chat-form input:focus { border-color: var(--sun); }
.chat-send { flex: none; border: 0; border-radius: 8px; padding: 0 12px; background: var(--sun); color: var(--ink); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.chat-send:disabled { opacity: 0.5; cursor: default; }
.chat-unread {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--rose); color: #fff;
  font-style: normal; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px rgba(27, 24, 40, 0.92);
}
.chat-unread.hidden { display: none; }
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px), (pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
  /* 도구 막대(💬 로 닫기)와 모아보기 버튼은 가리지 않게 그 위에 띄움 */
  #chat { left: 8px; width: var(--chat-w, calc(100vw - 16px)); bottom: var(--chat-b, calc(68px + var(--safe-b))); z-index: 6; background: rgba(27, 24, 40, 0.97); }
  .chat-log { height: var(--chat-log, min(34vh, 240px)); }
  .chat-head b { font-size: 15px; }
  .chat-x { font-size: 18px; padding: 4px 8px; }
  .chat-form input { font-size: 16px; } /* iOS 가 확대하지 않게 */
  body.chat-open #feed { display: none; }
  /* 쓰는 중 (키보드가 올라옴 · js/chat.js typing): 채팅을 "지금 보이는 곳" 맨 아래(키보드 바로 위)에 붙임 · 말 목록은 짧게
     --kb = 화면 바닥에서 보이는 곳 바닥까지 (키보드 + iOS 가 밀어 올린 만큼 · 매 프레임) → 어느 폰 · 브라우저든 키보드 바로 위
     독 · 행동 버튼 · 위쪽 막대 · 지도 · 책상은 잠깐 숨김 → 남은 화면에 내 캐릭터와 말풍선이 보이게 (채팅을 가리지 않게) */
  body.chat-typing #toolbar, body.chat-typing #act-btn, body.chat-typing .pad, body.chat-typing #joins, body.chat-typing #help, body.chat-typing #desk,
  body.chat-typing #topbar, body.chat-typing #minimap-wrap, body.chat-typing #session-call, body.chat-typing #mt-pop { visibility: hidden; }
  body.chat-typing #chat { bottom: calc(max(var(--kb, 0px), var(--kb-sb, var(--safe-b))) + 6px); }
  body.chat-typing .chat-log { height: var(--chat-log-t, 120px); }
  body.chat-typing .cr-grip { display: none; }
  body.chat-typing.chat-tight .chat-head { display: none; } /* 보이는 곳이 아주 낮을 때 (가로 화면 등) 제목 줄은 숨김 */
}
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  #chat { width: var(--chat-w, min(380px, 50vw)); bottom: var(--chat-b, calc(70px + var(--safe-b))); }
  .chat-log { height: var(--chat-log, 32vh); }
}

.chat-bot { font-size: 11px; margin-right: 3px; }

/* 휴대폰: 들어왔어요는 도구 막대 위 · 입력 칸 글자는 16px (iOS 가 확대하지 않게) */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px), (pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
  .fd-write textarea, .fd-cm-form input { font-size: 16px; }
  #joins { right: 10px; bottom: var(--joins-b, calc(74px + var(--safe-b))); }
}

/* ── ⏱ OFFICE 개인 타이머 (js/session.js): 타이머를 켠 채 OFFICE 를 나가면 위쪽 가운데에 잠깐 안내 ── */
#session-call {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 6; max-width: calc(100vw - 24px);
  display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-radius: 12px;
  background: rgba(27, 24, 40, 0.94); border: 2px solid var(--sun); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  font-size: 14px; pointer-events: auto; animation: sc-in 0.25s ease-out;
}
#session-call .sc-x { background: none; border: 0; color: var(--muted); font-size: 14px; cursor: pointer; padding: 2px 4px; }
#session-call { width: max-content; flex-wrap: wrap; }
#session-call > span { flex: 1 1 180px; line-height: 1.4; word-break: keep-all; }
#session-call .btn { white-space: nowrap; }
@keyframes sc-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 720px), (pointer: coarse) and (max-width: 900px) and (orientation: portrait) { #session-call { top: 58px; font-size: 13px; } #session-call > span { flex-basis: 100%; } }

/* ── 🖥 내 책상 (js/desk.js) ─────────────────────────────
   OFFICE 의자에 앉아 있는 동안 오른쪽 · 폭은 화면의 1/5 쯤 · 위아래 꽉 차게 (높이는 js 가 정함)
   배치: 제목 막대가 있는 창 다섯 개 (도트 게임 창처럼) · 모양: 둥근 반투명 위젯 (뒤 게임 화면이 비침)
   지금 하는 일(글자 · 시계 · ▶/■ · 진행 칸 · 뽀모도로) · 할 일 · 메모 · 📊 내 업무 통계 */
#desk {
  --dz-mint: #5fe0c0; --dz-mint-t: #d8fff4; --dz-dim: #b9b1d0; --dz-faint: #8d86a8; --dz-hi: #f3effc;
  position: absolute; right: 12px; top: 72px; z-index: 4; width: clamp(270px, 20vw, 400px);
  display: flex; flex-direction: column; gap: 8px; pointer-events: auto; animation: dk-in 0.2s ease-out;
  color: var(--paper); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); font-size: 13px;
}
@keyframes dk-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #desk { animation: none; } }
#desk.hidden { display: none; }
#desk [hidden] { display: none !important; }
#desk .dz-card {
  background: rgba(40, 36, 60, 0.54); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 20px; overflow: hidden;
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  transition: background 0.2s;
}
#desk .dz-card:hover, #desk .dz-card:focus-within { background: rgba(40, 36, 60, 0.78); }
#desk button { font: inherit; color: inherit; text-shadow: inherit; cursor: pointer; }
#desk button:focus-visible, #desk input:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
#desk .dz-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: auto; scrollbar-width: thin; }
/* 위아래 꽉 차게: 다른 칸은 그대로 · 남는 높이는 할 일이 다 가짐 (넘치면 목록만 스크롤 · 적기 칸은 맨 아래) */
#desk .dz-body > * { flex: none; }
#desk .dz-body > .dz-todo { flex: 1 1 auto; min-height: 220px; display: flex; flex-direction: column; } /* 할 일이 책상 아래를 모두 차지 */
#desk .dz-todo > .dz-in { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#desk .dz-todo .dz-add { margin-top: auto; padding-top: 8px; }
#desk.min .dz-body { display: none; }
/* 접으면 머리 줄만큼만 (예전엔 투명한 빈 창이 화면 아래까지 남아서 그 자리 지도를 눌러도 아무 일 없었음) */
#desk.min { height: auto !important; }
#desk .dz-link { border: 0; background: none; padding: 0 2px; font-size: 12px; color: #8ff0d4; }
#desk .dz-link:hover { color: var(--dz-mint-t); text-decoration: underline; }
#desk .dz-lab { font-size: 12px; color: var(--dz-dim); white-space: nowrap; }
/* 칸 제목 막대 */
#desk .dz-bar {
  display: flex; align-items: center; gap: 9px; padding: 8px 16px; margin-bottom: 6px; font-size: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)); border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
#desk .dz-bar > b { font-weight: 800; color: var(--dz-hi); white-space: nowrap; }
#desk .dz-right { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; color: var(--dz-dim); }
#desk .dz-ic { width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 900; text-shadow: none; }
#desk .dz-ic.sun { background: rgba(255, 211, 78, 0.28); }
#desk .dz-ic.note { background: rgba(255, 179, 122, 0.28); }
#desk .dz-ic.leaf { background: var(--leaf); color: var(--ink); }
#desk .dz-in { padding: 4px 16px 13px; }
/* 머리줄 */
#desk .dz-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 16px; border-radius: 16px; flex: none; }
#desk .dz-head > b { font-size: 14px; font-weight: 400; color: var(--dz-hi); white-space: nowrap; }
#desk .dz-sp { flex: 1; }
#desk .dz-mstate { display: none; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--dz-mint-t); }
#desk.min .dz-mstate { display: inline; }
#desk .dz-hb { padding: 5px 11px; border-radius: 999px; font-size: 12px; background: rgba(255, 255, 255, 0.10); border: 0; color: #ddd6f0; white-space: nowrap; }
#desk .dz-hb:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
#desk .dz-hb.on { background: rgba(255, 107, 139, 0.32); color: #fff; }
/* 지금 하는 일 */
#desk .dz-live { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#desk .dz-live.run { color: #8ff0d4; font-weight: 700; }
#desk .dz-live.brk { color: #ffd0ad; font-weight: 700; }
#desk .dz-live.pause { color: #ffe9a8; }
#desk .dz-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dz-mint); box-shadow: 0 0 0 3px rgba(95, 224, 192, 0.25); flex: none; animation: dz-blink 1.6s ease-in-out infinite; }
@keyframes dz-blink { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { #desk .dz-dot { animation: none; } }
#desk .dz-taskrow { display: flex; align-items: stretch; gap: 6px; }
#desk .dz-taskbox { flex: 1; min-width: 0; display: flex; }
#desk .dz-task {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left; padding: 0 12px; min-height: 52px; border-radius: 14px;
  font-size: 16px; font-weight: 800; color: #fff; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.14);
}
#desk button.dz-task:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.35); }
#desk .dz-task span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#desk .dz-task i { font-style: normal; font-size: 14px; color: var(--dz-dim); }
#desk .dz-task.empty { font-weight: 400; font-size: 14px; color: var(--dz-faint); border-style: dashed; }
#desk .dz-task.on { display: block; line-height: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#desk .dz-taskbox.edit input { flex: 1; min-width: 0; font: inherit; font-size: 16px; font-weight: 800; padding: 0 12px; min-height: 52px; border-radius: 14px; border: 2px solid var(--dz-mint); background: rgba(10, 8, 20, 0.6); color: #fff; outline: none; }
#desk .dz-clock { flex: none; display: grid; place-items: center; min-width: 86px; padding: 0 9px; border-radius: 14px; background: rgba(0, 0, 0, 0.28); font-size: 23px; font-weight: 400; color: #fff; font-variant-numeric: tabular-nums; }
#desk.run .dz-clock { color: var(--dz-mint-t); }
#desk.brk .dz-clock { color: #ffd0ad; }
#desk .dz-go {
  flex: none; width: 48px; border-radius: 15px; border: 0; padding: 0; display: grid; place-items: center; font-size: 17px; text-shadow: none;
  background: var(--sun); color: var(--ink); box-shadow: 0 4px 12px rgba(255, 211, 78, 0.35);
}
#desk .dz-go:hover { filter: brightness(1.06); }
#desk .dz-go:active { transform: translateY(1px); }
#desk .dz-go.on { background: #ff8a9d; box-shadow: 0 4px 12px rgba(255, 107, 139, 0.35); }
#desk .dz-hp { display: flex; gap: 3px; margin-top: 10px; }
#desk .dz-hp i { flex: 1; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); transition: background 0.3s; }
#desk .dz-hp i.f { background: var(--dz-mint); }
#desk.brk .dz-hp i.f { background: #ffb37a; }
/* 뽀모도로: 이름은 위 · 버튼 다섯 개는 한 줄 가득 (좁은 창에서도 글자가 안 잘리게) */
#desk .dz-moderow { display: flex; flex-direction: column; align-items: stretch; gap: 5px; margin-top: 10px; }
#desk .dz-moderow .dz-lab { color: #ddd6f0; }
#desk .dz-seg { flex: 1; display: flex; background: rgba(0, 0, 0, 0.25); border-radius: 12px; padding: 3px; min-width: 0; }
#desk .dz-seg button { flex: 1; border: 0; background: none; font-size: 12px; padding: 6px 0; border-radius: 9px; color: var(--dz-dim); white-space: nowrap; min-width: 0; }
#desk .dz-seg button:hover { color: #fff; }
#desk .dz-seg button.on { background: rgba(255, 255, 255, 0.92); color: var(--ink); font-weight: 800; text-shadow: none; }
#desk .dz-custom { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--dz-dim); }
#desk .dz-custom input { width: 66px; font: inherit; font-size: 13px; font-weight: 800; text-align: center; padding: 5px 6px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.25); color: #fff; }
#desk .dz-custom input:focus { border-color: var(--dz-mint); outline: none; }
/* 할 일 */
#desk .dz-tbar { width: 54px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
#desk .dz-tbar i { display: block; height: 100%; width: 0; background: var(--leaf); transition: width 0.3s; }
#desk .dz-todos { flex: 0 1 auto; min-height: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; overflow: auto; scrollbar-width: thin; }
#desk .dz-todos li { flex: none; display: flex; align-items: center; gap: 12px; font-size: 15px; padding: 6px 10px; border-radius: 12px; min-height: 40px; }
#desk .dz-todos li:hover { background: rgba(255, 255, 255, 0.07); }
#desk .dz-todos li.cur { background: rgba(95, 224, 192, 0.14); }
#desk .dz-todos li.cur .dz-tt { font-weight: 800; color: #fff; }
#desk .dz-ck { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.42); background: none; padding: 0; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: var(--ink); text-shadow: none; }
#desk .dz-ck:hover { border-color: var(--leaf); background: rgba(74, 222, 128, 0.18); }
#desk .dz-todos li.done .dz-ck, #desk .dz-ck.on { background: var(--leaf); border-color: var(--leaf); }
#desk .dz-tt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#desk .dz-todos li.done .dz-tt { color: var(--dz-faint); text-decoration: line-through; }
/* ✅ 체크 손맛 (js/tick.js · desk.js checkTodo): 꾹 눌렸다가 통 · ✓ 그리기 · 취소선 쓱 · 줄이 잠깐 초록 · 숫자 톡 · 마지막 하나는 판이 반짝 */
#desk .dz-ck { transition: transform 0.1s ease-out; }
#desk .dz-ck:active { transform: scale(0.84); }
#desk .dz-ck svg { width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 0; }
#desk .dz-todos li.pop { animation: dz-row 0.5s ease-out; }
#desk .dz-todos li.pop .dz-ck { animation: dz-pop 0.32s ease-out; }
#desk .dz-todos li.pop .dz-ck svg { animation: dz-draw 0.15s 0.02s ease-out backwards; }
#desk .dz-todos li.pop .dz-tt { flex: 0 1 auto; text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 100% 1.5px; animation: dz-strike 0.2s 0.05s ease-out backwards, dz-fade 0.3s ease-out; }
#desk .dz-todos li.pop .dz-pin, #desk .dz-todos li.pop .dz-tag { display: none; }
#desk .dz-todos li.pop .dz-x { margin-left: auto; }
#desk .dz-meta.pop { display: inline-block; animation: dz-pop 0.32s ease-out; }
#desk .dz-card.dz-all { animation: dz-all 1.2s ease-out; }
@keyframes dz-pop { 0% { transform: scale(0.84); } 25% { transform: scale(1.2); } 62% { transform: scale(0.95); } 100% { transform: scale(1); } }
@keyframes dz-draw { from { stroke-dashoffset: 16; } }
@keyframes dz-strike { from { background-size: 0 1.5px; } }
@keyframes dz-fade { from { color: #fff; } }
@keyframes dz-row { from { background: rgba(74, 222, 128, 0.24); } to { background: transparent; } }
@keyframes dz-all { from { box-shadow: 0 0 0 2px rgba(95, 224, 192, 1), 0 0 40px rgba(95, 224, 192, 0.65); } to { box-shadow: 0 0 0 2px rgba(95, 224, 192, 0), 0 0 0 rgba(95, 224, 192, 0); } }
.tick-fx { position: fixed; z-index: 9000; width: 0; height: 0; pointer-events: none; }
.tick-fx b { position: absolute; left: 0; top: 0; }
.tick-ring { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--leaf); box-sizing: border-box; }
.tick-ring.big { border-color: #ffd34e; }
@media (prefers-reduced-motion: reduce) {
  #desk .dz-todos li.pop, #desk .dz-todos li.pop .dz-ck, #desk .dz-todos li.pop .dz-ck svg, #desk .dz-todos li.pop .dz-tt, #desk .dz-meta.pop, #desk .dz-card.dz-all, .pl-check.pop { animation: none; }
}
#desk .dz-tag { flex: none; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--dz-mint); color: var(--ink); text-shadow: none; }
#desk .dz-pin { flex: none; border: 0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; background: rgba(255, 255, 255, 0.10); color: #ddd6f0; opacity: 0.75; }
#desk .dz-todos li:hover .dz-pin, #desk .dz-pin:focus-visible { opacity: 1; }
/* 마우스가 있는 화면: '▶ 이거 하기' 는 그 줄에 올렸을 때만 → 할 일 이름이 넓게 (손가락 화면은 늘 보임) */
@media (hover: hover) { #desk:not(.phone) .dz-todos li:not(:hover):not(:focus-within) .dz-pin { display: none; } }
#desk .dz-pin:hover { background: rgba(255, 255, 255, 0.92); color: var(--ink); text-shadow: none; }
#desk .dz-x { flex: none; border: 0; background: none; padding: 0 2px; color: var(--dz-dim); font-size: 13px; opacity: 0; }
#desk .dz-todos li:hover .dz-x, #desk .dz-x:focus-visible { opacity: 1; }
#desk .dz-x:hover { color: var(--rose); }
#desk .dz-fold button { display: flex; align-items: center; gap: 11px; width: 100%; border: 0; background: none; padding: 0; font-size: 12.5px; color: var(--dz-faint); text-align: left; }
#desk .dz-fold button span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#desk .dz-fold .dz-ck { border: 0; background: rgba(74, 222, 128, 0.4); color: #d6ffe4; }
#desk .dz-fold i { font-style: normal; font-size: 11.5px; color: var(--dz-dim); }
#desk .dz-empty { font-size: 12.5px; color: var(--dz-dim); line-height: 1.5; padding: 2px 4px; }
#desk .dz-addb:hover { background: #fff; }
/* 메모: 다른 칸과 같은 반투명 카드 · 줄 친 공책처럼 옅은 줄만 */
#desk .dz-memo textarea {
  display: block; width: 100%; height: 66px; min-height: 44px; max-height: 260px; resize: none; border: 0; padding: 0 2px; background: transparent;
  font: inherit; font-size: 13.5px; line-height: 22px; color: #fff; outline: none; text-shadow: none;
  background-image: repeating-linear-gradient(transparent 0 21px, rgba(255, 255, 255, 0.12) 21px 22px); background-attachment: local;
}
#desk .dz-memo textarea::placeholder { color: var(--dz-dim); }
#desk .dz-memo:focus-within { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(95, 224, 192, 0.5); }
/* 빈 안내 한 줄: 할 일 줄(li · flex)처럼 칸을 나누지 않고 글 그대로 */
#desk .dz-todos li.dz-empty { display: block; min-height: 0; padding: 6px 10px; word-break: keep-all; }
#desk .dz-todos li.dz-empty:hover { background: none; }
#desk .dz-add { flex: none; display: flex; gap: 8px; }
#desk .dz-add input { flex: 1; min-width: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.07); border: 1px dashed rgba(255, 255, 255, 0.24); color: #fff; font: inherit; font-size: 13px; padding: 8px 13px; outline: none; }
#desk .dz-add input:focus { border-style: solid; border-color: var(--dz-mint); background: rgba(0, 0, 0, 0.25); }
#desk .dz-add input::placeholder { color: var(--dz-dim); }
#desk .dz-addb { flex: none; border: 0; border-radius: 12px; padding: 0 14px; font-size: 12.5px; font-weight: 800; background: rgba(255, 255, 255, 0.92); color: var(--ink); text-shadow: none; }
#desk .dz-addb:hover { background: #fff; }
/* 좁을 때 (1440 화면의 1/5 = 288px 쯤): 지금 하는 일은 한 줄 가득 · 시계와 ▶/■ 는 아랫줄 · 여백 조금 */
#desk.narrow .dz-bar { padding-left: 12px; padding-right: 12px; gap: 7px; }
#desk.narrow .dz-in { padding-left: 12px; padding-right: 12px; }
#desk.narrow .dz-head { padding-left: 12px; }
#desk.narrow .dz-taskrow { flex-wrap: wrap; row-gap: 6px; }
#desk.narrow .dz-taskbox { flex: 1 1 100%; }
#desk.narrow .dz-task, #desk.narrow .dz-task.on, #desk.narrow .dz-taskbox.edit input { min-height: 44px; }
#desk.narrow .dz-task.on { line-height: 44px; }
#desk.narrow .dz-clock { flex: 1; min-height: 46px; font-size: 28px; }
#desk.narrow .dz-go { width: 64px; }
#desk.narrow .dz-seg button { font-size: 11px; }
#desk.narrow .dz-tag { display: none; }
#desk.narrow .dz-hb { padding: 5px 9px; }
/* 오른쪽 아래 "누가 들어왔어요" 는 책상 왼쪽으로 비켜 줌 */
body.desk-open #joins { right: calc(var(--desk-w, 300px) + 24px); }
/* 넓은 화면에서 내 책상이 떠 있으면 위쪽 막대는 책상 왼쪽까지만 (한 줄 그대로 · 좁으면 구역 이름이 … 로 줄어듦 · 책상은 늘 오른쪽 위 끝에 그대로 · js/desk.js place) */
body.desk-open.desk-side #topbar { max-width: calc(100% - var(--desk-w, 300px) - 36px); }
/* 키가 낮은 화면: 조금 촘촘하게 */
@media (max-height: 820px) {
  #desk, #desk .dz-body { gap: 6px; }
  #desk .dz-head { padding: 5px 8px 5px 14px; }
  #topbar { padding: 5px 14px; }
  #desk .dz-bar { padding: 6px 14px; margin-bottom: 4px; }
  #desk .dz-in { padding: 2px 14px 10px; }
  #desk .dz-task, #desk .dz-task.on, #desk .dz-taskbox.edit input { min-height: 46px; line-height: 46px; }
  #desk .dz-task:not(.on) { line-height: normal; }
  #desk .dz-hp, #desk .dz-moderow { margin-top: 8px; }
  #desk .dz-todos li { min-height: 36px; padding: 4px 9px; }
  #desk .dz-memo textarea { height: 44px; }
  #desk .dz-body > .dz-todo { min-height: 180px; }
}
/* 휴대폰: 폭을 화면에 맞추고 위아래로 스크롤 */
#desk.phone { left: 8px; right: 8px; width: auto; }
#desk.phone .dz-add input, #desk.phone .dz-memo textarea, #desk.phone .dz-taskbox.edit input, #desk.phone .dz-custom input { font-size: 16px; }
#desk.phone .dz-x, #desk.phone .dz-pin { opacity: 1; }
#desk.phone .dz-body > .dz-todo { min-height: 240px; } /* 펼친 책상은 아래 메뉴 위까지 꽉 · 할 일이 남은 높이를 모두 */
#desk.phone .dz-hb { padding: 5px 8px; }
#desk.phone .dz-seg button { font-size: 11.5px; }
/* 칸마다 접기 (제목 막대 오른쪽 끝 ▾ · 아이콘 · 제목을 눌러도) · 높이 조정 (아래 끝 손잡이) · 책상 폭 조정 (왼쪽 끝 손잡이)
   js/desk.js cardify · 이 브라우저에 기억 (접힘 · 높이 · 폭) */
#desk .dz-body > .dz-card { position: relative; }
#desk .dz-cfold {
  flex: none; width: 24px; height: 22px; padding: 0; border: 0; border-radius: 7px; margin-right: -6px;
  background: rgba(255, 255, 255, 0.08); color: var(--dz-dim); font-size: 11px; line-height: 22px; text-align: center;
}
#desk .dz-cfold:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
#desk .dz-bar > .dz-tap { cursor: pointer; user-select: none; -webkit-user-select: none; }
/* 접힘: 제목 막대만 */
#desk .dz-card.folded > :not(.dz-bar) { display: none; }
#desk .dz-card.folded > .dz-bar { margin-bottom: 0; border-bottom: 0; }
#desk .dz-body > .dz-card.folded { flex: none; min-height: 0; }
/* 높이를 정한 칸: 그 높이 그대로 · 넘치는 내용은 칸 안에서 스크롤 */
#desk .dz-card.sized { display: flex; flex-direction: column; }
#desk .dz-body > .dz-card.sized { flex: none; min-height: 0; }
#desk .dz-card.sized > .dz-bar { flex: none; }
#desk .dz-card.sized > .dz-in { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; }
#desk .dz-memo.sized > .dz-in { display: flex; flex-direction: column; overflow: hidden; }
#desk .dz-memo.sized textarea { flex: 1 1 auto; height: auto; min-height: 0; max-height: none; }
/* 접은 '지금 하는 일': 상태 글 대신 시계 · ▶/■ */
#desk .dz-fnow { display: none; align-items: center; gap: 7px; }
#desk .dz-now.folded .dz-fnow { display: inline-flex; }
#desk .dz-now.folded .dz-live { display: none; }
#desk .dz-fnow b { font-size: 15px; font-weight: 400; color: var(--dz-hi); font-variant-numeric: tabular-nums; }
#desk.run .dz-fnow b { color: var(--dz-mint-t); }
#desk.brk .dz-fnow b { color: #ffd0ad; }
#desk .dz-fgo { border: 0; border-radius: 8px; min-width: 30px; padding: 2px 8px; font-size: 12px; font-weight: 800; background: var(--dz-mint); color: #10302a; text-shadow: none; }
#desk .dz-fgo.on { background: #ff8a9d; color: #fff; }
/* 높이 손잡이: 칸 아래 끝 (올리면 막대가 보임) */
#desk .dz-grip { position: absolute; left: 16px; right: 16px; bottom: 0; height: 10px; cursor: ns-resize; touch-action: none; z-index: 1; }
#desk .dz-grip::after {
  content: ''; position: absolute; left: 50%; bottom: 3px; width: 40px; height: 4px; margin-left: -20px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.32); opacity: 0; transition: opacity 0.15s;
}
#desk .dz-card:hover > .dz-grip::after, #desk .dz-grip.drag::after { opacity: 1; }
#desk .dz-card.folded > .dz-grip { display: none; }
/* 폭 손잡이: 책상 왼쪽 끝 (넓은 화면만) · 막대는 지도 위에 떠서 밝은 바닥에서도 보이게 테두리 */
#desk .dz-wgrip { position: absolute; left: -8px; top: 16px; bottom: 16px; width: 12px; cursor: ew-resize; touch-action: none; }
#desk .dz-wgrip::after {
  content: ''; position: absolute; top: 50%; left: 3px; width: 5px; height: 48px; margin-top: -24px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1px rgba(40, 32, 64, 0.6), 0 1px 4px rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.15s;
}
#desk:hover > .dz-wgrip::after, #desk .dz-wgrip.drag::after { opacity: 1; }
#desk.phone .dz-wgrip, #desk.min .dz-wgrip { display: none; }
/* 📱 휴대폰: 손가락으로 잡기 쉽게 손잡이를 조금 크게 · 막대는 늘 조금 보이게 */
#desk.phone .dz-grip { height: 16px; }
#desk.phone .dz-grip::after { opacity: 0.6; }
/* 끄는 동안: 글자가 잡히지 않게 · 손잡이 모양 그대로 */
body.dz-drag, body.dz-drag * { user-select: none !important; -webkit-user-select: none !important; }
body.dz-drag-y, body.dz-drag-y * { cursor: ns-resize !important; }
body.dz-drag-x, body.dz-drag-x * { cursor: ew-resize !important; }

/* ── 👤 프로필: 상태 메시지 · 작품 · 링크 · 로그인 · 고치기 (js/profile.js · ui.js openProfile) ── */
.pf-badge { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; vertical-align: 3px; border-radius: 50%; background: var(--sky); color: var(--ink); font-size: 11px; font-weight: 900; }
.btn.pf-google { background: #fff; color: #1f1f1f; border-color: #fff; font-weight: 800; }
.btn.pf-google:hover { background: #f1f1f1; }
/* 👀 손님 표시 (아직 Google 로그인 안 함): 프로필 이름 옆 · 쪽지 · 친구 신청 이름 옆 */
.pf-guest, .mt-guest { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--ink-4); background: rgba(255, 255, 255, 0.06); color: var(--muted); font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 0; vertical-align: 3px; }
.mt-guest { margin-left: 0; vertical-align: 0; flex: none; }
/* 💾 손님에게: "이 브라우저에만 저장돼요 · Google 로 지키기" 한 줄 (내 기록 위 · js/main.js saveLine) */
.save-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--ink-4); font-size: 12.5px; line-height: 1.5; color: var(--paper); }
.save-line span { flex: 1 1 220px; word-break: keep-all; }
.pl-top .save-line { margin: 0; }
/* 💾 손님에게 로그인 권하기 (막지 않음 · 기록이 처음 쌓였을 때 · 다시 왔을 때) — 위쪽 가운데 · 30초 뒤 저절로 닫힘 */
#save-nudge {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 7; width: min(420px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px;
  background: rgba(27, 24, 40, 0.96); border: 2px solid #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  font-size: 13px; pointer-events: auto; animation: sc-in 0.25s ease-out;
}
#save-nudge b { font-size: 14.5px; }
#save-nudge p { margin: 0; line-height: 1.55; color: var(--muted); word-break: keep-all; }
#save-nudge .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
#session-call:not(.hidden) ~ #save-nudge { top: 130px; }
body.chat-typing #save-nudge { visibility: hidden; }
@media (max-width: 720px), (pointer: coarse) and (max-width: 900px) and (orientation: portrait) { #save-nudge { top: 58px; } #session-call:not(.hidden) ~ #save-nudge { top: 124px; } }
/* 🔒 회의실 · 폰부스 안에서 한 말 */
.chat-room { margin-right: 4px; padding: 0 5px; border-radius: 6px; background: rgba(95, 224, 192, 0.16); color: #9ff0da; font-size: 11px; }
#chat.in-room .chat-form input { border-color: #5fe0c0; }
.pf-edit { display: flex; flex-direction: column; gap: 12px; }
.pf-edit h2 { margin: 0 0 4px; font-size: 18px; }
.pf-field { display: flex; flex-direction: column; gap: 5px; }
.pf-label { font-size: 12px; color: var(--muted); font-weight: 700; }
.pf-field small { font-size: 11px; color: var(--muted); }
.pf-edit input { width: 100%; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--ink-4); background: var(--ink); color: var(--paper); font: inherit; font-size: 14px; }
.pf-edit input:focus-visible { outline: 2px solid var(--sun); outline-offset: 1px; }
.pf-wrows { display: flex; flex-direction: column; gap: 6px; }
.pf-wrow { display: grid; grid-template-columns: 1fr 1.5fr 30px; gap: 6px; }
.pf-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; border-radius: 6px; }
.pf-x:hover { color: var(--rose); background: var(--ink-3); }
.pf-edit .row { justify-content: flex-end; }
@media (max-width: 480px) { .pf-wrow { grid-template-columns: 1fr 30px; } .pf-wrow input:nth-child(2) { grid-column: 1; } .pf-wrow .pf-x { grid-row: 1 / span 2; grid-column: 2; } }

/* ── 📅 내 기록 (js/planner.js): 화면 가득 유리 창 — 위 숫자 · 왼쪽 달력 + 이 주 요약 · 가운데 주간 캘린더 · 오른쪽 그날 (📋 현황판과 같은 틀) ── */
#modal:has(.pl) { padding: 18px; }
#modal-card.wide:has(.pl) { width: 100%; height: 100%; max-height: none; padding: 18px 22px 20px; border-radius: 28px; overflow: auto; }
#modal-card:has(.pl) > .modal-x { top: 18px; right: 20px; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; font-size: 15px; }
.pl { display: flex; flex-direction: column; gap: 14px; color: var(--g-hi); }
.pl-top { display: flex; flex-direction: column; gap: 14px; }
.pl-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 40px; padding-right: 54px; }
.pl-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: 16px; background: rgba(95, 224, 192, 0.18); }
.pl h2 { margin: 0; font-family: var(--pixel); font-weight: 400; font-size: 22px; color: #fff; }
.pl-livepill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; background: rgba(95, 224, 192, 0.16); color: var(--g-mint-t); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-livepill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--g-mint); box-shadow: 0 0 0 4px rgba(95, 224, 192, 0.25); }
/* 위 숫자 6칸: 오늘은 민트 · 연속은 노랑 */
.pl-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.pl-stats > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 13px 18px; border-radius: 20px; background: var(--g-soft); border: 1px solid var(--g-line2); }
.pl-stats b { font-family: var(--pixel); font-weight: 400; font-size: 22px; line-height: 1.3; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-stats small { font-size: 12.5px; color: var(--g-dim); }
.pl-stats > div:first-child { background: rgba(95, 224, 192, 0.14); border-color: rgba(95, 224, 192, 0.5); }
.pl-stats > div:first-child b { color: var(--g-mint-t); }
.pl-stats > div:last-child b { color: var(--sun); }

/* 아래: 왼쪽 달력 + 이 주 요약 · 가운데 주간 캘린더 · 오른쪽 그날 — 창 전체가 한 번에 스크롤 */
.pl-body { display: grid; grid-template-columns: 272px minmax(0, 1fr) minmax(320px, 360px); gap: 14px; align-items: start; }
.pl-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pl-card { min-width: 0; padding: 16px 18px; border-radius: 20px; background: var(--g-soft); border: 1px solid var(--g-line2); }
.pl-delta { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: rgba(95, 224, 192, 0.16); color: #8ff0d4; font-size: 12.5px; font-weight: 700; }
.pl-delta.down { background: rgba(255, 255, 255, 0.10); color: #ddd6f0; }
.pl-empty-card { margin: 0; font-size: 13px; line-height: 1.6; color: #9b94b5; }
/* 과목별 비율 띠 (칸 너비 = 그 과목 시간) */
.pl-sbar { display: flex; gap: 2px; height: 10px; border-radius: 999px; overflow: hidden; }
.pl-sbar i { display: block; flex: 1 1 0; min-width: 3px; }

/* 왼쪽 달력: 월요일부터 한 줄 = 한 주 · 고른 주는 민트 테 · 칸은 그날 집중한 시간 (초록이 진할수록 많이) */
.pl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pl-month { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; text-align: center; white-space: nowrap; }
.pl-nav { width: 36px; height: 36px; flex: none; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.10); color: var(--g-hi); font-size: 18px; line-height: 1; cursor: pointer; }
.pl-nav:hover { background: rgba(255, 255, 255, 0.18); }
.btn.small.pl-today { height: 36px; padding: 0 12px; }
.pl-wd { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; padding: 0 5px; }
.pl-wd span { padding-bottom: 4px; text-align: center; font-size: 11px; font-weight: 700; color: var(--g-dim); }
.pl-wd .sun { color: #ff9aa8; } .pl-wd .sat { color: #9cc9ff; }
.pl-weeks { display: flex; flex-direction: column; gap: 4px; }
.pl-wrow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; padding: 3px 4px; border: 1px solid transparent; border-radius: 11px; background: none; color: inherit; font: inherit; cursor: pointer; }
.pl-wrow:hover { background: rgba(255, 255, 255, 0.06); }
.pl-wrow.on { background: rgba(95, 224, 192, 0.14); border-color: rgba(95, 224, 192, 0.6); }
.pl-wc { height: 26px; display: grid; place-items: center; border-radius: 7px; background: rgba(255, 255, 255, 0.05); color: var(--g-hi); font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pl-wc.sun { color: #ff9aa8; } .pl-wc.sat { color: #9cc9ff; }
.pl-wc.lv1 { background: rgba(74, 222, 128, 0.16); } .pl-wc.lv2 { background: rgba(74, 222, 128, 0.32); }
.pl-wc.lv3 { background: rgba(74, 222, 128, 0.62); color: #1b1828; } .pl-wc.lv4 { background: rgba(74, 222, 128, 0.82); color: #1b1828; }
.pl-wc.later, .pl-wc.out { background: transparent; color: #8d86a8; }
.pl-wc.today { box-shadow: inset 0 0 0 2px var(--g-mint); }
.pl-wc.sel { box-shadow: 0 0 0 2px #fff; }
.pl-wc.today.sel { box-shadow: inset 0 0 0 2px var(--g-mint), 0 0 0 2px #fff; }
.pl-calnote { margin: 8px 0 0; text-align: center; font-size: 11.5px; color: #9b94b5; }
.pl-wrow:focus-visible, .pl-nav:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }

/* 왼쪽 아래: 이 주 요약 — 집중 · 지난주와 비교 · 집중한 날 · 하루 평균 · 골든 타임 · 과목별 */
.pl-wsum { display: flex; flex-direction: column; gap: 10px; }
.pl-wsum > * { flex-shrink: 0; } /* 칸이 낮아도 띠 · 숫자가 눌리지 않고 안에서 스크롤 */
.pl-wsum-k { font-size: 12.5px; color: var(--g-dim); }
.pl-wsum-total { margin-top: -6px; font-family: var(--pixel); font-weight: 400; font-size: 24px; line-height: 1.25; color: #fff; }
.pl-wsum-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pl-wsum-nums > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.pl-wsum-nums small { font-size: 11.5px; color: var(--g-dim); }
.pl-wsum-nums b { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pl-wsum-nums .gold { grid-column: 1 / -1; background: rgba(255, 211, 78, 0.12); }
.pl-wsum-nums .gold small, .pl-wsum-nums .gold b { color: var(--sun); }
.pl-wsubj { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pl-wsubj li { display: flex; align-items: center; min-width: 0; font-size: 13px; }
.pl-wsubj li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-wsubj li b { font-size: 12.5px; font-weight: 700; color: var(--g-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 가운데: 주간 캘린더 — 요일 머리 · 시간 칸 (가로줄 = 1시간 · 블록 = 켜고 끈 기록 · 노란 띠 = 골든 타임 · 빨간 선 = 지금) */
.pl-week { display: flex; flex-direction: column; min-width: 0; }
.pl-wk-days, .pl-wk-grid { display: grid; grid-template-columns: 38px repeat(7, minmax(0, 1fr)); }
.pl-wk-days { margin-bottom: 6px; }
.pl-wk-day { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 40px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--g-hi); font: inherit; cursor: pointer; }
.pl-wk-day:hover { background: rgba(255, 255, 255, 0.06); }
.pl-wk-day small { font-size: 12px; font-weight: 700; color: var(--g-dim); }
.pl-wk-day.sun small { color: #ff9aa8; } .pl-wk-day.sat small { color: #9cc9ff; }
.pl-wk-day b { min-width: 28px; height: 28px; padding: 0 4px; box-sizing: border-box; display: grid; place-items: center; border-radius: 9px; font-size: 14px; font-weight: 800; }
.pl-wk-day.today small { color: var(--g-mint); }
.pl-wk-day.today b { color: var(--g-mint-t); box-shadow: inset 0 0 0 2px var(--g-mint); }
.pl-wk-day.sel b { box-shadow: 0 0 0 2px #fff; }
.pl-wk-day.today.sel b { box-shadow: inset 0 0 0 2px var(--g-mint), 0 0 0 2px #fff; }
.pl-wk-day:focus-visible, .pl-blk:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.pl-wk-body { position: relative; height: 560px; padding-top: 8px; box-sizing: border-box; }
.pl-wk-grid { position: relative; height: 100%; }
.pl-wk-axis { position: relative; }
.pl-wk-axis span { position: absolute; right: 7px; transform: translateY(-50%); font-size: 10.5px; color: #9b94b5; white-space: nowrap; }
.pl-wk-col { position: relative; min-width: 0; border-left: 1px solid rgba(255, 255, 255, 0.06); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 100% calc(100% / var(--rows, 16)); }
.pl-wk-col.sel { background-color: rgba(255, 255, 255, 0.05); }
.pl-gold { position: absolute; left: 38px; right: 0; box-sizing: border-box; background: rgba(255, 211, 78, 0.09); border-top: 1px dashed rgba(255, 211, 78, 0.4); border-bottom: 1px dashed rgba(255, 211, 78, 0.4); pointer-events: none; }
.pl-blk { position: absolute; left: 2px; right: 2px; box-sizing: border-box; display: flex; flex-direction: column; gap: 1px; min-height: 3px; padding: 3px 6px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 7px; color: #1b1828; font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 12px rgba(0, 0, 0, 0.25); }
.pl-blk b { font-size: 12px; font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-blk small { font-size: 11px; line-height: 1.3; opacity: 0.85; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.pl-blk:hover { z-index: 1; filter: brightness(1.08); }
/* 짧은 블록: 시각 → 과목 이름 순서로 숨김 (블록 높이를 보고 · 글자가 반만 보이지 않게) */
.pl-blk { container-type: size; }
@container (max-height: 33px) { .pl-blk small { display: none; } }
@container (max-height: 15px) { .pl-blk b { display: none; } }
.pl-blk.pl-on { background: rgba(95, 224, 192, 0.14); border: 1.5px dashed var(--g-mint); color: var(--g-mint); box-shadow: none; }
.pl-now { position: absolute; left: 0; right: 0; z-index: 2; height: 2px; margin-top: -1px; background: #ff6b8b; box-shadow: 0 0 8px rgba(255, 107, 139, 0.8); pointer-events: none; }
.pl-now::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #ff6b8b; }
.pl-wk-empty { position: absolute; left: 38px; right: 0; top: 0; bottom: 0; margin: 0; padding: 0 20px; display: grid; place-items: center; text-align: center; font-size: 13px; line-height: 1.6; color: #9b94b5; pointer-events: none; }
.pl-wk-wait { padding: 24px 0; text-align: center; }

/* 그날: 숫자 3칸 → 집중 시간표 → 할 일 → 접어 둔 과목별 합계 · 켜고 끈 기록 */
.pl-day { display: flex; flex-direction: column; gap: 12px; }
.pl-dayhd { display: flex; flex-direction: column; gap: 12px; }
/* 폰 · 좁은 창: 집중 시간표가 할 일보다 위 (예전 순서) · 컴퓨터(화면에 딱 맞춤)는 아래 미디어 쿼리에서 할 일이 먼저 */
.pl-day > .pl-h-bar, .pl-day > .pl-bar { order: 1; }
.pl-day > .pl-h-todo, .pl-day > .pl-todos, .pl-day > .pl-add { order: 2; }
.pl-day > .pl-more { order: 3; }
.pl-day h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; }
.pl-tag { padding: 3px 9px; border-radius: 999px; background: var(--g-mint); color: #1b1828; font-size: 12px; font-weight: 800; }
.pl-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pl-sum > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 9px 11px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.pl-sum small { font-size: 11.5px; color: var(--g-dim); }
.pl-sum b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-day h4 { margin: 4px 0 -4px; display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 800; }
.pl-h4sub { font-weight: 400; font-size: 12px; color: #9b94b5; }
.pl-bar { position: relative; height: 28px; margin-bottom: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); }
.pl-bar b { position: absolute; top: 5px; bottom: 5px; min-width: 4px; border-radius: 4px; background: var(--g-mint); }
.pl-bar b.pl-on { box-shadow: 0 0 0 3px rgba(95, 224, 192, 0.3); }
.pl-bar .tick { position: absolute; top: 0; bottom: -16px; width: 1px; background: rgba(255, 255, 255, 0.10); font-style: normal; }
.pl-bar .tick span { position: absolute; bottom: 0; left: 3px; font-size: 10.5px; color: #9b94b5; white-space: nowrap; }
.pl-todos, .pl-sess { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pl-todos li { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 4px 6px 4px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.pl-check { flex: none; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); background: none; color: #1b1828; font-weight: 900; line-height: 1; cursor: pointer; }
.pl-todos li.done .pl-check { background: var(--g-mint); border-color: var(--g-mint); }
.pl-text { flex: 1; min-width: 0; font-size: 14px; word-break: break-word; }
.pl-todos li.done .pl-text { color: #9b94b5; text-decoration: line-through; }
.pl-text small { display: inline-block; margin-left: 6px; font-size: 12px; color: #8ff0d4; text-decoration: none; }
.pl-mini { flex: none; height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #ddd6f0; font: inherit; font-size: 12px; cursor: pointer; }
.pl-mini:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.pl-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 9px; background: none; color: #9b94b5; font-size: 14px; cursor: pointer; }
.pl-x:hover { color: var(--rose); background: rgba(255, 111, 145, 0.12); }
.pl-empty { background: none !important; color: #9b94b5; font-size: 13px; padding: 6px 2px !important; min-height: 0 !important; }
.pl-add { display: flex; gap: 8px; }
.pl-add input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; color: var(--g-hi); font: inherit; font-size: 14px; }
.pl-add input:focus { outline: none; }
.pl-add .btn.primary { background: rgba(255, 255, 255, 0.92); color: #1b1828; box-shadow: none; }
.pl-more { border-top: 1px solid var(--g-line2); padding-top: 4px; }
.pl-more > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 700; color: #ddd6f0; }
.pl-more > summary::-webkit-details-marker { display: none; }
.pl-more > summary::after { content: '\25BE'; margin-left: auto; color: #9b94b5; transition: transform 0.15s; }
.pl-more[open] > summary::after { transform: rotate(180deg); }
.pl-more > summary:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; border-radius: 8px; }
.pl-more-body { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.pl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: 0; flex: none; }
/* 과목별 (인사이트 · 그날 같은 모양): 이름 · 막대 · 시간 · 비율 */
.pl-subj { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pl-subj li { display: grid; grid-template-columns: minmax(0, 8em) minmax(0, 1fr) auto 2.8em; align-items: center; gap: 10px; font-size: 13.5px; }
.pl-sname { display: flex; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-strack { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.10); overflow: hidden; }
.pl-strack i { display: block; height: 100%; border-radius: 999px; transition: width 0.6s ease; }
.pl-subj b { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.pl-subj small { font-size: 12px; color: #9b94b5; text-align: right; font-variant-numeric: tabular-nums; }
.pl-subj li.pl-on .pl-sname { color: var(--g-mint); }
.pl-subj li.pl-on .pl-strack i { animation: pl-blink 1.4s ease-in-out infinite; }
/* 켜고 끈 기록 */
.pl-sess { max-height: 280px; overflow: auto; gap: 0; }
.pl-sess li { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 13.5px; }
.pl-time { flex: none; font-variant-numeric: tabular-nums; color: var(--g-mint); font-weight: 700; white-space: nowrap; }
.pl-subjname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-sess small { color: #b9b1d0; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-sess li.pl-on, .pl-sess li.pl-on small { color: var(--g-mint); font-weight: 800; }
.pl-acts { display: inline-flex; gap: 2px; flex: none; width: 64px; justify-content: flex-end; }
.pl-icon { width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; cursor: pointer; font-size: 14px; opacity: 0.55; }
.pl-sess li:hover .pl-icon, .pl-icon:focus-visible { opacity: 1; }
.pl-icon:hover { background: rgba(255, 255, 255, 0.10); }
.pl-icon.danger:hover { background: rgba(255, 111, 145, 0.18); }
@media (hover: none) { .pl-icon { opacity: 0.8; } }
.pl-sess li.pl-editing { display: block; border-bottom: 0; padding: 0; }
.pl-edit { padding: 12px; display: flex; flex-direction: column; gap: 10px; border-radius: 16px; background: var(--g-soft); border: 1px solid var(--g-mint); }
.pl-edit-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-edit-row.end { justify-content: flex-end; }
.pl-edit input { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--ink-4); background: var(--ink-2); color: var(--paper); font: inherit; font-size: 14px; color-scheme: dark; }
.pl-edit input[type=text] { flex: 1; min-width: 8em; }
.pl-err, .pl-sess .pl-err { color: var(--rose); margin: 0 auto 0 0; font-size: 13px; font-weight: 700; }
/* 정말 지울까요? */
.pl-confirm { position: fixed; inset: 0; z-index: 1000; background: rgba(8, 6, 16, 0.62); display: grid; place-items: center; padding: 16px; }
.pl-confirm-box { width: min(420px, 100%); background: var(--ink-2); border: 3px solid var(--ink); box-shadow: 0 0 0 3px var(--ink-3), 8px 8px 0 3px rgba(0, 0, 0, 0.35); border-radius: var(--radius); padding: 24px; text-align: center; }
.pl-confirm-icon { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: rgba(255, 111, 145, 0.16); }
.pl-confirm-box h3 { margin: 0 0 10px; font-size: 20px; }
.pl-confirm-box p { margin: 6px 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.pl-confirm-box p b { color: var(--paper); }
.pl-confirm-box p strong { color: var(--rose); }
.pl-confirm-row { display: flex; gap: 8px; margin-top: 18px; }
.pl-confirm-row .btn { flex: 1; padding: 11px; font-size: 15px; }
.btn.pl-danger { background: var(--rose); border-color: var(--rose); color: #fff; }
.btn.pl-danger:hover { filter: brightness(1.08); }
.pl-live { font-style: normal; font-size: 12px; margin-left: 8px; animation: pl-blink 1.4s ease-in-out infinite; }
.pl-bar b.pl-on { animation: pl-blink 1.4s ease-in-out infinite; }
@keyframes pl-blink { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .pl-live, .pl-bar b.pl-on, .pl-subj li.pl-on .pl-strack i { animation: none; } .pl-strack i { transition: none; } }

/* 컴퓨터: 창이 화면에 딱 맞음 (📋 현황판처럼) — 주간 캘린더 시간 칸은 화면 높이에 맞춰 늘고 줄고 · 이 주 요약 · 그날 칸만 안에서 스크롤
   화면이 아주 낮으면 (.pl 이 620px 보다 작아지면) 창 전체가 스크롤 */
@media (min-width: 1041px) {
  #modal-card.wide:has(.pl) { display: flex; flex-direction: column; padding: 16px 22px 18px; }
  .pl { flex: 1; min-height: 620px; gap: 12px; }
  .pl-top { flex: none; gap: 12px; }
  .pl-stats > div { padding: 10px 16px; gap: 4px; border-radius: 18px; }
  .pl-stats b { line-height: 1.2; }
  .pl-body { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 12px; }
  .pl-rail { min-height: 0; gap: 12px; }
  .pl-cal { flex: none; padding: 13px 14px 12px; }
  .pl-wsum { flex: 1; min-height: 0; overflow-y: auto; padding: 13px 16px; }
  .pl-week { min-height: 0; padding: 13px 16px 12px; }
  .pl-wk-body { flex: 1; min-height: 0; height: auto; }
  .pl-day { min-height: 0; overflow-y: auto; padding: 14px 16px; gap: 10px; }
  .pl-day > * { flex-shrink: 0; }
  .pl-day > .pl-h-bar, .pl-day > .pl-bar, .pl-day > .pl-h-todo, .pl-day > .pl-todos, .pl-day > .pl-add, .pl-day > .pl-more { order: 0; }
  /* 그날 머리: 날짜 옆에 숫자 3개를 작은 알약으로 (할 일이 더 위로) */
  .pl-dayhd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
  .pl-sum { display: flex; flex-wrap: wrap; gap: 6px; }
  .pl-sum > div { flex-direction: row; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 999px; }
  .pl-sum b { font-size: 13.5px; }
  .pl-todos { gap: 5px; }
  .pl-todos li { min-height: 38px; padding: 2px 6px 2px 10px; }
  .pl-add input, .pl-add .btn { height: 38px; }
  .pl-add .btn { padding-top: 0; padding-bottom: 0; }
  .pl-head { margin-bottom: 8px; }
  .pl-nav, .btn.small.pl-today { height: 32px; }
  .pl-nav { width: 32px; }
  .pl-stats small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* 컴퓨터인데 좀 좁으면: 숫자 6칸은 그대로 두고 글자만 조금 작게 · 왼쪽 · 오른쪽 칸을 좁혀 주간 캘린더 자리를 늘림 */
@media (min-width: 1041px) and (max-width: 1279px) {
  .pl-body { grid-template-columns: 244px minmax(0, 1fr) 300px; }
  .pl-wc { height: 24px; font-size: 11px; }
  .pl-wk-day { flex-direction: column; gap: 0; }
  .pl-wk-day small { font-size: 11px; }
  .pl-wk-day b { min-width: 24px; height: 22px; font-size: 13px; }
}
@media (min-width: 1041px) and (max-width: 1240px) {
  .pl-stats { gap: 10px; }
  .pl-stats > div { padding: 9px 12px; }
  .pl-stats b { font-size: 20px; }
}
/* 컴퓨터인데 화면이 낮으면: 달력 칸 · 요약을 더 낮게 */
@media (min-width: 1041px) and (max-height: 820px) {
  .pl-wc { height: 22px; }
  .pl-weeks { gap: 2px; }
  .pl-calnote { display: none; }
  .pl-wsum { gap: 8px; }
  .pl-wsum-total { font-size: 21px; }
  .pl-stats > div { padding-top: 8px; padding-bottom: 8px; }
}
/* 좀 좁은 컴퓨터 화면 (창 전체 스크롤): 위 숫자 3칸씩 · 왼쪽 달력 + 주간 캘린더 · 그 아래 그날 */
@media (max-width: 1040px) and (min-width: 901px) {
  .pl-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-body { grid-template-columns: 260px minmax(0, 1fr); }
  .pl-day { grid-column: 1 / -1; }
  .pl-wk-body { height: 520px; }
}
/* 폰 · 좁은 창: 화면 가득 · 한 줄로 쌓고 통째로 스크롤 (달력 → 이 주 요약 → 주간 캘린더 → 그날) */
@media (max-width: 900px) {
  #modal:has(.pl) { padding: 0; }
  #modal-card.wide:has(.pl) { border-radius: 0; padding: 14px 12px 18px; }
  #modal-card:has(.pl) > .modal-x { top: 12px; right: 12px; }
  .pl, .pl-top { gap: 12px; }
  .pl-rail { display: contents; }
  .pl-cal { order: 1; } .pl-week { order: 2; } .pl-wsum { order: 3; } .pl-day { order: 4; }
  .pl-title { padding-right: 50px; }
  .pl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pl-stats > div { padding: 11px 14px; border-radius: 18px; gap: 4px; }
  .pl-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pl-card { padding: 14px 16px; border-radius: 18px; }
  .pl-wc { height: 32px; font-size: 12px; }
  .pl-week { padding: 14px 10px 12px; }
  .pl-wk-days, .pl-wk-grid { grid-template-columns: 30px repeat(7, minmax(0, 1fr)); }
  .pl-gold, .pl-wk-empty { left: 30px; }
  .pl-wk-day { flex-direction: column; gap: 0; height: 46px; }
  .pl-wk-day small { font-size: 11px; }
  .pl-wk-day b { min-width: 24px; height: 24px; font-size: 13px; }
  .pl-wk-axis span { right: 4px; font-size: 10px; }
  .pl-wk-body { height: 520px; }
  .pl-blk { left: 1px; right: 1px; padding: 2px 3px; border-radius: 5px; }
  .pl-blk b { font-size: 11px; }
  .pl-blk small { display: none; }
  .pl-nav, .btn.small.pl-today { height: 44px; }
  .pl-nav { width: 44px; }
  .pl-sess li { gap: 8px; flex-wrap: wrap; }
  .pl-acts { width: auto; }
  .pl-icon { opacity: 0.8; }
}
@media (max-width: 480px) {
  .pl-subj li { grid-template-columns: minmax(0, 7em) minmax(0, 1fr) auto; }
  .pl-subj small { display: none; }
}
/* 로그아웃 (설정 · 프로필은 아래쪽 글자 단추 .pf-out) */
.btn.logout-btn { color: var(--rose); border-color: var(--ink-4); }
.btn.logout-btn:hover { background: var(--rose); color: var(--ink); border-color: var(--rose); }
/* 🗑 계정 지우기: 설정 맨 아래 작은 글자 단추 · 확인 창 (main.js askDeleteAccount) */
.acct-delete { display: block; margin: 12px 0 0; padding: 4px 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.acct-delete:hover { color: var(--rose); }
.acct-del { display: flex; flex-direction: column; gap: 10px; }
.acct-del h2 { margin: 0; font-size: 18px; }
.acct-del p { margin: 0; line-height: 1.6; }
.acct-del small { color: var(--muted); }
.acct-del label.check { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.acct-del label.check input { width: 18px; height: 18px; flex: none; }
.acct-del .row { justify-content: flex-end; gap: 8px; margin-top: 4px; }
.acct-del .row .btn { min-width: 120px; }
.acct-del .btn.danger:disabled { opacity: 0.45; cursor: not-allowed; }
.pf-login small a { color: var(--sun); }
.legal-links { margin-top: 14px; font-size: 12px; color: var(--muted); }
.legal-links a { color: var(--muted); text-underline-offset: 3px; }
.legal-links a:hover { color: var(--paper); }
/* Google 로그인만 받을 때 첫 화면 버튼 */
.enter-btn.google { background: #fff; color: #1f1f1f; border-color: #fff; box-shadow: 0 4px 0 #c9c9c9, 0 4px 0 3px var(--ink); }
/* 손님(로그인 안 함): 첫 화면 둘러보기 버튼 · 로그인 안내 · 책상은 안내 한 장만 */
/* 첫 화면 버튼 둘: Google 로 들어가기 (모든 기능) · 게스트로 들어가기 (둘러보기 · 채팅만) — 넓으면 나란히, 좁으면 위아래 */
.enter-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 10px auto; }
.enter-row .btn.big.enter-btn, .enter-row .btn.big.login-btn { margin: 0; min-width: 220px; width: auto; padding: 14px 22px; }
/* 첫 화면의 작은 쪽 버튼: Google 로 로그인 (다른 기기에서 쓰던 계정) */
.btn.big.login-btn { background: rgba(27, 24, 40, 0.72); color: var(--paper); border-color: var(--ink); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45), 0 4px 0 3px var(--ink); backdrop-filter: blur(4px); }
.btn.big.login-btn:hover { background: rgba(38, 33, 57, 0.86); }
.login-btn[hidden] { display: none !important; }
#auth-hint { word-break: keep-all; }
@media (max-width: 520px) { .enter-row { flex-direction: column; align-items: stretch; width: min(320px, 100%); } .enter-row .btn.big { min-width: 0; } }
.login-ask { display: flex; flex-direction: column; gap: 10px; }
.login-ask h2 { margin: 0; font-size: 18px; }
.login-ask p { margin: 0; line-height: 1.6; }
.login-ask small { color: var(--muted); }
.login-ask .row { justify-content: flex-end; margin-top: 6px; }

/* ══ 🪟 유리 테마: 🖥 내 책상의 모양을 모든 창 · 막대 · 버튼에 ══════════════════════════════
   둥근 반투명 카드(뒤 게임 화면이 흐리게 비침) · 얇은 밝은 테두리 · 부드러운 그림자 · 제목 막대(아래 옅은 줄)
   · 보조 단추는 흰 알약 · 탭은 흰색으로 고르는 칸 · 강조는 민트 (노란색은 그 창의 주된 단추에만)
   이 아래 규칙이 위의 예전 모양을 덮어써요 (같은 선택자면 뒤에 쓴 것이 이김) */
:root {
  --g-bg: rgba(40, 36, 60, 0.54);        /* 작은 막대 · 알약: 뒤가 많이 비침 */
  --g-panel: rgba(34, 30, 52, 0.8);      /* 채팅 · 판: 글이 잘 읽히게 조금 더 진하게 */
  --g-modal: rgba(30, 27, 46, 0.88);     /* 큰 창 */
  --g-line: rgba(255, 255, 255, 0.16);
  --g-line2: rgba(255, 255, 255, 0.10);
  --g-soft: rgba(255, 255, 255, 0.07);   /* 카드 안의 칸 */
  --g-soft2: rgba(255, 255, 255, 0.12);
  --g-blur: blur(14px) saturate(1.5);
  --g-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  --g-mint: #5fe0c0; --g-mint-t: #d8fff4; --g-hi: #f3effc; --g-dim: #b9b1d0;
  --g-bar: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
}

/* 위쪽 막대: 구역 │ 손님 수 │ 날씨 (내 책상 머리줄과 같은 유리 · 모양은 위쪽 #topbar) */
#topbar {
  background: var(--g-bg); border: 1px solid var(--g-line); box-shadow: var(--g-shadow);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
}

/* OFFICE 안내 막대 (위 가운데) */
#session-call { background: var(--g-panel); border: 1px solid var(--g-line); border-radius: 18px; box-shadow: var(--g-shadow); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }
#session-call .btn.small { border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #1b1828; border: 0; }
#session-call .sc-x { border-radius: 999px; background: rgba(255, 255, 255, 0.10); }

/* 오른쪽 위 지도: 제목 막대가 있는 카드 */
.mm-panel { background: var(--g-bg); border: 1px solid var(--g-line); border-radius: 20px; padding: 0 8px 8px; box-shadow: var(--g-shadow); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); overflow: hidden; }
.mm-head { margin: 0 -8px 8px; padding: 8px 10px 7px 14px; background: var(--g-bar); border-bottom: 1px solid var(--g-line2); font-size: 12.5px; }
.mm-head b { color: var(--g-hi); font-weight: 800; font-family: inherit; }
.mm-toggle { border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.10); width: 28px; }
#minimap-wrap canvas { border-radius: 12px; }
.mm-fab { border: 1px solid var(--g-line); border-radius: 16px; background: var(--g-bg); box-shadow: var(--g-shadow); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }

/* 아래 메뉴 막대 */
#toolbar { background: var(--g-bg); border: 1px solid var(--g-line); border-radius: 20px; padding: 7px; box-shadow: var(--g-shadow); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }
.tool { background: rgba(255, 255, 255, 0.08); border-radius: 14px; }
.tool:hover { filter: none; background: rgba(255, 255, 255, 0.16); }
.tool.on { background: rgba(95, 224, 192, 0.20); box-shadow: inset 0 0 0 1.5px var(--g-mint); }
.sep { background: rgba(255, 255, 255, 0.14); }
.chat-unread { box-shadow: 0 0 0 2px rgba(40, 36, 60, 0.9); }

/* 채팅: 제목 막대 · 반투명 · 흰 보내기 */
#chat { background: var(--g-panel); border: 1px solid var(--g-line); border-radius: 20px; box-shadow: var(--g-shadow); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }
.chat-head { padding: 8px 10px 7px 16px; background: var(--g-bar); border-bottom: 1px solid var(--g-line2); margin-bottom: 4px; }
.chat-head b { color: var(--g-hi); font-weight: 800; font-family: inherit; }
.chat-x { border-radius: 999px; background: rgba(255, 255, 255, 0.10); padding: 3px 10px; color: #ddd6f0; }
.chat-log { padding: 2px 14px 6px; }
.chat-line.me .chat-nick { color: var(--g-mint); }
.chat-line.me .t { color: var(--g-mint-t); }
.chat-form { border-top: 1px solid var(--g-line2); padding: 8px 10px 10px; gap: 8px; }
.chat-form input { background: rgba(255, 255, 255, 0.07); border: 1px dashed rgba(255, 255, 255, 0.24); border-radius: 12px; }
.chat-form input:focus { border-style: solid; border-color: var(--g-mint); background: rgba(0, 0, 0, 0.25); }
.chat-send { border-radius: 12px; background: rgba(255, 255, 255, 0.92); color: #1b1828; padding: 0 14px; }
.chat-line.chat-note { background: rgba(255, 255, 255, 0.07); border-left: 0; box-shadow: inset 3px 0 0 #ffd34e; border-radius: 12px; }

/* 잠깐 뜨는 알림 · 소식 */
#toast { background: rgba(30, 27, 46, 0.88); color: var(--g-hi); border: 1px solid var(--g-line); border-radius: 999px; box-shadow: var(--g-shadow); padding: 8px 16px; -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }
.feed-line { background: var(--g-bg); border: 1px solid var(--g-line); border-radius: 10px; -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }
#status { border-radius: 999px; box-shadow: var(--g-shadow); }

/* 아래에서 올라오는 판 (피드 · 💌 쪽지) */
.sheet { background: var(--g-panel); border: 1px solid var(--g-line); border-radius: 22px; box-shadow: var(--g-shadow); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }
.fd-head { background: var(--g-bar); border-bottom: 1px solid var(--g-line2); padding: 11px 16px; }
.fd-head b { color: var(--g-hi); font-weight: 800; font-family: inherit; }

/* 큰 창 (내 기록 · 설정 · 프로필 …) */
#modal { background: rgba(10, 8, 18, 0.4); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal-card {
  background: var(--g-modal); border: 1px solid var(--g-line); border-radius: 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
}
.modal-card h2 { color: var(--g-hi); }
.modal-x { top: 14px; right: 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.10); padding: 4px 10px; font-size: 15px; color: #ddd6f0; }
.modal-x:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.pl-confirm-box { background: var(--g-modal); border: 1px solid var(--g-line); border-radius: 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
#dialog { border-radius: 20px; }
.tabs { background: rgba(0, 0, 0, 0.25); border-radius: 12px; padding: 3px; gap: 2px; }
.tabs button { border-radius: 9px; color: var(--g-dim); }
.tabs button.on { background: rgba(255, 255, 255, 0.92); color: #1b1828; }
.btn { border: 1px solid var(--g-line); border-radius: 12px; background: rgba(255, 255, 255, 0.10); box-shadow: none; }
.btn:hover { filter: none; background: rgba(255, 255, 255, 0.18); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn.primary { border: 0; background: var(--sun); color: #1b1828; box-shadow: 0 4px 12px rgba(255, 211, 78, 0.35); }
.btn.primary:hover { filter: brightness(1.06); background: var(--sun); }
.btn.ghost { background: transparent; }
.form input, .form select, .form textarea, .settings select, .pl-add input, .fd-cm-form input {
  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--g-line); border-radius: 12px;
}
.form input:focus, .form textarea:focus, .settings select:focus, .pl-add input:focus { border-color: var(--g-mint); }
#panel { background: var(--g-panel); border: 1px solid var(--g-line); border-radius: 20px; box-shadow: var(--g-shadow); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }
.person:hover { background: var(--g-soft2); }


/* ── 📋 OFFICE 현황판 (js/office.js): 오피스 가운데 화이트보드 → 화면 가득 · 유리 카드 ── */
#modal:has(.ob) { padding: 18px; }
#modal-card.wide:has(.ob) { width: 100%; height: 100%; max-height: none; display: flex; flex-direction: column; padding: 18px 22px 20px; border-radius: 28px; overflow: hidden; }
#modal-card:has(.ob) > .modal-x { top: 18px; right: 20px; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; font-size: 15px; }
.ob { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; color: var(--g-hi); }
.ob-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-right: 50px; min-height: 38px; }
.ob-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; flex: none; }
.ob-t { font-size: 22px; color: #fff; }
.ob-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: #8ff0d4; letter-spacing: 1px; }
.ob-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--g-mint); box-shadow: 0 0 0 4px rgba(95, 224, 192, 0.25); animation: ob-blink 2s ease-in-out infinite; }
@keyframes ob-blink { 50% { opacity: 0.35; } }
.ob-clock { margin-left: auto; font-size: 28px; color: #fff; font-variant-numeric: tabular-nums; }
.ob-card { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 20px; padding: 14px 16px; min-width: 0; }
.ob-ch { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 800; color: #f3effc; margin-bottom: 10px; }
.ob-ch > small { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--g-dim); text-align: right; }
.ob-empty { margin: 2px 0; color: #8d86a8; font-size: 13px; line-height: 1.6; }

.ob-kpis { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 12px; }
.ob-kpi { display: flex; flex-direction: column; gap: 4px; padding: 13px 18px; }
.ob-kpi b { font-size: 28px; font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; color: #fff; }
.ob-kpi b em { font-style: normal; font-size: 17px; color: var(--g-dim); }
.ob-kpi small { font-size: 12.5px; color: var(--g-dim); }
.ob-kpi.hot { background: linear-gradient(135deg, rgba(95, 224, 192, 0.28), rgba(95, 224, 192, 0.08)); border-color: rgba(95, 224, 192, 0.5); }
.ob-kpi.hot b { color: var(--g-mint-t); }

.ob-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr); gap: 14px; }
.ob-left { display: flex; flex-direction: column; min-height: 0; }
.ob-people { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 12px; padding: 2px; }
.ob-p { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 13px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); }
.ob-p.me { border-color: var(--g-mint); box-shadow: inset 0 0 0 1px var(--g-mint); }
.ob-ph { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ob-ph canvas { width: 40px; height: 40px; flex: none; border-radius: 12px; background: rgba(255, 255, 255, 0.10); image-rendering: pixelated; }
.ob-nm { display: flex; flex-direction: column; min-width: 0; }
.ob-nm b, .ob-nm small, .ob-task { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-nm b { font-size: 13.5px; }
.ob-nm small { font-size: 11.5px; color: var(--g-dim); }
.ob-task { font-size: 15px; font-weight: 800; color: #fff; }
.ob-tm { display: flex; align-items: baseline; gap: 8px; }
.ob-tm b { font-size: 22px; color: var(--g-mint-t); font-variant-numeric: tabular-nums; }
.ob-tm small { font-size: 12px; color: #8ff0d4; }
.ob-hp { display: flex; gap: 2px; }
.ob-hp i { flex: 1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); }
.ob-hp i.f { background: var(--g-mint); }
.ob-p.ob-invite { display: grid; place-items: center; min-height: 128px; text-align: center; background: none; border-style: dashed; color: #8d86a8; font-size: 13px; line-height: 1.6; }
.ob-p.ob-none { grid-column: 1 / -1; min-height: 220px; font-size: 14.5px; }

.ob-right { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: auto; }

.ob-seats { display: flex; flex-direction: column; gap: 6px; padding: 2px 0; }
.ob-row { display: flex; align-items: center; gap: 2px; }
.ob-row i { flex: 1; min-width: 0; height: 13px; border-radius: 4px; background: rgba(255, 255, 255, 0.10); }
.ob-row i.sit { background: rgba(255, 255, 255, 0.45); }
.ob-row i.on { background: var(--g-mint); box-shadow: 0 0 8px rgba(95, 224, 192, 0.6); }
.ob-row i.me { outline: 2px solid #fff; outline-offset: 1px; }
.ob-row .gap { flex: 0 0 4px; }
.ob-row .aisle { flex: 0 0 26px; text-align: center; font-size: 12px; line-height: 13px; }
.ob-row.dense { gap: 1px; } /* 한 줄에 자리가 많은 오피스 (24자리 넘게) */
.ob-row.dense .gap { flex-basis: 3px; }
.ob-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 11.5px; color: var(--g-dim); }
.ob-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; }
.ob-legend .a::before { background: var(--g-mint); }
.ob-legend .b::before { background: rgba(255, 255, 255, 0.45); }
.ob-legend .c::before { background: rgba(255, 255, 255, 0.10); }

.ob-logc { flex: 1; }
.ob-log { list-style: none; margin: 0; padding: 0; }
.ob-log li { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; font-size: 13px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.ob-log li:first-child { border-top: 0; padding-top: 0; }
.ob-log li b { color: #8ff0d4; white-space: nowrap; }
.ob-log li span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-log li small { color: #8d86a8; white-space: nowrap; }

/* 낮은 화면: 위아래를 조금씩 */
@media (max-height: 800px) and (min-width: 901px) {
  #modal:has(.ob) { padding: 12px; }
  #modal-card.wide:has(.ob) { padding: 14px 18px 16px; }
  .ob { gap: 10px; }
  .ob-kpi { padding: 10px 16px; }
  .ob-kpi b { font-size: 24px; }
  .ob-card { padding: 12px 14px; }
  .ob-right { gap: 10px; }
}
/* 폰 · 좁은 창: 한 줄로 쌓고 통째로 스크롤 */
@media (max-width: 900px) {
  #modal:has(.ob) { padding: 0; }
  #modal-card.wide:has(.ob) { border-radius: 0; padding: 14px 12px 18px; overflow: auto; }
  #modal-card:has(.ob) > .modal-x { top: 12px; right: 12px; }
  .ob { flex: none; gap: 10px; }
  .ob-hd { gap: 8px 10px; padding-right: 46px; }
  .ob-t { font-size: 18px; }
  .ob-clock { font-size: 22px; }
  .ob-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ob-kpi { padding: 10px 12px; }
  .ob-kpi b { font-size: 22px; }
  .ob-main { grid-template-columns: 1fr; gap: 10px; }
  .ob-people { overflow: visible; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .ob-p { padding: 11px 11px; gap: 6px; }
  .ob-ph { gap: 8px; }
  .ob-ph canvas { width: 34px; height: 34px; border-radius: 10px; }
  .ob-task { font-size: 14px; }
  .ob-tm b { font-size: 20px; }
  .ob-p.ob-invite { min-height: 96px; }
  .ob-p.ob-none { min-height: 120px; }
  .ob-right { overflow: visible; gap: 10px; }
}

/* ── 💌 쪽지 · 👥 친구 (js/mates.js): 아래에서 올라오는 판 · 프로필 창 아래 단추 · 위쪽 알림 ── */
#mt-side .mt-head { flex: none; }
/* 왼쪽 목록 · 오른쪽 대화 — 좁은 화면은 하나씩 (대화를 열면 대화만) */
#mt-side .mt-wrap { flex: 1; min-height: 0; display: flex; }
#mt-side .mt-left, #mt-side .mt-right { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
#mt-side.has-cur .mt-left { display: none; }
#mt-side:not(.has-cur) .mt-right { display: none; }
.mt-q { flex: none; margin: 0 12px 8px; padding: 8px 12px; border: 1px solid var(--g-line); border-radius: 12px; background: rgba(255, 255, 255, 0.07); color: var(--g-hi); font: inherit; font-size: 13px; outline: none; }
.mt-q:focus { border-color: var(--g-mint); background: rgba(0, 0, 0, 0.25); }
/* 받은 친구 신청: 이름은 윗줄 · 수락 · 거절은 아랫줄에 반씩 (같은 크기) */
.mt-row.req { flex-wrap: wrap; }
.mt-row.req .mt-acts { flex: 1 0 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mt-row.req .mt-act { width: 100%; height: 34px; }
.mt-row.click { cursor: pointer; }
.mt-row.click:hover { background: rgba(255, 255, 255, 0.12); }
#mt-side .mt-row.sel { border-color: var(--g-mint); background: rgba(95, 224, 192, 0.12); }
/* 오른쪽 처음 화면: 안내 + 접속 중인 친구 */
.mt-home { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 28px 24px; text-align: center; }
.mt-home-ic { width: 76px; height: 76px; border-radius: 26px; display: grid; place-items: center; font-size: 36px; background: rgba(255, 92, 138, 0.16); border: 1px solid rgba(255, 92, 138, 0.35); }
.mt-home > b { font-size: 18px; color: #fff; }
.mt-home > small { font-size: 13px; color: var(--g-dim); line-height: 1.6; }
.mt-home-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.mt-home-stats > * { flex: 0 0 140px; min-width: 0; height: 32px; font-size: 12.5px; }
.mt-home-on { align-self: stretch; margin-top: 14px; }
.mt-home-on h4 { margin: 0 0 10px; font-size: 13px; color: var(--g-hi); text-align: left; }
.mt-home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.mt-home-p { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px; border: 1px solid var(--g-line2, rgba(255, 255, 255, 0.10)); border-radius: 16px; background: var(--g-soft, rgba(255, 255, 255, 0.07)); color: var(--g-hi); font: inherit; cursor: pointer; min-width: 0; }
.mt-home-p:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); }
.mt-home-p b { max-width: 100%; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-home-p small { max-width: 100%; font-size: 11.5px; color: var(--g-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-tabs { flex: none; display: flex; gap: 2px; margin: 0 12px 8px; padding: 3px; background: rgba(0, 0, 0, 0.25); border-radius: 12px; }
.mt-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 9px; padding: 7px 6px; background: none; color: var(--g-dim); font: inherit; font-size: 13px; cursor: pointer; }
.mt-tabs button.on { background: rgba(255, 255, 255, 0.92); color: #1b1828; font-weight: 800; }
.mt-tabs em, .mt-end em { font-style: normal; font-weight: 800; font-size: 10.5px; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: #ff5c8a; color: #fff; text-align: center; }
.mt-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mt-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.mt-empty { margin: 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--g-dim); font-size: 13px; line-height: 1.5; }
.mt-empty b { color: var(--g-hi); font-size: 14px; }
.mt-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 14px; background: var(--g-soft, rgba(255, 255, 255, 0.07)); color: var(--g-hi); font: inherit; text-align: left; }
button.mt-row { cursor: pointer; }
button.mt-row:hover { background: rgba(255, 255, 255, 0.12); }
.mt-row.new { border-color: rgba(255, 92, 138, 0.55); }
.mt-row.off { opacity: 0.72; }
.mt-face { flex: none; border-radius: 11px; background: rgba(255, 255, 255, 0.10); image-rendering: pixelated; }
.mt-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mt-mid > b, .mt-nm { display: flex; align-items: center; gap: 6px; font-size: 13.5px; min-width: 0; }
.mt-mid small { font-size: 12px; color: var(--g-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-row.new .mt-mid small { color: #f3effc; }
.mt-on { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.22); }
.mt-end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mt-end time { font-size: 11px; color: var(--g-dim); white-space: nowrap; }
.mt-name { border: 0; background: none; padding: 0; color: var(--g-hi); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.mt-name:hover { text-decoration: underline; }
.mt-acts { flex: none; display: flex; gap: 6px; }
.mt-act { box-sizing: border-box; min-width: 72px; height: 30px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--g-line); border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: var(--g-hi); font: inherit; font-size: 12.5px; cursor: pointer; }
.mt-act:hover { background: rgba(255, 255, 255, 0.16); }
.mt-act.go, .mt-mini.go { border-color: transparent; background: var(--g-mint); color: #10302a; font-weight: 800; }
.mt-sec { display: flex; flex-direction: column; gap: 6px; }
.mt-sec + .mt-sec, .mt-sec + .mt-empty, .mt-empty + .mt-sec { margin-top: 6px; }
.mt-sec h4 { display: flex; align-items: baseline; gap: 8px; margin: 6px 4px 0; font-size: 12.5px; color: var(--g-hi); }
.mt-sec h4 small { font-weight: 400; color: var(--g-dim); font-size: 11.5px; }
/* 한 줄에 같이 서는 작은 단추 · 표시(친구 · 신청 보냄)는 모두 같은 상자 (높이 28 · 최소 너비 72) */
.mt-mini, .mt-tag { box-sizing: border-box; flex: none; min-width: 72px; height: 28px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--g-line); border-radius: 999px; font: inherit; font-size: 12px; white-space: nowrap; }
.mt-mini { background: rgba(255, 255, 255, 0.10); color: var(--g-hi); cursor: pointer; }
.mt-mini:hover { background: rgba(255, 255, 255, 0.18); }
.mt-mini.ghost { background: rgba(255, 255, 255, 0.05); color: var(--g-dim); }
.mt-tag { background: rgba(255, 255, 255, 0.10); border-color: transparent; color: var(--g-dim); }
.mt-tag.on { background: rgba(95, 224, 192, 0.18); border-color: rgba(95, 224, 192, 0.45); color: var(--g-mint-t); }

/* 한 사람과의 대화 */
.mt-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mt-th { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.mt-back { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.10); color: var(--g-hi); font-size: 15px; cursor: pointer; }
.mt-back:hover { background: rgba(255, 255, 255, 0.2); }
.mt-msgs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.mt-day { align-self: center; margin: 6px 0 2px; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 11px; color: var(--g-dim); }
.mt-msg { align-self: flex-start; max-width: 80%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.mt-msg p { margin: 0; padding: 8px 12px; border-radius: 4px 16px 16px 16px; background: rgba(255, 255, 255, 0.12); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.mt-msg.me { align-self: flex-end; align-items: flex-end; }
.mt-msg.me p { border-radius: 16px 4px 16px 16px; background: rgba(95, 224, 192, 0.24); color: #effffa; }
.mt-msg p a { color: #ffd27a; }
.mt-msg small { font-size: 10.5px; color: var(--g-dim); padding: 0 4px; }
.mt-older { align-self: center; border: 1px dashed var(--g-line); border-radius: 999px; background: none; color: var(--g-dim); font: inherit; font-size: 12px; padding: 4px 12px; cursor: pointer; }
.mt-foot { flex: none; padding: 8px 10px 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 4px; }
.mt-foot.note { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--g-dim); }
.mt-write { display: flex; align-items: flex-end; gap: 8px; }
.mt-write textarea { flex: 1; min-width: 0; resize: none; height: 38px; max-height: 110px; padding: 9px 12px; border: 1px solid var(--g-line); border-radius: 12px; background: rgba(255, 255, 255, 0.07); color: var(--g-hi); font: inherit; font-size: 13.5px; line-height: 1.4; outline: none; }
.mt-write textarea:focus { border-color: var(--g-mint); background: rgba(0, 0, 0, 0.25); }
/* 쪽지함: 대화 목록 · 대화 · 쓰는 칸에 스크롤 막대를 안 보임 (휠 · 손가락으로는 그대로 스크롤) */
#mt-side .mt-list, #mt-side .mt-msgs, #mt-side .mt-home, #mt-side .mt-write textarea { scrollbar-width: none; -ms-overflow-style: none; }
#mt-side .mt-list::-webkit-scrollbar, #mt-side .mt-msgs::-webkit-scrollbar, #mt-side .mt-home::-webkit-scrollbar, #mt-side .mt-write textarea::-webkit-scrollbar { display: none; width: 0; height: 0; }
.mt-send { flex: none; height: 38px; border: 0; border-radius: 12px; padding: 0 14px; background: rgba(255, 255, 255, 0.92); color: #1b1828; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.mt-send:disabled { opacity: 0.5; }
.mt-hint { font-size: 11px; color: var(--g-dim); padding: 0 4px; }

/* 🚨 쪽지 신고: 머리의 "신고" → 받은 쪽지를 눌러 고르기 → 이유 · 신고하기 (js/mates.js toggleReport) */
.mt-mini.rp { min-width: 0; }
@media (max-width: 600px) { .mt-mini.rp { padding: 0 9px; } .mt-mini.rp .rp-t { display: none; } }
.mt-mini.ghost.on { border-color: rgba(255, 107, 139, 0.7); color: #ffc2cf; background: rgba(255, 107, 139, 0.14); }
.mt-msgs.picking .mt-msg.me { opacity: 0.4; }
.mt-msg.pick { cursor: pointer; }
.mt-msg.pick p { outline: 1px dashed rgba(255, 107, 139, 0.55); outline-offset: 2px; }
.mt-msg.pick:focus-visible { outline: none; }
.mt-msg.pick:focus-visible p { outline: 2px solid #ffd27a; }
.mt-msg.picked p { outline: 2px solid #ff6b8b; background: rgba(255, 107, 139, 0.22); }
.mt-msg.picked small { color: #ff9db1; }
.mt-report { gap: 8px; }
.mt-rp-t { margin: 0; font-size: 12.5px; color: var(--g-hi); }
.mt-rp-t b { color: #ff9db1; font-weight: 700; }
.mt-rp-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mt-rp-why, .mt-rp-note { box-sizing: border-box; height: 34px; padding: 0 10px; border: 1px solid var(--g-line); border-radius: 10px; background: rgba(255, 255, 255, 0.07); color: var(--g-hi); font: inherit; font-size: 13px; outline: none; }
.mt-rp-why { flex: 0 1 190px; }
.mt-rp-note { flex: 1 1 160px; min-width: 0; }
.mt-rp-why:focus, .mt-rp-note:focus { border-color: var(--g-mint); }
.mt-rp-why option { background: #221e34; color: #f3effc; }
.mt-rp-block { flex: 1; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--g-dim); cursor: pointer; }
.mt-mini.go[disabled] { opacity: 0.45; cursor: not-allowed; }

/* 프로필 창 아래 */
.mt-pf { align-self: stretch; width: 100%; box-sizing: border-box; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.10); display: flex; flex-direction: column; gap: 8px; }
/* 한 줄의 단추는 모두 같은 너비 · 같은 높이 */
.mt-pf-main { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.mt-pf-main > .btn { box-sizing: border-box; height: 44px; min-width: 0; margin: 0; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.btn.mt-pf-on { background: rgba(95, 224, 192, 0.16); border-color: rgba(95, 224, 192, 0.45); color: var(--g-mint-t); cursor: default; }
.btn.mt-pf-on:hover { background: rgba(95, 224, 192, 0.16); }
.mt-pf-links { display: flex; justify-content: center; gap: 14px; }
.mt-pf-links button { border: 0; background: none; padding: 2px 4px; color: var(--g-dim); font: inherit; font-size: 12px; cursor: pointer; }
.mt-pf-links button:hover { color: #ff8fab; text-decoration: underline; }
.mt-pf-note, .mt-pf-q { margin: 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--g-dim); }
.mt-pf-q { color: var(--g-hi); }
.btn.danger { border-color: transparent; background: #ff5c8a; color: #fff; }
.btn.danger:hover { background: #ff7aa0; }

/* 새 쪽지 · 친구 신청 알림 (위쪽 가운데 · 누르면 그 대화로) */
#mt-pop {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 12; max-width: min(360px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--g-line); border-radius: 16px;
  background: rgba(30, 27, 46, 0.9); color: var(--g-hi); box-shadow: var(--g-shadow); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  font: inherit; text-align: left; cursor: pointer; animation: mt-pop 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#mt-pop.hidden { display: none; }
#mt-pop > span { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#mt-pop b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mt-pop small { font-size: 12px; color: var(--g-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes mt-pop { from { transform: translate(-50%, -10px); opacity: 0; } }
/* 한 번에 알리는 카드 (js/mates.js showSummary): 📬 없는 동안 온 소식 · 🔔 방해 금지 동안 온 소식 */
#mt-sum {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 13; width: min(380px, calc(100vw - 24px));
  display: flex; gap: 12px; padding: 12px 12px 12px 14px; border: 1px solid var(--g-line); border-radius: 18px;
  background: rgba(30, 27, 46, 0.92); color: var(--g-hi); box-shadow: var(--g-shadow); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  animation: mt-pop 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#mt-sum .ms-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: rgba(255, 107, 154, 0.22); flex: none; }
#mt-sum .ms-ic.dnd { background: rgba(255, 211, 78, 0.22); }
#mt-sum .ms-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#mt-sum .ms-body b { font-size: 14px; }
#mt-sum .ms-body small { font-size: 12.5px; color: var(--g-dim); }
#mt-sum .ms-btns { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
#mt-sum .ms-btns button { border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 800; background: rgba(255, 255, 255, 0.92); color: #1b1828; cursor: pointer; }
#mt-sum .ms-btns button.g { background: rgba(255, 255, 255, 0.12); color: var(--g-hi); }
#mt-sum .ms-x { border: 0; background: rgba(255, 255, 255, 0.10); color: var(--g-dim); width: 26px; height: 26px; border-radius: 999px; font: inherit; flex: none; cursor: pointer; }
#mt-sum button:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }

/* 🎵 음악 (아래 메뉴): 지금 나오는 노래 알약 · 위로 뜨는 "음악" 창 (js/player.js) */
.tool.mp-pill { width: auto; padding: 0 12px 0 11px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--g-dim, #b9b1d0); max-width: 230px; }
.tool.mp-pill b { font-weight: 800; color: var(--g-hi, #f3effc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tool.mp-pill small { font-size: 10px; transition: transform 0.15s; }
.tool.mp-pill.open small { transform: rotate(180deg); }
.tool.mp-pill:not(.on) b { color: var(--g-dim, #b9b1d0); font-weight: 700; }
.mp-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; flex: none; }
.mp-eq i { width: 3px; height: 30%; border-radius: 1px; background: rgba(255, 255, 255, 0.35); }
.on > .mp-eq i, .mp-tile.on .mp-eq i { background: var(--g-mint, #5fe0c0); }
.mp-eq i:nth-child(2) { height: 55%; } .mp-eq i:nth-child(3) { height: 40%; } .mp-eq i:nth-child(4) { height: 70%; }
.mp-live > .mp-eq i { animation: mp-eq 0.9s ease-in-out infinite alternate; }
.mp-live > .mp-eq i:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.3s; }
.mp-live > .mp-eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -0.5s; }
.mp-live > .mp-eq i:nth-child(4) { animation-duration: 0.8s; animation-delay: -0.1s; }
@keyframes mp-eq { from { height: 20%; } to { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .mp-live > .mp-eq i { animation: none; } }
#music-pop {
  position: fixed; z-index: 40; width: min(356px, calc(100vw - 16px)); color: var(--paper);
  background: rgba(34, 30, 52, 0.86); border: 1px solid var(--g-line); border-radius: 20px; box-shadow: var(--g-shadow);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); overflow: hidden;
}
.mp-head { display: flex; align-items: center; gap: 9px; padding: 10px 16px 9px; background: var(--g-bar); border-bottom: 1px solid var(--g-line2); font-size: 13px; }
.mp-head b { font-weight: 800; color: var(--g-hi); }
.mp-ic { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 900; background: #7c6cff; color: #fff; flex: none; }
.mp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.mp-tile {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px; text-align: left; cursor: pointer;
  padding: 10px; border-radius: 16px; border: 1.5px solid rgba(255, 255, 255, 0.10); background: var(--g-soft); color: inherit; font: inherit;
}
.mp-tile:hover { background: var(--g-soft2); }
.mp-tile:focus-visible, .mp-play:focus-visible, .mp-vol:focus-visible, .mp-pill:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.mp-tile.picked { border-color: rgba(95, 224, 192, 0.45); }
.mp-tile.on { border-color: var(--g-mint); background: rgba(95, 224, 192, 0.12); }
.mp-art { height: 64px; border-radius: 11px; display: grid; place-items: center; font-size: 28px; margin-bottom: 5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.mp-tile b { font-size: 13px; font-weight: 800; color: var(--g-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-sub { font-size: 11px; color: var(--g-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-tile > .mp-eq { position: absolute; right: 17px; top: 16px; display: none; }
.mp-tile.on > .mp-eq { display: inline-flex; }
.mp-note { margin: 0 14px 8px; font-size: 12px; color: var(--sun); }
.mp-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px 12px; border-top: 1px solid var(--g-line2); }
.mp-play { flex: none; border: 0; border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 800; background: #fff; color: var(--ink); white-space: nowrap; cursor: pointer; }
.mp-play.on { background: var(--g-mint); }
.mp-vic { font-size: 13px; }
.mp-vol { flex: 1; display: flex; gap: 3px; padding: 6px 0; cursor: pointer; touch-action: none; border-radius: 4px; }
.mp-vol i { flex: 1; height: 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); pointer-events: none; }
.mp-vol i.f { background: var(--g-mint); }
/* 좁은 화면: 알약엔 막대만 */
@media (max-width: 720px), (pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
  .tool.mp-pill { padding: 0; width: 38px; justify-content: center; }
  .tool.mp-pill b, .tool.mp-pill small { display: none; }
}

/* 💌 쪽지 · 친구: 넓은 화면은 넓게 · 크게 (--wsheet-*) */
@media (min-width: 900px) {
  #mt-side.sheet {
    left: var(--wsheet-x, 50%); bottom: var(--wsheet-b, calc(76px + var(--safe-b)));
    width: var(--wsheet-w, min(920px, calc(100vw - 16px))); height: var(--wsheet-h, min(80vh, calc(100vh - 150px - var(--safe-b))));
  }
  #mt-side.sheet.min { transform: translate(-50%, calc(100% + var(--wsheet-b, 76px) + 14px)); }
  #mt-side .mt-head { padding: 13px 18px; }
  #mt-side .mt-head b { font-size: 16px; }
  #mt-side .mt-head .fd-count { font-size: 12.5px; }
  #mt-side .mt-left { flex: 0 0 340px; padding-top: 12px; border-right: 1px solid rgba(255, 255, 255, 0.08); }
  #mt-side.has-cur .mt-left { display: flex; }
  #mt-side:not(.has-cur) .mt-right { display: flex; }
  #mt-side .mt-back { display: none; }
  #mt-side .mt-tabs { margin: 0 14px 10px; }
  #mt-side .mt-tabs button { padding: 9px 6px; font-size: 13.5px; }
  #mt-side .mt-q { margin: 0 14px 10px; padding: 10px 14px; font-size: 13.5px; }
  #mt-side .mt-list { padding: 0 14px 14px; gap: 8px; }
  #mt-side .mt-row { padding: 10px 12px; gap: 12px; border-radius: 16px; }
  #mt-side .mt-mid > b, #mt-side .mt-nm, #mt-side .mt-name { font-size: 14.5px; }
  #mt-side .mt-mid small { font-size: 12.5px; }
  #mt-side .mt-sec h4 { font-size: 13px; }
  #mt-side .mt-th { padding: 14px 20px 12px; gap: 12px; }
  #mt-side .mt-th .mt-name { font-size: 16px; }
  #mt-side .mt-msgs { padding: 16px 22px; gap: 8px; }
  #mt-side .mt-msg { max-width: 72%; }
  #mt-side .mt-msg p { padding: 10px 14px; font-size: 14.5px; }
  #mt-side .mt-msg small { font-size: 11px; }
  #mt-side .mt-foot { padding: 12px 18px 16px; }
  #mt-side .mt-write textarea { height: 44px; max-height: 140px; padding: 11px 14px; font-size: 14.5px; border-radius: 14px; }
  #mt-side .mt-send { height: 44px; padding: 0 18px; font-size: 14px; border-radius: 14px; }
}

/* ── 🧰 독: 아이콘 칸 + 밑에 설명 (시안 B) · 크기 --ds (js/dock.js: 작게 0.85 · 보통 1 · 크게 1.2) ── */
#toolbar { --ds: 1; align-items: flex-start; gap: calc(4px * var(--ds)); padding: calc(7px * var(--ds)) calc(8px * var(--ds)) calc(6px * var(--ds)); border-radius: calc(20px * var(--ds)); }
#toolbar .tool {
  width: calc(52px * var(--ds)); height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none;
  display: flex; flex-direction: column; align-items: center; gap: calc(3px * var(--ds)); font-size: calc(20px * var(--ds)); line-height: 1;
}
#toolbar .tool:hover { background: none; filter: none; }
#toolbar .tool .ti {
  width: calc(44px * var(--ds)); height: calc(44px * var(--ds)); display: grid; place-items: center; border-radius: calc(14px * var(--ds));
  background: rgba(255, 255, 255, 0.08); transition: background 0.1s, box-shadow 0.1s;
}
#toolbar .tool:hover .ti { background: rgba(255, 255, 255, 0.16); }
#toolbar .tool.on { background: none; box-shadow: none; }
#toolbar .tool.on .ti { background: rgba(95, 224, 192, 0.20); box-shadow: inset 0 0 0 1.5px var(--g-mint); }
#toolbar .tool .tl { font-size: calc(10.5px * var(--ds)); font-weight: 700; color: #ddd6f0; white-space: nowrap; letter-spacing: -0.2px; line-height: 1.15; }
#toolbar .tool.on .tl { color: var(--g-mint-t); }
#toolbar .tool .chat-unread { top: -5px; right: calc(-1px * var(--ds)); }
#toolbar .sep { height: calc(40px * var(--ds)); align-self: center; }
/* 🎵 음악 알약 (js/player.js): 위는 알약 칸(노래 이름) · 밑에 "음악" — 다른 단추와 같은 높이 */
#toolbar .tool.mp-pill { width: auto; max-width: none; padding: 0; gap: calc(3px * var(--ds)); }
#toolbar .tool.mp-pill .mp-ti {
  width: auto; max-width: calc(230px * var(--ds)); padding: 0 calc(12px * var(--ds)) 0 calc(11px * var(--ds));
  display: inline-flex; align-items: center; gap: calc(8px * var(--ds)); font-size: calc(13px * var(--ds)); color: var(--g-dim);
}
#toolbar .tool.mp-pill .mp-ti b { min-width: 0; }
/* 독이 화면보다 넓으면 (아이패드 mini 세로 · '크게' 고른 독): 음악 알약의 노래 이름이 먼저 … 로 줄어듦 · 다른 단추는 그대로 (예전엔 독 양 끝이 화면 밖으로 잘렸음) */
@media (min-width: 721px) and (pointer: fine), (min-width: 721px) and (orientation: landscape), (min-width: 901px) { /* = 📱 휴대폰 독(세워 든 아이패드 포함)이 아닌 화면 */
  #toolbar { width: max-content; max-width: calc(100vw - 16px); } /* 가운데 맞춤(left 50%)이라 폭은 내용만큼으로 못 박음 · 넘칠 때만 줄어듦 */
  #toolbar .tool.mp-pill { flex: 0 1 auto; min-width: calc(52px * var(--ds)); }
  #toolbar .tool.mp-pill .mp-ti { max-width: min(calc(230px * var(--ds)), 100%); min-width: 0; box-sizing: border-box; }
}
#toolbar .tool.mp-pill.open .mp-ti, #toolbar .tool.mp-pill:focus-visible .mp-ti { box-shadow: inset 0 0 0 1.5px var(--g-mint); }
#toolbar .tool.mp-pill.on .mp-eq i { background: var(--g-mint); }
#toolbar .tool.mp-pill.mp-live .mp-eq i { animation: mp-eq 0.9s ease-in-out infinite alternate; }
#toolbar .tool.mp-pill.mp-live .mp-eq i:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.3s; }
#toolbar .tool.mp-pill.mp-live .mp-eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -0.5s; }
#toolbar .tool.mp-pill.mp-live .mp-eq i:nth-child(4) { animation-duration: 0.8s; animation-delay: -0.1s; }
@media (prefers-reduced-motion: reduce) { #toolbar .tool.mp-pill.mp-live .mp-eq i { animation: none; } }
/* 독 크기 손잡이: 위 가운데 막대 · 올리면 작게 · 보통 · 크게 고르기 */
#dock-grip { position: absolute; left: 50%; top: -6px; width: 56px; height: 14px; transform: translate(-50%, -4px); cursor: ns-resize; touch-action: none; outline: none; }
#dock-grip::before { content: ''; position: absolute; left: 8px; right: 8px; top: 5px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.35); box-shadow: 0 0 0 3px rgba(40, 36, 60, 0.5); transition: background 0.12s; }
#dock-grip:hover::before, #dock-grip.drag::before, #dock-grip:focus-visible::before { background: rgba(255, 255, 255, 0.85); }
#dock-grip .dg-tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); display: none; align-items: center; gap: 10px; white-space: nowrap;
  padding: 7px 8px 7px 12px; border-radius: 14px; background: rgba(30, 27, 46, 0.94); border: 1px solid var(--g-line); color: var(--g-hi); font-size: 12.5px; font-weight: 700;
  box-shadow: var(--g-shadow); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); cursor: default;
}
#dock-grip:hover .dg-tip, #dock-grip.drag .dg-tip, #dock-grip:focus-visible .dg-tip { display: flex; }
#dock-grip .dg-tip::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } /* 손잡이에서 말풍선으로 옮겨 가도 안 닫히게 */
.dg-chips { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: rgba(0, 0, 0, 0.25); }
.dg-chips button { width: 46px; height: 26px; border: 0; border-radius: 8px; background: none; color: var(--g-dim); font: inherit; font-size: 12px; cursor: pointer; }
.dg-chips button.on { background: rgba(255, 255, 255, 0.92); color: #1b1828; font-weight: 800; }

/* ── 💬 채팅창 크기 손잡이: 오른쪽 위 모서리 ⤢ (너비 + 높이) · 오른쪽 끝 · 위쪽 끝 ── */
#chat { overflow: visible; }
#chat > .chat-head { border-radius: 20px 20px 0 0; }
.cr-grip { position: absolute; z-index: 3; touch-action: none; }
.cr-corner {
  right: -7px; top: -7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; cursor: nesw-resize;
  background: rgba(30, 27, 46, 0.95); border: 1px solid rgba(255, 255, 255, 0.3); color: var(--g-mint-t); font-size: 12px; line-height: 1;
  opacity: 0; transition: opacity 0.15s, box-shadow 0.15s;
}
.cr-right { right: -4px; top: 18px; bottom: 18px; width: 8px; cursor: ew-resize; }
.cr-top { top: -4px; left: 18px; right: 18px; height: 8px; cursor: ns-resize; }
.cr-right::after, .cr-top::after { content: ''; position: absolute; border-radius: 99px; background: rgba(95, 224, 192, 0.7); opacity: 0; transition: opacity 0.15s; }
.cr-right::after { right: 2px; top: 30%; bottom: 30%; width: 4px; }
.cr-top::after { top: 2px; left: 30%; right: 30%; height: 4px; }
#chat:hover .cr-corner, #chat.resizing .cr-corner { opacity: 1; }
.cr-right:hover::after, .cr-top:hover::after, #chat.resizing .cr-grip::after { opacity: 1; }
#chat.resizing .cr-corner { box-shadow: 0 0 0 3px rgba(95, 224, 192, 0.35); }
#chat.resizing { outline: 2px dashed rgba(95, 224, 192, 0.75); outline-offset: 3px; }
.cr-size { position: absolute; right: 22px; top: -30px; display: none; padding: 4px 10px; border-radius: 99px; background: var(--g-mint); color: #10302a; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
#chat.resizing .cr-size { display: block; }

/* 폰: 독은 처음엔 작게 · 글자 조금 작게 · 손잡이 대신 ⚙️ 설정 · 채팅창은 화면에 맞춤 (손잡이 없음) */
@media (max-width: 720px), (pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
  #toolbar { gap: calc(2px * var(--ds)); padding: calc(5px * var(--ds)) calc(5px * var(--ds)) calc(4px * var(--ds)); }
  #toolbar .tool { width: calc(45px * var(--ds)); }
  #toolbar .tool .tl { font-size: calc(9.5px * var(--ds)); }
  #dock-grip, .cr-grip { display: none; }
  /* 폰: 음악 알약은 ♪ 막대만 (노래 이름 없이) · 다른 단추와 같은 너비 */
  #toolbar .tool.mp-pill { width: calc(45px * var(--ds)); }
  #toolbar .tool.mp-pill .mp-ti { width: calc(44px * var(--ds)); padding: 0; justify-content: center; }
  #toolbar .tool.mp-pill .mp-ti b, #toolbar .tool.mp-pill .mp-ti small { display: none; }
}

/* ⚙️ 설정: 독 크기 · 채팅창 크기 */
.set-seg { flex: none; display: grid; grid-template-columns: repeat(3, 60px); gap: 3px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); }
.set-seg button { height: 30px; border: 0; border-radius: 9px; background: none; color: var(--g-dim); font: inherit; font-size: 13px; cursor: pointer; }
.set-seg button.on { background: rgba(255, 255, 255, 0.92); color: #1b1828; font-weight: 800; }

/* ── 🖱 화면 끌기 막기: 끌어도 글자가 파랗게 선택되거나 그림이 따라오지 않게 · 폰에서 화면이 확대되거나 출렁이지 않게 ──
   입력 칸(채팅 · 쪽지 · 할 일 · 검색 …)은 그대로 글자를 고르고 고칠 수 있어요 · 지도 확대는 게임 안의 두 손가락 · 휠 · +/− 로 */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; touch-action: manipulation; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* 채팅 · 쪽지 대화의 글은 골라서 복사 (main.js COPYABLE 과 같은 목록) · 이름 단추는 그대로 */
.chat-log, .mt-msgs { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.chat-log button, .mt-msgs button { -webkit-user-select: none; user-select: none; }
img, canvas, a, svg { -webkit-user-drag: none; user-drag: none; }

/* ══ 📱 휴대폰 편의 ══════════════════════════════════════════════════════════════
   독 A: 독에는 자주 쓰는 4개(할 일 · 회의실 · 채팅 · 쪽지) + ••• 더보기 · 나머지는 더보기 판에 큰 칸으로 (js/more.js)
         단추는 화면 너비를 똑같이 나눠 가짐 · 글자 11.5px (독 크기 작게 · 보통 · 크게 = --ds) */
#toolbar #btn-more.tool { display: none; }
#more-pop { display: none; }
@media (max-width: 720px), (pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
  #toolbar { left: 8px; right: 8px; transform: none; max-width: none; overflow: visible; justify-content: space-between; gap: 0; padding: 6px 4px 5px; border-radius: 22px; }
  #toolbar > #btn-board, #toolbar > #btn-feed, #toolbar > #btn-music, #toolbar > #btn-planner, #toolbar > #btn-profile, #toolbar > #btn-settings, #toolbar > .sep { display: none; }
  #toolbar #btn-more.tool { display: flex; }
  #toolbar .tool { flex: 1 1 0; width: auto; min-width: 0; gap: 4px; }
  #toolbar .tool .ti { width: min(56px, 100%); height: calc(36px * var(--ds)); border-radius: 13px; font-size: calc(21px * var(--ds)); }
  #toolbar .tool .tl { font-size: max(11px, calc(11.5px * var(--ds))); }
  #toolbar .tool .chat-unread { right: calc(50% - 34px); }
  #btn-more .ti { font-size: calc(16px * var(--ds)); font-weight: 800; letter-spacing: 1px; color: var(--g-hi); }
  .more-dot { position: absolute; top: -3px; right: calc(50% - 32px); width: 11px; height: 11px; border-radius: 50%; background: #ff5c8a; box-shadow: 0 0 0 2px rgba(27, 24, 40, 0.9); }
  .more-dot.hidden { display: none; }
  #more-pop {
    display: block; position: absolute; left: 8px; right: 8px; z-index: 8; padding: 12px 12px 14px; border-radius: 22px;
    background: var(--g-panel); border: 1px solid var(--g-line); box-shadow: var(--g-shadow); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
    animation: more-in 0.16s ease-out;
  }
  #more-pop.hidden { display: none; }
  /* 더보기 판 · 음악 창이 열려 있으면 행동 단추(앉기 등)는 잠깐 숨김 (판을 가리지 않게) */
  body:has(#more-pop:not(.hidden)) #act-btn, body:has(#music-pop:not(.hidden)) #act-btn,
  body:has(#more-pop:not(.hidden)) .pad, body:has(#music-pop:not(.hidden)) .pad { visibility: hidden; }
}
@keyframes more-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.more-head { padding: 2px 6px 10px; }
.more-head b { font-size: 14px; font-weight: 800; color: var(--g-hi); }
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.more-tile {
  position: relative; height: 80px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, 0.08); color: var(--g-hi); font: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; padding: 0 6px;
}
.more-tile:active { background: rgba(255, 255, 255, 0.16); }
.more-tile.on { background: rgba(95, 224, 192, 0.14); box-shadow: inset 0 0 0 1.5px var(--g-mint); }
.more-ic { font-size: 25px; line-height: 1; }
.more-tile b { font-size: 13px; font-weight: 700; }
.more-tile small { max-width: 100%; font-size: 11px; color: var(--g-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -2px; }
.more-tile em { position: absolute; top: 7px; right: 9px; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: #ff5c8a; color: #fff; font-style: normal; font-size: 11px; font-weight: 800; }

/* 책상 A (휴대폰): 접으면 맨 위 한 줄 — [🖥 다음 할 일 · 기획서 쓰기 · 1/3] [▶ 0:00] [⌄] (js/desk.js paintMini)
   처음엔 접은 채로 (게임 화면 · 내 캐릭터가 보이게) · 한 줄이나 ⌄ 를 누르면 펼침 · 펼치면 [— 접기] */
#desk .dz-sum, #desk .dz-mgo, #desk .dz-mopen { display: none; }
#desk.phone.min .dz-head { padding: 6px 6px 6px 8px; gap: 6px; }
#desk.phone.min .dz-head > b, #desk.phone.min .dz-head > .dz-sp, #desk.phone.min .dz-head > .dz-hb, #desk.phone.min .dz-mstate { display: none; }
#desk.phone.min .dz-sum {
  flex: 1 1 auto; min-width: 0; height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 6px; border: 0; border-radius: 12px; background: none;
  color: var(--dz-hi); text-align: left; font-size: 13px;
}
#desk.phone.min .dz-sum-ic { flex: none; font-size: 15px; }
#desk.phone.min .dz-sum small { flex: none; font-size: 12px; font-weight: 600; color: var(--dz-dim); }
#desk.phone.min .dz-sum b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
#desk.phone.min .dz-sum i { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--dz-mint); color: #10302a; font-style: normal; font-size: 11.5px; font-weight: 800; text-shadow: none; }
#desk.phone.min .dz-mgo {
  flex: none; height: 38px; display: inline-flex; align-items: center; gap: 5px; padding: 0 12px; border: 0; border-radius: 12px;
  background: #ffd34e; color: #1b1828; font-size: 13.5px; font-weight: 800; text-shadow: none; font-variant-numeric: tabular-nums;
}
#desk.phone.min .dz-mgo.run { background: rgba(255, 255, 255, 0.92); }
/* 가로 휴대폰: 책상은 왼쪽에 알맞은 너비로 (오른쪽 행동 단추와 겹치지 않게) */
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  #desk.phone { right: auto; width: min(460px, 62vw); }
}
#desk.phone.min .dz-mopen {
  flex: none; width: 40px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px;
  background: rgba(255, 255, 255, 0.12); color: var(--dz-hi); font-size: 16px; font-weight: 800;
}

/* 행동 단추(앉기 …): 휴대폰에서 판이 열려 있거나 책상을 펼쳤으면 잠깐 숨김
   채팅이 열려 있으면 채팅 위로 · 그 위에 자리가 없으면 숨김 (js/layout.js --act-b · body.act-off) */
@media (max-width: 720px), (pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
  body:has(.sheet:not(.min)) #act-btn, body:has(#desk.phone:not(.min):not(.hidden)) #act-btn, body.act-off #act-btn { visibility: hidden; }
  /* 🎮 게임패드: 판 · 펼친 책상 · 채팅이 열려 있으면 잠깐 숨김 (채팅은 패드 자리까지 올라와서) */
  body:has(.sheet:not(.min)) .pad, body:has(#desk.phone:not(.min):not(.hidden)) .pad, body.chat-open .pad { visibility: hidden; }
}

/* 손가락 화면: 작은 단추를 손가락 크기로 (높이 34 ~ 40px) */
@media (pointer: coarse) {
  .modal-x { min-width: 40px; min-height: 40px; display: grid; place-items: center; padding: 0 12px; top: 10px; right: 10px; }
  .chat-x { min-width: 44px; min-height: 36px; }
  .fd-write-btn { min-height: 36px; padding: 0 16px; font-size: 13px; }
  #desk .dz-hb { min-height: 34px; padding: 0 12px; }
  #desk .dz-seg button { min-height: 34px; }
  .mp-play { min-height: 36px; }
  .mt-tabs button { min-height: 38px; }
  .mt-mini, .mt-tag { height: 34px; }
  .mt-act { height: 36px; }
  .set-seg button { height: 34px; }
  label.check input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
}


/* ⌨️ 키보드 (휴대폰 · js/kb.js): 판 · 가운데 창의 입력 칸을 쓰는 동안 그 판을 "지금 보이는 곳"(키보드 위)에 맞춤
   (판의 위쪽 · 목록이 키보드나 화면 밖으로 가려지지 않게) · 독 · 위쪽 막대 · 책상 등은 잠깐 숨김 */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px), (pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
  body.kb-on #toolbar, body.kb-on #act-btn, body.kb-on .pad, body.kb-on #joins, body.kb-on #help, body.kb-on #desk, body.kb-on #topbar,
  body.kb-on #minimap-wrap, body.kb-on #session-call, body.kb-on #mt-pop, body.kb-on #chat, body.kb-on #more-pop { visibility: hidden; }
  body.kb-on .sheet.kb-host, body.kb-on #fd-side.sheet.kb-host, body.kb-on #mt-side.sheet.kb-host {
    bottom: calc(max(var(--kbs, 0px), var(--kbs-sb, var(--safe-b))) + 6px);
    height: min(var(--sheet-h, 66vh), calc(var(--kbh, 100vh) - 12px));
  }
  body.kb-on #modal.kb-host { top: var(--kbt, 0px); bottom: auto; height: var(--kbh, 100%); padding: 8px; }
  body.kb-on #modal.kb-host .modal-card { max-height: 100%; }
  /* 🖥 내 책상 칸 (지금 하는 일 · 할 일 · 메모)에 쓰는 동안: 책상이 보이는 곳(키보드 위)을 다 씀
     안드로이드 크롬은 키보드로 화면이 줄면 책상 안 스크롤 칸의 흐림(backdrop-filter) 카드를 못 그려서 머리줄만 남던 것 → 쓰는 동안은 흐림 없이 진한 바탕 */
  /* 폭은 화면 그대로: 세로 휴대폰도 키보드가 올라오면 화면이 가로로 넓은 모양이 돼서 가로 휴대폰 규칙(책상 62vw)에 걸려 칸이 쪼그라들던 것 */
  body.kb-on #desk.kb-host { visibility: visible; top: calc(var(--kbt, 0px) + 8px) !important; max-height: calc(var(--kbh, 100vh) - 16px) !important; left: 8px; right: 8px; width: auto; }
  body.kb-on #desk.kb-host .dz-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(34, 30, 52, 0.95); }
}

/* 🙋 안내원 지민 (js/guide.js) — AI 표시 · 채팅 줄 · 눌러야 할 곳 가리키기 */
.ai-chip {
  display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 999px; border: 1px solid rgba(190, 178, 255, 0.6);
  background: rgba(124, 108, 255, 0.28); color: #e2dcff; font-family: var(--font); font-style: normal; font-size: 10px; font-weight: 800;
  line-height: 14px; letter-spacing: 0.02em; vertical-align: 1px; text-shadow: none;
}
h2 .ai-chip { font-size: 11px; line-height: 16px; vertical-align: 3px; margin-left: 6px; }
.mt-nm .ai-chip, .mt-mid .ai-chip { flex: none; margin-left: 4px; }
.chat-line.guide .chat-nick { color: #c9bcff; }
.chat-line.guide .t { color: #efeaff; }
.gd-point { outline: 2px solid #ffd34e !important; outline-offset: 2px; animation: gd-pulse 1.1s ease-in-out infinite; }
@keyframes gd-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 211, 78, 0); } 50% { box-shadow: 0 0 0 7px rgba(255, 211, 78, 0.38); } }
.gd-finger {
  position: fixed; z-index: 999; width: 30px; text-align: center; font-size: 26px; line-height: 30px; pointer-events: none;
  animation: gd-bob 0.9s ease-in-out infinite; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55));
}
@keyframes gd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .gd-point, .gd-finger { animation: none; } }

/* ── 💼 회의실 · 🍸 홈바 영상 통화 (js/live.js) — 구글 미트 · 줌처럼으로 시작 → 아래 "💬 디스코드식" 이 색 · 칸 · 단추 · 막대를 덮어씀 ──────────────
   회의 화면 (#live.full): 맵을 다 덮는 어두운 화면 · 칸은 .lv-tiles 안에 절대 위치 (js 가 자리 · 크기를 정함 · 바뀌면 부드럽게 옮겨 감)
   아래 막대: 왼쪽 시계 · 방 이름 · 🔖 예약 / 가운데 🎤 📷 (끄면 빨강) 🖥 ⋮ 📞 (빨강) / 오른쪽 👥 💬 🗺
   들어가면 영상 띠 (#live.strip): 맵은 그대로 · 위쪽 가운데 작은 칸 줄 + 🎤 📷 ⚙ [크게 보기] → 회의 화면 (#live.full) · 📺 문서 PIP 창 안 (#live.in-pip) */
#live {
  --lv-bg: #16141f; --lv-tile: #2c2939; --lv-btn: #383447; --lv-btn-h: #46415a; --lv-red: #ea4335; --lv-red-h: #d33a2c;
  --lv-blue: #8ab4f8; --lv-text: #eeebf6; --lv-dim: #aaa4bd;
  position: fixed; z-index: 9; display: flex; flex-direction: column; color: var(--lv-text); pointer-events: auto;
}
#live.hidden { display: none; }
#live.full { inset: 0; background: var(--lv-bg); }
#live .lv-main { position: relative; flex: 1; min-height: 0; margin: 16px 16px 0; }
body.lv-chat #live.full .lv-main { margin-right: 372px; }
#live .lv-tiles { position: absolute; inset: 0; }
#live .lv-tile {
  position: absolute; left: 0; top: 0; overflow: hidden; border-radius: 14px; background: var(--lv-tile);
  transition: transform 0.24s ease, width 0.24s ease, height 0.24s ease;
}
#live .lv-tile.fresh { transition: none; }
#live .lv-tile.off { display: none; }
#live .lv-tile.float { z-index: 2; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); }
#live .lv-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#live .lv-tile.me video { transform: scaleX(-1); }
#live .lv-tile.nocam video { visibility: hidden; }
#live .lv-face {
  position: absolute; left: 50%; top: 50%; width: clamp(40px, 24%, 176px); height: auto; aspect-ratio: 1; transform: translate(-50%, -50%);
  image-rendering: pixelated; border-radius: 50%; background: rgba(255, 255, 255, 0.07); display: none;
}
#live .lv-tile.main .lv-face { width: clamp(64px, 20%, 200px); }
#live .lv-tile.nocam .lv-face { display: block; }
#live .lv-tile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px transparent; pointer-events: none; transition: box-shadow 0.15s; }
#live .lv-tile.talk::after { box-shadow: inset 0 0 0 3px #5fe08c; }
#live .lv-tile.float::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
#live .lv-tile.float.talk::after { box-shadow: inset 0 0 0 3px #5fe08c; }
#live .lv-name {
  position: absolute; left: 12px; bottom: 10px; max-width: calc(100% - 24px); font-size: 14px; line-height: 1.3; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#live .lv-tile.small .lv-name { left: 8px; bottom: 6px; max-width: calc(100% - 16px); font-size: 12px; }
#live .lv-mute, #live .lv-pinmark {
  position: absolute; top: 10px; width: 28px; height: 28px; border-radius: 50%; display: none; place-items: center; background: rgba(22, 20, 31, 0.62); color: #fff;
}
#live .lv-mute { right: 10px; }
#live .lv-pinmark { left: 10px; }
#live .lv-mute .lv-ic svg, #live .lv-pinmark .lv-ic svg { width: 16px; height: 16px; }
#live .lv-tile.small .lv-mute, #live .lv-tile.small .lv-pinmark { top: 6px; width: 22px; height: 22px; }
#live .lv-tile.small .lv-mute { right: 6px; }
#live .lv-tile.small .lv-pinmark { left: 6px; }
#live .lv-tile.small .lv-mute .lv-ic svg, #live .lv-tile.small .lv-pinmark .lv-ic svg { width: 13px; height: 13px; }
#live .lv-tile.muted .lv-mute, #live .lv-tile.pinned .lv-pinmark { display: grid; }
#live .lv-state { position: absolute; inset: 0; display: none; place-items: center; font-size: 13px; color: var(--lv-dim); background: rgba(22, 20, 31, 0.5); }
#live .lv-tile.wait .lv-state { display: grid; }
#live .lv-hover {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: rgba(22, 20, 31, 0.78); opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
@media (hover: hover) { #live .lv-tile:hover .lv-hover { opacity: 1; pointer-events: auto; } }
#live .lv-tile.touched .lv-hover { opacity: 1; pointer-events: auto; }
#live .lv-hbtn { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: #fff; cursor: pointer; }
#live .lv-hbtn:hover { background: rgba(255, 255, 255, 0.14); }
#live .lv-hbtn.on { background: var(--lv-blue); color: #12141c; }
#live .lv-tile.small .lv-hbtn { width: 32px; height: 32px; }
#live .lv-tile.small .lv-hbtn .lv-ic svg { width: 17px; height: 17px; }
#live .lv-stile { background: #000; }
#live .lv-stile video { object-fit: contain; }
#live .lv-over { display: grid; place-items: center; font-size: 16px; font-weight: 800; color: var(--lv-text); background: #3a3650; cursor: pointer; }
#live .lv-tile:fullscreen { transform: none !important; width: 100vw !important; height: 100vh !important; border-radius: 0; }

/* 위쪽 알림: 내 화면 공유 중 [공유 중지] · 얼굴 (홈바) · 혼자 · 소리 켜기 */
#live .lv-tops {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: max-content; max-width: calc(100% - 24px); pointer-events: none;
}
#live .lv-tops > * { pointer-events: auto; }
#live .lv-tops .hidden { display: none; }
#live .lv-banner {
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--lv-blue); color: #12141c;
  font-size: 14px; font-weight: 800; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
#live .lv-banner .lv-ic svg { width: 19px; height: 19px; }
#live .lv-banner button { flex: none; border: 0; border-radius: 999px; padding: 8px 14px; background: #12141c; color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
#live .lv-warn { padding: 9px 16px; border-radius: 999px; background: rgba(234, 67, 53, 0.94); color: #fff; font-size: 14px; font-weight: 800; }
#live .lv-tap { border: 0; border-radius: 999px; padding: 10px 18px; background: var(--sun); color: var(--ink); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }

/* 아래 막대 */
#live .lv-bar {
  flex: none; height: calc(80px + var(--safe-b)); padding: 0 20px var(--safe-b);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px;
}
#live .lv-left { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 15px; white-space: nowrap; }
#live .lv-sep { flex: none; width: 1px; height: 18px; background: rgba(255, 255, 255, 0.28); }
#live .lv-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#live .lv-roomslot { flex: none; display: flex; }
#live .lv-room { height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--lv-text); font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; }
#live .lv-room:hover { background: rgba(255, 255, 255, 0.16); }
#live .lv-room.booked { background: rgba(255, 179, 71, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 179, 71, 0.55); }
#live .lv-room.mine { background: rgba(95, 224, 192, 0.2); box-shadow: inset 0 0 0 1px rgba(95, 224, 192, 0.65); }
#live .lv-room.hidden { display: none; }
/* 🔖 예약 · 🔒 잠금: 막대의 큰 단추 (🎤 📷 와 같은 크기) · 위쪽 막대 글자 칩은 예약됐을 때만 (누가 언제까지) */
#live .lv-top .lv-room:not(.booked) { display: none; }
#live .lv-bar .lv-cbtn.lv-book.booked:not(.off):not(.lv-expand) { background: rgba(255, 179, 71, 0.22); color: #ffc46b; box-shadow: inset 0 0 0 1.5px rgba(255, 179, 71, 0.6); }
#live .lv-bar .lv-cbtn.lv-book.mine:not(.off):not(.lv-expand) { background: rgba(95, 224, 192, 0.2); color: #6fe6c6; box-shadow: inset 0 0 0 1.5px rgba(95, 224, 192, 0.65); }
#live.in-pip .lv-cbtn.lv-book { display: none; }
#live .lv-center { display: flex; align-items: center; gap: 10px; }
#live .lv-right { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
#live .lv-ic { display: inline-grid; place-items: center; line-height: 0; }
#live .lv-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#live .lv-ic svg .fill { fill: currentColor; stroke: none; }
#live .lv-cbtn {
  flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--lv-btn); color: var(--lv-text); cursor: pointer; transition: background 0.12s;
}
#live .lv-cbtn:hover { background: var(--lv-btn-h); }
#live .lv-cbtn:focus-visible, #live .lv-caret:focus-visible, #live .lv-ibtn:focus-visible, #live .lv-hbtn:focus-visible { outline: 2px solid var(--lv-blue); outline-offset: 2px; }
#live .lv-cbtn.off { background: var(--lv-red); color: #fff; }
#live .lv-cbtn.off:hover { background: var(--lv-red-h); }
#live .lv-cbtn.busy { opacity: 0.6; cursor: progress; }
/* 🤫 홈바 집중 시간: 🎤 는 쉬는 시간에만 (빨강 대신 잠긴 회색 · 누르면 까닭) */
#live .lv-cbtn.off.hush, #live .lv-cbtn.off.hush:hover { background: var(--lv-btn); color: var(--lv-text); opacity: 0.55; }
#live .lv-cbtn:disabled { cursor: default; }
#live .lv-cbtn.hidden { display: none; }
#live .lv-cbtn.lv-share.on { background: var(--lv-blue); color: #12141c; }
#live .lv-cbtn.lv-leave { width: 64px; border-radius: 999px; background: var(--lv-red); color: #fff; }
#live .lv-cbtn.lv-leave:hover { background: var(--lv-red-h); }
#live .lv-cbtn.lv-leave .lv-ic svg { width: 26px; height: 26px; }
#live .lv-cbtn.lv-expand, #live .lv-cbtn.lv-set { display: none; }
#live .lv-expand .lv-t { display: none; }
/* 🎤 · 📷: [⌃ 장치] [단추] 한 덩어리 (미트처럼) */
#live .lv-pair { flex: none; display: flex; align-items: center; border-radius: 999px; background: var(--lv-btn); }
#live .lv-pair .lv-cbtn:not(.off) { background: #4a4560; }
#live .lv-pair .lv-cbtn:not(.off):hover { background: #57516f; }
#live .lv-caret { width: 30px; height: 48px; padding: 0 0 0 4px; border: 0; border-radius: 999px 0 0 999px; display: grid; place-items: center; background: transparent; color: var(--lv-text); cursor: pointer; }
#live .lv-caret .lv-ic svg { width: 18px; height: 18px; }
#live .lv-caret:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
#live .lv-ibtn {
  position: relative; flex: none; height: 44px; min-width: 44px; padding: 0 12px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; color: var(--lv-text); font: inherit; font-size: 14px; cursor: pointer;
}
#live .lv-ibtn:hover { background: rgba(255, 255, 255, 0.1); }
#live .lv-ibtn.on { background: rgba(138, 180, 248, 0.2); color: var(--lv-blue); }
#live .lv-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--lv-blue); color: #12141c; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
#live .lv-badge.hidden { display: none; }

/* ⋮ 더보기 · 👥 참여한 사람 */
#live .lv-menu {
  position: absolute; z-index: 6; min-width: 260px; max-width: calc(100% - 16px); max-height: calc(100% - 100px); overflow-y: auto; padding: 8px 0;
  border-radius: 14px; background: #2a2738; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
}
#live .lv-menu.hidden { display: none; }
#live .lv-mh { padding: 8px 18px 6px; font-size: 12.5px; color: var(--lv-dim); }
#live .lv-menu hr { margin: 6px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
#live .lv-mrow { display: flex; align-items: center; gap: 14px; width: 100%; padding: 9px 18px; border: 0; background: none; color: var(--lv-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
#live .lv-mrow:hover, #live .lv-mrow:focus-visible { background: rgba(255, 255, 255, 0.08); outline: none; }
#live .lv-mi { flex: none; width: 22px; display: grid; place-items: center; color: var(--lv-blue); font-weight: 800; }
#live .lv-mi .lv-ic svg { width: 20px; height: 20px; }
#live .lv-mt { display: flex; flex-direction: column; min-width: 0; }
#live .lv-mt small { font-size: 12px; color: var(--lv-dim); }
#live .lv-prow { display: flex; align-items: center; gap: 10px; padding: 8px 18px; font-size: 14px; }
#live .lv-pn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#live .lv-prow small { flex: none; font-size: 12px; color: var(--lv-dim); }
#live .lv-pi { flex: none; display: grid; place-items: center; color: var(--lv-dim); }
#live .lv-pi .lv-ic svg { width: 18px; height: 18px; }
#live .lv-pi.off { color: var(--lv-red); }

/* 💬 채팅을 닫아 둔 동안 온 이 방 말 (잠깐 · 누르면 채팅) */
#live .lv-peek {
  position: absolute; right: 20px; bottom: calc(92px + var(--safe-b)); z-index: 5; display: flex; flex-direction: column; gap: 2px; max-width: min(320px, calc(100% - 40px));
  padding: 10px 14px; border: 0; border-radius: 14px; background: #2a2738; color: var(--lv-text); font: inherit; font-size: 13.5px; text-align: left;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); cursor: pointer;
}
#live .lv-peek b { color: var(--lv-blue); font-size: 12.5px; }
#live .lv-peek span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
#live .lv-peek.hidden { display: none; }

/* 💬 회의 화면 채팅: 원래 채팅 칸을 오른쪽에 (닫아 두면 숨김) */
body.lv-full #chat { display: none; }
body.lv-full.lv-chat #chat { display: flex; position: fixed; left: auto; right: 16px; top: 16px; bottom: calc(96px + var(--safe-b)); width: 340px; z-index: 10; }
body.lv-full.lv-chat #chat .chat-log { flex: 1; height: auto; min-height: 0; }
body.lv-full #chat .cr-grip { display: none; }

/* 🎞 영상 띠 (들어가면 · 🗺 맵 보기 · Esc): 맵 위 위쪽 가운데 · 칸 한 줄 (자리 · 크기는 js) + 🎤 📷 ⚙ [⤢ 크게 보기] (+ 🔖 예약)
   칸을 누르면 회의 화면 · 알림 (공유 중 · 얼굴 · 혼자 · 소리 켜기) 은 띠 바로 아래 */
#live.strip {
  flex-direction: row; align-items: center; gap: 8px; padding: 8px; border-radius: 18px;
  background: rgba(22, 20, 31, 0.92); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#live.strip .lv-main { flex: none; margin: 0; }
#live.strip .lv-tile { border-radius: 10px; cursor: pointer; transition: none; }
#live.strip .lv-tile:hover::after { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); }
#live.strip .lv-tile.talk::after { box-shadow: inset 0 0 0 3px #5fe08c; }
#live.strip .lv-face { top: 42%; width: clamp(22px, 36%, 44px); }
#live.strip .lv-hover, #live.strip .lv-pinmark, #live.strip .lv-state { display: none; }
#live.strip .lv-over { font-size: 13px; }
#live.strip > .lv-tops { left: 50%; top: calc(100% + 10px); transform: translateX(-50%); align-items: center; width: max-content; max-width: min(720px, calc(100vw - 24px)); gap: 6px; }
#live.strip.low > .lv-tops { top: auto; bottom: calc(100% + 10px); flex-direction: column-reverse; }
/* ⠿ 손잡이 · 빈 곳을 끌어서 옮김 (js dragStrip · 자리는 이 브라우저에 기억 · 손잡이 두 번 누르면 위쪽 가운데로) */
#live .lv-grip { display: none; }
#live.strip { cursor: grab; touch-action: none; }
#live.strip .lv-grip {
  display: grid; place-items: center; flex: none; width: 22px; height: 44px; margin-right: -2px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: rgba(255, 255, 255, 0.5); cursor: grab; touch-action: none;
}
#live.strip .lv-grip:hover, #live.strip .lv-grip:focus-visible { color: #ffffff; background: rgba(255, 255, 255, 0.1); outline: none; }
#live.strip .lv-grip .lv-ic svg { width: 16px; height: 16px; }
#live.strip.dragging, #live.strip.dragging * { cursor: grabbing !important; }
#live.strip.dragging { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(138, 180, 248, 0.65); }
#live.strip .lv-banner { font-size: 13px; padding: 4px 4px 4px 12px; }
#live.strip .lv-banner button { padding: 6px 12px; font-size: 12.5px; }
#live.strip .lv-warn { padding: 7px 14px; font-size: 13px; }
#live.strip .lv-bar { height: auto; padding: 0 0 0 8px; border-left: 1px solid rgba(255, 255, 255, 0.14); display: flex; align-items: center; gap: 6px; }
#live.strip .lv-center { gap: 6px; }
#live.strip .lv-left { order: 3; }
#live.strip .lv-clock, #live.strip .lv-sep, #live.strip .lv-title, #live.strip .lv-right, #live.strip .lv-caret,
#live.strip .lv-cbtn.lv-share, #live.strip .lv-cbtn.lv-more, #live.strip .lv-cbtn.lv-leave, #live.strip .lv-peek { display: none; }
#live.strip .lv-pair { background: none; }
#live.strip .lv-cbtn { width: 44px; height: 44px; }
#live.strip .lv-cbtn:not(.off):not(.lv-expand) { background: var(--lv-btn); }
#live.strip .lv-cbtn.lv-set { display: grid; }
#live.strip .lv-cbtn.lv-expand { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 16px 0 14px; border-radius: 999px; background: var(--lv-blue); color: #12141c; font: inherit; font-size: 14.5px; font-weight: 800; white-space: nowrap; }
#live.strip .lv-cbtn.lv-expand:hover { background: #a6c6fa; }
#live.strip .lv-expand .lv-t { display: inline; }
#live.strip .lv-ic svg { width: 20px; height: 20px; }
body.lv-strip #session-call { top: var(--live-b, 180px); }

/* 📺 문서 PIP 창 안: 창에 꽉 · 막대는 🎤 📷 🖥 📞 + 탭으로 */
body.pip-body { margin: 0; background: #16141f; color: #eeebf6; overflow: hidden; }
#live.in-pip, #live.in-pip.strip { position: fixed; inset: 0; left: 0 !important; top: 0 !important; width: auto; padding: 0; flex-direction: column; align-items: stretch; gap: 0; border: 0; border-radius: 0; box-shadow: none; background: #16141f; }
#live.in-pip .lv-main { flex: 1; height: auto; margin: 8px 8px 0; cursor: default; }
#live.in-pip .lv-bar { border-left: 0; }
#live.in-pip .lv-cbtn.lv-set, #live.in-pip .lv-expand .lv-t, #live.in-pip .lv-cbtn.lv-share { display: none; }
#live.in-pip .lv-cbtn.lv-expand { width: 42px; padding: 0; border-radius: 50%; background: var(--lv-btn); color: var(--lv-text); justify-content: center; }
#live.in-pip .lv-tile { border-radius: 10px; }
#live.in-pip .lv-bar { height: 60px; padding: 0 8px; grid-template-columns: 1fr; }
#live.in-pip .lv-left, #live.in-pip .lv-right, #live.in-pip .lv-caret, #live.in-pip .lv-cbtn.lv-more, #live.in-pip .lv-peek { display: none; }
#live.in-pip .lv-center { justify-content: center; gap: 8px; }
#live.in-pip .lv-pair { background: none; }
#live.in-pip .lv-cbtn { width: 42px; height: 42px; }
#live.in-pip .lv-cbtn.lv-leave { width: 54px; }
#live.in-pip .lv-cbtn.lv-expand { display: grid; }

/* 휴대폰: 막대는 가운데 🎤 📷 ⋮ 📞 + 오른쪽 💬 🗺 (화면 공유는 컴퓨터만) */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px), (pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
  #live.full .lv-main, body.lv-chat #live.full .lv-main { margin: calc(8px + var(--safe-t, 0px)) 8px 0; }
  #live.full .lv-bar { height: calc(68px + var(--safe-b)); padding: 0 8px var(--safe-b); display: flex; justify-content: space-between; gap: 4px; }
  #live .lv-left, #live .lv-caret, #live .lv-ibtn.lv-peopleb, #live .lv-minib .lv-t { display: none; }
  #live .lv-center { gap: 8px; }
  #live .lv-cbtn { width: 46px; height: 46px; }
  #live .lv-pair { background: none; }
  #live .lv-ibtn { min-width: 42px; padding: 0 9px; }
  #live .lv-name { font-size: 12.5px; }
  #live .lv-banner { font-size: 12.5px; }
  #live .lv-peek { right: 8px; bottom: calc(76px + var(--safe-b)); }
  body.lv-full.lv-chat #chat { left: 8px; right: 8px; top: auto; width: auto; bottom: calc(76px + var(--safe-b)); }
  body.lv-full.lv-chat #chat .chat-log { flex: none; height: min(34vh, 240px); }
  #live.strip { padding: 6px; gap: 6px; border-radius: 14px; }
  #live.strip .lv-bar { padding-left: 6px; gap: 6px; }
  #live.strip .lv-center { gap: 6px; }
  #live.strip .lv-cbtn { width: 38px; height: 38px; }
  #live.strip .lv-cbtn.lv-set, #live.strip .lv-expand .lv-t { display: none; }
  #live.strip .lv-cbtn.lv-expand { width: 38px; padding: 0; border-radius: 50%; justify-content: center; }
  #live.strip .lv-ic svg { width: 18px; height: 18px; }
  #live.strip .lv-name { left: 4px; bottom: 2px; font-size: 10px; }
  #live.strip .lv-mute { display: none !important; }
  #live.strip > .lv-tops { top: calc(100% + 8px); max-width: calc(100vw - 24px); }
  #live.strip.low > .lv-tops { top: auto; bottom: calc(100% + 8px); }
  #live.strip .lv-grip { width: 18px; height: 38px; }
  /* 두 줄 (세 명 이상 · js stripRows): 위 줄 다른 사람 4칸 · 아래 줄 ⠿ 나 +N명 … 🎤 📷 ⤢ — 칸 자리는 js, ⠿ · 단추는 여기서 아래 줄 양 끝에 */
  #live.strip.two { padding: 6px; }
  #live.strip.two .lv-grip, #live.strip.two .lv-bar { position: absolute; bottom: calc(6px + (var(--lv-th, 47px) - 38px) / 2); }
  #live.strip.two .lv-grip { left: 6px; margin: 0; }
  #live.strip.two .lv-bar { right: 6px; padding-left: 0; border-left: 0; }
  #live.strip.two .lv-over { border-radius: 16px; font-size: 13px; }
}
/* ══ 💬 디스코드식 (회의 화면 · 영상 띠 · 휴대폰 · PIP 모두 같은 칸 · 같은 단추) ═══════════════════════════════
   칸: 모서리 8px · 이름표 = 왼쪽 아래 어두운 알약 (마이크를 끄면 이름 앞 빨간 🎤 · 나만 소리 끄면 🔇) · 말하면 칸 바깥 초록 테두리
       카메라를 끈 사람은 얼굴 동그라미에 초록 고리 · 공유 화면은 LIVE · 마우스를 올리면 오른쪽 위에 📌 🔊 (⛶ 📺)
   위쪽 막대 (.lv-top): 📶 방 이름 · N명 · 시계 · 🔖 예약 …… [그리드 | 포커스] │ 👥 N · 💬 — 영상 띠에선 "음성 연결됨 · 방 · N명" 한 줄
   아래 막대: 가운데 [📷 ⌃] 🖥 ⋮ │ [🎤 ⌃] 📞 · 오른쪽 📺 PIP · 🗺 맵 보기 — 단추는 둥근 네모 · 꺼짐은 빨간 아이콘 (빨간 바탕 아님)
   강조 (켜짐 · 크게 보기 · 배지): 앱 노랑 (--sun) */
#live {
  --lv-bg: #0f0e15; --lv-tile: #24212f; --lv-btn: #2b2838; --lv-btn-h: #363244; --lv-red: #f0525a; --lv-red-h: #e0434b; --lv-redbg: rgba(240, 82, 90, 0.16);
  --lv-acc: #ffd34e; --lv-acc-h: #ffde75; --lv-ink: #1b1828; --lv-panel: #1a1823; --lv-green: #3fd17a; --lv-line: rgba(255, 255, 255, 0.08);
  --lv-text: #f2f0f7; --lv-dim: #a7a1b8; --lv-blue: var(--lv-acc);
}
#live .lv-main { margin: 4px 16px 0; }
/* 칸 */
#live .lv-tile, #live.strip .lv-tile, #live.in-pip .lv-tile { border-radius: 8px; }
#live .lv-stile { background: #0b0a10; }
#live .lv-tile.talk::after, #live.strip .lv-tile.talk::after, #live .lv-tile.float.talk::after { box-shadow: inset 0 0 0 2px var(--lv-green); }
#live .lv-tile.talk { box-shadow: 0 0 0 2px var(--lv-green), 0 0 0 5px rgba(63, 209, 122, 0.22); }
#live .lv-tile.nocam.talk::after { box-shadow: inset 0 0 0 2px rgba(63, 209, 122, 0.45); }
#live .lv-tile.nocam.talk .lv-face { box-shadow: 0 0 0 3px var(--lv-tile), 0 0 0 6px var(--lv-green); }
#live .lv-name {
  left: 8px; bottom: 8px; max-width: calc(100% - 16px); display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; box-sizing: border-box;
  border-radius: 6px; background: rgba(10, 9, 14, 0.66); font-size: 13px; line-height: 1; text-shadow: none;
}
#live .lv-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#live .lv-tmute, #live .lv-thush { display: none; flex: none; place-items: center; color: var(--lv-red); }
#live .lv-thush { color: var(--lv-dim); }
#live .lv-tmute .lv-ic svg, #live .lv-thush .lv-ic svg { width: 15px; height: 15px; stroke-width: 2.2; }
#live .lv-tile.muted .lv-tmute, #live .lv-tile.hushed .lv-thush { display: grid; }
#live .lv-tile.muted .lv-mute { display: none; }
#live .lv-tile.small .lv-name { left: 6px; bottom: 6px; max-width: calc(100% - 12px); height: 20px; padding: 0 6px; font-size: 11.5px; gap: 3px; }
#live .lv-tile.small .lv-tmute .lv-ic svg, #live .lv-tile.small .lv-thush .lv-ic svg { width: 13px; height: 13px; }
#live .lv-live {
  position: absolute; left: 8px; top: 8px; height: 20px; padding: 0 7px; border-radius: 4px; display: grid; place-items: center; pointer-events: none;
  background: var(--lv-red); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
}
#live .lv-tile.small .lv-live { left: 6px; top: 6px; height: 18px; padding: 0 5px; }
#live .lv-stile .lv-pinmark { left: 58px; }
#live .lv-mute, #live .lv-pinmark { border-radius: 6px; background: rgba(10, 9, 14, 0.66); }
#live .lv-hover { left: auto; right: 8px; top: 8px; transform: none; gap: 4px; padding: 0; border-radius: 0; background: none; }
#live .lv-tile.small .lv-hover { right: 6px; top: 6px; }
#live .lv-hbtn { width: 34px; height: 34px; border-radius: 8px; background: rgba(10, 9, 14, 0.72); }
#live .lv-hbtn:hover { background: rgba(10, 9, 14, 0.92); }
#live .lv-hbtn.on { background: var(--lv-acc); color: var(--lv-ink); }
#live .lv-tile.small .lv-hbtn { width: 28px; height: 28px; }
#live .lv-over { border-radius: 8px; background: var(--lv-btn); font-weight: 700; }
/* 위쪽 막대 */
#live .lv-top { flex: none; display: flex; align-items: center; gap: 10px; height: calc(56px + var(--safe-t, 0px)); padding: var(--safe-t, 0px) 16px 0; box-sizing: border-box; min-width: 0; }
#live .lv-sig { flex: none; display: grid; color: var(--lv-green); }
#live .lv-sig .lv-ic svg { width: 18px; height: 18px; stroke-width: 2.4; }
#live .lv-conn { display: none; flex: none; color: var(--lv-green); font-size: 12px; font-weight: 700; white-space: nowrap; }
#live .lv-tname { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
#live .lv-top .lv-title { font-size: 15px; font-weight: 700; white-space: nowrap; }
#live .lv-sub { font-size: 13px; color: var(--lv-dim); white-space: nowrap; }
#live .lv-fill { flex: 1; }
#live .lv-top .lv-room:not(.booked):not(.mine) { background: var(--lv-panel); color: var(--lv-dim); }
#live .lv-top .lv-room { height: 28px; border-radius: 6px; font-size: 12px; }
#live .lv-seg { flex: none; display: flex; padding: 3px; border-radius: 10px; background: var(--lv-panel); }
#live .lv-segb { height: 32px; padding: 0 10px; border: 0; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--lv-dim); font: inherit; font-size: 13px; cursor: pointer; }
#live .lv-segb .lv-ic svg { width: 18px; height: 18px; }
#live .lv-segb:hover { color: var(--lv-text); }
#live .lv-segb.on { background: var(--lv-btn); color: var(--lv-text); }
#live .lv-top .lv-sep { flex: none; width: 1px; height: 22px; background: var(--lv-line); }
#live .lv-top .lv-ibtn { height: 36px; min-width: 36px; padding: 0 10px; border-radius: 8px; color: var(--lv-dim); }
#live .lv-top .lv-ibtn:hover, #live .lv-top .lv-ibtn.on { background: var(--lv-btn); color: var(--lv-text); }
#live .lv-top .lv-ibtn .lv-ic svg { width: 20px; height: 20px; }
#live .lv-downb { display: none; }
/* 아래 막대 */
#live .lv-bar { height: calc(88px + var(--safe-b)); padding: 0 16px var(--safe-b); }
#live .lv-cbtn { border-radius: 14px; }
#live .lv-cbtn.off { background: var(--lv-redbg); color: var(--lv-red); }
#live .lv-cbtn.off:hover { background: rgba(240, 82, 90, 0.26); }
#live .lv-cbtn.lv-share.on { background: var(--lv-acc); color: var(--lv-ink); }
#live .lv-cbtn.lv-leave { width: 64px; border-radius: 14px; background: var(--lv-red); color: #fff; }
#live .lv-cbtn.lv-leave:hover { background: var(--lv-red-h); }
#live .lv-cbtn.lv-chat2 { display: none; position: relative; }
#live .lv-pair { border-radius: 14px; background: var(--lv-btn); overflow: hidden; }
#live .lv-pair .lv-cbtn { border-radius: 0; }
#live .lv-pair .lv-cbtn:not(.off) { background: transparent; }
#live .lv-pair .lv-cbtn:not(.off):hover { background: var(--lv-btn-h); }
#live .lv-caret { width: 26px; padding: 0; border-radius: 0; border-left: 1px solid var(--lv-line); color: var(--lv-dim); }
#live .lv-caret:hover { background: var(--lv-btn-h); }
#live .lv-csep { flex: none; width: 1px; height: 28px; margin: 0 6px; background: var(--lv-line); }
#live .lv-bar .lv-right { gap: 6px; }
#live .lv-bar .lv-pipb { height: 40px; min-width: 40px; padding: 0; border-radius: 10px; color: var(--lv-dim); }
#live .lv-bar .lv-pipb.hidden { display: none; }
#live .lv-bar .lv-minib { height: 40px; padding: 0 14px; border-radius: 10px; background: var(--lv-btn); font-size: 13px; }
#live .lv-bar .lv-minib:hover, #live .lv-bar .lv-pipb:hover { background: var(--lv-btn-h); color: var(--lv-text); }
#live .lv-bar .lv-minib .lv-ic svg { width: 18px; height: 18px; }
#live .lv-ibtn.on { background: var(--lv-btn); color: var(--lv-text); }
#live .lv-badge { background: var(--lv-red); color: #fff; }
/* 포커스: 참여자 숨기기 */
#live .lv-rowbtn {
  position: absolute; left: 50%; z-index: 2; transform: translateX(-50%); height: 24px; padding: 0 12px; border: 0; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px; background: var(--lv-panel); color: var(--lv-dim); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
#live .lv-rowbtn:hover { background: var(--lv-btn); color: var(--lv-text); }
#live .lv-rowbtn .lv-ic svg { width: 14px; height: 14px; }
#live .lv-rowbtn.hidden, #live.strip .lv-rowbtn { display: none; }
/* 메뉴 (⋮ · 👥 참여 중 · 칸 메뉴) */
#live .lv-menu { border-radius: 10px; background: var(--lv-panel); border: 1px solid var(--lv-line); }
#live .lv-mh { font-size: 12px; letter-spacing: 0.02em; }
#live .lv-mi { color: var(--lv-dim); }
#live .lv-mhead { display: flex; align-items: center; gap: 8px; padding: 6px 16px 4px; font-size: 14px; }
#live .lv-av { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--lv-btn); color: var(--lv-text); font-size: 12px; font-weight: 700; }
#live .lv-av.talk { box-shadow: 0 0 0 2px var(--lv-panel), 0 0 0 4px var(--lv-green); }
#live .lv-vol { display: block; padding: 8px 16px 10px; }
#live .lv-volh { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 12px; color: var(--lv-dim); }
#live .lv-vol input { width: 100%; margin: 0; accent-color: var(--lv-acc); }
#live .lv-prow { width: 100%; box-sizing: border-box; border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 6px 16px; }
#live button.lv-prow { cursor: pointer; }
#live button.lv-prow:hover, #live button.lv-prow:focus-visible { background: rgba(255, 255, 255, 0.06); outline: none; }
#live .lv-livechip { flex: none; height: 18px; padding: 0 6px; border-radius: 4px; display: grid; place-items: center; background: var(--lv-red); color: #fff; font-size: 11px; font-weight: 800; }
#live .lv-peek { bottom: calc(100px + var(--safe-b)); border-radius: 10px; background: var(--lv-panel); }
body.lv-full.lv-chat #chat { top: calc(60px + var(--safe-t, 0px)); bottom: calc(100px + var(--safe-b)); }
/* 영상 띠: 맨 위 "음성 연결됨" 줄 (⠿ 는 그 오른쪽) · 칸 · 단추는 회의 화면과 같은 모양 */
#live.strip { padding: 30px 8px 8px; border-radius: 12px; background: rgba(15, 14, 21, 0.94); border-color: var(--lv-line); }
#live.strip .lv-top { position: absolute; left: 10px; right: 38px; top: 5px; height: 20px; padding: 0; gap: 6px; }
#live.strip .lv-top > *:not(.lv-sig):not(.lv-conn):not(.lv-tname) { display: none; }
#live.strip .lv-conn { display: inline; }
#live.strip .lv-sig .lv-ic svg { width: 14px; height: 14px; stroke-width: 2.6; }
#live.strip .lv-tname { gap: 4px; font-size: 12px; color: var(--lv-dim); }
#live.strip .lv-tname::before { content: '·'; }
#live.strip .lv-top .lv-title { display: inline; min-width: 0; font-size: 12px; font-weight: 400; color: var(--lv-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#live.strip .lv-sub { font-size: 12px; }
#live.strip .lv-sub::before { content: '· '; }
#live.strip .lv-clockw { display: none; }
#live.strip .lv-grip, #live.strip.two .lv-grip { position: absolute; left: auto; right: 6px; top: 3px; bottom: auto; width: 26px; height: 24px; margin: 0; }
#live.strip .lv-grip .lv-ic svg { width: 14px; height: 14px; }
#live.strip .lv-bar { border-left-color: var(--lv-line); }
#live.strip .lv-micpair { order: -2; }
#live.strip .lv-campair { order: -1; }
#live.strip .lv-csep, #live.strip .lv-cbtn.lv-chat2 { display: none; }
#live.strip .lv-pair { border-radius: 0; overflow: visible; }
#live.strip .lv-cbtn, #live.strip .lv-pair .lv-cbtn { border-radius: 14px; }
#live.strip .lv-cbtn.off { background: var(--lv-redbg); }
#live.strip .lv-cbtn.lv-expand { border-radius: 14px; background: var(--lv-acc); color: var(--lv-ink); font-weight: 700; }
#live.strip .lv-cbtn.lv-expand:hover { background: var(--lv-acc-h); }
#live.strip .lv-name { left: 4px; bottom: 4px; max-width: calc(100% - 8px); height: 18px; padding: 0 5px; gap: 3px; font-size: 11px; }
#live.strip .lv-tmute .lv-ic svg { width: 12px; height: 12px; }
#live.in-pip .lv-top { display: none; }
#live.in-pip .lv-cbtn.lv-expand { border-radius: 14px; }
/* 두 줄 띠 (js stripRows): 휴대폰 · 아이패드 세로 · 좁은 자리 — 단추는 아래 줄 오른쪽 (칸 높이 가운데) · 좁으면 ⚙ 빼고 [크게 보기] 아이콘만 */
#live.strip.two { padding: 30px 6px 6px; }
#live.strip.two .lv-bar { position: absolute; right: 6px; bottom: calc(6px + (var(--lv-th, 47px) - var(--lv-cb, 44px)) / 2); padding-left: 0; border-left: 0; }
#live.strip.two .lv-over { border-radius: 16px; font-size: 13px; }
#live.strip.two.tight .lv-cbtn.lv-set, #live.strip.two.tight .lv-expand .lv-t { display: none; }
#live.strip.two.tight .lv-cbtn.lv-expand { width: 48px; padding: 0; justify-content: center; }
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px), (pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
  #live.strip { padding: 28px 6px 6px; --lv-cb: 38px; }
  #live.strip.two { padding: 28px 6px 6px; }
  /* 🗺 지도를 펴 둔 동안 (js compact): 🎤 📷 ⤢ 는 맨 위 줄 오른쪽 (작게) · 아래 한 줄에 다른 사람 4명 */
  #live.strip.two.compact { padding-top: 44px; }
  #live.strip.two.compact .lv-bar { top: 6px; bottom: auto; right: 34px; }
  #live.strip.two.compact .lv-cbtn { width: 32px; height: 32px; border-radius: 10px; }
  #live.strip.two.compact .lv-cbtn.lv-expand { width: 36px; }
  #live.strip.two.compact .lv-ic svg { width: 16px; height: 16px; }
  #live.strip.two.compact .lv-top { top: 12px; right: 150px; }
  #live.strip.two.compact .lv-grip { top: 10px; }
  #live.strip .lv-top { left: 8px; right: 34px; top: 5px; height: 18px; }
  #live.strip .lv-cbtn { border-radius: 12px; }
  #live.strip .lv-cbtn.lv-expand { width: 44px; border-radius: 12px; }
  #live.strip .lv-name { left: 4px; bottom: 4px; font-size: 11px; }
  /* 회의 화면: 위 막대 [⌄ 맵으로] 방 이름 · N명 [👥] · 2열 칸 · 아래 단추 시트 (글자 붙은 큰 단추) */
  #live.full .lv-top { height: calc(52px + var(--safe-t, 0px)); padding: var(--safe-t, 0px) 4px 0; gap: 4px; }
  #live.full .lv-downb { display: inline-flex; width: 44px; height: 44px; padding: 0; }
  #live.full .lv-downb .lv-ic svg { width: 24px; height: 24px; }
  #live.full .lv-sig, #live.full .lv-top .lv-roomslot, #live.full .lv-seg, #live.full .lv-top .lv-sep, #live.full .lv-top .lv-chatb, #live.full .lv-fill { display: none; }
  #live.full .lv-tname { flex: 1; flex-direction: column; align-items: center; gap: 1px; }
  #live.full .lv-sub { font-size: 11px; }
  #live .lv-top .lv-ibtn.lv-peopleb { display: inline-flex; }
  #live.full .lv-top .lv-peopleb { width: 44px; height: 44px; padding: 0; }
  #live.full .lv-top .lv-count { display: none; }
  #live.full .lv-main, body.lv-chat #live.full .lv-main { margin: 0 8px; }
  #live.full .lv-bar {
    position: relative; height: calc(108px + var(--safe-b)); padding: 14px 10px var(--safe-b); display: flex; align-items: flex-start; justify-content: space-around;
    border-radius: 20px 20px 0 0; background: var(--lv-panel);
  }
  #live.full .lv-bar::before { content: ''; position: absolute; left: 50%; top: 6px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); }
  #live.full .lv-center, #live.full .lv-right, #live.full .lv-pair { display: contents; }
  #live.full .lv-share, #live.full .lv-csep, #live.full .lv-caret, #live.full .lv-bar .lv-pipb, #live.full .lv-cbtn.lv-set, #live.full .lv-cbtn.lv-expand { display: none; }
  #live.full .lv-cbtn, #live.full .lv-bar .lv-minib { position: relative; flex: none; width: 50px; height: 50px; min-width: 0; padding: 0; border-radius: 50%; justify-content: center; }
  #live.full .lv-pair .lv-cbtn:not(.off), #live.full .lv-bar .lv-minib { background: var(--lv-btn); }
  #live.full .lv-cbtn::after, #live.full .lv-bar .lv-minib::after {
    content: attr(data-lab); position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); font-size: 11px; color: var(--lv-dim); white-space: nowrap; pointer-events: none;
  }
  #live.full .lv-cbtn.lv-chat2 { display: grid; }
  #live.full .lv-chat2.on { background: var(--lv-acc); color: var(--lv-ink); }
  #live.full .lv-cam { order: 1; }
  #live.full .lv-mic { order: 2; }
  #live.full .lv-book { order: 2; }
  #live.full .lv-chat2 { order: 3; }
  #live.full .lv-minib { order: 4; }
  #live.full .lv-more { order: 5; }
  #live.full .lv-leave { order: 6; width: 50px; border-radius: 50%; }
  #live.full .lv-chat2 .lv-badge { top: -3px; right: -3px; }
  #live .lv-peek { bottom: calc(118px + var(--safe-b)); }
  body.lv-full.lv-chat #chat { top: auto; bottom: calc(116px + var(--safe-b)); }
}
@media (prefers-reduced-motion: reduce) { #live .lv-tile { transition: none; } }

/* ══ 💼 회의실 (js/rooms.js): 회의 화면 막대의 🔖 예약 단추 (#live .lv-room) · 예약 판 · 🔒 비밀번호 키패드 · 회의실 목록 ══ */
.rm-sheet { display: flex; flex-direction: column; gap: 12px; min-width: min(380px, 100%); }
.rm-head { display: flex; align-items: baseline; gap: 10px; padding-right: 34px; }
.rm-head h2 { margin: 0; font-size: 18px; }
.rm-seats { font-size: 12px; color: var(--muted); }
.rm-say { margin: 0; font-size: 14px; line-height: 1.55; }
.rm-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-row .btn { flex: 1 1 0; min-width: 88px; }
.btn.danger { background: #5a2333; color: #ffd6de; }
/* 💼 회의실 목록 (독 · rooms.js openList): 두 줄 바둑판 · 칸 = [이름 · 자리(사람 있으면 n/자리)] [● 상태] · 칸을 누르면 문 앞까지 */
#modal-card:has(> .rm-list) { width: min(460px, 100%); }
.rm-list { display: flex; flex-direction: column; gap: 14px; }
.rm-lhead { padding-right: 44px; }
.rm-lhead h2 { margin: 0; font-size: 20px; }
.rm-lhead p { margin: 4px 0 0; font-size: 13px; color: var(--g-dim); }
.rm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rm-tile { display: flex; flex-direction: column; gap: 10px; min-height: 76px; padding: 12px 12px 11px 14px; border: 1px solid var(--g-line2); border-radius: 14px; background: var(--g-soft); color: var(--g-hi); font: inherit; text-align: left; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; -webkit-tap-highlight-color: transparent; }
.rm-tile:hover { background: rgba(255, 255, 255, 0.11); border-color: var(--g-line); }
.rm-tile:active { transform: scale(0.98); }
.rm-tile:focus-visible { outline: 2px solid var(--g-mint); outline-offset: 2px; }
.rm-t1 { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.rm-t1 b { min-width: 0; font-family: var(--pixel); font-weight: 400; font-size: 17px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-cap { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--g-dim); }
.rm-cap svg.li { width: 14px; height: 14px; }
.rm-cap.on { color: #ffc56b; font-weight: 700; }
.rm-t2 { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--g-dim); }
.rm-t2 > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #5fe0c0; box-shadow: 0 0 0 3px rgba(95, 224, 192, 0.18); }
.rm-tic svg.li { width: 14px; height: 14px; }
.rm-tile.free .rm-t2 { color: #b9f3e3; }
.rm-tile.busy { border-color: rgba(255, 197, 107, 0.35); }
.rm-tile.busy .rm-dot { background: #ffc56b; box-shadow: 0 0 0 3px rgba(255, 197, 107, 0.18); }
.rm-tile.busy .rm-t2 { color: #ffd9a0; }
.rm-tile.book { border-color: rgba(255, 179, 71, 0.45); }
.rm-tile.book .rm-t2 { color: #ffc56b; }
.rm-tile.mine { border-color: rgba(255, 211, 78, 0.6); background: rgba(255, 211, 78, 0.08); }
.rm-tile.mine .rm-t2 { color: var(--sun); }
.rm-tile.lock { border-color: rgba(255, 123, 138, 0.5); }
.rm-tile.lock .rm-t2 { color: #ff9aa6; }
.rm-foot { margin: 0; font-size: 12px; line-height: 1.5; color: var(--g-dim); text-align: center; word-break: keep-all; }
@media (max-width: 380px) {
  .rm-tile { padding: 11px 10px 10px 12px; }
  .rm-t1 b { font-size: 16px; }
}
.kp { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 6px 2px; }
.kp h2 { margin: 0; font-size: 18px; padding: 0 30px; text-align: center; }
.kp-sub { margin: 0; font-size: 13px; color: var(--muted); text-align: center; line-height: 1.5; }
.kp-dots { display: flex; gap: 10px; margin: 6px 0 0; min-height: 16px; }
.kp-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); }
.kp-dots i.on { background: var(--sun); border-color: var(--sun); }
.kp-msg { min-height: 18px; margin: 0; font-size: 13px; color: var(--muted); }
.kp-msg.bad { color: #ff8b9a; }
.kp-grid { display: grid; grid-template-columns: repeat(3, 66px); gap: 8px; }
.kp-k { height: 54px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.08); font-family: var(--pixel); font-size: 21px; cursor: pointer; }
.kp-k:hover { background: rgba(255, 255, 255, 0.16); }
.kp-k:active { transform: translateY(1px); }
.kp-k.del { font-size: 18px; }
.kp-k.go { background: var(--sun); color: var(--ink); border-color: transparent; font-size: 15px; font-weight: 800; }
.kp-k:disabled { opacity: 0.4; cursor: default; }
.kp.shake { animation: kp-shake 0.32s; }
@keyframes kp-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ══ 🎛 카메라 · 마이크 설정 (js/prejoin.js · 줌처럼 들어가기 전): 미리 보기 · 켜고 끄기 · 소리 막대 · 장치 고르기 ══ */
.pj { display: flex; flex-direction: column; gap: 12px; width: min(440px, 100%); }
.pj h2 { margin: 0; font-size: 18px; padding-right: 34px; }
.pj-sub { margin: -4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.pj-view { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #3a3355, #14111f); border: 1px solid var(--g-line); }
.pj-video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
/* 👾 도트 필터 미리 보기: 원본 위에 그대로 덮음 (얼굴 찾기는 아래 원본으로) */
.pj-fxv { position: absolute; inset: 0; image-rendering: pixelated; }
.pj-off { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; color: var(--muted); }
.pj-face { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(20, 16, 34, 0.8); font-size: 13px; font-weight: 700; white-space: nowrap; }
.pj-face.ok { background: rgba(28, 110, 74, 0.88); }
.pj-toggles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.pj-t { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 96px; padding: 8px 10px; border-radius: 14px; border: 1px solid rgba(255, 123, 138, 0.45); background: rgba(255, 92, 120, 0.16); cursor: pointer; }
.pj-t.on { background: rgba(95, 224, 140, 0.18); border-color: rgba(95, 224, 140, 0.6); }
.pj-t.locked { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); border-style: dashed; }
.pj-t .pj-ic { font-size: 22px; line-height: 1.1; }
.pj-t small { font-size: 12px; color: var(--muted); }
.pj-t:disabled { cursor: default; }
.pj-mic { display: flex; flex-direction: column; gap: 6px; }
.pj-meter { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; height: 12px; }
.pj-meter i { border-radius: 3px; background: rgba(255, 255, 255, 0.12); transition: background 0.06s; }
.pj-meter i.on { background: #5fe08c; }
.pj-meter i.hi { background: #ffd34e; }
.pj-meter.dim { opacity: 0.45; }
.pj-note { font-size: 12px; color: var(--muted); }
.pj-devs { display: flex; flex-direction: column; gap: 8px; }
.pj-devs label { display: grid; grid-template-columns: 82px 1fr auto; align-items: center; gap: 8px; font-size: 13px; }
.pj-sel { min-width: 0; width: 100%; padding: 7px 8px; border-radius: 10px; border: 1px solid var(--g-line); background: rgba(255, 255, 255, 0.07); color: var(--paper); font-size: 13px; }
.pj-sel option { background: #221d33; color: var(--paper); }
.pj-msg { margin: 0; font-size: 13px; color: #ffb3c0; line-height: 1.5; }
.pj-msg:empty { display: none; }
.pj-skip { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
.pj-go { display: flex; gap: 8px; }
.pj-go .btn { flex: 1 1 0; }
@media (max-width: 720px) {
  .pj-view { aspect-ratio: 16 / 10; }
  .pj-devs label { grid-template-columns: 70px 1fr auto; }
}

/* ✅ 독의 [할 일] 을 누르면 책상의 할 일 칸이 한 번 반짝 (js/desk.js openTodo) */
#desk .dz-card.dz-flash { animation: dz-flash 0.9s ease-out; }
@keyframes dz-flash { 0% { box-shadow: 0 0 0 0 rgba(255, 211, 78, 0.9); } 100% { box-shadow: 0 0 0 12px rgba(255, 211, 78, 0); } }
/* 🍸 찾은 얼굴 둘레 네모 (js/prejoin.js) */
.pj-box { position: absolute; border: 2px solid #5fe08c; border-radius: 14px; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25); pointer-events: none; transition: left 0.15s, top 0.15s, width 0.15s, height 0.15s; }


/* ── 😀 이모지 판 (💬 채팅 · 💌 쪽지) · 💌 쪽지 반응 (js/emoji.js · js/chat.js · js/mates.js) ── */
.emo-btn { flex: none; width: 34px; padding: 0; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.10); font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.emo-btn:hover, .emo-btn.on { background: rgba(255, 255, 255, 0.22); }
.mt-write { position: relative; }
.mt-write .emo-btn { height: 38px; }
.emo-pop { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 30; display: flex; flex-direction: column; max-height: min(250px, 46vh); border-radius: 16px; background: rgba(27, 24, 40, 0.98); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); overflow: hidden; }
.emo-tabs { flex: none; display: flex; gap: 2px; padding: 6px 6px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
.emo-tabs button { flex: 1; min-width: 0; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; font-size: 17px; cursor: pointer; }
.emo-tabs button:hover { background: rgba(255, 255, 255, 0.12); }
.emo-grid { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 6px 8px; }
.emo-grid h4 { margin: 8px 4px 2px; font-size: 11px; font-weight: 800; color: rgba(255, 255, 255, 0.55); }
.emo-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); }
.emo-set button { height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; }
.emo-set button:hover { background: rgba(255, 255, 255, 0.14); }
.rx-bar { position: absolute; z-index: 30; display: grid; grid-template-columns: repeat(6, 32px); gap: 2px; padding: 6px; border-radius: 14px; background: rgba(27, 24, 40, 0.98); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); }
.rx-bar button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; }
.rx-bar button:hover { background: rgba(255, 255, 255, 0.14); }
.rx-bar button.on { background: rgba(95, 224, 192, 0.25); }
/* 💌 쪽지 반응: 말풍선 옆 [😀] (마우스를 올리면 · 휴대폰은 말풍선을 톡) · 말풍선 아래 [❤️] [👍 2] */
.mt-thread { position: relative; }
.mt-msg { position: relative; }
/*   [😀] 로 마우스를 옮기는 동안 안 사라지게: 말풍선과 사이 틈에 투명한 다리(::before) · 마우스가 떠나도 0.3초 남았다가 사라짐 */
.mt-msg .mt-rx-add { position: absolute; top: 4px; width: 28px; height: 24px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: rgba(27, 24, 40, 0.94); font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.12s ease 0.3s, visibility 0s linear 0.42s; }
.mt-msg .mt-rx-add::before { content: ''; position: absolute; top: -8px; bottom: -8px; width: 16px; }
.mt-msg:not(.me) .mt-rx-add { left: calc(100% + 6px); }
.mt-msg:not(.me) .mt-rx-add::before { right: 100%; }
.mt-msg.me .mt-rx-add { right: calc(100% + 6px); }
.mt-msg.me .mt-rx-add::before { left: 100%; }
.mt-msg:hover .mt-rx-add, .mt-msg.sel .mt-rx-add, .mt-msg .mt-rx-add:focus-visible { opacity: 1; visibility: visible; transition-delay: 0s; }
.mt-rx { display: flex; flex-wrap: wrap; gap: 4px; }
.mt-msg.me .mt-rx { justify-content: flex-end; }
.mt-rx button { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--g-hi, #fff); font: inherit; font-size: 12.5px; line-height: 1.5; cursor: pointer; }
.mt-rx button:hover { background: rgba(255, 255, 255, 0.16); }
.mt-rx button.on { border-color: rgba(95, 224, 192, 0.7); background: rgba(95, 224, 192, 0.2); }
@media (pointer: coarse) {
  .mt-msg .mt-rx-add { width: 32px; height: 28px; }
  .mt-rx button { padding: 3px 9px; }
}

/* ── 🎨 꾸미기 (js/ui.js openCustomize) ─────────────────────
   왼쪽(휴대폰은 위) 미리보기 (◀ ▶ 는 아래 구석 · 몸을 안 가림) + 지금 모습 · 오른쪽 탭 (얼굴 · 머리 · 옷 · 소품 · 잠옷) · 아래 단추 줄은 늘 보임
   창 크기는 그대로 (탭을 바꿔도 안 출렁임) · 안쪽만 스크롤 · 도트 그림은 늘리지 않고 그대로 (칸마다 크기 · 자리가 고르게) */
#modal-card.wide:has(.customize) { width: min(880px, 100%); height: min(700px, calc(100dvh - 32px)); display: flex; flex-direction: column; overflow: hidden; padding: 20px 22px 16px; }
.customize { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.customize > h2 { flex: none; margin: 2px 52px 14px 2px; font-size: 20px; line-height: 1.25; }
.cz-main { flex: 1; min-height: 0; display: flex; gap: 18px; }

/* 미리보기 (잔디 무대 · ◀ ▶ 한 칸씩 돌리기) + 지금 모습 */
.cz-side { flex: none; width: 232px; min-height: 0; display: flex; flex-direction: column; gap: 14px; overflow: auto; scrollbar-width: none; }
.cz-stage { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 100%; height: 280px; padding: 0; border: 1px solid var(--g-line); border-radius: 18px; overflow: hidden; }
.cz-stage canvas { display: block; image-rendering: pixelated; }
.cz-turn { position: absolute; bottom: 10px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; background: rgba(20, 18, 32, 0.5); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; }
.cz-turn:hover { background: rgba(20, 18, 32, 0.72); }
.cz-turn.l { left: 8px; }
.cz-turn.r { right: 8px; }
.cz-sum { display: flex; flex-direction: column; gap: 2px; }
.cz-sum h3 { margin: 0 0 4px 10px; font-size: 12px; font-weight: 800; color: var(--g-dim); }
.cz-sum button { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--g-hi); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.cz-sum button:hover { background: var(--g-soft); }
.cz-sum button.on { background: var(--g-soft2); }
.cz-sum b { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-sum i { flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.cz-ti { flex: none; width: 1.35em; text-align: center; }

/* 탭 + 고르는 곳 (여기만 스크롤) */
.cz-right { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.cz-tabs { flex: none; margin: 0 0 14px; }
.cz-tabs button { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 4px; font-size: 13.5px; white-space: nowrap; }
/*   고른 색 칸의 노란 테두리(칸 밖 5px)가 스크롤 가장자리에서 안 잘리게: 양옆 여백 8px 을 바깥으로 빼서 (글자 자리는 탭과 그대로) */
.cz-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; margin: 0 -8px; padding: 6px 8px 10px; }
.cz-panel { display: flex; flex-direction: column; gap: 20px; }
.cz-panel[hidden], .cz-note[hidden] { display: none; }
.cz-sec h3 { margin: 0 0 9px 2px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; font-weight: 800; color: var(--g-dim); }
.cz-sec h3 small { font-size: 11.5px; font-weight: 500; }
.cz-note { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 9px 10px 9px 12px; border: 1px solid rgba(255, 211, 78, 0.3); border-radius: 12px; background: rgba(255, 211, 78, 0.1); color: #ffe7a6; font-size: 12.5px; line-height: 1.4; }
.cz-note-btn { margin-left: auto; padding: 5px 11px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.cz-note-btn:hover { background: rgba(255, 255, 255, 0.2); }

/* 도트 아이콘 칸: 모두 같은 크기 · 그림은 칸 가운데 · 이름은 두 줄 자리 */
.cz-sec .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 8px 4px 7px; border: 1px solid var(--g-line2); border-radius: 12px; background: var(--g-soft); color: var(--g-hi); font: inherit; cursor: pointer; }
.tile-pic { width: 100%; height: 44px; display: grid; place-items: center; }
.tiles.tall .tile-pic { height: 62px; }
.tile canvas { display: block; image-rendering: pixelated; }
.tile-name { width: 100%; height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; line-height: 1.25; text-align: center; word-break: keep-all; color: var(--g-dim); }
.tile:hover { background: var(--g-soft2); }
.tile.on { border-color: var(--sun); box-shadow: inset 0 0 0 1px var(--sun); background: rgba(255, 211, 78, 0.14); }
.tile.on .tile-name { color: var(--sun); font-weight: 800; }

/* 색 칸: 한 줄에 8개 · 모두 같은 크기 */
.swatches { display: grid; grid-template-columns: repeat(8, 32px); gap: 10px; }
.swatch { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), inset 0 -3px 0 rgba(0, 0, 0, 0.16); cursor: pointer; }
.swatch:hover { transform: translateY(-1px); }
.swatch.on { outline: 2px solid var(--sun); outline-offset: 3px; }
.tile:focus-visible, .swatch:focus-visible, .cz-turn:focus-visible, .cz-sum button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* 아래 단추 줄 */
.cz-foot { flex: none; display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--g-line2); }
.cz-foot .btn { padding: 10px 14px; white-space: nowrap; }
.cz-err { flex: 1; min-width: 0; text-align: right; font-size: 12.5px; }
.cz-save { min-width: 96px; }

/* 휴대폰: 화면을 꽉 채움 · 미리보기는 위에 낮게 · 지금 모습은 뺌 · 칸은 한 줄에 4개 · 색은 폭을 나눠 크게 */
@media (max-width: 720px) {
  #modal:has(.customize) { padding: max(8px, env(safe-area-inset-top, 0px)) 8px max(8px, var(--safe-b)); }
  #modal-card.wide:has(.customize) { height: 100%; max-height: none; padding: 14px 14px 12px; border-radius: 20px; }
  .customize > h2 { margin-bottom: 10px; font-size: 17px; }
  .cz-main { flex-direction: column; gap: 10px; }
  .cz-side { width: auto; overflow: visible; }
  .cz-stage { height: 172px; border-radius: 16px; }
  .cz-sum { display: none; }
  .cz-tabs { margin-bottom: 10px; }
  .cz-tabs button { padding: 8px 2px; font-size: 13px; gap: 3px; }
  .cz-panel { gap: 16px; }
  .cz-sec .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .swatches { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
  .swatch { width: auto; height: auto; aspect-ratio: 1; }
  .cz-foot { margin-top: 10px; padding-top: 10px; gap: 6px; }
  .cz-foot .btn { padding: 10px 12px; }
}
/* 낮은 화면 (가로로 눕힌 휴대폰 · 작은 노트북): 미리보기를 줄이고 지금 모습은 뺌 */
@media (min-width: 721px) and (max-height: 620px) {
  #modal:has(.customize) { padding: 8px; }
  #modal-card.wide:has(.customize) { height: calc(100dvh - 16px); max-height: none; padding: 14px 18px 10px; }
  .customize > h2 { margin-bottom: 8px; font-size: 17px; }
  .cz-side { width: 196px; }
  .cz-stage { height: 100%; min-height: 220px; }
  .cz-sum { display: none; }
}

/* ── 👤 프로필 (js/ui.js openProfile · js/profile.js profileInfo) · 무대형 ─────────────
   위: 잔디 무대 (캐릭터 · 내 것이면 왼쪽 아래 🎨 꾸미기 · ✕ 는 무대 위 오른쪽) · 가운데: 이름 · 상태 메시지 · 처음 온 날
   내 것: 숫자 줄 (오늘 집중 · 이번 주 · 연속 · 누르면 📅 내 기록) · [✏️ 프로필 고치기] [📅 내 기록] · 만든 것 · 링크 · (손님) Google 로 지키기 · 로그아웃
   남의 것: 📍 어디 · 👋 친구 신청 · 💌 쪽지 … (js/mates.js profileBox) · 만든 것 · 링크 */
#modal-card:has(.profile) { width: min(480px, 100%); padding: 0; }
#modal-card:has(.profile) > .modal-x { z-index: 2; top: 14px; right: 14px; width: 34px; height: 34px; min-width: 0; min-height: 0; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(20, 18, 32, 0.55); color: #fff; }
#modal-card:has(.profile) > .modal-x:hover { background: rgba(20, 18, 32, 0.75); }
.profile { display: flex; flex-direction: column; text-align: center; }
.pf-stage { position: relative; flex: none; height: 196px; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--g-line); background: radial-gradient(ellipse 18% 8% at 50% 88%, rgba(0, 0, 0, 0.26), transparent 70%), repeating-conic-gradient(#7ec850 0 25%, #74bd48 0 50%) 0 0 / 12px 12px; }
.pf-stage canvas { display: block; margin-bottom: 18px; image-rendering: pixelated; }
.pf-stage-btn { position: absolute; left: 14px; bottom: 14px; height: 32px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; background: rgba(20, 18, 32, 0.55); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.pf-stage-btn:hover { background: rgba(20, 18, 32, 0.75); }
.pf-body { display: flex; flex-direction: column; gap: 18px; padding: 18px 24px 20px; }
.pf-id { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.profile h2.pf-name { margin: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; font-size: 26px; line-height: 1.25; word-break: break-all; }
.pf-name .pf-badge, .pf-name .pf-guest, .pf-name .ai-chip { margin-left: 0; vertical-align: 0; }
.pf-status { margin: 0; color: var(--g-hi); font-size: 14.5px; line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
.profile .joined { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--g-dim); }
.profile .where { margin: 0; }
.pf-link { padding: 0; border: 0; background: none; color: var(--sun); font: inherit; font-weight: 700; cursor: pointer; }
.pf-link:hover { text-decoration: underline; }
.pf-link:disabled { opacity: 0.6; cursor: default; }
/* 숫자 줄 (내 것) */
.pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; background: rgba(255, 255, 255, 0.06); color: inherit; font: inherit; cursor: pointer; overflow: hidden; }
.pf-stats:hover { background: rgba(255, 255, 255, 0.1); }
.pf-stats > span { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 12px 4px; }
.pf-stats > span + span { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.pf-stats b { font-size: 17px; font-weight: 800; color: var(--g-hi); white-space: nowrap; }
.pf-stats b.mint { color: var(--g-mint); }
.pf-stats b.sun { color: var(--sun); }
.pf-stats small { font-size: 12px; color: var(--g-dim); }
div.pf-stats { cursor: default; }
div.pf-stats:hover { background: rgba(255, 255, 255, 0.06); }
.pf-stats-note { margin: -10px 0 0; font-size: 12px; line-height: 1.5; color: var(--g-dim); }
/* 단추 두 개 (같은 크기) */
.pf-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pf-acts.one { grid-template-columns: minmax(0, 1fr); }
.pf-acts .btn { height: 46px; padding: 0 10px; white-space: nowrap; }
.profile .mt-pf { margin-top: 0; padding-top: 0; border-top: 0; }
/* 소개가 없을 때 (내 것) */
.pf-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 13px 14px; border: 1px dashed rgba(255, 255, 255, 0.22); border-radius: 14px; background: none; color: var(--g-hi); font: inherit; cursor: pointer; }
.pf-empty:hover { background: var(--g-soft); }
.pf-empty b { font-size: 13.5px; }
.pf-empty span { font-size: 12.5px; line-height: 1.5; color: var(--g-dim); word-break: keep-all; }
/* 만든 것 (한 줄이 통째로 링크) · 링크 */
.pf-more { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.pf-works h4 { margin: 0 0 8px 2px; font-size: 12px; font-weight: 800; color: var(--g-dim); }
.pf-works ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pf-works a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: var(--g-soft); text-decoration: none; }
.pf-works a:hover { background: var(--g-soft2); }
.pf-works b { flex: 1; min-width: 0; color: var(--sun); font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-works small { flex: none; max-width: 45%; color: var(--g-dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* SNS: 공식 로고만 (js/profile.js sns) · 인스타그램 지침의 가장 작은 크기 29px · 칸 없이 로고만 (누르는 자리는 44px)
   로고 사이 21px (둘레 여백 = 크기의 반 14.5px 이상) */
.pf-links { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pf-sns { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; opacity: 0.85; }
.pf-sns:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.pf-sns:focus-visible { opacity: 1; outline: 2px solid var(--sun); outline-offset: 2px; }
.pf-sns img { display: block; width: 29px; height: 29px; object-fit: contain; }
/* 💾 손님: Google 로 지키기 */
.pf-login { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; background: rgba(255, 255, 255, 0.06); text-align: left; }
.pf-login p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--g-hi); word-break: keep-all; }
.pf-login small { font-size: 11px; line-height: 1.5; color: var(--g-dim); }
.pf-login .btn { height: 46px; }
/* 로그아웃 */
.pf-out { display: flex; justify-content: center; padding-top: 12px; border-top: 1px solid var(--g-line2); }
.pf-out button { padding: 6px 10px; border: 0; background: none; color: #ff8fa6; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pf-out button:hover { text-decoration: underline; }
@media (max-width: 720px) {
  #modal:has(.profile) { padding: 12px; }
  #modal-card:has(.profile) { width: 100%; border-radius: 22px; }
  #modal-card:has(.profile) > .modal-x { top: 10px; right: 10px; width: 40px; height: 40px; }
  .pf-stage { height: 172px; }
  .pf-stage-btn { left: 10px; bottom: 10px; height: 36px; font-size: 13px; }
  .pf-body { gap: 16px; padding: 14px 16px 16px; }
  .profile h2.pf-name { font-size: 22px; }
  .pf-stats b { font-size: 16px; }
  .pf-stats small { font-size: 11.5px; }
  .pf-acts .btn { height: 48px; }
}

/* ── ♟ 🔮 라운지 NPC 창: 오목 아저씨 · 운세 아주머니 (js/npcs.js) ───────────── */
.npc { color: var(--paper); }
.npc-head { display: flex; align-items: center; gap: 12px; }
.npc-face { flex: none; border-radius: 50%; background: #e9dcc4; border: 3px solid var(--sun); image-rendering: pixelated; }
.luck .npc-face { border-color: #b48cf0; }
.npc-name { display: block; font-size: 18px; font-weight: 800; color: var(--g-hi); }
.npc-sub { font-size: 13px; color: var(--muted); }
/* 말풍선: 마을의 사람 말풍선과 같은 모양 (흰 바탕 · 픽셀 글꼴 · 위쪽 꼬리) */
.npc-say { position: relative; padding: 10px 12px; border-radius: 8px; background: #fff; color: var(--ink); font-family: var(--pixel); font-size: 15px; line-height: 1.5; min-height: 1.5em; }
.npc-say::before { content: ''; position: absolute; left: 26px; top: -7px; border: 6px solid transparent; border-top: 0; border-bottom: 7px solid #fff; }
.npc-btns { display: flex; gap: 8px; }
.npc-btns .btn { flex: 1; min-height: 44px; }

/* ♟ 오목: 컴퓨터는 판 왼쪽 · 오른쪽 아저씨 · 휴대폰은 위에서 아래로 (아저씨 → 한마디 → 판 → 차례 → 안내 → 단추) */
#modal-card.wide:has(.omk) { width: min(880px, 100%); padding: 28px 30px; }
.omk { display: grid; grid-template-columns: minmax(0, 468px) minmax(0, 1fr); grid-template-areas: "board head" "board say" "board players" "board tip" "board btns" "board ."; grid-template-rows: auto auto auto auto auto 1fr; column-gap: 28px; row-gap: 14px; }
.omk-side { display: contents; }
.omk-wrap { grid-area: board; align-self: start; border-radius: 10px; box-shadow: inset 0 0 0 3px #b07a3a, 0 6px 0 #8a5a2b; overflow: hidden; background: #e2b46b; }
.omk-board { display: block; width: 100%; height: auto; aspect-ratio: 1; touch-action: manipulation; cursor: pointer; }
.omk .npc-head { grid-area: head; padding-right: 36px; }
.omk .npc-say { grid-area: say; }
.omk-players { grid-area: players; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--ink-3); }
.omk-p { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.omk-p .npc-sub { font-size: 14px; }
.omk-stone { flex: none; width: 18px; height: 18px; border-radius: 50%; }
.omk-stone.b { background: #111; box-shadow: 0 0 0 2px var(--sun); }
.omk-stone.w { background: #eee; }
.omk-turn { margin-left: auto; font-size: 12px; color: var(--muted); }
.omk-turn.on { height: 24px; padding: 0 8px; border-radius: 6px; background: var(--sun); color: var(--ink); font-weight: 800; display: grid; place-items: center; }
.omk-tip { grid-area: tip; margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.omk .npc-btns { grid-area: btns; }
@media (max-width: 720px) {
  #modal-card.wide:has(.omk) { padding: 16px 12px 18px; }
  .omk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "say" "board" "players" "tip" "btns"; grid-template-rows: none; row-gap: 12px; }
  .omk .npc-face { width: 40px !important; height: 40px !important; border-width: 2px; }
  .omk .npc-name { font-size: 15px; }
  .omk .npc-say { font-size: 14px; }
  .omk-players { flex-direction: row; padding: 0; border: 0; }
  .omk-p { flex: 1; min-height: 44px; padding: 0 10px; border-radius: 12px; border: 2px solid var(--ink-3); font-size: 14px; }
  .omk-p .npc-sub { display: none; }
  .omk-p:has(.omk-turn.on) { border-color: var(--sun); }
  .omk-turn.on { height: auto; padding: 0; background: none; color: var(--sun); }
  .omk-tip { padding: 12px; border-radius: 12px; background: rgba(255, 211, 78, 0.12); color: var(--paper); }
}

/* 🔮 오늘의 운세: 3초 로딩 바 → 제목 + 한마디 (js/npcs.js openFortune) */
#modal-card:has(.luck) { width: min(400px, 100%); }
.luck { display: flex; flex-direction: column; }
.luck .npc-head { padding-right: 36px; }
.luck .npc-name { font-size: 20px; }
.luck-wait { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 8px 20px; text-align: center; }
.luck-wait > b { margin-top: 6px; font-size: 16px; font-weight: 800; color: var(--g-hi); }
.luck-wait p { margin: 0; font-size: 14px; color: var(--muted); }
.luck-bar { width: min(240px, 80%); height: 8px; margin-top: 14px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.luck-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #9b6fe0, #c9b3ff); animation: luck-fill 3s linear forwards; }
@keyframes luck-fill { to { width: 100%; } }
.luck-card { margin-top: 18px; padding: 20px 18px; border: 1px solid rgba(180, 140, 240, 0.45); border-radius: 16px; background: rgba(155, 111, 224, 0.12); text-align: center; animation: luck-in 0.35s ease-out; }
.luck-card b { display: block; font-family: var(--pixel); font-weight: 400; font-size: 22px; line-height: 1.35; color: #d9c8ff; word-break: keep-all; }
.luck-card p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--g-hi); word-break: keep-all; }
@keyframes luck-in { from { opacity: 0; transform: translateY(6px); } }
.luck .npc-btns { margin-top: 18px; }
@media (max-width: 720px) {
  .luck-card b { font-size: 20px; }
  .luck-card p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .luck-card { animation: none; } }

/* ✏️ 선 아이콘 (js/icons.js · 24칸 · 선 1.8) — 독 · 휴대폰 더보기 판 · 글자색을 따라가고 켜지면 민트 */
svg.li { display: block; width: 24px; height: 24px; }
svg.li .f { fill: currentColor; stroke: none; }
#toolbar .tool .ti { color: var(--g-hi); }
#toolbar .tool .ti svg.li { width: calc(24px * var(--ds)); height: calc(24px * var(--ds)); }
#toolbar .tool.on .ti { color: var(--g-mint); }
.more-ic { display: grid; place-items: center; color: var(--g-hi); }
.more-ic svg.li { width: 28px; height: 28px; }
.more-tile.on .more-ic { color: var(--g-mint); }
@media (max-width: 720px), (pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
  #toolbar .tool .ti svg.li { width: calc(23px * var(--ds)); height: calc(23px * var(--ds)); }
}
svg.li .fs { fill: currentColor; }
/* 글자 안 아이콘 (ix · ie): 글자 크기를 따라감 · 이모지 자리에 그대로 */
.ie { display: inline-block; vertical-align: -0.17em; line-height: 0; }
/* 글자 안 아이콘은 둘레의 "… span { display: block }" 같은 규칙에 휩쓸리지 않게 (구역 이름표 · 혼자예요 안내 · 칩 …) */
span.ie { display: inline-block !important; position: static !important; flex: none !important; width: auto !important; height: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; overflow: visible !important; font-size: inherit !important; line-height: 0 !important; }
span.ie:not(.on):not(.gold):not(.silver):not(.bronze) { color: inherit !important; }
span.ie::before, span.ie::after { content: none !important; }
.ie svg.li { width: 1.15em; height: 1.15em; }
.ie.on { color: #4ade80; }
.ie.gold { color: #ffd34e; }
.ie.silver { color: #cfd6e4; }
.ie.bronze { color: #e0965a; }
.gd-finger .ie { vertical-align: middle; }
.gd-finger .ie.dn { transform: rotate(180deg); }
.mp-art { color: #fff; }
.mp-art .ie svg.li { width: 1.2em; height: 1.2em; }

/* ── ⚙️ 설정 (js/ui.js openSettings · main.js · dock.js) ──────────────
   묶음 제목 (화면 · 소리 · 공개 · 계정) → 카드 안 한 줄씩: [선 아이콘] 제목 + 설명 · 오른쪽에 스위치 · 고르기 · 단추
   휴대폰 · 컴퓨터 같은 모양 (휴대폰은 채팅창 크기 줄만 빠짐) */
#modal-card:has(> .settings) { width: min(440px, 100%); }
.settings { display: flex; flex-direction: column; gap: 18px; }
.settings > h2 { margin: 0; }
.set-sec h3 { margin: 0 0 8px 4px; font-size: 12px; font-weight: 700; color: var(--g-dim); }
.set-card { padding: 0 14px; border: 1px solid var(--g-line2); border-radius: 16px; background: var(--g-soft); }
.settings .set-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 56px; padding: 10px 0; font-size: 14px; font-weight: 400; color: var(--g-hi); }
.settings label.set-item { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.set-item + .set-item, .set-item + .set-acts { border-top: 1px solid var(--g-line2); }
.set-ic { display: grid; place-items: center; color: var(--g-dim); }
.set-ic svg.li { width: 22px; height: 22px; }
.set-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-tx b { font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--g-hi); word-break: keep-all; }
.set-tx small { font-size: 12px; line-height: 1.45; color: var(--g-dim); word-break: keep-all; overflow-wrap: anywhere; }
.set-ctl { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.settings .set-ctl select { width: auto; max-width: 128px; height: 36px; padding: 0 10px; border-radius: 10px; font-size: 13.5px; font-weight: 600; }
.settings .set-ctl .btn.small { height: 34px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
.set-seg { grid-template-columns: repeat(3, 54px); }
/* 스위치 */
.sw { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 46px; height: 28px; margin: 0; border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.2); cursor: pointer; transition: background 0.18s; }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transition: transform 0.18s; }
.sw:checked { background: var(--g-mint); }
.sw:checked::after { transform: translateX(18px); }
.sw:focus-visible { outline: 2px solid var(--g-mint); outline-offset: 2px; }
.sw:disabled { opacity: 0.5; cursor: default; }
/* 소리 들어 보기 */
.set-play { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px 0 8px; border: 1px solid var(--g-line); border-radius: 15px; background: none; color: var(--g-dim); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.set-play svg.li { width: 16px; height: 16px; }
.set-play:hover { background: rgba(255, 255, 255, 0.08); color: var(--g-hi); }
/* 계정: 누구 · [Google 로 지키기] [로그아웃] · 아래 가운데 계정 지우기 */
.set-acts { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px 0 14px; }
.set-acts.two { grid-template-columns: 1fr 1fr; }
.set-acts .btn { height: 42px; padding: 0 10px; font-size: 14px; white-space: nowrap; }
.settings .acct-delete { margin: 12px auto 0; }
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px), (pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
  .settings .set-chat-size { display: none; }
}
@media (max-width: 380px) {
  .set-card { padding: 0 12px; }
  .settings .set-item { column-gap: 10px; }
  .set-seg { grid-template-columns: repeat(3, 48px); }
  .set-tx small { font-size: 11.5px; }
}