/* ==========================================================================
   SomiPaper — November 2026 Paper Planner (Editorial Web Edition)
   Proportions: 4:3 Landscape (1024 × 768 px, 32 × 32 px Mathematical Grid)
   Typography: NanumMyeongjo, Gaegu, Courier-Bold, Times-Roman

   style.css — design tokens, editorial shell and the printed page layouts.
   book.css  — the physical book: desk stage, hardcover, page block, 3D turns.
   ========================================================================== */

/* Authentic Core Typography (Split Latin + Hangul WOFF2 via unicode-range) */
@font-face {
  font-family: 'Gaegu';
  src: url('fonts/Gaegu-Regular-Latin.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: swap;
  size-adjust: 80%;
  unicode-range: U+0020-005F, U+0061-007E, U+2018-2019, U+201C-201D, U+20A9, U+ACFC, U+AD00, U+AE00, U+AE30, U+B0B1, U+B155, U+B4DC, U+B78D, U+B85D, U+BA54, U+BAA8, U+BBF8, U+BCF4, U+BD99, U+C0AC, U+C0C1, U+C11C-C11D, U+C138, U+C18C, U+C2DC, U+C548, U+C5B4, U+C5F4, U+C5FD, U+C694, U+C774, U+C790-C791, U+C7A5, U+C989, U+C9C0, U+CCAB, U+CE74, U+D1A0, U+D37C, U+D398, U+D3B8, U+D3EC;
}
@font-face {
  font-family: 'Gaegu';
  src: url('fonts/Gaegu-Regular-KR.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: swap;
  size-adjust: 80%;
  unicode-range: U+3131-3163, U+AC00-AC01, U+AC04, U+AC07-AC0A, U+AC10-AC17, U+AC19-AC1D, U+AC20, U+AC24, U+AC2C-AC2D, U+AC2F-AC31, U+AC38-AC39, U+AC3C, U+AC40, U+AC4B, U+AC4D, U+AC54, U+AC58, U+AC5C, U+AC70-AC71, U+AC74, U+AC77-AC78, U+AC7A, U+AC80-AC81, U+AC83-AC86, U+AC89-AC8C, U+AC90, U+AC94, U+AC9C-AC9D, U+AC9F-ACA1, U+ACA8-ACAA, U+ACAC, U+ACAF-ACB0, U+ACB8-ACB9, U+ACBB-ACBD, U+ACC1, U+ACC4, U+ACC8, U+ACCC, U+ACD5, U+ACD7, U+ACE0-ACE1, U+ACE4, U+ACE7-ACE8, U+ACEA, U+ACEC, U+ACEF-ACF1, U+ACF3, U+ACF5-ACF6, U+ACFD, U+AD04, U+AD06, U+AD0C-AD0D, U+AD0F, U+AD11, U+AD18, U+AD1C, U+AD20, U+AD29, U+AD2C-AD2D, U+AD34-AD35, U+AD38, U+AD3C, U+AD44-AD45, U+AD47, U+AD49, U+AD50, U+AD54, U+AD58, U+AD61, U+AD63, U+AD6C-AD6D, U+AD70, U+AD73-AD76, U+AD7B-AD7D, U+AD7F, U+AD81-AD82, U+AD88-AD89, U+AD8C, U+AD90, U+AD9C-AD9D, U+ADA4, U+ADB7, U+ADC0-ADC1, U+ADC4, U+ADC8, U+ADD0-ADD1, U+ADD3, U+ADDC, U+ADE0, U+ADE4, U+ADF8-ADF9, U+ADFC, U+ADFF, U+AE01, U+AE08-AE09, U+AE0B, U+AE0D, U+AE14, U+AE31, U+AE34, U+AE37-AE38, U+AE3A, U+AE40-AE41, U+AE43, U+AE45-AE46, U+AE4A, U+AE4C-AE4E, U+AE50, U+AE54, U+AE56, U+AE5C-AE5D, U+AE5F-AE61, U+AE65, U+AE68-AE69, U+AE6C, U+AE70, U+AE78-AE79, U+AE7B-AE7D, U+AE84-AE85, U+AE8C, U+AEBC-AEBE, U+AEC0, U+AEC4, U+AECC-AECD, U+AECF-AED1, U+AED8-AED9, U+AEDC, U+AEE8, U+AEEB, U+AEED, U+AEF4, U+AEF8, U+AEFC, U+AF07-AF08, U+AF0D, U+AF10, U+AF2C-AF2D, U+AF30, U+AF32, U+AF34, U+AF3C-AF3D, U+AF3F, U+AF41-AF43, U+AF48-AF49, U+AF50, U+AF5C-AF5D, U+AF64-AF65, U+AF79, U+AF80, U+AF84, U+AF88, U+AF90-AF91, U+AF95, U+AF9C, U+AFB8-AFB9, U+AFBC, U+AFC0, U+AFC7-AFC9, U+AFCB, U+AFCD-AFCE, U+AFD4, U+AFDC, U+AFE8-AFE9, U+AFF0-AFF1, U+AFF4, U+AFF8, U+B000-B001, U+B004, U+B00C, U+B010, U+B014, U+B01C-B01D, U+B028, U+B044-B045, U+B048, U+B04A, U+B04C, U+B04E, U+B053-B055, U+B057, U+B059, U+B05D, U+B07C-B07D, U+B080, U+B084, U+B08C-B08D, U+B08F, U+B091, U+B098-B09A, U+B09C, U+B09F-B0A2, U+B0A8-B0A9, U+B0AB-B0AF, U+B0B3-B0B5, U+B0B8, U+B0BC, U+B0C4-B0C5, U+B0C7-B0C9, U+B0D0-B0D1, U+B0D4, U+B0D8, U+B0E0, U+B0E5, U+B108-B109, U+B10B-B10C, U+B110, U+B112-B113, U+B118-B119, U+B11B-B11D, U+B123-B125, U+B128, U+B12C, U+B134-B135, U+B137-B139, U+B140-B141, U+B144, U+B148, U+B150-B151, U+B154, U+B158, U+B15C, U+B160, U+B178-B179, U+B17C, U+B180, U+B182, U+B188-B189, U+B18B, U+B18D, U+B192-B194, U+B198, U+B19C, U+B1A8, U+B1CC, U+B1D0, U+B1D4, U+B1DC-B1DD, U+B1DF, U+B1E8-B1E9, U+B1EC, U+B1F0, U+B1F9, U+B1FB, U+B1FD, U+B204-B205, U+B208, U+B20B-B20C, U+B214-B215, U+B217, U+B219, U+B220, U+B234, U+B23C, U+B258, U+B25C, U+B260, U+B268-B269, U+B274-B275, U+B27C, U+B284-B285, U+B289, U+B290-B291, U+B294, U+B298-B29A, U+B2A0-B2A1, U+B2A3, U+B2A5-B2A6, U+B2AA, U+B2AC, U+B2B0, U+B2B4, U+B2C8-B2C9, U+B2CC, U+B2D0, U+B2D2, U+B2D8-B2D9, U+B2DB, U+B2DD, U+B2E2, U+B2E4-B2E6, U+B2E8, U+B2EB-B2EF, U+B2F3-B2F5, U+B2F7-B2FB, U+B2FF-B301, U+B304, U+B308, U+B310-B311, U+B313-B315, U+B31C, U+B354-B356, U+B358, U+B35B-B35C, U+B35E-B35F, U+B364-B365, U+B367, U+B369, U+B36B, U+B36E, U+B370-B371, U+B374, U+B378, U+B380-B381, U+B383-B385, U+B38C, U+B390, U+B394, U+B3A0-B3A1, U+B3A8, U+B3AC, U+B3C4-B3C5, U+B3C8, U+B3CB-B3CC, U+B3CE, U+B3D0, U+B3D4-B3D5, U+B3D7, U+B3D9, U+B3DB, U+B3DD, U+B3E0, U+B3E4, U+B3E8, U+B3FC, U+B410, U+B418, U+B41C, U+B420, U+B428-B429, U+B42B, U+B434, U+B450-B451, U+B454, U+B458, U+B460-B461, U+B463, U+B465, U+B46C, U+B480, U+B488, U+B49D, U+B4A4, U+B4A8, U+B4AC, U+B4B5, U+B4B7, U+B4B9, U+B4C0, U+B4C4, U+B4C8, U+B4D0, U+B4D5, U+B4DD, U+B4E0, U+B4E3-B4E4, U+B4E6, U+B4EC-B4ED, U+B4EF, U+B4F1, U+B4F8, U+B514-B515, U+B518, U+B51B-B51C, U+B524-B525, U+B527-B52A, U+B530-B531, U+B534, U+B538, U+B540-B541, U+B543-B545, U+B54B-B54D, U+B550, U+B554, U+B55C-B55D, U+B55F-B561, U+B5A0-B5A1, U+B5A4, U+B5A8, U+B5AA-B5AB, U+B5B0-B5B1, U+B5B3-B5B5, U+B5BB-B5BD, U+B5C0, U+B5C4, U+B5CC-B5CD, U+B5CF-B5D1, U+B5D8, U+B5EC, U+B610-B611, U+B614, U+B618, U+B625, U+B62C, U+B634, U+B648, U+B664, U+B668, U+B69C-B69D, U+B6A0, U+B6A4, U+B6AB-B6AC, U+B6B1, U+B6D4, U+B6F0, U+B6F4, U+B6F8, U+B700-B701, U+B705, U+B728-B729, U+B72C, U+B72F-B730, U+B738-B739, U+B73B, U+B744, U+B748, U+B74C, U+B754-B755, U+B760, U+B764, U+B768, U+B770-B771, U+B773, U+B775, U+B77C-B77D, U+B780, U+B784, U+B78C, U+B78F-B792, U+B796-B799, U+B79C, U+B7A0, U+B7A8-B7A9, U+B7AB-B7AD, U+B7B4-B7B5, U+B7B8, U+B7C7, U+B7C9, U+B7EC-B7ED, U+B7F0, U+B7F4, U+B7FC-B7FD, U+B7FF-B801, U+B807-B809, U+B80C, U+B810, U+B818-B819, U+B81B, U+B81D, U+B824-B825, U+B828, U+B82C, U+B834-B835, U+B837-B839, U+B840, U+B844, U+B851, U+B853, U+B85C, U+B860, U+B864, U+B86C-B86D, U+B86F, U+B871, U+B878, U+B87C, U+B88D, U+B8A8, U+B8B0, U+B8B4, U+B8B8, U+B8C0-B8C1, U+B8C3, U+B8C5, U+B8CC, U+B8D0, U+B8D4, U+B8DD, U+B8DF, U+B8E1, U+B8E8-B8E9, U+B8EC, U+B8F0, U+B8F8-B8F9, U+B8FB, U+B8FD, U+B904, U+B918, U+B920, U+B93C-B93D, U+B940, U+B944, U+B94C, U+B94F, U+B951, U+B958-B959, U+B95C, U+B960, U+B968-B969, U+B96B, U+B96D, U+B974-B975, U+B978, U+B97C, U+B984-B985, U+B987, U+B989-B98A, U+B98D-B98E, U+B9AC-B9AD, U+B9B0, U+B9B4, U+B9BC-B9BD, U+B9BF, U+B9C1, U+B9C8-B9C9, U+B9CC, U+B9CE-B9D2, U+B9D8-B9D9, U+B9DB, U+B9DD-B9DE, U+B9E1, U+B9E3-B9E5, U+B9E8, U+B9EC, U+B9F4-B9F5, U+B9F7-B9FA, U+BA00-BA01, U+BA08, U+BA15, U+BA38-BA39, U+BA3C, U+BA40, U+BA42, U+BA48-BA49, U+BA4B, U+BA4D-BA4E, U+BA53, U+BA55, U+BA58, U+BA5C, U+BA64-BA65, U+BA67-BA69, U+BA70-BA71, U+BA74, U+BA78, U+BA83-BA85, U+BA87, U+BA8C, U+BAA9, U+BAAB-BAAC, U+BAB0, U+BAB2, U+BAB8-BAB9, U+BABB, U+BABD, U+BAC4, U+BAC8, U+BAD8-BAD9, U+BAFC, U+BB00, U+BB04, U+BB0D, U+BB0F, U+BB11, U+BB18, U+BB1C, U+BB20, U+BB29, U+BB2B, U+BB34-BB36, U+BB38, U+BB3B-BB3E, U+BB44-BB45, U+BB47, U+BB49, U+BB4D, U+BB4F-BB50, U+BB54, U+BB58, U+BB61, U+BB63, U+BB6C, U+BB88, U+BB8C, U+BB90, U+BBA4, U+BBA8, U+BBAC, U+BBB4, U+BBB7, U+BBC0, U+BBC4, U+BBC8, U+BBD0, U+BBD3, U+BBF9, U+BBFC, U+BBFF-BC00, U+BC02, U+BC08-BC09, U+BC0B-BC0D, U+BC0F, U+BC11, U+BC14-BC18, U+BC1B-BC1F, U+BC24-BC25, U+BC27, U+BC29, U+BC2D, U+BC30-BC31, U+BC34, U+BC38, U+BC40-BC41, U+BC43-BC45, U+BC49, U+BC4C-BC4D, U+BC50, U+BC5D, U+BC84-BC85, U+BC88, U+BC8B-BC8C, U+BC8E, U+BC94-BC95, U+BC97, U+BC99-BC9A, U+BCA0-BCA1, U+BCA4, U+BCA7-BCA8, U+BCB0-BCB1, U+BCB3-BCB5, U+BCBC-BCBD, U+BCC0, U+BCC4, U+BCCD, U+BCCF-BCD1, U+BCD5, U+BCD8, U+BCDC, U+BCF5-BCF6, U+BCF8, U+BCFC, U+BD04-BD05, U+BD07, U+BD09, U+BD10, U+BD14, U+BD24, U+BD2C, U+BD40, U+BD48-BD49, U+BD4C, U+BD50, U+BD58-BD59, U+BD64, U+BD68, U+BD80-BD81, U+BD84, U+BD87-BD8A, U+BD90-BD91, U+BD93, U+BD95, U+BD9A, U+BD9C, U+BDA4, U+BDB0, U+BDB8, U+BDD4-BDD5, U+BDD8, U+BDDC, U+BDE9, U+BDF0, U+BDF4, U+BDF8, U+BE00, U+BE03, U+BE05, U+BE0C-BE0D, U+BE10, U+BE14, U+BE1C-BE1D, U+BE1F, U+BE44-BE45, U+BE48, U+BE4C, U+BE4E, U+BE54-BE55, U+BE57, U+BE59-BE5B, U+BE60-BE61, U+BE64, U+BE68, U+BE6A, U+BE70-BE71, U+BE73-BE75, U+BE7B-BE7D, U+BE80, U+BE84, U+BE8C-BE8D, U+BE8F-BE91, U+BE98-BE99, U+BEA8, U+BED0-BED1, U+BED4, U+BED7-BED8, U+BEE0, U+BEE3-BEE5, U+BEEC, U+BF01, U+BF08-BF09, U+BF18-BF19, U+BF1B-BF1D, U+BF40-BF41, U+BF44, U+BF48, U+BF50-BF51, U+BF55, U+BF94, U+BFB0, U+BFC5, U+BFCC-BFCD, U+BFD0, U+BFD4, U+BFDC, U+BFDF, U+BFE1, U+C03C, U+C051, U+C058, U+C05C, U+C060, U+C068-C069, U+C090-C091, U+C094, U+C098, U+C0A0-C0A1, U+C0A3, U+C0A5, U+C0AD, U+C0AF-C0B0, U+C0B3-C0B6, U+C0BC-C0BD, U+C0BF-C0C0, U+C0C5, U+C0C8-C0C9, U+C0CC, U+C0D0, U+C0D8-C0D9, U+C0DB-C0DD, U+C0E4-C0E5, U+C0E8, U+C0EC, U+C0F4-C0F5, U+C0F7, U+C0F9, U+C100, U+C104, U+C108, U+C110, U+C115, U+C11E-C120, U+C123-C124, U+C126-C127, U+C12C-C12D, U+C12F-C131, U+C136, U+C139, U+C13C, U+C140, U+C148-C149, U+C14B-C14D, U+C154-C155, U+C158, U+C15C, U+C164-C165, U+C167-C169, U+C170, U+C174, U+C178, U+C185, U+C18D-C18E, U+C190, U+C194, U+C196, U+C19C-C19D, U+C19F, U+C1A1, U+C1A5, U+C1A8-C1A9, U+C1AC, U+C1B0, U+C1BD, U+C1C4, U+C1C8, U+C1CC, U+C1D4, U+C1D7-C1D8, U+C1E0, U+C1E4, U+C1E8, U+C1F0-C1F1, U+C1F3, U+C1FC-C1FD, U+C200, U+C204, U+C20C-C20D, U+C20F, U+C211, U+C218-C219, U+C21C, U+C21F-C220, U+C228-C229, U+C22B, U+C22D, U+C22F, U+C231-C232, U+C234, U+C248, U+C250-C251, U+C254, U+C258, U+C260, U+C265, U+C26C-C26D, U+C270, U+C274, U+C27C-C27D, U+C27F, U+C281, U+C288-C289, U+C290, U+C298, U+C29B, U+C29D, U+C2A4-C2A5, U+C2A8, U+C2AC-C2AD, U+C2B4-C2B5, U+C2B7, U+C2B9, U+C2DD, U+C2E0, U+C2E3-C2E4, U+C2EB-C2ED, U+C2EF, U+C2F1, U+C2F6, U+C2F8-C2F9, U+C2FB-C2FC, U+C300, U+C308-C309, U+C30C-C30D, U+C313-C315, U+C318, U+C31C, U+C324-C325, U+C328-C329, U+C345, U+C368-C369, U+C36C, U+C370, U+C372, U+C378-C379, U+C37C-C37D, U+C384, U+C388, U+C38C, U+C3C0, U+C3D8-C3D9, U+C3DC, U+C3DF-C3E0, U+C3E2, U+C3E8-C3E9, U+C3ED, U+C3F4-C3F5, U+C3F8, U+C408, U+C410, U+C424, U+C42C, U+C430, U+C434, U+C43C-C43D, U+C448, U+C464-C465, U+C468, U+C46C, U+C474-C475, U+C479, U+C480, U+C494, U+C49C, U+C4B8, U+C4BC, U+C4E9, U+C4F0-C4F1, U+C4F4, U+C4F8, U+C4FA, U+C4FF-C501, U+C50C, U+C510, U+C514, U+C51C, U+C528-C529, U+C52C, U+C530, U+C538-C539, U+C53B, U+C53D, U+C544-C545, U+C549-C54A, U+C54C-C54E, U+C553-C555, U+C557-C559, U+C55D-C55E, U+C560-C561, U+C564, U+C568, U+C570-C571, U+C573-C575, U+C57C-C57D, U+C580, U+C584, U+C587, U+C58C-C58D, U+C58F, U+C591, U+C595, U+C597-C598, U+C59C, U+C5A0, U+C5A9, U+C5B5, U+C5B8-C5B9, U+C5BB-C5BE, U+C5C4-C5CA, U+C5CC, U+C5CE, U+C5D0-C5D1, U+C5D4, U+C5D8, U+C5E0-C5E1, U+C5E3, U+C5E5, U+C5EC-C5EE, U+C5F0, U+C5F6-C5F7, U+C5FC, U+C5FE-C601, U+C605-C608, U+C60C, U+C610, U+C618-C619, U+C61B-C61C, U+C624-C625, U+C628, U+C62C-C62E, U+C630, U+C633-C635, U+C637, U+C639, U+C63B, U+C640-C641, U+C644, U+C648, U+C650-C651, U+C653-C655, U+C65C-C65D, U+C660, U+C66C, U+C66F, U+C671, U+C678-C679, U+C67C, U+C680, U+C688-C689, U+C68B, U+C68D, U+C695, U+C698, U+C69C, U+C6A4-C6A5, U+C6A7, U+C6A9, U+C6B0-C6B1, U+C6B4, U+C6B8-C6BA, U+C6C0-C6C1, U+C6C3, U+C6C5, U+C6CC-C6CD, U+C6D0, U+C6D4, U+C6DC-C6DD, U+C6E0-C6E1, U+C6E8-C6E9, U+C6EC, U+C6F0, U+C6F8-C6F9, U+C6FD, U+C704-C705, U+C708, U+C70C, U+C714-C715, U+C717, U+C719, U+C720-C721, U+C724, U+C728, U+C730-C731, U+C733, U+C735, U+C737, U+C73C-C73D, U+C740, U+C744, U+C74A, U+C74C-C74D, U+C74F, U+C751-C758, U+C75C, U+C760, U+C768, U+C76B, U+C775, U+C778, U+C77C-C77E, U+C783-C785, U+C787-C78A, U+C78E, U+C794, U+C796-C798, U+C79A, U+C7A0-C7A1, U+C7A3-C7A4, U+C7A6, U+C7AC-C7AD, U+C7B0, U+C7B4, U+C7BC-C7BD, U+C7BF-C7C1, U+C7C8-C7C9, U+C7CC, U+C7CE, U+C7D0, U+C7D8, U+C7DD, U+C7E4, U+C7E8, U+C7EC, U+C800-C801, U+C804, U+C808, U+C80A, U+C810-C811, U+C813, U+C815-C816, U+C81C-C81D, U+C820, U+C824, U+C82C-C82D, U+C82F, U+C831, U+C838, U+C83C, U+C840, U+C848-C849, U+C84C-C84D, U+C854, U+C870-C871, U+C874, U+C878, U+C87A, U+C880-C881, U+C883, U+C885-C887, U+C88B-C88D, U+C894, U+C89D, U+C89F, U+C8A1, U+C8A8, U+C8BC-C8BD, U+C8C4, U+C8C8, U+C8CC, U+C8D4-C8D5, U+C8D7, U+C8D9, U+C8E0-C8E1, U+C8E4, U+C8F5, U+C8FC-C8FD, U+C900, U+C904-C906, U+C90C-C90D, U+C90F, U+C911, U+C918, U+C92C, U+C934, U+C950-C951, U+C954, U+C958, U+C960-C961, U+C963, U+C96C, U+C970, U+C974, U+C97C, U+C988, U+C98C, U+C990, U+C998-C999, U+C99B, U+C99D, U+C9C1, U+C9C4, U+C9C7-C9C8, U+C9CA, U+C9D0-C9D1, U+C9D3, U+C9D5-C9D6, U+C9D9-C9DA, U+C9DC-C9DD, U+C9E0, U+C9E2, U+C9E4, U+C9E7, U+C9EC-C9ED, U+C9EF-C9F1, U+C9F8-C9F9, U+C9FC, U+CA00, U+CA08-CA09, U+CA0B-CA0D, U+CA14, U+CA18, U+CA29, U+CA4C-CA4D, U+CA50, U+CA54, U+CA5C-CA5D, U+CA5F-CA61, U+CA68, U+CA7D, U+CA84, U+CA98, U+CABC-CABD, U+CAC0, U+CAC4, U+CACC-CACD, U+CACF, U+CAD1, U+CAD3, U+CAD8-CAD9, U+CAE0, U+CAEC, U+CAF4, U+CB08, U+CB10, U+CB14, U+CB18, U+CB20-CB21, U+CB41, U+CB48-CB49, U+CB4C, U+CB50, U+CB58-CB59, U+CB5D, U+CB64, U+CB78-CB79, U+CB9C, U+CBB8, U+CBD4, U+CBE4, U+CBE7, U+CBE9, U+CC0C-CC0D, U+CC10, U+CC14, U+CC1C-CC1D, U+CC21-CC22, U+CC27-CC29, U+CC2C, U+CC2E, U+CC30, U+CC38-CC39, U+CC3B-CC3E, U+CC44-CC45, U+CC48, U+CC4C, U+CC54-CC55, U+CC57-CC59, U+CC60, U+CC64, U+CC66, U+CC68, U+CC70, U+CC75, U+CC98-CC99, U+CC9C, U+CCA0, U+CCA8-CCA9, U+CCAC-CCAD, U+CCB4-CCB5, U+CCB8, U+CCBC, U+CCC4-CCC5, U+CCC7, U+CCC9, U+CCD0, U+CCD4, U+CCE4, U+CCEC, U+CCF0, U+CD01, U+CD08-CD09, U+CD0C, U+CD10, U+CD18-CD19, U+CD1B, U+CD1D, U+CD24, U+CD28, U+CD2C, U+CD39, U+CD5C, U+CD60, U+CD64, U+CD6C-CD6D, U+CD6F, U+CD71, U+CD78, U+CD88, U+CD94-CD95, U+CD98, U+CD9C, U+CDA4-CDA5, U+CDA7, U+CDA9, U+CDB0, U+CDC4, U+CDCC, U+CDD0, U+CDE8, U+CDEC, U+CDF0, U+CDF8-CDF9, U+CDFB, U+CDFD, U+CE04, U+CE08, U+CE0C, U+CE14, U+CE19, U+CE20-CE21, U+CE24, U+CE28, U+CE30-CE31, U+CE33, U+CE35, U+CE58-CE59, U+CE5C, U+CE5F-CE61, U+CE68-CE69, U+CE6B, U+CE6D, U+CE75, U+CE78, U+CE7C, U+CE84-CE85, U+CE87, U+CE89, U+CE90-CE91, U+CE94, U+CE98, U+CEA0-CEA1, U+CEA3-CEA5, U+CEAC-CEAD, U+CEC1, U+CEE4-CEE5, U+CEE8, U+CEEB-CEEC, U+CEF4-CEF5, U+CEF7-CEF9, U+CF00-CF01, U+CF04, U+CF08, U+CF10-CF11, U+CF13, U+CF15, U+CF1C, U+CF20, U+CF24, U+CF2C-CF2D, U+CF2F-CF31, U+CF38, U+CF54-CF55, U+CF58, U+CF5C, U+CF64-CF65, U+CF67, U+CF69, U+CF70-CF71, U+CF74, U+CF78, U+CF80, U+CF85, U+CF8C, U+CFA1, U+CFA8, U+CFB0, U+CFC4, U+CFE0-CFE1, U+CFE4, U+CFE8, U+CFF0-CFF1, U+CFF3, U+CFF5, U+CFFC, U+D000, U+D004, U+D011, U+D018, U+D02D, U+D034-D035, U+D038, U+D03C, U+D044-D045, U+D047, U+D049, U+D050, U+D054, U+D058, U+D060, U+D06C-D06D, U+D070, U+D074, U+D07C-D07D, U+D081, U+D0A4-D0A5, U+D0A8, U+D0AC, U+D0B4-D0B5, U+D0B7, U+D0B9, U+D0C0-D0C1, U+D0C4, U+D0C8-D0C9, U+D0D0-D0D1, U+D0D3-D0D5, U+D0DC-D0DD, U+D0E0, U+D0E4, U+D0EC-D0ED, U+D0EF-D0F1, U+D0F8, U+D10D, U+D130-D131, U+D134, U+D138, U+D13A, U+D140-D141, U+D143-D145, U+D14C-D14D, U+D150, U+D154, U+D15C-D15D, U+D15F, U+D161, U+D168, U+D16C, U+D17C, U+D184, U+D188, U+D1A1, U+D1A4, U+D1A8, U+D1B0-D1B1, U+D1B3, U+D1B5, U+D1BA, U+D1BC, U+D1C0, U+D1D8, U+D1F4, U+D1F8, U+D207, U+D209, U+D210, U+D22C-D22D, U+D230, U+D234, U+D23C-D23D, U+D23F, U+D241, U+D248, U+D25C, U+D264, U+D280-D281, U+D284, U+D288, U+D290-D291, U+D295, U+D29C, U+D2A0, U+D2A4, U+D2AC, U+D2B1, U+D2B8-D2B9, U+D2BC, U+D2BF-D2C0, U+D2C2, U+D2C8-D2C9, U+D2CB, U+D2D4, U+D2D8, U+D2DC, U+D2E4-D2E5, U+D2F0-D2F1, U+D2F4, U+D2F8, U+D300-D301, U+D303, U+D305, U+D30C-D30E, U+D310, U+D314, U+D316, U+D31C-D31D, U+D31F-D321, U+D325, U+D328-D329, U+D32C, U+D330, U+D338-D339, U+D33B-D33D, U+D344-D345, U+D37D, U+D380, U+D384, U+D38C-D38D, U+D38F-D391, U+D399, U+D39C, U+D3A0, U+D3A8-D3A9, U+D3AB, U+D3AD, U+D3B4, U+D3BC, U+D3C4-D3C5, U+D3C8-D3C9, U+D3D0, U+D3D8, U+D3E1, U+D3E3, U+D3ED, U+D3F0, U+D3F4, U+D3FC-D3FD, U+D3FF, U+D401, U+D408, U+D41D, U+D440, U+D444, U+D45C, U+D460, U+D464, U+D46D, U+D46F, U+D478-D479, U+D47C, U+D47F-D480, U+D482, U+D488-D489, U+D48B, U+D48D, U+D494, U+D4A9, U+D4CC, U+D4D0, U+D4D4, U+D4DC, U+D4DF, U+D4E8, U+D4EC, U+D4F0, U+D4F8, U+D4FB, U+D4FD, U+D504, U+D508, U+D50C, U+D514-D515, U+D517, U+D53C-D53D, U+D540, U+D544, U+D54C-D54D, U+D54F, U+D551, U+D558-D559, U+D55C, U+D560, U+D565, U+D568-D569, U+D56B, U+D56D, U+D574-D575, U+D578, U+D57C, U+D584-D585, U+D587-D589, U+D590, U+D5A5, U+D5C8-D5C9, U+D5CC, U+D5D0, U+D5D2, U+D5D8-D5D9, U+D5DB, U+D5DD, U+D5E4-D5E5, U+D5E8, U+D5EC, U+D5F4-D5F5, U+D5F7, U+D5F9, U+D600-D601, U+D604, U+D608, U+D610-D611, U+D613-D615, U+D61C, U+D620, U+D624, U+D62D, U+D638-D639, U+D63C, U+D640, U+D645, U+D648-D649, U+D64B, U+D64D, U+D651, U+D654-D655, U+D658, U+D65C, U+D667, U+D669, U+D670-D671, U+D674, U+D683, U+D685, U+D68C-D68D, U+D690, U+D694, U+D69D, U+D69F, U+D6A1, U+D6A8, U+D6AC, U+D6B0, U+D6B9, U+D6BB, U+D6C4-D6C5, U+D6C8, U+D6CC, U+D6D1, U+D6D4, U+D6D7, U+D6D9, U+D6E0, U+D6E4, U+D6E8, U+D6F0, U+D6F5, U+D6FC-D6FD, U+D700, U+D704, U+D711, U+D718-D719, U+D71C, U+D720, U+D728-D729, U+D72B, U+D72D, U+D734-D735, U+D738, U+D73C, U+D744, U+D747, U+D749, U+D750-D751, U+D754, U+D756-D759, U+D760-D761, U+D763, U+D765, U+D769, U+D76C, U+D770, U+D774, U+D77C-D77D, U+D781, U+D788-D789, U+D78C, U+D790, U+D798-D799, U+D79B, U+D79D, U+FF01-FF3E, U+FF40-FF5D, U+FFE6;
}
@font-face {
  font-family: 'GaeguFallback';
  src: url('fonts/GaeguFallback-Regular.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: swap;
  size-adjust: 63%;
  unicode-range: U+00A0-0148, U+014A-017F, U+0181-0183, U+0186-018A, U+018E-0194, U+0196-0199, U+019C-019D, U+019F-01A1, U+01A4-01A5, U+01A9, U+01AC-01B4, U+01B7-01B9, U+01C0-01C3, U+01CD-01DD, U+01E2-01E3, U+01E6-01E7, U+01EA-01EB, U+01EE-01F0, U+01F8-01F9, U+01FC-0201, U+0204-0205, U+0208-0209, U+020C-020D, U+0212-0215, U+0218-021B, U+0226-0229, U+0232-0233, U+0237, U+0241-0242, U+0244-0245, U+0248-0249, U+024C-024D, U+03A3, U+03B8, U+03C0, U+2009, U+200B, U+2013-2014, U+201A, U+201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2060, U+20A6, U+20AA-20AC, U+20AE, U+20B4, U+20B8-20BA, U+20BD, U+20BF, U+2116, U+2122, U+2126, U+2212, U+2248, U+2260, U+2264-2265, U+25CA, U+25CC;
}
@font-face {
  font-family: 'NanumMyeongjo';
  src: url('fonts/NanumMyeongjo-Regular-Latin.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: swap;
  unicode-range: U+0020-017F, U+2000-20CF, U+2100-21FF, U+25A0-25FF, U+ACFC, U+AD00, U+AE00, U+AE30, U+B0B1, U+B155, U+B4DC, U+B78D, U+B85D, U+BA54, U+BAA8, U+BBF8, U+BCF4, U+BD99, U+C0AC, U+C0C1, U+C11C, U+C11D, U+C138, U+C18C, U+C2DC, U+C548, U+C5B4, U+C5F4, U+C5FD, U+C694, U+C774, U+C790, U+C791, U+C7A5, U+C989, U+C9C0, U+CE74, U+D1A0, U+D37C, U+D398, U+D3B8, U+D3EC;
}
@font-face {
  font-family: 'NanumMyeongjo';
  src: url('fonts/NanumMyeongjo-Regular-KR.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: swap;
  unicode-range: U+1100-11FF, U+3000-32FF, U+AC00-ACFB, U+ACFD-ACFF, U+AD01-ADFF, U+AE01-AE2F, U+AE31-B0B0, U+B0B2-B154, U+B156-B4DB, U+B4DD-B78C, U+B78E-B85C, U+B85E-BA53, U+BA55-BAA7, U+BAA9-BBF7, U+BBF9-BCF3, U+BCF5-BD98, U+BD9A-C0AB, U+C0AD-C0C0, U+C0C2-C11B, U+C11E-C137, U+C139-C18B, U+C18D-C2DB, U+C2DD-C547, U+C549-C5B3, U+C5B5-C5F3, U+C5F5-C5FC, U+C5FE-C693, U+C695-C773, U+C775-C78F, U+C792-C7A4, U+C7A6-C988, U+C98A-C9BF, U+C9C1-CE73, U+CE75-D19F, U+D1A1-D37B, U+D37D-D397, U+D399-D3B7, U+D3B9-D3EB, U+D3ED-D7AF, U+FF00-FFEF;
}
@font-face {
  font-family: 'NanumMyeongjo-Bold';
  src: url('fonts/NanumMyeongjo-Bold-Latin.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: swap;
  unicode-range: U+0020-017F, U+2000-20CF, U+2100-21FF, U+25A0-25FF, U+ACFC, U+AD00, U+AE00, U+AE30, U+B0B1, U+B155, U+B4DC, U+B78D, U+B85D, U+BA54, U+BAA8, U+BBF8, U+BCF4, U+BD99, U+C0AC, U+C0C1, U+C11C, U+C11D, U+C138, U+C18C, U+C2DC, U+C548, U+C5B4, U+C5F4, U+C5FD, U+C694, U+C774, U+C790, U+C791, U+C7A5, U+C989, U+C9C0, U+CE74, U+D1A0, U+D37C, U+D398, U+D3B8, U+D3EC;
}
@font-face {
  font-family: 'NanumMyeongjo-Bold';
  src: url('fonts/NanumMyeongjo-Bold-KR.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: swap;
  unicode-range: U+1100-11FF, U+3000-32FF, U+AC00-ACFB, U+ACFD-ACFF, U+AD01-ADFF, U+AE01-AE2F, U+AE31-B0B0, U+B0B2-B154, U+B156-B4DB, U+B4DD-B78C, U+B78E-B85C, U+B85E-BA53, U+BA55-BAA7, U+BAA9-BBF7, U+BBF9-BCF3, U+BCF5-BD98, U+BD9A-C0AB, U+C0AD-C0C0, U+C0C2-C11B, U+C11E-C137, U+C139-C18B, U+C18D-C2DB, U+C2DD-C547, U+C549-C5B3, U+C5B5-C5F3, U+C5F5-C5FC, U+C5FE-C693, U+C695-C773, U+C775-C78F, U+C792-C7A4, U+C7A6-C988, U+C98A-C9BF, U+C9C1-CE73, U+CE75-D19F, U+D1A1-D37B, U+D37D-D397, U+D399-D3B7, U+D3B9-D3EB, U+D3ED-D7AF, U+FF00-FFEF;
}
@font-face {
  font-family: 'Gowun Batang';
  src: url('fonts/GowunBatang-Regular-Latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0020-017F, U+2000-20CF, U+2100-21FF, U+25A0-25FF, U+ACFC, U+AD00, U+AE00, U+AE30, U+B0B1, U+B155, U+B4DC, U+B78D, U+B85D, U+BA54, U+BAA8, U+BBF8, U+BCF4, U+BD99, U+C0AC, U+C0C1, U+C11C, U+C11D, U+C138, U+C18C, U+C2DC, U+C548, U+C5B4, U+C5F4, U+C5FD, U+C694, U+C774, U+C790, U+C791, U+C7A5, U+C989, U+C9C0, U+CE74, U+D1A0, U+D37C, U+D398, U+D3B8, U+D3EC;
}
@font-face {
  font-family: 'Gowun Batang';
  src: url('fonts/GowunBatang-Regular-KR.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+1100-11FF, U+3000-32FF, U+AC00-ACFB, U+ACFD-ACFF, U+AD01-ADFF, U+AE01-AE2F, U+AE31-B0B0, U+B0B2-B154, U+B156-B4DB, U+B4DD-B78C, U+B78E-B85C, U+B85E-BA53, U+BA55-BAA7, U+BAA9-BBF7, U+BBF9-BCF3, U+BCF5-BD98, U+BD9A-C0AB, U+C0AD-C0C0, U+C0C2-C11B, U+C11E-C137, U+C139-C18B, U+C18D-C2DB, U+C2DD-C547, U+C549-C5B3, U+C5B5-C5F3, U+C5F5-C5FC, U+C5FE-C693, U+C695-C773, U+C775-C78F, U+C792-C7A4, U+C7A6-C988, U+C98A-C9BF, U+C9C1-CE73, U+CE75-D19F, U+D1A1-D37B, U+D37D-D397, U+D399-D3B7, U+D3B9-D3EB, U+D3ED-D7AF, U+FF00-FFEF;
}
@font-face {
  font-family: 'Gowun Batang';
  src: url('fonts/GowunBatang-Bold-Latin.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0020-017F, U+2000-20CF, U+2100-21FF, U+25A0-25FF, U+ACFC, U+AD00, U+AE00, U+AE30, U+B0B1, U+B155, U+B4DC, U+B78D, U+B85D, U+BA54, U+BAA8, U+BBF8, U+BCF4, U+BD99, U+C0AC, U+C0C1, U+C11C, U+C11D, U+C138, U+C18C, U+C2DC, U+C548, U+C5B4, U+C5F4, U+C5FD, U+C694, U+C774, U+C790, U+C791, U+C7A5, U+C989, U+C9C0, U+CE74, U+D1A0, U+D37C, U+D398, U+D3B8, U+D3EC;
}
@font-face {
  font-family: 'Gowun Batang';
  src: url('fonts/GowunBatang-Bold-KR.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+1100-11FF, U+3000-32FF, U+AC00-ACFB, U+ACFD-ACFF, U+AD01-ADFF, U+AE01-AE2F, U+AE31-B0B0, U+B0B2-B154, U+B156-B4DB, U+B4DD-B78C, U+B78E-B85C, U+B85E-BA53, U+BA55-BAA7, U+BAA9-BBF7, U+BBF9-BCF3, U+BCF5-BD98, U+BD9A-C0AB, U+C0AD-C0C0, U+C0C2-C11B, U+C11E-C137, U+C139-C18B, U+C18D-C2DB, U+C2DD-C547, U+C549-C5B3, U+C5B5-C5F3, U+C5F5-C5FC, U+C5FE-C693, U+C695-C773, U+C775-C78F, U+C792-C7A4, U+C7A6-C988, U+C98A-C9BF, U+C9C1-CE73, U+CE75-D19F, U+D1A1-D37B, U+D37D-D397, U+D399-D3B7, U+D3B9-D3EB, U+D3ED-D7AF, U+FF00-FFEF;
}
@font-face {
  font-family: 'Gowun Dodum';
  src: url('fonts/GowunDodum-Regular-Latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0020-017F, U+2000-20CF, U+2100-21FF, U+25A0-25FF, U+ACFC, U+AD00, U+AE00, U+AE30, U+B0B1, U+B155, U+B4DC, U+B78D, U+B85D, U+BA54, U+BAA8, U+BBF8, U+BCF4, U+BD99, U+C0AC, U+C0C1, U+C11C, U+C11D, U+C138, U+C18C, U+C2DC, U+C548, U+C5B4, U+C5F4, U+C5FD, U+C694, U+C774, U+C790, U+C791, U+C7A5, U+C989, U+C9C0, U+CE74, U+D1A0, U+D37C, U+D398, U+D3B8, U+D3EC;
}
@font-face {
  font-family: 'Gowun Dodum';
  src: url('fonts/GowunDodum-Regular-KR.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+1100-11FF, U+3000-32FF, U+AC00-ACFB, U+ACFD-ACFF, U+AD01-ADFF, U+AE01-AE2F, U+AE31-B0B0, U+B0B2-B154, U+B156-B4DB, U+B4DD-B78C, U+B78E-B85C, U+B85E-BA53, U+BA55-BAA7, U+BAA9-BBF7, U+BBF9-BCF3, U+BCF5-BD98, U+BD9A-C0AB, U+C0AD-C0C0, U+C0C2-C11B, U+C11E-C137, U+C139-C18B, U+C18D-C2DB, U+C2DD-C547, U+C549-C5B3, U+C5B5-C5F3, U+C5F5-C5FC, U+C5FE-C693, U+C695-C773, U+C775-C78F, U+C792-C7A4, U+C7A6-C988, U+C98A-C9BF, U+C9C1-CE73, U+CE75-D19F, U+D1A1-D37B, U+D37D-D397, U+D399-D3B7, U+D3B9-D3EB, U+D3ED-D7AF, U+FF00-FFEF;
}



:root {
  /* One photocard corner at every size: 6px on the 124 x 174 sleeve card, scaled with the card. */
  --photocard-r: 4.84% / 3.45%;
  /* One cold editorial palette across the room, book and printed pages. */
  --desk: #E4E8EA;
  --desk-shade: #D7DDE1;
  --desk-light: #F4F6F6;
  --paper-raised: #EEF1F2;
  --ink: #1D242B;
  --ink-body: #38434D;
  --ink-soft: #55626D;
  --ink-faint: #909BA4;
  --hairline: #C4CCD2;
  --accent: #33506F;
  --shade-rgb: 24 36 56;
  --ui-serif: 'Gowun Batang', 'NanumMyeongjo', serif;
  --ui-sans: 'Gowun Dodum', system-ui, sans-serif;

  /* Web stationery; the PDF edition has an independent palette. */
  --color-paper: #F5F7F7;
  --color-grid: #E1E7EB;
  --color-spine: #BCC8D1;
  --color-ink-main: #28343F;
  --color-ink-muted: #637482;
  --color-ink-pen: #384853;
  --color-line: #CAD4DC;
  --color-line-dark: #879AA9;
  --color-header-rule: #879AA9;
  --color-accent-sage: var(--accent);
  --color-badge-bg: #E0E8ED;
  --color-badge-text: #435462;
  --color-header-bg: #E5EBEF;

  /* Desk & Editorial Chrome Palette */
  --color-desk-bg: var(--desk);
  --color-bar-bg: #EEF1F2;
  --color-bar-border: #C4CCD2;

  /* Editorial type: Gowun Batang for titles, Gowun Dodum for controls, Gaegu for writing. */
  --font-hand: 'Gaegu', 'GaeguFallback', 'Gowun Dodum', cursive;
  --font-kr-serif: var(--ui-serif);
  --font-kr-serif-bold: 'NanumMyeongjo-Bold', 'NanumMyeongjo', serif;
  --font-serif: var(--ui-serif);
  --font-mono: 'Gowun Dodum', 'NanumMyeongjo', sans-serif;

  /* Archival Bookbinding Spine Cloth & Ribbon Palette */
  --spine-cloth-base: #2B351D;
  --spine-cloth-dark: #192011;
  --spine-cloth-light: #3D4B2A;
  --spine-cloth-ribbon: #52653A;

  /* Dynamic Viewport Scale for iPad Mini & Responsive Screens */
  --canvas-scale: 1;
  --menu-fade: 36px;

  /* Physical Book Edge Layers & Bookbinding */
  --color-block-edge-light: #E7ECEF;
  --color-block-edge-mid: #C2CDD5;
  --color-block-board-dark: #283D50;
  --color-cover-bg: #E8EDF0;
  --color-leaf-edge-border: #CDD7DF;
  --color-headband-bg: #EAF0F3;
  --color-headband-border: #2B4055;
  --color-outline-dashed: #33506F;

  /* UI Controls, Badges & Interactive States */
  --color-white: #FFFFFF;
  --color-btn-hover-bg: #E5EBEF;
  --color-status-error: #A2543F;
  --color-swatch-active: #3E3B38;
  --color-ink-disabled: #94A2AD;
  --color-shelf-cover-bg: #E8EDF0;
  --color-shelf-delete: #8998A4;
  --color-shelf-delete-hover: #A2543F;

  /* Color Picker Wheel */
  --color-wheel-red: #C74634;
  --color-wheel-yellow: #D4A017;
  --color-wheel-green: #2E7D32;
  --color-wheel-blue: #1565C0;
  --color-wheel-purple: #6A1B9A;
  --color-wheel-magenta: #C2185B;

  /* Picture Manipulation & Cropper Studio */
  --color-picture-handle: #1C1A18;
  --color-cropper-bg: #121110;

  /* Radii & Shadow Tokens */
  --ui-scale: 1;
  --radius-xs: 1.5px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 5px;
  --radius-2xl: 6px;
  --radius-pill: 20px;
  --radius-full: 50%;

  /* Shadow & Elevation Tokens */
  --shadow-subtle: 0 1px 2px rgba(40, 38, 36, 0.06);
  --shadow-dropdown: 0 10px 28px rgba(40, 38, 36, 0.12), 0 2px 6px rgba(40, 38, 36, 0.05);
  --shadow-modal: 0 16px 40px rgba(40, 38, 36, 0.16);
  --shadow-modal-btn: 0 6px 16px rgba(40, 38, 36, 0.10);
  --shadow-cropper: 0 24px 64px rgba(20, 18, 16, 0.4);
  --shadow-cropper-btn: 0 12px 36px rgba(0, 0, 0, 0.6);

  /* Proposal B UI palette tokens */
  --desk: #E4E8EA;
  --desk-deep: #D3DADF;
  --paper: #F5F7F7;
  --card: #FBFBF8;
  --ink: #28343F;
  --ink-2: #637482;
  --ink-3: #A6B1BA;
  --rule: #C6D0D6;
  --hair: #DCE2E6;
  --seal: #B2473B;
  --u: 1;
  color-scheme: light;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.room, html, body {
  background: radial-gradient(120% 90% at 70% 8%, #F2F5F6 0%, #E4E8EA 58%, #DAE1E4 100%);
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--color-ink-main);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  touch-action: manipulation;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
}

/* Editorial controls: keep shared utilities clean. */
.word-button {
  appearance: none; -webkit-appearance: none; border: 0; border-radius: 0; background: transparent;
  box-shadow: none; color: var(--ink-soft); font: 400 calc(13px * var(--ui-scale, 1))/1.5 var(--ui-sans);
  letter-spacing: 0.06em; cursor: pointer; min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; white-space: nowrap;
}
.word-button:hover { color: var(--ink); }
.word-button:disabled { color: var(--ink-faint); cursor: default; }
.word-button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   SHARED PLANNER COMPONENTS (Checkboxes, Headers, Placeholders)
   ========================================================================== */
[contenteditable] {
  outline: none;
  cursor: text;
  border-radius: 2px;
}

[contenteditable]:empty::before {
  content: attr(data-placeholder);
  color: var(--color-ink-disabled);
  pointer-events: none;
  opacity: 0;
}

[contenteditable]:focus:empty::before,
.journal-split-area:empty::before,
.monthly-memo-content:empty::before,
.daily-intention-phrase:empty::before,
.journal-custom-title:empty::before {
  opacity: 0.75;
}

/* A writing line is always one full line tall — also while it is empty and
   has no placeholder — so every row of the grid can be clicked to write. */
.schedule-event-input,
.task-input,
.memo-input,
.thought-input,
.this-month-input {
  min-height: 32px;
  letter-spacing: .1px;
}

/* Canonical 13 x 13 px Transparent Square Checkbox (r = 2px) */
.sq-checkbox {
  width: 13px;
  height: 13px;
  border: 0.75px solid var(--color-header-rule);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.12s ease;
}

.sq-checkbox::after,
.mini-cal-cell::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.sq-checkbox svg {
  width: 10px;
  height: 10px;
  stroke: var(--color-ink-pen);
  stroke-width: 1.35;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.12s ease;
}

.sq-checkbox.checked svg {
  opacity: 1;
  transform: scale(1);
}

.spread,
.monthly-view,
.daily-view {
  position: absolute;
  left: 0;
  top: 0;
  width: 1024px;
  height: 768px;
}

/* Top Running Headers optically centered in the top 32px grid band (y = 0..32px) */
.spread-top-header {
  position: absolute;
  top: 0;
  height: 32px;
  padding-top: 1px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.spread-top-title {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 2.2px;
  color: var(--color-ink-main);
  white-space: nowrap;
}

.spread-top-rule {
  flex: 1;
  height: 0.65px;
  background: var(--color-header-rule);
}

.spread-top-meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: var(--color-ink-main);
  white-space: nowrap;
}

/* ==========================================================================
   VIEW 1: MONTHLY PLAN SPREAD (Page 0)
   ========================================================================== */
/* Left Sidebar: Top Corner (x: 32px to 160px) */
.monthly-top-corner {
  position: absolute;
  left: 32px;
  top: 64px;
  width: 128px;
  height: 104px;
}

.monthly-top-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 5.5px;
  height: 64px;
  background: var(--color-accent-sage);
}

/* Month number and its 월, set side by side whatever the number's width */
.monthly-top-number {
  position: absolute;
  left: 14px;
  top: 2px;
  display: flex;
  align-items: flex-start;
}

.monthly-top-11 {
  margin-top: 2px;
  font-family: var(--font-kr-serif);
  font-size: 54px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-ink-main);
}

.monthly-top-wol {
  width: 48px;
  height: 56px;
  flex-shrink: 0;
}

.monthly-top-november {
  position: absolute;
  left: 6px;
  top: 72px;
  font-family: var(--font-serif);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 3.2px;
  color: var(--color-ink-main);
}

.monthly-top-date-row {
  position: absolute;
  left: 6px;
  top: 92px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 122px;
}

.monthly-top-202611 {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 2.0px;
  color: var(--color-ink-muted);
}

.monthly-top-dash {
  flex: 1;
  height: 0.7px;
  background: var(--color-header-rule);
}

/* Left Sidebar: DEC 2026 Mini-Calendar Card (x: 32px, top: 192px, 128 x 128 px) */
.dec-mini-card {
  position: absolute;
  left: 32px;
  top: 192px;
  width: 128px;
  height: 128px;
  background: var(--color-paper);
  border: 0.65px solid var(--color-line);
  border-radius: 4px;
  padding: 9px 8px 6px 8px;
  display: flex;
  flex-direction: column;
  user-select: none;
}

.dec-mini-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: var(--color-ink-main);
  margin-bottom: 6px;
}

.dec-mini-chevron {
  font-family: var(--font-serif);
  font-size: 9px;
  font-weight: 400;
  color: var(--color-ink-muted);
}

.dec-mini-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-family: var(--font-kr-serif);
  font-size: 7px;
  color: var(--color-ink-muted);
  margin-bottom: 4px;
}

.dec-mini-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  align-items: center;
  font-family: var(--font-serif);
  font-size: 7.5px;
  color: var(--color-ink-main);
}

/* Left Sidebar: THIS MONTH (Line at y = 352px = 11 * 32px) */
.monthly-this-month {
  position: absolute;
  left: 32px;
  top: 336px;
  width: 128px;
}

.section-title-mono {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: var(--color-ink-main);
  height: 15px;
  line-height: 15px;
}

.section-divider {
  height: 0.65px;
  background: var(--color-line);
  width: 100%;
}

.this-month-row,
.task-item {
  height: 32px;
  display: flex;
  align-items: center;
}

.this-month-check-wrap,
.task-checkbox-slot {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.this-month-input {
  flex: 1;
  font-family: var(--font-hand);
  font-size: 15.5px;
  line-height: 32px;
  color: var(--color-ink-pen);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 4px;
}

/* Left Sidebar: MEMO (Line at y = 480px = 15 * 32px, Open Grid Layout) */
.monthly-memo {
  position: absolute;
  left: 32px;
  top: 464px;
  width: 128px;
  height: 240px;
}

.monthly-memo-content {
  margin-top: 0;
  height: 224px;
  font-family: var(--font-hand);
  font-size: 15.5px;
  line-height: 32px;
  color: var(--color-ink-pen);
  white-space: pre-wrap;
  outline: none;
  padding: 0 4px;
}

/* Continuous 7-Column Monthly Calendar Table (x: 176px to 960px, width: 784px) */
.monthly-table {
  position: absolute;
  left: 176px;
  top: 64px;
  width: 784px;
  height: auto;
  background: var(--color-paper);
  border: 0.65px solid var(--color-line);
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.monthly-table[data-weeks="4"] { height: 576px; }
.monthly-table[data-weeks="5"] { height: 624px; }
.monthly-table[data-weeks="6"] { height: 640px; }

/* Table Header (height: 64px — Korean on top in NanumMyeongjo-Bold, English below in Times-Roman) */
.monthly-table-header {
  height: 64px;
  background: var(--color-header-bg);
  border-bottom: 0.65px solid var(--color-line);
  display: grid;
  grid-template-columns: repeat(7, 112px);
}

.monthly-th {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-right: 0.65px solid var(--color-line);
  user-select: none;
}

.monthly-th:last-child,
.month-cell:nth-child(7n),
.week-v-col:last-child {
  border-right: none;
}

.th-kr {
  font-family: var(--font-kr-serif-bold);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--color-ink-main);
  line-height: 1;
}

.th-en {
  font-family: var(--font-serif);
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: 1.2px;
  color: var(--color-ink-muted);
  line-height: 1;
}

/* Exact-Week Calendar Body (4w: 128px rows = 576px; 5w: 112px square rows = 624px; 6w: 96px rows = 640px) */
.monthly-grid-body {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 112px);
  grid-template-rows: repeat(6, 96px);
}
.monthly-table[data-weeks="4"] .monthly-grid-body {
  grid-template-rows: repeat(4, 128px);
}
.monthly-table[data-weeks="5"] .monthly-grid-body {
  grid-template-rows: repeat(5, 112px);
}
.monthly-table[data-weeks="4"] .month-cell-events {
  max-height: 92px;
}
.monthly-table[data-weeks="5"] .month-cell-events {
  max-height: 76px;
}

.month-cell {
  border-right: 0.65px solid var(--color-line);
  border-bottom: 0.65px solid var(--color-line);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.month-cell:nth-last-child(-n+7) {
  border-bottom: none;
}

.month-cell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 18px;
  margin-bottom: 2px;
}

.cell-date-btn {
  position: relative;
  align-self: flex-start;
  background: transparent;
  border: none;
  padding: 2px 5px;
  margin-left: -2px;
  border-radius: 3px;
  font-family: var(--font-serif);
  font-size: 11px;
  font-weight: 400;
  color: var(--color-ink-main);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cell-date-btn::after {
  content: "";
  position: absolute;
  inset: -6px -8px;
  min-width: 32px;
  min-height: 32px;
}

.cell-date-btn:focus-visible {
  background: var(--color-accent-sage);
  color: var(--color-white);
}

.cell-add-btn {
  position: relative;
  width: 17px;
  height: 17px;
  line-height: 15px;
  border-radius: 3px;
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: var(--color-ink-muted);
  font-family: var(--ui-sans);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  padding: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cell-add-btn::after {
  content: "";
  position: absolute;
  inset: -8px;
}

body.mode-edit #canvas-content .month-cell:hover .cell-add-btn,
body.mode-edit #canvas-content .cell-add-btn:focus-visible {
  opacity: 1;
}

.cell-add-btn:hover {
  color: var(--color-ink-main);
}

.cell-add-btn:focus-visible {
  background: transparent;
  color: var(--color-ink-main);
  outline: none;
  text-shadow: 0 0 .3px currentColor;
}

.month-cell-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 2px;
  flex-shrink: 0;
  max-height: 66px;
  overflow-y: auto;
  scrollbar-width: none;
}

.month-cell-events::-webkit-scrollbar {
  display: none;
}

.month-event {
  display: flex;
  align-items: stretch;
  gap: 4px;
  cursor: pointer;
  padding: 1px 2px;
  border-radius: 3px;
  background: transparent;
  transition: background-color 0.12s ease;
  user-select: none;
  flex-shrink: 0;
}

.month-event:focus-visible {
  background-color: rgba(30, 45, 60, 0.07);
  outline: none;
}

.month-event-bar {
  width: 3px;
  min-width: 3px;
  border-radius: 1.5px;
  background-color: #6B9EB8;
}

.month-event-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  line-height: 1.15;
}

.month-event-time {
  font-family: var(--font-hand);
  font-size: 12px;
  font-weight: 400;
  color: var(--color-ink-muted);
  letter-spacing: 0.3px;
}

.month-event-title {
  font-family: var(--font-hand);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-ink-main);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.cell-notes {
  flex: 1 1 0;
  min-height: 20px;
  margin-top: 2px;
  font-family: var(--font-hand);
  font-size: 14.5px;
  line-height: 20px;
  color: var(--color-ink-pen);
  white-space: pre-wrap;
  overflow: hidden;
}

/* ==========================================================================
   VIEW 2: DAILY SPREAD (Pages 1 to 30)
   ========================================================================== */
/* Left Page: Hero Date Block (x: 32px, top: 32px) */
.daily-hero-block {
  position: absolute;
  left: 32px;
  top: 32px;
  width: 224px;
  height: 130px;
}

.daily-hero-bar {
  position: absolute;
  left: 0;
  top: 24px;
  width: 6px;
  height: 64px;
  background: var(--color-accent-sage);
}

.daily-hero-date {
  position: absolute;
  left: 14px;
  top: 23px;
  font-family: var(--font-kr-serif);
  font-size: 72px;
  font-weight: 400;
  line-height: 0.92;
  color: var(--color-ink-main);
  letter-spacing: -1px;
  user-select: none;
}

.daily-pill-row {
  position: absolute;
  left: 2px;
  top: 101px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.daily-weekday-pill {
  height: 22px;
  background: var(--color-badge-bg);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: var(--color-badge-text);
  user-select: none;
  flex-shrink: 0;
}

.daily-intention-phrase {
  min-height: 22px;
  font-family: var(--font-hand);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-ink-pen);
  white-space: nowrap;
  padding: 0 4px;
  min-width: 110px;
}

/* Left Page Column 1: SCHEDULE (x: 32px, top: 176px, w: 224px) */
.daily-schedule {
  position: absolute;
  left: 32px;
  top: 176px;
  width: 224px;
  height: 560px;
}

.schedule-header,
.tasks-header,
.thoughts-header {
  height: 16px;
  display: flex;
  align-items: center;
  border-bottom: 0.65px solid var(--color-line-dark);
  padding-bottom: 3px;
  margin-bottom: 0;
  user-select: none;
}

.schedule-header-title,
.tasks-header-title,
.thoughts-header-title {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 2.2px;
  color: var(--color-ink-main);
}

.schedule-rows,
.daily-memo-lines,
.thoughts-rows {
  display: flex;
  flex-direction: column;
}

.schedule-row {
  height: 32px;
  display: flex;
  align-items: center;
  position: relative;
}

.schedule-hour-cell {
  width: 32px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  line-height: 11px;
  color: var(--color-ink-muted);
  text-align: center;
  user-select: none;
  flex-shrink: 0;
}

.schedule-timebar-btn {
  position: relative;
  width: 4.5px;
  height: 28px;
  border-radius: 2px;
  background: transparent;
  border: none;
  margin: 0 4px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background-color 0.12s ease;
}

.schedule-timebar-btn::after {
  content: "";
  position: absolute;
  inset: -2px -14px;
}

.schedule-timebar-btn.active {
  background: var(--color-accent-sage);
}

.schedule-slot-content {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: text;
}

.schedule-event-input {
  flex: 1;
  min-width: 2px;
  font-family: var(--font-hand);
  font-size: 16.5px;
  line-height: 32px;
  color: var(--color-ink-pen);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-event-input.has-linked {
  flex: 0 1 auto;
  max-width: 100%;
}

.schedule-linked-events {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-hand);
  font-size: 16.5px;
  line-height: 32px;
  color: var(--color-ink-pen);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  user-select: none;
}

.schedule-event-input.has-text + .schedule-linked-events::before {
  content: "; ";
  color: var(--color-ink-muted);
}

/* Left Page Column 2: Mini-Calendar (x: 272px, top: 40px, w: 192px, h: 128px) */
.daily-mini-calendar {
  position: absolute;
  left: 272px;
  top: 40px;
  width: 192px;
  height: 128px;
  background: var(--color-paper);
  border: 0.65px solid var(--color-line);
  border-radius: 4px;
  padding: 6px 10px 7px 10px;
  display: flex;
  flex-direction: column;
  user-select: none;
}

.mini-cal-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  margin-bottom: 3px;
}

.mini-cal-title {
  background: transparent;
  border: none;
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--color-ink-main);
  cursor: pointer;
  padding: 1px 8px;
  border-radius: 3px;
  transition: background-color 0.15s ease;
}

.mini-cal-title:focus-visible {
  background: rgba(142, 163, 161, 0.16);
}

.mini-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-family: var(--font-kr-serif);
  font-size: 8.5px;
  line-height: 1.1;
  color: var(--color-ink-muted);
  margin-bottom: 2px;
}

.mini-cal-matrix {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(var(--mini-weeks, 6), 1fr);
  text-align: center;
  align-items: center;
}

.mini-cal-cell {
  font-family: var(--font-serif);
  font-size: 8.5px;
  color: var(--color-ink-muted);
  width: 13px;
  height: 13px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.mini-cal-cell:focus-visible:not(:empty):not(.active) {
  background: var(--color-block-edge-light);
  color: var(--color-ink-main);
}

.mini-cal-cell.active {
  background: var(--color-accent-sage);
  color: var(--color-white);
  font-weight: 500;
  font-size: 8px;
}

/* Left Page Column 2: TASKS (x: 256px, top: 176px -> items start at 192px = 6 * 32px) */
.daily-tasks {
  position: absolute;
  left: 256px;
  top: 176px;
  width: 208px;
}

.task-input {
  flex: 1;
  font-family: var(--font-hand);
  font-size: 16.5px;
  line-height: 32px;
  color: var(--color-ink-pen);
  padding-left: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Left Page Column 2: TOMORROW (x: 256px, top: 400px -> items start at 416px = 13 * 32px) */
.daily-tomorrow {
  position: absolute;
  left: 256px;
  top: 400px;
  width: 208px;
}

/* Left Page Column 2: MEMO Card (x: 272px, top: 544px = 17 * 32px, 192 x 192 px = 6 rows flush with Schedule at y=736px) */
.daily-memo-card {
  position: absolute;
  left: 272px;
  top: 544px;
  width: 192px;
  height: 192px;
  background: var(--color-paper);
  border: 0.65px solid var(--color-line);
  border-radius: 4px;
  padding: 0 12px;
}

.daily-memo-badge {
  position: absolute;
  left: 14px;
  top: -16px;
  width: 60px;
  height: 16px;
  background: var(--color-badge-bg);
  border-radius: 2.5px 2.5px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 1.8px;
  color: var(--color-badge-text);
  user-select: none;
}

.daily-memo-row {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.memo-bullet-circle {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--color-ink-pen);
  opacity: 0.72;
  flex-shrink: 0;
  margin-left: 4px;
}

.memo-input {
  flex: 1;
  font-family: var(--font-hand);
  font-size: 16px;
  line-height: 32px;
  color: var(--color-ink-pen);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   RIGHT PAGE: JOURNAL & THOUGHTS (x: 512px to 1024px)
   ========================================================================== */

/* Journal Title & Printed Date (x: 544px, top: 48px, height: 48px) */
.journal-title-block {
  position: absolute;
  left: 544px;
  top: 48px;
  width: 448px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.journal-title-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.journal-accent-bar {
  width: 6px;
  height: 48px;
  background: var(--color-accent-sage);
  flex-shrink: 0;
}

.journal-custom-title {
  min-height: 48px;
  font-family: var(--font-hand);
  font-size: 44px;
  letter-spacing: 0;
  color: var(--color-ink-main);
  line-height: 48px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
  min-width: 180px;
}

.journal-date-kr {
  font-family: var(--font-kr-serif);
  font-size: 11.5px;
  color: var(--color-ink-pen);
  align-self: flex-start;
  margin-top: 2px;
  user-select: none;
  flex-shrink: 0;
}

/* Journal Body Writing Areas (100% Locked to 32px Square Grid) */
/* The journal: one flowing text of 15 rows (y 96..576). The field sits in
   normal flow after a column of invisible shims, so its lines shorten where a
   picture or text box lies over them (js/text-wrap.js). */
.journal-flow {
  position: absolute;
  left: 544px;
  top: 96px;
  width: 448px;
  height: 480px;
  overflow: hidden;
}

.journal-split-area {
  min-height: 480px;
  font-family: var(--font-hand);
  font-size: 17px;
  line-height: 32px;
  letter-spacing: .1px;
  color: var(--color-ink-pen);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* One pair per row: they only take width away from that row's line */
.journal-shim {
  display: block;
  height: 32px;
  pointer-events: none;
}

.journal-shim--left {
  float: left;
  clear: left;
}

.journal-shim--right {
  float: right;
  clear: right;
}

/* Bottom Right: THOUGHTS (Header at 592..608px, rows locked to 32px grid from 608px) */
.journal-thoughts-wrap {
  position: absolute;
  left: 544px;
  top: 592px;
  width: 448px;
}

.thought-row {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.thought-square-bullet {
  width: 6px;
  height: 6px;
  background: var(--color-accent-sage);
  flex-shrink: 0;
}

.thought-input {
  flex: 1;
  font-family: var(--font-hand);
  font-size: 17px;
  line-height: 32px;
  color: var(--color-ink-pen);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   FREE PICTURES — images placed anywhere on the spread (js/pictures.js)
   ========================================================================== */
.free-picture {
  position: absolute;
  z-index: 20;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.free-picture:active {
  cursor: grabbing;
}

.free-picture img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Selection frame & controls: outside the spread, never exported */
.picture-controls {
  position: absolute;
  left: 0;
  top: 0;
  width: 1024px;
  height: 768px;
  z-index: 35;
  pointer-events: none;
}

.picture-frame {
  position: absolute;
  outline: none;
}

.picture-handle {
  position: absolute;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  background: var(--color-paper);
  border: 1px solid var(--color-line-dark);
  border-radius: 1.5px;
  pointer-events: auto;
  touch-action: none;
}

/* A generous invisible grip around each handle for fingers */
.picture-handle::after {
  content: "";
  position: absolute;
  left: -12px;
  top: -12px;
  right: -12px;
  bottom: -12px;
}

.picture-handle[data-grip="nw"], .text-box-handle-nw { left: 0; top: 0; cursor: nwse-resize; }
.picture-handle[data-grip="ne"], .text-box-handle-ne { left: 100%; top: 0; cursor: nesw-resize; }
.picture-handle[data-grip="se"], .text-box-handle-se { left: 100%; top: 100%; cursor: nwse-resize; }
.picture-handle[data-grip="sw"], .text-box-handle-sw { left: 0; top: 100%; cursor: nesw-resize; }

.picture-rotate {
  left: 50%;
  top: -26px;
  border-radius: 50%;
  cursor: grab;
}

.picture-rotate-stem {
  position: absolute;
  left: 50%;
  top: -26px;
  width: 1px;
  height: 26px;
  margin-left: -0.5px;
  background: var(--color-accent-sage);
}

/* ==========================================================================
   EDITORIAL CONFIRMATION MODAL
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(40, 38, 36, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
}

.modal-title { margin-bottom: 10px; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.is-empty-row .memo-bullet-circle,
.is-empty-row .thought-square-bullet {
  opacity: 0.32;
  transition: opacity 0.15s ease;
}

.is-empty-row:focus-within .memo-bullet-circle,
.is-empty-row:focus-within .thought-square-bullet {
  opacity: 1;
}

/* ==========================================================================
   EDITORIAL COVER COMPOSITION STUDIO (Crop, Zoom & Pan Modal)
   ========================================================================== */
.crop-modal-backdrop {
  z-index: 600;
  background: rgb(228 235 239);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.crop-modal-dialog {
  width: 420px;
  max-width: 100%;
  max-height: 94vh;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  overflow: hidden;
  animation: cropModalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cropModalFadeIn {
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.crop-modal-header {
  height: 48px;
  min-height: 48px;
  padding: 0;
  background: transparent;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.crop-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.crop-title {
  font: 400 18px/1.3 var(--ui-serif);
  letter-spacing: 0;
  color: var(--ink);
}

.crop-aspect-badge {
  font: 400 10px/1.4 var(--ui-sans);
  letter-spacing: .02em;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}

.crop-close-btn {
  background: transparent;
  border: none;
  color: var(--color-ink-muted);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.crop-close-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-ink-main);
}

/* Crop Viewport Arena */
.crop-viewport-arena {
  background: transparent;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.crop-frame-wrapper {
  position: relative;
  width: 320px;
  height: 480px;
  box-shadow: 0 8px 24px rgb(21 35 58 / .16);
}

/* Registration Marks at 4 corners */
.crop-frame-wrapper::after {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  z-index: 10;
  opacity: 0.85;
  background:
    linear-gradient(#6E7F8B, #6E7F8B) 0 0 / 12px 1.5px, linear-gradient(#6E7F8B, #6E7F8B) 0 0 / 1.5px 12px,
    linear-gradient(#6E7F8B, #6E7F8B) 100% 0 / 12px 1.5px, linear-gradient(#6E7F8B, #6E7F8B) 100% 0 / 1.5px 12px,
    linear-gradient(#6E7F8B, #6E7F8B) 0 100% / 12px 1.5px, linear-gradient(#6E7F8B, #6E7F8B) 0 100% / 1.5px 12px,
    linear-gradient(#6E7F8B, #6E7F8B) 100% 100% / 12px 1.5px, linear-gradient(#6E7F8B, #6E7F8B) 100% 100% / 1.5px 12px;
  background-repeat: no-repeat;
}

/* Interactive Viewport (320 × 480 px, exact 2:3 ratio) */
.crop-viewport {
  position: relative;
  width: 320px;
  height: 480px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background-color: var(--color-cropper-bg);
}

.crop-viewport.is-grabbing {
  cursor: grabbing;
}

#crop-canvas {
  display: block;
  width: 320px;
  height: 480px;
}

/* 3×3 Rule of Thirds Grid */
.crop-grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  border: 1px solid rgba(250, 249, 245, 0.35);
  background:
    linear-gradient(to right, transparent calc(33.333% - 0.5px), rgba(250, 249, 245, 0.2) 33.333%, transparent calc(33.333% + 0.5px), transparent calc(66.666% - 0.5px), rgba(250, 249, 245, 0.2) 66.666%, transparent calc(66.666% + 0.5px)),
    linear-gradient(to bottom, transparent calc(33.333% - 0.5px), rgba(250, 249, 245, 0.2) 33.333%, transparent calc(33.333% + 0.5px), transparent calc(66.666% - 0.5px), rgba(250, 249, 245, 0.2) 66.666%, transparent calc(66.666% + 0.5px));
}

/* Drag Hint */
.crop-drag-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgb(237 242 245 / .85);
  border: 0;
  border-radius: 0;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #53636E;
  font-family: var(--ui-sans);
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: .02em;
  pointer-events: none;
  z-index: 8;
  white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.crop-drag-hint.faded {
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
}

/* Controls Toolbar */
.crop-controls-bar {
  background: transparent;
  border: 0;
  padding: 8px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.crop-zoom-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.crop-control-label {
  font: 400 10px/1.4 var(--ui-sans);
  letter-spacing: .03em;
  color: var(--color-ink-muted);
}

.crop-tool-btn {
  min-width: 40px;
  min-height: 40px;
  border: 0;
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-ink-main);
  font: 400 11px/1.4 var(--ui-sans);
  letter-spacing: .02em;
  transition: all 0.15s ease;
}

.crop-tool-btn:hover {
  background: transparent;
  color: var(--ink);
}

.crop-tool-btn.text-btn {
  width: auto;
  padding: 0 8px;
  gap: 5px;
}

.crop-tools-cluster {
  display: flex;
  align-items: center;
  gap: 6px;
}

.crop-slider {
  flex: 1;
  min-width: 65px;
  max-width: 110px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-line);
  border-radius: 2px;
  outline: none;
}

.crop-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-ink-main);
  border: 2px solid var(--color-paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.crop-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.crop-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-ink-main);
  border: 2px solid var(--color-paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.crop-val-badge {
  font: 400 10px/1.4 var(--ui-sans);
  letter-spacing: .03em;
  color: var(--color-ink-main);
  min-width: 34px;
  text-align: right;
}

/* Modal Footer */
.crop-modal-footer {
  padding: 10px 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.crop-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hidden {
  display: none !important;
}

#planner-stage { touch-action: none; }
#library-shelf:focus-visible { text-decoration: underline; }
#canvas-content [contenteditable] { touch-action: pan-y; font-family: var(--font-hand); }

/* ==========================================================================
   EVENT & SCHEDULE MODAL
   ========================================================================== */
/* A slip of the planner's own paper laid on the desk: the same grid, the date
   set like a daily page (accent bar + serif numerals), fields written on ruled
   lines instead of boxed inputs, and every control a printed word. */
.event-modal {
  width: 416px;                 /* 13 grid squares */
  max-width: 92vw;
  border: 0;
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgb(var(--shade-rgb) / 0.10),
    0 22px 48px rgb(var(--shade-rgb) / 0.20);
  padding: 32px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  box-sizing: border-box;
}

#event-modal-backdrop {
  background: rgb(var(--shade-rgb) / 0.16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.event-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.event-modal-date {
  font-family: var(--ui-serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.event-modal-weekday {
  margin-left: 12px;
  font: 400 12px/1 var(--ui-sans);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.event-modal-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.event-field-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.event-field-label {
  font: 400 10px/1.6 var(--ui-sans);
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.event-time-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
}

/* Written on a ruled line, not typed into a box */
.event-input {
  appearance: none;
  width: 100%;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  outline: none;
  box-sizing: border-box;
  font-family: var(--font-hand);
  font-size: 20px;
  color: var(--color-ink-pen);
  transition: border-color 0.15s ease;
}

.event-input::placeholder {
  color: var(--ink-faint);
  opacity: 0.8;
}

.event-input:focus {
  border-bottom-color: var(--accent);
}

.event-time-input {
  flex: none;
  width: 96px;
  font-family: var(--font-hand);
  font-size: 22px;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.event-preset-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
}

.event-preset-pill {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  min-height: 32px;
  font: 400 11px/1.4 var(--ui-sans);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.12s ease;
}

.event-preset-pill:hover {
  color: var(--ink);
}

.event-palette-container {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-top: 8px;
}

/* Ink swatches: flat chips; the chosen one is underlined in ink */
.event-swatch-btn {
  appearance: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  transition: transform 0.12s ease;
}

.event-swatch-btn:hover {
  transform: translateY(-1px);
}

.event-swatch-btn.is-selected::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--ink);
}

.event-swatch-color-picker {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* The planner's own square checkbox */
.event-sync-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  font: 400 12px/1.4 var(--ui-sans);
  letter-spacing: 0.03em;
  color: var(--ink-body);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.event-sync-option input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 13px;
  height: 13px;
  margin: 0;
  border: 0.75px solid var(--ink-soft);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.event-sync-option input:checked::after {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 0.5px;
  width: 3.5px;
  height: 7px;
  border: solid var(--ink);
  border-width: 0 1.3px 1.3px 0;
  transform: rotate(40deg);
}

.event-sync-option input:focus-visible {
  outline: none;
}

.event-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}

.event-actions-right {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

/* ==========================================================================
   FREE TEXT BOXES
   ========================================================================== */
.free-text-box {
  position: absolute;
  box-sizing: border-box;
  padding: 6px 10px;
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 4px;
  cursor: text;
  user-select: text;
  z-index: 10;
  transition: border-color 0.15s ease;
}

.free-text-box.is-selected {
  border-color: transparent;
}

.free-text-box.is-locked {
  cursor: default;
}

.text-box-body {
  font-family: var(--font-hand);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-ink-pen);
  outline: none;
  min-height: 24px;
  white-space: pre-wrap;
  word-break: break-word;
}

.text-box-body:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-faint);
  pointer-events: none;
}

.text-box-lock-indicator {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
}

/* Text box controls frame and action bar (in #planner-canvas) */
.text-box-controls {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
}

.text-box-controls.hidden {
  display: none;
}

.text-box-frame {
  position: absolute;
  border: 0;
  border-radius: 4px;
  box-sizing: border-box;
  pointer-events: none;
}

.text-box-frame.is-locked {
  border: 1.5px dashed var(--ink-faint);
}

.text-box-drag-handle {
  position: absolute;
  top: -24px;
  left: 0;
  height: 20px;
  padding: 0 8px;
  background: var(--accent);
  color: #FFF;
  border-radius: 3px 3px 0 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.8px;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.text-box-drag-handle:active {
  cursor: grabbing;
}

.text-box-frame.is-locked .text-box-drag-handle {
  background: var(--ink-soft);
  cursor: not-allowed;
}

.text-box-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  background: #FFF;
  border: 1.5px solid var(--accent);
  border-radius: 2px;
  pointer-events: auto;
  touch-action: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.text-box-frame.is-locked .text-box-handle {
  display: none;
}

.event-schedule-note { margin: -12px 0 0; color: var(--ink-soft); font: 400 11px/1.5 var(--ui-sans); }
.event-schedule-note:empty { display: none; }
.event-sync-option:has(input:disabled) { color: var(--ink-faint); }
.month-event-time:empty { display: none; }

/* ==========================================================================
   EDITORIAL LOADING SCREEN (Subtle floating indicator without opaque backdrop)
   ========================================================================== */
.notebook-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.16s ease, visibility 0.16s ease;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.notebook-loader.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 20px;
}

.loader-track {
  width: 120px;
  height: 2px;
  background: rgba(40, 52, 63, 0.15);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
}

.loader-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: var(--accent, #33506F);
  border-radius: 1px;
  animation: loader-slide 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes loader-slide {
  0% { left: -40%; width: 30%; }
  50% { left: 30%; width: 50%; }
  100% { left: 100%; width: 40%; }
}

.loader-status {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--ink-soft, #6C7D8C);
  text-transform: lowercase;
}

/* Spine crease & controls protection against selection outline / highlight */
.spine-line,
.spine-crease-ambient,
.text-box-controls,
.text-box-frame,
#planner-stage,
#planner-book,
#planner-canvas {
  user-select: none;
  -webkit-user-select: none;
}

/* ==========================================================================
   LITERAL BLANK SPREAD, PAPER CONTROLS & PAGE ORGANIZER
   ========================================================================== */
.blank-view {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: text;
}
body.mode-view .blank-view { cursor: default; }
#planner-book[data-paper="grid"] .blank-view .text-box-body {
  line-height: 32px;
}

.blank-org-modal {
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100dvh - 36px);
  display: flex;
  flex-direction: column;
}
.blank-org-body {
  display: block;
}
.blank-org-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 16px;
}
.blank-org-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--hairline);
  background: var(--paper-sheet, #F5F7F7);
  border-radius: 3px;
  transition: transform 0.14s ease, border-color 0.14s ease;
  outline: none;
}
.blank-org-card:focus-visible {
  border-color: var(--ink);
}
.blank-org-card.is-active {
  border-color: var(--accent, var(--ink));
}
.blank-org-card.is-dragging {
  opacity: 0.35;
}
.blank-org-card.is-drop-target {
  border-color: var(--accent, var(--ink));
  background: color-mix(in srgb, var(--accent, var(--ink)) 6%, var(--paper-sheet, #F5F7F7));
}
.blank-org-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-soft);
}
.blank-org-current-badge {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, var(--ink));
}
.blank-org-preview-wrap {
  cursor: pointer;
}
.blank-org-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: #FAFBFB;
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.blank-org-thumb.is-grid {
  background-image:
    linear-gradient(to right, rgba(35, 51, 66, 0.10) 0.5px, transparent 0.5px),
    linear-gradient(to bottom, rgba(35, 51, 66, 0.10) 0.5px, transparent 0.5px);
  background-size: 8px 8px;
}
.blank-org-thumb::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(35, 51, 66, 0.10);
  pointer-events: none;
}
.blank-org-thumb-img {
  position: absolute;
  object-fit: cover;
  pointer-events: none;
}
.blank-org-thumb-box {
  position: absolute;
  font-family: var(--font-hand);
  font-size: 7px;
  line-height: 1.15;
  color: var(--color-ink-pen, #28343F);
  overflow: hidden;
  pointer-events: none;
  white-space: pre-wrap;
}
.blank-org-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
}
.blank-org-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-sheet, #F5F7F7);
  border: 1px solid var(--accent, var(--ink));
  font-size: 12px;
  color: var(--ink);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ======================================================================
   POSTCARD BINDER — die-cut film, welded pockets and loose printed cards.
   All highlights belong to the plastic, above the cards, and turn with it.
   ====================================================================== */
.binder-view { position: absolute; inset: 0; width: 1024px; height: 768px; }
.binder-sheet {
  position: absolute; z-index: 4; border-radius: 3px; isolation: isolate;
  perspective: 1800px; transform-style: preserve-3d;
}
.binder-rest-panel { position: absolute; top: 0; height: 640px; overflow: hidden; transform-style: preserve-3d; }
.leaf-strip .binder-sheet, .leaf-strip .binder-rest-panel { transform-style: flat; perspective: none; }
.binder-rest-panel--0 { transform-origin: right center; transform: rotateY(5deg); }
.binder-rest-panel--1 { transform-origin: left center; transform: rotateY(-5deg); }
.binder-panel-content { position: absolute; top: 0; width: 482px; height: 640px; }
.binder-fold { position: absolute; top: 1px; bottom: 1px; width: 12px; background: linear-gradient(90deg, rgb(55 72 83 / 0.01), rgb(55 72 83 / 0.12) 43%, rgb(55 72 83 / 0.22) 49%, rgb(255 255 255 / 0.85) 56%, rgb(55 72 83 / 0.04) 78%, transparent); pointer-events: none; }
.binder-film { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 2px 1px rgb(27 43 52 / 0.1)); }
.binder-film path { fill: rgb(243 245 243 / 0.985); stroke: rgb(252 254 254 / 0.86); stroke-width: 1.2px; }
.binder-film .binder-clear-film { fill: rgb(232 240 245 / 0.28); stroke: rgb(245 250 253 / 0.65); }
.binder-reinforcement {
  position: absolute; top: 8px; bottom: 8px; width: 25px; pointer-events: none;
  border-inline: 1px solid rgb(248 253 255 / 0.32);
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgb(255 255 255 / 0.08) 3px 4px);
  -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000);
}
.binder-sheet--left .binder-reinforcement { right: 26px; width: 5px; }
.binder-sheet--right .binder-reinforcement { left: 25px; width: 5px; }
.binder-sheet-mark { position: absolute; bottom: 14px; left: 40px; font: 400 7px/1 var(--ui-sans); letter-spacing: 1.5px; color: rgb(44 61 69 / 0.46); }
.binder-pocket {
  position: absolute; width: 208px; height: 168px; border-radius: 1px 1px 3px 3px;
  border: 1px solid rgb(248 252 254 / 0.72); border-top-color: rgb(252 254 255 / 0.84);
  background: linear-gradient(125deg, rgb(236 243 247 / 0.34), rgb(228 237 242 / 0.24) 48%, rgb(236 243 247 / 0.30));
  box-shadow: 1px 1px 0 rgb(49 69 79 / 0.11), inset 0 -2px 0 rgb(240 247 250 / 0.22);
}
.binder-pocket.is-filled {
  border-color: rgb(244 249 251 / 0.56); border-top-color: rgb(250 253 255 / 0.70);
  background: linear-gradient(125deg, rgb(236 243 247 / 0.14), rgb(228 237 242 / 0.09) 48%, rgb(236 243 247 / 0.12));
  box-shadow: 1px 1px 0 rgb(49 69 79 / 0.10), inset 0 -2px 0 rgb(240 247 250 / 0.14);
}
.binder-pocket::before { content: ""; position: absolute; inset: 4px 3px 3px; border: 1px solid rgb(248 252 254 / 0.50); border-top: 0; pointer-events: none; z-index: 2; }
.binder-pocket.is-filled::before { border-color: rgb(244 249 252 / 0.34); }
.binder-pocket::after {
  content: ""; position: absolute; inset: 1px; pointer-events: none; z-index: 3;
  background: linear-gradient(119deg, transparent 8%, rgb(255 255 255 / 0.04) 30%, rgb(255 255 255 / 0.09) 48%, rgb(255 255 255 / 0.04) 66%, transparent 84%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14);
}
.binder-pocket.is-filled::after {
  background: linear-gradient(119deg, transparent 8%, rgb(255 255 255 / 0.015) 30%, rgb(255 255 255 / 0.04) 48%, rgb(255 255 255 / 0.015) 66%, transparent 84%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.10);
}
.binder-pocket.is-target {
  outline: 1.5px solid rgb(83 99 110 / 0.58); outline-offset: 2px;
  background: linear-gradient(125deg, rgb(244 249 252 / 0.55), rgb(232 241 247 / 0.40) 48%, rgb(244 249 252 / 0.50));
}
.binder-add, .binder-card, .binder-grid-empty-btn { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; }
.binder-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 100%; background: transparent; color: rgb(43 62 73 / 0.4);
}
.binder-add-mark { font: 300 22px/1 var(--ui-serif); }
.binder-add-no { font: 400 8px/1 var(--ui-sans); letter-spacing: 0.16em; }
.binder-add:hover, .album-step:hover:not(:disabled), .binder-grid-empty-btn:hover { color: var(--ink); }
.binder-add:focus-visible { color: #53636E; }
.binder-add:focus-visible .binder-add-no { text-decoration: underline; text-decoration-color: #84929B; text-underline-offset: 4px; }
.binder-card {
  position: absolute; left: 7px; top: 10px; width: 192px; height: 144px; overflow: hidden;
  border: 5px solid #F5F4EF; background: #F5F4EF;
  box-shadow: 0 1px 3px rgb(26 42 51 / 0.25), 0 0 0 0.5px rgb(64 76 82 / 0.12);
  transform: rotate(-0.45deg); cursor: grab;
}
.binder-pocket:nth-of-type(even) .binder-card { transform: rotate(0.4deg); }
:is(.binder-card, .binder-under-card, .binder-card-stamp, .album-face--front, .album-stamp, .binder-grid-card-drag, .desk-thing .thing-back-print) img,
.desk-thing .thing-back-print { display: block; width: 100%; height: 100%; object-fit: cover; }

.binder-rings { display: none; position: absolute; inset: 0; width: 1024px; height: 768px; z-index: 40; pointer-events: none; }
#planner-book[data-binder] .binder-rings { display: block; }
.binder-rings::before {
  content: ""; position: absolute; left: 500px; top: 82px; width: 24px; height: 604px;
  border-radius: 12px; border: 1px solid #89969F;
  background: linear-gradient(90deg, #7F8C96, #E0E6E9 22%, #A5B0B8 50%, #F4F7F8 75%, #7B8993);
  box-shadow: 2px 2px 3px rgb(24 42 54 / 0.2);
}
.binder-ring {
  position: absolute; left: 480px; width: 64px; height: 38px; margin-top: -19px;
  border: 4px solid #CDD6DC; border-top-color: #F3F6F8; border-bottom-color: #65737F;
  border-radius: 50%; box-shadow: 0 2px 2px rgb(25 42 55 / 0.25), inset 0 1px 0 #71828E;
}

.type-cover.type-cover--binder { background: transparent; }
.book3d .closed-book-cover:has(.type-cover--binder), .shelf-book-cover:has(.type-cover--binder) { background-color: transparent; }
.binder-label {
  position: absolute; left: 104px; top: 128px; width: 308px; padding: 18px 22px 16px;
  background: #EEF1F2; border: 1px solid rgb(var(--shade-rgb) / 0.22); color: var(--ink);
}
.binder-label-top { display: flex; align-items: center; gap: 10px; font: 400 8px/1 var(--ui-sans); letter-spacing: 0.22em; }
.binder-label-top .type-cover-rule, .album-rule { flex: 1; height: 1px; background: var(--hairline); }
.binder-label-title { margin-top: 26px; font: 400 36px/1.1 var(--ui-serif); letter-spacing: 0.01em; overflow-wrap: anywhere; }
.binder-label-rule { height: 1px; margin: 18px 0 10px; background: var(--ink-faint); }
.binder-label-meta { display: flex; justify-content: space-between; font: 400 9px/1 var(--ui-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }

/* Album viewer */
.album-viewer { z-index: 400; background: rgb(231 237 241 / 0.72); }
.album-sheet { position: relative; display: flex; flex-direction: column; gap: 14px; width: min(900px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 22px 28px 16px; }
.album-head { display: flex; align-items: center; justify-content: center; min-height: 36px; gap: 16px; }
.album-head[hidden], .album-actions[hidden], .album-foot [hidden] { display: none !important; }
.album-stage { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 0; perspective: 1600px; }
.album-step { appearance: none; -webkit-appearance: none; flex: 0 0 44px; height: 44px; border: 0; background: transparent; font: 300 22px/1 var(--ui-serif); color: var(--ink-soft); cursor: pointer; }
.album-step:disabled { color: var(--ink-faint); opacity: 0.4; cursor: default; }
.album-card {
  position: relative; flex: 0 1 auto; transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  width: var(--album-w, min(760px, calc(100vw - 64px), calc((100dvh - 250px) * 1.3333)));
  aspect-ratio: var(--album-ar, 4 / 3); touch-action: none; cursor: grab; will-change: transform;
}
.album-card:active, .binder-grid-card-drag:active { cursor: grabbing; }
.album-card::before { content: ""; position: absolute; inset: 0; border-radius: var(--album-r, 0); background: #DCDDD6; box-shadow: 0 14px 30px rgb(40 55 65 / .22); }
.album-card[data-side="back"] { transform: rotateY(180deg); }
.album-card[data-facing="front"] .album-face--back, .album-card[data-facing="back"] .album-face--front { visibility: hidden; pointer-events: none; }
.album-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: var(--album-b, 14px solid #F5F4EF); border-radius: var(--album-r, 0);
  background-color: var(--album-bg, #F5F4EF); box-shadow: 0 0 0 .5px #D4D7D5;
}
.album-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 20%, rgb(255 255 255 / .035) var(--card-light, 50%), transparent 80%); }
.album-face--front { overflow: hidden; transform: rotateY(0deg) translateZ(1px); background-color: var(--album-front-bg, var(--album-bg, #F5F4EF)); }
.album-face--front img { background: #F5F4EF; }
.album-face--back { transform: rotateY(180deg) translateZ(1px); background-color: var(--album-back-bg, var(--album-bg, #F5F4EF)); color: #59646B; cursor: grab; }
.album-back-note { position: absolute; left: 6%; top: 6%; font: 400 10px/1 var(--ui-sans); letter-spacing: 0.28em; text-transform: uppercase; color: #59646B; }
.album-face--back::before { content: ""; position: absolute; left: 60%; top: 8%; bottom: 8%; border-left: 1px solid #CCD0CF; }
.album-message {
  position: absolute; left: 6%; top: 16%; bottom: 7%; width: 49%; overflow-y: auto; color: #59646B;
  font: 400 clamp(17px, 3.1vw, 28px)/1.55 var(--font-hand); white-space: pre-wrap; overflow-wrap: anywhere; user-select: none; cursor: grab; outline: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.55em - 1px), #E2E5E4 calc(1.55em - 1px), #E2E5E4 1.55em);
}
.album-viewer.is-editing .album-message { color: var(--ink); user-select: text; cursor: text; }
:is(.album-message):empty::before { content: attr(data-placeholder); color: var(--ink-faint); }
.album-stamp { position: absolute; right: 5.5%; top: 6.5%; width: 19.5%; aspect-ratio: 25 / 21; padding: 5px; border: 1px dashed #A9B2B5; overflow: hidden; background: #F5F4EF; }
.album-address { position: absolute; left: 66%; right: 5.5%; top: 44%; bottom: 10%; display: flex; flex-direction: column; justify-content: space-between; }
.album-address i { display: block; height: 1px; background: #D5D9D8; }
.album-caption { align-self: center; width: min(720px, calc(100% - 48px)); text-align: center; font: 400 16px/24px var(--ui-serif); letter-spacing: 0.01em; color: var(--ink); outline: none; }
.album-actions { display: flex; justify-content: center; gap: 28px; padding-top: 4px; border-top: 1px solid var(--hairline); }
.album-actions .word-button { padding: 0 4px; }

.binder-card--back { text-align: left; color: #59646B; }
.binder-card-postmark { position: absolute; left: 9px; top: 7px; font: 400 5px/1 var(--ui-sans); letter-spacing: 1.5px; }
.binder-card-message { position: absolute; left: 9px; top: 24px; width: 92px; bottom: 9px; overflow: hidden; white-space: pre-wrap; font: 400 13px/17px var(--font-hand); }
.binder-card--back::before, .binder-under-card--back::before { content: ""; position: absolute; left: 60%; top: 12px; bottom: 12px; border-left: 0.5px solid #CCD0CF; }
/* The postcard divider belongs to the postcard back only: a photocard back is a picture or blank stock. */
.binder-card--trading.binder-card--back::before, .binder-under-card--trading.binder-under-card--back::before { content: none; }
.binder-card-stamp { position: absolute; right: 9px; top: 8px; width: 38px; height: 32px; padding: 2.5px; border: 0.5px dashed #A9B2B5; }
.binder-card-address { position: absolute; left: 66%; right: 9px; top: 64px; bottom: 14px; background: repeating-linear-gradient(transparent 0 16px, #D5D9D8 16px 16.5px); }

#cover-crop-modal[data-preset="postcard"] .crop-aspect-badge { font-size: 9px; letter-spacing: .02em; }

@keyframes sheet-append-sweep {
  0% { box-shadow: inset 0 0 0 0 rgb(var(--shade-rgb) / 0); transform: translateY(10px); opacity: 0.72; }
  35% { box-shadow: inset 0 0 0 2px rgb(var(--shade-rgb) / 0.16); transform: translateY(0); opacity: 1; }
  100% { box-shadow: inset 0 0 0 0 rgb(var(--shade-rgb) / 0); transform: translateY(0); opacity: 1; }
}
#planner-canvas.is-appended-sheet #canvas-content { animation: sheet-append-sweep 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.sheet-append-badge {
  position: fixed; right: 28px; bottom: 24px; z-index: 260; padding: 7px 14px;
  background: var(--paper-raised); border: 1px solid var(--hairline); color: var(--ink);
  box-shadow: 0 8px 22px rgb(var(--shade-rgb) / 0.14); font: 400 11px/1.2 var(--ui-sans); letter-spacing: 0.08em;
  pointer-events: none; opacity: 0; transform: translateY(8px);
  transition: opacity 220ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sheet-append-badge.is-visible { opacity: 1; transform: translateY(0); }

.binder-stack { position: absolute; inset: 0; width: 1024px; height: 768px; pointer-events: none; }
.binder-under-sheet { position: absolute; z-index: 2; }
.binder-under-pocket { position: absolute; width: 208px; height: 168px; border: .7px solid rgb(245 250 252 / .34); background: rgb(242 248 251 / .34); }
.binder-under-card { position: absolute; left: 7px; top: 10px; width: 192px; height: 144px; border: 5px solid #F5F4EF; background: #F5F4EF; overflow: hidden; }

.binder-pocket--trading, .binder-under-pocket--trading { width: 132px; height: 184px; }
.binder-card--trading, .binder-under-card--trading {
  left: 4px; top: 5px; width: 124px; height: 174px; border: 0; border-radius: var(--photocard-r); overflow: hidden; background: #F3F0E6;
  box-shadow: 0 1px 3px rgb(26 42 51 / 0.25), 0 0 0 0.5px rgb(64 76 82 / 0.14);
}
:is(.binder-card--trading, .binder-under-card--trading, .binder-grid-slot--trading.is-filled) img { border-radius: inherit; }
.trading-back-print--mini { gap: 5px; padding: 8px; text-align: center; }
.trading-back-print--mini .trading-back-mark { font-size: 22px; }
.trading-back-print--mini .trading-back-word { font-size: 7px; letter-spacing: 0.2em; }
.trading-back-print--mini .trading-back-no { font-size: 9px; }
.trading-back-mini-msg { font: 400 10px/1.25 var(--font-hand); color: #59646B; max-width: 100%; max-height: 52px; overflow: hidden; word-break: break-word; }
.trading-front-placeholder, .trading-blank-face, .binder-card-blank, .binder-grid-blank {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; width: 100%; height: 100%; color: rgb(43 62 73 / 0.45);
}
.trading-blank-face { background: #F3F0E6; padding: 8px; text-align: center; }
.binder-card-blank { background: #E9ECEA; }
.binder-grid-blank { background: #E9ECEA; font: 300 22px/1 var(--ui-serif); }

/* Postcard Binder Grid Organizer */
.binder-grid-viewer { z-index: 55; background: rgb(231 237 241 / 0.72); }
.binder-grid-dialog {
  width: min(980px, calc(100vw - 32px)); max-height: calc(100dvh - 36px); display: flex; flex-direction: column; gap: 16px;
  padding: clamp(16px, 2.5vw, 22px) clamp(14px, 3vw, 26px); background: #ECF0F3; border-radius: 6px;
  box-shadow: 0 1px 0 rgb(var(--shade-rgb) / 0.10), 0 22px 48px rgb(var(--shade-rgb) / 0.20);
}
.binder-grid-head { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.binder-grid-title { font: 400 18px/1.2 var(--ui-serif); color: var(--ink); }
.binder-grid-meta { font: 400 10px/1 var(--ui-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.binder-grid-head-actions, .binder-grid-sheet-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.binder-grid-hint { font: 400 11px/1.4 var(--ui-sans); color: var(--ink-soft); margin-top: -6px; }
.binder-grid-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding-right: 4px; }
.binder-grid-sheet { padding: 14px 16px 16px; background: rgba(255, 255, 255, 0.54); border: 1px solid var(--hairline); border-radius: 2px; }
.binder-grid-sheet-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.binder-grid-sheet-label { font: 400 12px/1 var(--ui-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.binder-grid-sheet-sub { font: 400 11px/1 var(--ui-sans); color: var(--ink-soft); }
.binder-grid-sheet-actions .word-button:disabled { opacity: 0.32; pointer-events: none; }
.binder-grid-confirm { display: flex; align-items: center; gap: 10px; font: 400 11px/1.2 var(--ui-sans); color: var(--ink); }
.binder-grid-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.binder-grid-side-label { font: 400 9px/1 var(--ui-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.binder-grid-pockets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.binder-grid-pockets.is-trading { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.binder-grid-slot {
  position: relative; aspect-ratio: 4 / 3; border: 1px dashed var(--hairline); background: rgba(232, 240, 245, 0.45);
  border-radius: 2px; display: flex; align-items: center; justify-content: center;
  transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}
.binder-grid-slot--trading { aspect-ratio: 63 / 88; }
.binder-grid-slot.is-filled { border-style: solid; border-color: #DCDDD6; background: #F5F4EF; padding: 5px; box-shadow: 0 1px 3px rgb(26 42 51 / 0.14); }
.binder-grid-slot--trading.is-filled { padding: 0; border: 0; border-radius: var(--photocard-r); background: #F3F0E6; overflow: hidden; }
.binder-grid-slot.is-filled:has(.is-carried-away) { border: 1px dashed var(--hairline); background: rgba(232, 240, 245, 0.45); box-shadow: none; }
.binder-grid-slot.is-drop-target { border-style: solid; border-color: var(--ink); background: rgba(83, 99, 110, 0.12); box-shadow: 0 0 0 2px rgb(83 99 110 / 0.25); }
.binder-grid-empty-btn {
  width: 100%; height: 100%; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: var(--ink-faint); font: 400 10px/1 var(--ui-sans); letter-spacing: 0.12em;
}
.binder-grid-card-drag { position: relative; width: 100%; height: 100%; overflow: hidden; cursor: grab; touch-action: none; user-select: none; }
.binder-grid-card-drag img { pointer-events: none; }
.binder-grid-slot-no {
  position: absolute; left: 8px; bottom: 7px; padding: 2px 5px; background: rgba(245, 244, 239, 0.88);
  font: 400 8px/1 var(--ui-sans); letter-spacing: 0.12em; color: var(--ink); pointer-events: none;
}

.shelf-empty { flex: 1 0 100%; max-width: 380px; margin: auto; padding: 28px 20px; text-align: center; }
.shelf-empty-title { margin-bottom: 8px; font: 400 20px/1.3 var(--ui-serif); color: var(--ink); }
.shelf-empty-sub { font-size: 13px; line-height: 1.55; color: var(--ink-soft); }

.conflict-banner {
  position: fixed; top: 68px; left: 50%; transform: translateX(-50%); z-index: 450;
  display: flex; align-items: center; gap: 14px; padding: 9px 14px;
  background: var(--paper, #F8F7F2); border: 1px solid var(--accent, #9A4A3A);
  color: var(--ink); font: 400 12px/1.3 var(--ui-sans); box-shadow: 0 6px 20px rgb(var(--shade-rgb) / 0.14);
}
.conflict-banner-text { white-space: nowrap; }
.conflict-banner-actions { display: flex; align-items: center; gap: 10px; }
.conflict-banner .word-button { color: var(--accent, #9A4A3A); font-weight: 500; }

html.q-low :is(.hashira-wrap, .folioline, .card, .sheet-full, .install-dialog, .search-dialog, .binder-grid-dialog, .throw-zone, .modal-backdrop, .crop-modal-backdrop, .crop-drag-hint, .album-viewer, .binder-grid-viewer) { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Without blur, only the running head and folio line stay see-through; every menu stays solid paper. */
html.q-low :is(.hashira-wrap, .folioline, .throw-zone) { background: rgb(236 240 243 / 0.94); }
html.q-low :is(.card, .sheet-full, .install-dialog, .search-dialog, .binder-grid-dialog) { background: #ECF0F3; }
html.q-low .modal-backdrop { background: rgba(40, 38, 36, 0.52); }
html.q-low .crop-modal-backdrop { background: rgb(228 235 239 / 0.98); }
html.q-low .crop-drag-hint { background: rgba(24, 22, 20, 0.94); }
html.q-low :is(.album-viewer, .binder-grid-viewer) { background: rgb(231 237 241 / 0.98); }
:is(.album-caption[hidden], .album-viewer[data-sheet-kind="note"] [data-act="replace"], .book3d #planner-book[data-binder] .binder-rings, .closed-book-cover:has(.type-cover--binder)::after, .shelf-book-art:has(.type-cover--binder)::after, .binder-under-card--trading.binder-under-card--back::before, .conflict-banner.hidden, .album-plus.hidden) { display: none; }

/* ==========================================================================
   WEBGL RECOVERY SCREEN (F12) — independent of 3D scene & legacy CSS book
   ========================================================================== */
html.webgl-failed #notebook-loader,
html.webgl-failed .shell,
html.webgl-failed #library,
html.webgl-failed #hashira,
html.webgl-failed #book3d-canvas {
  display: none !important;
}
html.webgl-failed #webgl-recovery {
  display: flex !important;
}

.webgl-recovery {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  box-sizing: border-box;
  overflow-y: auto;
  font-family: var(--ui-sans);
  color: var(--ink);
}
.webgl-recovery.hidden { display: none; }

.webgl-recovery-card {
  width: min(460px, 100%);
  padding: clamp(28px, 6vw, 36px) clamp(22px, 5vw, 32px) clamp(24px, 5vw, 32px);
  background: var(--paper-raised, #FAFBFC);
  border: 1px solid var(--hairline, rgba(40, 52, 63, 0.16));
  box-shadow: 0 18px 48px rgba(15, 24, 34, 0.12);
}

.webgl-recovery-brand {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--ink-soft);
}

.webgl-recovery-title {
  margin: 0 0 14px;
  font: 400 clamp(21px, 4vw, 24px)/1.28 var(--ui-serif);
  color: var(--ink);
}

.webgl-recovery-desc {
  margin: 0 0 22px;
  font: 400 13px/1.55 var(--ui-sans);
  color: var(--ink-soft);
}

.webgl-recovery-status {
  margin: 0 0 20px;
  padding: 10px 12px;
  border-left: 2px solid var(--accent, #33506F);
  background: rgba(51, 80, 111, 0.06);
  font: 400 12px/1.45 var(--ui-sans);
  color: var(--ink);
}
.webgl-recovery-status.is-error {
  border-left-color: var(--color-status-error, #9E4137);
  background: rgba(158, 65, 55, 0.08);
  color: var(--color-status-error, #9E4137);
}
.webgl-recovery-status.hidden { display: none; }

.webgl-recovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ==========================================================================
   YEAR OVERVIEW & YEAR INDEX SPREADS (F2) — 1024 × 768 on 32 px grid
   ========================================================================== */
.yo-hero-left {
  position: absolute;
  left: 32px;
  top: 32px;
  width: 448px;
  height: 128px;
  pointer-events: none;
}
.yo-hero-bar {
  position: absolute;
  left: 0;
  top: 16px;
  width: 6px;
  height: 64px;
  background: var(--color-accent-sage);
}
.yo-hero-year {
  position: absolute;
  left: 16px;
  top: 10px;
  font-family: var(--ui-serif);
  font-size: 72px;
  font-weight: 400;
  line-height: 72px;
  letter-spacing: -0.02em;
  color: var(--color-ink-main);
  font-variant-numeric: lining-nums;
}
.yo-hero-subtitle {
  position: absolute;
  left: 18px;
  top: 96px;
  font-family: var(--ui-sans);
  font-size: 10px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.yo-this-year {
  position: absolute;
  left: 544px;
  top: 44px;
  width: 448px;
}
.yo-this-year-tasks {
  margin-top: 2px;
}
.yo-legacy-memo {
  position: absolute;
  left: 544px;
  top: 162px;
  width: 448px;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  border-bottom: 1px solid var(--color-line);
}
.yo-legacy-memo-label {
  flex: none;
  font-family: var(--ui-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.yo-memo-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-hand);
  font-size: 15px;
  line-height: 24px;
  color: var(--color-ink-pen);
  white-space: nowrap;
  overflow: hidden;
  outline: none;
}

.yo-months {
  position: absolute;
  top: 192px;
  width: 448px;
  height: 544px;
  display: grid;
  grid-template-columns: repeat(2, 208px);
  grid-template-rows: repeat(3, 160px);
  column-gap: 32px;
  row-gap: 32px;
}
.yo-months-left, .yi-table-left { left: 32px; }
.yo-months-right, .yi-table-right { left: 544px; }

.yo-month {
  width: 208px;
  height: 160px;
  display: flex;
  flex-direction: column;
}
.yo-month-head {
  width: 100%;
  height: 32px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  border: 0;
  border-bottom: 1px solid var(--color-line-dark);
  background: transparent;
  padding: 6px 0 4px;
  cursor: pointer;
  text-align: left;
}
.yo-month-head:hover .yo-month-name,
.yo-month-head:hover .yo-month-num,
.yi-month-head:hover .yi-month-num,
.yi-month-head:hover .yi-month-abbr {
  color: var(--color-accent-sage);
}
.yo-month-num {
  font-family: var(--ui-serif);
  font-size: 20px;
  line-height: 1;
  color: var(--color-ink-main);
  font-variant-numeric: lining-nums;
}
.yo-month-name {
  font-family: var(--ui-sans);
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.yo-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  height: 16px;
  align-items: center;
  text-align: center;
  font-family: var(--ui-sans);
  font-size: 7.5px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}
.yo-weekdays .is-wknd {
  opacity: 0.68;
}
.yo-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 16px);
  height: 96px;
}
.yo-day {
  position: relative;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: var(--ui-serif);
  font-size: 10px;
  line-height: 16px;
  color: var(--color-ink-main);
  text-align: center;
  cursor: pointer;
  border-radius: 2px;
}
.yo-day:hover {
  background: rgba(51, 80, 111, 0.09);
}
.yo-day.is-wknd {
  color: var(--color-ink-muted);
}
.yo-day--empty {
  pointer-events: none;
  cursor: default;
}
.yo-day.is-today > span {
  display: inline-block;
  min-width: 14px;
  height: 14px;
  line-height: 14px;
  border-radius: 50%;
  background: var(--color-accent-sage);
  color: #FFFFFF;
}
.yo-day.has-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--color-accent-sage);
}

/* Year Index 12×31 Table (Page 1) */
.yi-table {
  position: absolute;
  top: 176px;
  width: 416px;
  height: 528px;
  display: grid;
  grid-template-columns: 32px repeat(6, 64px);
  grid-template-rows: 32px repeat(31, 16px);
}

.yi-corner {
  height: 32px;
  border-bottom: 1px solid var(--color-line-dark);
}
.yi-month-head {
  height: 32px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  border: 0;
  border-bottom: 1px solid var(--color-line-dark);
  border-left: 1px solid rgba(202, 212, 220, 0.65);
  padding: 9px 2px 4px;
  background: transparent;
  cursor: pointer;
}
.yi-month-num {
  font-family: var(--ui-serif);
  font-size: 15px;
  line-height: 1;
  color: var(--color-ink-main);
}
.yi-month-abbr {
  font-family: var(--ui-sans);
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-ink-muted);
}
.yi-day-num {
  height: 16px;
  padding-right: 5px;
  text-align: right;
  font-family: var(--ui-serif);
  font-size: 8.5px;
  line-height: 16px;
  color: var(--color-ink-muted);
  border-bottom: 1px solid rgba(202, 212, 220, 0.55);
  font-variant-numeric: tabular-nums;
}
.yi-cell {
  position: relative;
  height: 16px;
  display: flex;
  align-items: center;
  border-left: 1px solid rgba(202, 212, 220, 0.65);
  border-bottom: 1px solid rgba(202, 212, 220, 0.55);
  overflow: hidden;
}
.yi-cell.is-weekend {
  background: rgba(202, 212, 220, 0.16);
}
.yi-cell--invalid {
  background: rgba(202, 212, 220, 0.06);
  pointer-events: none;
}
.yi-cell-wkday {
  flex: none;
  width: 12px;
  height: 16px;
  border: 0;
  padding: 0 0 0 3px;
  background: transparent;
  font-family: var(--ui-sans);
  font-size: 6px;
  font-weight: 500;
  line-height: 16px;
  color: var(--color-ink-muted);
  opacity: 0.72;
  text-align: left;
  cursor: pointer;
}
.yi-cell-wkday:hover {
  color: var(--color-accent-sage);
  opacity: 1;
}
.yi-cell-input {
  flex: 1;
  min-width: 0;
  height: 16px;
  padding: 0 2px 0 1px;
  font-family: var(--font-hand);
  font-size: 11.5px;
  line-height: 16px;
  color: var(--color-ink-pen);
  white-space: nowrap;
  overflow: hidden;
  outline: none;
}


/* ==========================================================================
   F5b — SINGLE-POCKET PAPER FOLDER
   The scene supplies cartulina, pocket and paper; DOM supplies only the ink.
   Flat surfaces below are enabled exclusively for PNG export.
   ========================================================================== */
#planner-book[data-folder] :is(.paper-surface, .paper-half) { background: transparent; background-image: none; }
.type-cover.type-cover--folder { background: var(--spine-cloth-base, #6E7F8D); }
.folder-open-view { display: block; position: relative; width: 1024px; height: 768px; background: transparent; color: #28343F; }

/* Folder card viewer overrides inside album-viewer */
.album-note-front {
  position: absolute; inset: 0; padding: 36px 42px; display: flex; flex-direction: column;
  justify-content: center; gap: 12px; background: #F5F4EF; color: var(--ink);
}
.album-note-kicker { font: 500 10.5px/1 var(--ui-sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.album-note-title-view { font: 400 clamp(24px, 3.6vw, 34px)/1.16 var(--ui-serif); color: var(--ink); }
.album-note-body-preview { font: 400 clamp(19px, 2.8vw, 25px)/1.45 var(--font-hand); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; }
.album-viewer[data-sheet-kind="note"] .album-message { width: 88%; }

/* Folder organizer */
.folder-org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.folder-org-thumb {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  padding: 12px; gap: 6px; min-height: 132px; background: #FAF8F3; border: 1px solid var(--hairline);
}
.folder-org-photo-preview { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.folder-org-photo-preview img { width: 100%; height: 92px; object-fit: cover; display: block; }
.folder-org-photo-preview span { font: 400 12px/1.2 var(--ui-serif); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Loose things in folder, drawer and desk */
.folder-piece {
  position: absolute; display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding: 28px;
  text-align: left; color: #28343F; white-space: pre-line; overflow-wrap: anywhere;
  appearance: none; border: 0; border-radius: 0; background-color: var(--piece-stock);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  box-shadow: -0.5px 0.8px 1.2px rgb(48 40 26 / 0.12), -1.5px 3px 8px rgb(48 40 26 / 0.06);
  transition: box-shadow 160ms ease;
}
.folder-piece * { touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
#drawer, #drawer * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.folder-piece img { -webkit-user-drag: none; }
.folder-piece.is-held { cursor: grabbing; box-shadow: -3px 6px 8px rgb(48 40 26 / 0.10), -12px 22px 34px rgb(48 40 26 / 0.12); }
.folder-piece:not(.is-held) { transition: box-shadow 220ms ease; }
.welcome-kicker { font: 400 9px/1.5 var(--ui-sans); letter-spacing: 0.18em; }
.folder-piece--note { gap: 18px; padding: 28px; }
.sheet-ruled { flex: 1 1 auto; background-image: linear-gradient(transparent calc(100% - 1px), rgb(110 128 140 / 0.22) 0); background-size: 100% 34.8px; line-height: 34.8px; }
.folder-item-title { font: 400 27px/1.3 var(--ui-serif); overflow-wrap: anywhere; }
.folder-item-hand { font: 400 24px/1.45 var(--font-hand); white-space: pre-wrap; overflow: hidden; }
.folder-item-img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; pointer-events: none; }
.folder-piece--sticky { padding: 18px 16px; gap: 0; }
.hand-ch { display: inline-block; white-space: pre; }
.folder-piece--sticky .folder-item-hand { flex: 1 1 auto; min-height: 0; font-size: 22px; line-height: 1.3; color: #24324A; }
.folder-empty-hint { position: absolute; left: 576px; top: 300px; width: 384px; font: 400 13px/1.6 var(--ui-sans); color: #55626D; text-align: center; pointer-events: none; }
.folder-open-view.is-dragover { outline: 1px dashed rgb(85 98 109 / 0.5); outline-offset: -12px; }
.folder-piece.is-search-hit { outline: 2px solid var(--accent, #33506F); outline-offset: 4px; }
.folder-piece.is-over-trash { opacity: 0.72; cursor: grabbing; }
.folder-trash-zone { z-index: 30; }

/* Viewer variants by sheet kind */
.album-viewer[data-sheet-kind="postcard"] { --album-ar: 148 / 105; }
.album-viewer[data-sheet-kind="trading"] { --album-ar: 63 / 88; --album-w: min(380px, calc(100vw - 168px), calc((100dvh - 240px) * 0.7159)); --album-b: 0; --album-r: var(--photocard-r); --album-bg: #F3F0E6; --album-ov: hidden; }
.album-viewer[data-sheet-kind="note"] { --album-ar: 384 / 608; --album-w: min(440px, calc(100vw - 168px), calc((100dvh - 240px) * 0.6316)); --album-b: 0; --album-bg: #EEEAE1; }
.album-viewer[data-sheet-kind="sticky"] { --album-ar: 1 / 1; --album-w: min(440px, calc(100vw - 168px), calc(100dvh - 240px)); --album-b: 0; --album-bg: var(--sticky-stock, #ECE5C6); }
.album-viewer[data-sheet-kind="polaroid"] { --album-ar: 88 / 107; --album-w: min(440px, calc(100vw - 168px), calc((100dvh - 240px) * 0.8224)); --album-b: 0; --album-front-bg: #F1F2F0; --album-back-bg: #33393F; }
.album-viewer[data-sheet-kind="photo"] { --album-ar: 3 / 2; --album-w: min(560px, calc(100vw - 144px), calc((100dvh - 240px) * 1.5)); --album-b: 14px solid #FCFCFA; --album-bg: #FCFCFA; }
.album-face { overflow: var(--album-ov, visible); }
.album-viewer:is([data-sheet-kind="note"], [data-sheet-kind="sticky"]) .album-note-front { padding: 36px; justify-content: flex-start; gap: 18px; background: none; }
.album-viewer[data-sheet-kind="sticky"] .album-note-front { padding: 38px 34px; gap: 0; }
.album-viewer[data-sheet-kind="note"] .album-note-kicker { font: 400 10px/1.5 var(--ui-sans); letter-spacing: 0.18em; }
.album-viewer[data-sheet-kind="note"] .album-note-title-view { font: 400 clamp(24px, 3.2vw, 31px)/1.3 var(--ui-serif); }
.album-viewer[data-sheet-kind="note"] .album-note-body-preview {
  flex: 1 1 auto; font: 400 clamp(22px, 2.8vw, 27px)/38px var(--font-hand); color: #24324A;
  background-image: linear-gradient(transparent calc(100% - 1px), rgb(110 128 140 / 0.22) 0); background-size: 100% 38px;
}
.album-viewer[data-sheet-kind="sticky"] .album-note-body-preview { font: 400 clamp(28px, 4vw, 38px)/1.3 var(--font-hand); color: #24324A; }
.album-viewer:is([data-sheet-kind="note"], [data-sheet-kind="sticky"], [data-sheet-kind="polaroid"]) .album-message { left: 7%; right: 7%; width: auto; }
.album-viewer:is([data-sheet-kind="sticky"], [data-sheet-kind="polaroid"]) .album-message { left: 8%; right: 8%; top: 14%; bottom: 10%; background: none; font-family: var(--font-hand); }
.album-viewer[data-sheet-kind="sticky"] .album-message { top: 15%; font-size: 28px; color: #24324A; }
.album-viewer[data-sheet-kind="polaroid"] .album-message { color: #DFE4E8; }
.album-viewer[data-sheet-kind="polaroid"] .album-back-note { color: #7C8691; }
.album-viewer[data-sheet-kind="polaroid"] :is(.album-face--front img, .album-plus[data-act="front-image"]) { position: absolute; left: 5.1%; right: 5.1%; top: 4.7%; bottom: auto; width: 89.8%; height: auto; aspect-ratio: 1 / 1; }
.album-viewer[data-sheet-kind="polaroid"] .album-face--front img { object-fit: cover; z-index: 1; background: transparent; }
.album-viewer[data-sheet-kind="polaroid"] .album-plus[data-act="front-image"] { border-radius: 0; z-index: 3; }
.album-viewer[data-sheet-kind="photo"] .album-face--front img { position: static; inset: auto; width: 100%; height: 100%; object-fit: cover; background: #2A2E33; }

:is(.folder-piece--postcard, .folder-piece--trading, .folder-piece--polaroid, .folder-piece--photo) { display: block; }
.folder-piece--postcard { padding: 9px; background-color: #F5F4EF; }
.folder-piece--postcard .postcard-face { border: 0; box-shadow: none; position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: #E9ECEA; }
:is(.folder-piece--postcard .postcard-face, .polaroid-print, .photo-print) .folder-item-img { width: 100%; height: 100%; object-fit: cover; }
.folder-piece--trading { padding: 0; border-radius: var(--photocard-r); overflow: hidden; background-color: #F4F3EE; }
.trading-window { position: relative; display: block; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; background: #F4F3EE; }
.trading-window .folder-item-img { border-radius: inherit; }
.album-back-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; pointer-events: none; z-index: 1; }
.album-viewer.is-readonly :is([data-act="replace"], [data-act="back-image"], [data-act="remove"]) { display: none; }
.album-viewer:not(.is-editing) .album-actions { display: none; }

.folder-piece::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0.06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.27 0 0 0 0 0.2 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.folder-piece { box-shadow: inset 0 0 0 0.6px rgb(255 255 255 / 0.55), -0.5px 0.8px 1.2px rgb(48 40 26 / 0.12), -1.5px 3px 8px rgb(48 40 26 / 0.06); }
.folder-piece.is-held { box-shadow: inset 0 0 0 0.6px rgb(255 255 255 / 0.55), -3px 6px 8px rgb(48 40 26 / 0.10), -12px 22px 34px rgb(48 40 26 / 0.12); }

.folder-piece--polaroid { padding: 0; background-color: #F1F2F0; }
.polaroid-print, .album-polaroid-well {
  position: absolute; left: 5.1%; right: 5.1%; top: 4.7%; aspect-ratio: 1 / 1; background: #2A2E33;
}
.polaroid-print { overflow: hidden; }
.album-polaroid-well { pointer-events: none; z-index: 0; }
.polaroid-gloss, .album-polaroid-well::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(128deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 38%, rgb(255 255 255 / 0) 70%, rgb(255 255 255 / 0.06));
}
.polaroid-chin, .album-polaroid-chin { position: absolute; left: 7%; right: 7%; bottom: 6%; height: 15%; display: flex; align-items: center; color: #24324A; white-space: nowrap; overflow: hidden; pointer-events: none; }
.polaroid-chin { font: 400 21px/1.1 var(--font-hand); }
.album-polaroid-chin { font: 400 clamp(26px, 4vw, 38px)/1.1 var(--font-hand); }

.folder-piece--photo { padding: 10px; background-color: #FCFCFA; }
.photo-print { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: #2A2E33; }
.photo-gloss { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0) 34%, rgb(255 255 255 / 0) 72%, rgb(255 255 255 / 0.07)); }

.album-plus {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 1.5px dashed rgb(110 128 140 / 0.55); border-radius: 0; background: rgb(245 244 239 / 0.72); color: #4A5A66; cursor: pointer;
}
.album-viewer[data-sheet-kind="trading"] .album-plus { border-color: rgb(138 154 122 / 0.7); background: rgb(243 240 230 / 0.7); color: #5C705A; border-radius: inherit; }
.album-plus span { font: 300 64px/1 var(--ui-sans); }
.album-plus em { font: 400 13px/1 var(--ui-sans); font-style: normal; letter-spacing: 0.08em; }
.album-plus:hover, .album-plus:focus-visible { background: rgb(243 240 230 / 0.92); }

.picture-plus { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: copy; background: repeating-linear-gradient(45deg, rgb(110 128 140 / 0.08) 0 5px, transparent 5px 10px), #E9ECEA; }
.picture-plus::before, .picture-plus::after { content: ''; position: absolute; left: 50%; top: 50%; background: #6E808C; transform: translate(-50%, -50%); }
.picture-plus::before { width: 26px; height: 1.5px; }
.picture-plus::after { width: 1.5px; height: 26px; }
.trading-window .picture-plus { background: repeating-linear-gradient(45deg, rgb(138 154 122 / 0.10) 0 5px, transparent 5px 10px), #EAE8DC; }
.trading-window .picture-plus::before, .trading-window .picture-plus::after { background: #8A9A7A; }
:is(.album-viewer:is([data-sheet-kind="note"], [data-sheet-kind="trading"], [data-sheet-kind="sticky"], [data-sheet-kind="polaroid"]) .album-face--back::before, .album-viewer:not([data-sheet-kind="trading"]) [data-act="back-image"], .album-viewer[data-sheet-kind="sticky"] :is(.album-note-kicker, .album-note-title-view, [data-act="replace"]), .album-viewer[data-sheet-kind="polaroid"] :is(.album-stamp, .album-address), .album-plus.hidden, body.mode-view .picture-plus::before, body.mode-view .picture-plus::after) { display: none; }

/* ==========================================================================
   F14: WEEKLY VIEWS (Horizontal & Vertical Compositions on 32px Grid)
   ========================================================================== */

/* Monthly right-gutter week tabs aligned to .monthly-grid-body rows (x: 966px) */
.monthly-week-rail {
  position: absolute;
  left: 966px;
  top: 128px;
  width: 26px;
  display: grid;
  grid-template-rows: repeat(6, 96px);
  z-index: 2;
}
.monthly-week-rail[data-weeks="4"] { height: 512px; grid-template-rows: repeat(4, 128px); }
.monthly-week-rail[data-weeks="5"] { height: 560px; grid-template-rows: repeat(5, 112px); }
.monthly-week-rail[data-weeks="6"] { height: 576px; grid-template-rows: repeat(6, 96px); }

.monthly-week-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0;
  border: 0.65px solid var(--color-line);
  border-left: 2px solid var(--color-accent-sage);
  border-radius: 0 4px 4px 0;
  background: rgba(245, 247, 247, 0.72);
  color: var(--color-ink-muted);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.monthly-week-tab:hover,
.monthly-week-tab:focus-visible {
  background: var(--color-badge-bg);
  color: var(--color-ink-main);
  border-color: var(--color-accent-sage);
}
.mwt-code {
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-size: 9px;
  letter-spacing: 0.08em;
  line-height: 1;
}

/* Daily Mini-Calendar Week pill link */
.mini-cal-header { gap: 4px; }
.mini-cal-week-btn {
  border: 0.65px solid var(--color-line);
  border-radius: 3px;
  background: var(--color-badge-bg);
  color: var(--color-badge-text);
  font-family: var(--ui-sans);
  font-size: 9px;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  cursor: pointer;
  line-height: 1.3;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.mini-cal-week-btn:hover,
.mini-cal-week-btn:focus-visible {
  background: var(--color-accent-sage);
  color: #fff;
  border-color: var(--color-accent-sage);
}

/* Weekly Spread Chrome & Composition Toggle */
.weekly-view .weekly-sheet {
  position: absolute;
  inset: 0;
}
.week-month-link {
  border: none;
  background: transparent;
  padding: 0;
  font-family: var(--font-serif);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-main);
  cursor: pointer;
}
.week-month-link:hover,
.week-month-link:focus-visible {
  color: var(--color-accent-sage);
  text-decoration: underline;
}
.weekly-layout-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 0.65px solid var(--color-line);
  border-radius: 4px;
  padding: 1px;
  background: var(--color-paper);
}
.weekly-layout-btn {
  border: none;
  background: transparent;
  color: var(--color-ink-muted);
  font-family: var(--ui-sans);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1.2;
}
.weekly-layout-btn[aria-pressed="true"] {
  background: var(--color-accent-sage);
  color: #fff;
}

/* Shared Hero Header (x: 32..480, y: 64..144 or 64..128) */
.weekly-hero-block {
  position: absolute;
  left: 32px;
  top: 64px;
  width: 448px;
  height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0 6px;
  border-bottom: 0.65px solid var(--color-line);
}
.weekly-hero-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.weekly-hero-bar {
  width: 4px;
  height: 24px;
  background: var(--color-accent-sage);
  border-radius: 1px;
  flex-shrink: 0;
}
.weekly-hero-range {
  margin: 0;
  font-family: var(--ui-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--color-ink-main);
  letter-spacing: -0.01em;
  flex: 1;
}
.weekly-hero-steps {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
}
.week-step-btn {
  font-size: 10px;
  color: var(--color-ink-muted);
  padding: 2px 4px;
}
.week-focus-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.week-focus-input {
  flex: 1;
  font-family: var(--font-hand);
  font-size: 18px;
  line-height: 24px;
  color: var(--color-ink-pen);
  outline: none;
  min-height: 24px;
  white-space: nowrap;
  overflow: hidden;
}

/* Shared Day Header & Event Styles inside Weekly */
.week-day-head, .week-v-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.week-day-date-btn, .week-day-date-static {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  border: none;
  background: transparent;
  padding: 0;
  font-family: var(--ui-sans);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}
.week-day-date-btn { cursor: pointer; }
.week-day-date-btn:hover .week-day-num,
.week-day-date-btn:focus-visible .week-day-num {
  color: var(--color-accent-sage);
}
.week-day-num {
  font-family: var(--ui-serif);
  font-size: 16px;
  color: var(--color-ink-main);
  line-height: 1;
}
.week-day-mon {
  font-family: var(--font-serif);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--color-badge-text);
  background: var(--color-badge-bg);
  padding: 1px 4px;
  border-radius: 2px;
}
.week-h-row.is-outside .week-day-num,
.week-v-col.is-outside .week-day-num {
  color: var(--color-ink-muted);
}
body.mode-edit #canvas-content .week-event-add { opacity: 0.45; }
body.mode-edit #canvas-content .week-h-row:hover .week-event-add,
body.mode-edit #canvas-content .week-v-col:hover .week-event-add,
body.mode-edit #canvas-content .week-event-add:focus-visible { opacity: 1; }
body.mode-view #canvas-content .week-event-add,
body.mode-view .week-event-add { display: none; }
.week-day-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 3px;
}
.week-event {
  font-size: 9.5px;
  padding: 1px 4px;
}
.week-day-note-input,
.week-memo-input,
.week-horizon-input,
.week-vertical-summary-input,
.week-day-time-note {
  font-family: var(--font-hand);
  font-size: 17px;
  line-height: 24px;
  color: var(--color-ink-pen);
  white-space: pre-wrap;
  outline: none;
  word-break: break-word;
}
.week-day-top-tag {
  font-family: var(--font-hand);
  font-size: 15px;
  line-height: 20px;
  color: var(--color-ink-muted);
  outline: none;
  min-height: 20px;
}

/* ---------------- HORIZONTAL COMPOSITION ---------------- */
.weekly-h-left-days {
  position: absolute;
  left: 32px;
  top: 160px;
  width: 448px;
  height: 512px;
  display: grid;
  grid-template-rows: repeat(4, 128px);
  border-top: 0.65px solid var(--color-line);
}
.weekly-h-right-top {
  position: absolute;
  left: 544px;
  top: 72px;
  width: 448px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.weekly-h-right-code {
  font-family: var(--font-serif);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-ink-main);
  flex-shrink: 0;
}
.weekly-h-right-count {
  font-family: var(--ui-sans);
  font-size: 10px;
  color: var(--color-ink-muted);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.weekly-h-right-days {
  position: absolute;
  left: 544px;
  top: 128px;
  width: 448px;
  height: 384px;
  display: grid;
  grid-template-rows: repeat(3, 128px);
  border-top: 0.65px solid var(--color-line);
}
.week-h-row {
  display: grid;
  grid-template-columns: 112px 1fr;
  border-bottom: 0.65px solid var(--color-line);
  padding: 6px 4px;
  gap: 10px;
  overflow: hidden;
}
.week-h-row.is-weekend,
.week-v-col.is-weekend {
  background: rgba(229, 235, 239, 0.25);
}
.week-h-meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 0.65px solid var(--color-line);
  padding-right: 8px;
}
.week-h-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.week-h-body .week-day-note-input {
  flex: 1;
}
.weekly-horizon-block {
  position: absolute;
  left: 32px;
  top: 680px;
  width: 448px;
  height: 56px;
  display: flex;
  flex-direction: column;
}
.weekly-horizon-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.weekly-horizon-head .section-divider { flex: 1; margin: 0; }
.week-horizon-input { flex: 1; padding-top: 2px; }

.weekly-h-bottom {
  position: absolute;
  left: 544px;
  top: 528px;
  width: 448px;
  height: 208px;
  display: grid;
  grid-template-columns: 208px 224px;
  gap: 16px;
}

/* ---------------- VERTICAL COMPOSITION ---------------- */
.weekly-v-sidebar {
  position: absolute;
  left: 32px;
  top: 160px;
  width: 152px;
  height: 576px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 8px;
  border-right: 0.65px solid var(--color-line);
}
.weekly-v-summary { min-height: 76px; display: flex; flex-direction: column; }
.week-vertical-summary-input { min-height: 48px; }
.weekly-tasks-block { display: flex; flex-direction: column; }
.weekly-memo-block { flex: 1; display: flex; flex-direction: column; }
.week-memo-input { flex: 1; min-height: 96px; }

.weekly-v-left-days {
  position: absolute;
  left: 192px;
  top: 160px;
  width: 288px;
  height: 576px;
  display: grid;
  grid-template-columns: repeat(3, 96px);
  border-top: 0.65px solid var(--color-line);
}
.weekly-v-right-days {
  position: absolute;
  left: 544px;
  top: 64px;
  width: 448px;
  height: 672px;
  display: grid;
  grid-template-columns: repeat(4, 112px);
  border-top: 0.65px solid var(--color-line);
}
.week-v-col {
  display: flex;
  flex-direction: column;
  border-right: 0.65px solid var(--color-line);
  border-bottom: 0.65px solid var(--color-line);
  padding: 6px 6px 4px;
  gap: 4px;
  overflow: hidden;
}
.week-v-col:last-child { border-right: none; }
.week-v-col-head {
  padding-bottom: 4px;
  border-bottom: 0.65px solid var(--color-line);
}
.week-v-sched {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0;
  border-bottom: 0.65px dashed var(--color-line);
}
.week-v-sched-item {
  display: flex;
  gap: 4px;
  font-size: 9px;
  line-height: 1.25;
  color: var(--color-ink-muted);
}
.wvs-hr {
  font-family: var(--font-serif);
  color: var(--color-accent-sage);
  flex-shrink: 0;
}
.wvs-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.week-v-time-box {
  display: flex;
  flex-direction: column;
  min-height: 76px;
  border-bottom: 0.65px dashed var(--color-line);
  padding-bottom: 4px;
}
.week-v-sublabel {
  font-family: var(--ui-sans);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.week-day-time-note {
  font-size: 15.5px;
  line-height: 20px;
  min-height: 54px;
}
.week-v-note-box {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.week-v-note-box .week-day-note-input {
  flex: 1;
  font-size: 16px;
  line-height: 21px;
}

/* =========================================================================
 * Loose things: the hand, the desk, the sticky note and the drawer
 * (hand.js, sticky-notes.js, drawer.js; ART_DIRECTION «Filosofía de los objetos»)
 * ========================================================================= */
.desktop-notes-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 12;
  overflow: hidden;
}
html.webgl-failed .desktop-notes-layer,
html.webgl-failed .drawer { display: none !important; }

/* A thing in the hand flies above everything, lifted: a longer, softer shadow. */
.hand-layer { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.hand-carried { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; }
.hand-carried > .is-in-hand {
  cursor: grabbing;
  box-shadow: inset 0 0 0 0.6px rgb(255 255 255 / 0.55), -6px 12px 14px rgb(48 40 26 / 0.11), -20px 34px 46px rgb(48 40 26 / 0.15);
  transition: box-shadow 240ms ease, opacity 180ms ease;
}
.hand-carried.is-settling > .is-in-hand { box-shadow: inset 0 0 0 0.6px rgb(255 255 255 / 0.55), -0.5px 0.8px 1.2px rgb(48 40 26 / 0.12), -1.5px 3px 8px rgb(48 40 26 / 0.06); }
.hand-carried.is-over-trash > .is-in-hand { opacity: 0.72; }
.is-carried-away, .is-landing { visibility: hidden !important; }
body.is-carrying, body.is-carrying * { cursor: grabbing !important; }
.sticky-trash-zone { z-index: 80; }

/* On the desk: the same pieces, at the desk's scale. */
.desk-thing { position: absolute; pointer-events: auto; transform-origin: 50% 50%; touch-action: none; }
.desk-thing > .folder-piece { cursor: grab; }
.desk-thing.is-search-hit > * { outline: 2px solid var(--accent, #33506F); outline-offset: 4px; }

/* The sticky note: one paper (76 x 76 mm), written by hand, nothing printed on it. */
.sticky-note.folder-piece { display: block; padding: 18px 16px; touch-action: none; }
.spread > .sticky-note { position: absolute; z-index: 8; }
.spread > .sticky-note.is-under-sleeve { pointer-events: none; z-index: 1; }
.sticky-note .sticky-body {
  height: 100%; outline: none; overflow: hidden;
  font: 400 22px/1.3 var(--font-hand); color: #24324A;
  white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text;
}
.sticky-note.is-editable:not(.is-writing) .sticky-body { cursor: grab; }
.sticky-note.is-writing .sticky-body { cursor: text; }
.sticky-note.is-readonly .sticky-body { cursor: default; }
.sticky-note .sticky-body:empty::before { content: attr(data-placeholder); color: rgb(36 50 74 / 0.32); pointer-events: none; }
.sticky-note.is-search-hit { outline: 2px solid var(--accent, #33506F); outline-offset: 3px; }
/* a sticky note's glue line: the paper lies flatter at the top, curls a hair at the foot */
.folder-piece--sticky::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; pointer-events: none;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(255 255 255 / 0.10));
}

/* ---- The drawer (Lin Wen's language): a white sheet pulled out by a white tab ----
   Cool and pale, printed words and hairlines, no boxes; shade is blue-black. */
.drawer {
  --dw-white: #FFFFFF;
  --dw-paper: #F8F9F7;
  --dw-hair: #C2CBD2;
  --dw-sumi: #1C232B;
  --dw-ink: #36424E;
  --dw-label: #4F5D69;
  --dw-faint: #8E9AA4;
  --dw-ai: #2F4F73;
  position: fixed; right: 0; z-index: 60;
  width: calc(var(--drawer-box-w, 360px) + var(--drawer-front-w, 30px) + 72px);
  pointer-events: none;
  overflow-x: clip; overflow-y: visible;
  font-family: var(--ui-sans); color: var(--dw-ink);
  transition: opacity 220ms ease, visibility 0s linear 0s;
}
.drawer-tray {
  position: absolute; right: 0; top: 0; height: 100%;
  width: var(--drawer-box-w, 360px);
  will-change: transform; pointer-events: none;
}
/* The tab: a white paper tongue on the sheet's edge, its word printed upright. */
.drawer-front {
  position: absolute; right: calc(100% - 2px); top: 50%; transform: translateY(-50%);
  width: calc(var(--drawer-front-w, 40px) + 2px); height: 176px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  appearance: none; border: 0; padding: 0; margin: 0;
  background: var(--dw-white); color: var(--dw-sumi);
  border-radius: 12px 0 0 12px;
  box-shadow: -1px 1px 0 rgb(21 35 58 / 0.05), -3px 4px 10px rgb(21 35 58 / 0.08);
  cursor: grab; pointer-events: auto; touch-action: none;
  transition: box-shadow 200ms ease;
}
.drawer-front:hover { box-shadow: -1px 1px 0 rgb(21 35 58 / 0.06), -6px 6px 16px rgb(21 35 58 / 0.12); }
.drawer-front:active { cursor: grabbing; }
.drawer-tab-word { writing-mode: vertical-rl; font: 400 12px/1 var(--ui-serif); letter-spacing: 0.08em; color: var(--dw-sumi); }
.drawer-tab-ko { writing-mode: vertical-rl; font: 400 10px/1 var(--ui-sans); letter-spacing: 0.1em; color: var(--dw-faint); }
.drawer-count { font: 400 10px/1 var(--ui-serif); font-variant-numeric: tabular-nums; color: var(--dw-ai); }
.drawer-count:empty { display: none; }

/* The sheet: white, edge to edge, lifted off the desk by its shade alone. */
.drawer-box {
  position: absolute; inset: 0;
  pointer-events: auto; overflow: hidden;
  contain: layout style paint;
  background: var(--dw-white);
  box-shadow: -1px 0 0 rgb(21 35 58 / 0.04), -18px 22px 40px -10px rgb(21 35 58 / 0.16), -3px 4px 10px rgb(21 35 58 / 0.06);
}
.drawer:not(.is-out) .drawer-box { visibility: hidden; pointer-events: none; }
.drawer-floor {
  position: absolute; inset: 14px; contain: layout style;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #C2CBD2 transparent;
}
.drawer-floor::-webkit-scrollbar { width: 6px; }
.drawer-floor::-webkit-scrollbar-thumb { background: #C2CBD2; border-radius: 3px; }
.drawer.is-receiving .drawer-box { box-shadow: -1px 0 0 rgb(47 79 115 / 0.35), -18px 22px 40px -10px rgb(21 35 58 / 0.20), -3px 4px 10px rgb(21 35 58 / 0.08); }
.drawer-ink { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }

/* Printed like a book's contents: a running head, numbered names, one hairline. */
.drawer-lining { position: absolute; inset: 0; pointer-events: none; }
.drawer-head { position: absolute; display: flex; align-items: baseline; gap: 18px; white-space: nowrap; }
.drawer-head b { font: 400 34px/1 var(--ui-serif); color: var(--dw-sumi); font-weight: 400; }
.drawer-head em { font: 400 20px/1 var(--ui-sans); font-style: normal; letter-spacing: 0.12em; color: var(--dw-faint); }
.drawer-head--kept b { font-size: 28px; }
.drawer-rule { position: absolute; display: block; height: 2.4px; background: var(--dw-hair); }
.drawer-kept-hint { position: absolute; pointer-events: none; font: 400 22px/1.5 var(--ui-sans); color: var(--dw-label); }

/* Stacks of blank stationery: the top one comes off in the hand. */
.drawer-stack { position: absolute; transform-origin: 50% 50%; }
.drawer-stack-under {
  position: absolute; inset: 0; display: block; background: var(--piece-stock);
  box-shadow: -0.5px 0.8px 1.2px rgb(21 35 58 / 0.12), -1.5px 3px 6px rgb(21 35 58 / 0.05);
}
.drawer-stack-under.folder-piece--trading { border-radius: var(--photocard-r); }
.drawer .folder-piece { box-shadow: inset 0 0 0 0.6px rgb(255 255 255 / 0.6), -0.5px 0.8px 1.2px rgb(21 35 58 / 0.13), -1.5px 3px 8px rgb(21 35 58 / 0.06); }
.drawer-stack-top { transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms ease; }
.drawer:not(.is-readonly) .drawer-stack-top:hover, .drawer-stack-top:focus-visible {
  transform: translate(-3px, -9px) rotate(-0.6deg);
  box-shadow: inset 0 0 0 0.6px rgb(255 255 255 / 0.6), -3px 8px 10px rgb(21 35 58 / 0.10), -10px 18px 26px rgb(21 35 58 / 0.08);
}
.drawer.is-readonly .drawer-stack-top { cursor: default; }
.drawer-stock-label {
  position: absolute; left: 0; top: calc(100% + 22px); white-space: nowrap; pointer-events: none;
  display: flex; align-items: baseline; gap: 12px;
  font: 400 24px/1 var(--ui-serif); color: var(--dw-sumi);
}
.drawer-no { font: 400 18px/1 var(--ui-sans); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; color: var(--dw-faint); }
.drawer-stock-label em { font: 400 18px/1 var(--ui-sans); font-style: normal; letter-spacing: 0.12em; color: var(--dw-faint); }
/* blank stock: the picture side is just paper until it lies somewhere */
.drawer .picture-plus { background: #EEF2F4; cursor: inherit; }
.drawer .picture-plus::before, .drawer .picture-plus::after { display: none; }
.drawer-thing { cursor: grab; }

/* ==========================================================================
   F11: MODULAR DAILY LAYOUT & LIVE PREVIEW MODAL
   ========================================================================== */
.daily-tasks.is-wide,
.daily-tomorrow.is-wide,
.daily-memo-card.is-wide { left: 32px; width: 432px; }
.daily-memo-card.is-wide { height: 192px; }
.daily-tomorrow.is-top,
.daily-memo-card.is-solo { top: 176px; }
.daily-tomorrow.is-low { top: 592px; }
.journal-flow.is-expanded { height: 640px; }

.daily-journal-left {
  position: absolute;
  left: 32px;
  top: 176px;
  width: 432px;
  height: 544px;
}

.journal-flow--left {
  position: relative;
  left: 0;
  top: 0;
  width: 432px;
  height: 544px;
}

.journal-left-area {
  width: 100%;
  min-height: 100%;
  font-family: var(--font-hand);
  font-size: 20px;
  line-height: 32px;
  color: var(--color-ink);
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
}

.journal-left-area:empty::before {
  content: attr(data-placeholder);
  color: var(--color-ink-muted);
  opacity: 0.65;
  pointer-events: none;
}

.daily-preserved-band {
  margin-top: 6px;
  padding: 5px 7px;
  border: 0.65px solid var(--color-line);
  background: var(--color-paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font: 400 9px/1.3 var(--ui-sans);
  color: var(--color-ink-muted);
}

.daily-preserved-text {
  min-width: 0;
  word-break: break-word;
}

.daily-preserved-btn {
  flex: 0 0 auto;
  border: 0;
  border-bottom: 1px solid var(--color-ink-muted);
  background: transparent;
  padding: 2px 3px;
  font: 500 9px/1.1 var(--ui-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
  cursor: pointer;
}

.daily-hidden-cues {
  position: absolute;
  left: 32px;
  bottom: 12px;
  width: 432px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font: 400 9px/1.2 var(--ui-sans);
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

.daily-hidden-cues--right {
  left: 544px;
  width: 448px;
}

body.mode-view .daily-preserved-btn {
  display: none;
}


/* =========================================================================
 * The thing up close (thing-viewer.js): the same drawing as where it lies,
 * only brought closer. A plain veil, printed words beneath, blue-black shade.
 * ========================================================================= */
.thing-viewer { position: fixed; inset: 0; z-index: 85; }
.thing-veil { position: absolute; inset: 0; background: rgb(227 232 235 / 0.86); opacity: 0; transition: opacity 320ms ease; }
.thing-viewer.is-open .thing-veil { opacity: 1; }
.thing-title {
  position: fixed; left: 0; top: 0; max-width: min(720px, calc(100vw - 48px));
  font: 400 16px/24px var(--ui-serif); letter-spacing: 0.01em; color: var(--ink);
  text-align: center; pointer-events: none; opacity: 0; transition: opacity 220ms ease 120ms;
}
.thing-title[hidden] { display: none; }
.thing-viewer.is-open .thing-title { opacity: 1; }
.thing-hold { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; perspective: 1800px; }
.thing-card { position: absolute; inset: 0; transform-style: preserve-3d; cursor: default; outline: none; }
.thing-viewer .thing-face {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; cursor: inherit;
  box-shadow: inset 0 0 0 0.6px rgb(255 255 255 / 0.6),
    calc(-3px / var(--hold-s, 1)) calc(6px / var(--hold-s, 1)) calc(10px / var(--hold-s, 1)) rgb(21 35 58 / 0.10),
    calc(-14px / var(--hold-s, 1)) calc(28px / var(--hold-s, 1)) calc(48px / var(--hold-s, 1)) rgb(21 35 58 / 0.14);
}
.thing-viewer .thing-face--back { transform: rotateY(180deg); padding: 0; display: block; }
.thing-viewer .picture-plus { cursor: pointer; }
.thing-viewer .polaroid-chin { pointer-events: auto; cursor: text; }
.picture-plus.is-inert { cursor: inherit; }
.picture-plus.is-inert::before, .picture-plus.is-inert::after { display: none; }
.thing-viewer.is-writing [contenteditable] { outline: none; cursor: text; caret-color: #2F4F73; }
.thing-viewer [contenteditable]:empty::before { content: attr(data-placeholder); color: rgb(36 50 74 / 0.3); }

.thing-words, .album-foot {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px;
  min-height: 64px; padding: 10px 28px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #E8EDF0; border-top: 1px solid var(--rule);
  font: 400 13px/1 var(--ui-sans); color: #36424E; white-space: nowrap;
}
.thing-words { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; flex-wrap: nowrap; opacity: 0; transition: opacity 260ms ease 180ms; }
.thing-words-meta, .thing-words-core, .thing-words-ops { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; }
.thing-words-meta { justify-self: end; }
.thing-words-core { justify-self: center; }
.thing-words-ops { justify-self: start; }
@media (max-width: 900px) {
  .thing-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .thing-words-meta, .thing-words-core, .thing-words-ops { gap: 10px; }
}
.album-foot .album-actions { padding: 0; border: 0; flex-wrap: wrap; gap: 18px; }
.thing-viewer.is-open .thing-words { opacity: 1; }
.thing-words .word-button { font-size: 13px; color: #36424E; }
.thing-words .word-button[disabled] { color: #C2CBD2; }
.thing-no { font: 400 13px/1 var(--ui-serif); font-variant-numeric: tabular-nums; color: #1C232B; }
.thing-no i { font-style: normal; color: #8E9AA4; padding: 0 2px; }
.thing-name { color: #4F5D69; }
.thing-dot { width: 3px; height: 3px; border-radius: 50%; background: #C2CBD2; }
.thing-steps { display: inline-flex; gap: 6px; }

/* Backs, at each thing's own size. */
.thing-back-kicker { position: absolute; left: 16px; top: 14px; font: 400 7px/1 var(--ui-sans); letter-spacing: 0.3em; color: #8E9AA4; }
.thing-back-hand { position: absolute; color: #24324A; white-space: pre-wrap; overflow: hidden; }
.thing-viewer[data-kind="postcard"] .thing-face--back { background-color: #F5F4EF; }
.thing-viewer[data-kind="postcard"] .thing-back-hand { left: 16px; top: 34px; width: 44%; bottom: 18px; font: 400 15px/1.5 var(--font-hand); }
.thing-back-divide { position: absolute; left: 53%; top: 34px; bottom: 22px; width: 0.8px; background: #C2CBD2; }
.thing-back-stamp { position: absolute; right: 14px; top: 14px; width: 40px; height: 50px; overflow: hidden; background: #E9ECEA; box-shadow: 0 0 0 2.5px #FFFFFF, 0 0 0 3.3px #C2CBD2; }
.thing-back-stamp .folder-item-img { width: 100%; height: 100%; object-fit: cover; }
.thing-back-address { position: absolute; left: 59%; right: 16px; bottom: 26px; display: flex; flex-direction: column; gap: 20px; }
.thing-back-address i { display: block; height: 0.8px; background: #C2CBD2; }
.thing-viewer[data-kind="photo"] .thing-face--back { background-color: #FCFCFA; }
.thing-viewer[data-kind="photo"] .thing-back-hand { left: 22px; right: 22px; top: 56px; bottom: 20px; font: 400 20px/1.45 var(--font-hand); }
.thing-viewer[data-kind="polaroid"] .thing-face--back { background-color: #33393F; color: #E3E7E9; }
.thing-viewer[data-kind="polaroid"] [contenteditable]:empty::before { color: rgb(227 231 233 / 0.5); }
.thing-viewer[data-kind="polaroid"] .thing-back-hand { left: 16px; right: 16px; top: 22px; bottom: 50px; font: 400 18px/1.45 var(--font-hand); color: #E3E7E9; caret-color: #E3E7E9; }
.thing-back-film { position: absolute; left: 16px; bottom: 16px; font: 400 6.5px/1 var(--ui-sans); letter-spacing: 0.32em; color: #A6B0B8; }
.thing-viewer[data-kind="trading"] .thing-face { border-radius: var(--photocard-r); overflow: hidden; }
/* WebKit clips neither through overflow on 3D faces nor honours backface-visibility in nested layers:
   round the pictures themselves and hide the face that is turned away, as the album viewer does. */
.thing-viewer[data-kind="trading"] .thing-face img, .album-viewer[data-sheet-kind="trading"] .album-face img { border-radius: inherit; }
.thing-card[data-facing="front"] .thing-face--back, .thing-card[data-facing="back"] .thing-face--front { visibility: hidden; pointer-events: none; }
.thing-back-print { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 19px 15px 14px; box-sizing: border-box; background: radial-gradient(circle at 48% 42%, #F6F5F0, #EEECE6); color: #4E5358; }
.thing-back-print .picture-plus { background: transparent; }
.thing-back-head, .thing-back-rule, .thing-back-copy { align-self: stretch; text-align: left; pointer-events: none; }
.thing-back-head { display: flex; flex-direction: column; gap: 3px; }
.thing-back-mark { font: 400 13px/1.15 "Gowun Dodum", sans-serif; color: #4D5258; }
.thing-back-word { position: relative; font: 400 5.6px/1 "Gowun Dodum", sans-serif; letter-spacing: 0.28em; color: #585D63; pointer-events: none; }
.thing-back-rule { height: 0.8px; background: #A3A7AD; margin: 2px 0 12px; }
.thing-back-copy { font: 400 5.5px/1.9 "Gowun Dodum", sans-serif; letter-spacing: 0.22em; color: #5C6167; }
.thing-back-icon { margin-top: auto; align-self: flex-end; width: 17px; height: 17px; color: #676C72; pointer-events: none; }
.thing-back-glue { position: absolute; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(to bottom, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.08)); }

/* Closing folder transition (templates.js, page-turn.js). */
.folder-open-view.is-closing .folder-piece { opacity: 0; transition: opacity 240ms ease 160ms; }

/* Up from the foot (an upright iPad): the same white sheet, its tab at the top edge. */
.drawer[data-dock="bottom"] { width: auto; overflow-x: visible; overflow-y: clip; }
.drawer[data-dock="bottom"] .drawer-tray { right: 0; left: 0; top: auto; bottom: 0; width: 100%; height: var(--drawer-box-h, 420px); }
.drawer[data-dock="bottom"] .drawer-front {
  right: max(24px, env(safe-area-inset-right)); left: auto; top: auto; bottom: calc(100% - 2px); transform: none;
  width: min(196px, 30vw); height: calc(var(--drawer-front-w, 40px) + 2px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; flex-direction: row; gap: 12px;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -1px 0 rgb(21 35 58 / 0.05), 0 -4px 10px rgb(21 35 58 / 0.08);
}
.drawer[data-dock="bottom"] .drawer-tab-word, .drawer[data-dock="bottom"] .drawer-tab-ko { writing-mode: horizontal-tb; }
.drawer[data-dock="bottom"] .drawer-box { box-shadow: 0 -1px 0 rgb(21 35 58 / 0.04), 0 -18px 40px -10px rgb(21 35 58 / 0.16), 0 -3px 10px rgb(21 35 58 / 0.06); }
.drawer-rule--v { width: 2.4px; }

/* The tab is a tongue of the same sheet, not a piece of its own: it covers the sheet's edge
   and runs into it through two concave fillets. */
.drawer-front::before, .drawer-front::after {
  content: ''; position: absolute; right: 0; width: 12px; height: 12px; pointer-events: none;
}
.drawer-front::before { top: -12px; background: radial-gradient(circle at 0 0, transparent 11.5px, var(--dw-white) 12px); }
.drawer-front::after { bottom: -12px; background: radial-gradient(circle at 0 100%, transparent 11.5px, var(--dw-white) 12px); }
.drawer[data-dock="bottom"] .drawer-front::before { top: auto; bottom: 0; right: auto; left: -12px; background: radial-gradient(circle at 0 0, transparent 11.5px, var(--dw-white) 12px); }
.drawer[data-dock="bottom"] .drawer-front::after { bottom: 0; right: -12px; background: radial-gradient(circle at 100% 0, transparent 11.5px, var(--dw-white) 12px); }
.drawer-scroll { position: relative; }