@font-face { font-family: 'MaruBuri'; font-display: swap; src: url(fonts/maruburi-a.woff2?v=20261109232502) format('woff2'); unicode-range: U+20-7E, U+A0-FF, U+2D8, U+E51, U+1D17, U+1D55, U+2010-2027, U+2030-205E, U+20A9, U+2190-21FF, U+223F, U+22B9, U+2312, U+2500, U+25B6, U+25C0, U+25E0-25E1, U+25E6, U+2727, U+3000-303F, U+A4B0-A4B1, U+AC00-AC01, U+AC04, U+AC08, U+AC10-AC16, U+AC19, U+AC1C, U+AC31, U+AC70-AC71, U+AC74, U+AC77-AC78, U+AC80, U+AC83, U+AC8A, U+AC8C, U+ACA0, U+ACA8-ACA9, U+ACAC, U+ACB0, U+ACB9, U+ACBC-ACBD, U+ACC1, U+ACC4, U+ACE0-ACE1, U+ACE7-ACE8, U+ACF1, U+ACF3, U+ACF5, U+ACFC-ACFD, U+AD00, U+AD11, U+AD1C, U+AD50, U+AD6C-AD6D, U+AD70, U+AD74-AD75, U+AD7D, U+AD81-AD82, U+AD88, U+ADC0, U+ADDC, U+ADF8, U+ADFC, U+AE00, U+AE08, U+AE30, U+AE34, U+AE38, U+AE40, U+AE43, U+AE4A, U+AE4C, U+AE50, U+AE54, U+AE61, U+AE65, U+AE68, U+AEBC, U+AECF, U+AED8, U+AF2C-AF2D, U+AF3C, U+AF43, U+AFB8-AFB9, U+AFBC, U+AFC0, U+AFD4, U+AFE8, U+B00C, U+B010, U+B04A, U+B04C, U+B053-B054, U+B05D, U+B07C, U+B098, U+B09C, U+B0A0-B0A1, U+B0A8-B0A9, U+B0AC, U+B0AE-B0AF, U+B0B1, U+B0B4, U+B0B8, U+B0BC, U+B0C4, U+B0C8, U+B0D0, U+B0E5, U+B108-B109, U+B113, U+B118, U+B123-B124, U+B128, U+B137-B138, U+B141, U+B155, U+B158, U+B178-B179, U+B17C, U+B180, U+B18D, U+B192-B194, U+B204, U+B208, U+B20C, U+B220, U+B290, U+B294, U+B298, U+B2A5-B2A6, U+B2C8, U+B2CC, U+B2D0, U+B2D8, U+B2E4-B2E5, U+B2E8, U+B2EB-B2EC, U+B2F4, U+B2F9, U+B2FF-B300, U+B354-B355, U+B358, U+B35C, U+B364, U+B369, U+B36E, U+B370, U+B3C4, U+B3C8, U+B3CB-B3CC, U+B3D9, U+B3FC, U+B410, U+B418, U+B41C, U+B420, U+B450, U+B454, U+B458, U+B460-B461, U+B465, U+B46C, U+B480, U+B4A4, U+B4B7, U+B4DC-B4DD, U+B4E0, U+B4E3-B4E4, U+B4EC, U+B4EF, U+B4F1, U+B514, U+B524, U+B529, U+B530-B531, U+B534, U+B545, U+B54C, U+B550, U+B5A0, U+B5A4, U+B5A8, U+B5B4, U+B5BB, U+B610-B611, U+B69C-B69D, U+B6AB, U+B6F0, U+B6F4, U+B728-B729, U+B72C, U+B73B, U+B744, U+B754, U+B760, U+B77C-B77D, U+B780, U+B784, U+B78C-B78D, U+B791, U+B798, U+B7C9, U+B7EC, U+B7F0, U+B7FC, U+B800-B801, U+B807-B808, U+B80C, U+B824-B825, U+B82C, U+B837-B838, U+B840, U+B85C-B85D, U+B864, U+B86D, U+B8CC, U+B8E8-B8E9, U+B958, U+B974-B975, U+B978, U+B97C, U+B984, U+B987, U+B9AC, U+B9B0, U+B9B4, U+B9BC, U+B9C8-B9C9, U+B9CC, U+B9CE, U+B9D0-B9D1, U+B9D9, U+B9DB, U+B9DD-B9DE, U+B9E1, U+B9E4, U+B9E8, U+B9F5, U+BA38-BA39, U+BA3C, U+BA40, U+BA48, U+BA4B, U+BA54, U+BA5C, U+BA70, U+BA74, U+BA85, U+BA87, U+BAA8-BAA9, U+BAB0, U+BAB8, U+BABB, U+BB34, U+BB38, U+BB3B-BB3C, U+BB47, U+BB50, U+BB54, U+BBC0, U+BBF8, U+BBFC, U+BC00, U+BC08, U+BC11, U+BC14-BC16, U+BC18, U+BC1B-BC1D, U+BC1F, U+BC24-BC25, U+BC29, U+BC2D, U+BC30, U+BC84-BC85, U+BC88, U+BC8C, U+BC95, U+BC9A, U+BCA0, U+BCA4, U+BCA8, U+BCB4, U+BCBD, U+BCC0, U+BCC4, U+BCD5, U+BCF4-BCF5, U+BCF8, U+BCFC, U+BD04, U+BD09, U+BD10, U+BD24, U+BD80, U+BD84, U+BD88-BD89, U+BD90, U+BD93, U+BD95, U+BD99, U+BDF0, U+BE0C, U+BE44, U+BE48, U+BE57, U+BE59, U+BE5B, U+BE60, U+BE68, U+BE75, U+BE7C, U+BE80, U+BE90, U+BED0, U+BED7, U+BFC5, U+BFCC, U+BFD0, U+C058, U+C05C, U+C068, U+C0AC-C0AD, U+C0B0, U+C0B4, U+C0C0-C0C1, U+C0C8-C0C9, U+C0D0, U+C0DD, U+C11C-C11E, U+C120, U+C124, U+C12F, U+C131, U+C138, U+C149, U+C14B, U+C154, U+C158, U+C168, U+C18C-C18D, U+C190, U+C194, U+C19C, U+C1A1, U+C1E0, U+C218, U+C21C, U+C21F, U+C228, U+C22B, U+C232, U+C26C, U+C270, U+C27C, U+C2A4, U+C2A8, U+C2B5, U+C2DC-C2DD, U+C2E0, U+C2E4, U+C2EC, U+C2F6, U+C2F8-C2F9, U+C30D, U+C313, U+C368, U+C370, U+C3DF, U+C465, U+C4F0, U+C4F4, U+C4F8, U+C528-C529, U+C544-C545, U+C548-C54A, U+C54C, U+C554, U+C557-C558, U+C55E, U+C561, U+C571, U+C57C-C57D, U+C591, U+C597-C598, U+C5B4-C5B5, U+C5B8, U+C5BB-C5BC, U+C5C4-C5C8, U+C5CC, U+C5D0, U+C5D4, U+C5D8, U+C5EC, U+C5F0, U+C5F4, U+C600-C601, U+C605-C606, U+C608, U+C61B, U+C624-C625, U+C628, U+C62C, U+C62E, U+C639, U+C640, U+C644, U+C654, U+C678, U+C67C, U+C694, U+C6A9, U+C6B0, U+C6B4, U+C6B8, U+C6C0, U+C6C3, U+C6C5, U+C6CC, U+C6D0, U+C6E0, U+C6F9, U+C704, U+C717, U+C720, U+C728, U+C73C, U+C740, U+C744, U+C74C, U+C751, U+C758, U+C774-C775, U+C778, U+C77C-C77D, U+C784, U+C787-C789, U+C78E, U+C790-C791, U+C794, U+C798, U+C7A0-C7A1, U+C7A4-C7A5, U+C7AC, U+C7B0, U+C7BF, U+C800-C801, U+C804, U+C808, U+C810-C811, U+C815-C816, U+C81C, U+C838, U+C84C, U+C870, U+C874, U+C878, U+C880, U+C885, U+C88B-C88C, U+C8E0, U+C8FC-C8FD, U+C900, U+C904, U+C90D, U+C911, U+C92C, U+C988, U+C990, U+C998, U+C9C0-C9C1, U+C9C4, U+C9C8, U+C9D0-C9D1, U+C9D3, U+C9D5, U+C9DA, U+C9DC-C9DD, U+C9E7, U+C9F8, U+CABD, U+CB49, U+CBE4, U+CC0C-CC0D, U+CC28-CC29, U+CC2E, U+CC38, U+CC3B-CC3E, U+CC44-CC45, U+CC48, U+CC98, U+CC9C, U+CCA0, U+CCAB, U+CCAD, U+CCB4, U+CCD0, U+CCE4, U+CD08, U+CD5C, U+CD94-CD95, U+CD98, U+CD9C, U+CDA4, U+CDA9, U+CDB0, U+CDC4, U+CDE8, U+CE35, U+CE58-CE59, U+CE5C, U+CE60, U+CE68, U+CE74, U+CE78, U+CE94, U+CEE4-CEE5, U+CEE8, U+CEF7, U+CEF9, U+CF00, U+CF1C, U+CF24, U+CF54, U+CF58, U+CFE0, U+CFF5, U+D034, U+D06C, U+D074, U+D07C, U+D0A4, U+D0A8, U+D0AC, U+D0C0-D0C1, U+D0D1, U+D0D5, U+D0DC-D0DD, U+D130, U+D138, U+D14C-D14D, U+D15C, U+D1A0-D1A1, U+D1B1, U+D1B5, U+D22C, U+D241, U+D280, U+D2B8-D2B9, U+D2BC, U+D2C0, U+D2C8, U+D2F0, U+D30C, U+D310, U+D314, U+D31D, U+D328, U+D37C, U+D3B4, U+D3B8, U+D3BC, U+D3EC-D3ED, U+D3F0, U+D45C, U+D478-D479, U+D47C, U+D480, U+D488, U+D48D, U+D504, U+D50C, U+D514, U+D53C, U+D544, U+D558, U+D55C, U+D560, U+D568, U+D574, U+D587-D589, U+D5A5, U+D5DD, U+D600, U+D604, U+D614-D615, U+D638, U+D63C, U+D654-D655, U+D658, U+D65C, U+D68C, U+D6A8, U+D6C4, U+D734, U+D749, U+D750, U+D754, U+D759, U+D765, U+D76C, U+D770, U+D788, U+D78C, U+D790, U+D798, U+FF01-FF5E; }
@font-face { font-family: 'MaruBuri'; font-display: swap; src: url(fonts/maruburi-b.woff2?v=20261109232502) format('woff2'); unicode-range: U+AC07, U+AC09-AC0A, U+AC17, U+AC1A-AC1B, U+AC1D, U+AC20, U+AC24, U+AC2C-AC2D, U+AC2F-AC30, U+AC38-AC39, U+AC3C, U+AC40, U+AC4B, U+AC4D, U+AC54, U+AC58, U+AC5C, U+AC7A, U+AC81, U+AC84-AC86, U+AC89, U+AC8B, U+AC90, U+AC94, U+AC9C-AC9D, U+AC9F, U+ACA1, U+ACAA, U+ACAF, U+ACB8, U+ACBB, U+ACC8, U+ACCC, U+ACD5, U+ACD7, U+ACE4, U+ACEA, U+ACEC, U+ACEF-ACF0, U+ACF6, U+AD04, U+AD06, U+AD0C-AD0D, U+AD0F, U+AD18, U+AD20, U+AD29, U+AD2C-AD2D, U+AD34-AD35, U+AD38, U+AD3C, U+AD44-AD45, U+AD47, U+AD49, U+AD54, U+AD58, U+AD61, U+AD63, U+AD73, U+AD76, U+AD7B-AD7C, U+AD7F, U+AD89, U+AD8C, U+AD90, U+AD9C-AD9D, U+ADA4, U+ADB7, U+ADC1, U+ADC4, U+ADC8, U+ADD0-ADD1, U+ADD3, U+ADE0, U+ADE4, U+ADF9, U+ADFF, U+AE01, U+AE09, U+AE0B, U+AE0D, U+AE14, U+AE31, U+AE37, U+AE3A, U+AE41, U+AE45-AE46, U+AE4D-AE4E, U+AE56, U+AE5C-AE5D, U+AE5F-AE60, U+AE69, U+AE6C, U+AE70, U+AE78-AE79, U+AE7B-AE7D, U+AE84-AE85, U+AE8C, U+AEBD-AEBE, U+AEC0, U+AEC4, U+AECC-AECD, U+AED0-AED1, U+AED9, U+AEDC, U+AEE8, U+AEEB, U+AEED, U+AEF4, U+AEF8, U+AEFC, U+AF07-AF08, U+AF0D, U+AF10, U+AF30, U+AF32, U+AF34, U+AF3D, U+AF3F, U+AF41-AF42, 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+AFC7-AFC9, U+AFCB, U+AFCD-AFCE, U+AFDC, U+AFE9, U+AFF0-AFF1, U+AFF4, U+AFF8, U+B000-B001, U+B004, U+B014, U+B01C-B01D, U+B028, U+B044-B045, U+B048, U+B04E, U+B055, U+B057, U+B059, U+B07D, U+B080, U+B084, U+B08C-B08D, U+B08F, U+B091, U+B099-B09A, U+B09F, U+B0A2, U+B0AB, U+B0AD, U+B0B3, U+B0B5, U+B0C5, U+B0C7, U+B0C9, U+B0D1, U+B0D4, U+B0D8, U+B0E0, U+B10B-B10C, U+B110, U+B112, U+B119, U+B11B-B11D, U+B125, U+B12C, U+B134-B135, U+B139, U+B140, U+B144, U+B148, U+B150-B151, U+B154, U+B15C, U+B160, U+B182, U+B188-B189, U+B18B, 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+B205, U+B20B, U+B214-B215, U+B217, U+B219, U+B234, U+B23C, U+B258, U+B25C, U+B260, U+B268-B269, U+B274-B275, U+B27C, U+B284-B285, U+B289, U+B291, U+B299-B29A, U+B2A0-B2A1, U+B2A3, U+B2AA, U+B2AC, U+B2B0, U+B2B4, U+B2C9, U+B2D2, U+B2D9, U+B2DB, U+B2DD, U+B2E2, U+B2E6, U+B2ED-B2EF, U+B2F3, U+B2F5, U+B2F7-B2F8, U+B2FA-B2FB, U+B301, U+B304, U+B308, U+B310-B311, U+B313-B315, U+B31C, U+B356, U+B35B, U+B35E-B35F, U+B365, U+B367, U+B36B, U+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+B3C5, U+B3CE, U+B3D0, U+B3D4-B3D5, U+B3D7, U+B3DB, U+B3DD, U+B3E0, U+B3E4, U+B3E8, U+B428-B429, U+B42B, U+B434, U+B451, U+B463, U+B488, U+B49D, U+B4A8, U+B4AC, U+B4B5, U+B4B9, U+B4C0, U+B4C4, U+B4C8, U+B4D0, U+B4D5, U+B4E6, U+B4ED, U+B4F8, U+B515, U+B518, U+B51B-B51C, U+B525, U+B527-B528, U+B52A, U+B538, U+B540-B541, U+B543-B544, U+B54B, U+B54D, U+B554, U+B55C-B55D, U+B55F-B561, U+B5A1, U+B5AA-B5AB, U+B5B0-B5B1, U+B5B3, U+B5B5, U+B5BC-B5BD, U+B5C0, U+B5C4, U+B5CC-B5CD, U+B5CF-B5D1, U+B5D8, U+B5EC, U+B614, U+B618, U+B625, U+B62C, U+B634, U+B648, U+B664, U+B668, U+B6A0, U+B6A4, U+B6AC, U+B6B1, U+B6D4, U+B6F8, U+B700-B701, U+B705, U+B72F-B730, U+B738-B739, U+B748, U+B74C, U+B755, U+B764, U+B768, U+B770-B771, U+B773, U+B775, U+B78F-B790, U+B792, U+B796-B797, U+B799, U+B79C, U+B7A0, U+B7A8-B7A9, U+B7AB-B7AD, U+B7B4-B7B5, U+B7B8, U+B7C7, U+B7ED, U+B7F4, U+B7FD, U+B7FF, U+B809, U+B810, U+B818-B819, U+B81B, U+B81D, U+B828, U+B834-B835, U+B839, U+B844, U+B851, U+B853, U+B860, U+B86C, 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+B8D0, U+B8D4, U+B8DD, U+B8DF, U+B8E1, 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+B959, U+B95C, U+B960, U+B968-B969, U+B96B, U+B96D, U+B985, U+B989-B98A, U+B98D-B98E, U+B9AD, U+B9BD, U+B9BF, U+B9C1, U+B9CF, U+B9D2, U+B9D8, U+B9E3, U+B9E5, U+B9EC, U+B9F4, U+B9F7-B9FA, U+BA00-BA01, U+BA08, U+BA15, U+BA42, U+BA49, U+BA4D-BA4E, U+BA53, U+BA55, U+BA58, U+BA64-BA65, U+BA67-BA69, U+BA71, U+BA78, U+BA83-BA84, U+BA8C, U+BAAB-BAAC, U+BAB2, U+BAB9, 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+BB35-BB36, U+BB3D-BB3E, U+BB44-BB45, U+BB49, U+BB4D, U+BB4F, 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+BBC4, U+BBC8, U+BBD0, U+BBD3, U+BBF9, U+BBFF, U+BC02, U+BC09, U+BC0B-BC0D, U+BC0F, U+BC17, U+BC1E, U+BC27, U+BC31, U+BC34, U+BC38, U+BC40-BC41, U+BC43-BC45, U+BC49, U+BC4C-BC4D, U+BC50, U+BC5D, U+BC8B, U+BC8E, U+BC94, U+BC97, U+BC99, U+BCA1, U+BCA7, U+BCB0-BCB1, U+BCB3, U+BCB5, U+BCBC, U+BCCD, U+BCCF-BCD1, U+BCD8, U+BCDC, U+BCF6, U+BD05, U+BD07, U+BD14, U+BD2C, U+BD40, U+BD48-BD49, U+BD4C, U+BD50, U+BD58-BD59, U+BD64, U+BD68, U+BD81, U+BD87, U+BD8A, U+BD91, U+BD9A, U+BD9C, U+BDA4, U+BDB0, U+BDB8, U+BDD4-BDD5, U+BDD8, U+BDDC, U+BDE9, U+BDF4, U+BDF8, U+BE00, U+BE03, U+BE05, U+BE0D, U+BE10, U+BE14, U+BE1C-BE1D, U+BE1F, U+BE45, U+BE4C, U+BE4E, U+BE54-BE55, U+BE5A, U+BE61, U+BE64, U+BE6A, U+BE70-BE71, U+BE73-BE74, U+BE7B, U+BE7D, U+BE84, U+BE8C-BE8D, U+BE8F, U+BE91, U+BE98-BE99, U+BEA8, U+BED1, U+BED4, U+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+BFCD, U+BFD4, U+BFDC, U+BFDF, U+BFE1, U+C03C, U+C051, U+C060, U+C069, U+C090-C091, U+C094, U+C098, U+C0A0-C0A1, U+C0A3, U+C0A5, U+C0AF, U+C0B3, U+C0B5-C0B6, U+C0BC-C0BD, U+C0BF, U+C0C5, U+C0CC, U+C0D8-C0D9, U+C0DB-C0DC, 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+C11F, U+C123, U+C126-C127, U+C12C-C12D, U+C130, U+C136, U+C139, U+C13C, U+C140, U+C148, U+C14C-C14D, U+C155, U+C15C, U+C164-C165, U+C167, U+C169, U+C170, U+C174, U+C178, U+C185, U+C18E, U+C196, U+C19D, U+C19F, U+C1A5, U+C1A8-C1A9, U+C1AC, U+C1B0, U+C1BD, U+C1C4, U+C1C8, U+C1CC, U+C1D4, U+C1D7-C1D8, U+C1E4, U+C1E8, U+C1F0-C1F1, U+C1F3, U+C1FC-C1FD, U+C200, U+C204, U+C20C-C20D, U+C20F, U+C211, U+C219, U+C220, U+C229, U+C22D, U+C22F, U+C231, U+C234, U+C248, U+C250-C251, U+C254, U+C258, U+C260, U+C265, U+C26D, U+C274, U+C27D, U+C27F, U+C281, U+C288-C289, U+C290, U+C298, U+C29B, U+C29D, U+C2A5, U+C2AC-C2AD, U+C2B4, U+C2B7, U+C2B9, U+C2E3, U+C2EB, U+C2ED, U+C2EF, U+C2F1, U+C2FB-C2FC, U+C300, U+C308-C309, U+C30C, U+C314-C315, U+C318, U+C31C, U+C324-C325, U+C328-C329, U+C345, U+C369, U+C36C, U+C372, U+C378-C379, U+C37C-C37D, U+C384, U+C388, U+C38C, U+C3C0, U+C3D8-C3D9, U+C3DC, U+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, U+C468, U+C46C, U+C474-C475, U+C479, U+C480, U+C494, U+C49C, U+C4B8, U+C4BC, U+C4E9, U+C4F1, U+C4FA, U+C4FF-C501, U+C50C, U+C510, U+C514, U+C51C, U+C52C, U+C530, U+C538-C539, U+C53B, U+C53D, U+C54D-C54E, U+C553, U+C555, U+C559, U+C55D, U+C560, U+C564, U+C568, U+C570, U+C573-C575, U+C580, U+C584, U+C587, U+C58C-C58D, U+C58F, U+C595, U+C59C, U+C5A0, U+C5A9, U+C5B9, U+C5BD-C5BE, U+C5C9-C5CA, U+C5CE, U+C5D1, U+C5E0-C5E1, U+C5E3, U+C5E5, U+C5ED-C5EE, U+C5F6-C5F7, U+C5FC-C5FF, U+C607, U+C60C, U+C610, U+C618-C619, U+C61C, U+C62D, U+C630, U+C633-C635, U+C637, U+C63B, U+C641, U+C648, U+C650-C651, U+C653, U+C655, U+C65C-C65D, U+C660, U+C66C, U+C66F, U+C671, U+C679, U+C680, U+C688-C689, U+C68B, U+C68D, U+C695, U+C698, U+C69C, U+C6A4-C6A5, U+C6A7, U+C6B1, U+C6B9-C6BA, U+C6C1, U+C6CD, U+C6D4, U+C6DC-C6DD, U+C6E1, U+C6E8-C6E9, U+C6EC, U+C6F0, U+C6F8, U+C6FD, U+C705, U+C708, U+C70C, U+C714-C715, U+C719, U+C721, U+C724, U+C730-C731, U+C733, U+C735, U+C737, U+C73D, U+C74A, U+C74D, U+C74F, U+C752-C757, U+C75C, U+C760, U+C768, U+C76B, U+C77E, U+C783, U+C785, U+C78A, U+C796-C797, U+C79A, U+C7A3, U+C7A6, U+C7AD, U+C7B4, U+C7BC-C7BD, U+C7C0-C7C1, U+C7C8-C7C9, U+C7CC, U+C7CE, U+C7D0, U+C7D8, U+C7DD, U+C7E4, U+C7E8, U+C7EC, U+C80A, U+C813, U+C81D, U+C820, U+C824, U+C82C-C82D, U+C82F, U+C831, U+C83C, U+C840, U+C848-C849, U+C84D, U+C854, U+C871, U+C87A, U+C881, U+C883, U+C886-C887, U+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+C8E1, U+C8E4, U+C8F5, U+C905-C906, U+C90C, U+C90F, U+C918, U+C934, U+C950-C951, U+C954, U+C958, U+C960-C961, U+C963, U+C96C, U+C970, U+C974, U+C97C, U+C989, U+C98C, U+C999, U+C99B, U+C99D, U+C9C7, U+C9CA, U+C9D6, U+C9D9, U+C9E0, U+C9E2, U+C9E4, U+C9EC-C9ED, U+C9EF-C9F1, U+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, 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, U+CB4C, U+CB50, U+CB58-CB59, U+CB5D, U+CB64, U+CB78-CB79, U+CB9C, U+CBB8, U+CBD4, U+CBE7, U+CBE9, U+CC10, U+CC14, U+CC1C-CC1D, U+CC21-CC22, U+CC27, U+CC2C, U+CC30, U+CC39, U+CC4C, U+CC54-CC55, U+CC57-CC59, U+CC60, U+CC64, U+CC66, U+CC68, U+CC70, U+CC75, U+CC99, U+CCA8-CCA9, U+CCAC, U+CCB5, U+CCB8, U+CCBC, U+CCC4-CCC5, U+CCC7, U+CCC9, U+CCD4, U+CCEC, U+CCF0, U+CD01, U+CD09, U+CD0C, U+CD10, U+CD18-CD19, U+CD1B, U+CD1D, U+CD24, U+CD28, U+CD2C, U+CD39, U+CD60, U+CD64, U+CD6C-CD6D, U+CD6F, U+CD71, U+CD78, U+CD88, U+CDA5, U+CDA7, U+CDCC, U+CDD0, 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+CE5F, U+CE61, U+CE69, U+CE6B, U+CE6D, U+CE75, U+CE7C, U+CE84-CE85, U+CE87, U+CE89, U+CE90-CE91, U+CE98, U+CEA0-CEA1, U+CEA3-CEA5, U+CEAC-CEAD, U+CEC1, U+CEEB-CEEC, U+CEF4-CEF5, U+CEF8, U+CF01, U+CF04, U+CF08, U+CF10-CF11, U+CF13, U+CF15, U+CF20, U+CF2C-CF2D, U+CF2F-CF31, U+CF38, U+CF55, 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+CFE1, U+CFE4, U+CFE8, U+CFF0-CFF1, U+CFF3, U+CFFC, U+D000, U+D004, U+D011, U+D018, U+D02D, U+D035, U+D038, U+D03C, U+D044-D045, U+D047, U+D049, U+D050, U+D054, U+D058, U+D060, U+D06D, U+D070, U+D07D, U+D081, U+D0A5, U+D0B4-D0B5, U+D0B7, U+D0B9, U+D0C4, U+D0C8-D0C9, U+D0D0, U+D0D3-D0D4, U+D0E0, U+D0E4, U+D0EC-D0ED, U+D0EF-D0F1, U+D0F8, U+D10D, U+D131, U+D134, U+D13A, U+D140-D141, U+D143-D145, U+D150, U+D154, U+D15D, U+D15F, U+D161, U+D168, U+D16C, U+D17C, U+D184, U+D188, U+D1A4, U+D1A8, U+D1B0, U+D1B3, U+D1BA, U+D1BC, U+D1C0, U+D1D8, U+D1F4, U+D1F8, U+D207, U+D209, U+D210, U+D22D, U+D230, U+D234, U+D23C-D23D, U+D23F, U+D248, U+D25C, U+D264, U+D281, U+D284, U+D288, U+D290-D291, U+D295, U+D29C, U+D2A0, U+D2A4, U+D2AC, U+D2B1, U+D2BF, U+D2C2, U+D2C9, U+D2CB, U+D2D4, U+D2D8, U+D2DC, U+D2E4-D2E5, U+D2F1, U+D2F4, U+D2F8, U+D300-D301, U+D303, U+D305, U+D30D-D30E, U+D316, U+D31C, U+D31F-D321, U+D325, U+D329, U+D32C, U+D330, U+D338-D339, U+D33B-D33D, U+D344-D345, U+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+D3C4-D3C5, U+D3C8-D3C9, U+D3D0, U+D3D8, U+D3E1, U+D3E3, U+D3F4, U+D3FC-D3FD, U+D3FF, U+D401, U+D408, U+D41D, U+D440, U+D444, U+D460, U+D464, U+D46D, U+D46F, U+D47F, U+D482, U+D489, U+D48B, 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+D508, U+D515, U+D517, U+D53D, U+D540, U+D54C-D54D, U+D54F, U+D551, U+D559, U+D565, U+D569, U+D56B, U+D56D, U+D575, U+D578, U+D57C, U+D584-D585, U+D590, U+D5C8-D5C9, U+D5CC, U+D5D0, U+D5D2, U+D5D8-D5D9, U+D5DB, U+D5E4-D5E5, U+D5E8, U+D5EC, U+D5F4-D5F5, U+D5F7, U+D5F9, U+D601, U+D608, U+D610-D611, U+D613, U+D61C, U+D620, U+D624, U+D62D, U+D639, U+D640, U+D645, U+D648-D649, U+D64B, U+D64D, U+D651, U+D667, U+D669, U+D670-D671, U+D674, U+D683, U+D685, U+D68D, U+D690, U+D694, U+D69D, U+D69F, U+D6A1, U+D6AC, U+D6B0, U+D6B9, U+D6BB, U+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+D735, U+D738, U+D73C, U+D744, U+D747, U+D751, U+D756-D758, U+D760-D761, U+D763, U+D769, U+D774, U+D77C-D77D, U+D781, U+D789, U+D799, U+D79B, U+D79D; }
/* 작은 것들의 마법 학교 — 테두리·버튼·패널은 전작 손그림 조각. CSS 로 그림자·벡터 아이콘을 그리지 않는다. */
:root { --ivory: #F3EBDC; --oat: #DDD0B9; --taupe: #B8A68E; --sage: #A1AB98; --apricot: #E9D4B8; --line: #76634F; --ink: #5b4b3a;
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
  --font: 'MaruBuri', 'Noto Serif KR', 'AppleMyungjo', serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #e9dfc9; color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
#game { position: fixed; inset: 0; } #game canvas { display: block; touch-action: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
img { -webkit-user-drag: none; user-select: none; }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 10; } #ui > * { pointer-events: auto; }
body:not(.ready) #ui { visibility: hidden; }
p { margin: 0; }
/* 종이 조각 */
.pill { display: inline-flex; align-items: center; gap: 5px; border-style: solid; border-width: 14px 20px; border-image: url(art/ui/bar-pill.webp?v=20261109232502) 70 76 fill / 14px 20px stretch; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.pill > * { margin: -9px 0; } .pill img { width: 20px; height: 20px; object-fit: contain; }
.sq { position: relative; width: 58px; height: 58px; background: url(art/ui/btn-sq.webp?v=20261109232502) center / 100% 100% no-repeat; display: grid; place-items: center; }
.sq > img { width: 64%; height: 64%; object-fit: contain; } .sq.on, .sq:active { background-image: url(art/ui/btn-sq-on.webp?v=20261109232502); }
.sq[data-o="friends"] > img { width: 36px; height: 36px; object-fit: cover; object-position: center top; border-radius: 50%; }
.sq em { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 0; font-style: normal; font-size: 11.5px; font-weight: 700; white-space: nowrap; color: var(--ivory); text-shadow: 0 0 3px rgba(80,64,46,.9), 0 0 2px rgba(80,64,46,.9); }
.sq.small { width: 44px; height: 44px; }
.dot { position: absolute; top: -3px; right: -3px; width: 13px; height: 13px; border-radius: 50%; background: #d39d7c; border: 2px solid var(--line); display: none; } .dot.on { display: block; }
.btn { min-height: 44px; padding: 0 16px; border-style: solid; border-width: 14px 18px; border-image: url(art/ui/btn-cream.webp?v=20261109232502) 56 64 fill / 14px 18px stretch; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.btn > * { margin: -14px 0; } .btn.green { border-image-source: url(art/ui/btn-green.webp?v=20261109232502); border-image-slice: 60 70 fill; color: #3e4732; } .btn.off { opacity: .5; } .btn:active { transform: translateY(1px); } .btn.wide { width: 100%; }
.tag { display: inline-block; border-style: solid; border-width: 10px 26px 10px 14px; border-image: url(art/ui/tag.webp?v=20261109232502) 40 70 40 36 fill / 10px 26px 10px 14px stretch; font-size: 15.5px; font-weight: 700; line-height: 1.2; }
/* 위·아래 */
.top { position: fixed; top: calc(var(--st) + 8px); left: calc(var(--sl) + 8px); right: calc(var(--sr) + 8px); display: flex; align-items: center; gap: 2px; }
.top .spacer { flex: 1; } .pill.time { font-size: 12px; }
.goal { position: fixed; top: calc(var(--st) + 60px); left: calc(var(--sl) + 8px); right: calc(var(--sr) + 8px); display: flex; justify-content: center; pointer-events: none; }
.goal .pill { white-space: normal; max-width: 100%; font-size: 12.5px; pointer-events: auto; } .goal .pill > img { flex: none; }
.goal .find { margin: -8px 0 -8px 4px; padding: 2px 8px; border-radius: 10px; background: var(--line); color: var(--ivory); font-size: 12px; font-weight: 700; }
.bottom { position: fixed; left: calc(var(--sl) + 6px); right: calc(var(--sr) + 6px); bottom: calc(var(--sb) + 24px); display: flex; justify-content: center; gap: 10px; }
.news { position: fixed; left: calc(var(--sl) + 10px); right: calc(var(--sr) + 10px); bottom: calc(var(--sb) + 104px); display: flex; justify-content: center; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; pointer-events: none; }
.news span { pointer-events: auto; }   /* 띠 전체가 아니라 글상자만 — 띠가 지도 탭을 먹었다(호수 주변 「안 먹힐 때」) */
.news.show { opacity: 1; transform: none; } .news span { display: inline-block; max-width: 100%; border-style: solid; border-width: 14px 20px; border-image: url(art/ui/bar-pill.webp?v=20261109232502) 70 76 fill / 14px 20px stretch; font-size: 13.5px; line-height: 1.4; padding: 2px 6px; text-align: center; }
/* 시트 */
.sheet { position: fixed; left: calc(var(--sl) + 6px); right: calc(var(--sr) + 6px); bottom: calc(var(--sb) + 6px); max-height: calc(66vh - var(--sb)); max-width: 560px; margin: 0 auto; display: flex; flex-direction: column;
  border-style: solid; border-width: 22px; border-image: url(art/ui/panel.webp?v=20261109232502) 52 fill / 22px stretch; transform: translateY(110%); transition: transform .25s ease-out; z-index: 20; }
.sheet.tall { top: calc(var(--st) + 58px); bottom: auto; max-height: calc(100vh - var(--st) - 58px - var(--sb) - 96px); }   /* 위쪽에 붙고(탭 위치 고정) 내용만큼만 — 사장님 「화면 가리지 않게 필요한 만큼만」 */   /* 탭 위치 고정(사장님 「탭 누를 때마다 위치 바뀌는 거 불편해, 위쪽 고정」) */ .sheet.in { transform: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin: -10px -6px 6px -10px; flex: none; }
.sheet-head .x { width: 36px; height: 36px; display: grid; place-items: center; } .sheet-head .x img { width: 26px; height: 26px; }
.sheet > :last-child { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; min-height: 0; }
.tabs { display: flex; gap: 4px; margin-bottom: 6px; flex: none; }
.tab { flex: 1; min-height: 38px; font-size: 14px; font-weight: 700; border-style: solid; border-width: 10px 12px; border-image: url(art/ui/btn-cream.webp?v=20261109232502) 56 64 fill / 10px 12px stretch; } .tab.on { border-image-source: url(art/ui/btn-green.webp?v=20261109232502); border-image-slice: 60 70 fill; }
.ico { width: 44px; height: 44px; object-fit: contain; flex: none; } .ico.q { display: grid; place-items: center; font-size: 24px; font-weight: 700; color: var(--taupe); }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cell { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; padding: 6px 2px; border-style: solid; border-width: 10px 12px; border-image: url(art/ui/slot.webp?v=20261109232502) 50 fill / 10px 12px stretch; font-size: 12px; }
.cell > * { margin: -6px 0; } .cell em { font-style: normal; font-weight: 700; margin-top: 2px; } .cell b { color: #3e4732; } .cell p { display: none; }
.rows { display: flex; flex-direction: column; gap: 6px; }
.row { display: flex; align-items: center; gap: 8px; padding: 4px 2px; border-bottom: 1px dashed rgba(118,99,79,.35); font-size: 13.5px; } .row > div { flex: 1; min-width: 0; } .row p { font-size: 12.5px; opacity: .85; } .row small { font-size: 11.5px; opacity: .7; } .row.dim { opacity: .55; } .row.done { opacity: .7; } .row .btn { flex: none; font-size: 13px; min-height: 38px; padding: 0 10px; } .row .ok { font-weight: 700; color: #3e4732; }
.port { width: 54px; height: 64px; object-fit: contain; object-position: top; flex: none; } .port.big { width: 110px; height: 150px; }
.hearts img { width: 18px; height: 18px; vertical-align: middle; }
.empty { text-align: center; opacity: .7; padding: 16px 6px; }
/* 조합 */
.first-recipe { padding: 8px 10px; margin-bottom: 8px; border: 1px solid var(--sage); border-radius: 12px; background: #e9eddd; text-align: center; font-size: 12px; }
.first-recipe ol { display: flex; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 6px 0; }
.first-recipe li { display: flex; align-items: center; gap: 3px; } .first-recipe .ico { width: 30px; height: 30px; }
.first-recipe small { color: var(--taupe); } .first-recipe li.done { opacity: .45; } .first-recipe li.done span { text-decoration: line-through; }
.first-recipe p { margin: 0; font-weight: 700; }
.craft .craft-next { outline: 3px solid #b5a04d; outline-offset: -2px; filter: drop-shadow(0 0 5px #e8d784); }
.craft .pot { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 150px; margin-bottom: 6px; }
.craft .potimg { height: 150px; object-fit: contain; transition: transform .3s; } .craft .pot.boil .potimg { animation: boil .3s 3; }
@keyframes boil { 0%, 100% { transform: none; } 50% { transform: translateY(-4px) scale(1.03); } }
.craft .slots { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); display: flex; gap: 6px; }
.craft .slot { width: 54px; height: 54px; background: url(art/ui/slot.webp?v=20261109232502) center / 100% 100% no-repeat; display: grid; place-items: center; } .craft .slot .ico { width: 36px; height: 36px; }
.traits { display: flex; gap: 8px; font-size: 11.5px; margin-bottom: 6px; } .traits span { flex: 1; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.traits i { flex: 1; height: 7px; border-radius: 4px; background: var(--oat); border: 1.5px solid var(--line); overflow: hidden; } .traits b { display: block; height: 100%; background: #d7b46a; }
.mats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.mat { display: flex; flex-direction: column; align-items: center; padding: 4px 2px; border-style: solid; border-width: 10px 12px; border-image: url(art/ui/btn-cream.webp?v=20261109232502) 56 64 fill / 10px 12px stretch; font-size: 12px; } .mat > * { margin: -5px 0; } .mat em { font-style: normal; font-weight: 700; } .mat.off { opacity: .4; } .mat .ico { width: 38px; height: 38px; }
.result { position: absolute; inset: -22px; background: rgba(243,235,220,.92); display: grid; place-items: center; z-index: 2; }
.rcard { text-align: center; padding: 10px; max-width: 300px; } .rcard img { width: 110px; height: 110px; object-fit: contain; } .rcard h3 { margin: 4px 0; } .rcard .tr { font-size: 12.5px; opacity: .8; } .rcard p { font-size: 13.5px; margin: 4px 0 10px; } .rcard .new { color: #3e4732; font-weight: 700; }
/* 친구 */
.shead { display: flex; gap: 10px; margin-bottom: 8px; } .shead h3 { margin: 0 0 2px; font-size: 18px; } .shead small { font-size: 12px; font-weight: 400; opacity: .7; } .shead p { font-size: 13px; } .likes { font-size: 12px !important; opacity: .8; margin-top: 4px; }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .acts .btn { font-size: 13.5px; padding: 0 8px; }
/* 구역 */
.zone p { margin-bottom: 8px; } .pbar { display: flex; gap: 3px; margin: 6px 0; } .pbar i { flex: 1; height: 12px; background: var(--oat); border: 1.5px solid var(--line); border-radius: 3px; } .pbar i.on { background: #d7b46a; }
.cost { display: flex; align-items: center; gap: 4px; font-weight: 700; } .cost img { width: 20px; height: 20px; } .lock { font-weight: 700; color: #8a5f4c; }
.settings { display: flex; flex-direction: column; gap: 8px; } .ver { font-size: 11.5px; opacity: .6; text-align: center; }
.basket p { margin-bottom: 8px; } .basket .grid { margin-bottom: 10px; }
/* 대화 */
.dialog { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; padding: 0 8px calc(var(--sb) + 110px); opacity: 0; transition: opacity .2s; } .dialog.in { opacity: 1; }
.dcard { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; width: min(520px, 100%); border-style: solid; border-width: 20px; border-image: url(art/ui/panel.webp?v=20261109232502) 52 fill / 20px stretch; }
.dport { width: 92px; height: 130px; object-fit: contain; object-position: bottom; flex: none; margin: -30px 0 -6px -8px; }
.dbody { flex: 1; min-width: 0; } .dbody b { display: block; margin-bottom: 2px; } .dbody p { font-size: 14.5px; } .dbody small { display: block; text-align: right; font-size: 11px; opacity: .6; }
/* 현재 대화 묶음이 끝날 때까지 보조 창·알림은 뒤에서 기다린다. */
#ui.dialog-active > .sheet, #ui.dialog-active > .news, #ui.dialog-active > .goal, #ui.dialog-active > .guide, #ui.dialog-active > .guide-hand { visibility: hidden; pointer-events: none; }
body:has(#ui.dialog-active) .notice-ghost { visibility: hidden; }
/* 시작 화면 */
#title { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background: #efe5d0; transition: opacity .6s; padding: 0 16px calc(var(--sb) + 28px); }
#title.out { opacity: 0; pointer-events: none; }
.tart { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tcard { position: relative; z-index: 1; width: min(340px, 100%); text-align: center; padding: 6px 4px; border-style: solid; border-width: 26px; border-image: url(art/ui/panel.webp?v=20261109232502) 52 fill / 26px stretch; }
#title h1 { font-size: 26px; margin: -6px 0 6px; letter-spacing: -0.5px; } .tsub { font-size: 13.5px; margin-bottom: 6px; } .tgo { font-weight: 700; color: #3e4732; }
@media (min-width: 700px) { .bottom { gap: 16px; } }

/* 육성 */
.pill.mana { font-size: 12.5px; } .hint { font-size: 12.5px; opacity: .8; margin-bottom: 6px; }
.xbar { height: 7px; border-radius: 4px; background: var(--oat); border: 1.5px solid var(--line); overflow: hidden; margin: 3px 0; } .xbar i { display: block; height: 100%; background: #a9d6d0; }
.mini { display: inline-block; margin: 2px 2px 0 0; padding: 2px 8px; border-radius: 10px; background: var(--sage); color: #2f3a2c; font-size: 11.5px; font-weight: 700; }
.cell .eat { margin: 4px 0 -4px; padding: 1px 6px; border-radius: 8px; background: var(--line); color: var(--ivory); font-size: 10.5px; font-weight: 700; }
.beds .cell.ready { border-image-source: url(art/ui/btn-sq-on.webp?v=20261109232502); border-image-slice: 60 fill; }
@media (max-width: 420px) { .bottom { gap: 4px; } .sq { width: 54px; height: 54px; } }

/* 9차 — 건물 안·수업·마법진·던전(11/3) */
#exit { position: fixed; left: calc(var(--sl) + 10px); bottom: calc(var(--sb) + 104px); display: none; z-index: 5; font-size: 13px; }
#exit em { font-style: normal; } .inroom #exit { display: inline-flex; } .inroom .news { bottom: calc(var(--sb) + 150px); }
.spells { position: fixed; left: calc(var(--sl) + 6px); right: calc(var(--sr) + 6px); bottom: calc(var(--sb) + 24px); display: none; justify-content: center; flex-wrap: wrap; gap: 8px; z-index: 6; }
.indungeon .spells { display: flex; } .indungeon .bottom { display: none; }
.spell { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-style: solid; border-width: 14px 18px; border-image: url(art/ui/btn-cream.webp?v=20261109232502) 56 64 fill / 14px 18px stretch; font-size: 14px; font-weight: 700; color: var(--ink); opacity: .8; }
.spell > * { margin: -14px 0; } .spell img { width: 26px; height: 26px; object-fit: contain; } .spell.on { opacity: 1; border-image-source: url(art/ui/btn-green.webp?v=20261109232502); border-image-slice: 60 70 fill; color: #3e4732; }
.magic { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(30,26,40,.78); padding: 0 16px; }
.magic .mhead { text-align: center; color: var(--ivory); } .magic .mhead b { font-size: 18px; } .magic .mhead p { font-size: 13px; opacity: .8; }
.magic canvas { border-radius: 50%; box-shadow: 0 0 40px rgba(245,219,145,.35); touch-action: none; }
.magic .mfoot { display: flex; align-items: center; gap: 12px; } .magic .score { color: var(--ivory); font-weight: 700; font-size: 18px; min-width: 52px; text-align: center; }
.magic.done canvas { animation: mdone .7s ease-out forwards; } @keyframes mdone { to { transform: scale(1.15); opacity: 0; } }
.cls .shead { margin-bottom: 4px; }

.pay { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0 8px; } .pay b { min-width: 48px; text-align: center; font-size: 18px; } .pay .mini { font-size: 12.5px; padding: 4px 9px; }
.recipe .shead .ico { width: 64px; height: 64px; flex: none; }

.dacts { width: 100%; display: flex; justify-content: flex-end; gap: 10px; margin: 2px 0 -6px; } .dacts button { display: flex; flex-direction: column; align-items: center; gap: 1px; } .dacts img { width: 44px; height: 44px; object-fit: contain; } .dacts em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink); }
.dacts button { min-width: 44px; max-width: 190px; } .dacts em { white-space: normal; text-align: center; }
.student .acts [data-a=story] { white-space: normal; line-height: 1.3; }

.mote { position: fixed; z-index: 60; pointer-events: none; }
.dialog .dcard { will-change: opacity; }

/* 창 덜 차지하게(사장님 「너무 화면을 다 채우네」) — 높이 58vh, 폭 460, 줄·탭·글자 촘촘히 */
.sheet { max-width: 460px; max-height: calc(58vh - var(--sb)); }
.sheet.tall { max-height: calc(58vh - var(--sb)); }
.sheet-head { margin-bottom: 2px; } .sheet-head .tag { font-size: 14px; }
.tabs { gap: 4px; margin-bottom: 4px; } .tabs .tab { min-height: 34px; font-size: 12.5px; padding: 0 6px; }
.rows { gap: 3px; } .row { padding: 2px 2px; font-size: 12.5px; gap: 6px; } .row p { font-size: 11.5px; } .row small { font-size: 10.5px; } .row .btn { min-height: 32px; font-size: 12px; padding: 0 8px; }
.row .ico, .row > .ico { width: 34px; height: 34px; } .row .port { width: 34px; height: 46px; }
.hint { font-size: 11.5px; margin-bottom: 4px; line-height: 1.35; }
.grid { gap: 5px; } .cell { padding: 4px 2px; font-size: 11.5px; } .cell .ico { width: 34px; height: 34px; }
.shead .port.big { width: 70px; height: 96px; } .shead h3 { font-size: 16px; } .shead p { font-size: 12px; }
.acts .btn, .settings .btn { min-height: 38px; font-size: 13px; }
@media (min-height: 800px) { .sheet, .sheet.tall { max-height: calc(60vh - var(--sb)); } }

/* 수업 미니게임 */
.lesson { position: fixed; inset: 0; z-index: 35; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden; background: rgba(30,26,40,.68); padding: max(8px, env(safe-area-inset-top)) 14px max(8px, env(safe-area-inset-bottom)); }
.lhead { position: relative; width: min(560px, 100%); min-height: 42px; padding: 0 48px; box-sizing: border-box; text-align: center; color: var(--ivory); } .lhead b { font-size: 18px; } .lhead p { margin: 2px 0 0; font-size: 13px; line-height: 1.3; opacity: .9; } .lscore { position: absolute; right: 4px; top: 0; min-width: 36px; padding: 3px 6px; border-radius: 16px; background: rgba(30,26,40,.72); font-size: 20px; font-weight: 700; color: #f5db91; }
.larea { position: relative; width: min(560px, 100%); height: min(52vh, 420px); height: min(52dvh, 420px); min-height: 210px; box-sizing: border-box; border-style: solid; border-width: 14px; border-image: url(art/ui/panel.webp?v=20261109232502) 52 fill / 14px stretch; overflow: hidden; touch-action: none; isolation: isolate; }
.lbg { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .larea::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,.04), rgba(31,28,43,.12)); }
.lstage { position: absolute; inset: 0; } .lresult { position: absolute; z-index: 8; left: 50%; top: 12px; transform: translateX(-50%) scale(.8); min-width: 124px; margin: 0; padding: 6px 12px; border-radius: 18px; background: rgba(38,34,47,.86); color: var(--ivory); text-align: center; font-size: 14px; font-weight: 700; opacity: 0; pointer-events: none; } .larea.is-feedback .lresult { animation: lresult .24s ease-out forwards; } .larea.is-hit .lresult { background: rgba(69,111,75,.9); } .larea.is-miss .lresult { background: rgba(132,76,70,.9); }
.ltarget { position: absolute; z-index: 3; width: 80px; height: 80px; margin: 0; padding: 4px; border: 0; border-radius: 40px; background: rgba(255,255,255,.08); touch-action: manipulation; cursor: pointer; filter: drop-shadow(0 0 9px rgba(245,219,145,.9)); } .ltarget img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; } .lesson-herb .ltarget { animation: lherb 1s ease-in-out infinite; transform-origin: 50% 90%; } .lesson-star .ltarget { animation: lstar .8s ease-in-out infinite alternate; } .lesson-life .ltarget { animation: llife 1.15s ease-in-out infinite; }
.ltarget.hit { animation: lcatchHit .34s ease-out forwards; } .ltarget.miss { animation: lcatchMiss .4s ease-out forwards; } .ltarget:disabled { cursor: default; } @keyframes lpop { from { transform: scale(.3); } to { transform: scale(1); } } @keyframes lherb { 0%,100% { transform: rotate(-5deg) scale(.92); } 50% { transform: rotate(5deg) scale(1.05); } } @keyframes lstar { from { transform: translate(-5px,4px) rotate(-8deg) scale(.9); filter: brightness(.9); } to { transform: translate(6px,-5px) rotate(8deg) scale(1.08); filter: brightness(1.2); } } @keyframes llife { 0%,100% { transform: translateY(5px) scale(.92); } 50% { transform: translateY(-7px) scale(1.08); } } @keyframes lcatchHit { to { transform: scale(1.65) rotate(12deg); opacity: 0; } } @keyframes lcatchMiss { to { transform: translateY(12px) scale(.72); filter: grayscale(.7); opacity: 0; } }
.ltrack { position: absolute; left: 13%; right: 13%; top: 50%; height: 92px; transform: translateY(-50%); } .ltrack::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 8px; transform: translateY(-50%); border: 2px solid rgba(74,64,70,.72); border-radius: 8px; background: rgba(244,231,196,.82); box-shadow: 0 2px 8px rgba(41,35,45,.28); }
.lzone { position: absolute; z-index: 1; top: 4px; bottom: 4px; box-sizing: border-box; border: 3px dashed rgba(255,255,255,.95); border-radius: 12px; background: rgba(139,199,151,.42); box-shadow: 0 0 14px rgba(190,238,180,.8) inset, 0 0 8px rgba(245,239,179,.65); animation: lzone 1s ease-in-out infinite alternate; } .lzone span { position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); width: max-content; max-width: 116px; padding: 2px 6px; border-radius: 9px; background: rgba(38,34,47,.8); color: #fff8d6; font-size: 11px; font-style: normal; text-align: center; }
.lmark { position: absolute; z-index: 4; left: 0; top: 50%; width: 112px; height: 92px; transform: translate(-50%,-50%); pointer-events: none; } .lmark > img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(31,28,43,.5)); animation: lfly 1.1s ease-in-out infinite; } .lesson-wind .lrider-feedback, .lesson-wind .lrider-facing { display: block; width: 100%; height: 100%; } .lesson-wind .lrider-feedback { transform-origin: center; filter: drop-shadow(0 4px 5px rgba(31,28,43,.5)); } .lesson-wind .lrider-facing { position: relative; overflow: hidden; transform-origin: center; } .lesson-wind .lrider-facing.reverse { transform: scaleX(-1); } .lesson-wind .lrider-sheet { position: absolute; left: 0; top: 50%; display: block; width: 400%; height: auto; max-width: none; transform: translate(0,-50%); animation: lriderFrames 666.667ms step-end infinite; } .lesson-wind .larea.is-feedback .lrider-sheet { animation-play-state: paused; } .lesson-wind .lmark.hit .lrider-feedback { animation: ltimingHit .62s ease-out; } .lesson-wind .lmark.miss .lrider-feedback { animation: ltimingMiss .62s ease-out; }
.lesson-alch .ltrack { top: 72%; height: 64px; } .lesson-alch .lzone { top: 1px; bottom: 1px; background: rgba(245,194,109,.44); box-shadow: 0 0 15px rgba(255,218,137,.92) inset; } .lesson-alch .lmark { width: 68px; height: 68px; } .lesson-alch .lmark > img { animation: lflame .55s ease-in-out infinite alternate; filter: drop-shadow(0 0 9px rgba(255,170,78,.95)); } .lesson-alch .lmark.hit > img { animation: ltimingHit .62s ease-out; } .lesson-alch .lmark.miss > img { animation: ltimingMiss .62s ease-out; filter: grayscale(.55) drop-shadow(0 3px 4px rgba(31,28,43,.45)); }
.lguide { position: absolute; left: 16px; right: 16px; bottom: 8px; margin: 0; padding: 5px 8px; border-radius: 12px; background: rgba(38,34,47,.72); color: var(--ivory); text-align: center; font-size: 12px; font-weight: 700; } .lesson-alch .lguide { top: 8px; bottom: auto; } .larea.is-feedback .lzone { animation-play-state: paused; } @keyframes lzone { to { box-shadow: 0 0 22px rgba(210,248,187,.95) inset, 0 0 12px rgba(245,239,179,.85); } } @keyframes lfly { 0%,100% { translate: 0 2px; } 50% { translate: 0 -4px; } } @keyframes lriderFrames { 0% { transform: translate(0,-50%); } 25% { transform: translate(-25%,-50%); } 50% { transform: translate(-50%,-50%); } 75%,100% { transform: translate(-75%,-50%); } } @keyframes lflame { from { scale: .9 1; } to { scale: 1.08 1.13; } } @keyframes ltimingHit { 0%,100% { transform: scale(1); filter: brightness(1); } 45% { transform: scale(1.13); filter: brightness(1.45); } } @keyframes ltimingMiss { 0%,100% { transform: scale(1); filter: brightness(1); } 35%,70% { transform: scale(.92); filter: brightness(.62) grayscale(.55); } } @keyframes lresult { to { transform: translateX(-50%) scale(1); opacity: 1; } }
.lfoot { display: flex; justify-content: center; gap: 8px; width: min(560px, 100%); } .lfoot .btn { min-width: 112px; min-height: 48px; padding: 0 16px; font-size: 14px; touch-action: manipulation; } .lfoot .laction { min-width: 156px; font-size: 16px; font-weight: 700; } .lfoot .laction:disabled { opacity: .58; }
@media (max-height: 500px) { .lesson { gap: 4px; padding-top: 5px; padding-bottom: 5px; } .lhead { min-height: 36px; } .lhead b { font-size: 16px; } .lhead p { font-size: 11px; } .larea { height: 52vh; height: 52dvh; min-height: 178px; } .lfoot .btn { min-height: 44px; } .lguide { bottom: 3px; padding: 3px 6px; } .lesson-alch .lguide { top: 3px; } }

/* 과제 두루마리(지피티 그림) — 사장님 「잘 보이게 공지·과제, 그려서」 */
.goal { top: calc(var(--st) + 56px); }
.quest { position: relative; display: flex; align-items: center; gap: 8px; width: max-content; max-width: min(100%, 420px); padding: 2px 4px; border-style: solid; border-width: 10px 18px; border-image: url(art/ui/q-scroll.webp?v=20261109232502) 34 120 fill / 10px 18px stretch; pointer-events: auto; }
.quest > * { margin: -4px 0; } .quest .qicon { width: 30px; height: 30px; object-fit: contain; flex: none; filter: drop-shadow(0 1px 1px rgba(80,64,46,.35)); }
.quest .qbody { flex: 1; min-width: 0; } .quest summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; } .quest summary::-webkit-details-marker { display: none; } .quest summary::after { content: '⌄'; opacity: .6; } .quest details[open] summary::after { content: '⌃'; } .quest .qbody b { font-size: 12px; color: #8a5f4c; } .quest .qbody p { margin: 6px 0 4px; font-size: 12px; line-height: 1.4; }
.quest summary > span { min-width: 0; } .quest summary em { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 12px; font-style: normal; line-height: 1.35; margin-top: 2px; }
.qfind { display: flex; align-items: center; justify-content: center; flex: none; min-width: 36px; min-height: 36px; } .qfind img { width: 28px; height: 28px; }
.qrows .row .ico { width: 36px; height: 36px; object-fit: contain; } .qrows .qb { width: 26px; height: 26px; flex: none; } .qrows .row.q-lock { opacity: .5; } .qrows .row.q-now { background: rgba(169,214,160,.25); border-radius: 8px; } .qrows .row.q-done { opacity: .7; }
.news .task-reward { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .task-reward img { width: 24px; height: 24px; object-fit: contain; } .task-reward img:first-child { width: 28px; height: 28px; } .task-reward b { font-size: 13px; }
/* 스크롤 막대 숨김(사장님 「누끼 잘 따고」 — 창 옆에 흰 막대) */
.sheet > :last-child { scrollbar-width: none; } .sheet > :last-child::-webkit-scrollbar { display: none; }

.tabs .tab { white-space: nowrap; padding: 0 2px; font-size: 12px; min-width: 0; letter-spacing: -0.3px; }

/* 마법 동물 */
.petcur { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; } .petcur img { width: 90px; height: 90px; object-fit: contain; flex: none; } .petcur h3 { display: inline; font-size: 17px; margin-left: 4px; } .petcur p { font-size: 12.5px; } .petcur small { font-size: 11px; opacity: .8; display: block; margin-top: 2px; }
.petact { display: flex; gap: 6px; margin-bottom: 6px; } .petact .btn { flex: 1; font-size: 13px; }
.egg { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; background: rgba(30,26,40,.6); }
.eggbox { width: min(320px, 90vw); text-align: center; padding: 18px 10px; border-style: solid; border-width: 24px; border-image: url(art/ui/panel.webp?v=20261109232502) 52 fill / 24px stretch; }
.eggimg { width: 180px; height: 180px; object-fit: contain; animation: eggshake 1.4s ease-in-out infinite; filter: drop-shadow(0 0 18px rgba(245,219,145,.9)); }
@keyframes eggshake { 0%,100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.08); } }
.petimg { width: 170px; height: 170px; object-fit: contain; animation: lpop .5s ease-out; } .eggbox b { font-size: 22px; } .eggbox h3 { margin: 2px 0; } .eggbox p { font-size: 13px; margin-bottom: 8px; }

/* 동물 탭 배치(빠졌던 규칙) */
.prem { margin-bottom: 6px; font-size: 13px; } .prem img { width: 28px !important; height: 28px !important; margin-right: 4px; }
.grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 6px; } .gcell { display: flex; flex-direction: column; align-items: center; font-size: 10.5px; } .gcell img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 6px var(--g)); } .gcell b { color: var(--g); font-size: 11px; } .gcell em { font-style: normal; }
.petcur img { animation: petidle 2.2s ease-in-out infinite; } @keyframes petidle { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
/* 짠 하고 나온 동물이 움직인다 */
.eggbox.reveal .petimg { animation: petpop .7s cubic-bezier(.2,1.4,.4,1) both, petwiggle 1.6s ease-in-out .8s infinite; }
@keyframes petwiggle { 0%,100% { transform: translate(-50%, -50%) scale(1) rotate(-4deg); } 25% { transform: translate(-50%, -54%) scale(1.04) rotate(3deg); } 50% { transform: translate(-50%, -50%) scale(1) rotate(4deg); } 75% { transform: translate(-50%, -53%) scale(1.04) rotate(-3deg); } }
.rarevid { position: fixed; inset: 0; z-index: 47; background: #1e1a28; display: grid; place-items: center; } .rarevid video { width: 100%; height: 100%; object-fit: cover; } .rarevid .skip { position: absolute; right: 14px; bottom: calc(var(--sb) + 16px); }
/* 칸 안 이름·개수 겹침(「숫자랑 붙었네」) — 개수는 아이콘 오른쪽 아래 배지, 간격 복구 */
.cell { padding: 6px 2px 4px; gap: 2px; position: relative; } .cell > * { margin: 0; } .cell .ico { width: 38px; height: 38px; } .cell em { font-size: 11px; line-height: 1.1; } .cell b { position: absolute; right: 6px; top: 4px; font-size: 11px; background: var(--sage); color: #2f3a2c; border-radius: 9px; padding: 0 5px; }
.beds { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } .beds .cell .ico { width: 30px; height: 30px; } .beds .cell b { position: static; background: none; padding: 0; font-size: 10.5px; white-space: nowrap; } .beds .cell em { margin: 2px 0; }
.mat { padding: 4px 2px 2px; position: relative; } .mat > * { margin: 0; } .mat em { font-size: 11px; } .mat b { position: absolute; right: 4px; top: 2px; font-size: 10.5px; background: var(--sage); color: #2f3a2c; border-radius: 9px; padding: 0 5px; }
/* 솥: 아는 레시피는 가로 한 줄 스크롤(지피티 답 전 임시) */
.known { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; flex-wrap: nowrap; } .known::-webkit-scrollbar { display: none; }
.kr { flex: none; display: flex; flex-direction: column; align-items: center; width: 58px; padding: 4px 2px; border-style: solid; border-width: 10px 12px; border-image: url(art/ui/slot.webp?v=20261109232502) 50 fill / 10px 12px stretch; font-size: 10.5px; } .kr > * { margin: -5px 0; } .kr .ico { width: 30px; height: 30px; } .kr em { font-style: normal; font-weight: 700; margin-top: 2px; white-space: nowrap; } .kr.off { opacity: .45; }

/* 솥 창 재배치(지피티 10 A안): 레시피북 단추 → 펼치면 가로 줄, 솥 왼쪽·슬롯 오른쪽, 특성 한 줄 */
.known { display: block; padding: 0 0 4px; } .kbook { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 2px 6px; border-radius: 10px; background: var(--oat); border: 1.5px solid var(--line); } .kbook img { width: 22px; height: 22px; }
.known .klist { display: none; gap: 6px; overflow-x: auto; padding: 6px 0 2px; scrollbar-width: none; } .known.open .klist { display: flex; } .klist::-webkit-scrollbar { display: none; }
.craft .pot { height: 104px; justify-content: flex-start; gap: 10px; align-items: center; margin-bottom: 2px; } .craft .potimg { height: 96px; }
.craft .slots { position: static; transform: none; display: flex; gap: 8px; } .craft .traits { margin-bottom: 4px; font-size: 11px; } .craft .mats { gap: 5px; margin-bottom: 6px; }
.cmds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 6px; } .cmd { display: flex; flex-direction: column; align-items: center; padding: 4px 2px; border-style: solid; border-width: 10px 12px; border-image: url(art/ui/slot.webp?v=20261109232502) 50 fill / 10px 12px stretch; font-size: 10.5px; } .cmd > * { margin: -5px 0; } .cmd img { width: 30px; height: 30px; object-fit: contain; } .cmd em { font-style: normal; font-weight: 700; margin-top: 2px; } .cmd small { font-size: 9px; opacity: .7; text-align: center; line-height: 1.1; margin-top: 3px; } .cmd.lock { opacity: .4; } .cmd.used { opacity: .55; }
.indungeon #exit { bottom: calc(var(--sb) + 150px); }

.fieldhud { position: fixed; top: calc(var(--st) + 60px); left: calc(var(--sl) + 8px); right: calc(var(--sr) + 8px); display: none; justify-content: center; gap: 6px; z-index: 5; pointer-events: none; } .infield .fieldhud { display: flex; } .infield .goal { display: none; } .fieldhud .pill { font-size: 12px; } .fieldhud .hearts img { width: 16px; height: 16px; }
.spell small { display: block; font-size: 9.5px; opacity: .7; margin-top: -2px; }
/* 굴·들판 주문 줄 — 작게 두 줄, 나가기는 오른쪽 위로 */
.indungeon .spells { bottom: calc(var(--sb) + 10px); gap: 4px; } .indungeon .spell { min-height: 36px; font-size: 12px; padding: 0 8px; border-width: 12px 14px; } .indungeon .spell img { width: 22px; height: 22px; } .indungeon .spell small { font-size: 9px; }
.indungeon #exit { bottom: auto; top: calc(var(--st) + 98px); left: auto; right: calc(var(--sr) + 10px); } .indungeon .news { bottom: calc(var(--sb) + 112px); }
/* 특수 마법진(11/3) */
.spell.sig { border-image-source: url(art/ui/btn-green.webp?v=20261109232502); border-image-slice: 60 70 fill; } .sigrows .ico { width: 34px; height: 34px; flex: none; }
/* 친구 의뢰 게시판·선물(11/3) */
.orders .tabs .tab { font-size: 12.5px; min-height: 34px; padding: 0 4px; } .orders h4 { margin: 10px 0 4px; font-size: 13.5px; }
.bhead { padding: 4px 2px 6px; border-bottom: 1px dashed rgba(118,99,79,.35); margin-bottom: 6px; } .bhead p { font-size: 12.5px; opacity: .85; margin-top: 2px; } .bhead .mini { margin-left: 6px; }
.bshop { margin-top: 12px; padding-top: 8px; border-top: 1px dashed rgba(118,99,79,.35); } .bshop .btn { margin-top: 6px; display: flex; align-items: center; gap: 6px; justify-content: flex-start; } .bshop .btn .ico { width: 26px; height: 26px; }
.bform { padding: 6px 0 10px; border-bottom: 1px dashed rgba(118,99,79,.35); } .bform .grid3 { display: grid; grid-template-columns: 1.4fr 0.7fr 1fr; gap: 6px; margin: 6px 0; } .bform label { font-size: 11.5px; display: flex; flex-direction: column; gap: 2px; }
.bform select, .bform input, .settings input.nick { font: inherit; font-size: 16px; padding: 6px 8px; border: 2px solid rgba(118,99,79,.45); border-radius: 10px; background: rgba(255,250,240,.9); width: 100%; box-sizing: border-box; } .bform .bnote { margin: 4px 0 8px; } .settings input.nick { margin: 8px 0; }
.evdots { display: flex; gap: 6px; margin-top: 6px; } .evdots span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: rgba(118,99,79,.18); } .evdots span.on { background: #f5db91; box-shadow: 0 0 8px rgba(245,219,145,.8); }
@keyframes unroll { from { clip-path: inset(0 100% 0 0); transform: scaleY(.55); opacity: .4; } 55% { clip-path: inset(0 0 0 0); } 75% { transform: scaleY(1.04); opacity: 1; } to { transform: none; clip-path: inset(0 0 0 0); } }
.quest.unroll { animation: unroll .75s cubic-bezier(.2,.8,.3,1) both; transform-origin: left center; }
/* 알 깨기(11/3) — 무대는 정사각, 안의 것은 전부 가운데 고정(petwiggle 의 translate 가 자리를 밀던 것 고침) */
.eggstage { position: relative; width: 230px; height: 230px; margin: 0 auto; } .eggstage > img, .eggstage > .petwrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }
.eggstage .eggrays { width: 250px; height: 250px; opacity: 0; transition: opacity .4s; animation: none; } .eggstage .eggrays.on { opacity: .85; animation: raysbreathe 1.6s ease-in-out infinite; } @keyframes raysbreathe { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.12); } }
.eggstage .eggring { width: 190px; height: 190px; opacity: .55; animation: none; } .eggstage .eggring.on { opacity: .95; animation: ringspin 6s linear infinite; } .eggstage .eggring.two { width: 230px; height: 230px; animation-direction: reverse; } @keyframes ringspin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.eggstage .eggimg { width: 170px; height: 170px; animation: none; z-index: 2; transition: filter .2s; } .eggimg.knock { animation: eggknock .28s ease-out; } @keyframes eggknock { 0% { transform: translate(-50%,-50%) rotate(0); } 30% { transform: translate(-50%,-52%) rotate(-7deg) scale(1.06); } 60% { transform: translate(-50%,-49%) rotate(6deg) scale(1.03); } 100% { transform: translate(-50%,-50%) rotate(0); } }
.eggimg.c1 { filter: drop-shadow(0 0 10px rgba(245,219,145,.6)) brightness(1.02); } .eggimg.c2 { filter: drop-shadow(0 0 14px rgba(245,219,145,.8)) brightness(1.05) contrast(1.05); } .eggimg.c3 { filter: drop-shadow(0 0 18px rgba(255,240,180,.9)) brightness(1.1) contrast(1.1); } .eggimg.c4 { filter: drop-shadow(0 0 26px #fff2a8) brightness(1.25) contrast(1.15); }
.eggimg.fast { animation: eggfast .12s linear infinite; } @keyframes eggfast { 0%,100% { transform: translate(-50%,-50%) rotate(-8deg) scale(1.08); } 50% { transform: translate(-50%,-50%) rotate(8deg) scale(1.1); } }
.eggimg.split { animation: eggsplit .6s ease-in both; } @keyframes eggsplit { to { transform: translate(-50%,-50%) scale(1.6); opacity: 0; filter: brightness(3); } }
.petwrap { width: 128px; height: 128px; z-index: 1; opacity: 0; transition: opacity .3s, filter .3s; } .petwrap.peek { filter: brightness(0) blur(2px); } .petwrap.shine { filter: brightness(2) blur(0); opacity: 1 !important; } .petwrap.show { opacity: 1; filter: none; z-index: 3; animation: petpopin .7s cubic-bezier(.2,1.4,.4,1) both; } @keyframes petpopin { from { transform: translate(-50%,-50%) scale(.2); } to { transform: translate(-50%,-50%) scale(1.3); } }
.eggbox.reveal .petwrap.show { transform: translate(-50%,-50%) scale(1.3); }
.pethop { width: 128px; height: 128px; background-repeat: no-repeat; background-size: 768px 128px; animation: hopsteps .5s steps(5) infinite; image-rendering: auto; } .pethop.fast { animation-duration: .28s; } .pethop.idle { background-size: 512px 128px; animation: idlesteps 1.1s steps(4) infinite; }
@keyframes hopsteps { to { background-position-x: -640px; } } @keyframes idlesteps { to { background-position-x: -512px; } }
.eggtxt { margin-top: 6px; font-size: 14px; } .eggtxt small { opacity: .7; }
/* 숨은 안내 띠가 탭을 먹고 옛 문장을 되살리던 것(사장님 11/3 「바닥을 탭하면 좀전 텍스트가 계속 뜬다」) */
.news:not(.show) span { pointer-events: none; }
/* 마법진은 한 손으로(사장님 11/3) — 작게, 아래쪽에, 엄지 닿는 자리 */
.magic { justify-content: flex-end; padding-bottom: calc(var(--sb) + 150px); gap: 8px; } .magic .mhead b { font-size: 16px; } .magic .mhead p { font-size: 12px; } .magic .mfoot { display: flex; gap: 10px; align-items: center; } .magic .mfoot .btn { min-height: 40px; }
/* 지팡이 뽑기(11/3) */
.eggstage .wandimg { width: 170px; height: 170px; object-fit: contain; z-index: 3; } .wandimg.spin { animation: wandspin .9s linear infinite; filter: brightness(0) blur(1px); } @keyframes wandspin { from { transform: translate(-50%,-50%) rotate(0) scale(.8); } to { transform: translate(-50%,-50%) rotate(360deg) scale(.8); } }
.wandimg.show { animation: wandpop .8s cubic-bezier(.2,1.4,.4,1) both; filter: drop-shadow(0 0 14px rgba(255,240,180,.9)); } @keyframes wandpop { from { transform: translate(-50%,-50%) rotate(-200deg) scale(.2); } to { transform: translate(-50%,-50%) rotate(0) scale(1.1); } }
/* 솥: 섞기 단추를 세 칸 옆에(11/3) */
.craft .pot .mix { margin-left: auto; min-height: 44px; padding: 0 14px; flex: none; }
/* 오프닝 영상(11/3) */
#opening { position: fixed; inset: 0; z-index: 60; background: #1e1a28; display: grid; place-items: center; transition: opacity .5s; } #opening.out { opacity: 0; pointer-events: none; } #opening video { width: 100%; height: 100%; object-fit: contain; } #opening .skip { position: absolute; right: 16px; bottom: calc(var(--sb) + 18px); color: #fff8e8; font-size: 13px; opacity: .8; }
/* 학교 탭 9개 — 두 줄로 접고 글자는 가운데(사장님 11/3 「가운데 정렬해」, 「지팡ㅇ」로 잘리던 것) */
.school .tabs, .bag .tabs, .orders .tabs { flex-wrap: wrap; justify-content: center; } .school .tabs .tab, .bag .tabs .tab, .orders .tabs .tab { flex: 1 1 auto; min-width: 64px; max-width: 50%; text-align: center; white-space: nowrap; padding: 0 10px; }
/* 창이 한 화면에 안 들어오면 옆에 같은 색 스크롤바(사장님 11/3) */
.sheet > :last-child { scrollbar-width: thin; scrollbar-color: rgba(176,140,86,.75) rgba(118,99,79,.12); scrollbar-gutter: stable; }
.sheet > :last-child::-webkit-scrollbar { width: 8px; } .sheet > :last-child::-webkit-scrollbar-track { background: rgba(118,99,79,.12); border-radius: 6px; } .sheet > :last-child::-webkit-scrollbar-thumb { background: rgba(176,140,86,.75); border-radius: 6px; border: 1px solid rgba(255,250,240,.5); }
/* 섞기 단추가 오른쪽으로 잘리던 것 — 솥·칸을 조금 줄여 한 줄에 */
.craft .pot { gap: 8px; } .craft .potimg { width: 54px; height: 80px; flex: none; } .craft .slots { gap: 6px; flex: 1; min-width: 0; } .craft .slot { width: 0; max-width: 58px; min-width: 0; height: 58px; flex: 1; } .craft .slot .ico { width: 40px; max-width: 100%; height: 40px; } .craft .pot .mix { padding: 0 8px; min-height: 42px; font-size: 14px; margin-left: auto; }
@keyframes rollup { from { clip-path: inset(0 0 0 0); transform: none; } to { clip-path: inset(0 100% 0 0); transform: scaleY(.5); opacity: .4; } }
.quest.rollup { animation: rollup .45s ease-in both; transform-origin: left center; }
.row .ico.dex { width: 44px; height: 44px; }
/* 아래 단추 줄·위 띠가 가로 전체로 지도 탭을 먹던 것(사장님 11/3 「버튼 있는 쪽 맵 클릭이 안 먹혀」) — 단추만 받는다 */
.bottom, .top, .spells, .fieldhud { pointer-events: none; } .bottom > *, .top > *, .spells > *, .fieldhud > * { pointer-events: auto; }
.quest { pointer-events: auto; }
/* 건물로 이동 중 하단 메뉴 바로 위에 고정한다. */
#gobtn { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); z-index: 7; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; white-space: nowrap; font: inherit; font-weight: 700; font-size: 14px; color: #3e4732; border-style: solid; border-width: 12px 16px; border-image: url(art/ui/btn-cream.webp?v=20261109232502) 56 64 fill / 12px 16px stretch; padding: 2px 8px; animation: gopop .35s cubic-bezier(.2,1.4,.4,1) both; } #gobtn img { width: 22px; height: 22px; } @keyframes gopop { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
#ui:has(#gobtn) > .news { bottom: calc(var(--sb) + 252px); }
/* 타이틀 — 잔잔하지만 예쁘게(사장님 11/3). 그림은 천천히 숨 쉬고, 위에 제목, 아래에 시작 */
#title { justify-content: space-between; padding: calc(var(--st) + 56px) 16px calc(var(--sb) + 34px); background: #d9cfb6; }
.tart { animation: tbreathe 24s ease-in-out infinite alternate; transform-origin: 50% 60%; } @keyframes tbreathe { from { transform: scale(1); } to { transform: scale(1.06) translateY(-1.5%); } }
#title::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(60,45,30,.22) 0%, rgba(60,45,30,0) 28%, rgba(60,45,30,0) 70%, rgba(40,30,20,.28) 100%); pointer-events: none; }
.tlogo { position: relative; z-index: 1; text-align: center; color: #fff8e8; text-shadow: 0 1px 0 rgba(90,60,30,.5), 0 2px 14px rgba(70,50,20,.55), 0 0 28px rgba(255,236,180,.45); animation: tfade 1.6s ease-out both; }
.tlogo small { display: block; font-size: 12.5px; letter-spacing: 3px; text-transform: uppercase; opacity: .85; margin-bottom: 2px; }
#title .tlogo h1 { font-size: 36px; margin: 0; letter-spacing: 1px; line-height: 1.15; } .tlogo .tsub { font-size: 13px; margin-top: 8px; opacity: .92; }
.tcard { width: auto; min-width: 180px; padding: 4px 18px; animation: tfade 1.2s ease-out .4s both; } .tgo { font-size: 15px; animation: tpulse 2s ease-in-out infinite; } @keyframes tpulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes tfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tmotes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .tmotes i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, rgba(255,243,196,.95), rgba(255,243,196,0) 70%); animation: tmote 9s ease-in-out infinite; opacity: 0; }
.tmotes i:nth-child(1) { left: 12%; top: 62%; animation-delay: 0s; } .tmotes i:nth-child(2) { left: 28%; top: 70%; animation-delay: 1.3s; width: 7px; height: 7px; } .tmotes i:nth-child(3) { left: 45%; top: 58%; animation-delay: 2.6s; } .tmotes i:nth-child(4) { left: 63%; top: 74%; animation-delay: 3.9s; width: 13px; height: 13px; } .tmotes i:nth-child(5) { left: 78%; top: 60%; animation-delay: 5.2s; } .tmotes i:nth-child(6) { left: 88%; top: 48%; animation-delay: 6.5s; width: 8px; height: 8px; } .tmotes i:nth-child(7) { left: 20%; top: 44%; animation-delay: 7.8s; } .tmotes i:nth-child(8) { left: 55%; top: 40%; animation-delay: 4.5s; width: 6px; height: 6px; }
@keyframes tmote { 0% { transform: translateY(0) translateX(0); opacity: 0; } 15% { opacity: .9; } 85% { opacity: .5; } 100% { transform: translateY(-140px) translateX(18px); opacity: 0; } }
/* 영문판(포털) 글자 넘침 — 위 띠는 작게, 넓은 단추는 줄 바꿈(사장님 11/4 「올리기 전에 이런 거 다」) */
html[class*="portal-"] .pill.time { font-size: 11px; padding-left: 8px; padding-right: 8px; } html[class*="portal-"] .pill.time img { width: 14px; height: 14px; } html[class*="portal-"] .pill.coin { font-size: 13px; } html[class*="portal-"] .pill.mana { font-size: 11.5px; }
.btn.wide { white-space: normal; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; }
html[class*="portal-"] .sheet-head .tag { font-size: 15px; max-width: 70%; white-space: normal; line-height: 1.2; }
html[class*="portal-"] .acts { grid-template-columns: 1fr 1fr; gap: 6px; min-width: 0; } html[class*="portal-"] .acts .btn { white-space: normal; min-width: 0; width: auto; font-size: 12.5px; line-height: 1.2; padding: 4px 6px; }
html[class*="portal-"] .top { gap: 3px; } html[class*="portal-"] .top .pill { padding-left: 7px; padding-right: 7px; } html[class*="portal-"] .pill.coin { font-size: 12px; } html[class*="portal-"] .pill.time { font-size: 10.5px; } html[class*="portal-"] .pill.time img { width: 12px; height: 12px; } html[class*="portal-"] .pill.mana { font-size: 11px; }
/* 위 띠: 코인·시간 알약은 줄어들 수 있고(말줄임), 반짝 기운·톱니는 늘 보인다 */
html[class*="portal-"] .top .pill.coin, html[class*="portal-"] .top .pill.time { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } html[class*="portal-"] .top .pill.mana, html[class*="portal-"] .top .gear, html[class*="portal-"] .top > button { flex: none; }
html[class*="portal-"] .top .pill.coin { flex: 0 0 auto; min-width: 0; max-width: 118px; } html[class*="portal-"] .top .pill.time { flex: 1 1 auto; } html[class*="portal-"] .pill.time img { display: none; }
/* 위 띠(영문): 빈칸(spacer)이 알약을 눌러 찌그러뜨리던 것 — 빈칸 없이 알약은 제 크기, 시간 알약만 줄어든다 */
html[class*="portal-"] .top .spacer { display: none; } html[class*="portal-"] .top .pill.coin { flex: 0 0 auto; max-width: none; overflow: visible; text-overflow: clip; } html[class*="portal-"] .top .pill.time { flex: 0 1 auto; min-width: 60px; margin-right: auto; }
/* 위 띠(영문): 시간은 둘째 줄 가운데, 문구만 감싸는 짧은 알약. */
html[class*="portal-"] .top { flex-wrap: wrap; row-gap: 3px; } html[class*="portal-"] .top .pill.time { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); flex: none; width: max-content; max-width: calc(100% - 16px); min-width: 0; margin: 0; justify-content: center; font-size: 11.5px; overflow: hidden; text-overflow: clip; } html[class*="portal-"] .pill.time img { display: inline; width: 14px; height: 14px; } html[class*="portal-"] .top .pill.coin { margin-right: auto; }
html[class*="portal-"] .goal { top: calc(var(--st) + 98px); }
/* 영문 바구니 칸: 낱말 안에서 끊기지 않게 */
html[class*="portal-"] .cell em, html[class*="portal-"] .mat em { word-break: normal; overflow-wrap: normal; hyphens: none; font-size: 10.5px; letter-spacing: -0.2px; }
/* 조작 안내는 지도 위 작은 띠와 기존 손 그림만 — 닫기 외에는 입력을 통과시킨다. */
#ui > .guide { position: fixed; left: calc(var(--sl) + 12px); right: calc(var(--sr) + 12px); bottom: calc(var(--sb) + 108px); width: max-content; max-width: calc(100% - 24px); margin: 0 auto; display: flex; align-items: center; gap: 6px; z-index: 8; pointer-events: none; border-style: solid; border-width: 10px 14px; border-image: url(art/ui/panel.webp?v=20261109232502) 52 fill / 10px 14px stretch; padding: 0 4px; }
.guide-icon { width: 32px; height: 32px; object-fit: contain; } .guide b { font-size: 13px; font-weight: 600; }
.guide-close { flex: none; width: 32px; height: 32px; pointer-events: auto; } .guide-close img { width: 18px; height: 18px; }
#ui > .guide-hand { --tip-x: 40%; --tip-y: 28%; position: fixed; width: 72px; height: 72px; object-fit: contain; z-index: 9; pointer-events: none; transform: translate(calc(-1 * var(--tip-x)), calc(-1 * var(--tip-y))); transform-origin: var(--tip-x) var(--tip-y); animation: guide-tap 1.5s ease-in-out infinite; }
#ui > .guide-hand[data-art=pick] { --tip-x: 52%; --tip-y: 54%; }
#ui > .guide[hidden], #ui > .guide-hand[hidden] { display: none; }
#ui.guiding > .news, #ui.guiding > .goal { visibility: hidden; }
@keyframes guide-tap { 0%,100% { transform: translate(calc(-1 * var(--tip-x)), calc(-1 * var(--tip-y))) scale(1); } 50% { transform: translate(calc(-1 * var(--tip-x)), calc(-1 * var(--tip-y))) scale(.94); } }
@media (max-height: 500px) { #ui > .guide { left: auto; right: 8px; bottom: calc(var(--sb) + 90px); max-width: 300px; } }
@media (prefers-reduced-motion: reduce) { #ui > .guide-hand { animation: none; } }
/* 안내 띠는 어떤 상태에서도 탭을 받지 않는다(11/4) */
.news, .news span { pointer-events: none !important; }
/* 루미에게 돌아가기(11/4) */
#backbtn { position: fixed; right: calc(var(--sr) + 10px); bottom: calc(var(--sb) + 172px); z-index: 7; display: inline-flex; align-items: center; gap: 4px; font: inherit; font-weight: 700; font-size: 13px; color: #3e4732; border-style: solid; border-width: 12px 14px; border-image: url(art/ui/btn-cream.webp?v=20261109232502) 56 64 fill / 12px 14px stretch; padding: 0 6px; animation: gopop .3s cubic-bezier(.2,1.4,.4,1) both; } #backbtn img { width: 26px; height: 26px; object-fit: contain; object-position: top; }
html[class*="portal-"] #backbtn { bottom: calc(var(--sb) + 180px); }
#backbtn .arr { width: 24px; height: 24px; transition: transform .2s; }
/* 빗자루: 학교 밖에서만, 복귀 나침반 반대쪽에 둔다. */
#flightbtn { position: fixed; left: calc(var(--sl) + 10px); bottom: calc(var(--sb) + 184px); z-index: 7; width: 96px; height: 84px; background-image: url(art/ui/broom-frame.webp?v=20261109232502); }
#flightbtn img { width: 56px; height: 44px; object-fit: contain; } #flightbtn em { font-size: 12px; }
#flightbtn:active { filter: brightness(1.12); }
#ui.ob .bottom .sq:not([data-o=craft]) { opacity: .5; }   /* 첫 90초엔 솥만 밝게(지피티 27) */
.bhead.tmr { margin-top: 10px; opacity: .85; }
.gift-limit { padding: 10px 12px; background: #f5e3c8; border: 1px solid #b88753; border-radius: 8px; line-height: 1.5; font-size: 13px; }
.gift .cell small { font-size: 11px; color: #476042; font-weight: 700; }
  #ui.guiding #flightbtn, #ui.dialog-active #flightbtn, #ui.inroom #flightbtn, #ui.indungeon #flightbtn, #ui.inroom #backbtn, #ui.indungeon #backbtn { display: none; }
/* 넓은 화면에서도 조작 단추는 화면 모서리 대신 하단 메뉴 양옆에 모은다. */
@media (min-width: 900px) {
  .top { width: max-content; max-width: 720px; margin-inline: auto; gap: 8px; }
  .top .spacer { display: none; }
  #flightbtn { left: calc(50% - 316px); bottom: calc(var(--sb) + 24px); }
  #backbtn, html[class*="portal-"] #backbtn { left: calc(50% + 238px); right: auto; bottom: calc(var(--sb) + 30px); animation: none; }
  #exit { left: auto; right: calc(50% + 238px); bottom: calc(var(--sb) + 30px); }
}
.broom-commerce { margin: 8px 0; } .broom-commerce .btn { margin-bottom: 6px; }
body.platform-overlay #ui, body.platform-overlay #ui *, body.platform-overlay #game { pointer-events: none !important; }

/* 네 컷 오프닝(모루식) — src/comic.ts */
.comic { position: fixed; inset: 0; z-index: 65; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: calc(var(--st, 0px) + 14px) 12px calc(var(--sb, 0px) + 12px); background: #efe5d0; opacity: 0; transition: opacity .35s; }
.comic.in { opacity: 1; } .comic.out { opacity: 0; pointer-events: none; }
.cpanels { flex: 1; min-height: 0; width: min(460px, 100%); display: flex; flex-direction: column; gap: 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cp { position: relative; margin: 0; flex: none; opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s; }
.cp.in { opacity: 1; transform: none; }
.cp img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; border: 1.5px solid rgba(118, 99, 79, .6); border-radius: 4px 6px 5px 3px; background: #f8f1dd; }
.cp figcaption { position: absolute; left: 6px; right: 6px; bottom: 6px; font-size: 13px; line-height: 1.45; padding: 6px 10px; background: rgba(248, 241, 221, .93); border: 1px solid rgba(118, 99, 79, .45); border-radius: 6px; color: #4a3f33; }
.cbtns { width: min(460px, 100%); display: flex; gap: 8px; opacity: .35; pointer-events: none; transition: opacity .4s; }
.cbtns [data-a=skip] { flex: 0 0 30%; pointer-events: auto; } .cbtns [data-a=go] { flex: 1; }
.comic.done .cbtns { opacity: 1; pointer-events: auto; }
@media (min-aspect-ratio: 1/1) { .cpanels { width: min(900px, 100%); display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 10px; overflow: visible; } .cp img { aspect-ratio: 16 / 10; } .cbtns { width: min(900px, 100%); } }

/* 루미 독백 — 얼굴·대화창 크게 */
.dialog.mono { align-items: center; padding-bottom: 0; background: rgba(40, 30, 20, .18); }
.dialog.mono .dcard { width: min(640px, 100%); gap: 14px; }
.dialog.mono .dport { width: 170px; height: 230px; margin: -70px 0 -10px -12px; }
.dialog.mono .dbody p { font-size: 18px; line-height: 1.5; }
@media (max-width: 480px) { .dialog.mono .dport { width: 130px; height: 180px; margin: -50px 0 -8px -10px; } .dialog.mono .dbody p { font-size: 16px; } }

/* 앨범 — 날짜별로 접기(사장님 11/4 「너무 길잖아」) */
.album .aday { border-bottom: 1px solid rgba(118, 99, 79, .25); padding: 4px 0; } .album .aday summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; padding: 4px 2px; }
.album .aday summary small { opacity: .6; font-size: 11px; } .album .aday ul { margin: 2px 0 6px; padding-left: 18px; font-size: 13px; line-height: 1.45; } .album .aday li { margin: 2px 0; }
.album .aold { margin-top: 8px; } .album .aold > summary { cursor: pointer; padding: 8px; text-align: center; font-weight: 700; opacity: .8; }

/* 빗자루 대회 HUD · 이야기 진행도 */
#racehud { position: fixed; top: calc(var(--st, 0px) + 150px); left: 0; right: 0; display: flex; justify-content: center; gap: 8px; pointer-events: none; z-index: 8; } #racehud .pill { font-size: 16px; font-weight: 700; } #racehud .pill.late { color: #b9452f; }
.quest .prog { display: block; font-size: 11.5px; opacity: .8; margin-top: 2px; font-weight: 400; }

/* 입학 첫날 소동(firstday.ts) — 말풍선·손가락·그날 밤 컷 */
.sayb { position: fixed; left: 50%; top: calc(var(--st, 0px) + 66px); transform: translate(-50%, -8px); width: min(560px, calc(100% - 24px)); box-sizing: border-box; display: flex; gap: 10px; align-items: center; padding: 8px 14px 8px 8px; background: rgba(251, 246, 234, .97); border: 1.5px solid rgba(118, 99, 79, .55); border-radius: 14px; box-shadow: 0 6px 18px rgba(60, 40, 20, .2); z-index: 12; pointer-events: none; opacity: 0; transition: opacity .25s, transform .25s; }
.sayb.on { opacity: 1; transform: translate(-50%, 0); }
.sayb[hidden] { display: none; }
.sayb img { width: 54px; height: 54px; object-fit: cover; object-position: center 12%; border-radius: 50%; background: #efe3c8; flex: none; border: 1.5px solid rgba(118, 99, 79, .35); }
.sayb b { display: block; font-size: 12px; color: #7a5f45; margin-bottom: 1px; } .sayb p { margin: 0; font-size: 15px; line-height: 1.4; color: #3e3427; }
.sayb.nudge { animation: saynudge .5s; } @keyframes saynudge { 0%, 100% { transform: translate(-50%, 0); } 30% { transform: translate(calc(-50% - 6px), 0); } 60% { transform: translate(calc(-50% + 6px), 0); } }
#ui.infield ~ .sayb, #ui.infield > .sayb { top: calc(var(--st, 0px) + 112px); }
#ui.fd > .goal { visibility: hidden; }
#ui.fd .bottom .sq { opacity: .42; } #ui.fd .bottom .sq.fd-target { opacity: 1; animation: fdpulse 1s ease-in-out infinite; }
@keyframes fdpulse { 50% { transform: scale(1.09); } }
.sheet .mix.fd-target { animation: fdpulse 1s ease-in-out infinite; }
.fdnight { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; gap: 10px; padding: 16px; background: rgba(20, 18, 34, .88); opacity: 0; transition: opacity .5s; cursor: pointer; }
.fdnight.in { opacity: 1; }
.fdnight figure { margin: 0; width: min(520px, 100%); position: relative; } .fdnight img { display: block; width: 100%; border-radius: 8px; border: 1.5px solid rgba(230, 220, 200, .4); }
.fdnight figcaption { margin-top: 10px; color: #f3ead6; font-size: 15px; line-height: 1.55; text-align: center; } .fdnight small { color: #cbbfa6; opacity: .8; }

/* 이야기 장면 톡 대기 — 말풍선에 「톡 ▸」, 투명 막이 탭을 받는다 */
.saytap { position: fixed; inset: 0; z-index: 11; background: transparent; cursor: pointer; }
.sayb.tap { pointer-events: none; padding-right: 54px; }
.sayb.tap::after { content: attr(data-tap); position: absolute; right: 12px; bottom: 8px; font-size: 12px; font-weight: 700; color: #a0794e; animation: taphint 1s ease-in-out infinite; }
@keyframes taphint { 50% { opacity: .35; transform: translateX(3px); } }

/* 첫날 소동 중엔 말풍선 하나만 — 나가기·그만두기·비행 단추·바로 가기 숨김(안내 겹침, 사장님 11/5) */
#ui.fd #exit, #ui.fd #flightbtn, #ui.fd #backbtn { display: none !important; }
#ui.fd.infield > .sayb { top: calc(var(--st, 0px) + 118px); }
/* 첫날 — 교실에서 「반짝 화살」이 먼저 짠(사장님 11/5) */
.fdspell { position: fixed; left: 50%; top: 46%; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity .3s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.fdspell.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.fdspell img { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(255, 226, 140, .9)); animation: fdspin 2.4s ease-in-out infinite; }
.fdspell b { font-size: 22px; color: #fff8e2; text-shadow: 0 2px 0 #7a5f45, 0 0 12px rgba(255, 215, 120, .9); }
@keyframes fdspin { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.08); } }
/* 가로 화면 첫 화면 — 세로 그림을 꽉 채우면 가운데 띠(루미 얼굴)만 남는다(사장님 11/6 「가로 모드일때 첫 화면 얼굴만 나와」).
   가로면 그림 전체를 보이고, 양옆은 같은 그림을 흐리게 깐다 */
@media (orientation: landscape) {
  #title { background: #d9cfb6 url(art/map/title.jpg?v=20261109232502) center / cover no-repeat; }
  .tart { object-fit: contain; -webkit-backdrop-filter: blur(18px) brightness(.92); backdrop-filter: blur(18px) brightness(.92); }
}
@media (orientation: landscape) and (max-height: 500px) {
  #title { padding: calc(var(--st) + 10px) 16px calc(var(--sb) + 12px); }
  #title .tlogo h1 { font-size: 22px; } .tlogo small { font-size: 10px; letter-spacing: 2px; } .tlogo .tsub { font-size: 11px; margin-top: 2px; }
  .tcard { min-width: 150px; padding: 0 12px; }
}