/* ========================================================================== HEARTS EXTREME - Core Styling (Balatro-inspired Premium Theme) ========================================================================== */ /* 0. 폰트 로컬 번들 (Google Fonts → vendor/fonts, 오프라인 실행 + 엄격 CSP 대응) Nunito = 전역 UI 폰트 (400/800/900, cyrillic + latin + latin-ext로 러시아어/독/프/터/폴 등 완전 커버), Share Tech Mono = 숫자/모노 표시용. url()은 이 css 파일 기준 상대경로. */ @font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('vendor/fonts/nunito-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('vendor/fonts/nunito-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('vendor/fonts/nunito-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('vendor/fonts/nunito-800-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('vendor/fonts/nunito-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('vendor/fonts/nunito-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url('vendor/fonts/nunito-900-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url('vendor/fonts/nunito-900-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url('vendor/fonts/nunito-900-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('vendor/fonts/notosans-400-ko.woff2') format('woff2');unicode-range:U+2714, U+2716, U+274C, U+AC00-AC01, U+AC04, U+AC08, U+AC10-AC12, U+AC14-AC16, U+AC19, U+AC1C-AC1D, U+AC31, U+AC70, U+AC74, U+AC77-AC78, U+AC80-AC81, U+AC83, U+AC89, U+AC8C, U+AC9F-ACA0, U+ACA8-ACA9, U+ACAC, U+ACB0, U+ACB8-ACB9, U+ACBC-ACBD, U+ACC4, U+ACE0-ACE1, U+ACE4, U+ACE7-ACE8, U+ACF1, U+ACF3, U+ACF5, U+ACFC-ACFD, U+AD00, U+AD04, U+AD11, U+AD34, U+AD50, U+AD6C-AD6D, U+AD70, U+AD73-AD76, U+AD8C, U+ADA4, U+ADC0, U+ADDC, U+ADE0, U+ADF8-ADF9, U+ADFC, U+AE00, U+AE08-AE09, U+AE0B, U+AE30, U+AE34, U+AE38, U+AE40, U+AE43, U+AE4A, U+AE4C, U+AE4E, U+AE50, U+AE54, U+AE5D, U+AE65, U+AE68, U+AE6C, U+AE7C, U+AEBC, U+AEBE, U+AED0, U+AED8, U+AEF4, U+AF2D, U+AF34, U+AF42-AF43, U+AF49, U+AFB8, U+AFBC, U+AFC0, U+AFC8, U+AFD4, U+AFE8, U+B00C, U+B010, U+B014, U+B044, U+B048, U+B04A, U+B04C, U+B054, U+B05D, U+B07C, U+B080, U+B084, U+B08C-B08D, U+B098, U+B09C, U+B0A0-B0A1, U+B0A8-B0A9, U+B0AB-B0AC, U+B0AE, U+B0B1, U+B0B4, U+B0B8, U+B0BC, U+B0C4-B0C5, U+B0C8-B0C9, U+B0D0, U+B0E5, U+B108, U+B110, U+B113, U+B118, U+B123-B124, U+B137, U+B141, U+B150, U+B178-B179, U+B17C, U+B192-B194, U+B1A8, U+B204, U+B208, U+B20C, U+B214, U+B220, U+B274, U+B290, U+B294, U+B298, U+B2A5-B2A6, U+B2AC, U+B2C8, U+B2CC, U+B2D0, U+B2D8-B2D9, U+B2DD, U+B2E4-B2E5, U+B2E8, U+B2EB-B2EC, U+B2F4-B2F5, U+B2F9, U+B2FF-B300, U+B308, U+B311, U+B313, U+B354-B355, U+B358, U+B35C, U+B364, U+B369, U+B36E, U+B370-B371, U+B374, U+B378, U+B3C4-B3C5, U+B3C8, U+B3CC, U+B3D9, U+B3FC, U+B410, U+B418, U+B41C, U+B420, U+B428-B429, U+B450, U+B454, U+B458, U+B460, U+B465, U+B46C, U+B480, U+B4A4, U+B4B7, U+B4C0, U+B4C8, U+B4DC-B4DD, U+B4E0, U+B4E3-B4E4, U+B4EC, U+B4EF, U+B4F1, U+B514, U+B51C, U+B529, U+B530-B531, U+B538, U+B54C, U+B550, U+B5A0, U+B5A4, U+B5A8, U+B5BB-B5BC, U+B610-B611, U+B6B1, U+B6F0, U+B6F4, U+B728, U+B72C, U+B738, U+B73B, U+B744, U+B760, U+B77C-B77D, U+B780, U+B784, U+B78C-B78D, U+B790-B791, U+B798-B799, U+B79C, U+B7A8-B7A9, U+B7AB, U+B7AD, U+B7B5, U+B7C9, U+B7EC, U+B7F0, U+B7F4, U+B7FC-B7FD, U+B807-B808, U+B80C, U+B81B, U+B824-B825, U+B828, U+B82C, U+B834-B835, U+B837-B838, U+B840, U+B85C-B85D, U+B860, U+B864, U+B86D, U+B86F, U+B871, U+B8B0, U+B8CC, U+B8E8, U+B8EC, U+B8F0, U+B8F9, U+B918, U+B958, U+B960, U+B974, U+B978, U+B97C, U+B984-B985, U+B987, U+B9AC-B9AD, U+B9B0, U+B9B4, U+B9BC-B9BD, U+B9BF, U+B9C1, U+B9C8-B9C9, U+B9CC, U+B9CE, U+B9D0, U+B9DD-B9DE, U+B9E1, U+B9E4-B9E5, U+B9E8, U+B9F5, U+B9F7, U+BA38-BA39, U+BA3C, U+BA48, U+BA4B, U+BA4D-BA4E, U+BA54, U+BA70, U+BA74, U+BA78, U+BA85, U+BA87, U+BAA8-BAA9, U+BAAB, U+BAB0, U+BABB, U+BB34, U+BB36, U+BB38, U+BB3B-BB3C, U+BBAC, U+BBC0, U+BBF8, U+BBFC, U+BBFF-BC00, U+BC0D, U+BC0F, U+BC11, U+BC14-BC16, U+BC18, U+BC1B-BC1D, U+BC1F, U+BC29, U+BC30-BC31, U+BC34, U+BC38, U+BC45, U+BC84, U+BC88, U+BC8C, U+BC94-BC95, U+BC97, U+BCA0-BCA1, U+BCA4, U+BCA8, U+BCB3, U+BCBD, U+BCC0, U+BCC4, U+BCD1, U+BCF4-BCF5, U+BCF8, U+BCFC, U+BD05, U+BD07, U+BD10, U+BD24, U+BD80-BD81, U+BD84, U+BD88, U+BD95, U+BD99, U+BDF0, U+BE0C, U+BE14, U+BE44, U+BE48, U+BE4C, U+BE5B, U+BE60, U+BE68, U+BE7C, U+BE80, U+BE84, U+BE8F-BE90, U+BF51, U+BFB0, U+BFCC, U+BFD0, U+C05C, U+C090, U+C0AC-C0AD, U+C0B0, U+C0B4, U+C0BC-C0BD, U+C0C1, U+C0C8-C0C9, U+C0DD, U+C0F7, U+C11C-C11E, U+C120, U+C124, U+C12D, U+C12F, U+C131, U+C138-C139, U+C13C, U+C140, U+C148, U+C14B, U+C154, U+C158, U+C168, U+C18C-C18D, U+C190, U+C194, U+C1A1, U+C1C4, U+C1E0, U+C20D, U+C20F, U+C218-C219, U+C21C, U+C220, U+C228, U+C22B, U+C26C, U+C27D, U+C288, U+C2A4, U+C2AC, U+C2B5, U+C2B7, U+C2B9, U+C2DC-C2DD, U+C2E0, U+C2E3-C2E4, U+C2EC, U+C2F1, U+C2F6, U+C2F8, U+C30D, U+C313, U+C368, U+C378, U+C37C, U+C4F0, U+C4F4, U+C4F8, U+C500, U+C528-C529, U+C52C, U+C544-C545, U+C548-C54A, U+C54C, U+C555, U+C557-C559, U+C55E, U+C560-C561, U+C564, U+C571, U+C575, U+C57C-C57D, U+C591, U+C5B4-C5B5, U+C5B8-C5B9, U+C5BB-C5BC, U+C5C4-C5C9, U+C5D0-C5D1, U+C5D4, U+C5D8, U+C5E3, U+C5EC-C5ED, U+C5F0, U+C5F4, U+C5FC, U+C5FF-C601, U+C605-C606, U+C608, U+C61B, U+C624, U+C628, U+C62C, U+C62E, U+C634-C635, U+C637, U+C640, U+C644, U+C651, U+C654-C655, U+C65C, 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+C6E8, U+C6F0, U+C6F9, U+C704, U+C708, U+C715, U+C717, U+C720, U+C724, U+C728, U+C73C, U+C740, U+C744, U+C74C, U+C751, U+C758, U+C774-C775, U+C778, U+C77C-C77D, U+C783-C785, U+C787-C789, U+C790-C791, U+C794, U+C798, U+C7A0-C7A1, U+C7A5-C7A6, U+C7AC, U+C7B0, U+C7C1, U+C800-C801, U+C804, U+C808, U+C810-C811, U+C815, U+C81C-C81D, U+C82F, U+C838, U+C84C, U+C870-C871, U+C874, U+C881, U+C885, U+C88B-C88C, U+C8FC-C8FD, U+C900, U+C904, U+C90D, U+C911, U+C918, U+C92C, U+C950, U+C954, U+C988-C989, U+C990, U+C99D, U+C9C0-C9C1, U+C9C4, U+C9C8, U+C9D0-C9D1, U+C9D3, U+C9D5, U+C9DC-C9DD, U+C9E7, U+C9F8, U+CA54, U+CABC-CABD, U+CC0D, U+CC28-CC29, U+CC2C, U+CC38, U+CC3D-CC3E, U+CC44-CC45, U+CC4C, U+CC54, U+CC98, U+CC9C, U+CCA8, U+CCAB, U+CCAD, U+CCB4, U+CCD0, U+CCE4, U+CD08, U+CD1D, U+CD5C, U+CD94-CD95, U+CD98, U+CD9C, U+CDA4, U+CDA9, U+CDB0, U+CDC4, U+CDE8, U+CE20-CE21, U+CE58-CE59, U+CE5C, U+CE60, U+CE68, U+CE6D, U+CE74, U+CE78, U+CE90, U+CE94, U+CE98, U+CEA1, U+CEE4, U+CEE8, U+CEEC, U+CEF4, U+CEF7, U+CF00, U+CF1C, U+CF20, U+CF30, U+CF54, U+CF58, U+CF5C, U+D035, U+D038, U+D050, U+D06C, U+D070, U+D074, U+D07C, U+D0A4, U+D0A8, U+D0AC, U+D0B4, U+D0B7, U+D0B9, U+D0C0-D0C1, U+D0C4, U+D0C8, U+D0D0, U+D0D3, U+D0D5, U+D0DC-D0DD, U+D0EC-D0ED, U+D130, U+D134, U+D138, U+D140-D141, U+D14C-D14D, U+D150, U+D154, U+D15C, U+D15F, U+D1A0, U+D1A4, U+D1B5, U+D22C, U+D280, U+D284, U+D29C, U+D2B8-D2B9, U+D2BC, U+D2C0, U+D2F0, U+D2F4, U+D300, U+D305, U+D30C, U+D310, U+D314, U+D31D, U+D328-D329, U+D338, U+D37C, U+D398, U+D3A0, U+D3B4, U+D3B8, U+D3C9, U+D3D0, U+D3EC-D3ED, U+D3F0, U+D3F4, U+D3FC, U+D45C, U+D478, U+D480, U+D488, U+D48D, U+D504, U+D508, U+D50C, U+D53C-D53D, U+D544, U+D551, U+D558-D559, U+D55C, U+D560, U+D568-D569, U+D56D, U+D574-D575, U+D578, U+D588-D589, U+D5A5, U+D5C8, U+D5D8, U+D5E4, U+D5EC, U+D5F7, U+D600, U+D604, U+D614-D615, U+D638-D639, U+D63C, U+D640, U+D648, U+D654-D655, U+D658, U+D65C, U+D669, U+D68C-D68D, U+D69F, U+D6A8, U+D6C4, U+D6D1, U+D6E8, U+D6FC, U+D718, U+D749, U+D750, U+D754, U+D758, U+D761, U+D765, U+D769, U+D770, U+D788, U+D78C, U+D790, U+D798, U+FF01, U+FF05, U+FF08-FF09, U+FF0B, U+FF0D, U+FF1A-FF1B, U+FF1D, U+FF1F, U+FF5E, U+FFE5;} @font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('vendor/fonts/notosans-800-ko.woff2') format('woff2');unicode-range:U+2714, U+2716, U+274C, U+AC00-AC01, U+AC04, U+AC08, U+AC10-AC12, U+AC14-AC16, U+AC19, U+AC1C-AC1D, U+AC31, U+AC70, U+AC74, U+AC77-AC78, U+AC80-AC81, U+AC83, U+AC89, U+AC8C, U+AC9F-ACA0, U+ACA8-ACA9, U+ACAC, U+ACB0, U+ACB8-ACB9, U+ACBC-ACBD, U+ACC4, U+ACE0-ACE1, U+ACE4, U+ACE7-ACE8, U+ACF1, U+ACF3, U+ACF5, U+ACFC-ACFD, U+AD00, U+AD04, U+AD11, U+AD34, U+AD50, U+AD6C-AD6D, U+AD70, U+AD73-AD76, U+AD8C, U+ADA4, U+ADC0, U+ADDC, U+ADE0, U+ADF8-ADF9, U+ADFC, U+AE00, U+AE08-AE09, U+AE0B, U+AE30, U+AE34, U+AE38, U+AE40, U+AE43, U+AE4A, U+AE4C, U+AE4E, U+AE50, U+AE54, U+AE5D, U+AE65, U+AE68, U+AE6C, U+AE7C, U+AEBC, U+AEBE, U+AED0, U+AED8, U+AEF4, U+AF2D, U+AF34, U+AF42-AF43, U+AF49, U+AFB8, U+AFBC, U+AFC0, U+AFC8, U+AFD4, U+AFE8, U+B00C, U+B010, U+B014, U+B044, U+B048, U+B04A, U+B04C, U+B054, U+B05D, U+B07C, U+B080, U+B084, U+B08C-B08D, U+B098, U+B09C, U+B0A0-B0A1, U+B0A8-B0A9, U+B0AB-B0AC, U+B0AE, U+B0B1, U+B0B4, U+B0B8, U+B0BC, U+B0C4-B0C5, U+B0C8-B0C9, U+B0D0, U+B0E5, U+B108, U+B110, U+B113, U+B118, U+B123-B124, U+B137, U+B141, U+B150, U+B178-B179, U+B17C, U+B192-B194, U+B1A8, U+B204, U+B208, U+B20C, U+B214, U+B220, U+B274, U+B290, U+B294, U+B298, U+B2A5-B2A6, U+B2AC, U+B2C8, U+B2CC, U+B2D0, U+B2D8-B2D9, U+B2DD, U+B2E4-B2E5, U+B2E8, U+B2EB-B2EC, U+B2F4-B2F5, U+B2F9, U+B2FF-B300, U+B308, U+B311, U+B313, U+B354-B355, U+B358, U+B35C, U+B364, U+B369, U+B36E, U+B370-B371, U+B374, U+B378, U+B3C4-B3C5, U+B3C8, U+B3CC, U+B3D9, U+B3FC, U+B410, U+B418, U+B41C, U+B420, U+B428-B429, U+B450, U+B454, U+B458, U+B460, U+B465, U+B46C, U+B480, U+B4A4, U+B4B7, U+B4C0, U+B4C8, U+B4DC-B4DD, U+B4E0, U+B4E3-B4E4, U+B4EC, U+B4EF, U+B4F1, U+B514, U+B51C, U+B529, U+B530-B531, U+B538, U+B54C, U+B550, U+B5A0, U+B5A4, U+B5A8, U+B5BB-B5BC, U+B610-B611, U+B6B1, U+B6F0, U+B6F4, U+B728, U+B72C, U+B738, U+B73B, U+B744, U+B760, U+B77C-B77D, U+B780, U+B784, U+B78C-B78D, U+B790-B791, U+B798-B799, U+B79C, U+B7A8-B7A9, U+B7AB, U+B7AD, U+B7B5, U+B7C9, U+B7EC, U+B7F0, U+B7F4, U+B7FC-B7FD, U+B807-B808, U+B80C, U+B81B, U+B824-B825, U+B828, U+B82C, U+B834-B835, U+B837-B838, U+B840, U+B85C-B85D, U+B860, U+B864, U+B86D, U+B86F, U+B871, U+B8B0, U+B8CC, U+B8E8, U+B8EC, U+B8F0, U+B8F9, U+B918, U+B958, U+B960, U+B974, U+B978, U+B97C, U+B984-B985, U+B987, U+B9AC-B9AD, U+B9B0, U+B9B4, U+B9BC-B9BD, U+B9BF, U+B9C1, U+B9C8-B9C9, U+B9CC, U+B9CE, U+B9D0, U+B9DD-B9DE, U+B9E1, U+B9E4-B9E5, U+B9E8, U+B9F5, U+B9F7, U+BA38-BA39, U+BA3C, U+BA48, U+BA4B, U+BA4D-BA4E, U+BA54, U+BA70, U+BA74, U+BA78, U+BA85, U+BA87, U+BAA8-BAA9, U+BAAB, U+BAB0, U+BABB, U+BB34, U+BB36, U+BB38, U+BB3B-BB3C, U+BBAC, U+BBC0, U+BBF8, U+BBFC, U+BBFF-BC00, U+BC0D, U+BC0F, U+BC11, U+BC14-BC16, U+BC18, U+BC1B-BC1D, U+BC1F, U+BC29, U+BC30-BC31, U+BC34, U+BC38, U+BC45, U+BC84, U+BC88, U+BC8C, U+BC94-BC95, U+BC97, U+BCA0-BCA1, U+BCA4, U+BCA8, U+BCB3, U+BCBD, U+BCC0, U+BCC4, U+BCD1, U+BCF4-BCF5, U+BCF8, U+BCFC, U+BD05, U+BD07, U+BD10, U+BD24, U+BD80-BD81, U+BD84, U+BD88, U+BD95, U+BD99, U+BDF0, U+BE0C, U+BE14, U+BE44, U+BE48, U+BE4C, U+BE5B, U+BE60, U+BE68, U+BE7C, U+BE80, U+BE84, U+BE8F-BE90, U+BF51, U+BFB0, U+BFCC, U+BFD0, U+C05C, U+C090, U+C0AC-C0AD, U+C0B0, U+C0B4, U+C0BC-C0BD, U+C0C1, U+C0C8-C0C9, U+C0DD, U+C0F7, U+C11C-C11E, U+C120, U+C124, U+C12D, U+C12F, U+C131, U+C138-C139, U+C13C, U+C140, U+C148, U+C14B, U+C154, U+C158, U+C168, U+C18C-C18D, U+C190, U+C194, U+C1A1, U+C1C4, U+C1E0, U+C20D, U+C20F, U+C218-C219, U+C21C, U+C220, U+C228, U+C22B, U+C26C, U+C27D, U+C288, U+C2A4, U+C2AC, U+C2B5, U+C2B7, U+C2B9, U+C2DC-C2DD, U+C2E0, U+C2E3-C2E4, U+C2EC, U+C2F1, U+C2F6, U+C2F8, U+C30D, U+C313, U+C368, U+C378, U+C37C, U+C4F0, U+C4F4, U+C4F8, U+C500, U+C528-C529, U+C52C, U+C544-C545, U+C548-C54A, U+C54C, U+C555, U+C557-C559, U+C55E, U+C560-C561, U+C564, U+C571, U+C575, U+C57C-C57D, U+C591, U+C5B4-C5B5, U+C5B8-C5B9, U+C5BB-C5BC, U+C5C4-C5C9, U+C5D0-C5D1, U+C5D4, U+C5D8, U+C5E3, U+C5EC-C5ED, U+C5F0, U+C5F4, U+C5FC, U+C5FF-C601, U+C605-C606, U+C608, U+C61B, U+C624, U+C628, U+C62C, U+C62E, U+C634-C635, U+C637, U+C640, U+C644, U+C651, U+C654-C655, U+C65C, 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+C6E8, U+C6F0, U+C6F9, U+C704, U+C708, U+C715, U+C717, U+C720, U+C724, U+C728, U+C73C, U+C740, U+C744, U+C74C, U+C751, U+C758, U+C774-C775, U+C778, U+C77C-C77D, U+C783-C785, U+C787-C789, U+C790-C791, U+C794, U+C798, U+C7A0-C7A1, U+C7A5-C7A6, U+C7AC, U+C7B0, U+C7C1, U+C800-C801, U+C804, U+C808, U+C810-C811, U+C815, U+C81C-C81D, U+C82F, U+C838, U+C84C, U+C870-C871, U+C874, U+C881, U+C885, U+C88B-C88C, U+C8FC-C8FD, U+C900, U+C904, U+C90D, U+C911, U+C918, U+C92C, U+C950, U+C954, U+C988-C989, U+C990, U+C99D, U+C9C0-C9C1, U+C9C4, U+C9C8, U+C9D0-C9D1, U+C9D3, U+C9D5, U+C9DC-C9DD, U+C9E7, U+C9F8, U+CA54, U+CABC-CABD, U+CC0D, U+CC28-CC29, U+CC2C, U+CC38, U+CC3D-CC3E, U+CC44-CC45, U+CC4C, U+CC54, U+CC98, U+CC9C, U+CCA8, U+CCAB, U+CCAD, U+CCB4, U+CCD0, U+CCE4, U+CD08, U+CD1D, U+CD5C, U+CD94-CD95, U+CD98, U+CD9C, U+CDA4, U+CDA9, U+CDB0, U+CDC4, U+CDE8, U+CE20-CE21, U+CE58-CE59, U+CE5C, U+CE60, U+CE68, U+CE6D, U+CE74, U+CE78, U+CE90, U+CE94, U+CE98, U+CEA1, U+CEE4, U+CEE8, U+CEEC, U+CEF4, U+CEF7, U+CF00, U+CF1C, U+CF20, U+CF30, U+CF54, U+CF58, U+CF5C, U+D035, U+D038, U+D050, U+D06C, U+D070, U+D074, U+D07C, U+D0A4, U+D0A8, U+D0AC, U+D0B4, U+D0B7, U+D0B9, U+D0C0-D0C1, U+D0C4, U+D0C8, U+D0D0, U+D0D3, U+D0D5, U+D0DC-D0DD, U+D0EC-D0ED, U+D130, U+D134, U+D138, U+D140-D141, U+D14C-D14D, U+D150, U+D154, U+D15C, U+D15F, U+D1A0, U+D1A4, U+D1B5, U+D22C, U+D280, U+D284, U+D29C, U+D2B8-D2B9, U+D2BC, U+D2C0, U+D2F0, U+D2F4, U+D300, U+D305, U+D30C, U+D310, U+D314, U+D31D, U+D328-D329, U+D338, U+D37C, U+D398, U+D3A0, U+D3B4, U+D3B8, U+D3C9, U+D3D0, U+D3EC-D3ED, U+D3F0, U+D3F4, U+D3FC, U+D45C, U+D478, U+D480, U+D488, U+D48D, U+D504, U+D508, U+D50C, U+D53C-D53D, U+D544, U+D551, U+D558-D559, U+D55C, U+D560, U+D568-D569, U+D56D, U+D574-D575, U+D578, U+D588-D589, U+D5A5, U+D5C8, U+D5D8, U+D5E4, U+D5EC, U+D5F7, U+D600, U+D604, U+D614-D615, U+D638-D639, U+D63C, U+D640, U+D648, U+D654-D655, U+D658, U+D65C, U+D669, U+D68C-D68D, U+D69F, U+D6A8, U+D6C4, U+D6D1, U+D6E8, U+D6FC, U+D718, U+D749, U+D750, U+D754, U+D758, U+D761, U+D765, U+D769, U+D770, U+D788, U+D78C, U+D790, U+D798, U+FF01, U+FF05, U+FF08-FF09, U+FF0B, U+FF0D, U+FF1A-FF1B, U+FF1D, U+FF1F, U+FF5E, U+FFE5;} @font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url('vendor/fonts/notosans-900-ko.woff2') format('woff2');unicode-range:U+2714, U+2716, U+274C, U+AC00-AC01, U+AC04, U+AC08, U+AC10-AC12, U+AC14-AC16, U+AC19, U+AC1C-AC1D, U+AC31, U+AC70, U+AC74, U+AC77-AC78, U+AC80-AC81, U+AC83, U+AC89, U+AC8C, U+AC9F-ACA0, U+ACA8-ACA9, U+ACAC, U+ACB0, U+ACB8-ACB9, U+ACBC-ACBD, U+ACC4, U+ACE0-ACE1, U+ACE4, U+ACE7-ACE8, U+ACF1, U+ACF3, U+ACF5, U+ACFC-ACFD, U+AD00, U+AD04, U+AD11, U+AD34, U+AD50, U+AD6C-AD6D, U+AD70, U+AD73-AD76, U+AD8C, U+ADA4, U+ADC0, U+ADDC, U+ADE0, U+ADF8-ADF9, U+ADFC, U+AE00, U+AE08-AE09, U+AE0B, U+AE30, U+AE34, U+AE38, U+AE40, U+AE43, U+AE4A, U+AE4C, U+AE4E, U+AE50, U+AE54, U+AE5D, U+AE65, U+AE68, U+AE6C, U+AE7C, U+AEBC, U+AEBE, U+AED0, U+AED8, U+AEF4, U+AF2D, U+AF34, U+AF42-AF43, U+AF49, U+AFB8, U+AFBC, U+AFC0, U+AFC8, U+AFD4, U+AFE8, U+B00C, U+B010, U+B014, U+B044, U+B048, U+B04A, U+B04C, U+B054, U+B05D, U+B07C, U+B080, U+B084, U+B08C-B08D, U+B098, U+B09C, U+B0A0-B0A1, U+B0A8-B0A9, U+B0AB-B0AC, U+B0AE, U+B0B1, U+B0B4, U+B0B8, U+B0BC, U+B0C4-B0C5, U+B0C8-B0C9, U+B0D0, U+B0E5, U+B108, U+B110, U+B113, U+B118, U+B123-B124, U+B137, U+B141, U+B150, U+B178-B179, U+B17C, U+B192-B194, U+B1A8, U+B204, U+B208, U+B20C, U+B214, U+B220, U+B274, U+B290, U+B294, U+B298, U+B2A5-B2A6, U+B2AC, U+B2C8, U+B2CC, U+B2D0, U+B2D8-B2D9, U+B2DD, U+B2E4-B2E5, U+B2E8, U+B2EB-B2EC, U+B2F4-B2F5, U+B2F9, U+B2FF-B300, U+B308, U+B311, U+B313, U+B354-B355, U+B358, U+B35C, U+B364, U+B369, U+B36E, U+B370-B371, U+B374, U+B378, U+B3C4-B3C5, U+B3C8, U+B3CC, U+B3D9, U+B3FC, U+B410, U+B418, U+B41C, U+B420, U+B428-B429, U+B450, U+B454, U+B458, U+B460, U+B465, U+B46C, U+B480, U+B4A4, U+B4B7, U+B4C0, U+B4C8, U+B4DC-B4DD, U+B4E0, U+B4E3-B4E4, U+B4EC, U+B4EF, U+B4F1, U+B514, U+B51C, U+B529, U+B530-B531, U+B538, U+B54C, U+B550, U+B5A0, U+B5A4, U+B5A8, U+B5BB-B5BC, U+B610-B611, U+B6B1, U+B6F0, U+B6F4, U+B728, U+B72C, U+B738, U+B73B, U+B744, U+B760, U+B77C-B77D, U+B780, U+B784, U+B78C-B78D, U+B790-B791, U+B798-B799, U+B79C, U+B7A8-B7A9, U+B7AB, U+B7AD, U+B7B5, U+B7C9, U+B7EC, U+B7F0, U+B7F4, U+B7FC-B7FD, U+B807-B808, U+B80C, U+B81B, U+B824-B825, U+B828, U+B82C, U+B834-B835, U+B837-B838, U+B840, U+B85C-B85D, U+B860, U+B864, U+B86D, U+B86F, U+B871, U+B8B0, U+B8CC, U+B8E8, U+B8EC, U+B8F0, U+B8F9, U+B918, U+B958, U+B960, U+B974, U+B978, U+B97C, U+B984-B985, U+B987, U+B9AC-B9AD, U+B9B0, U+B9B4, U+B9BC-B9BD, U+B9BF, U+B9C1, U+B9C8-B9C9, U+B9CC, U+B9CE, U+B9D0, U+B9DD-B9DE, U+B9E1, U+B9E4-B9E5, U+B9E8, U+B9F5, U+B9F7, U+BA38-BA39, U+BA3C, U+BA48, U+BA4B, U+BA4D-BA4E, U+BA54, U+BA70, U+BA74, U+BA78, U+BA85, U+BA87, U+BAA8-BAA9, U+BAAB, U+BAB0, U+BABB, U+BB34, U+BB36, U+BB38, U+BB3B-BB3C, U+BBAC, U+BBC0, U+BBF8, U+BBFC, U+BBFF-BC00, U+BC0D, U+BC0F, U+BC11, U+BC14-BC16, U+BC18, U+BC1B-BC1D, U+BC1F, U+BC29, U+BC30-BC31, U+BC34, U+BC38, U+BC45, U+BC84, U+BC88, U+BC8C, U+BC94-BC95, U+BC97, U+BCA0-BCA1, U+BCA4, U+BCA8, U+BCB3, U+BCBD, U+BCC0, U+BCC4, U+BCD1, U+BCF4-BCF5, U+BCF8, U+BCFC, U+BD05, U+BD07, U+BD10, U+BD24, U+BD80-BD81, U+BD84, U+BD88, U+BD95, U+BD99, U+BDF0, U+BE0C, U+BE14, U+BE44, U+BE48, U+BE4C, U+BE5B, U+BE60, U+BE68, U+BE7C, U+BE80, U+BE84, U+BE8F-BE90, U+BF51, U+BFB0, U+BFCC, U+BFD0, U+C05C, U+C090, U+C0AC-C0AD, U+C0B0, U+C0B4, U+C0BC-C0BD, U+C0C1, U+C0C8-C0C9, U+C0DD, U+C0F7, U+C11C-C11E, U+C120, U+C124, U+C12D, U+C12F, U+C131, U+C138-C139, U+C13C, U+C140, U+C148, U+C14B, U+C154, U+C158, U+C168, U+C18C-C18D, U+C190, U+C194, U+C1A1, U+C1C4, U+C1E0, U+C20D, U+C20F, U+C218-C219, U+C21C, U+C220, U+C228, U+C22B, U+C26C, U+C27D, U+C288, U+C2A4, U+C2AC, U+C2B5, U+C2B7, U+C2B9, U+C2DC-C2DD, U+C2E0, U+C2E3-C2E4, U+C2EC, U+C2F1, U+C2F6, U+C2F8, U+C30D, U+C313, U+C368, U+C378, U+C37C, U+C4F0, U+C4F4, U+C4F8, U+C500, U+C528-C529, U+C52C, U+C544-C545, U+C548-C54A, U+C54C, U+C555, U+C557-C559, U+C55E, U+C560-C561, U+C564, U+C571, U+C575, U+C57C-C57D, U+C591, U+C5B4-C5B5, U+C5B8-C5B9, U+C5BB-C5BC, U+C5C4-C5C9, U+C5D0-C5D1, U+C5D4, U+C5D8, U+C5E3, U+C5EC-C5ED, U+C5F0, U+C5F4, U+C5FC, U+C5FF-C601, U+C605-C606, U+C608, U+C61B, U+C624, U+C628, U+C62C, U+C62E, U+C634-C635, U+C637, U+C640, U+C644, U+C651, U+C654-C655, U+C65C, 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+C6E8, U+C6F0, U+C6F9, U+C704, U+C708, U+C715, U+C717, U+C720, U+C724, U+C728, U+C73C, U+C740, U+C744, U+C74C, U+C751, U+C758, U+C774-C775, U+C778, U+C77C-C77D, U+C783-C785, U+C787-C789, U+C790-C791, U+C794, U+C798, U+C7A0-C7A1, U+C7A5-C7A6, U+C7AC, U+C7B0, U+C7C1, U+C800-C801, U+C804, U+C808, U+C810-C811, U+C815, U+C81C-C81D, U+C82F, U+C838, U+C84C, U+C870-C871, U+C874, U+C881, U+C885, U+C88B-C88C, U+C8FC-C8FD, U+C900, U+C904, U+C90D, U+C911, U+C918, U+C92C, U+C950, U+C954, U+C988-C989, U+C990, U+C99D, U+C9C0-C9C1, U+C9C4, U+C9C8, U+C9D0-C9D1, U+C9D3, U+C9D5, U+C9DC-C9DD, U+C9E7, U+C9F8, U+CA54, U+CABC-CABD, U+CC0D, U+CC28-CC29, U+CC2C, U+CC38, U+CC3D-CC3E, U+CC44-CC45, U+CC4C, U+CC54, U+CC98, U+CC9C, U+CCA8, U+CCAB, U+CCAD, U+CCB4, U+CCD0, U+CCE4, U+CD08, U+CD1D, U+CD5C, U+CD94-CD95, U+CD98, U+CD9C, U+CDA4, U+CDA9, U+CDB0, U+CDC4, U+CDE8, U+CE20-CE21, U+CE58-CE59, U+CE5C, U+CE60, U+CE68, U+CE6D, U+CE74, U+CE78, U+CE90, U+CE94, U+CE98, U+CEA1, U+CEE4, U+CEE8, U+CEEC, U+CEF4, U+CEF7, U+CF00, U+CF1C, U+CF20, U+CF30, U+CF54, U+CF58, U+CF5C, U+D035, U+D038, U+D050, U+D06C, U+D070, U+D074, U+D07C, U+D0A4, U+D0A8, U+D0AC, U+D0B4, U+D0B7, U+D0B9, U+D0C0-D0C1, U+D0C4, U+D0C8, U+D0D0, U+D0D3, U+D0D5, U+D0DC-D0DD, U+D0EC-D0ED, U+D130, U+D134, U+D138, U+D140-D141, U+D14C-D14D, U+D150, U+D154, U+D15C, U+D15F, U+D1A0, U+D1A4, U+D1B5, U+D22C, U+D280, U+D284, U+D29C, U+D2B8-D2B9, U+D2BC, U+D2C0, U+D2F0, U+D2F4, U+D300, U+D305, U+D30C, U+D310, U+D314, U+D31D, U+D328-D329, U+D338, U+D37C, U+D398, U+D3A0, U+D3B4, U+D3B8, U+D3C9, U+D3D0, U+D3EC-D3ED, U+D3F0, U+D3F4, U+D3FC, U+D45C, U+D478, U+D480, U+D488, U+D48D, U+D504, U+D508, U+D50C, U+D53C-D53D, U+D544, U+D551, U+D558-D559, U+D55C, U+D560, U+D568-D569, U+D56D, U+D574-D575, U+D578, U+D588-D589, U+D5A5, U+D5C8, U+D5D8, U+D5E4, U+D5EC, U+D5F7, U+D600, U+D604, U+D614-D615, U+D638-D639, U+D63C, U+D640, U+D648, U+D654-D655, U+D658, U+D65C, U+D669, U+D68C-D68D, U+D69F, U+D6A8, U+D6C4, U+D6D1, U+D6E8, U+D6FC, U+D718, U+D749, U+D750, U+D754, U+D758, U+D761, U+D765, U+D769, U+D770, U+D788, U+D78C, U+D790, U+D798, U+FF01, U+FF05, U+FF08-FF09, U+FF0B, U+FF0D, U+FF1A-FF1B, U+FF1D, U+FF1F, U+FF5E, U+FFE5;} @font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('vendor/fonts/notosans-400-ja.woff2') format('woff2');unicode-range:U+2714, U+2716, U+274C, U+3005, U+3042, U+3044, U+3046, U+3048, U+304A-3051, U+3053-305B, U+305D-3061, U+3063-3064, U+3066-306B, U+306E-3070, U+3073-3074, U+3076, U+3078-3079, U+307E-3082, U+3084, U+3087-308C, U+308F, U+3092-3093, U+30A2-30A4, U+30A6-30B0, U+30B2-30B5, U+30B7-30BB, U+30BD, U+30BF-30C1, U+30C3-30C4, U+30C6-30CB, U+30CE-30D7, U+30D9-30DA, U+30DC-30E5, U+30E7, U+30E9-30ED, U+30F3, U+30FC, U+4E00, U+4E0A-4E0B, U+4E0D, U+4E21, U+4E2D, U+4E57, U+4E86, U+4E88, U+4E8B, U+4EA4, U+4EBA, U+4ECA-4ECB, U+4ED5-4ED6, U+4ED8, U+4EE3, U+4EE5, U+4EF6, U+4EFB, U+4F1D, U+4F4D-4F4E, U+4F53, U+4F55, U+4F5C, U+4F75, U+4F7F, U+4F9B, U+4FC2, U+4FDD, U+500B, U+5074, U+5099, U+50CF, U+5148, U+5165, U+5168, U+516C, U+5171, U+5185, U+518D, U+51B7, U+51E6, U+51FA, U+5206-5207, U+521D, U+5225, U+5229, U+5236, U+524A, U+524D, U+5270, U+5272, U+529B, U+529F-52A0, U+52B9, U+52D5, U+52DD, U+5316-5317, U+5358, U+5373, U+53C2, U+53CD-53CE, U+53D6-53D7, U+53EF, U+53F7, U+5404, U+5408, U+540C-540D, U+5411, U+542B, U+54C1, U+54E1, U+56DE, U+56F2, U+56FD, U+5728, U+5747, U+578B, U+57FA, U+5831, U+5834, U+5883, U+5897, U+58EB, U+5909, U+5916, U+591A, U+5927, U+592E, U+5931, U+597D, U+5996, U+59A8, U+59CB, U+5B57-5B58, U+5B66, U+5B87, U+5B8C, U+5B99-5B9A, U+5B9F, U+5BB3, U+5BB9, U+5BC4, U+5BC6, U+5BDF, U+5C02, U+5C11, U+5C5E, U+5C65, U+5DE6, U+5DEE, U+5DF1, U+5E2B, U+5E38, U+5E73, U+5E78, U+5EA6-5EA7, U+5F15, U+5F31, U+5F35, U+5F37, U+5F3E, U+5F53, U+5F71, U+5F8C, U+5F93, U+5F97, U+5FC5, U+601D, U+6027, U+60C5, U+60D1, U+60F3, U+610F, U+611F, U+614B, U+6210, U+6226, U+623B, U+624B, U+6253, U+6271, U+629E, U+6301, U+6307, U+6311, U+63A5, U+63D0, U+63DB, U+6442, U+653E, U+6557, U+6570, U+6587, U+65B0, U+65B9, U+65E2, U+65E5, U+65E9, U+660E, U+6613, U+6620, U+6628, U+6642, U+666E, U+66F4, U+66F8, U+6700, U+6709, U+670D, U+671F, U+672A, U+672C-672D, U+6761, U+679A, U+679C, U+67A0, U+67C4, U+68C4, U+697D, U+69CB, U+69D8, U+6A19, U+6A29, U+6A5F, U+6B21, U+6B62-6B63, U+6B74, U+6B8A-6B8B, U+6BB5, U+6BCE, U+6CA1, U+6CC1, U+6CD5, U+6CE8, U+6DF1, U+6DF7, U+6E08, U+6E1B, U+6E21, U+6E2C, U+6E96, U+70B9, U+7121, U+7136, U+71C3, U+7206, U+7248, U+7279, U+72B6, U+72D9, U+72EC, U+7372, U+7387, U+738B, U+73FE, U+7406, U+74B0, U+751F, U+7528, U+7531, U+753B, U+7565, U+756A, U+7570, U+767B, U+7684, U+76EE, U+76F4, U+76F8, U+77AC, U+78BA, U+793A, U+795E, U+7981, U+79C1, U+79D2, U+79D8, U+79FB, U+7A2E, U+7A4D, U+7AE0, U+7AF6, U+7B97, U+7BA1, U+7BC4, U+7CBE, U+7D2F-7D30, U+7D39, U+7D42, U+7D44, U+7D50, U+7D71, U+7D99-7D9A, U+7DCF, U+7DD1-7DD2, U+7DDA, U+7E3E, U+7E70, U+7FFB, U+8005, U+805E, U+808C, U+80FD, U+81EA, U+826F, U+8272, U+84C4, U+884C, U+8853, U+8861, U+8868, U+88FD, U+8907, U+8981, U+898B, U+89B3, U+89E3, U+8A00, U+8A08, U+8A18, U+8A2D, U+8A33, U+8A3C, U+8A66, U+8A70, U+8A72-8A73, U+8A8D, U+8A9E, U+8AAD, U+8AB0, U+8AE6, U+8B72, U+8CE2, U+8D64, U+8D70, U+8D8A, U+8EAB, U+8F1D, U+8FBC, U+8FD1, U+8FD4, U+8FFD, U+9001, U+9003, U+901A, U+901F, U+9023, U+9032, U+904B, U+904E, U+9054, U+9069, U+9078, U+907F, U+90E8, U+9177, U+91C8, U+92ED, U+9332, U+9589, U+958B, U+9593, U+95A2, U+9650, U+9664, U+968E, U+969B, U+96A0, U+96A3, U+96C6, U+96E3, U+96F2, U+9759, U+9762, U+97D3, U+97F3, U+9806, U+9811, U+98A8, U+9A13, U+9AD8, U+9AEA, U+9B45, U+9B54, U+9EC4, U+FF01, U+FF05, U+FF08-FF09, U+FF0B, U+FF0D, U+FF1A-FF1B, U+FF1D, U+FF1F, U+FF5E, U+FFE5;} @font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('vendor/fonts/notosans-800-ja.woff2') format('woff2');unicode-range:U+2714, U+2716, U+274C, U+3005, U+3042, U+3044, U+3046, U+3048, U+304A-3051, U+3053-305B, U+305D-3061, U+3063-3064, U+3066-306B, U+306E-3070, U+3073-3074, U+3076, U+3078-3079, U+307E-3082, U+3084, U+3087-308C, U+308F, U+3092-3093, U+30A2-30A4, U+30A6-30B0, U+30B2-30B5, U+30B7-30BB, U+30BD, U+30BF-30C1, U+30C3-30C4, U+30C6-30CB, U+30CE-30D7, U+30D9-30DA, U+30DC-30E5, U+30E7, U+30E9-30ED, U+30F3, U+30FC, U+4E00, U+4E0A-4E0B, U+4E0D, U+4E21, U+4E2D, U+4E57, U+4E86, U+4E88, U+4E8B, U+4EA4, U+4EBA, U+4ECA-4ECB, U+4ED5-4ED6, U+4ED8, U+4EE3, U+4EE5, U+4EF6, U+4EFB, U+4F1D, U+4F4D-4F4E, U+4F53, U+4F55, U+4F5C, U+4F75, U+4F7F, U+4F9B, U+4FC2, U+4FDD, U+500B, U+5074, U+5099, U+50CF, U+5148, U+5165, U+5168, U+516C, U+5171, U+5185, U+518D, U+51B7, U+51E6, U+51FA, U+5206-5207, U+521D, U+5225, U+5229, U+5236, U+524A, U+524D, U+5270, U+5272, U+529B, U+529F-52A0, U+52B9, U+52D5, U+52DD, U+5316-5317, U+5358, U+5373, U+53C2, U+53CD-53CE, U+53D6-53D7, U+53EF, U+53F7, U+5404, U+5408, U+540C-540D, U+5411, U+542B, U+54C1, U+54E1, U+56DE, U+56F2, U+56FD, U+5728, U+5747, U+578B, U+57FA, U+5831, U+5834, U+5883, U+5897, U+58EB, U+5909, U+5916, U+591A, U+5927, U+592E, U+5931, U+597D, U+5996, U+59A8, U+59CB, U+5B57-5B58, U+5B66, U+5B87, U+5B8C, U+5B99-5B9A, U+5B9F, U+5BB3, U+5BB9, U+5BC4, U+5BC6, U+5BDF, U+5C02, U+5C11, U+5C5E, U+5C65, U+5DE6, U+5DEE, U+5DF1, U+5E2B, U+5E38, U+5E73, U+5E78, U+5EA6-5EA7, U+5F15, U+5F31, U+5F35, U+5F37, U+5F3E, U+5F53, U+5F71, U+5F8C, U+5F93, U+5F97, U+5FC5, U+601D, U+6027, U+60C5, U+60D1, U+60F3, U+610F, U+611F, U+614B, U+6210, U+6226, U+623B, U+624B, U+6253, U+6271, U+629E, U+6301, U+6307, U+6311, U+63A5, U+63D0, U+63DB, U+6442, U+653E, U+6557, U+6570, U+6587, U+65B0, U+65B9, U+65E2, U+65E5, U+65E9, U+660E, U+6613, U+6620, U+6628, U+6642, U+666E, U+66F4, U+66F8, U+6700, U+6709, U+670D, U+671F, U+672A, U+672C-672D, U+6761, U+679A, U+679C, U+67A0, U+67C4, U+68C4, U+697D, U+69CB, U+69D8, U+6A19, U+6A29, U+6A5F, U+6B21, U+6B62-6B63, U+6B74, U+6B8A-6B8B, U+6BB5, U+6BCE, U+6CA1, U+6CC1, U+6CD5, U+6CE8, U+6DF1, U+6DF7, U+6E08, U+6E1B, U+6E21, U+6E2C, U+6E96, U+70B9, U+7121, U+7136, U+71C3, U+7206, U+7248, U+7279, U+72B6, U+72D9, U+72EC, U+7372, U+7387, U+738B, U+73FE, U+7406, U+74B0, U+751F, U+7528, U+7531, U+753B, U+7565, U+756A, U+7570, U+767B, U+7684, U+76EE, U+76F4, U+76F8, U+77AC, U+78BA, U+793A, U+795E, U+7981, U+79C1, U+79D2, U+79D8, U+79FB, U+7A2E, U+7A4D, U+7AE0, U+7AF6, U+7B97, U+7BA1, U+7BC4, U+7CBE, U+7D2F-7D30, U+7D39, U+7D42, U+7D44, U+7D50, U+7D71, U+7D99-7D9A, U+7DCF, U+7DD1-7DD2, U+7DDA, U+7E3E, U+7E70, U+7FFB, U+8005, U+805E, U+808C, U+80FD, U+81EA, U+826F, U+8272, U+84C4, U+884C, U+8853, U+8861, U+8868, U+88FD, U+8907, U+8981, U+898B, U+89B3, U+89E3, U+8A00, U+8A08, U+8A18, U+8A2D, U+8A33, U+8A3C, U+8A66, U+8A70, U+8A72-8A73, U+8A8D, U+8A9E, U+8AAD, U+8AB0, U+8AE6, U+8B72, U+8CE2, U+8D64, U+8D70, U+8D8A, U+8EAB, U+8F1D, U+8FBC, U+8FD1, U+8FD4, U+8FFD, U+9001, U+9003, U+901A, U+901F, U+9023, U+9032, U+904B, U+904E, U+9054, U+9069, U+9078, U+907F, U+90E8, U+9177, U+91C8, U+92ED, U+9332, U+9589, U+958B, U+9593, U+95A2, U+9650, U+9664, U+968E, U+969B, U+96A0, U+96A3, U+96C6, U+96E3, U+96F2, U+9759, U+9762, U+97D3, U+97F3, U+9806, U+9811, U+98A8, U+9A13, U+9AD8, U+9AEA, U+9B45, U+9B54, U+9EC4, U+FF01, U+FF05, U+FF08-FF09, U+FF0B, U+FF0D, U+FF1A-FF1B, U+FF1D, U+FF1F, U+FF5E, U+FFE5;} @font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url('vendor/fonts/notosans-900-ja.woff2') format('woff2');unicode-range:U+2714, U+2716, U+274C, U+3005, U+3042, U+3044, U+3046, U+3048, U+304A-3051, U+3053-305B, U+305D-3061, U+3063-3064, U+3066-306B, U+306E-3070, U+3073-3074, U+3076, U+3078-3079, U+307E-3082, U+3084, U+3087-308C, U+308F, U+3092-3093, U+30A2-30A4, U+30A6-30B0, U+30B2-30B5, U+30B7-30BB, U+30BD, U+30BF-30C1, U+30C3-30C4, U+30C6-30CB, U+30CE-30D7, U+30D9-30DA, U+30DC-30E5, U+30E7, U+30E9-30ED, U+30F3, U+30FC, U+4E00, U+4E0A-4E0B, U+4E0D, U+4E21, U+4E2D, U+4E57, U+4E86, U+4E88, U+4E8B, U+4EA4, U+4EBA, U+4ECA-4ECB, U+4ED5-4ED6, U+4ED8, U+4EE3, U+4EE5, U+4EF6, U+4EFB, U+4F1D, U+4F4D-4F4E, U+4F53, U+4F55, U+4F5C, U+4F75, U+4F7F, U+4F9B, U+4FC2, U+4FDD, U+500B, U+5074, U+5099, U+50CF, U+5148, U+5165, U+5168, U+516C, U+5171, U+5185, U+518D, U+51B7, U+51E6, U+51FA, U+5206-5207, U+521D, U+5225, U+5229, U+5236, U+524A, U+524D, U+5270, U+5272, U+529B, U+529F-52A0, U+52B9, U+52D5, U+52DD, U+5316-5317, U+5358, U+5373, U+53C2, U+53CD-53CE, U+53D6-53D7, U+53EF, U+53F7, U+5404, U+5408, U+540C-540D, U+5411, U+542B, U+54C1, U+54E1, U+56DE, U+56F2, U+56FD, U+5728, U+5747, U+578B, U+57FA, U+5831, U+5834, U+5883, U+5897, U+58EB, U+5909, U+5916, U+591A, U+5927, U+592E, U+5931, U+597D, U+5996, U+59A8, U+59CB, U+5B57-5B58, U+5B66, U+5B87, U+5B8C, U+5B99-5B9A, U+5B9F, U+5BB3, U+5BB9, U+5BC4, U+5BC6, U+5BDF, U+5C02, U+5C11, U+5C5E, U+5C65, U+5DE6, U+5DEE, U+5DF1, U+5E2B, U+5E38, U+5E73, U+5E78, U+5EA6-5EA7, U+5F15, U+5F31, U+5F35, U+5F37, U+5F3E, U+5F53, U+5F71, U+5F8C, U+5F93, U+5F97, U+5FC5, U+601D, U+6027, U+60C5, U+60D1, U+60F3, U+610F, U+611F, U+614B, U+6210, U+6226, U+623B, U+624B, U+6253, U+6271, U+629E, U+6301, U+6307, U+6311, U+63A5, U+63D0, U+63DB, U+6442, U+653E, U+6557, U+6570, U+6587, U+65B0, U+65B9, U+65E2, U+65E5, U+65E9, U+660E, U+6613, U+6620, U+6628, U+6642, U+666E, U+66F4, U+66F8, U+6700, U+6709, U+670D, U+671F, U+672A, U+672C-672D, U+6761, U+679A, U+679C, U+67A0, U+67C4, U+68C4, U+697D, U+69CB, U+69D8, U+6A19, U+6A29, U+6A5F, U+6B21, U+6B62-6B63, U+6B74, U+6B8A-6B8B, U+6BB5, U+6BCE, U+6CA1, U+6CC1, U+6CD5, U+6CE8, U+6DF1, U+6DF7, U+6E08, U+6E1B, U+6E21, U+6E2C, U+6E96, U+70B9, U+7121, U+7136, U+71C3, U+7206, U+7248, U+7279, U+72B6, U+72D9, U+72EC, U+7372, U+7387, U+738B, U+73FE, U+7406, U+74B0, U+751F, U+7528, U+7531, U+753B, U+7565, U+756A, U+7570, U+767B, U+7684, U+76EE, U+76F4, U+76F8, U+77AC, U+78BA, U+793A, U+795E, U+7981, U+79C1, U+79D2, U+79D8, U+79FB, U+7A2E, U+7A4D, U+7AE0, U+7AF6, U+7B97, U+7BA1, U+7BC4, U+7CBE, U+7D2F-7D30, U+7D39, U+7D42, U+7D44, U+7D50, U+7D71, U+7D99-7D9A, U+7DCF, U+7DD1-7DD2, U+7DDA, U+7E3E, U+7E70, U+7FFB, U+8005, U+805E, U+808C, U+80FD, U+81EA, U+826F, U+8272, U+84C4, U+884C, U+8853, U+8861, U+8868, U+88FD, U+8907, U+8981, U+898B, U+89B3, U+89E3, U+8A00, U+8A08, U+8A18, U+8A2D, U+8A33, U+8A3C, U+8A66, U+8A70, U+8A72-8A73, U+8A8D, U+8A9E, U+8AAD, U+8AB0, U+8AE6, U+8B72, U+8CE2, U+8D64, U+8D70, U+8D8A, U+8EAB, U+8F1D, U+8FBC, U+8FD1, U+8FD4, U+8FFD, U+9001, U+9003, U+901A, U+901F, U+9023, U+9032, U+904B, U+904E, U+9054, U+9069, U+9078, U+907F, U+90E8, U+9177, U+91C8, U+92ED, U+9332, U+9589, U+958B, U+9593, U+95A2, U+9650, U+9664, U+968E, U+969B, U+96A0, U+96A3, U+96C6, U+96E3, U+96F2, U+9759, U+9762, U+97D3, U+97F3, U+9806, U+9811, U+98A8, U+9A13, U+9AD8, U+9AEA, U+9B45, U+9B54, U+9EC4, U+FF01, U+FF05, U+FF08-FF09, U+FF0B, U+FF0D, U+FF1A-FF1B, U+FF1D, U+FF1F, U+FF5E, U+FFE5;} @font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('vendor/fonts/notosans-400-zh-hans.woff2') format('woff2');unicode-range:U+200B, U+2714, U+2716, U+274C, U+4E00, U+4E09-4E0B, U+4E0D-4E0E, U+4E11, U+4E13-4E14, U+4E1C, U+4E22, U+4E24, U+4E27, U+4E2A, U+4E2D, U+4E3A-4E3B, U+4E45, U+4E49, U+4E4B, U+4E5F-4E60, U+4E66, U+4E86, U+4E89, U+4E8C, U+4E8E, U+4E91, U+4E94, U+4E9B, U+4EA4, U+4EAB, U+4EBA, U+4EC5, U+4ECA-4ECB, U+4ECE, U+4ED4, U+4ED6, U+4ED9, U+4EE3, U+4EE5, U+4EEC, U+4EF6, U+4EFB, U+4F18, U+4F1A, U+4F20, U+4F46, U+4F4D-4F4F, U+4F53, U+4F55, U+4F59, U+4F5C, U+4F60, U+4F73, U+4F7F, U+4F9B, U+4FDD, U+4FE1, U+5012, U+5145, U+5148, U+514B, U+514D, U+5165, U+5168, U+5171, U+5173, U+5176-5178, U+5185, U+518D, U+519B, U+51A0, U+51B5, U+51C0, U+51C6, U+51CF, U+51FA-51FB, U+5206, U+5219, U+521B, U+5220, U+5229, U+522B, U+5230, U+5236, U+523B, U+524D, U+5269, U+526F, U+529B, U+529E-52A1, U+52B1, U+5305, U+5316, U+5339, U+5355, U+5361, U+5373, U+5385, U+53BB, U+53C2, U+53C8, U+53CA, U+53CC-53CD, U+53D1, U+53D6-53D7, U+53E5-53E6, U+53EA, U+53EF, U+53F7, U+5404, U+5408, U+540C-540E, U+5417, U+5426-5427, U+542B, U+542F, U+544A, U+5458, U+547D, U+548C, U+5492, U+54C8, U+559C, U+5668, U+56DE, U+56E0, U+56FD-56FE, U+5706, U+5728, U+5730, U+573A, U+5747, U+578B, U+57FA, U+5883, U+589E, U+58A9, U+58F0, U+5907, U+590D, U+5916, U+591A, U+5927, U+5929-592A, U+592E, U+5931, U+5934, U+5947, U+594F, U+5956-5957, U+5973, U+597D, U+5982, U+59A8, U+59CB, U+59D3, U+5B50, U+5B57-5B58, U+5B66, U+5B83, U+5B8C, U+5B98, U+5B9A, U+5B9E, U+5BA1, U+5BB6, U+5BB9, U+5BDF, U+5BF9, U+5BFC, U+5C06, U+5C0A, U+5C0F, U+5C11, U+5C1A, U+5C1D, U+5C31, U+5C3D, U+5C40, U+5C5E, U+5DE6, U+5DEE, U+5DF1-5DF2, U+5E08, U+5E26, U+5E38, U+5E72-5E73, U+5E76, U+5E78, U+5EA6, U+5F00, U+5F03, U+5F0A, U+5F0F, U+5F15, U+5F20, U+5F31, U+5F39-5F3A, U+5F53, U+5F55, U+5F62, U+5F69, U+5F71, U+5F80, U+5F85, U+5F88, U+5F92, U+5F97, U+5FC3, U+5FC5, U+5FD7, U+5FEB, U+6001, U+601D, U+6027, U+602A, U+603B, U+6062, U+606D, U+606F-6070, U+60A8, U+60C5, U+60D1, U+60F3, U+610F, U+611F, U+613F, U+620F-6211, U+6216, U+6218, U+6240, U+624B, U+624D, U+6251, U+6253, U+6263, U+626B, U+626D, U+6270, U+627E-627F, U+6293, U+62E9, U+62EC, U+62FF, U+6301, U+6307, U+6311, U+635F, U+6362, U+636E, U+6389, U+6392, U+63A5, U+63CF-63D0, U+64AD, U+6536, U+6539, U+653E, U+6548, U+6559, U+6570, U+6574, U+6587, U+65B0, U+65B9, U+65E0, U+65E5, U+65E8-65E9, U+65F6, U+6628, U+662F, U+663E, U+666E, U+667A, U+6682, U+6697, U+66F4, U+6700, U+6709, U+670D, U+671B, U+671F, U+672A, U+672C, U+672F, U+6735, U+673A, U+675F, U+6761, U+6765, U+6781, U+679C, U+67E5, U+6807, U+6837, U+6839, U+683C, U+6843, U+6846, U+6848, U+684C, U+6863, U+6885, U+68C0, U+68CB, U+699C, U+6A21, U+6B21-6B22, U+6B62-6B64, U+6B8A, U+6BCF, U+6BD4, U+6C38, U+6C89, U+6CA1, U+6CB9, U+6CD5, U+6CE8, U+6D0B, U+6D3B, U+6D4B, U+6D77, U+6D88, U+6DF7, U+6DFB, U+6E05, U+6E38, U+6EE1, U+6F14, U+6FC0, U+7075, U+70B8-70B9, U+70BD, U+70ED, U+7136, U+7231, U+7247-7248, U+724C, U+7279, U+72B6, U+72EC, U+731C, U+7387, U+738B, U+73A9, U+73AF-73B0, U+7403, U+7406, U+751F, U+7528, U+7531, U+7537, U+753B, U+754C, U+7559, U+7565, U+75BE, U+767B, U+7684, U+76D8, U+76EE, U+76F4, U+76F8, U+770B, U+771F, U+77AC, U+7801, U+7840, U+786E, U+788D, U+793A, U+795E, U+7981, U+79BB, U+79CD, U+79D2, U+79D8, U+79E9, U+79EF-79F0, U+7A0B, U+7A7A, U+7ACB, U+7ADE, U+7AEF, U+7B26, U+7B2C, U+7B56, U+7B80, U+7B97, U+7BA1, U+7C7B, U+7CBE, U+7CFB, U+7D2F, U+7EA2, U+7EAA, U+7EB8, U+7EBF, U+7EC4, U+7EC6, U+7EC8, U+7ECD, U+7ECF, U+7ED3, U+7ED9, U+7EDF, U+7EE7, U+7EE9, U+7EED, U+7EFC, U+7EFF, U+7F16, U+7F51, U+7F6E, U+7FFB, U+8000, U+8005, U+800C, U+8017, U+804C, U+80A4, U+80DC, U+80FD, U+8138, U+81EA, U+81F3-81F4, U+8272, U+82B1, U+82E5, U+8377, U+8389, U+83B7, U+83DC, U+85CF, U+8679, U+884C, U+8861, U+88AB, U+88C5, U+897F, U+8981, U+89C2, U+89C4, U+89C6, U+89C9, U+89D2, U+89E3, U+8A00, U+8BA1, U+8BA4, U+8BA9, U+8BB0, U+8BBA, U+8BBE, U+8BC1, U+8BC9, U+8BD1, U+8BD5, U+8BDD, U+8BE5-8BE6, U+8BED, U+8BEF, U+8BF1, U+8BF7, U+8BFB, U+8C01, U+8C03, U+8C22, U+8D25, U+8D4C, U+8D5B, U+8D62, U+8D70, U+8D77, U+8D85, U+8DB3, U+8DDF, U+8DF3, U+8EB2, U+8F6C, U+8F6E, U+8F7D, U+8F9E, U+8FB9, U+8FBE, U+8FC7, U+8FCE, U+8FD0-8FD1, U+8FD4, U+8FD8-8FD9, U+8FDB, U+8FDE, U+8FF0, U+8FF7, U+9000, U+9009, U+9012, U+901A, U+901F-9020, U+9053, U+907F, U+90A3, U+90E8, U+90FD, U+914D, U+91C7, U+91CC-91CD, U+91CF, U+9488, U+94C5, U+94FE, U+9501, U+950B, U+9519, U+95E8, U+95EA, U+95ED, U+95F4, U+9635, U+9645-9646, U+9650, U+9664, U+968F-9690, U+96BE, U+96C6, U+96F6, U+9700, U+970D, U+975E, U+9762, U+97E9, U+97F3, U+9875, U+9879-987B, U+987E, U+9884, U+9886, U+989D, U+98CE, U+9988, U+9996, U+9A6F, U+9A97, U+9AD8, U+9B54, U+9EC4, U+9ED1, U+9ED8, U+9F99, U+FF01, U+FF05, U+FF08-FF09, U+FF0B-FF0D, U+FF1A-FF1B, U+FF1D, U+FF1F, U+FF5E, U+FFE5;} @font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('vendor/fonts/notosans-800-zh-hans.woff2') format('woff2');unicode-range:U+200B, U+2714, U+2716, U+274C, U+4E00, U+4E09-4E0B, U+4E0D-4E0E, U+4E11, U+4E13-4E14, U+4E1C, U+4E22, U+4E24, U+4E27, U+4E2A, U+4E2D, U+4E3A-4E3B, U+4E45, U+4E49, U+4E4B, U+4E5F-4E60, U+4E66, U+4E86, U+4E89, U+4E8C, U+4E8E, U+4E91, U+4E94, U+4E9B, U+4EA4, U+4EAB, U+4EBA, U+4EC5, U+4ECA-4ECB, U+4ECE, U+4ED4, U+4ED6, U+4ED9, U+4EE3, U+4EE5, U+4EEC, U+4EF6, U+4EFB, U+4F18, U+4F1A, U+4F20, U+4F46, U+4F4D-4F4F, U+4F53, U+4F55, U+4F59, U+4F5C, U+4F60, U+4F73, U+4F7F, U+4F9B, U+4FDD, U+4FE1, U+5012, U+5145, U+5148, U+514B, U+514D, U+5165, U+5168, U+5171, U+5173, U+5176-5178, U+5185, U+518D, U+519B, U+51A0, U+51B5, U+51C0, U+51C6, U+51CF, U+51FA-51FB, U+5206, U+5219, U+521B, U+5220, U+5229, U+522B, U+5230, U+5236, U+523B, U+524D, U+5269, U+526F, U+529B, U+529E-52A1, U+52B1, U+5305, U+5316, U+5339, U+5355, U+5361, U+5373, U+5385, U+53BB, U+53C2, U+53C8, U+53CA, U+53CC-53CD, U+53D1, U+53D6-53D7, U+53E5-53E6, U+53EA, U+53EF, U+53F7, U+5404, U+5408, U+540C-540E, U+5417, U+5426-5427, U+542B, U+542F, U+544A, U+5458, U+547D, U+548C, U+5492, U+54C8, U+559C, U+5668, U+56DE, U+56E0, U+56FD-56FE, U+5706, U+5728, U+5730, U+573A, U+5747, U+578B, U+57FA, U+5883, U+589E, U+58A9, U+58F0, U+5907, U+590D, U+5916, U+591A, U+5927, U+5929-592A, U+592E, U+5931, U+5934, U+5947, U+594F, U+5956-5957, U+5973, U+597D, U+5982, U+59A8, U+59CB, U+59D3, U+5B50, U+5B57-5B58, U+5B66, U+5B83, U+5B8C, U+5B98, U+5B9A, U+5B9E, U+5BA1, U+5BB6, U+5BB9, U+5BDF, U+5BF9, U+5BFC, U+5C06, U+5C0A, U+5C0F, U+5C11, U+5C1A, U+5C1D, U+5C31, U+5C3D, U+5C40, U+5C5E, U+5DE6, U+5DEE, U+5DF1-5DF2, U+5E08, U+5E26, U+5E38, U+5E72-5E73, U+5E76, U+5E78, U+5EA6, U+5F00, U+5F03, U+5F0A, U+5F0F, U+5F15, U+5F20, U+5F31, U+5F39-5F3A, U+5F53, U+5F55, U+5F62, U+5F69, U+5F71, U+5F80, U+5F85, U+5F88, U+5F92, U+5F97, U+5FC3, U+5FC5, U+5FD7, U+5FEB, U+6001, U+601D, U+6027, U+602A, U+603B, U+6062, U+606D, U+606F-6070, U+60A8, U+60C5, U+60D1, U+60F3, U+610F, U+611F, U+613F, U+620F-6211, U+6216, U+6218, U+6240, U+624B, U+624D, U+6251, U+6253, U+6263, U+626B, U+626D, U+6270, U+627E-627F, U+6293, U+62E9, U+62EC, U+62FF, U+6301, U+6307, U+6311, U+635F, U+6362, U+636E, U+6389, U+6392, U+63A5, U+63CF-63D0, U+64AD, U+6536, U+6539, U+653E, U+6548, U+6559, U+6570, U+6574, U+6587, U+65B0, U+65B9, U+65E0, U+65E5, U+65E8-65E9, U+65F6, U+6628, U+662F, U+663E, U+666E, U+667A, U+6682, U+6697, U+66F4, U+6700, U+6709, U+670D, U+671B, U+671F, U+672A, U+672C, U+672F, U+6735, U+673A, U+675F, U+6761, U+6765, U+6781, U+679C, U+67E5, U+6807, U+6837, U+6839, U+683C, U+6843, U+6846, U+6848, U+684C, U+6863, U+6885, U+68C0, U+68CB, U+699C, U+6A21, U+6B21-6B22, U+6B62-6B64, U+6B8A, U+6BCF, U+6BD4, U+6C38, U+6C89, U+6CA1, U+6CB9, U+6CD5, U+6CE8, U+6D0B, U+6D3B, U+6D4B, U+6D77, U+6D88, U+6DF7, U+6DFB, U+6E05, U+6E38, U+6EE1, U+6F14, U+6FC0, U+7075, U+70B8-70B9, U+70BD, U+70ED, U+7136, U+7231, U+7247-7248, U+724C, U+7279, U+72B6, U+72EC, U+731C, U+7387, U+738B, U+73A9, U+73AF-73B0, U+7403, U+7406, U+751F, U+7528, U+7531, U+7537, U+753B, U+754C, U+7559, U+7565, U+75BE, U+767B, U+7684, U+76D8, U+76EE, U+76F4, U+76F8, U+770B, U+771F, U+77AC, U+7801, U+7840, U+786E, U+788D, U+793A, U+795E, U+7981, U+79BB, U+79CD, U+79D2, U+79D8, U+79E9, U+79EF-79F0, U+7A0B, U+7A7A, U+7ACB, U+7ADE, U+7AEF, U+7B26, U+7B2C, U+7B56, U+7B80, U+7B97, U+7BA1, U+7C7B, U+7CBE, U+7CFB, U+7D2F, U+7EA2, U+7EAA, U+7EB8, U+7EBF, U+7EC4, U+7EC6, U+7EC8, U+7ECD, U+7ECF, U+7ED3, U+7ED9, U+7EDF, U+7EE7, U+7EE9, U+7EED, U+7EFC, U+7EFF, U+7F16, U+7F51, U+7F6E, U+7FFB, U+8000, U+8005, U+800C, U+8017, U+804C, U+80A4, U+80DC, U+80FD, U+8138, U+81EA, U+81F3-81F4, U+8272, U+82B1, U+82E5, U+8377, U+8389, U+83B7, U+83DC, U+85CF, U+8679, U+884C, U+8861, U+88AB, U+88C5, U+897F, U+8981, U+89C2, U+89C4, U+89C6, U+89C9, U+89D2, U+89E3, U+8A00, U+8BA1, U+8BA4, U+8BA9, U+8BB0, U+8BBA, U+8BBE, U+8BC1, U+8BC9, U+8BD1, U+8BD5, U+8BDD, U+8BE5-8BE6, U+8BED, U+8BEF, U+8BF1, U+8BF7, U+8BFB, U+8C01, U+8C03, U+8C22, U+8D25, U+8D4C, U+8D5B, U+8D62, U+8D70, U+8D77, U+8D85, U+8DB3, U+8DDF, U+8DF3, U+8EB2, U+8F6C, U+8F6E, U+8F7D, U+8F9E, U+8FB9, U+8FBE, U+8FC7, U+8FCE, U+8FD0-8FD1, U+8FD4, U+8FD8-8FD9, U+8FDB, U+8FDE, U+8FF0, U+8FF7, U+9000, U+9009, U+9012, U+901A, U+901F-9020, U+9053, U+907F, U+90A3, U+90E8, U+90FD, U+914D, U+91C7, U+91CC-91CD, U+91CF, U+9488, U+94C5, U+94FE, U+9501, U+950B, U+9519, U+95E8, U+95EA, U+95ED, U+95F4, U+9635, U+9645-9646, U+9650, U+9664, U+968F-9690, U+96BE, U+96C6, U+96F6, U+9700, U+970D, U+975E, U+9762, U+97E9, U+97F3, U+9875, U+9879-987B, U+987E, U+9884, U+9886, U+989D, U+98CE, U+9988, U+9996, U+9A6F, U+9A97, U+9AD8, U+9B54, U+9EC4, U+9ED1, U+9ED8, U+9F99, U+FF01, U+FF05, U+FF08-FF09, U+FF0B-FF0D, U+FF1A-FF1B, U+FF1D, U+FF1F, U+FF5E, U+FFE5;} @font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url('vendor/fonts/notosans-900-zh-hans.woff2') format('woff2');unicode-range:U+200B, U+2714, U+2716, U+274C, U+4E00, U+4E09-4E0B, U+4E0D-4E0E, U+4E11, U+4E13-4E14, U+4E1C, U+4E22, U+4E24, U+4E27, U+4E2A, U+4E2D, U+4E3A-4E3B, U+4E45, U+4E49, U+4E4B, U+4E5F-4E60, U+4E66, U+4E86, U+4E89, U+4E8C, U+4E8E, U+4E91, U+4E94, U+4E9B, U+4EA4, U+4EAB, U+4EBA, U+4EC5, U+4ECA-4ECB, U+4ECE, U+4ED4, U+4ED6, U+4ED9, U+4EE3, U+4EE5, U+4EEC, U+4EF6, U+4EFB, U+4F18, U+4F1A, U+4F20, U+4F46, U+4F4D-4F4F, U+4F53, U+4F55, U+4F59, U+4F5C, U+4F60, U+4F73, U+4F7F, U+4F9B, U+4FDD, U+4FE1, U+5012, U+5145, U+5148, U+514B, U+514D, U+5165, U+5168, U+5171, U+5173, U+5176-5178, U+5185, U+518D, U+519B, U+51A0, U+51B5, U+51C0, U+51C6, U+51CF, U+51FA-51FB, U+5206, U+5219, U+521B, U+5220, U+5229, U+522B, U+5230, U+5236, U+523B, U+524D, U+5269, U+526F, U+529B, U+529E-52A1, U+52B1, U+5305, U+5316, U+5339, U+5355, U+5361, U+5373, U+5385, U+53BB, U+53C2, U+53C8, U+53CA, U+53CC-53CD, U+53D1, U+53D6-53D7, U+53E5-53E6, U+53EA, U+53EF, U+53F7, U+5404, U+5408, U+540C-540E, U+5417, U+5426-5427, U+542B, U+542F, U+544A, U+5458, U+547D, U+548C, U+5492, U+54C8, U+559C, U+5668, U+56DE, U+56E0, U+56FD-56FE, U+5706, U+5728, U+5730, U+573A, U+5747, U+578B, U+57FA, U+5883, U+589E, U+58A9, U+58F0, U+5907, U+590D, U+5916, U+591A, U+5927, U+5929-592A, U+592E, U+5931, U+5934, U+5947, U+594F, U+5956-5957, U+5973, U+597D, U+5982, U+59A8, U+59CB, U+59D3, U+5B50, U+5B57-5B58, U+5B66, U+5B83, U+5B8C, U+5B98, U+5B9A, U+5B9E, U+5BA1, U+5BB6, U+5BB9, U+5BDF, U+5BF9, U+5BFC, U+5C06, U+5C0A, U+5C0F, U+5C11, U+5C1A, U+5C1D, U+5C31, U+5C3D, U+5C40, U+5C5E, U+5DE6, U+5DEE, U+5DF1-5DF2, U+5E08, U+5E26, U+5E38, U+5E72-5E73, U+5E76, U+5E78, U+5EA6, U+5F00, U+5F03, U+5F0A, U+5F0F, U+5F15, U+5F20, U+5F31, U+5F39-5F3A, U+5F53, U+5F55, U+5F62, U+5F69, U+5F71, U+5F80, U+5F85, U+5F88, U+5F92, U+5F97, U+5FC3, U+5FC5, U+5FD7, U+5FEB, U+6001, U+601D, U+6027, U+602A, U+603B, U+6062, U+606D, U+606F-6070, U+60A8, U+60C5, U+60D1, U+60F3, U+610F, U+611F, U+613F, U+620F-6211, U+6216, U+6218, U+6240, U+624B, U+624D, U+6251, U+6253, U+6263, U+626B, U+626D, U+6270, U+627E-627F, U+6293, U+62E9, U+62EC, U+62FF, U+6301, U+6307, U+6311, U+635F, U+6362, U+636E, U+6389, U+6392, U+63A5, U+63CF-63D0, U+64AD, U+6536, U+6539, U+653E, U+6548, U+6559, U+6570, U+6574, U+6587, U+65B0, U+65B9, U+65E0, U+65E5, U+65E8-65E9, U+65F6, U+6628, U+662F, U+663E, U+666E, U+667A, U+6682, U+6697, U+66F4, U+6700, U+6709, U+670D, U+671B, U+671F, U+672A, U+672C, U+672F, U+6735, U+673A, U+675F, U+6761, U+6765, U+6781, U+679C, U+67E5, U+6807, U+6837, U+6839, U+683C, U+6843, U+6846, U+6848, U+684C, U+6863, U+6885, U+68C0, U+68CB, U+699C, U+6A21, U+6B21-6B22, U+6B62-6B64, U+6B8A, U+6BCF, U+6BD4, U+6C38, U+6C89, U+6CA1, U+6CB9, U+6CD5, U+6CE8, U+6D0B, U+6D3B, U+6D4B, U+6D77, U+6D88, U+6DF7, U+6DFB, U+6E05, U+6E38, U+6EE1, U+6F14, U+6FC0, U+7075, U+70B8-70B9, U+70BD, U+70ED, U+7136, U+7231, U+7247-7248, U+724C, U+7279, U+72B6, U+72EC, U+731C, U+7387, U+738B, U+73A9, U+73AF-73B0, U+7403, U+7406, U+751F, U+7528, U+7531, U+7537, U+753B, U+754C, U+7559, U+7565, U+75BE, U+767B, U+7684, U+76D8, U+76EE, U+76F4, U+76F8, U+770B, U+771F, U+77AC, U+7801, U+7840, U+786E, U+788D, U+793A, U+795E, U+7981, U+79BB, U+79CD, U+79D2, U+79D8, U+79E9, U+79EF-79F0, U+7A0B, U+7A7A, U+7ACB, U+7ADE, U+7AEF, U+7B26, U+7B2C, U+7B56, U+7B80, U+7B97, U+7BA1, U+7C7B, U+7CBE, U+7CFB, U+7D2F, U+7EA2, U+7EAA, U+7EB8, U+7EBF, U+7EC4, U+7EC6, U+7EC8, U+7ECD, U+7ECF, U+7ED3, U+7ED9, U+7EDF, U+7EE7, U+7EE9, U+7EED, U+7EFC, U+7EFF, U+7F16, U+7F51, U+7F6E, U+7FFB, U+8000, U+8005, U+800C, U+8017, U+804C, U+80A4, U+80DC, U+80FD, U+8138, U+81EA, U+81F3-81F4, U+8272, U+82B1, U+82E5, U+8377, U+8389, U+83B7, U+83DC, U+85CF, U+8679, U+884C, U+8861, U+88AB, U+88C5, U+897F, U+8981, U+89C2, U+89C4, U+89C6, U+89C9, U+89D2, U+89E3, U+8A00, U+8BA1, U+8BA4, U+8BA9, U+8BB0, U+8BBA, U+8BBE, U+8BC1, U+8BC9, U+8BD1, U+8BD5, U+8BDD, U+8BE5-8BE6, U+8BED, U+8BEF, U+8BF1, U+8BF7, U+8BFB, U+8C01, U+8C03, U+8C22, U+8D25, U+8D4C, U+8D5B, U+8D62, U+8D70, U+8D77, U+8D85, U+8DB3, U+8DDF, U+8DF3, U+8EB2, U+8F6C, U+8F6E, U+8F7D, U+8F9E, U+8FB9, U+8FBE, U+8FC7, U+8FCE, U+8FD0-8FD1, U+8FD4, U+8FD8-8FD9, U+8FDB, U+8FDE, U+8FF0, U+8FF7, U+9000, U+9009, U+9012, U+901A, U+901F-9020, U+9053, U+907F, U+90A3, U+90E8, U+90FD, U+914D, U+91C7, U+91CC-91CD, U+91CF, U+9488, U+94C5, U+94FE, U+9501, U+950B, U+9519, U+95E8, U+95EA, U+95ED, U+95F4, U+9635, U+9645-9646, U+9650, U+9664, U+968F-9690, U+96BE, U+96C6, U+96F6, U+9700, U+970D, U+975E, U+9762, U+97E9, U+97F3, U+9875, U+9879-987B, U+987E, U+9884, U+9886, U+989D, U+98CE, U+9988, U+9996, U+9A6F, U+9A97, U+9AD8, U+9B54, U+9EC4, U+9ED1, U+9ED8, U+9F99, U+FF01, U+FF05, U+FF08-FF09, U+FF0B-FF0D, U+FF1A-FF1B, U+FF1D, U+FF1F, U+FF5E, U+FFE5;} @font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('vendor/fonts/notosans-400-zh-hant.woff2') format('woff2');unicode-range:U+200B, U+2714, U+2716, U+274C, U+4E00, U+4E09-4E0B, U+4E0D, U+4E11, U+4E14, U+4E26, U+4E2D, U+4E3B, U+4E45, U+4E4B, U+4E5F, U+4E86, U+4E8C, U+4E94, U+4E9B, U+4EA4, U+4EAB, U+4EBA, U+4ECA-4ECB, U+4ED4, U+4ED6, U+4ED9, U+4EE3, U+4EE5, U+4EF6, U+4EFB, U+4F46, U+4F4D-4F4F, U+4F55, U+4F5C, U+4F60, U+4F73, U+4F7F, U+4F86, U+4F9B, U+4FDD, U+4FE1, U+500B, U+5011-5012, U+5099, U+50B3, U+50C5, U+5118, U+512A, U+5132, U+5145, U+5148, U+514B, U+514D, U+5165, U+5167-5169, U+5171, U+5176-5178, U+518D, U+51A0, U+51FA, U+5206, U+5225, U+5229-522A, U+5230, U+5236, U+523B, U+5247, U+524D, U+5269, U+526F, U+5275, U+529B, U+529F-52A0, U+52D9, U+52DD, U+52F5, U+5305, U+5316, U+5339, U+5361, U+5373, U+53BB, U+53C3, U+53C8, U+53CA, U+53D6-53D7, U+53E5-53E6, U+53EA, U+53EF, U+5404, U+5408, U+540C-540D, U+5426-5427, U+542B, U+544A, U+547D, U+548C, U+5492, U+54C8, U+54E1, U+555F, U+559C, U+55AA, U+55AE, U+55CE, U+5617, U+5668, U+56DE, U+56E0, U+570B, U+5713, U+5716, U+5728, U+5730, U+5747, U+578B, U+57FA, U+5834, U+5883, U+589E, U+58A9, U+5916, U+591A, U+5927, U+5929-592A, U+592E, U+5931, U+5947, U+594F, U+5957, U+5973, U+597D, U+5982, U+59A8, U+59CB, U+59D3, U+5B50, U+5B57-5B58, U+5B78, U+5B83, U+5B8C, U+5B98, U+5B9A, U+5BB6, U+5BB9, U+5BDF, U+5BE6, U+5BE9, U+5C07-5C08, U+5C0A, U+5C0D-5C0F, U+5C11, U+5C1A, U+5C31, U+5C40, U+5C6C, U+5DE6, U+5DEE, U+5DF1-5DF2, U+5E2B, U+5E36, U+5E38, U+5E72-5E73, U+5E78, U+5EA6, U+5EF3, U+5F0A, U+5F0F, U+5F15, U+5F31, U+5F35, U+5F37, U+5F46, U+5F48, U+5F62, U+5F69, U+5F71, U+5F80, U+5F85, U+5F88, U+5F8C, U+5F92, U+5F97, U+5F9E, U+5FA9, U+5FC3, U+5FC5, U+5FEB, U+601D, U+6027, U+602A, U+6062, U+606D, U+606F-6070, U+60A8, U+60C5, U+60D1, U+60F3, U+610F, U+611B, U+611F, U+614B, U+6210-6211, U+6216, U+6230, U+6232, U+6240, U+624B, U+624D, U+6253, U+6263, U+626D, U+627E-627F, U+6293, U+62EC, U+62FF, U+6301, U+6307, U+6311, U+6383, U+6389, U+6392, U+63A1, U+63A5, U+63CF-63D0, U+63DB, U+640D, U+64AD, U+64B2, U+64C7, U+64CA, U+64DA, U+64FE, U+6536, U+6539, U+653E, U+6548, U+6557, U+6559, U+6574, U+6578, U+6587, U+6599, U+65B0, U+65B9, U+65BC, U+65E5, U+65E8-65E9, U+6628, U+662F, U+6642, U+666E, U+667A, U+6697, U+66F4, U+66F8, U+6700, U+6703, U+6709, U+670D, U+671B, U+671F, U+672A, U+672C, U+6735, U+675F, U+6771, U+679C, U+67E5, U+6839, U+683C, U+6843, U+6846, U+6848, U+684C, U+6885, U+689D, U+68C4, U+68CB, U+6975, U+699C, U+6A19, U+6A21, U+6A23, U+6A5F, U+6A94, U+6AA2, U+6B21, U+6B61-6B64, U+6B8A, U+6BCF, U+6BD4, U+6C38, U+6C89, U+6C92, U+6CB9, U+6CC1, U+6CD5, U+6CE8, U+6D0B, U+6D3B, U+6D77, U+6D88, U+6DE8, U+6DF7, U+6E05, U+6E1B, U+6E2C, U+6E96, U+6EFF, U+6FC0, U+70B8, U+70BA, U+7121, U+7136, U+71B1, U+71BE, U+722D, U+7247-7248, U+724C, U+7279, U+72C0, U+731C, U+734E, U+7368, U+7372, U+7387, U+738B, U+73A9, U+73FE, U+7403, U+7406, U+74B0, U+751F, U+7528, U+7531, U+7537, U+7559, U+7565, U+756B, U+7576, U+75BE, U+767B, U+7684, U+76E1, U+76E4, U+76EE, U+76F4, U+76F8, U+770B, U+771F, U+77AC, U+78BA, U+78BC, U+790E, U+7919, U+793A, U+795E, U+7981, U+79D2, U+79D8, U+79E9, U+7A0B, U+7A2E, U+7A31, U+7A4D, U+7A7A, U+7ACB, U+7AEF, U+7AF6, U+7B26, U+7B2C, U+7B56, U+7B97, U+7BA1, U+7C21, U+7CBE, U+7CFB, U+7D00, U+7D05, U+7D19, U+7D2F-7D30, U+7D39, U+7D42, U+7D44, U+7D50, U+7D66, U+7D71, U+7D93, U+7D9C, U+7DA0, U+7DB2, U+7DDA, U+7DE8, U+7E3D-7E3E, U+7E41, U+7E7C, U+7E8C, U+7F6E, U+7FA9, U+7FD2, U+7FFB, U+8000, U+8005, U+800C, U+8017, U+8072, U+8077, U+80FD, U+819A, U+81C9, U+81EA, U+81F3-81F4, U+8207, U+8272, U+82B1, U+82E5, U+8377, U+8389, U+83DC, U+85CF, U+865F, U+8679, U+884C, U+8853, U+8861, U+88AB, U+88DD, U+88E1, U+88FD, U+8907, U+897F, U+8981, U+898F, U+8996, U+89BA, U+89C0, U+89D2, U+89E3, U+8A00, U+8A08, U+8A18, U+8A2D, U+8A34, U+8A3B, U+8A66, U+8A71-8A73, U+8A8C-8A8D, U+8A98, U+8A9E, U+8AA4, U+8AB0, U+8ABF, U+8ACB, U+8AD6, U+8B1D, U+8B49, U+8B6F, U+8B80, U+8B93, U+8CC7, U+8CED, U+8CFD, U+8D0F, U+8D70, U+8D77, U+8D85, U+8DB3, U+8DDF, U+8DF3, U+8EB2, U+8ECD, U+8F09, U+8F2A, U+8F49, U+8FA6, U+8FAD, U+8FCE, U+8FD1, U+8FD4, U+8FF0, U+8FF4, U+8FF7, U+9000, U+9019-901A, U+901F-9020, U+9023, U+9032, U+904A-904B, U+904E, U+9053-9054, U+905E, U+9078, U+907A, U+907F, U+9084, U+908A, U+90A3, U+90E8, U+90FD, U+914D, U+91CD, U+91CF, U+91DD, U+925B, U+92D2, U+9304, U+932F, U+9396, U+9580, U+9583, U+9589, U+958B, U+9593, U+95DC, U+9650, U+9663-9664, U+9678, U+969B, U+96A8, U+96B1, U+96C6, U+96D9, U+96E2-96E3, U+96F2, U+96F6, U+9700, U+970D, U+9748, U+975E, U+9762, U+97D3, U+97F3, U+9801, U+9805-9806, U+9808, U+9810, U+9818, U+982D, U+984D, U+9858, U+985E, U+9867, U+986F, U+98A8, U+9918, U+994B, U+9996, U+99B4, U+9A19, U+9AD4, U+9AD8, U+9AEE, U+9B54, U+9EC3, U+9ED1, U+9ED8, U+9EDE, U+9F8D, U+FF01, U+FF05, U+FF08-FF09, U+FF0B-FF0D, U+FF1A-FF1B, U+FF1D, U+FF1F, U+FF5E, U+FFE5;} @font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('vendor/fonts/notosans-800-zh-hant.woff2') format('woff2');unicode-range:U+200B, U+2714, U+2716, U+274C, U+4E00, U+4E09-4E0B, U+4E0D, U+4E11, U+4E14, U+4E26, U+4E2D, U+4E3B, U+4E45, U+4E4B, U+4E5F, U+4E86, U+4E8C, U+4E94, U+4E9B, U+4EA4, U+4EAB, U+4EBA, U+4ECA-4ECB, U+4ED4, U+4ED6, U+4ED9, U+4EE3, U+4EE5, U+4EF6, U+4EFB, U+4F46, U+4F4D-4F4F, U+4F55, U+4F5C, U+4F60, U+4F73, U+4F7F, U+4F86, U+4F9B, U+4FDD, U+4FE1, U+500B, U+5011-5012, U+5099, U+50B3, U+50C5, U+5118, U+512A, U+5132, U+5145, U+5148, U+514B, U+514D, U+5165, U+5167-5169, U+5171, U+5176-5178, U+518D, U+51A0, U+51FA, U+5206, U+5225, U+5229-522A, U+5230, U+5236, U+523B, U+5247, U+524D, U+5269, U+526F, U+5275, U+529B, U+529F-52A0, U+52D9, U+52DD, U+52F5, U+5305, U+5316, U+5339, U+5361, U+5373, U+53BB, U+53C3, U+53C8, U+53CA, U+53D6-53D7, U+53E5-53E6, U+53EA, U+53EF, U+5404, U+5408, U+540C-540D, U+5426-5427, U+542B, U+544A, U+547D, U+548C, U+5492, U+54C8, U+54E1, U+555F, U+559C, U+55AA, U+55AE, U+55CE, U+5617, U+5668, U+56DE, U+56E0, U+570B, U+5713, U+5716, U+5728, U+5730, U+5747, U+578B, U+57FA, U+5834, U+5883, U+589E, U+58A9, U+5916, U+591A, U+5927, U+5929-592A, U+592E, U+5931, U+5947, U+594F, U+5957, U+5973, U+597D, U+5982, U+59A8, U+59CB, U+59D3, U+5B50, U+5B57-5B58, U+5B78, U+5B83, U+5B8C, U+5B98, U+5B9A, U+5BB6, U+5BB9, U+5BDF, U+5BE6, U+5BE9, U+5C07-5C08, U+5C0A, U+5C0D-5C0F, U+5C11, U+5C1A, U+5C31, U+5C40, U+5C6C, U+5DE6, U+5DEE, U+5DF1-5DF2, U+5E2B, U+5E36, U+5E38, U+5E72-5E73, U+5E78, U+5EA6, U+5EF3, U+5F0A, U+5F0F, U+5F15, U+5F31, U+5F35, U+5F37, U+5F46, U+5F48, U+5F62, U+5F69, U+5F71, U+5F80, U+5F85, U+5F88, U+5F8C, U+5F92, U+5F97, U+5F9E, U+5FA9, U+5FC3, U+5FC5, U+5FEB, U+601D, U+6027, U+602A, U+6062, U+606D, U+606F-6070, U+60A8, U+60C5, U+60D1, U+60F3, U+610F, U+611B, U+611F, U+614B, U+6210-6211, U+6216, U+6230, U+6232, U+6240, U+624B, U+624D, U+6253, U+6263, U+626D, U+627E-627F, U+6293, U+62EC, U+62FF, U+6301, U+6307, U+6311, U+6383, U+6389, U+6392, U+63A1, U+63A5, U+63CF-63D0, U+63DB, U+640D, U+64AD, U+64B2, U+64C7, U+64CA, U+64DA, U+64FE, U+6536, U+6539, U+653E, U+6548, U+6557, U+6559, U+6574, U+6578, U+6587, U+6599, U+65B0, U+65B9, U+65BC, U+65E5, U+65E8-65E9, U+6628, U+662F, U+6642, U+666E, U+667A, U+6697, U+66F4, U+66F8, U+6700, U+6703, U+6709, U+670D, U+671B, U+671F, U+672A, U+672C, U+6735, U+675F, U+6771, U+679C, U+67E5, U+6839, U+683C, U+6843, U+6846, U+6848, U+684C, U+6885, U+689D, U+68C4, U+68CB, U+6975, U+699C, U+6A19, U+6A21, U+6A23, U+6A5F, U+6A94, U+6AA2, U+6B21, U+6B61-6B64, U+6B8A, U+6BCF, U+6BD4, U+6C38, U+6C89, U+6C92, U+6CB9, U+6CC1, U+6CD5, U+6CE8, U+6D0B, U+6D3B, U+6D77, U+6D88, U+6DE8, U+6DF7, U+6E05, U+6E1B, U+6E2C, U+6E96, U+6EFF, U+6FC0, U+70B8, U+70BA, U+7121, U+7136, U+71B1, U+71BE, U+722D, U+7247-7248, U+724C, U+7279, U+72C0, U+731C, U+734E, U+7368, U+7372, U+7387, U+738B, U+73A9, U+73FE, U+7403, U+7406, U+74B0, U+751F, U+7528, U+7531, U+7537, U+7559, U+7565, U+756B, U+7576, U+75BE, U+767B, U+7684, U+76E1, U+76E4, U+76EE, U+76F4, U+76F8, U+770B, U+771F, U+77AC, U+78BA, U+78BC, U+790E, U+7919, U+793A, U+795E, U+7981, U+79D2, U+79D8, U+79E9, U+7A0B, U+7A2E, U+7A31, U+7A4D, U+7A7A, U+7ACB, U+7AEF, U+7AF6, U+7B26, U+7B2C, U+7B56, U+7B97, U+7BA1, U+7C21, U+7CBE, U+7CFB, U+7D00, U+7D05, U+7D19, U+7D2F-7D30, U+7D39, U+7D42, U+7D44, U+7D50, U+7D66, U+7D71, U+7D93, U+7D9C, U+7DA0, U+7DB2, U+7DDA, U+7DE8, U+7E3D-7E3E, U+7E41, U+7E7C, U+7E8C, U+7F6E, U+7FA9, U+7FD2, U+7FFB, U+8000, U+8005, U+800C, U+8017, U+8072, U+8077, U+80FD, U+819A, U+81C9, U+81EA, U+81F3-81F4, U+8207, U+8272, U+82B1, U+82E5, U+8377, U+8389, U+83DC, U+85CF, U+865F, U+8679, U+884C, U+8853, U+8861, U+88AB, U+88DD, U+88E1, U+88FD, U+8907, U+897F, U+8981, U+898F, U+8996, U+89BA, U+89C0, U+89D2, U+89E3, U+8A00, U+8A08, U+8A18, U+8A2D, U+8A34, U+8A3B, U+8A66, U+8A71-8A73, U+8A8C-8A8D, U+8A98, U+8A9E, U+8AA4, U+8AB0, U+8ABF, U+8ACB, U+8AD6, U+8B1D, U+8B49, U+8B6F, U+8B80, U+8B93, U+8CC7, U+8CED, U+8CFD, U+8D0F, U+8D70, U+8D77, U+8D85, U+8DB3, U+8DDF, U+8DF3, U+8EB2, U+8ECD, U+8F09, U+8F2A, U+8F49, U+8FA6, U+8FAD, U+8FCE, U+8FD1, U+8FD4, U+8FF0, U+8FF4, U+8FF7, U+9000, U+9019-901A, U+901F-9020, U+9023, U+9032, U+904A-904B, U+904E, U+9053-9054, U+905E, U+9078, U+907A, U+907F, U+9084, U+908A, U+90A3, U+90E8, U+90FD, U+914D, U+91CD, U+91CF, U+91DD, U+925B, U+92D2, U+9304, U+932F, U+9396, U+9580, U+9583, U+9589, U+958B, U+9593, U+95DC, U+9650, U+9663-9664, U+9678, U+969B, U+96A8, U+96B1, U+96C6, U+96D9, U+96E2-96E3, U+96F2, U+96F6, U+9700, U+970D, U+9748, U+975E, U+9762, U+97D3, U+97F3, U+9801, U+9805-9806, U+9808, U+9810, U+9818, U+982D, U+984D, U+9858, U+985E, U+9867, U+986F, U+98A8, U+9918, U+994B, U+9996, U+99B4, U+9A19, U+9AD4, U+9AD8, U+9AEE, U+9B54, U+9EC3, U+9ED1, U+9ED8, U+9EDE, U+9F8D, U+FF01, U+FF05, U+FF08-FF09, U+FF0B-FF0D, U+FF1A-FF1B, U+FF1D, U+FF1F, U+FF5E, U+FFE5;} @font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url('vendor/fonts/notosans-900-zh-hant.woff2') format('woff2');unicode-range:U+200B, U+2714, U+2716, U+274C, U+4E00, U+4E09-4E0B, U+4E0D, U+4E11, U+4E14, U+4E26, U+4E2D, U+4E3B, U+4E45, U+4E4B, U+4E5F, U+4E86, U+4E8C, U+4E94, U+4E9B, U+4EA4, U+4EAB, U+4EBA, U+4ECA-4ECB, U+4ED4, U+4ED6, U+4ED9, U+4EE3, U+4EE5, U+4EF6, U+4EFB, U+4F46, U+4F4D-4F4F, U+4F55, U+4F5C, U+4F60, U+4F73, U+4F7F, U+4F86, U+4F9B, U+4FDD, U+4FE1, U+500B, U+5011-5012, U+5099, U+50B3, U+50C5, U+5118, U+512A, U+5132, U+5145, U+5148, U+514B, U+514D, U+5165, U+5167-5169, U+5171, U+5176-5178, U+518D, U+51A0, U+51FA, U+5206, U+5225, U+5229-522A, U+5230, U+5236, U+523B, U+5247, U+524D, U+5269, U+526F, U+5275, U+529B, U+529F-52A0, U+52D9, U+52DD, U+52F5, U+5305, U+5316, U+5339, U+5361, U+5373, U+53BB, U+53C3, U+53C8, U+53CA, U+53D6-53D7, U+53E5-53E6, U+53EA, U+53EF, U+5404, U+5408, U+540C-540D, U+5426-5427, U+542B, U+544A, U+547D, U+548C, U+5492, U+54C8, U+54E1, U+555F, U+559C, U+55AA, U+55AE, U+55CE, U+5617, U+5668, U+56DE, U+56E0, U+570B, U+5713, U+5716, U+5728, U+5730, U+5747, U+578B, U+57FA, U+5834, U+5883, U+589E, U+58A9, U+5916, U+591A, U+5927, U+5929-592A, U+592E, U+5931, U+5947, U+594F, U+5957, U+5973, U+597D, U+5982, U+59A8, U+59CB, U+59D3, U+5B50, U+5B57-5B58, U+5B78, U+5B83, U+5B8C, U+5B98, U+5B9A, U+5BB6, U+5BB9, U+5BDF, U+5BE6, U+5BE9, U+5C07-5C08, U+5C0A, U+5C0D-5C0F, U+5C11, U+5C1A, U+5C31, U+5C40, U+5C6C, U+5DE6, U+5DEE, U+5DF1-5DF2, U+5E2B, U+5E36, U+5E38, U+5E72-5E73, U+5E78, U+5EA6, U+5EF3, U+5F0A, U+5F0F, U+5F15, U+5F31, U+5F35, U+5F37, U+5F46, U+5F48, U+5F62, U+5F69, U+5F71, U+5F80, U+5F85, U+5F88, U+5F8C, U+5F92, U+5F97, U+5F9E, U+5FA9, U+5FC3, U+5FC5, U+5FEB, U+601D, U+6027, U+602A, U+6062, U+606D, U+606F-6070, U+60A8, U+60C5, U+60D1, U+60F3, U+610F, U+611B, U+611F, U+614B, U+6210-6211, U+6216, U+6230, U+6232, U+6240, U+624B, U+624D, U+6253, U+6263, U+626D, U+627E-627F, U+6293, U+62EC, U+62FF, U+6301, U+6307, U+6311, U+6383, U+6389, U+6392, U+63A1, U+63A5, U+63CF-63D0, U+63DB, U+640D, U+64AD, U+64B2, U+64C7, U+64CA, U+64DA, U+64FE, U+6536, U+6539, U+653E, U+6548, U+6557, U+6559, U+6574, U+6578, U+6587, U+6599, U+65B0, U+65B9, U+65BC, U+65E5, U+65E8-65E9, U+6628, U+662F, U+6642, U+666E, U+667A, U+6697, U+66F4, U+66F8, U+6700, U+6703, U+6709, U+670D, U+671B, U+671F, U+672A, U+672C, U+6735, U+675F, U+6771, U+679C, U+67E5, U+6839, U+683C, U+6843, U+6846, U+6848, U+684C, U+6885, U+689D, U+68C4, U+68CB, U+6975, U+699C, U+6A19, U+6A21, U+6A23, U+6A5F, U+6A94, U+6AA2, U+6B21, U+6B61-6B64, U+6B8A, U+6BCF, U+6BD4, U+6C38, U+6C89, U+6C92, U+6CB9, U+6CC1, U+6CD5, U+6CE8, U+6D0B, U+6D3B, U+6D77, U+6D88, U+6DE8, U+6DF7, U+6E05, U+6E1B, U+6E2C, U+6E96, U+6EFF, U+6FC0, U+70B8, U+70BA, U+7121, U+7136, U+71B1, U+71BE, U+722D, U+7247-7248, U+724C, U+7279, U+72C0, U+731C, U+734E, U+7368, U+7372, U+7387, U+738B, U+73A9, U+73FE, U+7403, U+7406, U+74B0, U+751F, U+7528, U+7531, U+7537, U+7559, U+7565, U+756B, U+7576, U+75BE, U+767B, U+7684, U+76E1, U+76E4, U+76EE, U+76F4, U+76F8, U+770B, U+771F, U+77AC, U+78BA, U+78BC, U+790E, U+7919, U+793A, U+795E, U+7981, U+79D2, U+79D8, U+79E9, U+7A0B, U+7A2E, U+7A31, U+7A4D, U+7A7A, U+7ACB, U+7AEF, U+7AF6, U+7B26, U+7B2C, U+7B56, U+7B97, U+7BA1, U+7C21, U+7CBE, U+7CFB, U+7D00, U+7D05, U+7D19, U+7D2F-7D30, U+7D39, U+7D42, U+7D44, U+7D50, U+7D66, U+7D71, U+7D93, U+7D9C, U+7DA0, U+7DB2, U+7DDA, U+7DE8, U+7E3D-7E3E, U+7E41, U+7E7C, U+7E8C, U+7F6E, U+7FA9, U+7FD2, U+7FFB, U+8000, U+8005, U+800C, U+8017, U+8072, U+8077, U+80FD, U+819A, U+81C9, U+81EA, U+81F3-81F4, U+8207, U+8272, U+82B1, U+82E5, U+8377, U+8389, U+83DC, U+85CF, U+865F, U+8679, U+884C, U+8853, U+8861, U+88AB, U+88DD, U+88E1, U+88FD, U+8907, U+897F, U+8981, U+898F, U+8996, U+89BA, U+89C0, U+89D2, U+89E3, U+8A00, U+8A08, U+8A18, U+8A2D, U+8A34, U+8A3B, U+8A66, U+8A71-8A73, U+8A8C-8A8D, U+8A98, U+8A9E, U+8AA4, U+8AB0, U+8ABF, U+8ACB, U+8AD6, U+8B1D, U+8B49, U+8B6F, U+8B80, U+8B93, U+8CC7, U+8CED, U+8CFD, U+8D0F, U+8D70, U+8D77, U+8D85, U+8DB3, U+8DDF, U+8DF3, U+8EB2, U+8ECD, U+8F09, U+8F2A, U+8F49, U+8FA6, U+8FAD, U+8FCE, U+8FD1, U+8FD4, U+8FF0, U+8FF4, U+8FF7, U+9000, U+9019-901A, U+901F-9020, U+9023, U+9032, U+904A-904B, U+904E, U+9053-9054, U+905E, U+9078, U+907A, U+907F, U+9084, U+908A, U+90A3, U+90E8, U+90FD, U+914D, U+91CD, U+91CF, U+91DD, U+925B, U+92D2, U+9304, U+932F, U+9396, U+9580, U+9583, U+9589, U+958B, U+9593, U+95DC, U+9650, U+9663-9664, U+9678, U+969B, U+96A8, U+96B1, U+96C6, U+96D9, U+96E2-96E3, U+96F2, U+96F6, U+9700, U+970D, U+9748, U+975E, U+9762, U+97D3, U+97F3, U+9801, U+9805-9806, U+9808, U+9810, U+9818, U+982D, U+984D, U+9858, U+985E, U+9867, U+986F, U+98A8, U+9918, U+994B, U+9996, U+99B4, U+9A19, U+9AD4, U+9AD8, U+9AEE, U+9B54, U+9EC3, U+9ED1, U+9ED8, U+9EDE, U+9F8D, U+FF01, U+FF05, U+FF08-FF09, U+FF0B-FF0D, U+FF1A-FF1B, U+FF1D, U+FF1F, U+FF5E, U+FFE5;} /* 기호 전용 서브셋(BUG-92). ♠♥♦♣·★·✓··—…는 Nunito에 없어서 Noto Sans로 넘어가는데, 같은 family 안에서는 나중에 선언된 @font-face가 이긴다. 그래서 카드 문양 하나 그리자고 맨 뒤의 zh-hant 서브셋(196KB×3)이 언어와 무관하게 내려왔다. 같은 글립을 3.8KB로 잘라 CJK 뒤에 선언한다 - 모양은 그대로고(출처가 같은 zh-hant 서브셋이다) 무게만 빠진다. unicode-range는 실제 cmap에서 뽑았다. 없는 글자를 주장하면 두부(tofu)가 된다. */ @font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('vendor/fonts/notosans-400-symbols.woff2') format('woff2');unicode-range:U+00B7, U+00D7, U+00F7, U+2014, U+2018-2019, U+201C-201D, U+2026, U+203B, U+20A9, U+2103, U+2190-2191, U+2193, U+24D8, U+25A0-25A1, U+25B2-25B3, U+25B6, U+25BC-25BD, U+25C0, U+25C6-25C7, U+25CB, U+25CF, U+2605-2606, U+2660, U+2663, U+2665-2666, U+2713, U+27A1, U+3001-3002, U+3008-3011, U+3014-3015, U+301C, U+30FB;} @font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('vendor/fonts/notosans-800-symbols.woff2') format('woff2');unicode-range:U+00B7, U+00D7, U+00F7, U+2014, U+2018-2019, U+201C-201D, U+2026, U+203B, U+20A9, U+2103, U+2190-2191, U+2193, U+24D8, U+25A0-25A1, U+25B2-25B3, U+25B6, U+25BC-25BD, U+25C0, U+25C6-25C7, U+25CB, U+25CF, U+2605-2606, U+2660, U+2663, U+2665-2666, U+2713, U+27A1, U+3001-3002, U+3008-3011, U+3014-3015, U+301C, U+30FB;} @font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url('vendor/fonts/notosans-900-symbols.woff2') format('woff2');unicode-range:U+00B7, U+00D7, U+00F7, U+2014, U+2018-2019, U+201C-201D, U+2026, U+203B, U+20A9, U+2103, U+2190-2191, U+2193, U+24D8, U+25A0-25A1, U+25B2-25B3, U+25B6, U+25BC-25BD, U+25C0, U+25C6-25C7, U+25CB, U+25CF, U+2605-2606, U+2660, U+2663, U+2665-2666, U+2713, U+27A1, U+3001-3002, U+3008-3011, U+3014-3015, U+301C, U+30FB;} @font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;font-display:swap;src:url('vendor/fonts/sharetechmono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* 1. 글로벌 변수 정의 */ :root { --bg-dark: #f0e6d5; --bg-felt: radial-gradient(circle, #eed7b6 0%, #e3c49f 100%); --cozy-cream: #f0e6d5; /* 인게임 시안 _gen_dirs3.py 의 --cream. 로비도 이걸로 통일(BUG-87) */ /* 인게임 HUD 버튼 글자(BUG-88). 시안 .btn은 --ink-2 #7a7d76인데 버튼 배경 #fffdf7 위에서 대비 4.11로 AA에 못 미친다. AA(4.5)를 넘기는 선에서 가장 옅은 값이 #6f7268 (4.82)이라 그것으로 잡았다. --text-dim(#646661, 5.71)은 본문용이라 여기선 진하다. */ --ingame-btn-ink: #6f7268; --accent-primary: #216d87; /* Cozy Day 강조 파랑 (WCAG AA 4.52:1 on cream / 버튼 6.0:1) */ --brand-heart: #b8463c; /* 하트 수트 및 브랜드 하트 #b8463c */ --state-badge: #e8a53c; /* 기본 상태 배지 강조 노랑 (슬라이스 D에서 이원화) */ --state-danger: #b8463c; /* 회피·위험 경고 빨강 */ --state-danger-glow: #b8463c; /* 회피·위험 발광. 경고 빨강 #b8463c 계열 (보호/삭제·강등 금지) */ --text-accent: #3e4542; /* 강조된 글자/라벨 잉크 계열 */ /* 별칭 — style.css 밖 i18n-strings.js 80곳, game.js 16곳, index.html 5곳이 아직 사용 중. 별칭이 --accent-primary를 가리키므로 팔레트 교체 때 밖의 100여 곳이 파랑으로 끌려감. (Codex 재분류 필요) */ --neon-pink: #8a1f1b; /* BUG-76: 튜토리얼 회피 경고용 글자 빨강 (#8a1f1b, 크림 대비 6.27:1 AA 충족) */ --text-warn: #92540c; /* BUG-75: 글자용 강조 노랑/주황 (크림 대비 5.68:1 AA 충족) */ --text-ok: #1e6648; /* BUG-75: 글자용 강조 초록 (크림 대비 5.56:1 AA 충족) */ --text-danger: #8a1f1b; /* BUG-75: 글자용 강조 빨강 (크림 대비 6.27:1 AA 충족) */ --text-info: #175368; /* BUG-75: 글자/제목용 청록 (#175368, 크림 대비 5.88:1 AA 충족) */ --accent-info: #216d87; /* 옛 --neon-blue → Cozy 강조 파랑 (WCAG AA) */ --accent-ok: #6fa88f; /* 옛 --neon-green → Cozy 강조 초록 */ --accent-warn: #e8a53c; /* 옛 --neon-yellow → Cozy 강조 노랑 */ /* 별칭 — style.css 밖 300여 곳이 아직 옛 이름을 쓴다. 지우지 말 것. */ --neon-blue: var(--accent-info); --neon-green: var(--accent-ok); --neon-yellow: var(--accent-warn); --text-primary: #3e4542; /* Cozy Day 기본 잉크 글자 */ --text-light: #3e4542; /* Cozy Day 기본 잉크 글자로 통일 (사용처 10곳) */ --text-dim: #646661; /* Cozy Day 보조 글자 (WCAG AA 4.6:1) */ --glass-bg: rgba(250, 244, 232, 0.88); /* Cozy Day HUD/패널 크림 */ /* 뒤가 비치면 안 되는 면(모달 상자). --glass-bg와 같은 색의 불투명판이다. */ --panel-solid: #faf4e8; /* 패널 안에 한 단 들어간 면(입력창·내부 그리드·잠긴 카드). 값은 확정 로비 시안의 --card-sunk 그대로다(scripts/ui-redesign/lobby-redesign/_base.css). 이런 자리에 --scrim-*를 쓰면 안 된다 — 스크림은 뒤를 가리는 잉크 막이라 크림 위에서 회색 덩어리가 된다. 실제로 8곳이 그렇게 돼 있었다. */ --surface-sunk: #efe4cd; --surface-panel: var(--surface-sunk); --card-sunk: #efe4cd; --border-soft: #ecdfc4; --accent-shade: #1a576b; --accent-wash: rgba(37, 118, 145, 0.12); --warn-shade: #ba8028; --ink-faint: #a9a89a; --glass-border: #dcd0bb; /* Cozy Day 기본 경계선 */ /* 기본 경계선. 지금은 어두운 바탕 위의 흰 실선이고, 라이트에서는 밝은 바탕 위의 어두운 실선(#dcd0bb)이 된다 — 값이 아니라 방향이 바뀐다. */ --rule: #dcd0bb; --border-color: var(--rule); --rule-strong: #c8baa2; /* 카드 맞춤형 슈트 컬러 */ --color-spade: #8b62ff; /* 보랏빛 스페이드 */ --color-heart: #d50000; /* 클래식 레드 하트 (다이아몬드와 구분선명화) */ --color-diamond: #ff007f; /* 핑크 다이아몬드 (Stage 표시 색상) */ --color-club: #00a2ff; /* 스카이블루 클럽 */ --color-star: #ffaa00; /* 옐로우 스타 */ /* 그림자 토큰 (1:1 보존, 부드러운 자연 음영) */ --shadow-dark-015: rgba(0, 0, 0, 0.08); --shadow-dark-02: rgba(0, 0, 0, 0.12); --shadow-dark-025: rgba(0, 0, 0, 0.15); --shadow-dark-03: rgba(0, 0, 0, 0.18); --shadow-dark-04: rgba(0, 0, 0, 0.22); --shadow-dark-05: rgba(0, 0, 0, 0.28); --shadow-dark-055: rgba(0, 0, 0, 0.32); --shadow-dark-06: rgba(0, 0, 0, 0.38); --shadow-dark-07: rgba(0, 0, 0, 0.45); --shadow-dark-08: rgba(0, 0, 0, 0.55); --shadow-dark-09: rgba(0, 0, 0, 0.65); /* 덮개(Scrim) 토큰 (1:1 보존, 잉크 #3e4542 계열) */ --scrim-02: rgba(62, 69, 66, 0.2); --scrim-025: rgba(62, 69, 66, 0.25); --scrim-03: rgba(62, 69, 66, 0.3); --scrim-04: rgba(62, 69, 66, 0.4); --scrim-05: rgba(62, 69, 66, 0.5); --scrim-055: rgba(62, 69, 66, 0.55); --scrim-07: rgba(62, 69, 66, 0.7); --scrim-085: rgba(62, 69, 66, 0.85); /* 흰색 반투명 경계선 토큰 (슬라이스 B: 잉크 #3e4542 극성 반전) */ --rule-white-005: rgba(62, 69, 66, 0.05); --rule-white-006: rgba(62, 69, 66, 0.06); --rule-white-008: rgba(62, 69, 66, 0.08); --rule-white-012: rgba(62, 69, 66, 0.12); --rule-white-02: rgba(62, 69, 66, 0.2); --rule-white-025: rgba(62, 69, 66, 0.25); --rule-white-03: rgba(62, 69, 66, 0.3); --rule-white-05: rgba(62, 69, 66, 0.5); --rule-white-07: rgba(62, 69, 66, 0.7); /* 흰색 반투명 면/하이라이트 토큰 (슬라이스 B: 밝은 크림 #fffdf7 반투명) */ --surface-white-003: rgba(255, 253, 247, 0.3); --surface-white-004: rgba(255, 253, 247, 0.4); --surface-white-005: rgba(255, 253, 247, 0.5); --surface-white-006: rgba(255, 253, 247, 0.6); --surface-white-008: rgba(255, 253, 247, 0.75); --surface-white-009: rgba(255, 253, 247, 0.85); --surface-white-015: rgba(255, 253, 247, 0.95); --surface-white-018: #fffdf7; /* 흰색 반투명 글자색 토큰 (슬라이스 A: 약한 글자 #a8a79d 방향) */ --text-white-035: rgba(168, 167, 157, 0.35); --text-white-045: rgba(168, 167, 157, 0.45); /* 어두운 반투명 경계선 토큰 (슬라이스 B: 잉크 #3e4542 1:1) */ --rule-dark-015: rgba(62, 69, 66, 0.15); --rule-dark-022: rgba(62, 69, 66, 0.22); /* 슬라이스 11: 강조색 알파 변형 토큰 (1:1 보존) */ --accent-info-a10: rgba(57, 168, 205, 0.1); --accent-info-a12: rgba(57, 168, 205, 0.12); --accent-info-a15: rgba(57, 168, 205, 0.15); --accent-info-a18: rgba(57, 168, 205, 0.18); --accent-info-a20: rgba(57, 168, 205, 0.2); --accent-info-a25: rgba(57, 168, 205, 0.25); --accent-info-a30: rgba(57, 168, 205, 0.3); --accent-info-a40: rgba(57, 168, 205, 0.4); --accent-info-a5: rgba(57, 168, 205, 0.05); --accent-info-a50: rgba(57, 168, 205, 0.5); --accent-info-a6: rgba(57, 168, 205, 0.06); --accent-info-a70: rgba(57, 168, 205, 0.7); --accent-info-a8: rgba(57, 168, 205, 0.08); --accent-primary-a15: rgba(57, 168, 205, 0.15); --accent-primary-a30: rgba(57, 168, 205, 0.3); /* Cozy Day --accent-primary(#216d87) 기준. 위 a15/a30은 옛 네온 색 보존용이라 새 상호작용 강조에는 이 토큰을 쓴다. */ --accent-primary-cozy-a45: rgba(33, 109, 135, 0.45); --brand-heart-a2: rgba(184, 70, 60, 0.02); --brand-heart-a40: rgba(184, 70, 60, 0.4); --brand-heart-a50: rgba(184, 70, 60, 0.5); --brand-heart-a60: rgba(184, 70, 60, 0.6); --brand-heart-a80: rgba(184, 70, 60, 0.8); --color-diamond-a20: rgba(224, 138, 60, 0.2); --state-badge-a10: rgba(232, 165, 60, 0.1); --state-badge-a15: rgba(232, 165, 60, 0.15); --state-badge-a30: rgba(232, 165, 60, 0.3); --state-badge-a40: rgba(232, 165, 60, 0.4); --state-badge-a5: rgba(232, 165, 60, 0.05); --state-badge-a70: rgba(232, 165, 60, 0.7); --state-badge-a8: rgba(232, 165, 60, 0.08); --state-danger-glow-a60: rgba(184, 70, 60, 0.6); --text-accent-a25: rgba(62, 69, 66, 0.25); --text-accent-a30: rgba(62, 69, 66, 0.3); --text-accent-a5: rgba(62, 69, 66, 0.05); /* 슬라이스 12: 값 회귀 복원 및 수트 토큰 분리 */ --accent-info-alt-a50: rgba(57, 168, 205, 0.5); --accent-info-alt-a70: rgba(57, 168, 205, 0.7); --suit-circle: #00f0ff; /* ⭕ 수트. COZY_UI_CARD_SPEC §4 */ --suit-circle-a40: rgba(57, 168, 205, 0.4); --suit-square: #ff00ff; /* ⏹️ 수트. COZY_UI_CARD_SPEC §4 */ --suit-square-a40: rgba(176, 90, 162, 0.4); --state-badge-a25: rgba(232, 165, 60, 0.25); /* 슬라이스 A: 실패 UI 및 라이프 하트 전용 토큰 (#b8463c Cozy Day 강조 빨강) */ --color-fail-red: #b8463c; /* 실패·게임오버 계열 Cozy 빨강 */ --color-life-heart: #b8463c; /* 라이프 하트 아이콘 Cozy 빨강 */ --suit-crown: #2f6b52; /* 👑 수트. COZY_UI_CARD_SPEC §4 */ /* 게임플레이 보호 발광 (슬라이스 C: 경고 빨강 #b8463c 계열 전환) */ --state-danger-glow-a10: rgba(184, 70, 60, 0.1); --state-danger-glow-a15: rgba(184, 70, 60, 0.15); --state-danger-glow-a30: rgba(184, 70, 60, 0.3); --state-danger-glow-a40: rgba(184, 70, 60, 0.4); --state-danger-glow-a45: rgba(184, 70, 60, 0.45); /* 슬라이스 20: 그라디언트 종단점 전용 토큰 (1:1 보존) */ --accent-primary-shade: #2b829e; --color-fail-red-shade: #8c322b; /* --accent-ok(#6fa88f)의 알파 변형. a15 외 넷은 2026-08-26 다크 표면 정리에서 쓰였는데 정의를 안 만들어 선언이 통째로 무효가 됐다 — 정의 없는 var()는 옛 값으로 되돌아가는 게 아니라 그 선언을 버린다. 지운 클리어 스테이지 카드 배경이 투명이 되고 NPC 배지 테두리가 사라졌다. */ --accent-ok-a5: rgba(111, 168, 143, 0.05); --accent-ok-a12: rgba(111, 168, 143, 0.12); --accent-ok-a15: rgba(111, 168, 143, 0.15); --accent-ok-a30: rgba(111, 168, 143, 0.3); --accent-ok-a40: rgba(111, 168, 143, 0.4); --accent-ok-dark-shade: rgba(40, 70, 55, 0.85); --accent-ok-dark-hover-shade: rgba(30, 58, 45, 0.95); --accent-primary-a3: rgba(57, 168, 205, 0.03); --btn-rank-play-shade: #2b829e; --btn-rank-play-hover-start: #4dbbdc; --btn-rank-play-hover-end: #246e86; --accent-warn-shade: #ba8028; --accent-info-shade: #2b829e; /* UI-12 Cozy ingame structure tokens */ --cozy-hud-bg: #faf4e8; --cozy-card-bg: #fffdf7; --cozy-table-rail-top: #c08a63; --cozy-table-rail-bottom: #9a6743; --cozy-table-inner-top: #eed7b6; --cozy-table-inner-bottom: #e3c49f; --cozy-table-grain-a08: rgba(154, 103, 67, 0.08); --cozy-table-grain-a05: rgba(255, 253, 247, 0.5); --cozy-table-shadow: rgba(115, 82, 50, 0.32); --cozy-cta-text: #fffdf7; --cozy-cta-primary-shadow: #1f6d86; --cozy-cta-primary-hover: #24708c; --cozy-seat-north: #e8a53c; --cozy-seat-west: #6fa88f; --cozy-seat-east: #b8463c; --cozy-seat-south: #39a8cd; --cozy-suit-spade: #202421; --cozy-suit-spade-normal: #7d5b9a; --cozy-suit-diamond: #e08a3c; --cozy-suit-heart: #b8463c; --cozy-suit-club: #3d8ba8; /* 튜토리얼 연결선(BUG-77). 목표 카드 테두리와 같은 계열이되 어둡게 잡은 값이다 — 3.5px 선은 두꺼운 테두리보다 대비에서 훨씬 불리하다. 크림 펠트(#eed7b6~#e3c49f) 대비를 잰 값이며, 그래픽 요소 기준 3:1을 어두운 쪽에서도 넘긴다. collect #b45309 3.59 / 3.03 (테두리 --accent-warn #e8a53c 는 1.52 / 1.28) acquire #2e7d56 3.59 / 3.03 (테두리 --accent-ok #6fa88f 는 1.96 / 1.65) avoid #b8463c 3.78 / 3.18 (테두리 --state-danger 와 같은 값) 색을 바꾸려면 두 배경색 모두에서 다시 재라. 밝은 쪽만 보면 어두운 쪽이 미달한다. */ /* 튜토리얼 글자 뒤 크림 띠(BUG-80). 펠트 밝은 쪽(#eed7b6)에 가깝게 잡아 띠가 있는지 모를 정도로 두되, 카드의 검은 하단 띠를 덮을 만큼은 불투명해야 한다. */ --tut-text-scrim: rgba(247, 237, 220, 0.92); --tut-line-collect: #b45309; --tut-line-acquire: #2e7d56; --tut-line-avoid: #b8463c; /* 2026-09-04 사용자 보고: 별(★)과 다이아(♦)가 둘 다 주황 계열(H≈29°/37°)이라 변별이 거의 안 됐다(카드 텍스트·하단 띠 모두). 별을 짙은 금색(H≈45°)으로 옮겨 색상각을 벌리고, 다이아·기존 별(둘 다 대비비 ~2.5:1)보다 흰 카드 배경 대비도 높였다(새 별 텍스트 ~4:1). 하단 띠(--cozy-suit-star-bar)도 다이아 띠(currentColor → #e08a3c)와 헷갈리지 않도록 같이 옮긴다. */ --cozy-suit-star: #9c7a00; --cozy-suit-star-bar: #c9a227; --cozy-suit-circle: #39a8cd; --cozy-suit-square: #b05aa2; --cozy-suit-crown: #2f6b52; --cozy-suit-mono: #3e4542; --cozy-suit-mono-bar: #7a7d76; --cozy-special-dragon: #455a8f; --cozy-special-fairy: #d45f91; --cozy-special-magician: #80506d; --cozy-special-zero: #3e4542; --cozy-special-bomb: #7f4134; --cozy-special-cloud: #607d8b; --cozy-special-king: #92732f; --cozy-special-bishop: #2f6f73; --cozy-title-edge: #e0d6c8; } /* ========================================================================== UI 아이콘 (이모지 대체, 2026-08-05) 스프라이트 정의는 index.html 상단. 목적은 플랫폼마다 그림이 달라지는 것을 없애는 것이지 외형을 바꾸는 게 아니므로, 각 아이콘이 원래 이모지의 색을 그대로 갖는다(하트 빨강, 트로피 금색 …). 따라서 여기서 fill/stroke를 강제하지 않는다 — 색은 스프라이트 쪽 각 도형이 직접 들고 있다. 크기는 em 기준이라 기존 font-size 레이아웃을 그대로 재사용한다. ========================================================================== */ .ui-icon { /* 1em이면 한글 본문 옆에서 작아 보인다. 한글은 라틴 대문자보다 글자 높이가 커서 같은 1em이라도 아이콘 쪽이 눌려 보이므로 광학 보정으로 조금 키운다. */ width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.18em; flex: none; overflow: visible; } /* 인라인 텍스트와 나란히 놓일 때의 기본 간격. */ .ui-icon.lead { margin-right: 0.42em; } /* NPC 아바타 -------------------------------------------------------------- 원형 프레임을 꽉 채우므로 viewBox 40x40을 100% 크기로 쓴다. 피부·머리·옷 색은 각 의 인라인 --skin/--hair/--cloth로 들어온다. 의 그림자 트리에는 문서 CSS 선택자가 닿지 않지만, 커스텀 프로퍼티는 상속되는 값이라 그대로 넘어간다. 아래 값은 혹시 누락됐을 때의 안전망이다. */ .npc-avatar-svg { width: 100%; height: 100%; display: block; border-radius: 50%; background: #928366; --skin: #e0ac69; --hair: #3b2a21; --cloth: #303a5a; } /* 리더보드 이름 앞의 국기. 국적이 없는 행은 자체가 안 나오므로 자리도 안 잡는다. twemoji CDN 이미지라 실패할 수 있고, 그때는 JS가 display:none으로 감춘다 (CSP에 'unsafe-inline'이 없어 인라인 onerror를 못 쓴다 - attachLeaderboardFlagFallback 참고). */ .lb-flag { width: 16px; height: 16px; flex-shrink: 0; vertical-align: -2px; margin-right: 5px; border-radius: 2px; object-fit: contain; } /* flex 줄 안에서는 부모의 gap이 간격을 잡으므로 자체 여백을 뺀다 (안 그러면 메달-국기 8px, 국기-이름 13px로 어긋난다). */ .lb-flag.in-row { margin-right: 0; } /* "내 캐릭터" 편집 모달의 선택 줄 (형태/피부/머리/옷) */ .char-section { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; } .char-label { flex-shrink: 0; width: 42px; padding-top: 6px; font-size: 0.72rem; font-weight: 700; color: #8fa0ba; } .char-swatches { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0; } /* 형태 칸은 미니 아바타, 색 칸은 원형 색점. 테두리 두께를 선택 여부와 무관하게 2px로 고정해야 고를 때 칸 크기가 흔들리지 않는다. */ .char-swatch { padding: 0; background: var(--surface-white-005); border: 2px solid var(--rule-white-012); border-radius: 50%; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; } .char-swatch:hover { transform: scale(1.08); } .char-swatch.selected { border-color: var(--accent-info); box-shadow: var(--shadow-dark-03); } /* 형태 칸만 밝은 배경을 깐다. 어두운 모달 위에서 검은 머리(#241a14 등)가 배경에 묻혀 머리 모양이 안 보였다. 단, 밝게만 하면 반대로 밝은 머리(#c8c8c8·#e6e6e6)가 묻힌다. 그래서 배경을 바꾸는 것과 함께 형태 칸의 미리보기 색을 고정한다(renderCharacterPickers 참고) - 이 줄이 하는 일은 "형태 고르기"지 "색 보기"가 아니고, 색 조합은 바로 위 큰 미리보기가 보여준다. 테두리도 같이 어둡게 간다. 흰 반투명 테두리는 밝은 배경 위에서 사라진다. */ .char-swatch.shape { width: 34px; height: 34px; overflow: hidden; background: #d7e0ec; border-color: var(--rule-dark-022); } .char-swatch.color { width: 26px; height: 26px; } /* 영어(EN) 국기 아이콘: 특정 국가에 치우치지 않도록 영국/미국 국기를 대각선으로 절반씩 표시 */ .flag-split-en { position: relative; display: inline-block; overflow: hidden; background: #000; } .flag-split-en img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .flag-split-en img:first-child { clip-path: polygon(0 0, 100% 0, 0 100%); } .flag-split-en img:last-child { clip-path: polygon(100% 0, 100% 100%, 0 100%); } /* 2. 초기 리셋 및 레이아웃 설정 */ * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-user-select: none; } html, body { width: 100%; height: 100%; overflow: hidden; background-color: var(--bg-dark); font-family: 'Nunito', sans-serif; color: var(--text-light); display: flex; justify-content: center; align-items: center; } html.viewport-scale-pending:not(.viewport-scale-ready) #app-container, html.viewport-scale-pending:not(.viewport-scale-ready) #overlay-layer { visibility: hidden; } button, input, select, textarea { font-family: inherit; } /* 메인 앱 컨테이너 */ #app-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(var(--app-scale, 1)); transform-origin: center center; width: 1920px; height: 1080px; z-index: 2; display: flex; justify-content: center; align-items: center; background-color: var(--bg-dark); overflow: hidden; /* 실제 화면 자체에는 외곽 프레임을 두지 않는다. 로비가 1280x720에서 1.5배로 꽉 차는 동안 컨테이너 테두리가 상하 가장자리에서 부분적으로 드러나 선처럼 보였다. */ box-shadow: none; border: 0; border-radius: 0; transition: none; } /* 5. 스크린 베이스 구조 */ .screen { position: absolute; width: 100%; height: 100%; z-index: 10; opacity: 0; pointer-events: none; transform: none; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; } .screen.active { opacity: 1; pointer-events: auto; transform: none; } /* 6. 시작 스크린 전용 스타일 */ #start-screen { text-align: center; } .title-container { margin-bottom: 40px; position: relative; animation: float-title 4s ease-in-out infinite alternate; } @keyframes float-title { 0% { transform: translateY(0px) rotate(-0.5deg); } 100% { transform: translateY(-8px) rotate(0.5deg); } } /* ═══════════════════════════════════════════════════ 후보 백업: 오리지날 네온 하트 배경 버전 스타일 ═══════════════════════════════════════════════════ */ .original-ver .logo-heart-bg { position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); width: 250px; height: 250px; z-index: 0; opacity: 0.8; pointer-events: none; } .original-ver .logo-heart-bg svg { width: 100%; height: 100%; fill: var(--brand-heart-a2); stroke: var(--brand-heart); stroke-width: 1.8; stroke-linecap: round; filter: drop-shadow(0 0 5px var(--brand-heart-a60)) drop-shadow(0 0 15px var(--brand-heart-a40)); animation: heartbeat 1.8s infinite cubic-bezier(0.215, 0.61, 0.355, 1); } @keyframes heartbeat { 0% { transform: scale(1); filter: none; } 14% { transform: scale(1.08); filter: none; } 28% { transform: scale(1.03); filter: none; } 42% { transform: scale(1.15); filter: none; } 70% { transform: scale(1); filter: none; } } /* ═══════════════════════════════════════════════════ 프리미엄 창의적 HE♥RTS 타이틀 디자인 ═══════════════════════════════════════════════════ */ .logo-text-wrapper { position: relative; z-index: 1; } /* --- 장식 카드 문양 파티클 --- */ .title-suit-particles { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 0; } .suit-particle { position: absolute; font-size: 1.6rem; opacity: 0.35; animation: orbit-float 8s linear infinite; } .suit-particle.sp1 { top: -10px; left: 5%; color: #aae0ff; animation-duration: 9s; text-shadow: none; } .suit-particle.sp2 { top: 10px; right: 5%; color: var(--brand-heart); animation-duration: 7s; animation-delay: -2s; text-shadow: none; } .suit-particle.sp3 { bottom: -5px; left: 12%; color: var(--accent-ok); animation-duration: 11s; animation-delay: -4s; text-shadow: none; } .suit-particle.sp4 { bottom: 5px; right: 12%; color: var(--brand-heart); animation-duration: 8s; animation-delay: -1s; text-shadow: none; } @keyframes orbit-float { 0% { transform: translateY(0px) translateX(0px) rotate(0deg); opacity: 0.2; } 25% { transform: translateY(-12px) translateX(8px) rotate(90deg); opacity: 0.45; } 50% { transform: translateY(-3px) translateX(-5px) rotate(180deg); opacity: 0.25; } 75% { transform: translateY(-15px) translateX(3px) rotate(270deg); opacity: 0.4; } 100% { transform: translateY(0px) translateX(0px) rotate(360deg); opacity: 0.2; } } /* --- HEARTS 메인 타이틀 --- */ .creative-title { display: flex; align-items: center; justify-content: center; font-size: 7.5rem; gap: 0; } .title-letter { display: inline-block; animation: letter-glow 3s ease-in-out infinite alternate; } .title-letter:nth-child(1) { animation-delay: 0s; } .title-letter:nth-child(2) { animation-delay: 0.15s; } .title-letter:nth-child(4) { animation-delay: 0.45s; } .title-letter:nth-child(5) { animation-delay: 0.6s; } .title-letter:nth-child(6) { animation-delay: 0.75s; } @keyframes letter-glow { 0% { text-shadow: 0 2px 8px var(--shadow-dark-02); } 100% { text-shadow: 0 4px 14px var(--shadow-dark-03); } } /* --- 하트 심볼 (filled, 정적 크기 + 글로우 애니메이션) --- */ .heart-char-wrapper { display: inline-block; position: relative; width: 6.2rem; height: 6.2rem; margin: 0 8px; vertical-align: middle; } .inline-heart-svg { width: 100%; height: 100%; transform: rotate(180deg); fill: var(--brand-heart); filter: drop-shadow(0 2px 8px var(--shadow-dark-02)); animation: heart-glow 3s ease-in-out infinite alternate; } .inline-heart-svg .heart-path { fill: var(--brand-heart); } .inline-heart-svg .heart-a-bar { display: none; } @keyframes heart-glow { 0% { filter: drop-shadow(0 2px 6px var(--shadow-dark-02)); } 100% { filter: drop-shadow(0 4px 12px var(--shadow-dark-03)); } } /* --- 반짝이는 구분 라인 --- */ .title-shimmer-line { width: 80%; height: 2px; margin: 8px auto 6px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--brand-heart), var(--text-primary), var(--brand-heart), transparent); background-size: 200% 100%; animation: shimmer-slide 3s linear infinite; opacity: 0.7; } @keyframes shimmer-slide { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* --- EXTREME 서브타이틀 --- */ .creative-subtitle { display: flex; justify-content: center; gap: 10px; margin-top: 2px; margin-left: 0; letter-spacing: 0; } .extreme-letter { display: inline-block; font-size: 2.2rem; font-weight: 700; color: var(--text-primary); text-shadow: 0 2px 8px var(--shadow-dark-02); animation: extreme-pulse 2.8s ease-in-out infinite alternate; } .extreme-letter:nth-child(1) { animation-delay: 0s; } .extreme-letter:nth-child(2) { animation-delay: 0.12s; } .extreme-letter:nth-child(3) { animation-delay: 0.24s; } .extreme-letter:nth-child(4) { animation-delay: 0.36s; } .extreme-letter:nth-child(5) { animation-delay: 0.48s; } .extreme-letter:nth-child(6) { animation-delay: 0.6s; } .extreme-letter:nth-child(7) { animation-delay: 0.72s; } @keyframes extreme-pulse { 0% { text-shadow: 0 2px 6px var(--shadow-dark-02); opacity: 0.85; } 100% { text-shadow: 0 4px 12px var(--shadow-dark-03); opacity: 1; } } /* ═══════════════════════════════════════════════════ 공통 타이틀 스타일 ═══════════════════════════════════════════════════ */ .neon-title { font-size: 7.5rem; font-weight: 900; letter-spacing: 4px; color: var(--text-primary); text-shadow: 0 4px 12px var(--shadow-dark-03); line-height: 1; } .neon-subtitle { font-size: 2.2rem; font-weight: 700; letter-spacing: 12px; color: var(--text-primary); text-shadow: 0 2px 8px var(--shadow-dark-02); margin-top: 5px; margin-left: 12px; } /* 데모 빌드 배지 - 타이틀 아래 중앙. 정식 빌드에서는 요소 자체가 display:none으로 남는다. */ #demo-title-badge { margin: 10px auto 0; padding: 3px 16px; width: fit-content; font-family: 'Share Tech Mono', monospace; font-size: 0.95rem; font-weight: 700; letter-spacing: 6px; text-indent: 6px; /* letter-spacing이 마지막 글자 뒤에도 붙어 생기는 우측 쏠림 보정 */ color: var(--state-badge); border: 1px solid var(--state-badge); border-radius: 6px; text-shadow: none; box-shadow: var(--shadow-dark-03); } .profile-box { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(10px); border-radius: 12px; padding: 15px 30px; margin-bottom: 35px; display: inline-flex; flex-direction: column; align-items: center; box-shadow: 0 8px 32px var(--shadow-dark-04); } .profile-box label { font-size: 0.85rem; font-weight: 700; color: var(--text-accent); letter-spacing: 3px; margin-bottom: 8px; } .profile-box input { background: var(--surface-sunk); border: 1px solid var(--rule); border-radius: 6px; color: var(--text-primary); font-family: 'Share Tech Mono', monospace; font-size: 1.5rem; text-align: center; padding: 8px 15px; width: 200px; outline: none; transition: all 0.3s ease; } .profile-box input:focus { border-color: var(--accent-info); box-shadow: var(--shadow-dark-03); } /* 7. 공통 버튼 모음 */ .btn { border: none; border-radius: 10px; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 1.1rem; padding: 14px 28px; cursor: pointer; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: inline-flex; align-items: center; justify-content: center; letter-spacing: 1px; } .btn-primary { background: var(--cozy-cta-primary-hover); color: var(--cozy-cta-text); border: 1px solid var(--cozy-cta-primary-shadow); box-shadow: inset 0 -3px 0 var(--cozy-cta-primary-shadow); text-shadow: none; } .btn-primary:active { transform: translateY(1px) scale(0.98); } .btn-secondary { background: var(--surface-white-008); border: 1px solid var(--rule-strong); color: var(--text-light); } .btn-secondary:hover { background: var(--surface-white-018); border-color: var(--accent-info); color: var(--text-primary); box-shadow: var(--shadow-dark-03); transform: translateY(-2px); } .btn-danger { background: linear-gradient(135deg, #b8342a 0%, var(--color-fail-red-shade) 100%); color: var(--cozy-cta-text); border: 1px solid var(--rule-white-02); } .btn-danger:hover { box-shadow: var(--shadow-dark-03); transform: translateY(-2px); } .btn-small { padding: 8px 16px; font-size: 1.02rem; border-radius: 6px; } /* 메뉴 및 도감 서브버튼 */ .menu-buttons { margin-bottom: 40px; } .menu-buttons .btn { font-size: 2rem; padding: 20px 80px; border-radius: 16px; } .sub-menu-container { display: flex; gap: 15px; } /* 8. 게임 진행 팝업 (모달/카드 선택 화면) */ .popup-box { background: var(--glass-bg); border: 2px solid var(--glass-border); backdrop-filter: blur(15px); border-radius: 20px; width: 850px; max-width: 90%; height: 600px; padding: 30px; box-shadow: 0 15px 40px var(--shadow-dark-06); display: flex; flex-direction: column; } .popup-tabs { display: flex; gap: 10px; margin-bottom: 25px; border-bottom: 1px solid var(--rule); padding-bottom: 15px; } .tab-btn { background: none; border: none; color: var(--text-dim); font-family: 'Nunito', sans-serif; font-size: 1.4rem; font-weight: 700; padding: 8px 24px; cursor: pointer; transition: all 0.3s ease; position: relative; } .tab-btn:hover:not(:disabled) { color: var(--text-primary); } .tab-btn.active { color: var(--accent-primary); } .tab-btn.active::after { content: ''; position: absolute; bottom: -16px; left: 0; width: 100%; height: 3px; background: var(--accent-primary); box-shadow: var(--shadow-dark-03); } .tab-btn:disabled { opacity: 0.3; cursor: not-allowed; } .popup-body { display: flex; gap: 30px; flex: 1; } /* 좌측 인원수 */ .player-count-select { display: flex; flex-direction: column; gap: 15px; width: 180px; flex: 0 0 180px; } .player-opt { background: var(--surface-white-005); border: 1px solid var(--rule); border-radius: 10px; color: var(--text-light); font-weight: 700; font-size: 1.1rem; /* [조정] 좌우 여백을 줄여 잠금 아이콘이 있는 5/6인 옵션에서도 라벨이 쓸 수 있는 폭을 넓힘 (기존엔 "5-Player Game" 등 영문 라벨이 좁아서 2줄로 줄바꿈되어 4인 옵션보다 박스가 훨씬 높아 보였음) */ padding: 12px 10px 12px 12px; min-height: 68px; cursor: pointer; display: flex; align-items: center; transition: all 0.3s ease; box-sizing: border-box; } .player-opt-left-wrapper { display: flex; align-items: center; gap: 6px; /* 잠금 아이콘을 라벨 쪽으로 더 붙여 라벨 폭 확보 */ width: 100%; } .player-opt-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .lock-condition { font-size: 0.7rem; color: var(--color-fail-red); opacity: 0.85; margin-top: 4px; text-shadow: none; display: none; line-height: 1.25; word-break: keep-all; overflow-wrap: break-word; } .player-opt:hover:not(.locked) { background: var(--surface-white-015); border-color: var(--accent-info); box-shadow: var(--shadow-dark-03); } .player-opt.active { background: linear-gradient(135deg, var(--accent-info-a20) 0%, var(--accent-info-a5) 100%); border-color: var(--accent-info); box-shadow: var(--shadow-dark-03); color: var(--text-primary); } .player-opt.locked { opacity: 0.55; cursor: not-allowed; } .lock-icon { font-size: 0.85rem; } /* 중앙 레벨 및 덱 슬라이더 (개편된 세로형 스택 레이아웃) */ .level-slider-container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; flex: 1; } .slider-row { display: flex; align-items: center; justify-content: center; gap: 15px; width: 100%; } .slider-arrow { font-size: 1.8rem; cursor: pointer; color: var(--text-dim); transition: all 0.2s ease; padding: 10px; } .slider-arrow:hover { color: var(--text-primary); transform: scale(1.2); } .info-card { background: var(--glass-bg); border: 1px solid var(--rule); border-radius: 15px; width: 220px; height: 280px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; } /* 세로 스택의 와이드 카드 규격 */ .info-card.deck-card-info-wide { width: 480px; height: 155px; padding: 0; display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; } .info-card.level-card-info-wide { width: 480px; height: 110px; padding: 12px 20px; display: flex; flex-direction: column; } .info-card.deck-card-info-wide h3 { font-size: 1.05rem; letter-spacing: -0.3px; margin-bottom: 2px; white-space: nowrap; line-height: 1.2; text-align: center; width: 100%; } .info-card.level-card-info-wide h3 { font-size: 1.4rem; margin-bottom: 5px; } .info-card.level-card-info-wide p { font-size: 0.9rem; line-height: 1.4; } .deck-card-info-wide { border-color: var(--accent-info-a25); box-shadow: var(--shadow-dark-03); } .level-card-info-wide { border-color: var(--text-accent-a25); box-shadow: var(--shadow-dark-03); } .deck-card-info h3 { color: var(--accent-info); } .level-card-info h3 { color: var(--text-accent); } .info-card p { font-size: 0.95rem; line-height: 1.6; color: var(--text-dim); z-index: 1; } /* 덱 구성 정보 세부 레이아웃 */ .deck-info-left { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 195px; padding-left: 6px; padding-right: 6px; border-right: 1px solid var(--rule-strong); height: 100%; text-align: center; box-sizing: border-box; } .deck-trump-badge { font-size: 0.78rem; font-weight: 700; color: var(--accent-info); background: var(--accent-info-a10); border: 1px solid var(--accent-info-a30); padding: 2px 8px; border-radius: 4px; margin-top: 3px; text-shadow: none; display: none; /* 로비 컴팩트 스타일에서는 우측에 표시하므로 기본 숨김 */ } /* 잠긴 덱에서는 뱃지를 표시 (🔒 잠김) */ .info-card.deck-card-info-wide.locked-deck .deck-trump-badge { display: block; } .deck-info-right { display: flex; flex-direction: column; gap: 2px; /* 카드 행 사이 간격 (최소화) */ flex: 1; justify-content: center; /* 남은 여백을 상하단에 균등 분배 */ padding-left: 20px; padding-right: 22px; padding-top: 8px; padding-bottom: 8px; box-sizing: border-box; } .deck-info-right .deck-suit-row { display: flex; align-items: center; gap: 10px; padding: 0; /* 행 패딩을 없애 줄 간 간격 축소 */ border-bottom: none; } .deck-info-right .deck-suit-icon { font-size: 1.2rem; width: 20px; text-align: center; } .deck-info-right .deck-suit-cards { font-family: 'Share Tech Mono', monospace; font-size: 0.9rem; letter-spacing: 0px; text-shadow: none; display: flex; flex: 1; justify-content: space-evenly; /* 모든 덱에서 동일 폭으로 균등 분배 */ align-items: center; white-space: nowrap; } /* 덱 슈트별 컬링 클래스 (진행 팝업 및 도감 모달 전체 적용) */ .deck-suit-row.spade, .deck-suit-row.spade * { color: var(--color-spade) !important; text-shadow: none; } .deck-suit-row.heart, .deck-suit-row.heart * { color: var(--color-heart) !important; text-shadow: none; } .deck-suit-row.diamond, .deck-suit-row.diamond * { color: var(--color-diamond) !important; text-shadow: none; } .deck-suit-row.club, .deck-suit-row.club * { color: var(--color-club) !important; text-shadow: none; } .deck-suit-row.ocean, .deck-suit-row.ocean * { color: #00aaff !important; text-shadow: none; } .deck-suit-row.crown, .deck-suit-row.crown * { color: var(--suit-crown) !important; text-shadow: none; } .deck-suit-row.moon, .deck-suit-row.moon * { color: #b026ff !important; text-shadow: none; } .deck-suit-row.star, .deck-suit-row.star * { color: var(--color-star) !important; text-shadow: none; } /* 로비 전용 컴팩트 덱 정보 스타일 (덱 스타일 B) */ .deck-info-right.lobby-deck-compact { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 16px; text-align: center; } .lobby-deck-line { font-family: 'Share Tech Mono', monospace; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; line-height: 1.4; } .lobby-deck-symbols { font-size: 1.15rem; letter-spacing: 1px; } /* Style B 내의 개별 심볼 고유 컬러 매핑 */ .lobby-suit-sym { display: inline-block; } .lobby-suit-sym.spade { color: var(--cozy-suit-spade-normal) !important; text-shadow: none; } .lobby-suit-sym.spade.is-trump, .lobby-suit-sym.is-trump { color: var(--cozy-suit-spade) !important; text-shadow: none; } .lobby-suit-sym.heart { color: var(--cozy-suit-heart) !important; text-shadow: none; } .lobby-suit-sym.diamond { color: var(--cozy-suit-diamond) !important; text-shadow: none; } .lobby-suit-sym.club { color: var(--cozy-suit-club) !important; text-shadow: none; } .lobby-suit-sym.ocean { color: var(--cozy-suit-circle) !important; text-shadow: none; } .lobby-suit-sym.crown { color: var(--cozy-suit-crown) !important; text-shadow: none; } .lobby-suit-sym.moon { color: #b026ff !important; text-shadow: none; } .lobby-suit-sym.star { color: var(--cozy-suit-star) !important; text-shadow: none; } .lobby-suit-sym.circle { color: var(--cozy-suit-circle) !important; text-shadow: none; } .lobby-suit-sym.square { color: var(--cozy-suit-square) !important; text-shadow: none; } .lobby-suit-sym.mono { color: var(--cozy-suit-mono) !important; text-shadow: none; } .lobby-deck-eq { margin: 0 4px; color: var(--text-dim); font-weight: 400; } .lobby-deck-range { font-size: 1.1rem; color: var(--text-primary) !important; text-shadow: none !important; } .lobby-deck-range-big .lobby-deck-range { font-size: 1.3rem; } .lobby-deck-label { font-size: 0.8rem; color: var(--text-dim); letter-spacing: 2px; text-transform: uppercase; } .lobby-deck-trump { font-size: 0.9rem; color: var(--accent-info); text-shadow: none; margin-top: 1px; } .lobby-deck-spec-label { font-size: 0.72rem; color: var(--text-dim); letter-spacing: 2px; text-transform: uppercase; margin-top: 3px; } .lobby-deck-spec-vals { font-size: 0.95rem; color: var(--text-primary) !important; text-shadow: none !important; letter-spacing: 2px; } /* Style A 모드일 때 로비 트럼프 뱃지 보임 */ .deck-card-info-wide.style-a-mode .deck-trump-badge { display: block; } /* 잠긴 덱 카드 연출 */ .info-card.deck-card-info-wide.locked-deck { border-color: var(--state-danger-glow-a30) !important; box-shadow: var(--shadow-dark-03); background: var(--scrim-05) !important; } .info-card.deck-card-info-wide.locked-deck .deck-info-left h3 { color: var(--text-dim) !important; } .info-card.deck-card-info-wide.locked-deck .deck-info-right { opacity: 0.25; filter: none; pointer-events: none; } .info-card.deck-card-info-wide.locked-deck .deck-trump-badge { background: var(--state-danger-glow-a10) !important; border: 1px solid var(--state-danger-glow-a40) !important; color: var(--color-fail-red) !important; text-shadow: none; } /* 해금 조건 문구는 어절 단위로만 줄바꿈한다. 기본값(word-break: normal)은 한글/CJK를 음절 사이 어디서나 끊어서 "5레벨 클리 / 어"처럼 단어 중간이 갈라지므로 keep-all로 막고, 한 줄에 못 담는 초장문 단어(독일어 합성어 등)만 예외적으로 쪼개지도록 break-word를 둔다. */ .deck-lock-status { word-break: keep-all; overflow-wrap: break-word; } /* 비활성화된 컨트롤 (이어하기 모드 등에서 사용) */ .disabled-control { opacity: 0.25 !important; pointer-events: none !important; cursor: not-allowed !important; } .hidden-control { visibility: hidden !important; } .deck-card-info-wide::before { content: '♠'; position: absolute; font-size: 8rem; /* rgba() alpha로 흐리게 처리하면 일부 플랫폼/폰트에서 카드 기호 글리프의 색상 알파가 무시되고 불투명한 검정으로 렌더링되는 문제가 있어(실측 확인), 색상은 불투명하게 두고 opacity로 투명도를 적용해 우회함. */ color: #8b62ff; opacity: 0.04; bottom: -20px; right: -10px; z-index: 0; } .level-desc-box { background: var(--surface-white-003); border-radius: 8px; padding: 8px 12px; width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; } /* 한글은 word-break: normal에서 CJK로 취급돼 음절 사이 어디서나 끊긴다 ("정식판에서 플레이할 수 있 / 습니다"). keep-all로 어절 단위 줄바꿈을 강제하고, 공백이 없는 중국어·일본어와 독일어 합성어처럼 한 줄에 못 담는 경우에만 overflow-wrap: anywhere가 예외적으로 쪼개도록 남겨둔다. */ .level-desc-box p { color: var(--text-light); word-break: keep-all; overflow-wrap: anywhere; line-height: 1.45; font-size: 0.92rem; text-align: center; margin: 0; } /* 레벨 번호 바 스타일링 */ .level-indicator-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 8px auto; width: 480px; box-sizing: border-box; } .level-num-btn { flex: 1; height: 38px; border-radius: 6px; border: 1px solid var(--rule-strong); background: var(--scrim-04); color: var(--text-dim); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.5px; cursor: pointer; transition: all 0.2s ease; box-shadow: inset 0 0 5px var(--shadow-dark-05); } .level-num-btn:hover { transform: scale(1.02); color: var(--text-primary); } /* 해금된 레벨 활성 상태 (초록색 발광) */ .level-num-btn.active.unlocked { border-color: var(--accent-ok); color: var(--text-primary); box-shadow: var(--shadow-dark-03); background: rgba(57, 255, 20, 0.15); } /* 해금되었지만 비활성 상태인 레벨 (파란색) */ .level-num-btn.unlocked:not(.active) { border-color: var(--accent-info); color: var(--text-light); box-shadow: var(--shadow-dark-03); } .level-num-btn.unlocked:not(.active):hover { border-color: var(--accent-info); box-shadow: var(--shadow-dark-03); background: var(--accent-info-a10); } /* 잠긴 레벨 활성 상태 (자물쇠 세부정보 보기 상태) */ .level-num-btn.active.locked { border-color: var(--color-fail-red); color: var(--color-fail-red); box-shadow: var(--shadow-dark-03); background: var(--state-danger-glow-a15); } /* 잠긴 레벨 비활성 상태 (🚫 표시) */ .level-num-btn.locked:not(.active) { border-color: var(--state-danger-glow-a30); color: var(--state-danger-glow-a60); background: var(--state-danger-glow-a10); } .level-num-btn.locked:not(.active):hover { border-color: var(--color-fail-red); color: var(--color-fail-red); box-shadow: var(--shadow-dark-03); background: var(--state-danger-glow-a15); } .popup-actions { display: flex; justify-content: space-between; gap: 15px; margin-top: 25px; border-top: 1px solid var(--rule); padding-top: 20px; } .popup-actions .btn { padding: 12px 40px; } /* 9. 스테이지 선택 스크린 */ .stage-header { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 900px; margin-bottom: 30px; } .neon-text { font-size: 2.8rem; font-weight: 900; color: var(--text-primary); text-shadow: none; } .lives-indicator { background: rgba(255, 51, 102, 0.1); border: 1px solid rgba(255, 51, 102, 0.3); border-radius: 30px; padding: 10px 24px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-dark-03); } .heart-icon { font-size: 1.5rem; animation: heartbeat 1.2s infinite alternate; } @keyframes heartbeat { 0% { transform: scale(1); } 100% { transform: scale(1.2); } } .lives-num { font-size: 1.6rem; font-weight: 900; font-family: 'Share Tech Mono', monospace; color: var(--color-heart); } .stages-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; width: 100%; max-width: 950px; } .stage-card { background: var(--glass-bg); border: 1px solid var(--rule); border-radius: 12px; width: calc(25% - 15px); min-width: 185px; max-width: 220px; height: 140px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; cursor: pointer; transition: all 0.3s ease; } .stage-card:hover:not(.locked):not(.completed) { border-color: var(--accent-info); box-shadow: var(--shadow-dark-03); transform: translateY(-4px); } .stage-card h4 { font-size: 1.2rem; margin-bottom: 8px; color: var(--text-dim); } .stage-card.active { border-color: var(--accent-info); box-shadow: var(--shadow-dark-03); background: var(--accent-info-a5); } .stage-card.active h4 { color: var(--accent-info); font-weight: 700; } /* 줄바꿈 규칙은 .level-desc-box p 와 같은 이유 */ .stage-card .mission-desc { font-size: 0.82rem; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; text-align: center; } .stage-card.completed { background: var(--accent-ok-a5); border-color: var(--accent-ok-a30); justify-content: flex-start; /* Stage 텍스트를 상단에 고정 정렬 */ padding-top: 38px; /* 기존 비클리어 카드와 동일한 높이에 유지되도록 패딩 설정 */ } .stage-card.completed h4 { color: var(--accent-ok); } .stage-card .stamp { position: absolute; border: 2px solid var(--color-fail-red); color: var(--color-fail-red); font-size: 0.9rem; font-weight: 900; padding: 2px 6px; text-align: center; text-transform: uppercase; transform: translate(-50%, -50%) rotate(-15deg); border-radius: 4px; top: 70%; /* 도장을 지금보다 약간 하단에 위치시키되, 글자를 가리지 않는 선에서 약간 올림 (기존 75%) */ left: 50%; box-shadow: var(--shadow-dark-03); pointer-events: none; letter-spacing: 1px; } .stage-card.locked { opacity: 0.45; cursor: not-allowed; } .lock-overlay { font-size: 1.8rem; margin-top: 5px; } /* stages-grid count-based dynamic layouts (유저 피드백 반영) */ .stages-grid.stages-count-8, .stages-grid.stages-count-9, .stages-grid.stages-count-10, .stages-grid.stages-count-11, .stages-grid.stages-count-12, .stages-grid.stages-count-13, .stages-grid.stages-count-14, .stages-grid.stages-count-15, .stages-grid.stages-count-16, .stages-grid.stages-count-17, .stages-grid.stages-count-18, .stages-grid.stages-count-19, .stages-grid.stages-count-20 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 950px; width: 100%; } .stages-grid.stages-count-8 .stage-card, .stages-grid.stages-count-9 .stage-card, .stages-grid.stages-count-10 .stage-card, .stages-grid.stages-count-11 .stage-card, .stages-grid.stages-count-12 .stage-card, .stages-grid.stages-count-13 .stage-card, .stages-grid.stages-count-14 .stage-card, .stages-grid.stages-count-15 .stage-card, .stages-grid.stages-count-16 .stage-card, .stages-grid.stages-count-17 .stage-card, .stages-grid.stages-count-18 .stage-card, .stages-grid.stages-count-19 .stage-card, .stages-grid.stages-count-20 .stage-card { width: 100%; min-width: 0; max-width: none; } .stages-grid.stages-count-7 { max-width: 950px; } .stages-grid.stages-count-7 .stage-card { width: calc(25% - 15px); /* 4 columns on Row 1, 3 on Row 2 */ min-width: 185px; max-width: 220px; } .stages-grid.stages-count-6 { max-width: 900px; } .stages-grid.stages-count-6 .stage-card { width: calc(33.333% - 14px); /* 3 + 3 layout */ min-width: 200px; max-width: 250px; } .stages-grid.stages-count-5 { max-width: 900px; } .stages-grid.stages-count-5 .stage-card { width: calc(33.333% - 14px); /* 3 + 2 layout */ min-width: 200px; max-width: 250px; } .stages-grid.stages-count-4 { max-width: 600px; /* 2 + 2 layout */ } .stages-grid.stages-count-4 .stage-card { width: calc(50% - 10px); min-width: 220px; max-width: 260px; } .stages-grid.stages-count-3 { max-width: 900px; } .stages-grid.stages-count-3 .stage-card { width: calc(33.333% - 14px); /* 3 in a single row */ min-width: 200px; max-width: 260px; } .stages-grid.stages-count-2 { max-width: 700px; } .stages-grid.stages-count-2 .stage-card { width: calc(50% - 10px); /* 2 in a single row */ min-width: 220px; max-width: 300px; } .stages-grid.stages-count-1 { max-width: 400px; } .stages-grid.stages-count-1 .stage-card { width: 320px; /* 1 centered card */ max-width: 320px; } /* ========================================================================== LOBBY G2 - Symmetrical Cozy Day Layout (UI-14) ========================================================================== */ #stage-screen { width: 1280px; height: 720px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 18px 20px; gap: 12px; /* 인게임과 같은 크림 단색으로 맞춘다(BUG-87, 2026-08-28 사용자 결정). 두 시안이 서로 달랐다 — 로비 시안(lobby-redesign/_base.css:39)은 body에 방사형 --felt(#eed7b6→#e3c49f)을, 인게임 시안(_gen_dirs3.py:30)은 .stage에 단색 --cream(#f0e6d5)을 쓴다. 앱이 양쪽을 각각 따라서 두 화면이 어긋나 있었다. 23차가 BUG-49로 넣은 방사형은 로비 시안 근거였고, 이번에 인게임 쪽으로 통일한다. */ background: var(--cozy-cream, #f0e6d5); font-family: 'Nunito', sans-serif; color: var(--text-primary); box-sizing: border-box; overflow: hidden; transform: scale(1.5); transform-origin: center center; } /* Top bar (Back button, Centered Profile, Sound & Lang options - BUG-53/71/72: 시안 일치 투명 배경 + 윤곽선 전용, PLAYER 라벨 제거) */ #stage-screen .topbar { display: flex; align-items: center; justify-content: space-between; position: relative; flex: none; height: 36px; } #stage-screen .back-btn { font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 700; color: var(--text-dim); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 6px 15px 6px 11px; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 4px; flex: none; box-shadow: none; } #stage-screen .back-btn:hover { background: var(--surface-white-018); color: var(--text-dark); border-color: var(--text-dim); } #stage-screen .profile-box-lobby { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 5px 14px 5px 6px; display: flex; /* 아바타는 이름 왼쪽에 둔다. 기본 .profile-box가 column이라(style.css:782) 여기서 덮지 않으면 알약 안에서 아바타와 이름이 위아래로 쌓인다 — 타이틀 화면은 #start-screen #btn-open-profile이 row로 덮고 있어 로비만 그 상태였다. 간격은 8px다. 타이틀(16px)을 그대로 쓰면 높이 36px짜리 알약에서 너무 벌어진다. 왼쪽 padding을 6px로 줄인 것은 아바타가 원형이라 시각적 여백이 이미 있어서다. */ flex-direction: row; gap: 8px; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; box-shadow: none; flex: none; z-index: 5; } #stage-screen .profile-box-lobby:hover { border-color: var(--text-dim); background: var(--surface-white-018); transform: translate(-50%, -50%) scale(1.02); } #stage-screen .profile-box-lobby .profile-name-text { font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 800; color: var(--text-primary); max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #stage-screen .topbar .top-options-container { position: static; display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; } #stage-screen .topbar .option-round-btn { width: 44px; height: 32px; border: 1px solid var(--rule) !important; border-radius: 999px; background: transparent !important; color: var(--text-dim) !important; box-shadow: none !important; font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; } #stage-screen .topbar .option-round-btn:hover { background: var(--surface-white-018) !important; color: var(--text-dark) !important; border-color: var(--text-dim) !important; transform: scale(1.04); } #stage-screen .topbar .option-round-btn .ui-icon { width: 20px; height: 20px; } /* Players Tabs (3-way split, 66px height) */ #stage-screen .tabs { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; height: 66px; } #stage-screen .p-card { background: var(--cozy-card-bg); border: 2px solid var(--rule); border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 16px; cursor: pointer; transition: all 0.2s ease; user-select: none; } #stage-screen .p-card:hover:not(.off) { border-color: var(--accent-primary); background: var(--accent-wash); } #stage-screen .p-card.on { border-color: var(--accent-primary); background: var(--accent-wash); } #stage-screen .p-card.off { background: var(--card-sunk); cursor: not-allowed; opacity: 0.65; } #stage-screen .p-card .seat { width: 70px; height: 42px; flex: none; } #stage-screen .seat .ring { fill: #e8d9bd; } #stage-screen .seat .dot { fill: #8d8a7e; } #stage-screen .seat .dot-me { fill: var(--accent-primary); } #stage-screen .p-card .pnum { font-size: 28px; font-weight: 900; line-height: 1.2; letter-spacing: -1px; color: var(--text-primary); } #stage-screen .p-card.on .pnum { color: var(--accent-shade); } #stage-screen .p-card.off .pnum { color: var(--ink-faint); } #stage-screen .p-card .ptxt b { display: block; font-size: 14px; font-weight: 700; line-height: 1.15; color: var(--text-primary); } #stage-screen .p-card .ptxt span { display: block; font-size: 11px; color: var(--text-dim); margin-top: 1px; } #stage-screen .p-card.off .ptxt b, #stage-screen .p-card.off .ptxt span { color: var(--ink-faint); } #stage-screen .p-lock { margin-left: auto; text-align: right; } #stage-screen .p-lock i { font-style: normal; font-size: 14px; color: var(--warn-shade); } #stage-screen .p-lock span { display: block; font-size: 10px; font-weight: 700; color: var(--warn-shade); } /* Deck Carousel Row (Height 92px) */ #stage-screen .deck { flex: none; height: 92px; background: var(--cozy-card-bg); border: 1px solid var(--rule); border-radius: 12px; display: flex; align-items: center; gap: 10px; padding: 0 12px; box-sizing: border-box; } #stage-screen .deck-arrow { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rule); background: var(--surface-white-018); display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--text-dim); line-height: 1; cursor: pointer; transition: all 0.2s ease; } #stage-screen .deck-arrow:hover { color: var(--text-primary); border-color: var(--accent-primary); transform: scale(1.08); } #stage-screen .deck-peek { width: 156px; display: flex; align-items: center; gap: 8px; flex: none; opacity: 0.85; } #stage-screen .deck-peek.next { justify-content: flex-end; } #stage-screen .deck-peek .pk-name { width: 112px; display: flex; flex-direction: column; justify-content: center; flex: none; font-size: 12px; font-weight: 700; color: var(--text-dim); line-height: 1.2; overflow: hidden; } #stage-screen .deck-peek:not(.next) .pk-name { text-align: left; } #stage-screen .deck-peek.next .pk-name { text-align: right; } #stage-screen .deck-peek .pk-name span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #stage-screen .deck-peek .pk-name em { display: block; font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; } #stage-screen .deck-centre { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 12px; } #stage-screen .dk { display: inline-block; border-radius: 6px; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 2px 6px rgba(60,45,20,0.15); flex: none; } #stage-screen .dk.sm { width: 32px; height: 44px; } #stage-screen .dk.lg { width: 46px; height: 62px; } #stage-screen .deck-bal { display: flex; flex-direction: column; gap: 5px; min-width: 0; } #stage-screen .deck-bal .r1 { display: flex; align-items: center; gap: 10px; } #stage-screen .deck-bal .r1 h2 { font-size: 18px; font-weight: 900; color: var(--text-primary); letter-spacing: -0.2px; margin: 0; white-space: nowrap; } #stage-screen .deck-bal .r2 { display: flex; align-items: center; gap: 8px; } #stage-screen .deck-pos { font-size: 12px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; margin-left: 2px; } #stage-screen .deck-pos b { font-size: 14px; font-weight: 900; color: var(--text-primary); } #stage-screen .chip { font-size: 11px; font-weight: 700; color: var(--text-dim); background: var(--surface-white-018); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 8px; letter-spacing: 0.2px; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; } #stage-screen .chip .suit-s { color: var(--cozy-suit-spade); } #stage-screen .chip .suit-c { color: var(--cozy-suit-club); } #stage-screen .chip .suit-h { color: var(--cozy-suit-heart); } #stage-screen .chip .suit-d { color: var(--cozy-suit-diamond); } #stage-screen .spec-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-white-018); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 7px; } #stage-screen .spec-pill em { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--accent-shade); } #stage-screen .spec-tiles { display: inline-flex; gap: 2px; align-items: center; } #stage-screen .spec-tile { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; height: 14px; padding: 0 2px; background: var(--card-sunk); border: 1px solid var(--border-soft); border-radius: 3px; font-size: 10px; font-weight: 900; color: var(--text-primary); line-height: 1; } #stage-screen .spec-tile i { font-style: normal; font-size: 8px; font-weight: 900; color: var(--brand-heart); margin-left: 1px; } #stage-screen .deck-info-btn { font-family: 'Nunito', sans-serif; font-size: 11px; font-weight: 700; color: #185266; background: var(--card-sunk); border: 1px solid var(--border-soft); border-radius: 999px; padding: 2px 9px; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } #stage-screen .deck-info-btn:hover { background: var(--accent-wash); } #stage-screen .deck-locked-bar { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--warn-shade); } #stage-screen .deck-locked-bar .s-track { width: 80px; height: 5px; background: var(--border-soft); border-radius: 999px; overflow: hidden; } #stage-screen .deck-locked-bar .s-fill { height: 100%; background: var(--accent-warn); } /* Symmetrical Modes: Left = Ranked, Right = Stages */ #stage-screen .modes { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } #stage-screen .mode { background: var(--cozy-card-bg); border: 2px solid var(--rule); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; min-height: 0; box-sizing: border-box; } #stage-screen .mode-head { display: flex; align-items: center; justify-content: space-between; flex: none; } #stage-screen .mode-head .ttl h2 { font-size: 16px; font-weight: 900; letter-spacing: -0.2px; color: var(--text-primary); margin: 0; } #stage-screen .count-chip { font-size: 11px; font-weight: 700; color: var(--text-dim); background: var(--surface-white-018); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 8px; } #stage-screen .mode-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; } #stage-screen .cta { font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 900; color: #fff; background: var(--cozy-cta-primary-hover); border: none; border-radius: 9px; padding: 10px 0; width: 100%; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px var(--accent-primary-a30); flex: none; } #stage-screen .cta:hover:not(:disabled):not(.off) { background: var(--cozy-cta-primary-shadow); transform: translateY(-1px); box-shadow: 0 6px 16px var(--accent-primary-a30); } #stage-screen .cta:disabled, #stage-screen .cta.off { background: var(--card-sunk); color: var(--ink-faint); border: 1px solid var(--rule); box-shadow: none; cursor: not-allowed; transform: none; } /* 2026-09-04 사용자 보고: 카운트다운 숫자만 Share Tech Mono라 버튼 나머지 글자(Nunito)와 폰트가 안 맞았다 — 2026-09-03에 같은 이유로 스테이지 탭 클리어 날짜 스탬프를 Nunito로 통일한 것과 같은 결정. font-family를 지워 버튼 기본 폰트를 그대로 물려받게 한다. margin-left도 지운다 — 문구가 "완료 ({0})"처럼 괄호로 숫자를 감싸는 형태인데, 이 여백이 여는 괄호와 숫자 사이에만 들어가 앞은 벌어지고 뒤(숫자~닫는 괄호)는 붙어 보였다. 여백 없이 괄호가 숫자를 양쪽에서 붙어 감싸는 게 맞다. */ #stage-screen .cta.off .cd { font-style: normal; color: var(--text-dim); } #stage-screen .cta-pair { display: grid; grid-template-columns: 1fr 2fr; gap: 9px; width: 100%; flex: none; } #stage-screen .cta.ghost { background: var(--surface-white-018); color: var(--text-dim); border: 1px solid var(--rule); box-shadow: none; } #stage-screen .cta.ghost:hover { background: var(--accent-wash); color: var(--text-primary); } #stage-screen .cta.ghost.danger { color: var(--state-danger); border-color: rgba(184, 70, 60, 0.3); } #stage-screen .cta.ghost.danger:hover { background: rgba(184, 70, 60, 0.1); border-color: var(--state-danger); } /* Ranked 3-Tabs (RANK / STATS / REVIEW) */ #stage-screen .rk-tabs { display: flex; gap: 4px; } #stage-screen .rk-tab { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; line-height: 1.4; padding: 3px 9px; border-radius: 999px; background: var(--border-soft); color: var(--text-dim); cursor: pointer; transition: all 0.15s ease; user-select: none; } #stage-screen .rk-tab:hover:not(.on) { background: var(--surface-white-018); color: var(--text-primary); } #stage-screen .rk-tab.on { background: var(--accent-primary); color: #fff; } #stage-screen .rk-tab.dim { opacity: 0.42; cursor: not-allowed; } /* Ranked Note / Banner */ #stage-screen .rk-note { flex: none; background: var(--surface-white-018); border: 1px solid var(--border-soft); border-radius: 9px; padding: 6px 10px; font-size: 11px; line-height: 1.45; color: var(--text-dim); } #stage-screen .rk-note b { color: var(--text-primary); font-weight: 700; } /* Ranked Locked Gate (2-lines compact) */ #stage-screen .rk-gate { flex: none; background: var(--surface-white-018); border: 1px solid var(--border-soft); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; } #stage-screen .gate-top { display: flex; gap: 8px; align-items: flex-start; } #stage-screen .gate-lock { font-size: 16px; line-height: 1.15; flex: none; color: var(--warn-shade); } #stage-screen .gate-top b { display: block; font-size: 12px; font-weight: 900; color: var(--text-primary); margin-bottom: 2px; } #stage-screen .gate-top span { font-size: 11px; color: var(--text-dim); line-height: 1.4; } #stage-screen .gate-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-dim); margin-top: 2px; } #stage-screen .gate-count { font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; } /* Ranker(Top5 정산) 배지·배너 (2026-09-04 재도입). 원래 있던 기능인데 그리던 대상(#rank-decks-grid)이 로비 개편으로 없어지며 화면에 보여줄 곳이 사라졌었다(BUG-09로 죽은 렌더 함수만 제거, 데이터·공유 모달은 살아있었음). 지금 로비(덱 캐러셀 + Ranked 패널) 구조에 맞춰 두 자리에 다시 붙인다: 헤더의 작은 트로피 배지(상시, 확인 여부 무관) + 미확인일 때만 뜨는 본문 배너. */ #stage-screen .mode-head .ttl { display: flex; align-items: center; gap: 8px; } #stage-screen .ranker-badge-btn { flex: none; border: none; background: none; padding: 0; font-size: 15px; line-height: 1; cursor: pointer; position: relative; filter: grayscale(1) opacity(0.55); transition: filter 0.15s ease, transform 0.15s ease; } #stage-screen .ranker-badge-btn:hover { transform: scale(1.1); } #stage-screen .ranker-badge-btn.new { filter: none; } #stage-screen .ranker-badge-btn .dot { position: absolute; top: -2px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--state-danger); border: 1.5px solid var(--cozy-card-bg); } #stage-screen .rk-ranker-banner { flex: none; display: flex; align-items: center; gap: 9px; background: linear-gradient(135deg, var(--accent-warn-a20, rgba(232, 165, 60, 0.16)), var(--surface-white-018)); border: 1px solid var(--accent-warn); border-radius: 10px; padding: 8px 10px; cursor: pointer; transition: transform 0.15s ease; } #stage-screen .rk-ranker-banner:hover { transform: translateY(-1px); } #stage-screen .rrb-trophy { flex: none; font-size: 20px; line-height: 1; } #stage-screen .rrb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } #stage-screen .rrb-text b { font-size: 12px; font-weight: 900; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #stage-screen .rrb-text span { font-size: 11px; color: var(--text-dim); } #stage-screen .rrb-cta { flex: none; font-size: 11px; font-weight: 800; color: #4a3410; background: var(--accent-warn); border-radius: 999px; padding: 4px 10px; } #stage-screen .gate-count b { font-size: 13px; font-weight: 900; color: var(--warn-shade); } /* Leaderboard (A2 - score bar + tie-only duration) */ #stage-screen .board { flex: 1; min-height: 0; background: var(--surface-white-018); border: 1px solid var(--border-soft); border-radius: 10px; padding: 7px 10px; display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; } #stage-screen .board-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 4px; margin-bottom: 2px; border-bottom: 1px solid var(--border-soft); flex: none; } #stage-screen .board-head .h { font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--accent-shade); } #stage-screen .board-head .r { font-size: 9px; font-weight: 700; letter-spacing: 0.4px; color: var(--ink-faint); } /* 2026-09-04 사용자 보고: 각 행이 flex:1이라 판이 5줄 미만이면 남는 세로 공간을 적은 행 수만큼 나눠 갖고 늘어나, 순위 1~2개뿐일 때 내용이 박스 한가운데 붕 떠 보였다. flex: 0 0 auto로 자기 내용 높이만 차지하게 해 항상 위에서부터 쌓이고, 남는 공간은 박스 아래쪽에 빈 채로 남긴다(5줄이 꽉 찼을 때는 기존과 동일하게 보임). */ #stage-screen .row.lbar { position: relative; padding: 3px 8px; border-radius: 7px; overflow: hidden; background: var(--card-sunk); min-height: 0; flex: 0 0 auto; display: flex; align-items: center; } #stage-screen .row.lbar .lbtrack { position: absolute; inset: 0; width: var(--w, 0%); background: linear-gradient(90deg, #d3ecf5 0%, #bfe2f0 100%); border-right: 2px solid var(--accent-primary); border-radius: 7px 0 0 7px; } #stage-screen .row.lbar.me { background: #f3e9d6; } #stage-screen .row.lbar.me .lbtrack { background: linear-gradient(90deg, #fbe6c0 0%, #f7d9a4 100%); border-right-color: var(--accent-warn); } #stage-screen .row.lbar.neg .sc { color: var(--state-danger); } #stage-screen .row.lbar .lbfg { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) 28px auto; align-items: center; column-gap: 8px; width: 100%; } #stage-screen .row.lbar .lbfg .side { display: flex; align-items: center; gap: 5px; } #stage-screen .row.lbar .lbfg .side.end { justify-content: flex-end; } #stage-screen .row.lbar .lbfg .mid { display: flex; justify-content: center; min-width: 0; } #stage-screen .row.lbar .lbfg .tslot { display: flex; justify-content: flex-end; min-width: 0; overflow: hidden; } #stage-screen .row.lbar .nm { font-size: 12px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #stage-screen .row.lbar .dur, #stage-screen .row.lbar .lbdur { font-family: 'Share Tech Mono', monospace; font-size: 9.5px; color: var(--ink-faint); margin: 0; white-space: nowrap; } #stage-screen .row.lbar .sc { font-size: 11.5px; font-weight: 900; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; } #stage-screen .medal { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: 9.5px; font-weight: 900; color: #fff; flex: none; } #stage-screen .medal.g1 { background: #e0aa3e; } #stage-screen .medal.g2 { background: #b8b8b8; } #stage-screen .medal.g3 { background: #b08050; } #stage-screen .row.lbar .i { font-size: 10.5px; font-weight: 900; color: var(--text-dim); width: 16px; text-align: center; flex: none; } #stage-screen .row.lbar .flag { display: inline-flex; align-items: center; flex: none; line-height: 1; } #stage-screen .row.lbar .flag svg { width: 16px; height: 11px; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } /* Empty Board State */ #stage-screen .lb-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 8px 6px; } #stage-screen .lb-empty .glyph { font-size: 28px; line-height: 1; opacity: 0.5; margin-bottom: 2px; } #stage-screen .lb-empty .ttl2 { font-size: 13px; font-weight: 900; color: var(--text-primary); margin: 0; } #stage-screen .lb-empty .sub { font-size: 11px; color: var(--text-dim); line-height: 1.45; max-width: 320px; margin: 0; } /* Lower 2 Stat Boxes (Personal best / Last match) */ #stage-screen .stats2 { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #stage-screen .stat { background: var(--surface-white-018); border: 1px solid var(--border-soft); border-radius: 9px; padding: 6px 9px; } #stage-screen .stat h4 { font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent-shade); margin: 0 0 3px 0; } #stage-screen .stat-row { display: flex; justify-content: space-between; } #stage-screen .stat-row div span { display: block; font-size: 9px; color: var(--ink-faint); } #stage-screen .stat-row div b { font-size: 13px; font-weight: 900; color: var(--text-primary); font-variant-numeric: tabular-nums; } #stage-screen .stat-row div b.sc { color: var(--warn-shade); } #stage-screen .stat-date { font-size: 9px; color: var(--ink-faint); margin-top: 2px; } /* Active In-Progress Run (.rk-run) */ #stage-screen .rk-run { flex: 1; display: flex; flex-direction: column; gap: 9px; min-height: 0; background: var(--surface-white-018); border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; } #stage-screen .run-head .run-kicker { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--accent-shade); margin-bottom: 2px; } #stage-screen .run-head h3 { font-size: 18px; font-weight: 900; color: var(--text-primary); margin: 0; } #stage-screen .run-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } #stage-screen .run-figs .fig { background: var(--cozy-card-bg); border: 1px solid var(--border-soft); border-radius: 8px; padding: 7px 8px; text-align: center; } #stage-screen .run-figs .fig span { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; } #stage-screen .run-figs .fig b { font-size: 18px; font-weight: 900; color: var(--text-primary); font-variant-numeric: tabular-nums; } #stage-screen .run-figs .fig b em { font-style: normal; font-size: 12px; color: var(--ink-faint); } #stage-screen .run-figs .fig b.sc { color: var(--warn-shade); } #stage-screen .run-bar { display: flex; align-items: center; gap: 8px; } #stage-screen .run-bar .s-track { flex: 1; height: 5px; border-radius: 999px; background: var(--border-soft); overflow: hidden; } #stage-screen .run-bar .s-fill { height: 100%; background: var(--accent-primary); } #stage-screen .run-log { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; } #stage-screen .run-log .rl { background: var(--cozy-card-bg); border: 1px solid var(--border-soft); border-radius: 7px; padding: 5px 3px; text-align: center; } #stage-screen .run-log .rl .r { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: 0.4px; color: var(--ink-faint); margin-bottom: 2px; } #stage-screen .run-log .rl b { font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; } #stage-screen .run-log .rl.ok b { color: var(--accent-ok); } #stage-screen .run-log .rl.no { background: #f7ece9; border-color: #e4c3bd; } #stage-screen .run-log .rl.no b { color: var(--state-danger); } #stage-screen .run-log .rl.now { border-color: var(--accent-primary); background: var(--accent-wash); } #stage-screen .run-log .rl.now b { color: var(--accent-shade); } #stage-screen .run-note { font-size: 10px; color: var(--text-dim); line-height: 1.4; margin-top: auto; padding-top: 7px; border-top: 1px dashed var(--border-soft); margin-bottom: 0; } /* STATS Tab */ #stage-screen .st-sec { display: flex; flex-direction: column; gap: 6px; min-height: 0; } #stage-screen .st-sec.grow { flex: 1; } #stage-screen .st-sec h4 { font-size: 10px; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; color: var(--accent-shade); margin: 0; } #stage-screen .st-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } #stage-screen .st-tile { background: var(--surface-white-018); border: 1px solid var(--border-soft); border-radius: 8px; padding: 6px 8px; } #stage-screen .st-tile span { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; } #stage-screen .st-tile b { font-size: 16px; font-weight: 900; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.1; } #stage-screen .st-tile em { display: block; font-style: normal; font-size: 8.5px; color: var(--ink-faint); margin-top: 1px; } #stage-screen .rr-list { flex: 1; display: flex; flex-direction: column; gap: 2px; min-height: 0; background: var(--surface-white-018); border: 1px solid var(--border-soft); border-radius: 9px; padding: 6px 8px; } #stage-screen .rr, #stage-screen .rr-head { display: grid; grid-template-columns: 24px minmax(0, 1fr) 32px 28px 32px; align-items: center; gap: 6px; } #stage-screen .rr-head { font-size: 8.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink-faint); padding-bottom: 2px; border-bottom: 1px solid var(--border-soft); margin-bottom: 1px; } #stage-screen .rr { flex: 1; min-height: 0; font-size: 10.5px; } #stage-screen .rr-n { font-size: 9.5px; font-weight: 900; color: var(--text-dim); } #stage-screen .rr-bar { height: 6px; border-radius: 3px; background: var(--card-sunk); overflow: hidden; } #stage-screen .rr-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #d3ecf5 0%, #8fd0e6 100%); } #stage-screen .rr-rate, #stage-screen .rr-att, #stage-screen .rr-avg { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; } #stage-screen .rr-rate { color: var(--text-primary); } #stage-screen .rr-att { color: var(--ink-faint); font-weight: 400; } #stage-screen .rr-avg { color: var(--accent-ok); } #stage-screen .rr-avg.neg { color: var(--state-danger); } /* REVIEW Tab */ #stage-screen .rv-head { flex: none; display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); } #stage-screen .rv-head b { font-size: 11px; font-weight: 900; letter-spacing: 0.6px; text-transform: uppercase; color: var(--accent-shade); } #stage-screen .rv-head span { display: block; font-size: 9.5px; color: var(--ink-faint); margin-top: 1px; } #stage-screen .rv-final { font-size: 10.5px; color: var(--text-dim); } #stage-screen .rv-final b { font-size: 14px; font-weight: 900; color: var(--warn-shade); letter-spacing: 0; text-transform: none; } #stage-screen .rv-list { flex: 1; display: flex; flex-direction: column; gap: 3px; min-height: 0; margin-top: 5px; } #stage-screen .rv-row { flex: 1; min-height: 0; display: grid; grid-template-columns: 50px 48px minmax(0, 1fr) 72px; align-items: center; gap: 7px; background: var(--surface-white-018); border: 1px solid var(--border-soft); border-radius: 7px; padding: 0 8px; font-size: 10.5px; } #stage-screen .rv-n { font-size: 9.5px; font-weight: 900; color: var(--text-dim); } #stage-screen .rv-b { font-size: 8px; font-weight: 900; letter-spacing: 0.3px; text-transform: uppercase; text-align: center; border-radius: 4px; padding: 2px 0; } #stage-screen .rv-b.ok { color: var(--accent-ok); background: rgba(111, 168, 143, 0.14); } #stage-screen .rv-b.no { color: var(--state-danger); background: rgba(184, 70, 60, 0.12); } #stage-screen .rv-d { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #stage-screen .rv-s { text-align: right; font-weight: 900; color: var(--accent-ok); font-variant-numeric: tabular-nums; } #stage-screen .rv-s.neg { color: var(--state-danger); } #stage-screen .rv-s em { font-style: normal; font-weight: 400; font-size: 9px; color: var(--ink-faint); } #stage-screen .rv-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 8px; } #stage-screen .rv-empty .glyph { font-size: 26px; line-height: 1; opacity: 0.45; margin-bottom: 2px; } #stage-screen .rv-empty .ttl2 { font-size: 12px; font-weight: 900; color: var(--text-primary); max-width: 300px; margin: 0; } #stage-screen .rv-empty .sub { font-size: 10.5px; color: var(--text-dim); line-height: 1.4; max-width: 310px; margin: 0; } /* Stages Panel Components */ #stage-screen .stage-strip { flex: none; display: flex; align-items: stretch; gap: 6px; } #stage-screen .s-arrow { flex: none; width: 22px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--ink-faint); background: transparent; border: none; cursor: pointer; transition: color 0.15s ease; } #stage-screen .s-arrow:hover { color: var(--text-primary); } #stage-screen .s-tab { flex: 1; background: var(--cozy-card-bg); border: 2px solid var(--rule); border-radius: 9px; padding: 7px 2px; text-align: center; cursor: pointer; transition: all 0.2s ease; user-select: none; } #stage-screen .s-tab:hover:not(.off) { border-color: var(--accent-primary); background: var(--accent-wash); } #stage-screen .s-tab.on { border-color: var(--accent-primary); background: var(--accent-wash); } #stage-screen .s-tab.off { background: var(--card-sunk); cursor: not-allowed; } #stage-screen .s-tab .n { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 18px; font-weight: 900; line-height: 1.15; color: var(--text-primary); } #stage-screen .s-tab.on .n { color: var(--accent-shade); } #stage-screen .s-tab.off .n { color: var(--ink-faint); } #stage-screen .s-tab .n .ck { font-size: 12px; color: var(--accent-ok); } #stage-screen .s-tab .n .lk { font-size: 12px; color: var(--warn-shade); } #stage-screen .s-tab .t { font-size: 9px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-dim); margin-top: 3px; } #stage-screen .s-tab.off .t { color: var(--ink-faint); } #stage-screen .s-tab .t.stamp { letter-spacing: 0; text-transform: none; font-size: 9.5px; color: var(--ink-faint); } /* Stage Focus Detail Card */ #stage-screen .s-detail { flex: 1; min-height: 0; background: var(--surface-white-018); border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; box-sizing: border-box; } #stage-screen .s-detail .mission-art { flex: none; } #stage-screen .s-detail .mission-art svg { display: block; } #stage-screen .s-detail h3 { font-size: 13px; font-weight: 900; letter-spacing: -0.2px; color: var(--text-primary); margin: 0; } #stage-screen .s-detail p { font-size: 12px; line-height: 1.5; color: var(--text-dim); max-width: 44ch; margin: 0; } #stage-screen .s-detail .unlocks { font-size: 11px; font-weight: 700; color: var(--ink-faint); letter-spacing: 0.3px; border-top: 1px solid var(--border-soft); padding-top: 8px; width: 100%; } #stage-screen .s-bar { flex: none; display: flex; align-items: center; gap: 9px; } #stage-screen .s-bar .s-track { flex: 1; height: 5px; border-radius: 999px; background: var(--border-soft); overflow: hidden; } #stage-screen .s-bar .s-fill { height: 100%; background: var(--accent-primary); border-radius: 999px; } #stage-screen .s-bar .s-count { font-size: 11px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; } /* 10. 인게임 화면 및 HUD */ #in-game-screen { justify-content: flex-start; padding: 10px; } /* 상단 HUD는 높이를 고정한다. 미션에 따라 담기는 정보량이 크게 다르다 — 레벨 1 마지막 스테이지는 목표 카드가 7장이고, 번역 언어에 따라 목표 문구와 버튼 라벨이 훨씬 길어진다(스페인어 "Renunciar al juego" 등). 그대로 두면 버튼과 문구가 줄바꿈되면서 HUD 키가 57 → 72px로 들쭉날쭉해지고 테이블이 밀린다. 그래서 키를 고정하고, 한 줄에 안 들어가면 Game.fitIngameHud()가 zoom으로 통째로 줄인다. (아래 nowrap 규칙들과 한 세트다 — 하나만 빼면 다시 줄바꿈으로 키가 커진다.) */ .ingame-hud { --ingame-hud-height: 66px; width: 100%; max-width: 1100px; height: var(--ingame-hud-height); box-sizing: border-box; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; background: var(--glass-bg); border: 1px solid var(--rule); border-radius: 12px; padding: 8px 20px; margin-bottom: 12px; overflow: hidden; } /* 줄바꿈으로 키가 커지는 것을 막는다. 폭이 모자라면 fitIngameHud()가 줄여서 맞춘다. */ .ingame-hud .goal-label, .ingame-hud .goal-text, .ingame-hud .goal-progress, .ingame-hud .level-badge, .ingame-hud .stage-badge, .ingame-hud .hud-tutorial-badge, .ingame-hud .btn { white-space: nowrap; } /* 라이프·레벨 배지와 버튼은 잘리면 안 되므로 고정. 줄일 여지는 가운데 목표 영역에만 준다. fitIngameHud()의 축소 하한(0.6)으로도 모자라는 극단적인 경우, 오른쪽 버튼이 잘려 나가는 대신 목표 문구가 말줄임으로 접히게 하려는 것이다(min-width: 0이 있어야 ellipsis가 걸린다). */ .ingame-hud .hud-left, .ingame-hud .hud-right { flex: 0 0 auto; } .ingame-hud .hud-center, .ingame-hud .hud-goal-box { flex: 0 1 auto; min-width: 0; } .ingame-hud .goal-text { overflow: hidden; text-overflow: ellipsis; } /* 목표 카드는 문구가 접히더라도 온전히 보여야 한다 — 미션 정보 그 자체다. */ .ingame-hud .hud-target-cards { flex: 0 0 auto; } .lives-indicator.mini { padding: 3px 10px; } .lives-indicator.mini .heart-icon { font-size: 0.95rem; } .lives-indicator.mini .lives-num { font-size: 1.05rem; } .hud-left { display: flex; align-items: center; gap: 12px; } .stage-badge { background: var(--state-badge); color: var(--text-primary); padding: 2px 8px; border-radius: 6px; font-weight: 700; font-size: 0.92rem; box-shadow: var(--shadow-dark-03); } .level-badge { background: var(--accent-info-a15); border: 1px solid var(--accent-info-a50); color: var(--accent-info); padding: 2px 8px; border-radius: 6px; font-weight: 700; font-size: 0.92rem; box-shadow: none; } .hud-center { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 15px; } .hud-goal-box { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; row-gap: 2px; column-gap: 8px; } #hud-goal-suffix { flex-basis: 100%; text-align: center; } .goal-label { color: var(--accent-warn); font-weight: 700; font-size: 1.16rem; } .goal-text { font-size: 1.2rem; font-weight: 700; text-shadow: none; } .goal-progress { color: var(--accent-info); font-size: 1.08rem; font-weight: 800; } /* 정확히 맞춰야 하는 미션(tricks·bid_only·bid_and_npc_fail)에서 목표를 넘긴 상태. 좌석 점 인디케이터의 .pips .over-bid와 같은 신호다. 면이 아니라 글자라서 --state-danger(#b8463c)가 아니라 크림 대비 6.27:1인 --text-danger를 쓴다(BUG-75). */ .goal-progress.over { color: var(--text-danger); } /* 11. 게임 테이블 (펠트 레이아웃) */ .game-table-container { flex: 1; width: 100%; max-width: 1100px; position: relative; margin-bottom: 15px; } .game-table { width: 100%; height: 100%; position: relative; } .table-felt { position: absolute; top: calc(50% + 75px); /* 테이블 3번째 보조선 정렬 */ left: 50%; width: 480px; height: 280px; transform: translate(-50%, -50%); background: var(--bg-felt); border: 6px solid #14281f; outline: 2px solid var(--accent-ok); border-radius: 140px; overflow: hidden; /* 타원 바깥 넘침 잘라내기 */ box-shadow: inset 0 10px 60px var(--shadow-dark-08), 0 15px 30px var(--shadow-dark-05); display: flex; justify-content: center; align-items: center; /* 자식 .table-bidding-panel의 position:absolute 기준점 */ overflow: visible; } /* 중앙에 모이는 플레이된 카드들 */ .played-cards { position: relative; width: 250px; height: 250px; display: flex; justify-content: center; align-items: center; z-index: 10; } .table-message { position: absolute; bottom: 25px; background: var(--scrim-085); border: 1px solid var(--accent-info); border-radius: 15px; padding: 6px 20px; font-size: 1.05rem; color: var(--accent-info); font-weight: 700; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; z-index: 15; pointer-events: none; box-shadow: var(--shadow-dark-03); } .table-message.visible { opacity: 1; transform: translateY(0); } /* 1-1 튜토리얼 진행 중: 튜토리얼 패널 본문과 겹치지 않도록 제목 바로 아래에 표시. .table-felt와 .table-tutorial-panel은 game-table 기준 동일한 top(calc(50% + 75px))/높이(280px)를 공유하므로, .table-felt 기준 절대좌표(순수 CSS, 스케일 변환에 영향받지 않음)로 튜토리얼 제목 바로 아래 위치를 고정 지정 */ .table-message.tutorial-repositioned { top: 52px; bottom: auto; left: 50%; z-index: 10001; white-space: nowrap; transition: opacity 0.3s ease; transform: translateX(-50%) !important; } .table-message.tutorial-repositioned.visible { transform: translateX(-50%) !important; } /* 12. 플레이어 레이아웃 */ .player-area { position: absolute; width: 180px; height: 80px; background: var(--glass-bg); border: 1px solid var(--rule); border-radius: 10px; padding: 8px; display: flex; align-items: center; gap: 8px; z-index: 20; transition: all 0.3s ease; } .player-area.active { border-color: var(--accent-info); box-shadow: 0 0 15px var(--accent-info); background: var(--accent-info-a8); } .hidden, .player-area.hidden { display: none !important; } .player-avatar { font-size: 1.6rem; background: #928366; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; overflow: hidden; } #profile-avatar-preview { background: #928366 !important; } .player-info { display: flex; flex-direction: column; flex: 1; /* flex 항목의 기본값 min-width:auto는 "내용보다 좁아지지 않는다"는 뜻이다. 이름에 white-space:nowrap이 걸려 있어 최소 폭이 곧 이름 전체 폭이 되고, 그래서 긴 이름이 폭 180px로 고정된 플레이어 칸을 밀고 나갔다. 아래 .player-name의 말줄임도 그동안 한 번도 발동하지 않았다 — 칸이 늘 내용만큼 넓었기 때문이다. */ min-width: 0; } .player-name { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player-tricks, .player-bid, .player-score { font-size: 0.75rem; color: var(--text-dim); font-family: 'Share Tech Mono', monospace; } .player-tricks { color: var(--accent-warn); } .player-bid { color: var(--accent-info); } .player-score { color: var(--accent-ok); } /* NPC 성향 배지 스타일 */ .npc-badge { display: inline-block; font-size: 0.65rem; font-weight: 700; padding: 1px 4px; border-radius: 4px; margin-left: 4px; vertical-align: middle; text-shadow: none; } .npc-badge.style-good { background: var(--accent-ok-a15); border: 1px solid var(--accent-ok-a40); color: var(--accent-ok); } .npc-badge.style-mid { background: var(--accent-info-a15); border: 1px solid var(--accent-info-a40); color: var(--accent-info); } .npc-badge.style-bad { background: var(--state-danger-glow-a15); border: 1px solid var(--state-danger-glow-a40); color: var(--color-fail-red); } /* NPC 핸드 오픈 패 렌더링 구역 */ .npc-hand-preview { position: absolute; display: flex; gap: -18px; /* -15px에서 약 20% 커진 카드에 맞춰 겹침 조절 (-18px) */ z-index: 5; pointer-events: none; } /* 플레이어 인원 배치 고정 - 테이블 밖 외곽 배치 및 절대 좌표 겹침 방지 */ /* 4인 기준 좌표 */ #player-pos-bottom { position: relative; width: 180px; height: 95px; background: var(--glass-bg); border: 2px solid var(--accent-info); box-shadow: var(--shadow-dark-03); border-radius: 12px; padding: 10px; display: flex; align-items: center; gap: 10px; z-index: 20; transition: all 0.3s ease; transform: none; bottom: auto; left: auto; } #player-pos-bottom.active { border-color: var(--accent-info); box-shadow: 0 0 20px var(--accent-info); background: var(--accent-info-a10); } #player-pos-bottom .player-avatar { font-size: 1.8rem; background: #928366; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } #player-pos-bottom .player-info { display: flex; flex-direction: column; } #player-pos-bottom .player-name { font-size: 0.95rem; font-weight: 900; color: var(--text-primary); } #player-pos-bottom .player-tricks { font-size: 1.15rem; font-weight: 900; color: var(--accent-warn); text-shadow: none; font-family: 'Share Tech Mono', monospace; margin-top: 2px; white-space: nowrap; } #player-pos-bottom .player-bid, #player-pos-bottom .player-score { font-size: 0.8rem; color: var(--text-dim); } /* NPC들의 카드 패 영역과 프로필 겹침을 방지하기 위한 절대좌표 배치 */ #player-pos-left { left: 20px; top: 115px; transform: none; } #npc-hand-left { left: 20px; top: 210px; /* 프로필 박스(높이 80px) 아래 15px 유격 */ transform: none; width: 220px; /* 가로폭 제한으로 2줄 배치 */ flex-wrap: wrap; flex-direction: row; gap: 4px 0; } #npc-hand-left .card-unit { margin-right: -10px; /* -8px에서 오버랩 조절 */ } #player-pos-top { top: 15px; left: calc(50% - 205px); transform: none; } #npc-hand-top { left: calc(50% - 10px); top: 15px; transform: none; width: 220px; /* 가로폭 제한으로 2줄 배치 */ flex-wrap: wrap; flex-direction: row; gap: 4px 0; } #npc-hand-top .card-unit { margin-right: -10px; } #player-pos-right { right: 20px; top: 115px; transform: none; flex-direction: row-reverse; } #player-pos-right .player-info { text-align: right; } #npc-hand-right { right: 20px; top: 210px; /* 프로필 박스 아래 15px 유격 */ transform: none; width: 220px; /* 가로폭 제한으로 2줄 배치 */ flex-wrap: wrap; flex-direction: row; justify-content: flex-end; gap: 4px 0; } #npc-hand-right .card-unit { /* 우측 정렬(flex-end) 핸드는 margin-right 음수를 쓰면 마지막 카드가 컨테이너 오른쪽 경계를 10px 삐져나가 정보창 우측 선과 어긋난다. margin-left로 겹침을 걸어 카드 우측 선을 경계에 정확히 붙임. */ margin-left: -10px; } /* 3인 기준 top-left / top-right 등 추가 NPC 포지션 */ #player-pos-top-left { top: 15px; left: 20%; } #npc-hand-top-left { left: 33%; top: 15px; width: 220px; /* 가로폭 제한으로 2줄 배치 */ flex-wrap: wrap; flex-direction: row; gap: 4px 0; } #npc-hand-top-left .card-unit { margin-right: -10px; } #player-pos-top-right { top: 15px; right: 20%; flex-direction: row-reverse; } #player-pos-top-right .player-info { text-align: right; } #npc-hand-top-right { right: 33%; top: 15px; width: 220px; /* 가로폭 제한으로 2줄 배치 */ flex-wrap: wrap; flex-direction: row; justify-content: flex-end; gap: 4px 0; } #npc-hand-top-right .card-unit { /* #npc-hand-right와 동일: 우측 정렬 핸드는 margin-left로 겹침 처리 */ margin-left: -10px; } /* 5인 플레이어일 때 NPC 패를 5장/5장 정렬하도록 너비 조정 및 정보 창 위치 조정 */ .game-table.players-5 #npc-hand-left, .game-table.players-5 #npc-hand-right, .game-table.players-5 #npc-hand-top-left, .game-table.players-5 #npc-hand-top-right { width: 150px !important; } .game-table.players-5 #player-pos-top-left { left: 14% !important; } .game-table.players-5 #player-pos-top-right { right: 14% !important; } /* Harry/Henry(측면 NPC)의 정보 창-카드 간격(15px)과 동일하게, 실측 기반으로 보정 */ .game-table.players-5 #npc-hand-top-left { left: 32% !important; } .game-table.players-5 #npc-hand-top-right { /* top-left(left:32%)와 대칭. 과거에는 카드가 컨테이너를 10px 삐져나가 실제로는 10px 비대칭이었으나, margin-left 겹침 방식으로 바뀌며 32% 그대로 좌우 간격이 정확히 일치한다. */ right: 32% !important; } /* 6인 플레이어일 때 아치형(Arch) NPC 배치 조정 */ .game-table.players-6 .npc-hand-preview { width: 125px !important; } .game-table.players-6 #player-pos-top-left { top: 15px !important; left: 20px !important; } .game-table.players-6 #npc-hand-top-left { top: 15px !important; left: 215px !important; } .game-table.players-6 #player-pos-top-right { top: 15px !important; right: 20px !important; } .game-table.players-6 #npc-hand-top-right { top: 15px !important; right: 215px !important; } .game-table.players-6 #player-pos-left { top: 165px !important; } .game-table.players-6 #npc-hand-left { top: 260px !important; } /* 상단 중앙(top) 블록 중앙 정렬: 기본값(50% - 205px)은 4인 모드의 핸드 너비 220px (블록 폭 415px) 기준으로 중앙이 맞던 값이라, 핸드가 125px로 줄어드는 6인 모드에서는 블록(폭 320px)이 중앙에서 45px 왼쪽으로 치우쳐 top-left 카드와의 간격만 좁아진다. 정보창+카드 전체를 +45px 이동해 블록을 정중앙에 두면 좌우 간격이 항상 대칭. */ .game-table.players-6 #player-pos-top { left: calc(50% - 160px) !important; } .game-table.players-6 #npc-hand-top { left: calc(50% + 35px) !important; } .game-table.players-6 #player-pos-right { top: 165px !important; } .game-table.players-6 #npc-hand-right { top: 260px !important; } /* 13. 플레이어 손패 카드 컨테이너 */ .human-hand-container { position: relative; /* Added for absolute children positioning like result-actions-box */ width: 100%; max-width: 1100px; height: 160px; /* 오리지널 높이 복원 */ background: var(--glass-bg); border: 2px solid var(--glass-border); backdrop-filter: blur(15px); border-radius: 16px; padding: 12px 20px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; box-shadow: 0 10px 30px var(--shadow-dark-05); box-sizing: border-box; /* 높이 규격 일관성을 유지 */ } .hand-cards-wrapper { position: absolute; left: 285px; width: 656px; display: flex; flex-direction: column; align-items: center; } .hand-label { font-size: 0.8rem; letter-spacing: 2px; color: var(--text-accent); font-weight: 700; margin-bottom: 8px; } .cards-hand { display: flex; justify-content: center; align-items: center; gap: 0; /* 마진 오버랩 사용을 위해 gap 제거 */ min-height: 120px; /* 높이 축소 (기존 150px) */ width: 100%; perspective: 800px; } .cards-hand .card-unit { margin-right: -16px; /* 카드들을 가로로 겹쳐서 긴 손패도 잘림 없이 수용 (간격 확보를 위해 -19px -> -16px 조정) */ transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); } .cards-hand .card-unit:last-child { margin-right: 0; } /* 14. 프리미엄 카드 컴포넌트 */ .card-unit { position: relative; width: 65px; /* 내 카드 너비 5% 축소 (68px -> 65px) */ height: 93px; /* 내 카드 높이 5% 축소 (98px -> 93px) */ background: #fff; border-radius: 8px; color: #000; font-family: 'Share Tech Mono', monospace; font-weight: 700; box-shadow: 0 4px 10px var(--shadow-dark-03); cursor: pointer; transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); transform-origin: bottom center; } /* 덱 뒷면이 붙지 않은 경우의 폴백이다. 이 선택자는 특정도가 (0,2,0)이라 .deck-back-*(0,1,0)을 !important끼리도 이긴다 — 그래서 예전부터 덱 해금 알림과 폭탄 트릭의 뒤집힌 카드만 옛 붉은 뒷면으로 남아 있었다(측정으로 확인). :not()으로 덱 클래스가 있을 때는 비켜서게 한다. */ .card-unit.card-back:not([class*="deck-back-"]) { background: #551122 !important; background-image: repeating-linear-gradient(45deg, #7a1f2d, #7a1f2d 4px, #551122 4px, #551122 8px) !important; border: 1px solid var(--rule-white-03) !important; color: transparent !important; box-shadow: 0 4px 10px var(--shadow-dark-03) !important; } .card-unit.card-back * { display: none !important; } /* NPC 공개 카드는 크기 줄임 */ .npc-hand-preview .card-unit { width: 38px; height: 58px; font-size: 0.72rem; border-radius: 3px; box-shadow: 0 2px 5px var(--shadow-dark-04); cursor: default; border: 1px solid var(--rule-dark-015); } .card-unit.playable:hover { transform: translateY(-20px) scale(1.1); box-shadow: 0 10px 25px var(--accent-info-a40), 0 0 12px var(--accent-info); outline: 2px solid var(--accent-info); z-index: 100; } /* 낼 수 있는 카드는 포인터를 올리기 전에도 구분한다. 카드 바깥으로 번지지 않는 안쪽 링이라 부채꼴로 겹친 이웃 카드를 덮지 않는다. */ .cards-hand .card-unit.playable { box-shadow: inset 0 0 0 2px var(--accent-primary-cozy-a45); } .cards-hand .card-unit.special-card.playable, .cards-hand .card-unit.mono.playable { box-shadow: inset 0 0 0 2px var(--accent-primary-cozy-a45) !important; } /* 낼 수 없는 카드 감쇄 (BUG-62: 내 차례일 때 규칙상 못 내는 카드만 클릭 차단). 카드 면 감쇄는 UI-12 정산 블록 한 곳에서 통합 적용한다. */ .card-unit.unplayable { cursor: not-allowed; } .card-unit.unplayable.target-card, .card-unit.unplayable.target-card-acquire, .card-unit.unplayable.target-card-avoid { opacity: 0.95; } .card-unit.unplayable.target-card .card-corner, .card-unit.unplayable.target-card .card-suit-center, .card-unit.unplayable.target-card-acquire .card-corner, .card-unit.unplayable.target-card-acquire .card-suit-center, .card-unit.unplayable.target-card-avoid .card-corner, .card-unit.unplayable.target-card-avoid .card-suit-center { opacity: 0.35; filter: saturate(20%); } .card-unit.unplayable.target-card::after, .card-unit.unplayable.target-card-acquire::after, .card-unit.unplayable.target-card-avoid::after { opacity: 0.35; } /* 내 차례가 아닐 때 (BUG-62: 클릭만 비활성화하고 손패 감쇄는 걸지 않음) */ .card-unit.not-my-turn { cursor: default; pointer-events: none; } /* 카드 정보 내부 구성 */ .card-corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; padding: 4px; font-size: 1.18rem; /* 플레이어 카드 코너 크기 */ } .card-corner span:last-child { font-size: 0.95rem; } /* 다이아몬드를 제외한 코너 심볼 미세 조정 */ .card-unit:not(.diamond) .card-corner span:last-child { display: inline-block; transform: scaleX(0.85); } /* 특정 숫자(4) 시각적 크기 균형 보정 */ .card-unit[data-rank="4"] .card-corner span:first-child { font-size: 1.08em; } /* 10 이상의 숫자(double-digit) 자간 및 마진 미세 축소 */ .card-unit.dbl-digit .card-corner span:first-child { letter-spacing: -0.08em; margin-right: -0.06em; } .card-corner.top-left { top: 2px; left: 2px; } .card-corner.bottom-right { bottom: 2px; right: 2px; transform: rotate(180deg); transform-style: preserve-3d; } /* BUG-35: 중앙 큰 심볼 스펙 4절 (top 30%, left 35%, width 54%, height 54%) */ .card-suit-center { position: absolute; top: 30%; left: 35%; width: 54%; height: 54%; display: flex; align-items: center; justify-content: center; margin: 0; line-height: 1; transform: none !important; z-index: 1; font-size: 2.3rem; } /* NPC 미니카드 패딩 조절 및 가독성 개선 (글자 크기 키움) */ .npc-hand-preview .card-corner { padding: 1px; font-size: 0.85rem; } .npc-hand-preview .card-corner span:last-child { font-size: 0.68rem; /* NPC 핸드 미니카드 코너 심볼 크기도 비례 축소 */ } .npc-hand-preview .card-suit-center { font-size: 0.9rem; /* NPC 핸드 미니카드 중앙 심볼 크기도 비례 축소 */ } /* 슈트 색상 입히기 */ .card-unit.spade { color: var(--color-spade); } .card-unit.heart { color: var(--color-heart); } .card-unit.diamond { color: var(--color-diamond); } .card-unit.club { color: var(--color-club); } /* 특별 목표 카드 표시용 보더 이펙트 (BUG-44: 바깥 3px 링 + 보더 + 글로우) */ div.card-unit.target-card { outline: 3px solid var(--accent-warn) !important; outline-offset: 2px !important; border: 2px solid var(--accent-warn) !important; box-shadow: 0 0 16px rgba(232, 165, 60, 0.75), 0 2px 0 rgba(120, 90, 55, 0.16) !important; } /* 획득 목표 카드 (win_with_card): 초록 링 + 테두리 + 글로우 */ div.card-unit.target-card-acquire { outline: 3px solid var(--accent-ok) !important; outline-offset: 2px !important; border: 2px solid var(--accent-ok) !important; box-shadow: 0 0 16px rgba(111, 168, 143, 0.75), 0 2px 0 rgba(120, 90, 55, 0.16) !important; } /* 회피 목표 카드 (avoid_target_cards): 빨강 링 + 테두리 + 글로우 */ div.card-unit.target-card-avoid { outline: 3px solid var(--state-danger) !important; outline-offset: 2px !important; border: 2px solid var(--state-danger) !important; box-shadow: 0 0 16px rgba(184, 70, 60, 0.75), 0 2px 0 rgba(120, 90, 55, 0.16) !important; } /* ⚠️ 위 두 규칙의 box-shadow는 오랫동안 무효였다. 예전에는 `box-shadow: A !important, B !important` 처럼 !important를 값 목록 중간에 넣었는데, !important는 선언 맨 끝에만 올 수 있어서 선언 전체가 버려졌다. 그래서 초록·분홍 목표 카드는 테두리만 나오고 글로우가 전 덱에서 한 번도 표시된 적이 없다. 바로 위 노랑(target-card)은 그림자가 하나뿐이라 문법이 맞아 정상 동작했고, 그 차이가 오래 눈에 띄지 않은 이유다. 셋을 같은 방식으로 맞췄다. !important를 그대로 둔 이유 — `.card-unit.mono`와 `.card-unit.star`가 덱 고유 외형을 위해 border·box-shadow를 !important로 잡는다. 여기서 !important를 빼면 그 두 덱에서 강조가 통째로 눌린다(모노 덱 NPC 미니 카드에서 실제로 그 일이 있었다). pulse-acquire / pulse-avoid 애니메이션도 함께 걷어냈다. 키프레임 안의 !important는 규격상 무시되므로 애니메이션이 아무것도 바꾸지 못했고, 설령 유효했더라도 위 !important 선언에 밀린다. 노랑도 원래 애니메이션이 없으니 정지한 글로우로 셋이 일치한다. (NPC 미니 카드용 pulse-*-mini는 !important가 없어 정상 동작하므로 그대로 둔다.) */ /* NPC 미니카드용 축소형 하이라이트 효과 */ .npc-hand-preview .card-unit.mini-highlight.target-card { box-shadow: 0 0 8px var(--accent-warn); border: 1px solid var(--accent-warn); } .npc-hand-preview .card-unit.mini-highlight.target-card-acquire { box-shadow: 0 0 8px var(--accent-ok); border: 1px solid var(--accent-ok); animation: pulse-acquire-mini 1.4s ease-in-out infinite alternate; } .npc-hand-preview .card-unit.mini-highlight.target-card-avoid { box-shadow: 0 0 8px var(--state-danger-glow); border: 1px solid var(--state-danger); animation: pulse-avoid-mini 1.0s ease-in-out infinite alternate; } @keyframes pulse-acquire-mini { 0% { box-shadow: 0 0 4px var(--accent-ok); } 100% { box-shadow: 0 0 10px var(--accent-ok); } } @keyframes pulse-avoid-mini { 0% { box-shadow: 0 0 4px var(--state-danger-glow); } 100% { box-shadow: 0 0 10px var(--state-danger-glow); } } /* 테이블 위에 플레이된 카드의 위치 */ .played-card-slot { position: absolute; transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); z-index: 12; } /* 15. 모달 및 결과 오버레이 (글래스모피즘) */ /* 모달·토스트·치트 콘솔을 담는 레이어. #app-container와 같은 좌표계에 같은 크기(1920x1080)로 놓이고, Game.setupResize()가 갱신하는 --app-scale을 함께 써서 같은 비율로 줄인다. 이렇게 묶지 않으면 게임 화면만 창 크기에 맞춰 줄고 팝업은 원래 크기로 남는다. pointer-events: none은 필수다. 이 상자는 게임 화면 전체를 덮고 있어서 그냥 두면 모달이 전부 닫혀 있어도 클릭을 가로챈다. 실제로 열린 것만 .modal-overlay.active(및 치트 콘솔)에서 auto로 되살린다 - pointer-events는 자손이 auto로 다시 켤 수 있다. */ #overlay-layer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(var(--app-scale, 1)); transform-origin: center center; width: 1920px; height: 1080px; z-index: 500; pointer-events: none; transition: none; } .modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--scrim-07); /* backdrop-filter: blur(8px)를 걷어냈다(2026-09-02). 이 레이어는 --app-scale로 축소된 #overlay-layer 안에 있는데, 그 안에서 backdrop-filter를 걸면 흐려진 배경만 그려지고 이 요소의 --scrim-07 배경이 화면에 안 나왔다. 그래서 가리는 막 없이 카드 테이블만 뭉개진 채로 비쳐 "뒤에 잔상이 남는" 모양이 됐다. 블러를 빼면 스크림이 정상 동작한다(실측 확인). 유리 질감은 Cozy Day 개편에서 걷어낸 다크 테마 문법이기도 하다 — 되살리려면 스크림이 함께 그려지는지부터 렌더로 확인할 것. */ z-index: 500; justify-content: center; align-items: center; /* 여닫는 방식을 바꿨다(2026-09-02). 종전에는 이 전화면 요소의 opacity를 0에서 1로 트랜지션했는데, --app-scale로 축소된 #overlay-layer 안에서 그 레이어가 중간 프레임 상태로 굳어 스크림이 흐리게, 상자가 반투명하게 남았다. 강제 리페인트를 걸면 그때야 제대로 그려지는 것으로 원인을 확인했다. visibility와 transform으로도 해봤지만 같은 문제가 자리만 옮겼다 - 닫은 뒤에도 언어 버튼들이 로비 위에 남아 그려졌다. 이 레이어에서는 합성 레이어를 남기는 방식이 전부 위험하다고 보고, 열고 닫을 때 렌더 트리에서 아예 넣고 뺀다. 연출은 없다. 잔상 없이 확실히 그려지는 쪽을 택한다. */ display: none; pointer-events: none; } .modal-overlay.active { display: flex; pointer-events: auto; } /* 480px 은 1280x720 캔버스 시절 값이라 1920 에서 가로 25% 밖에 안 됐다(BUG-28 조사). 11종 모달 어디에도 넘침이 없어 키울 여지가 있었다. 세로는 그대로 두고 가로만 넓힌다 — 조사에서 「내용이 헐렁하다」가 아니라 「상자가 좁다」가 원인으로 나왔다. */ .modal-box { /* --glass-bg(알파 0.88)가 아니라 불투명 크림이다. 블러를 걷어내면서 상자 뒤가 또렷해져 로고·카드가 12%만큼 상자를 뚫고 비쳤다. HUD 패널은 펠트 위에서 비치는 게 맞으므로 --glass-bg는 그대로 두고 모달 상자만 막는다. */ background: var(--panel-solid); border: 2px solid var(--glass-border); border-radius: 16px; width: 90%; max-width: 620px; padding: 25px; box-shadow: 0 10px 30px var(--shadow-dark-05); display: flex; flex-direction: column; } .modal-box.large { max-width: 820px; } .modal-title { font-size: 1.8rem; font-weight: 900; color: var(--text-accent); text-shadow: none; margin-bottom: 20px; border-bottom: 1px solid var(--rule); padding-bottom: 10px; text-align: center; } #share-modal-intro { text-align: center; } .modal-body { flex: 1; margin-bottom: 20px; } .option-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); } .option-row:last-child { border-bottom: none; } .opt-label { font-weight: 700; color: var(--text-primary); } .modal-actions { display: flex; justify-content: center; } .modal-actions .btn { padding: 10px 40px; width: 100%; } /* --- 모달 11종 및 오버레이 Cozy Day 전용 스코프 스타일 (UI-17) --- */ /* 프로필 모달은 내용이 836px이라 720px 앱 안에서 아래 58px이 잘리는데 스크롤로 닿을 수가 없었다(UI-17 이전부터 있던 결함). 상자에 스크롤을 걸면 안 된다 — .modal-body가 overflow:hidden이라 거기에 159px이 숨어 있고, 상자만 잡으면 scrollHeight가 0으로 나와 "고쳐졌다"로 보인다(실제로 그렇게 보였다). 제목·액션은 고정하고 본문만 스크롤한다. */ #modal-profile .modal-box { max-height: 94%; } #modal-profile .modal-body { color: var(--text-primary) !important; overflow-y: auto !important; min-height: 0; } #modal-profile .modal-body > div { background: var(--surface-sunk) !important; border: 1px solid var(--rule) !important; border-radius: 8px; } #modal-profile h4 { color: var(--accent-primary) !important; border-bottom: 1px solid var(--rule) !important; } #modal-profile #profile-name-input { background: var(--cozy-card-bg) !important; border: 1px solid var(--rule) !important; color: var(--text-primary) !important; border-radius: 6px; } #modal-profile #profile-web-mode-current { color: var(--text-dim) !important; } #modal-character .char-label { color: var(--text-dim) !important; font-weight: 700; } #modal-character .char-swatch { border: 2px solid var(--rule); background: var(--surface-sunk); border-radius: 6px; transition: all 0.2s ease; } #modal-character .char-swatch:hover { border-color: var(--accent-primary); } #modal-character .char-swatch.selected { border-color: var(--accent-primary) !important; box-shadow: 0 0 0 2px var(--accent-primary-a30); } #modal-content-unlock .modal-title { color: var(--accent-warn) !important; text-shadow: none !important; } /* 토스트 알림 - 네이티브 alert() 대체. 배경을 가리지 않고(백드롭 없음) 다른 모달이 열려있어도 그 위에 살짝 얹히는 정도라 "팝업 위에 팝업" 느낌 없이 결과를 알려줄 수 있다. */ #toast-container { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .toast { background: var(--glass-bg); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 10px 20px; font-size: 0.85rem; font-weight: 700; color: var(--text-primary); box-shadow: 0 6px 20px var(--shadow-dark-04); max-width: 360px; text-align: center; opacity: 0; transform: translateY(-10px); transition: opacity 0.25s ease, transform 0.25s ease; } .toast.toast-show { opacity: 1; transform: translateY(0); } .toast.toast-success { border-color: var(--accent-ok); box-shadow: var(--shadow-dark-03); } .toast.toast-error { border-color: #ff4d4d; box-shadow: var(--shadow-dark-03); } /* Ranker(정산 Top5) 배지 - 큰 오버레이(미확인) + 작은 코너 배지(확인 후) */ .ranker-overlay { position: absolute; inset: 0; background: var(--glass-bg); border: 2px solid var(--accent-warn); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px; text-align: center; cursor: pointer; z-index: 5; box-shadow: var(--shadow-dark-03); } .ranker-overlay-trophy { font-size: 1.6rem; line-height: 1; } .ranker-overlay-title { font-size: 0.7rem; font-weight: 800; color: var(--accent-warn); line-height: 1.2; } .ranker-overlay-sub { font-size: 0.62rem; color: var(--text-primary); } .ranker-overlay-cta { margin-top: 3px; font-size: 0.6rem; color: #14061c; background: var(--accent-warn); font-weight: 800; padding: 2px 10px; border-radius: 10px; } .ranker-badge-corner { position: absolute; top: 4px; right: 4px; z-index: 5; font-size: 0.95rem; line-height: 1; cursor: pointer; filter: none; } /* 덱 도감 팝업 덱 리스트 */ .deck-grid { display: flex; flex-direction: column; gap: 12px; max-height: 250px; overflow-y: auto; padding: 10px; background: var(--surface-sunk); border-radius: 8px; } .deck-rules-section { width: 100%; margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--rule); } .deck-rules-heading { margin: 0 0 3px; font-size: 1rem; font-weight: 900; letter-spacing: 1.5px; color: var(--accent-warn); text-shadow: none; text-align: left; } .deck-rules-text { width: 100%; font-size: 0.85rem; line-height: 1.3; color: var(--text-primary); text-align: left; background: var(--surface-sunk); border: 1px solid var(--rule); border-radius: 6px; padding: 6px 10px; box-sizing: border-box; } .deck-suit-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-bottom: 1px solid var(--rule); } .deck-suit-row:last-child { border-bottom: none; } .deck-suit-icon { font-size: 1.5rem; width: 30px; } .deck-suit-cards { font-family: 'Share Tech Mono', monospace; font-size: 1.1rem; letter-spacing: 1.5px; color: var(--text-primary); display: flex; flex: 1; justify-content: space-between; align-items: center; white-space: nowrap; } /* 10 이상의 숫자(double-digit) 자간 및 표시 간격 축소 */ .deck-suit-cards .num-span.dbl-digit { letter-spacing: -0.5px; margin-left: -2px; margin-right: -2px; } /* 16. 유틸리티 애니메이션 (흔들림 등) */ .screen-shake { animation: shake-anim 0.35s ease; } @keyframes shake-anim { 0% { transform: translate(0, 0); } 15% { transform: translate(-10px, -5px) rotate(-1deg); } 30% { transform: translate(10px, 8px) rotate(1.5deg); } 45% { transform: translate(-8px, 4px) rotate(-0.5deg); } 60% { transform: translate(6px, -6px) rotate(1deg); } 75% { transform: translate(-4px, 2px) rotate(-0.5deg); } 90% { transform: translate(2px, -1px) rotate(0.1deg); } 100% { transform: translate(0, 0); } } .pulse-once { animation: pulse-once-anim 0.35s ease-out; } @keyframes pulse-once-anim { 0% { box-shadow: 0 0 10px var(--accent-info-a20); } 50% { box-shadow: 0 0 35px var(--accent-warn); border-color: var(--accent-warn); filter: brightness(1.4); } 100% { box-shadow: 0 0 10px var(--accent-info-a20); } } /* 18. 보완 기능 애니메이션 및 오버레이 */ .human-hand-container { position: relative; /* 자식 absolute 위치 고정을 위해 추가 */ } .mission-fail-overlay { position: absolute; inset: 0; width: auto; height: auto; background: var(--cozy-hud-bg); border-radius: 0; display: flex; align-items: center; justify-content: center; z-index: 150; border: 0; box-shadow: inset 0 3px 0 var(--state-danger-glow-a30); } .fail-overlay-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 960px; padding: 24px 32px; box-sizing: border-box; } .fail-overlay-title { display: inline-flex; align-items: center; gap: 8px; font-size: 1.25rem; font-weight: 900; color: var(--text-danger); text-shadow: none; letter-spacing: 0; line-height: 1.2; } .fail-overlay-title .ui-icon { width: 1.15em; height: 1.15em; color: var(--text-warn); } .fail-overlay-desc { font-size: 1.05rem; font-weight: 700; line-height: 1.4; color: var(--text-primary); margin: 0; text-align: center; } .fail-overlay-buttons { display: flex; gap: 12px; margin-top: 4px; width: 100%; justify-content: center; } .fail-overlay-buttons .btn { min-width: 200px; min-height: 52px; padding: 14px 24px !important; font-size: 1.08rem !important; border-radius: 8px !important; font-weight: 800 !important; letter-spacing: 0 !important; white-space: nowrap !important; } .fail-overlay-buttons .fail-lobby-button { color: var(--text-danger); border-color: var(--state-danger-glow-a40); background: var(--state-danger-glow-a10); } .fail-overlay-buttons .fail-lobby-button:hover { color: var(--text-danger); border-color: var(--state-danger); background: var(--state-danger-glow-a15); } /* 치트 콘솔 CSS가 있던 자리. 콘솔 자체를 2026-09-11에 제거해 규칙도 함께 걷었다 (game.js executeCheat · index.html #cheat-console-overlay와 한 세트). 되살리려면 `git show 9e32cdd -- style.css` 참고. */ .mission-success-box { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--accent-ok-a12); border: 2px dashed var(--accent-ok); border-radius: 12px; padding: 8px 12px; min-width: 140px; gap: 6px; animation: blink-green-border 1.5s infinite alternate; } .success-warning-text { font-size: 0.8rem; font-weight: 700; color: var(--accent-ok); text-shadow: none; letter-spacing: 0.5px; text-align: center; } .btn-large-clear { padding: 16px 40px !important; font-size: 1.25rem !important; font-weight: 700; min-width: 180px; border-radius: 8px !important; width: 100%; letter-spacing: 2px; box-shadow: var(--shadow-dark-03); } @keyframes blink-green-border { 0% { border-color: rgba(111, 168, 143, 0.3); box-shadow: 0 0 5px rgba(111, 168, 143, 0.1); } 100% { border-color: var(--accent-ok); box-shadow: 0 0 15px rgba(111, 168, 143, 0.4); } } .hud-target-cards { display: flex; gap: 6px; margin-left: 15px; align-items: center; } .target-mini-card { position: relative; width: 36px; height: 48px; background: #fff; border-radius: 4px; color: #000; font-weight: 900; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2px; box-shadow: 0 2px 5px var(--shadow-dark-03); box-sizing: border-box; } .target-mini-card.checked { animation: target-card-bounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } .target-mini-card.checked-no-anim { opacity: 1; filter: none; } @keyframes target-card-bounce { 0% { transform: scale(1); } 30% { transform: scale(1.25); box-shadow: 0 0 15px var(--accent-ok); } 100% { transform: scale(1); } } /* 실제 카드(.card-unit)와 같은 Cozy Day 수트 색을 쓴다. 종전에는 옛 --color-* (보라 스페이드 #8b62ff · 핑크 다이아 #ff007f)라 덱 정보에 적힌 색이 게임 안 카드와 달랐다(2026-09-03 사용자 지적). 스페이드는 트럼프냐 아니냐로 갈리는 것까지 맞춘다 — .card-unit.spade / .card-unit.spade.is-trump 와 같은 규칙이다. */ .target-mini-card.spade { color: var(--cozy-suit-spade-normal); } .target-mini-card.spade.is-trump { color: var(--cozy-suit-spade); } .target-mini-card.heart { color: var(--cozy-suit-heart); } .target-mini-card.diamond { color: var(--cozy-suit-diamond); } .target-mini-card.club { color: var(--cozy-suit-club); } /* HUD 목표 카드의 미션 타입별 강조 — 손패 카드의 target-card-avoid/-acquire/-card와 동일한 색상 의미 */ .target-mini-card-generic { box-shadow: 0 0 10px var(--accent-warn); border: 2px solid var(--accent-warn); } .target-mini-card-acquire { box-shadow: 0 0 12px var(--accent-ok); border: 2px solid var(--accent-ok); animation: pulse-acquire-mini 1.4s ease-in-out infinite alternate; } .target-mini-card-avoid { box-shadow: 0 0 12px var(--state-danger-glow); border: 2px solid var(--state-danger); animation: pulse-avoid-mini 1.0s ease-in-out infinite alternate; } /* 미니 카드 타겟 심볼 좌우 폭 축소 (다이아몬드 제외) */ /* 옛 칩 마크업(숫자 div + 수트 div) 전용이다. 마지막 div가 수트 줄이라는 전제로 쓰였는데, HUD 목표 카드가 일반 카드 구조(.card-unit)로 바뀌면서 마지막 div가 .card-corner.bottom-right가 됐다. 이 선택자가 (0,3,1)이라 `.card-unit .card-corner.bottom-right{display:none}`(0,3,0)을 이겨서 숨어야 할 우하단 코너가 살아나고, scaleX가 그 코너의 rotate(180deg)까지 덮어썼다. → .card-unit을 제외해 옛 칩(규칙 팝업·덱 정보)에만 걸리게 한다. */ .target-mini-card:not(.diamond):not(.card-unit) div:last-child { display: inline-block; transform: scaleX(0.85); } /* 스크롤바 디자인 */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--scrim-02); } ::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } /* 17. 반응형 미디어 쿼리 — 의도적으로 두지 않는다. 좁은 화면·테스트용 URL에서도 데스크톱 1280x720 원본 비율을 강제하는 것이 이 게임의 전제다. 과거 @media (max-width:900px) 블록이 주석으로 남아 있었으나(44줄) 2026-08-22 삭제했다. 브레이크포인트를 다시 넣으려면 이 전제부터 뒤집어야 한다. */ /* ========================================================================== Table Bidding Panel — Cozy Day ========================================================================== 펠트 위 오버레이는 상자를 두지 않는다. .table-result-panel 도 .tutorial-panel-box 도 이미 background:none · border:none · box-shadow:none 으로 정규화돼 있고(각 규칙의 주석 참조), 내용만 나무 위에 올린다. 비딩만 크림 상자를 달고 있으면 테이블 위에 다른 화면이 하나 얹힌 것처럼 읽힌다. 그래서 이 패널도 결과 패널과 같은 방식으로 펠트(930x472, top 63%)를 통째로 무대로 쓴다. 상자를 걷어낸 만큼 글자와 조작부를 펠트 크기에 맞춰 키웠다 — 확정 버튼은 같은 자리에 서는 .result-actions-box .btn(16px 40px · 1.25rem · 자간 2px)과 같은 치수다. 이전의 골드·파치먼트 스타일(이중 금테, 코인 버튼, 앰버 그라디언트 CTA, 코너 수트 장식)은 Cozy Day 팔레트에 대응물이 없어 전부 걷어냈다 — COZY_UI_CARD_SPEC 2절 「요청받지 않은 반투명, 점선 테두리, 애니메이션, 광택 효과를 추가하지 않는다」. 비딩 중 펠트는 비어 있다 — 딜링 덱은 removeTemporaryDealingDeck()으로 이미 걷혔고 낸 카드는 아직 없다. 그래서 튜토리얼 문구처럼 글자 뒤에 크림 띠(--tut-text-scrim)를 깔지 않는다. 깔 이유가 생기는 자리가 아니다. */ .table-bidding-panel { position: absolute; top: 63%; left: 50%; transform: translate(-50%, -50%); z-index: 200; /* 펠트와 같은 상자. flex 중앙 정렬이 알아서 펠트 한가운데에 놓는다 — 28차가 튜토리얼·결과 패널에 한 정규화와 같은 처리다. */ width: 930px; height: 472px; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: none; border: none; box-shadow: none; backdrop-filter: none; /* 무대가 펠트 전체라 그대로 두면 투명한 930x472 판이 테이블 위 클릭을 전부 삼킨다. .table-tutorial-panel 이 쓰는 것과 같은 처리 — 조작부에서만 되살린다. */ pointer-events: none; } .btn-bid-tri, .bidding-panel-submit { pointer-events: auto; } .table-bidding-panel.show { animation: bidding-pop 0.22s cubic-bezier(0.22, 0.9, 0.3, 1.1) both; } /* 튀어오르는 오버슈트를 뺐다. 패널이 나타났다는 사실만 전달하면 되고, Cozy Day는 과장된 모션을 쓰지 않는다. */ @keyframes bidding-pop { from { transform: translate(-50%, -50%) scale(0.96); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } } /* -- 제목: HUD의 .goal-label 과 같은 소형 라벨 문법, 펠트 크기에 맞춰 확대 -- */ .bidding-panel-title { font-family: 'Nunito', sans-serif; font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: 0.22em; text-transform: uppercase; text-align: center; color: var(--accent-primary); /* 튜토리얼 제목과 같은 최대 폭. 16개 언어 중 독일어·러시아어가 두 줄로 접힌다. */ max-width: 760px; white-space: normal; background: none; border: none; box-shadow: none; padding: 0; text-shadow: none; } /* -- 중간 행: +- 버튼 + 숫자 -- */ .bidding-panel-body-row { display: flex; align-items: center; justify-content: center; gap: 46px; width: 100%; } /* 상자가 아니라 자리다. 0~13 자릿수가 바뀌어도 +- 버튼이 좌우로 흔들리지 않게 최소 폭만 잡아 둔다. */ .bidding-panel-number { min-width: 190px; display: flex; align-items: center; justify-content: center; background: none; border: none; box-shadow: none; } #table-bidding-val { /* 카드 숫자와 같은 Nunito. Share Tech Mono는 다크·네온 시절 잔재다. */ font-family: 'Nunito', sans-serif; font-size: 150px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; color: var(--text-primary); text-shadow: none; user-select: none; } /* -- +- 버튼: #in-game-screen .btn-small 과 같은 문법의 원형판 -- 상자를 걷어내도 조작부는 조작부로 보여야 하므로 여기만 크림 면을 남긴다. */ .btn-bid-tri { position: relative; width: 92px; height: 92px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--cozy-card-bg); border: 2px solid var(--rule); border-radius: 50%; box-shadow: 0 3px 0 rgba(120, 90, 55, 0.14), 0 6px 14px rgba(120, 90, 55, 0.10); cursor: pointer; transition: border-color 0.2s ease, transform 0.12s ease, box-shadow 0.12s ease, opacity 0.2s ease; } /* 레거시 clip-path 삼각형 초기화 */ .btn-bid-tri::before { content: none; } .btn-bid-tri span { font-family: 'Nunito', sans-serif; font-size: 52px; font-weight: 900; line-height: 1; margin-top: -4px; color: var(--ingame-btn-ink); text-shadow: none; user-select: none; transition: color 0.2s ease; } .btn-bid-tri:hover:not(:disabled) { border-color: var(--accent-primary); transform: translateY(-2px); box-shadow: 0 5px 0 rgba(120, 90, 55, 0.14), 0 8px 18px rgba(120, 90, 55, 0.12); } .btn-bid-tri:hover:not(:disabled) span { color: var(--accent-primary); } .btn-bid-tri:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(120, 90, 55, 0.14); } /* 0 또는 최대치에서 더 못 가는 상태를 눈으로 알려준다(눌러도 무반응이던 자리) */ .btn-bid-tri:disabled { cursor: default; opacity: 0.4; } /* -- 예측/총 트릭 점: 좌석 패널의 .pips 와 같은 문법 -- 채운 점이 예측, 전체 점 수가 이번 라운드의 트릭 수다. 「총 트릭 수」 문구는 openBiddingModal이 늘 숨겨 왔으므로(그 자리가 비어 있었다) 같은 정보를 점으로 돌려준다. */ .bidding-panel-pips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; max-width: 620px; } .bidding-panel-pips span { width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid var(--rule-strong); box-sizing: border-box; flex: none; transition: background 0.15s ease, border-color 0.15s ease; } .bidding-panel-pips span.f { background: var(--cozy-seat-south); border-color: var(--cozy-seat-south); } /* -- 보조 텍스트(현재 JS가 숨김) -- */ .bidding-panel-note { font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 0.02em; color: var(--text-dim); text-shadow: none; } /* -- 확정: 같은 자리에 서는 .result-actions-box .btn 과 같은 치수, 색은 타이틀 #btn-play-main 과 같은 1차 CTA -- */ .bidding-panel-submit { min-width: 240px; padding: 16px 44px; font-family: 'Nunito', sans-serif; font-size: 1.25rem; font-weight: 900; letter-spacing: 2px; text-indent: 0; text-align: center; white-space: nowrap; color: var(--cozy-cta-text); background: var(--cozy-cta-primary-hover); border: 0; border-radius: 999px; cursor: pointer; text-shadow: none; box-shadow: inset 0 -3px 0 var(--cozy-cta-primary-shadow), 0 6px 16px rgba(62, 69, 66, 0.16); transition: background 0.2s ease, transform 0.12s ease, box-shadow 0.12s ease; } .bidding-panel-submit:hover { background: var(--cozy-cta-primary-shadow); color: var(--cozy-cta-text); transform: translateY(-2px); } .bidding-panel-submit:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 var(--cozy-cta-primary-shadow); } /* -- 비딩 튜토리얼 동시 표시(compact) -- .table-tutorial-panel.stage51-bottom-layout 이 제목을 펠트 위쪽(펠트 기준 y 95~119), 본문을 아래쪽(y 316~356)에 두고 가운데만 비워 준다. 그 180px 남짓한 띠 안에 들어가야 한다. 그래서 (1) 제목을 접고 — 바로 위 튜토리얼 제목이 "트릭 예측 미션 소개"라 두 줄이 겹말이 된다 —, (2) padding-bottom 으로 중앙 정렬 기준을 위로 당긴다. 튜토리얼은 이 배치에서 닫기 버튼이 없고(.tutorial-panel-actions{display:none}) 비딩 확정과 함께 사라지므로, compact 인 동안 튜토리얼 제목이 없어지는 경우는 없다. */ .table-bidding-panel.compact { gap: 16px; /* 중앙 정렬 기준을 위로 당겨 제목과 본문 사이 띠 한가운데에 놓는다. 2026-09-02에 튜토리얼 지오메트리를 기본값으로 되돌리면서 띠가 넓어졌다 (제목 bottom 117→86, 본문 top 316→328 ⇒ 199px → 242px). 그만큼 조작부를 키웠다. */ padding-bottom: 58px; } .table-bidding-panel.compact .bidding-panel-title { display: none; } .table-bidding-panel.compact .bidding-panel-body-row { gap: 30px; } .table-bidding-panel.compact .bidding-panel-number { min-width: 150px; } .table-bidding-panel.compact #table-bidding-val { font-size: 118px; } .table-bidding-panel.compact .btn-bid-tri { width: 78px; height: 78px; } .table-bidding-panel.compact .btn-bid-tri span { font-size: 46px; margin-top: -4px; } .table-bidding-panel.compact .bidding-panel-pips { gap: 7px; max-width: 420px; } .table-bidding-panel.compact .bidding-panel-pips span { width: 13px; height: 13px; border-width: 2px; } .table-bidding-panel.compact .bidding-panel-submit { min-width: 200px; padding: 14px 36px; font-size: 1.15rem; } /* 다국어 지원: 한국어 이외 언어(이탈리아어 등)에서 확정 버튼 및 타이틀 자간 조정 */ html:not([lang="ko"]) #btn-table-bid-submit, html:not([lang="ko"]) .bidding-panel-submit { letter-spacing: 0.5px !important; text-indent: 0px !important; } html:not([lang="ko"]) .bidding-panel-title { letter-spacing: 0.12em !important; } /* 18. 로비-인게임 부드러운 전환 및 딜링 애니메이션 효과 */ .fade-out { opacity: 0 !important; transition: opacity 0.3s ease !important; } .screen.no-anim { transition: none !important; transform: none !important; } /* 딜링 카드 덱 입체 연출. 72×104에서 104×150으로 키웠다(2026-09-03). 사용자 기준은 "테이블에 나오는 카드 뒷면과 덱은 최소한 손패에 표시되는 카드 크기는 돼야 한다"인데, 내 손패 카드가 104×150이라 덱이 72×104면 카드가 자기보다 작은 덱에서 나오는 모양이었다. 이제 덱·내 손패 카드가 104×150 기준선에서 만나 덱에서 카드가 자연스럽게 뽑혀 나온다. 가운데 정렬(translate(-50%,-50%))이라 크기를 바꿔도 자리는 그대로다. */ .table-dealing-deck { position: absolute; width: 104px; height: 150px; z-index: 10; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0.6); top: calc(50% + 75px); left: 50%; transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .table-dealing-deck.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); } .deck-card-pile { position: absolute; width: 100%; height: 100%; border-radius: 12px; background: #551122; /* 붉은색 뒷면 테마 */ border: 1px solid var(--rule-white-03); box-shadow: 0 2px 5px var(--shadow-dark-05); background-image: repeating-linear-gradient(45deg, #7a1f2d, #7a1f2d 4px, #551122 4px, #551122 8px); } .deck-card-pile.pile-1 { transform: translate(0, 0); } .deck-card-pile.pile-2 { transform: translate(-2px, -2px); } .deck-card-pile.pile-3 { transform: translate(-4px, -4px); } .deck-card-shadow { position: absolute; width: 100%; height: 100%; border-radius: 12px; box-shadow: 0 8px 20px var(--shadow-dark-07); transform: translate(-4px, -4px); } /* 카드 딜링 애니메이션 효과 */ /* 딜링 시작 상태. 출발 위치는 positionDealingCardsAtDeck()이 카드마다 재서 --deal-x/--deal-y에 넣는다 (그 카드의 최종 자리에서 덱 중심까지의 실제 변위). 회전은 살짝 기운 채로(-8도) 날아와 제자리에서 펴진다. ── 출발 배율 1 (2026-09-03) ── 기준은 "날아가는 카드가 어느 순간에도 그 카드가 도착해서 될 크기보다 작아 보이면 안 된다"이다. 내 손패 카드는 104×150 덱과 같은 크기(scale 1)로 출발해 손패(104×150)로 안착한다. 상자 크기를 도착 크기에 맞추고 배율을 1로 두어 앞면 공개 시점 크기 튐이 발생하지 않는다. (NPC 카드의 출발 배율은 아래 별도 규칙 — 덱 크기(104×150) 기준을 그대로 물려받는다.) */ .card-unit.dealing { opacity: 0 !important; visibility: hidden !important; transform: translate(var(--deal-x, 0px), var(--deal-y, -220px)) scale(1) rotate(-8deg) !important; pointer-events: none; } /* NPC 손패 딜링 카드 출발 배율(BUG-162 후속, 2026-09-04 사용자 보고). 2026-09-03 수정 당시 "크기 변화가 없으면 튐도 없다"는 논리로 NPC도 scale(1)을 그대로 물려받게 했는데, NPC 상자 자체가 72×104로 덱(104×150)보다 작다 — 그래서 NPC 카드는 시작부터 덱보다 작은 채로 날아 나오는 모양이 됐다("카드가 자기보다 작은 덱에서 나온다"는 2026-09-03 코멘트가 막으려던 바로 그 문제가 NPC 쪽에서 재발했다). 104/72 ≈ 1.444배로 키워 덱과 같은 화면 크기로 출발시키고, 도착(dealt-anim)에서 scale(1) (=NPC 진짜 크기 72×104)로 줄어들며 손패에 안착한다. */ .npc-hand-preview .card-unit.dealing { transform: translate(var(--deal-x, 0px), var(--deal-y, -220px)) scale(1.444) rotate(-8deg) !important; } /* 도착 상태. 시작 상태와 같은 transform 함수 순서를 유지해야 보간이 매끄럽다. 전환 시간은 animateCardDealing()이 게임 속도를 반영해 --deal-transition에 넣는다. 종전에는 여기가 0.4s 고정이라 그 값이 오지 못했고, 카드 간격(getDelay(40))만 빨라져서 「아주 빠름」에서는 카드가 공중에 겹쳐 쌓였다. 게다가 앞면 공개 타이머는 속도를 반영한 값으로 돌아서 카드가 도착하기 전에 뒤집혔다 — 이제 둘이 같은 값을 본다(2026-09-03). */ .card-unit.dealt-anim { opacity: 1 !important; transform: translate(0px, 0px) scale(1) rotate(0deg) !important; transition: opacity var(--deal-transition, 0.4s) cubic-bezier(0.25, 0.8, 0.25, 1.25), transform var(--deal-transition, 0.4s) cubic-bezier(0.25, 0.8, 0.25, 1.25) !important; } @keyframes result-panel-pop { 0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } #table-result-panel, .table-result-panel { position: absolute; top: calc(50% + 75px); left: 50%; transform: translate(-50%, -50%); width: 640px; max-width: 85%; height: 280px; z-index: 120; background: none !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; display: flex; justify-content: center; align-items: center; padding: 15px; box-sizing: border-box; animation: result-panel-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* 결과 패널을 펠트에 맞춰 앉히고 키운다(BUG-81). 종전에는 top:calc(50%+75px)·height:280px로 480×280 테이블 시절 값이라 내용이 펠트 중심보다 위로 몰리고 아래가 199px 비었다. 28차가 튜토리얼 패널에 한 정규화와 같은 처리다 — 펠트와 같은 상자로 두면 flex 중앙 정렬이 알아서 펠트 한가운데에 놓는다. */ #in-game-screen #table-result-panel, #in-game-screen .table-result-panel { top: 63%; width: 930px; max-width: none; height: 472px; } #in-game-screen .result-panel-icon { font-size: 5.5rem; margin-bottom: 12px; line-height: 1; } #in-game-screen .result-panel-title { font-size: 3rem; font-weight: 900; margin-bottom: 12px; line-height: 1.2; } #in-game-screen .result-panel-body { font-size: 1.4rem; line-height: 1.5; color: var(--text-light); margin-bottom: 12px; word-break: keep-all; max-height: none; overflow: visible; } #table-result-panel.success, .table-result-panel.success { background: none !important; border: none !important; box-shadow: none !important; } #table-result-panel.failure, .table-result-panel.failure { background: none !important; border: none !important; box-shadow: none !important; } /* 금 갈 때 번쩍이는 효과 */ #table-result-panel.crack-flash, .table-result-panel.crack-flash { animation: failure-flash 0.3s; } @keyframes failure-flash { 0% { background: transparent; } 50% { background: rgba(184, 70, 60, 0.25); } 100% { background: transparent; } } .result-panel-content { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center; } .result-panel-icon { font-size: 2.8rem; margin-bottom: 5px; line-height: 1; } .result-panel-title { font-size: 1.6rem; font-weight: 900; margin-bottom: 5px; line-height: 1.2; } .table-result-panel.success .result-panel-title { color: var(--accent-ok); text-shadow: none; } .table-result-panel.failure .result-panel-title { color: var(--color-fail-red); /* 바로 위 .success 쪽은 이미 none으로 걷혔는데 실패 쪽만 남아 있었다(2026-09-03). */ text-shadow: none; } .result-panel-body { font-size: 0.9rem; line-height: 1.4; color: var(--text-light); margin-bottom: 8px; word-break: keep-all; max-height: 60px; overflow-y: auto; } /* 하트 깨지는 연출 */ .heart-break-container { display: flex; align-items: center; justify-content: center; margin: 10px 0 15px 0; width: 100%; } .heart-break-wrapper { position: relative; width: 90px; height: 90px; } .heart-svg { width: 100%; height: 100%; overflow: visible; } .heart-base { fill: var(--color-life-heart); } .heart-half { fill: var(--color-life-heart); transform-origin: 50px 50px; } .heart-crack { stroke: #ffffff; stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; transition: stroke-dashoffset 0.4s ease-out, opacity 0.2s; } /* 흔들리며 금 그어짐 */ .heart-svg.shake { animation: heart-shake 0.5s linear; } .heart-svg.shake .heart-crack { stroke-dashoffset: 0; opacity: 1; } /* 한쪽 조각(오른쪽 반)만 양옆으로 날아가며 소멸 */ .heart-svg.split .heart-half.right { animation: split-right 0.8s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94); } .heart-svg.split .heart-crack { opacity: 0.8; /* 금 간 형상은 유지 */ } /* 하트 정중앙 숫자 오버레이 */ .heart-lives-count-overlay { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); font-size: 2.2rem; font-weight: 900; font-family: 'Share Tech Mono', monospace; color: var(--text-primary); text-shadow: 0 2px 8px var(--shadow-dark-08), 0 0 4px #000; z-index: 15; pointer-events: none; line-height: 1; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .heart-lives-count-overlay.pulse-active { animation: lives-pulse 0.6s ease-out; } @keyframes lives-pulse { 0% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); } 50% { transform: translate(-50%, -50%) scale(1.5); filter: brightness(1.8) drop-shadow(0 0 10px var(--accent-info)); } 100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); } } /* 애니메이션 키프레임 */ @keyframes heart-shake { 0% { transform: translate(0, 0) rotate(0deg); } 10% { transform: translate(-2px, 1px) rotate(-1deg); } 20% { transform: translate(2px, -1px) rotate(1deg); } 30% { transform: translate(-1px, -1px) rotate(0deg); } 40% { transform: translate(1px, 1px) rotate(1deg); } 50% { transform: translate(-1px, 1px) rotate(-1deg); } 60% { transform: translate(2px, 0px) rotate(0deg); } 70% { transform: translate(-1px, -1px) rotate(1deg); } 80% { transform: translate(1px, -1px) rotate(-1deg); } 90% { transform: translate(-1px, 0deg) rotate(0deg); } 100% { transform: translate(0, 0) rotate(0deg); } } @keyframes split-right { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 50% { transform: translate(15px, 8px) rotate(15deg); opacity: 0.8; } 100% { transform: translate(25px, 25px) rotate(25deg); opacity: 0; } } .result-actions-box { position: absolute; top: 0; left: 220px; width: calc(100% - 240px); height: 100%; background: none !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; display: flex; align-items: center; justify-content: center; gap: 20px; z-index: 160; box-sizing: border-box; padding: 20px; } .result-actions-box.success { background: none !important; border: none !important; box-shadow: none !important; } .result-actions-box.failure { background: none !important; border: none !important; box-shadow: none !important; } .result-actions-box .btn { padding: 16px 40px; font-size: 1.25rem; font-weight: 700; min-width: 180px; letter-spacing: 2px; } /* 레벨 결과 공유 모달 및 카드 스타일 */ .share-box { width: 420px !important; max-width: 90% !important; /* 결과 카드(canvas) + 버튼이 세로로 길어 720p·창모드에서 팝업이 화면 밖으로 넘치던 문제. 팝업 자체를 화면 안에 묶고, 넘치는 만큼은 본문만 스크롤시킨다(제목·닫기는 항상 보이게). */ max-height: calc(100% - 32px); overflow: hidden; } .share-box .modal-body { overflow-y: auto; min-height: 0; } /* 결과 카드는 canvas 한 장이다(그림 자체는 game.js renderShareCardCanvas가 그린다). 화면에 보이는 카드와 복사/저장되는 PNG가 어긋나지 않도록 DOM 카드를 걷어냈다. 테두리는 canvas 안에 그려져 있고, 화면용 그림자만 여기서 준다 (카드가 캔버스를 가장자리까지 채우므로 box-shadow가 카드 모양과 정확히 겹친다). 이 그림자는 PNG에 포함되지 않는다 — 의도된 것이다. 2026-09-02 카드 개편 전에는 네온 글로우였다. */ .share-card-canvas { display: block; /* 위시리스트 CTA가 팝업 아래쪽에 들어오면서(.wishlist-cta) 720p에서 공유 버튼 마지막 줄이 스크롤 밖으로 밀렸다. 주변 여백을 줄이고도 40px이 모자라, 미리보기 높이에 상한을 둔다. 복사/저장되는 PNG는 canvas의 실제 해상도(SHARE_CARD.W = 1080px 폭)로 그려지므로 이 값과 무관하다 - 줄어드는 것은 화면 미리보기뿐이다. max-width/max-height를 함께 주면 브라우저가 비율을 유지한 채 더 빡빡한 쪽을 적용한다. */ width: auto; height: auto; max-width: 100%; max-height: 210px; margin: 0 auto 12px; border-radius: 12px; box-shadow: var(--shadow-dark-03); } /* 공유 옵션 그리드 - 5개 버튼에 최적화된 Flexbox 레이아웃 */ .share-options-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; width: 100%; } .btn-share-opt { flex: 0 0 calc(33.333% - 8px); box-sizing: border-box; background: var(--surface-sunk); border: 1px solid var(--rule); border-radius: 8px; padding: 9px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.22s cubic-bezier(0.25, 0.8, 0.25, 1); color: var(--text-primary); box-shadow: var(--shadow-dark-02); } /* 이미지 복사·저장이 이 팝업의 주 동작이다(트위터 공유 URL은 이미지를 못 싣는다). Facebook·Line 제거 후 남은 4개(이미지 복사/저장 + 링크 복사/Twitter)를 2×2로 배치한다. */ .btn-share-opt.copy-image, .btn-share-opt.save-image, .btn-share-opt.copy-link, .btn-share-opt.twitter { flex: 0 0 calc(50% - 5px); } .btn-share-opt:hover { background: var(--surface-panel); border-color: var(--accent-primary); box-shadow: var(--shadow-dark-03); transform: translateY(-2px); } .btn-share-opt:active { transform: translateY(1px); } .share-opt-icon { font-size: 1.6rem; margin-bottom: 4px; line-height: 1; } .share-opt-label { font-size: 0.75rem; font-weight: 700; color: var(--text-primary); text-align: center; white-space: nowrap; letter-spacing: 0.5px; } /* 스팀 위시리스트 CTA ------------------------------------------------------ 공유 모달 하단, "닫기" 위에 세로로 쌓는다. .modal-actions는 원래 버튼 하나만 가로 중앙에 놓는 flex라 여기서만 세로 방향으로 바꾼다. */ .modal-actions.share-actions { flex-direction: column; gap: 10px; } .wishlist-cta { width: 100%; } .wishlist-cta-note { margin: 0 0 5px; font-size: 0.75rem; font-weight: 600; color: var(--text-light); text-align: center; letter-spacing: 0.3px; } /* 배경은 스팀 브랜드 네이비. 이 팝업의 다른 버튼(네온 그린/레드)과 일부러 다른 색을 써서 "게임 밖으로 나가는 링크"임이 한눈에 구분되게 한다. */ .btn-wishlist { display: flex !important; align-items: center; justify-content: center; width: 100%; padding: 9px 20px; box-sizing: border-box; text-decoration: none; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.5px; color: #ffffff; background: linear-gradient(135deg, #1b2838 0%, #2a475e 100%); border: 1px solid #66c0f4; border-radius: 8px; box-shadow: var(--shadow-dark-03); transition: all 0.22s cubic-bezier(0.25, 0.8, 0.25, 1); } .btn-wishlist:hover { background: linear-gradient(135deg, #2a475e 0%, #3d6c8d 100%); box-shadow: var(--shadow-dark-03); transform: translateY(-2px); } .btn-wishlist:active { transform: translateY(1px); } /* ── 플레이테스트 피드백 링크 / 웰컴 모달 ──────────────────────────────────── 기간 한정 UI다. 정식 출시 때 이 블록과 index.html의 #modal-playtest-welcome, #btn-playtest-discord를 함께 지우면 흔적이 남지 않는다. 색은 .btn-wishlist와 같은 이유로 게임의 네온 팔레트에서 일부러 벗어난다 — "게임 밖으로 나가는 링크"임이 한눈에 보여야 한다. 여기서는 디스코드 브랜드 색. */ .btn-discord { display: inline-flex; align-items: center; justify-content: center; padding: 11px 26px; box-sizing: border-box; font-size: 1rem; font-weight: 800; letter-spacing: 0.3px; color: #ffffff; background: linear-gradient(135deg, #4752c4 0%, #5865f2 100%); border: 1px solid #7a85ff; border-radius: 10px; box-shadow: var(--shadow-dark-03); transition: all 0.22s cubic-bezier(0.25, 0.8, 0.25, 1); } .btn-discord:hover { background: linear-gradient(135deg, #5865f2 0%, #7983f5 100%); box-shadow: var(--shadow-dark-03); transform: translateY(-2px); } .btn-discord:active { transform: translateY(1px); } /* 시작 화면의 링크. .menu-buttons 밖에 있어 플레이 버튼(2rem)의 큰 글자를 물려받지 않는다. */ #btn-playtest-discord { margin-bottom: 30px; } /* 창 높이가 낮으면(1024x600 등) 안내가 통째로 화면을 넘친다 - 독일어·러시아어처럼 문장이 긴 언어에서 먼저 터진다. 상자 높이를 화면에 묶고 넘치는 만큼만 본문이 스크롤되게 한다. 버튼 두 개는 상자 안에 고정으로 남아야 하므로 스크롤은 .modal-body에만 건다. 92vh → 92%로 고쳤다(2026-09-03). 이 상자는 --app-scale로 축소되는 #overlay-layer 안에 있어서 높이 기준이 캔버스(1080px)여야 한다. vh는 창 높이라, 창이 낮으면 캔버스의 절반까지 과하게 조여지고(600px 창에서 552캔버스px = 51%) 창이 높으면 아무 제한도 안 걸렸다. BUG-147과 같은 계열이다. */ .playtest-welcome-box { max-width: 560px; max-height: 92%; } .playtest-welcome-title { font-size: 1.4rem; line-height: 1.35; } .playtest-welcome-body { text-align: left; font-size: 0.95rem; line-height: 1.6; overflow-y: auto; /* flex 항목은 기본 min-height:auto라 내용만큼 버티며 줄어들지 않는다. 이 한 줄이 없으면 max-height를 걸어도 상자가 그대로 넘친다. */ min-height: 0; } .playtest-welcome-lead { margin: 0 0 14px; } .playtest-welcome-ask { margin: 16px 0 6px; font-weight: 800; color: var(--accent-warn); } .playtest-welcome-list { margin: 0; padding-left: 1.2em; list-style: disc; } .playtest-welcome-list li { margin-bottom: 5px; opacity: 0.92; } /* 버튼 둘을 세로로 쌓는다. 디스코드 링크가 위에 오는 이유는 이 모달의 목적이 "게임 시작"이 아니라 "피드백 창구 알리기"이기 때문이다. */ .playtest-welcome-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } /* 아랍어에서 문서 방향이 rtl로 바뀌면 목록 들여쓰기도 반대편이어야 한다. */ [dir="rtl"] .playtest-welcome-body { text-align: right; } [dir="rtl"] .playtest-welcome-list { padding-left: 0; padding-right: 1.2em; } /* 레벨 클리어 직후 "결과 공유" 자리에 들어가는 판본(itch 빌드 전용, renderLevelClearActions). .btn-wishlist는 모달 하단용이라 width:100%인데 여기서는 옆에 "레벨 완료" 버튼과 나란히 서야 한다. .result-actions-box .btn의 큰 글자·넓은 자간도 문구가 길어 그대로는 넘친다. 같은 특이도(0,2,0)라 이 규칙이 뒤에 와야 이긴다. */ .result-actions-box .btn-wishlist-inline { width: auto; min-width: 0; /* 세로 패딩과 글자 크기는 옆 "레벨 완수!" 버튼(.result-actions-box .btn)과 같게 둔다. 달리 잡으면 두 버튼 높이가 어긋나 나란히 섰을 때 눈에 띈다. 문구가 길어 가로 패딩과 자간만 좁힌다. */ padding: 16px 30px; letter-spacing: 0.5px; } /* 인게임 메뉴 모달 전용 스타일 */ .ingame-menu-body { display: flex; flex-direction: column; gap: 12px; width: 100%; box-sizing: border-box; padding: 10px 0; } .ingame-menu-body .btn { width: 100%; text-align: center; padding: 12px; font-size: 0.95rem; box-sizing: border-box; } /* 내 핸드 영역 좌우상단 배치용 코너 버튼 (BUG-45/58/59: 시안 일치 44px 레일 마진, 12px 상단 간격, Nunito 16px 800) */ .ingame-corner-btn { position: absolute; top: -54px; z-index: 100; min-width: 96px; min-height: 42px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; background: var(--cozy-card-bg) !important; border: 2px solid var(--rule) !important; border-radius: 999px !important; color: var(--text-dim) !important; font-family: 'Nunito', sans-serif !important; font-size: 16px !important; font-weight: 800 !important; letter-spacing: 0.02em; padding: 8px 22px !important; box-shadow: 0 2px 0 rgba(120, 90, 55, 0.14) !important; cursor: pointer; transition: all 0.2s ease; } .ingame-corner-btn:hover { border-color: var(--accent-primary) !important; color: var(--accent-primary) !important; background: var(--surface-white-018) !important; } .ingame-corner-btn.left-top { left: 44px; } .ingame-corner-btn.right-top { right: 44px; } /* 특수 카드 텍스트 폰트 및 정렬 통일 */ .deck-special-row { display: flex; align-items: center; justify-content: flex-start; width: 100%; font-family: 'Share Tech Mono', monospace !important; } .special-label { font-size: 0.75rem; color: var(--text-dim); margin-right: 8px; flex-shrink: 0; } .special-cards-list { display: flex; justify-content: space-evenly; /* 모든 덱에서 동일 폭으로 균등 분배 */ align-items: center; flex: 1; } .spec-card-val { font-family: 'Share Tech Mono', monospace !important; font-weight: 700; color: #a0a0a0; display: inline-flex; justify-content: center; align-items: center; min-width: 16px; text-align: center; text-shadow: none; } /* Trio Deck 1~15를 한 줄에 표현하기 위해 폰트 축소 */ .trio-deck-active .deck-suit-cards { font-size: 0.72rem !important; letter-spacing: 0px !important; } /* Quintet Deck 데코레이션 및 상하 간격 3px 설정 */ .quintet-deck-active.deck-grid, .quintet-deck-active .deck-info-right { display: flex; flex-direction: column; justify-content: center !important; padding-top: 6px !important; padding-bottom: 6px !important; margin: 0 !important; gap: 3px !important; /* 전체 줄간 간격 3px */ } .quintet-deck-active .deck-suit-row { padding: 0px !important; /* 패딩을 제거하고 gap으로만 간격 조절 */ margin: 0px !important; line-height: 1.25 !important; border-bottom: none !important; /* 모달에서의 밑줄 제거 */ } .quintet-deck-active .deck-suit-icon { font-size: 1.15rem !important; line-height: 1.25 !important; } .quintet-deck-active .deck-suit-cards { line-height: 1.25 !important; } .quintet-deck-active .deck-special-row { margin-top: 3px !important; /* gap과 동일하게 3px */ padding: 0px !important; line-height: 1.25 !important; } /* Rainbow Deck 데코레이션 및 상하 간격 1px 설정 */ .rainbow-deck-active.deck-grid, .rainbow-deck-active .deck-info-right { display: flex; flex-direction: column; justify-content: center !important; padding-top: 2px !important; padding-bottom: 2px !important; margin: 0 !important; gap: 1px !important; /* 전체 줄간 간격 1px */ } .rainbow-deck-active .deck-suit-row { padding: 0px !important; /* 패딩을 제거하고 gap으로만 간격 조절 */ margin: 0px !important; line-height: 1.1 !important; border-bottom: none !important; /* 모달에서의 밑줄 제거 */ } .rainbow-deck-active .deck-suit-icon { font-size: 0.95rem !important; /* 심볼 크기 미세 축소 */ line-height: 1.1 !important; width: 16px !important; } .rainbow-deck-active .deck-suit-cards { font-size: 0.8rem !important; /* 폰트 크기 미세 축소 */ line-height: 1.1 !important; letter-spacing: 0px !important; } .rainbow-deck-active .deck-special-row { margin-top: 1px !important; /* gap과 동일하게 1px */ padding: 0px !important; line-height: 1.1 !important; } .rainbow-deck-active .special-label { font-size: 0.7rem !important; } .rainbow-deck-active .spec-card-val { font-size: 0.72rem !important; min-width: 14px !important; } /* 원(Circle) 및 정사각형(Square) 슈트 색상 정의 */ .deck-suit-row.circle, .deck-suit-row.circle * { color: var(--accent-info) !important; text-shadow: none; } .deck-suit-row.square, .deck-suit-row.square * { color: #ff00ff !important; text-shadow: none; } /* 인게임 카드 및 미니 카드의 슈트 색상 매핑 */ .card-unit.star { background: #ffffff !important; border: 1.5px solid var(--rule-dark-015) !important; color: var(--color-star) !important; text-shadow: none !important; box-shadow: 0 4px 10px var(--shadow-dark-03) !important; } .npc-hand-preview .card-unit.star { border: 1px solid var(--rule-dark-015) !important; } .card-unit.circle { color: var(--accent-info); } .card-unit.square { color: #ff00ff; } .card-unit.ocean { color: #00aaff; } .card-unit.crown { color: var(--suit-crown); } .card-unit.moon { color: #b026ff; } .target-mini-card.star { /* 실제 카드(.card-unit.star)가 쓰는 --cozy-suit-star(2026-09-04부터 #9c7a00)에 맞춘다. 종전의 --color-star(#ffaa00)는 옛 네온 노랑이라 덱 정보만 밝게 떴다(2026-09-03). */ color: var(--cozy-suit-star) !important; text-shadow: none !important; } .target-mini-card.ocean { color: #00aaff; } .target-mini-card.crown { color: var(--suit-crown); } .target-mini-card.moon { color: #b026ff; } /* 실제 카드(.card-unit.circle)는 --accent-info를 쓴다. --suit-circle(#00f0ff)은 옛 네온 시안이라 덱 정보만 형광으로 떴다(2026-09-03). */ .target-mini-card.circle { color: var(--accent-info); } .target-mini-card.square { color: #ff00ff; } /* ========================================================================== HEARTS EXTREME - Special Card Styling (Premium Theme Update - Grey Edition) ========================================================================== */ /* 특별 카드 공통 기본 스타일 */ /* 특별 카드 공통 기본 스타일 (흰색 배경 & 검정 텍스트) */ .card-unit.special-card { background-color: #ffffff !important; background-image: none !important; border: 1.5px solid var(--rule-dark-015) !important; color: #000000 !important; box-shadow: 0 4px 10px var(--shadow-dark-03) !important; } /* NPC 손패의 미니 카드일 때의 크기 및 테두리 */ .npc-hand-preview .card-unit.special-card { border: 1px solid var(--rule-dark-015) !important; box-shadow: 0 2px 5px var(--shadow-dark-03) !important; } /* 플레이 가능한 상태에서의 호버 효과 강화 */ .card-unit.special-card.playable:hover { transform: translateY(-20px) scale(1.15) !important; outline: none !important; box-shadow: 0 10px 25px var(--shadow-dark-04), 0 0 12px var(--shadow-dark-03) !important; border-color: #000000 !important; } /* 낼 수 없는 특수 카드는 일반 카드와 동일하게 제어 */ /* .card-unit.special-card.unplayable 통합됨 (BUG-62) */ /* 특수 카드 중앙 SVG 아이콘 공통 규격 */ .card-suit-center .special-icon { width: 1.2em; height: 1.2em; display: block; } /* ========================================================================== HEARTS EXTREME - Mono Deck Styling ========================================================================== */ /* 로비/도감 덱의 숫자 리스트 색상 정의 */ .deck-suit-row.mono, .deck-suit-row.mono * { color: #a0a0a0 !important; text-shadow: none; } /* 인게임 모노 덱 카드 기본 스타일 (화살표 특수 카드와 동일하게 검정 텍스트 & 흰색 배경) */ .card-unit.mono { background-color: #ffffff !important; background-image: none !important; border: 1.5px solid var(--rule-dark-015) !important; color: #000000 !important; box-shadow: 0 4px 10px var(--shadow-dark-03) !important; } /* NPC 손패의 미니 카드 */ .npc-hand-preview .card-unit.mono { border: 1px solid var(--rule-dark-015) !important; box-shadow: 0 2px 5px var(--shadow-dark-03) !important; } /* 플레이 가능한 상태에서의 호버 효과 */ .card-unit.mono.playable:hover { transform: translateY(-20px) scale(1.15) !important; outline: none !important; box-shadow: 0 10px 25px var(--shadow-dark-04), 0 0 12px var(--shadow-dark-03) !important; border-color: #000000 !important; } /* 낼 수 없는 카드 */ /* .card-unit.mono.unplayable 통합됨 (BUG-62) */ /* 목표 카드 미니 버전 (HUD) */ .target-mini-card.mono { color: #000000 !important; text-shadow: none !important; } /* NPC 손패 미니 카드의 목표 카드 강조 복구. 위 `.card-unit.mono`와 `.npc-hand-preview .card-unit.mono`가 border·box-shadow를 !important로 잡고 있는데, 강조 규칙(.npc-hand-preview .card-unit.mini-highlight.target-card-*) 에는 !important가 없어서 눌린다. 그 결과 모노 덱에서만 상대 손패의 목표 카드가 검은 테두리로 나왔다(Base 덱은 분홍 테두리+글로우가 정상). 같은 무게로 되돌린다. 배경·글자색은 건드리지 않으므로 모노 덱 특유의 흰 카드 모양은 그대로다. pulse-avoid-mini 애니메이션은 !important 선언에 밀려 정지한 글로우가 되는데, 미리보기용 작은 카드라 깜빡임보다 "보이는 것"이 중요해 이 쪽을 택했다. */ .npc-hand-preview .card-unit.mono.mini-highlight.target-card { border: 1px solid var(--accent-warn) !important; box-shadow: 0 0 8px var(--accent-warn) !important; } .npc-hand-preview .card-unit.mono.mini-highlight.target-card-acquire { border: 1px solid var(--accent-ok) !important; box-shadow: 0 0 8px var(--accent-ok) !important; } .npc-hand-preview .card-unit.mono.mini-highlight.target-card-avoid { border: 1px solid var(--state-danger) !important; box-shadow: 0 0 8px var(--state-danger-glow) !important; } /* ========================================================================== HEARTS EXTREME - Font Uniformity & Trump Label Style B ========================================================================== */ /* 트럼프 라벨 흰색 강제 및 기존 파란색 색상 해제 */ .lobby-deck-trump { color: inherit !important; text-shadow: none; } .lobby-deck-trump-label { color: var(--text-primary) !important; text-shadow: none; } .lobby-deck-trump-val { color: var(--text-primary) !important; text-shadow: none; } /* 전체 덱 정보와 카드 폰트를 Nunito 폰트로 일괄 통일 */ .card-unit, .card-unit *, .target-mini-card, .target-mini-card *, .deck-info-right, .deck-info-right *, .deck-special-row, .deck-special-row * { font-family: 'Nunito', sans-serif !important; } /* 숫자 11의 1 사이 간격 벌림 조정 (Nunito 폰트 가독성 보완) */ .num-span.eleven-num { letter-spacing: 0.6em !important; margin-right: -0.6em !important; } .card-unit.eleven-num .card-corner span:first-child, .card-unit.eleven-num .card-suit-center { letter-spacing: 0.6em !important; margin-right: -0.6em !important; } .eleven-digit-span { letter-spacing: normal !important; margin-right: 0 !important; display: inline-block; } /* 인게임 덱 정보 팝업 전용 레이아웃 조정 (전체 카드 나열 및 크기 확대). 내용이 게임 화면 높이를 넘어서면(카드 수가 많은 덱 등) 팝업 자체가 화면 밖으로 넘치지 않도록, 모달 박스 높이를 게임 화면(.modal-overlay 기준) 대비로 제한하고 카드 목록 영역만 스크롤되게 함 */ #modal-deck-info .modal-box { /* 860px에서는 카드가 24px까지 줄어 숫자가 잘 안 보였다(2026-09-03 사용자 지적). 1100px인 이유(2026-09-03). 4수트 덱을 1열로 세우면서 상자가 세로로 길어졌는데, 여기서 폭을 더 줄이면 카드는 들어가도 아래 규칙 문단(25px)이 여러 줄로 접히면서 세로가 상한(96%)을 넘어 스크롤이 생긴다 — 매직·바다·하트·퀸텟에서 실제로 그랬다. 덱마다 재서 맞추는 코드도 넣어 봤지만 10종이 전부 이 하한에 걸려 하는 일이 없었다. */ max-width: 1100px; width: 95%; max-height: 96%; } #modal-deck-info .modal-body { min-height: 0; overflow-y: auto; } /* 설명 글씨. 16px → 21px로 한 번 키웠는데도 작다는 지적이 다시 나와 25px로 올린다 (2026-09-03). 모달 제목이 28.8px이므로 그 아래에서 본문으로 읽히는 크기다. */ #modal-deck-info .deck-rules-section { font-size: 25px; } #deck-cards-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2px; max-height: none; overflow-y: visible; padding: 4px 15px; } /* RULES 팝업 전용 카드 크기 축소 — 하단 GAME RULES 문구를 위한 공간 확보 및 덱 간 크기 통일. #deck-cards-list로 범위를 한정해 인게임 HUD의 .target-mini-card(목표 카드 표시)에는 영향 없음. 내부 텍스트는 JS에서 인라인 font-size로 지정되므로 !important로 덮어씀 */ /* 실제 카드(.card-unit)로 그려지는 일반 수트. HUD 목표 카드(50×72)와 같은 크기·같은 코너 조판을 쓴다 — #in-game-screen .target-mini-card 블록과 짝이다. */ #deck-cards-list .target-mini-card.card-unit { width: 50px; height: 72px; border-radius: 8px; font-size: 14px; display: block; flex: 0 0 50px; padding: 0; box-shadow: 0 2px 0 rgba(120, 90, 55, 0.16), 0 4px 10px rgba(90, 60, 35, 0.14); } #deck-cards-list .target-mini-card.card-unit .card-corner.top-left { top: 3px; left: 4px; font-size: 0.72rem; line-height: 0.9; } #deck-cards-list .target-mini-card.card-unit .card-corner span:last-child { font-size: 0.92rem; } /* 모노 덱 카드는 중앙에 숫자를 글자로 그린다(.mono-num). 그 크기는 .card-suit-center의 2.3rem을 물려받는데, 그건 손패 카드(104×150) 기준이라 50×72에서는 카드를 넘칠 만큼 컸다(2026-09-03 사용자 지적). 카드 폭 비율(50/104)만큼 줄인다. */ #deck-cards-list .target-mini-card.card-unit .card-suit-center { font-size: 1.1rem; } /* 특수 카드(K·B·M·X·↑ 등)는 전용 아이콘 마크업이라 옛 칩 구조를 그대로 쓴다. 실제 카드로 못 바꾸는 자리이므로 크기 규칙을 따로 남긴다. */ #deck-cards-list .target-mini-card:not(.card-unit) { width: 40px; height: 56px; } /* [조정] 26px+2px 간격이면 13장(예: 베이스 덱 1~13)이 한 줄에 못 들어가 13번째 카드만 다음 줄로 밀려나 어색했음. 카드 폭 24px + 간격 1px로 줄여 13장이 한 줄에 딱 들어가도록 함 */ #deck-cards-list .deck-info-cards-wrapper { gap: 1px !important; } #deck-cards-list .target-mini-card:not(.card-unit) > div:first-child { font-size: 17px !important; } #deck-cards-list .target-mini-card:not(.card-unit) > div:last-child { font-size: 14px !important; } #deck-cards-list .target-mini-card.special-card > div:last-child { height: 28px !important; } #deck-cards-list .target-mini-card.special-card .special-icon { width: 25px !important; height: 25px !important; } /* --- 콘텐츠 해금 알림 모달 스타일 --- */ .unlock-box { max-width: 480px; width: 90%; animation: zoom-in-modal 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .unlock-body { display: flex; flex-direction: column; gap: 15px; padding: 10px 5px; } .unlock-item { background: var(--surface-sunk); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 15px; display: flex; align-items: center; gap: 15px; box-shadow: 0 4px 10px var(--shadow-dark-02); animation: slide-up-item 0.5s ease both; } .unlock-item-icon { font-size: 2.2rem; filter: none; } .unlock-item-info { display: flex; flex-direction: column; text-align: left; } .unlock-item-title { font-size: 1.15rem; font-weight: 900; color: var(--accent-warn); text-shadow: none; word-break: keep-all; overflow-wrap: break-word; } .unlock-item-desc { font-size: 0.85rem; color: var(--text-dim); margin-top: 3px; line-height: 1.3; word-break: keep-all; overflow-wrap: break-word; } @keyframes zoom-in-modal { 0% { transform: scale(0.9) translateY(20px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } } @keyframes slide-up-item { 0% { transform: translateY(15px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } /* --- 카드 패스 연출: 받은 카드 하이라이트 --- */ .card-unit.received-highlight { animation: received-pulse 0.5s ease-in-out infinite alternate, received-bounce 0.4s ease-out 2; border: 2px solid var(--accent-info) !important; box-shadow: 0 0 15px var(--accent-info), 0 0 5px var(--accent-info-alt-a50) !important; z-index: 10; } @keyframes received-pulse { 0% { transform: scale(1.0); } 100% { transform: scale(1.08); box-shadow: 0 0 25px var(--accent-info), 0 0 10px var(--accent-info-alt-a70) !important; } } @keyframes received-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } /* ========================================================================== Rank Game UI Layout Styles ========================================================================== */ .rank-game-container { flex: 1; display: flex; flex-direction: column; gap: 15px; height: 100%; overflow: hidden; } .rank-game-banner { background: linear-gradient(135deg, var(--accent-info-a10) 0%, var(--accent-primary-a3) 100%); border: 1px solid var(--accent-info-a25); border-radius: 12px; padding: 12px 18px; box-shadow: 0 4px 15px var(--shadow-dark-02); } .rank-game-banner p { font-size: 0.85rem; color: var(--text-primary); margin: 0; line-height: 1.5; } .rank-unlock-hint { font-size: 0.78rem; color: var(--text-dim); display: inline-block; margin-top: 4px; } .rank-decks-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); gap: 12px; flex: 1; overflow-y: auto; padding: 2px; } .rank-deck-card { background: var(--surface-white-003) !important; border: 1px solid var(--rule-white-006) !important; border-radius: 12px !important; padding: 10px 4px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: space-between !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; position: relative !important; overflow: hidden !important; min-height: 110px !important; box-shadow: 0 4px 8px var(--shadow-dark-02) !important; } .rank-deck-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: transparent; transition: background 0.3s ease; } .rank-deck-card.unlocked:hover { transform: translateY(-4px); border-color: var(--accent-info); box-shadow: var(--shadow-dark-03); background: var(--surface-white-006); } .rank-deck-card.unlocked:hover::before { background: var(--accent-info); box-shadow: var(--shadow-dark-03); } .rank-deck-card.locked { opacity: 0.55; background: var(--surface-sunk); border-color: var(--state-danger-glow-a10); } .rank-deck-card.locked::before { background: var(--state-danger-glow-a15); } .rank-deck-name { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); text-align: center; margin-bottom: 6px; letter-spacing: 0.5px; text-shadow: none; } .rank-deck-card.unlocked .rank-deck-name { color: var(--text-primary); } .rank-deck-action { width: 100%; display: flex; justify-content: center; } .btn-rank-play { width: 85%; padding: 6px 10px; font-size: 0.8rem; font-weight: 700; border-radius: 6px; background: linear-gradient(135deg, var(--cozy-cta-primary-hover), var(--cozy-cta-primary-shadow)); border: 1px solid var(--cozy-cta-primary-shadow); color: var(--cozy-cta-text); cursor: pointer; box-shadow: var(--shadow-dark-03); transition: all 0.2s ease; text-align: center; } .btn-rank-play:hover { transform: scale(1.05); box-shadow: var(--shadow-dark-03); background: linear-gradient(135deg, var(--btn-rank-play-hover-start), var(--btn-rank-play-hover-end)); } .btn-rank-locked { width: 85%; padding: 6px 10px; font-size: 0.8rem; border-radius: 6px; background: var(--surface-white-004) !important; border: 1px solid var(--rule-white-008) !important; color: var(--text-white-035) !important; cursor: not-allowed; text-align: center; } .btn-special-back { margin-top: auto; width: 100%; padding: 12px; font-weight: 700; } .rank-deck-stats { font-size: 0.68rem !important; color: #a0c4de !important; display: flex !important; flex-direction: column !important; gap: 4px !important; align-items: center !important; justify-content: center !important; margin-bottom: 8px !important; width: 100% !important; text-align: center !important; } /* 긴 번역(이탈리아어/스페인어 등)에서 점수·순위 숫자가 잘리지 않도록 한 줄 강제 대신 줄바꿈 허용 */ .rank-deck-stats div { text-align: center !important; width: 100% !important; } .rank-deck-stats .rank-stat-val { color: var(--text-primary) !important; font-weight: 700 !important; margin-left: 2px !important; } /* 15. 10종 덱 고유 카드 뒷면 디자인 및 로비 배경 패턴 */ .card-back-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.12; /* 은은하게 뒷배경으로 노출 */ z-index: 0; pointer-events: none; border-radius: 6px; transition: background-image 0.3s ease, background 0.3s ease; } /* 10가지 덱 고유 카드 뒷면 — Cozy Day (2026-08-27) * * 옛 디자인은 10종이 전부 어두운 대각선 줄무늬라 크림 바탕 위에서 색으로만 구분됐고, * 팔레트도 이전 네온·다크 방향이었다. 덱마다 그 덱이 실제로 가진 것(수트·특수 카드· * 수의 사다리)에서 뽑은 모티프 하나를 가운데에 둔다. * * 그림은 scratch/_emit_card_back_css.js가 뽑는다. 시안(_gen_card_backs_final.js)과 * 같은 모티프 코드를 쓰므로 승인된 PNG와 어긋날 수 없다. 값을 손으로 고치지 말고 * 그 스크립트를 고쳐서 다시 뽑을 것. * * .deck-back-*는 빈 div에 붙어서 자식을 못 만든다 — 그래서 data URI SVG 배경이다. * viewBox 88x128 + preserveAspectRatio="none"이라 어느 크기에서도 카드 비율을 따른다. */ /* Base — ♠ 하나 — 카드의 기본 문양이자 이 덱의 트럼프 */ .deck-back-base-deck { background-color: #4a7c86 !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2088%20128%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20x%3D%225.5%22%20y%3D%225.5%22%20width%3D%2277%22%20height%3D%22117%22%20rx%3D%224%22%20fill%3D%22none%22%20stroke%3D%22rgba%28246%2C236%2C221%2C0.30%29%22%20stroke-width%3D%221.4%22%2F%3E%3Ctext%20x%3D%2244%22%20y%3D%2262%22%20font-size%3D%2250%22%20fill%3D%22%23f6ecdd%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%20font-family%3D%22Segoe%20UI%20Symbol%2C%20Segoe%20UI%2C%20DejaVu%20Sans%2C%20sans-serif%22%3E%E2%99%A0%3C%2Ftext%3E%3C%2Fsvg%3E") !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; border-color: rgba(246,236,221,0.42) !important; } /* Space — ★ 수트 하나를 더하는 덱 — 큰 별에 궤도선 */ .deck-back-space-deck { background-color: #5a6aa5 !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2088%20128%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20x%3D%225.5%22%20y%3D%225.5%22%20width%3D%2277%22%20height%3D%22117%22%20rx%3D%224%22%20fill%3D%22none%22%20stroke%3D%22rgba%28246%2C236%2C221%2C0.30%29%22%20stroke-width%3D%221.4%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2262%22%20rx%3D%2234%22%20ry%3D%2213%22%20fill%3D%22none%22%20stroke%3D%22rgba%28246%2C236%2C221%2C0.55%29%22%20stroke-width%3D%222%22%20transform%3D%22rotate%28-22%2044%2062%29%22%2F%3E%3Ctext%20x%3D%2244%22%20y%3D%2262.5%22%20font-size%3D%2243.2%22%20fill%3D%22%23f6ecdd%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%20font-family%3D%22Segoe%20UI%20Symbol%2C%20Segoe%20UI%2C%20DejaVu%20Sans%2C%20sans-serif%22%3E%E2%98%85%3C%2Ftext%3E%3Ctext%20x%3D%2274%22%20y%3D%2250.5%22%20font-size%3D%2210.8%22%20fill%3D%22%23f6ecdd%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%20font-family%3D%22Segoe%20UI%20Symbol%2C%20Segoe%20UI%2C%20DejaVu%20Sans%2C%20sans-serif%22%3E%E2%98%85%3C%2Ftext%3E%3C%2Fsvg%3E") !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; border-color: rgba(246,236,221,0.42) !important; } /* Trio — 세 갈래 로제트 — 잎의 수가 곧 수트 수(♦♥♣) */ .deck-back-trio-deck { background-color: #6d9b63 !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2088%20128%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20x%3D%225.5%22%20y%3D%225.5%22%20width%3D%2277%22%20height%3D%22117%22%20rx%3D%224%22%20fill%3D%22none%22%20stroke%3D%22rgba%28246%2C236%2C221%2C0.30%29%22%20stroke-width%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M%2044%2062%20Q%2061%2045.36%2044%2030%20Q%2027%2045.36%2044%2062%20Z%22%20fill%3D%22rgba%28246%2C236%2C221%2C0.9%29%22%20transform%3D%22rotate%280%2044%2062%29%22%2F%3E%3Cpath%20d%3D%22M%2044%2062%20Q%2061%2045.36%2044%2030%20Q%2027%2045.36%2044%2062%20Z%22%20fill%3D%22rgba%28246%2C236%2C221%2C0.9%29%22%20transform%3D%22rotate%28120%2044%2062%29%22%2F%3E%3Cpath%20d%3D%22M%2044%2062%20Q%2061%2045.36%2044%2030%20Q%2027%2045.36%2044%2062%20Z%22%20fill%3D%22rgba%28246%2C236%2C221%2C0.9%29%22%20transform%3D%22rotate%28240%2044%2062%29%22%2F%3E%3C%2Fsvg%3E") !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; border-color: rgba(246,236,221,0.42) !important; } /* Quintet — 한 획 오각별 — 다섯 점을 한 선으로 잇는다 */ .deck-back-quintet-deck { background-color: #b8873c !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2088%20128%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20x%3D%225.5%22%20y%3D%225.5%22%20width%3D%2277%22%20height%3D%22117%22%20rx%3D%224%22%20fill%3D%22none%22%20stroke%3D%22rgba%28246%2C236%2C221%2C0.30%29%22%20stroke-width%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M%2044.00%2029.00%20L%2063.40%2088.70%20L%2012.62%2051.80%20L%2075.38%2051.80%20L%2024.60%2088.70%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23f6ecdd%22%20stroke-width%3D%223.4%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; border-color: rgba(246,236,221,0.42) !important; } /* Rainbow — 일곱 색 부채꼴 — 수트 수를 색의 수로 말한다 */ .deck-back-rainbow-deck { background-color: #67748a !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2088%20128%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20x%3D%225.5%22%20y%3D%225.5%22%20width%3D%2277%22%20height%3D%22117%22%20rx%3D%224%22%20fill%3D%22none%22%20stroke%3D%22rgba%28246%2C236%2C221%2C0.30%29%22%20stroke-width%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M%2044%2083.08%20L%2011.16%2074.28%20A%2034%2034%200%200%201%2016.64%2062.89%20Z%22%20fill%3D%22%23d9b071%22%2F%3E%3Cpath%20d%3D%22M%2044%2083.08%20L%2016.64%2062.89%20A%2034%2034%200%200%201%2025.91%2054.29%20Z%22%20fill%3D%22%23cf9a80%22%2F%3E%3Cpath%20d%3D%22M%2044%2083.08%20L%2025.91%2054.29%20A%2034%2034%200%200%201%2037.68%2049.67%20Z%22%20fill%3D%22%23c98b95%22%2F%3E%3Cpath%20d%3D%22M%2044%2083.08%20L%2037.68%2049.67%20A%2034%2034%200%200%201%2050.32%2049.67%20Z%22%20fill%3D%22%23a892bd%22%2F%3E%3Cpath%20d%3D%22M%2044%2083.08%20L%2050.32%2049.67%20A%2034%2034%200%200%201%2062.09%2054.29%20Z%22%20fill%3D%22%237f9fbc%22%2F%3E%3Cpath%20d%3D%22M%2044%2083.08%20L%2062.09%2054.29%20A%2034%2034%200%200%201%2071.36%2062.89%20Z%22%20fill%3D%22%2382b3a4%22%2F%3E%3Cpath%20d%3D%22M%2044%2083.08%20L%2071.36%2062.89%20A%2034%2034%200%200%201%2076.84%2074.28%20Z%22%20fill%3D%22%23adb98a%22%2F%3E%3C%2Fsvg%3E") !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; border-color: rgba(246,236,221,0.42) !important; } /* Magic — 반짝임 셋 — 특수 카드가 제일 많은 덱 */ .deck-back-magic-deck { background-color: #7d5a91 !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2088%20128%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20x%3D%225.5%22%20y%3D%225.5%22%20width%3D%2277%22%20height%3D%22117%22%20rx%3D%224%22%20fill%3D%22none%22%20stroke%3D%22rgba%28246%2C236%2C221%2C0.30%29%22%20stroke-width%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M%2042%2034%20Q%2047.28%2052.72%2066%2058%20Q%2047.28%2063.28%2042%2082%20Q%2036.72%2063.28%2018%2058%20Q%2036.72%2052.72%2042%2034%20Z%22%20fill%3D%22%23f6ecdd%22%20opacity%3D%221%22%2F%3E%3Cpath%20d%3D%22M%2064%2069%20Q%2066.2%2076.8%2074%2079%20Q%2066.2%2081.2%2064%2089%20Q%2061.8%2081.2%2054%2079%20Q%2061.8%2076.8%2064%2069%20Z%22%20fill%3D%22%23f6ecdd%22%20opacity%3D%220.8%22%2F%3E%3Cpath%20d%3D%22M%2022%2075%20Q%2023.54%2080.46%2029%2082%20Q%2023.54%2083.54%2022%2089%20Q%2020.46%2083.54%2015%2082%20Q%2020.46%2080.46%2022%2075%20Z%22%20fill%3D%22%23f6ecdd%22%20opacity%3D%220.65%22%2F%3E%3C%2Fsvg%3E") !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; border-color: rgba(246,236,221,0.42) !important; } /* Ocean — 파도 세 겹 */ .deck-back-ocean-deck { background-color: #2f8fa8 !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2088%20128%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20x%3D%225.5%22%20y%3D%225.5%22%20width%3D%2277%22%20height%3D%22117%22%20rx%3D%224%22%20fill%3D%22none%22%20stroke%3D%22rgba%28246%2C236%2C221%2C0.30%29%22%20stroke-width%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M%2016%2048%20q%209%20-9%2018%200%20t%2018%200%20t%2018%200%22%20fill%3D%22none%22%20stroke%3D%22%23f6ecdd%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%20opacity%3D%221%22%2F%3E%3Cpath%20d%3D%22M%2016%2063%20q%209%20-9%2018%200%20t%2018%200%20t%2018%200%22%20fill%3D%22none%22%20stroke%3D%22%23f6ecdd%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.78%22%2F%3E%3Cpath%20d%3D%22M%2016%2078%20q%209%20-9%2018%200%20t%2018%200%20t%2018%200%22%20fill%3D%22none%22%20stroke%3D%22%23f6ecdd%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.56%22%2F%3E%3C%2Fsvg%3E") !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; border-color: rgba(246,236,221,0.42) !important; } /* Duo — ♠와 ♥ 겹침 — 겹침 자체가 ×2 */ .deck-back-duo-deck { background-color: #6f8b9c !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2088%20128%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20x%3D%225.5%22%20y%3D%225.5%22%20width%3D%2277%22%20height%3D%22117%22%20rx%3D%224%22%20fill%3D%22none%22%20stroke%3D%22rgba%28246%2C236%2C221%2C0.30%29%22%20stroke-width%3D%221.4%22%2F%3E%3Ctext%20x%3D%2232%22%20y%3D%2258%22%20font-size%3D%2240%22%20fill%3D%22rgba%28246%2C236%2C221%2C0.72%29%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%20font-family%3D%22Segoe%20UI%20Symbol%2C%20Segoe%20UI%2C%20DejaVu%20Sans%2C%20sans-serif%22%3E%E2%99%A0%3C%2Ftext%3E%3Ctext%20x%3D%2256%22%20y%3D%2268.5%22%20font-size%3D%2240%22%20fill%3D%22%23f6ecdd%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%20font-family%3D%22Segoe%20UI%20Symbol%2C%20Segoe%20UI%2C%20DejaVu%20Sans%2C%20sans-serif%22%3E%E2%99%A5%3C%2Ftext%3E%3C%2Fsvg%3E") !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; border-color: rgba(246,236,221,0.42) !important; } /* Mono — 오르는 계단 — 수트 없이 1~50 한 줄 */ .deck-back-mono-deck { background-color: #74786f !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2088%20128%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20x%3D%225.5%22%20y%3D%225.5%22%20width%3D%2277%22%20height%3D%22117%22%20rx%3D%224%22%20fill%3D%22none%22%20stroke%3D%22rgba%28246%2C236%2C221%2C0.30%29%22%20stroke-width%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M%2014%2082%20h%2015%20v%20-12%20h%2015%20v%20-12%20h%2015%20v%20-12%20h%2015%22%20fill%3D%22none%22%20stroke%3D%22%23f6ecdd%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; border-color: rgba(246,236,221,0.42) !important; } /* Heart — ♥ 하나 — 타이틀 부채에도 쓰인다 */ .deck-back-heart-deck, #start-screen .title-card-fan span { background-color: #b55d73 !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2088%20128%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20x%3D%225.5%22%20y%3D%225.5%22%20width%3D%2277%22%20height%3D%22117%22%20rx%3D%224%22%20fill%3D%22none%22%20stroke%3D%22rgba%28246%2C236%2C221%2C0.30%29%22%20stroke-width%3D%221.4%22%2F%3E%3Ctext%20x%3D%2244%22%20y%3D%2262.5%22%20font-size%3D%2252%22%20fill%3D%22%23f6ecdd%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%20font-family%3D%22Segoe%20UI%20Symbol%2C%20Segoe%20UI%2C%20DejaVu%20Sans%2C%20sans-serif%22%3E%E2%99%A5%3C%2Ftext%3E%3C%2Fsvg%3E") !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; border-color: rgba(246,236,221,0.42) !important; } /* 최근 트릭 로그 모달 */ .trick-log-box { width: 90%; max-width: 720px; border: 2px solid var(--glass-border) !important; box-shadow: var(--shadow-dark-03); background: var(--glass-bg) !important; backdrop-filter: none; transition: max-width 0.3s ease; } .trick-log-box.rank-log { max-width: 880px; } .trick-log-scroll { max-height: 480px; overflow-y: auto; padding: 12px; background: var(--surface-sunk); border-radius: 8px; border: 1px solid var(--rule); transition: max-height 0.3s ease; } .trick-log-box.rank-log .trick-log-scroll { max-height: 560px; } .trick-log-item { padding: 12px; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; } .trick-log-item:last-child { border-bottom: none; } .trick-log-header { display: flex; justify-content: space-between; font-weight: 700; color: var(--accent-warn); font-size: 0.95rem; font-family: 'Nunito', sans-serif; border-bottom: 1px dashed var(--rule); padding-bottom: 4px; } .trick-log-row { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--text-primary); } .trick-log-winner { text-align: right; font-weight: 700; color: var(--accent-ok); font-size: 0.92rem; text-shadow: none; margin-top: 4px; } .trick-log-empty { text-align: center; color: var(--text-dim); font-size: 0.95rem; padding: 30px 10px; } /* 카드 패스 안내 메시지 빨간색 & 깜빡임 강조 */ .table-message.passing-alert { color: #ff3344 !important; border-color: #ff3344 !important; box-shadow: var(--shadow-dark-03); animation: passing-blink 0.8s infinite alternate !important; } @keyframes passing-blink { 0% { opacity: 0.3; box-shadow: 0 5px 15px var(--shadow-dark-05), 0 0 5px rgba(255, 51, 68, 0.2); } 100% { opacity: 1; box-shadow: 0 5px 15px var(--shadow-dark-05), 0 0 20px rgba(255, 51, 68, 0.7); } } /* 트럼프 카드는 애니메이션 없이 검정 수트로 고정 표시한다. (BUG-79: is-trump / trump-card-glow 분리) */ .card-unit.is-trump, .card-unit.trump-card-glow { color: var(--cozy-suit-spade) !important; border: 1.5px solid rgba(31, 35, 32, 0.35) !important; box-shadow: 0 4px 10px var(--shadow-dark-025) !important; } .card-unit.is-trump .card-corner span:last-child, .card-unit.is-trump .card-suit-center, .card-unit.trump-card-glow .card-corner span:last-child, .card-unit.trump-card-glow .card-suit-center { filter: none !important; text-shadow: none !important; background-image: none !important; -webkit-text-fill-color: currentColor !important; background-repeat: no-repeat !important; z-index: 1 !important; } /* 코너 수트 문양(인라인 span) 전용: position:relative는 여기서만 필요 — .card-suit-center에 적용되면 position:absolute 기반 중앙 정렬(left:50% + translate(-50%,-50%))이 깨져 심볼이 우측으로 크게 밀려남 */ .card-unit.is-trump .card-corner span:last-child, .card-unit.trump-card-glow .card-corner span:last-child { display: inline-block !important; position: relative !important; transform: translateZ(0) !important; } /* 중앙 수트 문양: Cozy Day 카드 스펙 유지 */ .card-unit.is-trump .card-suit-center, .card-unit.trump-card-glow .card-suit-center { transform: none !important; } /* 선 플레이어 표시 배지 스타일 (BUG-47/56: 시안 일치 대문자 LEAD 및 남측 좌석 우상단 배치로 YOUR TURN과의 겹침 방지) */ .lead-badge { position: absolute; top: -12px; left: 14px; right: auto; background: var(--accent-warn) !important; color: #4a3410 !important; font-family: 'Nunito', sans-serif !important; font-size: 9.5px !important; font-weight: 900 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; padding: 4px 10px !important; border-radius: 999px !important; border: 1px solid var(--rule-white-07) !important; box-shadow: 0 2px 6px rgba(120, 90, 55, 0.18), 0 0 10px var(--accent-warn) !important; z-index: 25; pointer-events: none; animation: lead-badge-pulse 1.5s infinite alternate; } #in-game-screen #player-pos-bottom .lead-badge { top: -14px; left: auto; right: 16px; } @keyframes lead-badge-pulse { from { transform: scale(1); box-shadow: 0 0 5px var(--accent-warn); } to { transform: scale(1.08); box-shadow: 0 0 15px var(--accent-warn); } } /* 랭킹 게임 준비 화면(대시보드) 탭 버튼 및 추가 디자인 */ .tab-btn-dashboard { flex: 1; padding: 8px 10px; font-size: 0.82rem; font-weight: 700; border-radius: 8px; border: 1px solid var(--rule-strong) !important; background: var(--surface-white-004) !important; color: #b0c4de !important; cursor: pointer; transition: all 0.2s ease; text-align: center; box-shadow: 0 2px 6px var(--shadow-dark-015); } /* 랭크 대시보드의 시작 버튼. 값은 예전 인라인 스타일에서 그대로 옮겨왔다 — 아래 .has-sublabel이 세로 여백을 덮어써야 하는데, 인라인 스타일은 CSS가 못 이긴다. */ .btn-rank-start { margin-left: 10px; padding: 8px 24px; font-size: 0.95rem; font-weight: 700; border-radius: 8px; flex: 1.2; } /* 부제(데모 잔여 횟수)가 붙은 상태. 부제 없이 "시작"만 있을 때와 높이가 **똑같아야** 한다. 예전에는 한 줄짜리 "시작 (1/3회 남음)"을 그대로 넣어 버튼 안에서 줄바꿈이 일어났고, 38px이던 버튼이 60px로 늘어 정식판과 데모판의 하단 바 높이가 달라졌다. 부제를 absolute로 흐름에서 빼는 이유 — 흐름 안에 두면 세로 여백을 아무리 줄여도 두 줄만큼 높이가 늘어난다. 흐름 밖에 두면 버튼 높이는 주제 한 줄로만 정해지므로 형제 버튼(.tab-btn-dashboard)과 항상 같다. 값 조정이 아니라 구조로 보장하는 것이다. */ .btn-rank-start.has-sublabel { position: relative; } /* 주제는 부제 자리만큼 위로 올린다. 실제로 움직이는 건 이 한 줄뿐이다. */ .btn-rank-start.has-sublabel .btn-mainlabel { transform: translateY(-5px); } .btn-rank-start .btn-sublabel { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 0.58rem; font-weight: 600; line-height: 1; letter-spacing: 0; opacity: 0.85; white-space: nowrap; pointer-events: none; } .tab-btn-dashboard:hover { background: var(--surface-white-009) !important; color: var(--text-primary) !important; border-color: var(--rule-white-03) !important; } .tab-btn-dashboard.active { background: linear-gradient(135deg, var(--accent-info) 0%, var(--accent-info-shade) 100%) !important; color: var(--text-primary) !important; font-weight: 800; border-color: var(--accent-info) !important; box-shadow: var(--shadow-dark-03); } .review-round-header { transition: background-color 0.15s ease; } .review-round-header:hover { background-color: var(--surface-white-005) !important; } /* 우상단 옵션 영역 디자인 */ .top-options-container { position: absolute; top: 20px; right: 20px; display: flex; gap: 12px; z-index: 100; } .option-round-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule-strong) !important; background: var(--surface-white-005) !important; color: var(--text-primary) !important; font-size: 1.15rem; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); transition: all 0.2s ease; box-shadow: 0 4px 10px var(--shadow-dark-03); } .option-round-btn:hover { background: var(--surface-white-015) !important; border-color: var(--rule-white-03) !important; transform: scale(1.05); } .profile-box { transition: all 0.2s ease; } .profile-box:hover { background: var(--surface-white-008) !important; border-color: var(--rule-white-025) !important; transform: translateY(-2px); box-shadow: 0 4px 12px var(--shadow-dark-02); } /* ========================================================================== 19. 인게임 테이블 내부 튜토리얼 패널 (In-Table Tutorial Panel) ========================================================================== */ .table-tutorial-panel { position: absolute; top: 63%; left: 50%; transform: translate(-50%, -50%); z-index: 300; width: 820px; /* 930px 펠트 타원 내부에 꼭 맞게 확장 */ height: 440px; /* 472px 펠트 높이에 꼭 맞게 확장 */ box-sizing: border-box; pointer-events: none; } .table-tutorial-panel.show { animation: tutorial-panel-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; } /* 카드 예시(.tutorial-visual-cards-row)가 포함된 덱 소개 튜토리얼(Space/Trio 등)도 동일 820x440 크기 유지 */ .table-tutorial-panel:has(.tutorial-visual-cards-row) { top: 63%; transform: translate(-50%, -50%); height: 440px; } .table-tutorial-panel:has(.tutorial-visual-cards-row) .tutorial-visual-cards-row { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .table-tutorial-panel:has(.tutorial-visual-cards-row) .tutorial-panel-body { margin-bottom: 24px; } .table-tutorial-panel:has(.tutorial-visual-cards-row).show { animation-name: tutorial-panel-pop; } @keyframes tutorial-panel-pop { 0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } @keyframes tutorial-panel-pop-fixed-top { 0% { transform: translateX(-50%) scale(0.9); opacity: 0; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } } .tutorial-panel-box { position: relative; /* 절대 좌표 기준선 설정 */ background: transparent; /* 뒷배경 박스 투명화 */ border: none; /* 테두리 제거 */ padding: 10px; box-shadow: none; /* 그림자 제거 */ backdrop-filter: none; /* 블러 필터 제거 */ display: flex; flex-direction: column; height: 100%; /* 전체 높이 채우기 */ box-sizing: border-box; gap: 12px; } .tutorial-panel-title { position: absolute; top: 20px; /* 펠트 최상단 위치 */ left: 50%; transform: translateX(-50%); width: max-content; max-width: 760px; margin: 0; font-size: 1.25rem; font-weight: 900; color: var(--text-info); text-shadow: none; letter-spacing: 2px; border-bottom: 1px solid var(--accent-info-a20); padding-bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; z-index: 10; white-space: nowrap; } .tutorial-panel-body { color: var(--text-primary); text-align: center; line-height: 1.55; font-size: 1.05rem; font-weight: 800; margin-top: auto; /* 하단으로 밀기 */ margin-bottom: 24px; /* 펠트 하단 여백 확보 */ display: flex; flex-direction: column; justify-content: flex-end; text-shadow: none; /* BUG-75: 크림 펠트 위 어두운 잔재 그림자 제거 */ } /* BUG-80: 문구를 펠트 가장자리로 붙이면서 낸 카드 위를 지나게 됐다. z는 문제없지만 (패널 300 > 카드 12) 카드 하단 색 띠가 거의 검정이라 그 위를 지나는 글자가 사라진다. 글자 뒤에만 크림 띠를 깔아 어디를 지나도 읽히게 한다. 카드를 숨기지 않는 것은 문구가 카드를 가리키는 단계("이렇게 Harry 플레이어가 1승을 하고…")가 있기 때문이다. 폭을 내용에 맞추는 것은 align-self:center와 width:max-content가 이미 해 준다 — 펠트를 가로지르는 띠가 되면 테이블이 잘려 보인다. 펠트 하단의 트릭 문구(.table-message)도 같은 처리가 필요한데, 그쪽은 26차 규칙이 background를 !important로 잡고 있어 여기서 덮지 못한다. 그 규칙 안에서 직접 깐다. */ #tutorial-step-content, .tutorial-panel-title { background: linear-gradient(90deg, transparent 0%, var(--tut-text-scrim) 10%, var(--tut-text-scrim) 90%, transparent 100%); padding: 3px 26px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } #tutorial-step-content { margin-bottom: 0px; /* 텍스트에
이 없으면 테이블 폭을 넘어가더라도 자동 줄바꿈하지 않고 한 줄로 출력. 줄바꿈은 오직 문구 안에 명시적으로 넣은
로만 제어함 */ white-space: nowrap; /* text-align:center는 한 줄이 박스보다 넓어지면 중앙 정렬이 무시되고 좌측 정렬된 것처럼 오른쪽으로만 삐져나가는 문제가 있음. align-self:center로 박스 자체를 내용 너비에 맞춰 줄여서 중앙에 고정하면, 폭을 넘는 줄도 항상 테이블 중심 기준으로 좌우 대칭으로 넘치게 됨 */ align-self: center; } #tutorial-visual-area { display: none !important; /* 상황 설명 영역 완전히 제거 */ } .tutorial-panel-actions { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 5px; border-top: 1px solid var(--rule-strong); padding-top: 10px; } #tutorial-page-indicator { font-size: 0.82rem; color: var(--text-accent); font-family: monospace; font-weight: bold; text-shadow: 1px 1px 2px var(--shadow-dark-08); } .tutorial-panel-buttons { display: flex; gap: 8px; } .btn-small-padding { padding: 5px 12px !important; font-size: 0.8rem !important; height: auto !important; min-height: auto !important; } .tutorial-actions-box { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 170; display: flex; align-items: center; justify-content: center; background: var(--accent-info-a12); border: 2px dashed var(--accent-info); border-radius: 12px; padding: 6px 10px; min-width: 100px; gap: 6px; animation: blink-blue-border 1.5s infinite alternate; } @keyframes blink-blue-border { 0% { border-color: var(--accent-info-a40); box-shadow: 0 0 5px var(--accent-info-a10); } 100% { border-color: var(--accent-info); box-shadow: 0 0 15px var(--accent-info-a30); } } /* Level 2 Tutorial Highlights */ .tutorial-target-highlight { animation: tutorial-pulse 1.2s infinite ease-in-out !important; position: relative; z-index: 10001 !important; /* Make it pop above overlays */ box-shadow: 0 0 20px var(--accent-ok), inset 0 0 10px var(--accent-ok) !important; border-color: var(--accent-ok) !important; } @keyframes tutorial-pulse { 0% { transform: scale(1); box-shadow: 0 0 12px var(--accent-ok), inset 0 0 6px var(--accent-ok); } 50% { transform: scale(1.08); box-shadow: 0 0 30px var(--accent-ok), inset 0 0 18px var(--accent-ok); } 100% { transform: scale(1); box-shadow: 0 0 12px var(--accent-ok), inset 0 0 6px var(--accent-ok); } } /* Level 3 Tutorial Highlights (Avoid) */ .tutorial-target-highlight-avoid { animation: tutorial-pulse-avoid 1.2s infinite ease-in-out !important; position: relative; z-index: 10001 !important; /* Make it pop above overlays */ box-shadow: 0 0 20px var(--state-danger-glow), inset 0 0 10px var(--state-danger-glow) !important; border-color: var(--state-danger) !important; border-style: solid !important; border-width: 3px !important; } @keyframes tutorial-pulse-avoid { 0% { transform: scale(1); box-shadow: 0 0 12px var(--state-danger-glow), inset 0 0 6px var(--state-danger-glow); } 50% { transform: scale(1.08); box-shadow: 0 0 30px var(--state-danger-glow), inset 0 0 18px var(--state-danger-glow); } 100% { transform: scale(1); box-shadow: 0 0 12px var(--state-danger-glow), inset 0 0 6px var(--state-danger-glow); } } /* Level 4 Tutorial Highlights (Yellow) */ .tutorial-target-highlight-yellow { animation: tutorial-pulse-yellow 1.2s infinite ease-in-out !important; position: relative; z-index: 10001 !important; /* Make it pop above overlays */ box-shadow: 0 0 20px var(--accent-warn), inset 0 0 10px var(--accent-warn) !important; border-color: var(--accent-warn) !important; border-style: solid !important; border-width: 3px !important; } @keyframes tutorial-pulse-yellow { 0% { transform: scale(1); box-shadow: 0 0 12px var(--accent-warn), inset 0 0 6px var(--accent-warn); } 50% { transform: scale(1.08); box-shadow: 0 0 30px var(--accent-warn), inset 0 0 18px var(--accent-warn); } 100% { transform: scale(1); box-shadow: 0 0 12px var(--accent-warn), inset 0 0 6px var(--accent-warn); } } /* 플레이어 상태창(player-area) 하이라이트 — position: absolute 유지를 위해 position 속성은 건드리지 않음 */ .tutorial-npc-highlight { animation: tutorial-pulse-yellow 1.2s infinite ease-in-out !important; z-index: 10001 !important; box-shadow: 0 0 20px var(--accent-warn), inset 0 0 10px var(--accent-warn) !important; border-color: var(--accent-warn) !important; border-style: solid !important; border-width: 3px !important; } /* 카드는 테이블(펠트) 정중앙에 절대 위치로 배치 — 인게임 카드와 동일한 기본 .card-unit 크기/스타일을 그대로 사용 */ .tutorial-visual-cards-row { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 10px; justify-content: center; align-items: center; white-space: normal; /* 상위 #tutorial-step-content의 nowrap이 카드 내부 텍스트에 상속되지 않도록 방지 */ } /* 예시 카드를 손패·낸 카드와 같은 104x150으로 키운다(2026-09-02 사용자 지정). 기본 .card-unit 크기(65x93)는 480x280 테이블 시절 값이라 930x472 펠트에서는 설명하려는 카드가 정작 실제로 플레이할 카드보다 한참 작았다. 폭 기준은 카드가 가장 많은 레인보우 덱(7장)이다 — 7x104 + 6x10 = 788px로 튜토리얼 패널(820px) 안에 좌우 16px씩 남기고 들어간다. 내부 비율은 낸 카드 규칙을 그대로 가져온다. 따로 잡으면 같은 크기 카드가 튜토리얼과 테이블에서 다르게 보이고 수트/숫자 1.28 비율(BUG-57)도 어긋난다. */ .tutorial-visual-cards-row .card-unit { width: 104px; height: 150px; border-radius: 12px; cursor: default; pointer-events: none; box-shadow: none !important; /* .tutorial-panel-body의 text-shadow가 상속되어 카드 안 숫자/문양에 그림자가 겹쳐 보이는 문제 방지 */ text-shadow: none; } .tutorial-visual-cards-row .card-corner.top-left { font-size: 1.35rem; top: 6px; left: 9px; } .tutorial-visual-cards-row .card-corner span:last-child { font-size: 1.58rem; } .tutorial-visual-cards-row .card-suit-center { font-size: 3.2rem; } /* Stage 5-1: 비딩 UI(테이블 중앙)와 함께 표시되는 튜토리얼 텍스트. 제목은 테이블 상단(기본 위치 그대로), 본문은 테이블 하단에 별도로 배치하여 가운데의 비딩 UI(숫자/확정 버튼)와 겹치지 않도록 함. */ /* 지오메트리는 기본 패널(820x440, top 63%)을 그대로 물려받는다. 종전에는 여기서 420x280 · top calc(50%+75px)로 덮어써서 — BUG-81 이전의 옛 테이블 값이다 — 레벨 5만 제목이 35px 내려가고 본문이 12px 올라가 다른 튜토리얼과 안 맞았다 (2026-09-02 실측: 제목 top 94 vs 59, 본문 bottom 356 vs 403). 이 배치가 실제로 해야 할 일은 "본문을 아래로 내려 가운데의 비딩 UI를 비우는 것" 하나뿐이므로 그것만 남긴다. */ .table-tutorial-panel.stage51-bottom-layout { z-index: 260; pointer-events: none !important; /* 비딩 UI 클릭이 이 패널을 통과해 전달되도록 */ } /* 본문을 다른 튜토리얼과 같은 자리(펠트 기준 아래쪽)에 고정한다. 기본 배치는 flex 흐름으로 내려오는데, 여기서는 가운데를 비딩 UI에 내줘야 해서 절대 좌표로 앉힌다. */ .table-tutorial-panel.stage51-bottom-layout .tutorial-panel-body { position: absolute; left: 50%; bottom: 37px; transform: translateX(-50%); width: 760px; margin: 0; } .table-tutorial-panel.stage51-bottom-layout .tutorial-panel-actions { display: none !important; } /* 튜토리얼 버튼(Start/다음)이 결과 버튼보다 작아 커진 테이블에서 눈에 안 띄었다(BUG-84). 같은 자리에 서는 .result-actions-box .btn(16px 40px / 1.25rem / min-width 180px)과 같은 크기로 맞춘다. */ #in-game-screen .tutorial-actions-box .btn, #in-game-screen .tutorial-panel-actions .btn { padding: 16px 40px; font-size: 1.25rem; font-weight: 700; min-width: 180px; letter-spacing: 2px; } /* 튜토리얼 패널 내부에 위치할 버튼 영역 스타일 */ .tutorial-panel-actions { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: auto; padding-bottom: 12px; z-index: 20; } /* Language Select Modal styling */ .lang-grid-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; margin-bottom: 20px; padding: 10px 0; } .lang-opt-btn { width: 100%; min-width: 0; /* 그리드 트랙이 nowrap 텍스트의 최소 콘텐츠 폭까지 넓어지며 모달 밖으로 밀려나는 것 방지 */ padding: 10px 6px; font-size: 0.82rem; font-weight: 800; border-radius: 12px; border: 2px solid var(--rule-strong) !important; background: var(--surface-white-003) !important; color: var(--text-primary) !important; cursor: pointer; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 초협소 화면 등 만일의 경우에도 줄바꿈 대신 말줄임표로 대체 */ transition: all 0.2s ease; /* text-shadow: 0 0 5px 를 걷었다(2026-09-03 사용자 지적). 다크 배경에서 글자를 띄우던 네온 글로우인데, 크림 면 위에서는 글자 뒤에 얼룩이 낀 것처럼 보였다. */ box-sizing: border-box; } .lang-opt-btn:hover { background: var(--surface-white-008) !important; border-color: var(--rule-white-03) !important; transform: scale(1.03); } .lang-opt-btn.active { border-color: var(--accent-primary) !important; background: var(--accent-primary-a15) !important; box-shadow: var(--shadow-dark-03); } .btn-lang-toggle .lang-text-slot { font-weight: bold; font-size: 0.85rem; color: var(--text-primary); text-transform: uppercase; } /* 뷰포트 폭에 따라 4열 → 2열 → 1열로 접던 미디어 쿼리를 걷어냈다(2026-09-03). 그 규칙은 모달 폭이 「뷰포트의 95%」이던 시절 것이다. 14차 캔버스 변경(1280→1920, 커밋 9c04cd9) 이후 모달은 캔버스 좌표계의 고정 1080px이고 --app-scale로 창에 맞춰 통째로 축소된다. 즉 창을 좁혀도 모달 안의 열 폭 비율은 그대로인데, 쿼리는 창 폭만 보고 2열로 접었다 — 창이 1000px 이하이기만 하면 넓은 화면에서도 2×8이 됐다. (실측: 뷰포트 1400 → 4열 / 900 → 2열, 두 경우 모두 모달은 캔버스 1080px로 동일.) 화면이 좁아지는 문제는 --app-scale이 이미 처리하므로 여기서 또 접을 이유가 없다. */ /* RTL Language (Arabic / ar) Layout Rules */ html[dir="rtl"] { direction: rtl; text-align: right; } html[dir="rtl"] .modal-content, html[dir="rtl"] .lobby-panel, html[dir="rtl"] .hud-container { direction: rtl; } html[dir="rtl"] .toast-container { left: 20px; right: auto; } /* ========================================================================== UI-12 Cozy Day ingame structure ========================================================================== */ #in-game-screen { padding: 0; background: radial-gradient(circle at 50% 42%, rgba(255, 253, 247, 0.44), transparent 44%), var(--bg-dark); overflow: hidden; } #in-game-screen .ingame-hud { --ingame-hud-height: 82px; width: 100%; max-width: none; height: var(--ingame-hud-height); margin: 0; padding: 0 44px; border-width: 0 0 2px; border-style: solid; border-color: var(--rule); border-radius: 0; background: var(--cozy-hud-bg); box-shadow: 0 3px 12px rgba(120, 90, 55, 0.08); display: flex; align-items: center; gap: 28px; z-index: 6; } #in-game-screen .hud-left, #in-game-screen .hud-right { min-width: 250px; } #in-game-screen .hud-right { justify-content: flex-end; } #in-game-screen .hud-center { flex: 1 1 auto; gap: 18px; } #in-game-screen .goal-label { color: var(--accent-primary); font-size: 13px; font-weight: 800; letter-spacing: 0.28em; text-transform: uppercase; } #in-game-screen .goal-text { color: var(--text-primary); font-family: 'Nunito', sans-serif; font-size: 29px; font-weight: 900; letter-spacing: -0.005em; } #in-game-screen .level-badge { background: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--text-dim); font-size: 15px; font-weight: 800; letter-spacing: 0.16em; padding: 0; text-transform: uppercase; } /* 튜토리얼 상태는 HUD의 가로 흐름 안에서 레벨명보다 먼저 읽히는 작은 알약으로 표시한다. display는 syncTutorialBadge()의 인라인 표시/숨김이 제어하므로 여기서 지정하지 않는다. */ #in-game-screen .hud-tutorial-badge { position: static; flex: 0 0 auto; padding: 4px 9px 3px; border: 1px solid var(--accent-primary); border-radius: 999px; background: var(--accent-primary); color: var(--cozy-card-bg); box-shadow: 0 2px 5px var(--shadow-dark-015); font-size: 12px; font-weight: 900; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; } #in-game-screen .stage-badge { display: none; } #in-game-screen .stage-badge.rank-round-badge { display: block; background: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--accent-info); font-size: 15px; font-weight: 800; /* 바로 왼쪽의 .level-badge("RANKED GAME")와 같은 자간을 쓴다. 종전에는 여기만 0이라 한 줄 안에서 앞뒤 자간이 달라 어색했다(2026-09-02 사용자 지적). 크기·굵기·대문자 변환은 원래 같았고 자간만 어긋나 있었다. */ letter-spacing: 0.16em; padding: 0; text-transform: uppercase; } #in-game-screen .lives-indicator.mini { background: transparent; border: 0; padding: 0; gap: 8px; } #in-game-screen .lives-indicator.mini .heart-icon, #in-game-screen .lives-indicator.mini .lives-num { color: var(--brand-heart); font-size: 22px; font-weight: 900; } #in-game-screen .btn-small { min-width: 96px; min-height: 42px; border-radius: 999px; background: var(--cozy-card-bg); border: 2px solid var(--rule); color: var(--ingame-btn-ink); font-family: 'Nunito', sans-serif; font-size: 16px; font-weight: 800; padding: 10px 20px; box-shadow: 0 2px 0 rgba(120, 90, 55, 0.14); cursor: pointer; transition: all 0.2s ease; } #in-game-screen .btn-small:hover { border-color: var(--accent-primary); color: var(--accent-primary); } #in-game-screen #btn-game-quit.btn-danger.btn-small { background: var(--cozy-card-bg); border-color: var(--rule); color: var(--ingame-btn-ink); box-shadow: 0 2px 0 rgba(120, 90, 55, 0.14); } #in-game-screen #btn-game-quit.btn-danger.btn-small:hover { border-color: var(--state-danger); color: var(--state-danger); } #in-game-screen .target-mini-card { width: 50px; height: 72px; border-radius: 8px; font-size: 14px; display: block; flex: 0 0 50px; padding: 0; box-shadow: 0 2px 0 rgba(120, 90, 55, 0.16), 0 4px 10px rgba(90, 60, 35, 0.14); } #in-game-screen .target-mini-card .card-corner.top-left { top: 3px; left: 4px; font-size: 0.72rem; line-height: 0.9; } #in-game-screen .target-mini-card .card-corner span:last-child { font-size: 0.92rem; } #in-game-screen .target-mini-card .corner-suit-icon { width: 1em; height: 1em; } #in-game-screen .target-mini-card .card-suit-center { top: 30%; left: 35%; width: 54%; height: 54%; font-size: 1.55rem; } #in-game-screen .target-mini-card.dbl-digit .card-corner.top-left { font-size: 0.62rem; } #in-game-screen .game-table-container { position: absolute; top: 82px; bottom: 232px; left: 0; right: 0; width: 100%; height: 766px; max-width: none; margin: 0; overflow: hidden; } #in-game-screen .game-table { width: 100%; height: 100%; position: relative; } #in-game-screen .table-felt { position: absolute; left: 50%; top: 63%; transform: translate(-50%, -50%); width: 930px; height: 472px; border: none; border-radius: 236px; outline: 0; background: linear-gradient(180deg, var(--cozy-table-rail-top), var(--cozy-table-rail-bottom)); box-shadow: 0 14px 30px rgba(90, 60, 35, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.28); overflow: visible; z-index: 1; } #in-game-screen .table-felt::before { content: ""; position: absolute; inset: 16px; border-radius: 220px; background: linear-gradient(180deg, var(--cozy-table-inner-top), var(--cozy-table-inner-bottom)); box-shadow: inset 0 2px 6px rgba(120, 80, 40, 0.22); pointer-events: none; } #in-game-screen .table-felt::after { content: ""; position: absolute; inset: 16px; border-radius: 220px; background: repeating-linear-gradient(91deg, var(--cozy-table-grain-a08) 0 1px, transparent 1px 13px), repeating-linear-gradient(91deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 47px); opacity: 0.5; pointer-events: none; } /* 레벨 시작 스플래시 (2026-09-01 재작성) ------------------------------------------------------------------ 종전에는 크림 그라디언트 띠 + 상하 2px 괘선의 배너에 「Level 7」만 얹혀 있었다. 그 장치는 Cozy Day 어디에도 없다 — 펠트 위 오버레이는 결과 패널·튜토리얼 패널· 비딩 패널까지 전부 상자를 걷어낸 상태다(각 규칙의 주석 참고). 빈 펠트 한가운데 상자 하나가 뜨니 다른 게임의 타이틀 카드처럼 읽혔다. 그래서 같은 무박스 문법으로 옮기고, 900ms를 눈 앞에 잡아 두는 값을 하나 더 준다 — 눈썹(레벨 번호) 아래에 이번 레벨의 목표를 얹었다. 번호만 띄우면 HUD 왼쪽의 「LEVEL 7」을 크게 반복하는 것뿐이다. */ #in-game-screen .level-start-splash { position: absolute; inset: 16px; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; opacity: 0; /* 튀어오르는 scale 대신 살짝 떠오르는 페이드. Cozy Day는 과장된 모션을 쓰지 않는다. */ transform: translateY(8px); transition: opacity 0.22s ease, transform 0.22s ease; } #in-game-screen .level-start-splash.visible { opacity: 1; transform: translateY(0); } /* 눈썹 — HUD의 .goal-label 과 같은 소형 라벨 문법. 20px 800이라 큰 글자 기준(AA 3:1)에서 나무 바닥 대비 3.5:1로 통과한다. */ #in-game-screen .level-start-splash-text { padding: 0; border: none; background: none; box-shadow: none; text-shadow: none; font-family: 'Nunito', sans-serif; font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: 0.28em; text-transform: uppercase; text-align: center; color: var(--accent-primary); white-space: nowrap; } /* 본문 — 이번 레벨의 목표. 결과 패널처럼 나무 위에 그냥 얹는다. HUD와 같은 stageShortObjectiveText()를 쓴다. 같은 미션을 두 문장으로 부르지 않기 위해서다. */ #in-game-screen .level-start-splash-goal { font-family: 'Nunito', sans-serif; font-size: 40px; font-weight: 900; line-height: 1.25; color: var(--text-primary); text-align: center; /* 16개 언어 중 독일어·러시아어가 길다. 펠트 안에서 접히게 둔다. */ max-width: 760px; white-space: normal; text-shadow: none; } #in-game-screen .played-cards { position: relative; z-index: 2; } /* 트릭 결과 문구 (BUG-63: 시안 일치 박스 제거, 펠트 하단 가운데 텍스트 배치) */ #in-game-screen .table-message:not(.tutorial-repositioned) { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 15; /* 시안대로 박스는 걷되(테두리·그림자 없음), 글자 뒤에만 크림을 깐다. 낸 카드가 커지면서 이 문구가 카드 위를 지나는데 카드 하단 색 띠가 거의 검정이라 #5c3e1e 글자가 사라진다(BUG-80). 다만 라운드 사각형으로 깔았더니 말풍선처럼 읽혀서 (BUG-91) 좌우로 사라지는 띠로 바꿨다 — 모서리와 경계가 없으면 배경이 아니라 글자에 얹힌 빛처럼 보인다. */ background: linear-gradient(90deg, transparent 0%, var(--tut-text-scrim) 10%, var(--tut-text-scrim) 90%, transparent 100%) !important; border: none !important; box-shadow: none !important; padding: 3px 28px; border-radius: 0; font-family: 'Nunito', sans-serif; font-size: 16px; font-weight: 900; letter-spacing: 0.08em; color: #5c3e1e; /* WCAG AA 6.6:1 contrast on felt #eed7b6 / #e3c49f */ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); max-width: 680px; width: max-content; text-align: center; white-space: normal; line-height: 1.35; pointer-events: none; } #in-game-screen .table-message:not(.tutorial-repositioned).visible { opacity: 1; transform: translateX(-50%) translateY(0); } #in-game-screen .player-area { min-width: 252px; padding: 12px 18px; box-sizing: border-box; background: var(--cozy-card-bg); border: 2px solid var(--rule); border-radius: 16px; box-shadow: 0 3px 0 rgba(120, 90, 55, 0.13), 0 8px 18px rgba(120, 90, 55, 0.10); overflow: visible; position: absolute; z-index: 4; } #in-game-screen .player-area::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--cozy-seat-north); border-top-left-radius: 14px; border-top-right-radius: 14px; } #in-game-screen #player-pos-left::before { background: var(--cozy-seat-west); } #in-game-screen #player-pos-bottom::before { background: var(--cozy-seat-south) !important; } #in-game-screen #player-pos-right::before { background: var(--cozy-seat-east); } #in-game-screen .player-area.active { background: var(--cozy-card-bg); border-color: var(--accent-primary); box-shadow: 0 8px 18px rgba(57, 168, 205, 0.3); } #in-game-screen .player-name { font-family: 'Nunito', sans-serif; font-size: 19px; font-weight: 800; } #in-game-screen #player-pos-bottom .player-name { font-size: 21px; font-weight: 800; } #in-game-screen .player-tricks, #in-game-screen .player-bid, #in-game-screen .player-score { color: var(--text-dim); font-size: 12px; font-weight: 800; letter-spacing: 0.5px; } #in-game-screen .player-tricks { font-family: 'Nunito', sans-serif; } #in-game-screen .player-bid { color: var(--accent-primary); } /* 트릭 점 인디케이터 (BUG-19) */ #in-game-screen .pips { display: inline-flex; align-items: center; gap: 5px; } #in-game-screen .pips span { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--rule); box-sizing: border-box; display: inline-block; flex: none; } /* 채워진 점은 시안의 --sky(#39a8cd)다. --accent-primary는 20차에서 글자 대비를 맞추려고 #216d87로 어둡게 내린 값이라 여기 쓰면 시안보다 탁해진다 — BUG-55에서 내 정보창 띠를 --cozy-seat-south로 옮긴 것과 같은 건인데 점이 빠져 있었다. 폴백에 #39a8cd가 적혀 있던 것이 원래 의도의 흔적이다. */ #in-game-screen .pips span.f { background: var(--cozy-seat-south); border-color: var(--cozy-seat-south); } /* 예측치를 넘겨 획득한 트릭은 실패 위험을 바로 읽을 수 있도록 초과분만 빨강으로 표시한다. */ #in-game-screen .pips span.f.over-bid { background: var(--state-danger); border-color: var(--state-danger); } #in-game-screen .pips em { font-family: 'Nunito', sans-serif; font-style: normal; font-size: 13px; font-weight: 800; color: var(--text-dim); margin-left: 4px; letter-spacing: 0.02em; white-space: nowrap; } #in-game-screen .pips.solo em { font-size: 14px; margin-left: 0; color: var(--text-dim); } #in-game-screen .pips.compact { gap: 2px; } #in-game-screen .pips.compact span { width: 6px; height: 6px; border-width: 1.5px; } #in-game-screen .pips.compact em { font-size: 11px; margin-left: 2px; } #in-game-screen .npc-hand-preview { position: absolute; display: flex; flex-wrap: wrap; row-gap: 6px; column-gap: 0; z-index: 4; } #in-game-screen .npc-hand-preview .card-unit, #in-game-screen #npc-hand-top .card-unit, #in-game-screen #npc-hand-left .card-unit, #in-game-screen #npc-hand-top-left .card-unit { margin-right: -23px !important; margin-left: 0 !important; margin-bottom: 0 !important; } #in-game-screen #npc-hand-right .card-unit, #in-game-screen #npc-hand-top-right .card-unit, #in-game-screen .game-table.players-5 #npc-hand-top-right .card-unit, #in-game-screen .game-table.players-5 #npc-hand-right .card-unit, #in-game-screen .game-table.players-6 #npc-hand-top-right .card-unit, #in-game-screen .game-table.players-6 #npc-hand-right .card-unit { margin-left: -23px !important; margin-right: 0 !important; margin-bottom: 0 !important; } /* 4인 기본 좌석 및 손패 좌표 (_gen_dirs3.py tops(4) - BUG-54: 시안 일치 좌석 왼쪽, 손패 오른쪽) */ #in-game-screen #player-pos-top { top: 87px; left: calc(50% - 316px); width: 252px; } #in-game-screen #npc-hand-top { top: 16px; left: calc(50% - 50px); width: 366px !important; max-width: 366px !important; } #in-game-screen #player-pos-left { top: 174px; left: 44px; width: 252px; } #in-game-screen #npc-hand-left { top: 260px; left: 44px; width: 366px !important; max-width: 366px !important; } #in-game-screen #player-pos-right { top: 174px; right: 44px; left: auto; width: 252px; } #in-game-screen #npc-hand-right { top: 260px; right: 44px; left: auto; width: 366px !important; max-width: 366px !important; justify-content: flex-end; } /* 5인 좌석 및 손패 좌표 (_gen_dirs3.py tops(5)) */ #in-game-screen .game-table.players-5 #player-pos-top-left { top: 87px !important; left: 44px !important; right: auto !important; width: 252px !important; } #in-game-screen .game-table.players-5 #npc-hand-top-left { top: 16px !important; left: 310px !important; right: auto !important; width: 268px !important; max-width: 268px !important; } #in-game-screen .game-table.players-5 #player-pos-top-right { top: 87px !important; right: 44px !important; left: auto !important; width: 252px !important; } #in-game-screen .game-table.players-5 #npc-hand-top-right { top: 16px !important; right: 310px !important; left: auto !important; width: 268px !important; max-width: 268px !important; justify-content: flex-end; } #in-game-screen .game-table.players-5 #player-pos-left { top: 333px !important; left: 44px !important; width: 252px !important; } #in-game-screen .game-table.players-5 #npc-hand-left { top: 419px !important; left: 44px !important; width: 268px !important; max-width: 268px !important; } #in-game-screen .game-table.players-5 #player-pos-right { top: 333px !important; right: 44px !important; left: auto !important; width: 252px !important; } #in-game-screen .game-table.players-5 #npc-hand-right { top: 419px !important; right: 44px !important; left: auto !important; width: 268px !important; max-width: 268px !important; justify-content: flex-end; } /* 6인 좌석 및 손패 좌표 (_gen_dirs3.py tops(6)) */ #in-game-screen .game-table.players-6 #player-pos-top-left { top: 87px !important; left: 44px !important; right: auto !important; width: 252px !important; } #in-game-screen .game-table.players-6 #npc-hand-top-left { top: 16px !important; left: 310px !important; right: auto !important; width: 219px !important; max-width: 219px !important; } #in-game-screen .game-table.players-6 #player-pos-top { top: 87px !important; left: calc(50% - 242.5px) !important; width: 252px !important; } #in-game-screen .game-table.players-6 #npc-hand-top { top: 16px !important; left: calc(50% + 23.5px) !important; width: 219px !important; max-width: 219px !important; } #in-game-screen .game-table.players-6 #player-pos-top-right { top: 87px !important; right: 44px !important; left: auto !important; width: 252px !important; } #in-game-screen .game-table.players-6 #npc-hand-top-right { top: 16px !important; right: 310px !important; left: auto !important; width: 219px !important; max-width: 219px !important; justify-content: flex-end; } #in-game-screen .game-table.players-6 #player-pos-left { top: 333px !important; left: 44px !important; width: 252px !important; } #in-game-screen .game-table.players-6 #npc-hand-left { top: 419px !important; left: 44px !important; width: 219px !important; max-width: 219px !important; } #in-game-screen .game-table.players-6 #player-pos-right { top: 333px !important; right: 44px !important; left: auto !important; width: 252px !important; } #in-game-screen .game-table.players-6 #npc-hand-right { top: 419px !important; right: 44px !important; left: auto !important; width: 219px !important; max-width: 219px !important; justify-content: flex-end; } #in-game-screen > .human-hand-container { position: absolute; left: 0; right: 0; bottom: 0; height: 232px; max-width: none; margin: 0; padding: 0 44px; display: flex; align-items: center; gap: 28px; border-width: 2px 0 0; border-style: solid; border-color: var(--rule); border-radius: 0; background: var(--cozy-hud-bg); box-shadow: 0 -3px 12px rgba(120, 90, 55, 0.08); backdrop-filter: none; z-index: 5; } #in-game-screen .hand-cards-wrapper { position: relative; left: auto; width: auto; flex: 1; transform: none; display: flex; justify-content: center; align-items: flex-end; height: 200px; padding-bottom: 24px; } #in-game-screen .hand-label { display: none; } /* 폭을 내용에 맞춘다(BUG-82). 시안 .me-chip에는 width가 없고 padding과 내용으로 폭이 정해지는데, 앱만 392px로 못박아 이름이 짧아도 늘 같은 길이였다. min-width는 점(pips) 때문에 필요하다 — 점 8개 + "3/8 트릭"이 138px이고 거기에 아바타 40 + padding 40 + gap이 붙는다. NPC 정보창과 같은 252px면 그게 들어간다. max-width는 종전 고정 폭을 그대로 상한으로 둔다(가장 긴 이름 기준). */ #in-game-screen #player-pos-bottom { width: auto; min-width: 252px; max-width: 392px; height: 76px; padding: 13px 20px; /* 시안 .me-chip은 네 변 모두 2px --rule이고 띠는 ::before 하나뿐이다. 여기 있던 border-top: 5px --accent-primary 때문에 띠가 2중으로 보였다(BUG-89). */ border: 2px solid var(--rule); border-radius: 16px; box-shadow: 0 3px 0 rgba(120, 90, 55, 0.13), 0 8px 18px rgba(120, 90, 55, 0.10); background: var(--cozy-card-bg); position: relative; overflow: visible; } #in-game-screen #player-pos-bottom.active { background: var(--cozy-card-bg); /* border-top-color: var(--accent-primary) 를 걷었다 — 그 위 ::before 띠와 겹쳐 2중 선으로 보였다(BUG-89). 활성 상태 표시는 아래 box-shadow가 맡는다. */ border-color: var(--rule); box-shadow: 0 7px 16px rgba(57, 168, 205, 0.28); } /* 2026-09-04 사용자 보고: 이 배지가 .active 없이 걸려 있어서 내 차례가 아닐 때도 "YOUR TURN"이 계속 붙어 있었다. updateActivePlayerUI()가 turnIndex===0일 때만 #player-pos-bottom에 .active를 붙이므로(위 8271 규칙과 동일 조건), 뱃지도 그 조건을 그대로 따라가게 .active를 selector에 더한다. */ #in-game-screen #player-pos-bottom.active::after { content: "YOUR TURN"; position: absolute; top: -14px; left: 16px; padding: 4px 10px; border-radius: 999px; background: var(--sun, #e8a53c); color: #4a3410; font-size: 10px; font-weight: 900; letter-spacing: 0.14em; box-shadow: 0 2px 0 rgba(120, 90, 55, 0.2); } .card-unit:not(.card-back) { isolation: isolate; overflow: hidden; background: var(--cozy-card-bg); border: 2px solid var(--rule); border-radius: 12px; color: var(--cozy-suit-spade); box-shadow: 0 2px 0 rgba(120, 90, 55, 0.16), 0 8px 18px rgba(90, 60, 35, 0.20); } .card-unit:not(.card-back)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 15%; background: currentColor; z-index: -1; } /* 완료 체크는 공통 카드 띠(::after)와 분리된 SVG로 올린다. CSS 테두리를 회전해 만든 체크는 짧은 팔과 긴 팔이 뒤집혀 보였고, 카드 띠와 같은 가상 요소를 다퉜다. */ #in-game-screen .target-mini-card .target-complete-check { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; color: var(--accent-ok); opacity: 1; filter: drop-shadow(0 1px 0 var(--cozy-card-bg)); transform: translate(-50%, -50%); transform-origin: center; z-index: 20; } #in-game-screen .target-mini-card.checked .target-complete-check { animation: hud-checkmark-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } @keyframes hud-checkmark-pop { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 55% { transform: translate(-50%, -50%) scale(1.35); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } .card-unit .card-corner.bottom-right { display: none; } .card-unit .card-corner.top-left { top: 5px; left: 7px; z-index: 2; padding: 0; font-family: 'Nunito', sans-serif; font-size: 1.15rem; font-weight: 900; } .card-unit .card-corner span:last-child { font-size: 1.35rem; display: flex; align-items: center; justify-content: center; } .card-unit .corner-suit-icon { width: 1em; height: 1em; fill: currentColor; display: block; } .card-unit .center-suit-icon, .card-unit .special-icon { width: 100%; height: 100%; fill: currentColor; display: block; } .card-unit .card-suit-center { top: 30%; left: 35%; width: 54%; height: 54%; display: flex; align-items: center; justify-content: center; margin-left: 0; font-size: 2.3rem; line-height: 1; transform: none !important; z-index: 1; } .npc-hand-preview .card-unit:not(.card-back), .npc-hand-preview .card-unit.card-back.dealing, .npc-hand-preview .card-unit.card-back.dealt-anim, .npc-hand-preview .card-unit.card-back { width: 72px; height: 104px; border-radius: 11px; margin-right: -23px; } .npc-hand-preview .card-unit .card-corner.top-left { font-size: 0.95rem; top: 4px; left: 6px; } .npc-hand-preview .card-unit .card-corner span:last-child { font-size: 1.13rem; } .npc-hand-preview .card-unit .card-suit-center { font-size: 1.9rem; } /* 테이블 위에 플레이된 카드의 위치 (BUG-60: 테이블 중심 (0,0) 기준 타원 극좌표 (205*cos θ, 96*sin θ) 공식화) */ #in-game-screen .played-card-slot { position: absolute; transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); z-index: 12; } /* 낸 카드의 자리·방향은 game.js getPlayedCardTransform()이 좌석 각도에서 유도해 인라인 transform으로 넣는다. 좌석마다 좌표를 손으로 찍으면 인원수가 바뀔 때마다 어긋나므로 CSS에서 걷어냈다(2026-08-28). 타원 반지름 205×96은 그 함수 안에 있다. */ /* 낸 카드를 손패와 같은 크기로 올린다(2026-08-28 사용자 결정). 930×472 테이블에서 92×132는 가운데가 비어 보였다. 시안(_gen_dirs3.py)은 낸 카드를 .md 72×104로 잡고 "여기가 상한 — 이보다 크면 아직 안 낸 패가 이미 낸 패보다 커진다"고 적었는데, 그 위계(낸 패 ≥ 안 낸 패)는 키워도 안 깨진다. NPC 손패는 72×104 그대로다. ⚠️ 궤도(game.js PLAYED_CARD_RX/RY)를 함께 키워야 한다. 카드만 키우면 6인의 left↔top-left가 세로로 96px밖에 안 떨어져 있어 겹친다. */ #in-game-screen .played-card-slot .card-unit { width: 104px; height: 150px; border-radius: 12px; } /* 크기가 손패와 같아졌으므로 내부 비율도 손패와 맞춘다. 따로 두면 같은 크기 카드가 테이블과 손패에서 다르게 보이고, 카드 3종의 수트/숫자 1.28 비율(BUG-57)도 어긋난다. */ #in-game-screen .played-card-slot .card-corner.top-left { font-size: 1.35rem; top: 6px; left: 9px; } /* 1.58rem은 17차가 수트 잉크를 숫자의 1.28배로 맞추며 잡은 값이다(BUG-57). 손패 규칙과 같은 값을 써야 비율이 어긋나지 않는다. */ #in-game-screen .played-card-slot .card-corner span:last-child { font-size: 1.58rem; } #in-game-screen .played-card-slot .card-suit-center { font-size: 3.2rem; } #in-game-screen .cards-hand { display: flex; justify-content: center; align-items: flex-end; height: 100%; } #in-game-screen .cards-hand .card-unit { width: 104px; height: 150px; border-radius: 12px; transform-origin: bottom center; transition: transform 0.2s ease, box-shadow 0.2s ease; } #in-game-screen .cards-hand .card-unit .card-corner.top-left { font-size: 1.35rem; top: 6px; left: 9px; } #in-game-screen .cards-hand .card-unit .card-corner span:last-child { font-size: 1.58rem; } #in-game-screen .cards-hand .card-unit .card-suit-center { font-size: 3.2rem; } #in-game-screen .cards-hand .card-unit.playable:hover { transform: translateY(-30px) scale(1.08) !important; z-index: 10 !important; box-shadow: 0 3px 0 rgba(120, 90, 55, 0.18), 0 18px 28px rgba(90, 60, 35, 0.28); } .card-unit.spade { color: var(--cozy-suit-spade-normal); /* BUG-79: 기본 스페이드 색상은 비트럼프 보라 (#7d5b9a) */ } .card-unit.spade.is-trump, .card-unit.spade.trump-card-glow { color: var(--cozy-suit-spade); /* BUG-79: 트럼프 스페이드 색상은 잉크 검정 (#202421) */ } .card-unit.heart { color: var(--cozy-suit-heart); } .card-unit.diamond { color: var(--cozy-suit-diamond); } .card-unit.club { color: var(--cozy-suit-club); } .card-unit.star { color: var(--cozy-suit-star) !important; } .card-unit.star::after { background: var(--cozy-suit-star-bar); } .card-unit.circle { color: var(--cozy-suit-circle); } .card-unit.square { color: var(--cozy-suit-square); } .card-unit.crown { color: var(--cozy-suit-crown); } .card-unit.mono { color: var(--cozy-suit-mono) !important; } .card-unit.mono::after, .card-unit.special-card::after { background: var(--cozy-suit-mono-bar); } .card-unit.special-card { color: var(--cozy-special-zero) !important; } .card-unit.special-card[data-rank="↑"], .card-unit.special-card[data-rank="U"] { color: var(--cozy-special-dragon) !important; } .card-unit.special-card[data-rank="↓"] { color: var(--cozy-special-fairy) !important; } .card-unit.special-card[data-rank="M"] { color: var(--cozy-special-magician) !important; } .card-unit.special-card[data-rank="X"] { color: var(--cozy-special-bomb) !important; } .card-unit.special-card[data-rank="←"] { color: var(--cozy-special-cloud) !important; } .card-unit.special-card[data-rank="K"] { color: var(--cozy-special-king) !important; } .card-unit.special-card[data-rank="B"], .card-unit.special-card[data-rank="B/0"] { color: var(--cozy-special-bishop) !important; } /* 트럼프 카드 하단 띠 (BUG-41/79: 일반 카드와 완전히 동일한 15% 높이 및 3-Spade 벡터 SVG 배경). :not(.card-back)로 뒷면 상태를 반드시 뺀다 — 기준 위치 규칙(.card-unit:not(.card-back)::after, 위쪽)도 같은 이유로 뒷면을 뺀다. 여기서 빼먹으면 position:absolute를 못 받은 채로 content만 생겨 카드 뒷면 위에 트럼프 잉크색 배경 + 3-Spade 아이콘이 그대로 찍혀 나온다 (2026-09-04 사용자 보고 — 딜링 애니메이션 중 카드 뒷면에 트럼프 표시가 붙어 있었다). */ .card-unit.is-trump:not(.card-back)::after, .card-unit.trump-card-glow:not(.card-back)::after { content: "" !important; height: 15% !important; display: flex; align-items: center; justify-content: center; background-color: var(--cozy-suit-spade); background-image: url('data:image/svg+xml;utf8,') !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 32px auto !important; } /* 항목 8: 못 내는 카드는 흐리게 하되 카드 자체는 불투명하게 남긴다. 수트 색이 읽혀야 이후 트릭까지 계산할 수 있다는 것이 이 항목의 출발점이다. 종전에는 카드에 opacity를 걸었다(0.68). 그런데 손패는 84px 폭 카드가 34px씩, 즉 40%가 겹쳐 있어서 카드 면이 투명해지면 뒤 카드의 테두리와 하단 색 띠가 그대로 비친다 — 트레이싱지를 겹쳐 놓은 것처럼 보인다는 지적(2026-09-11). opacity는 글자만이 아니라 카드 면 배경까지 투명하게 만들기 때문에 값을 어떻게 잡아도 피할 수 없는 부작용이다. 그래서 카드 위에 카드 면 색 막을 한 겹 덮고 그 막의 불투명도만 올린다. 카드는 계속 불투명하므로 겹쳐도 뒤가 비치지 않는다. "흐려 보인다"는 결과는 같고 원인만 다르다. 흰색(#fff)이 아니라 --cozy-card-bg를 쓰는 이유는, 순백을 덮으면 흐려진 카드가 멀쩡한 카드보다 오히려 밝아져 옅은 후광처럼 보이기 때문이다. ::after는 카드 하단 색 띠가 이미 쓰고 있어(.card-unit:not(.card-back)::after) ::before를 쓴다. z-index 3은 카드 자식들(코너 2 · 중앙 기호 1) 위다. :not(.card-back)은 그 띠 규칙과 같은 이유다 — 뒷면 상태에서 position을 못 받은 채 content만 생기면 뒷면 위에 막이 그대로 찍힌다. inset:0은 테두리 안쪽부터라 2px 테두리는 원래 색으로 남는다. 일부러 덮지 않는다 — 겹친 카드끼리 경계가 살아서 오히려 구분에 도움이 된다. 목표 카드는 제외한다. 그쪽은 카드 면을 0.95로 거의 살려 두고 코너·중앙 기호만 죽여 목표 표시를 돋보이게 하는 별도 규칙이 위에 있다. 거의 불투명해서 애초에 비쳐 보일 일도 없다. .special-card·.mono를 따로 적지 않아도 된다. 그 변종들도 전부 .card-unit이고, 이제 감쇄가 opacity 경쟁이 아니라 막 한 겹이라 선택자를 나눌 이유가 사라졌다. */ .card-unit:not(.card-back)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--cozy-card-bg); opacity: 0; pointer-events: none; z-index: 3; transition: opacity 0.18s ease; } .card-unit.unplayable:not(.target-card):not(.target-card-acquire):not(.target-card-avoid)::before { opacity: 0.5; } /* ======================================================================== 2차 회차 계약 클래스: 프로필 · 덱 · 튜토리얼 어포던스 ======================================================================== */ .profile-box-avatar { width: 26px; height: 26px; flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--rule-strong); border-radius: 50%; background: var(--surface-sunk); box-shadow: inset 0 1px 2px var(--shadow-dark-015); } .profile-box-avatar > svg, .profile-box-avatar > img { width: 100%; height: 100%; display: block; } .profile-box.is-button { cursor: pointer; border-color: var(--accent-primary); box-shadow: 0 0 0 1px var(--accent-primary-cozy-a45), 0 3px 8px var(--shadow-dark-015); } #stage-screen .profile-box.is-button { border-color: var(--accent-primary); box-shadow: 0 0 0 1px var(--accent-primary-cozy-a45), 0 3px 8px var(--shadow-dark-015); } .avatar-editable { position: relative; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; } .avatar-editable::after { content: "✎"; position: absolute; right: 0; bottom: 0; width: 15px; height: 15px; display: grid; place-items: center; border: 1px solid var(--cozy-card-bg); border-radius: 50%; background: var(--accent-primary); color: var(--cozy-card-bg); font: 900 10px/1 'Nunito', sans-serif; opacity: 0; transform: scale(0.75); transition: opacity 0.18s ease, transform 0.18s ease; } .avatar-editable:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px var(--accent-primary-cozy-a45); } .avatar-editable:hover::after { opacity: 1; transform: scale(1); } #stage-screen .deck-peek.is-clickable { cursor: pointer; border-radius: 8px; transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease; } #stage-screen .deck-peek.is-clickable:hover { opacity: 1; transform: translateY(-2px); background: var(--accent-wash); } #stage-screen .deck.is-dragging, #stage-screen .deck.is-dragging * { cursor: grabbing; user-select: none; } .tutorial-panel-kicker { position: absolute; top: 4px; left: 50%; z-index: 11; transform: translateX(-50%); padding: 2px 9px; border: 1px solid var(--accent-primary-cozy-a45); border-radius: 999px; background: var(--accent-wash); color: var(--text-dim); font-size: 0.64rem; font-weight: 900; line-height: 1.25; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; } .tutorial-panel-box:has(.tutorial-panel-kicker) .tutorial-panel-title { top: 30px; } .tutorial-recap-overlay { position: absolute; inset: 18px 24px 20px; z-index: 40; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; overflow-y: auto; pointer-events: auto; overscroll-behavior: contain; border: 1px solid var(--rule-strong); border-radius: 14px; background: var(--cozy-card-bg); color: var(--text-primary); box-shadow: 0 12px 28px var(--shadow-dark-025); } .tutorial-recap-step { padding: 10px 12px; border: 1px solid var(--rule); border-left: 3px solid var(--accent-primary); border-radius: 8px; background: var(--surface-sunk); color: var(--text-primary); line-height: 1.5; } /* ======================================================================== UI-15 Cozy Day title screen 타이틀 섹션에만 한정한다. 로비(#stage-screen)와 모달은 이 블록의 영향을 받지 않는다. ======================================================================== */ #start-screen { width: 1280px; height: 720px; box-sizing: border-box; overflow: hidden; transform: scale(1.5); transform-origin: center center; background: radial-gradient(circle at 50% 42%, var(--cozy-card-bg) 0, var(--cozy-hud-bg) 22%, var(--cozy-title-edge) 72%); } #start-screen .screen-content { position: relative; width: 100%; height: 100%; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } #start-screen .top-options-container { top: 20px; right: 22px; gap: 8px; } #start-screen .option-round-btn { width: 48px; height: 40px; border: 1px solid var(--rule); border-radius: 20px; background: var(--cozy-card-bg); color: var(--text-dim); box-shadow: 0 3px 0 rgba(154, 103, 67, 0.16); } #start-screen .title-container { position: relative; z-index: 3; width: 360px; margin: 174px 0 34px; animation: none; } #start-screen .logo-text-wrapper { width: 100%; } #start-screen .creative-title { min-height: 74px; font-size: 5rem; line-height: 0.86; letter-spacing: 0; color: var(--text-primary); text-shadow: none; } #start-screen .title-letter, #start-screen .extreme-letter { animation: none; text-shadow: none; } #start-screen .heart-char-wrapper { width: 3.9rem; height: 3.9rem; margin: 0 4px; } /* 네온 시절 효과(filter·animation)는 걷되 회전은 남긴다. 이 하트는 장식이 아니라 HEARTS의 'A' 자리를 대신하는 글자다 — 뒤집어야 A로 읽힌다. Cozy Day 정리 때 여기에 transform:none이 같이 들어가 회전이 죽어 있었고, 그 바람에 워드마크가 "HE♥RTS"로 읽혔다(2026-08-27 복구). 가로획(.heart-a-bar)은 계속 끈다 — 뒤집는 것만으로 A가 읽히고, 획을 더하면 하트에 홈이 파인 것처럼 보여 형태가 지저분해진다. */ #start-screen .inline-heart-svg { transform: rotate(180deg); fill: var(--brand-heart); filter: none; animation: none; } #start-screen .title-shimmer-line { position: relative; width: 100%; height: 40px; margin: 4px 0 0; overflow: hidden; border-radius: 20px; background: var(--text-primary); box-shadow: 0 3px 0 rgba(154, 103, 67, 0.22); opacity: 1; animation: none; } #start-screen .title-shimmer-line::after { content: ""; position: absolute; inset: auto 0 0; height: 6px; background: linear-gradient(90deg, var(--cozy-suit-spade-normal) 0 25%, var(--cozy-suit-heart) 25% 50%, var(--cozy-suit-diamond) 50% 75%, var(--cozy-suit-club) 75% 100%); } #start-screen .creative-subtitle { position: absolute; inset: 0 0 6px; margin: 0; gap: 8px; align-items: center; } #start-screen .extreme-letter { font-size: 1.18rem; font-weight: 700; color: var(--cozy-cta-text); } #start-screen #demo-title-badge { position: absolute; top: calc(100% + 9px); left: 50%; margin: 0; padding: 3px 12px; transform: translateX(-50%); color: var(--text-dim); border-color: var(--rule-strong); background: var(--cozy-card-bg); box-shadow: 0 2px 0 rgba(154, 103, 67, 0.14); } #start-screen #btn-open-profile { position: relative; z-index: 3; width: 282px; height: 42px; margin: 0 0 12px; padding: 0 16px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 16px; box-sizing: border-box; cursor: pointer; background: var(--cozy-card-bg); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 3px 0 rgba(154, 103, 67, 0.18); backdrop-filter: none; } #start-screen .title-profile-label { flex: none; font-size: 0.62rem; font-weight: 900; letter-spacing: 3px; color: var(--text-dim); } #start-screen #profile-name-display-main { width: 100%; min-width: 0; overflow: hidden; color: var(--text-primary); font-size: 0.95rem; font-weight: 900; text-align: center; text-overflow: ellipsis; text-shadow: none; white-space: nowrap; } #start-screen .menu-buttons { position: relative; z-index: 3; width: 282px; } #start-screen #btn-play-main { width: 100%; min-height: 52px; padding: 12px 24px; border: 0; border-radius: 26px; color: var(--cozy-cta-text); background: var(--cozy-cta-primary-hover); box-shadow: inset 0 -3px 0 var(--cozy-cta-primary-shadow), 0 6px 14px rgba(62, 69, 66, 0.14); font-size: 1.25rem; font-weight: 900; letter-spacing: 0; } #start-screen #btn-play-main:hover { background: var(--cozy-cta-primary-shadow); transform: translateY(-1px); } #start-screen .title-card-fan { position: absolute; z-index: 1; left: 50%; bottom: -120px; width: 520px; height: 210px; transform: translateX(-50%); pointer-events: none; } /* 타이틀 좌우 하단 — 버전 · 저작권 (확정 시안 F_cozyday) */ #start-screen .title-meta { position: absolute; bottom: 26px; z-index: 4; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--text-dim); pointer-events: none; user-select: none; } #start-screen .title-meta-left { left: 38px; } #start-screen .title-meta-right { right: 38px; } /* 부채 카드의 기하만 여기서 정한다. 색과 무늬는 하트 덱 뒷면 규칙이 준다 (.deck-back-heart-deck과 선택자를 공유한다) — 뒷면을 고치면 부채도 같이 바뀐다. */ #start-screen .title-card-fan span { position: absolute; top: 0; left: 50%; width: 88px; height: 128px; margin-left: -44px; border: 2px solid rgba(246, 236, 221, 0.42); border-radius: 7px; box-shadow: 0 4px 8px rgba(62, 69, 66, 0.18); transform-origin: 50% 330px; } /* 5장 · 펼침 ±30° · 사이 15°. 각도 폭은 그대로 두고 장수만 줄였다 — 그래야 카드 사이 간격이 넓어져 한 장이 더 보인다. */ #start-screen .title-card-fan span:nth-child(1) { transform: rotate(-30deg); } #start-screen .title-card-fan span:nth-child(2) { transform: rotate(-15deg); } #start-screen .title-card-fan span:nth-child(3) { transform: rotate(0); } #start-screen .title-card-fan span:nth-child(4) { transform: rotate(15deg); } #start-screen .title-card-fan span:nth-child(5) { transform: rotate(30deg); }