/* ══ 아트리움 (Atrium) — 누비 디자인 언어 (2026-10-10) ══════════════════════════════
   atrium.html 만 부른다. 실제 앱(index.html)·서비스에는 걸리지 않는다.
   사용자가 고른 시안 ③(sian_glass.html, NUBI Design System 2.0)을 실제 앱 화면 전체에 CSS 만으로 입힌 것.
   이름: 고대 건축의 안뜰이자 박물관의 유리 천장 홀 — 빛을 들이는 유리(탐색)와 머무는 돌·종이(학습)의 구조.
   순서: style.css → editorial.css(토대) → editorial_scale.css(눈금) → editorial_parts.css(부품) → 이 파일.
   원칙: 유리는 탐색(사이드바·떠 있는 단추)에만, 공부하는 자리는 불투명 종이, 바깥에는 로제트(저대비).
         모서리 위계 — 학습 패널 8 · 카드 5 · 책 3 · 사이드바 14 · 떠 있는 것 22 · 버튼 5.
         제목은 Noto Serif KR 굵게(딥그린), 캡션은 라틴 대문자(Cormorant), 조작은 Pretendard.
         그림자는 얕게(종이의 두께), 움직임은 2px 떠오름과 느린 전환만. 책 읽기 본문은 장식 없는 흰 면. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Noto+Serif+KR:wght@400..700&display=swap");

/* nubi:noto-subset — pilot/tools/make_noto_subset.py 가 찍는다. 손대지 말 것 */
/* 누비 Noto 묶음 (2026-10-15 속도) — 구글 @import 보다 뒤에 적어야 이 묶음이 먼저 쓰인다. 모양은 같은 Noto Serif KR.
   묶음에 없는 글자는 위 구글 것으로 그린다. 다시 만들기: python pilot/tools/make_noto_subset.py */
@font-face { font-family: "Noto Serif KR"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../assets/fonts/noto/noto-1-5bce2350.woff2") format("woff2");
  unicode-range: U+20-22,U+25,U+27-29,U+2C-2F,U+3A-3B,U+3F,U+5B,U+5D,U+7E,U+A0,U+B7,U+2013-2014,U+2018-2019,U+201C-201D,U+2026,U+AC00-AC01,U+AC04,U+AC15,U+AC70,U+AC74,U+AC8C,U+ACB0,U+ACBD,U+ACC4,U+ACE0,U+ACF5,U+ACFC,U+AD00,U+AD50,U+AD6C-AD6D,U+AD8C,U+ADDC,U+ADF8,U+ADFC,U+AE00,U+AE08-AE09,U+AE30,U+AE34,U+AE4A,U+AE4C,U+B05D,U+B098,U+B0B4,U+B0BC,U+B108,U+B17C,U+B204,U+B294,U+B2C8,U+B2E4,U+B2E8,U+B2F9,U+B300,U+B354,U+B3C4-B3C5,U+B418,U+B41C,U+B429,U+B4B7,U+B4DC,U+B4EF,U+B530,U+B538,U+B5A4,U+B728,U+B73B,U+B77C,U+B799,U+B7EC,U+B7F4,U+B807,U+B824,U+B840,U+B85C,U+B860,U+B8CC,U+B958,U+B97C,U+B9AC,U+B9BD,U+B9C8,U+B9CC,U+B9CE,U+B9D0,U+B9DD-B9DE,U+B9E4,U+BA70,U+BA74,U+BA78,U+BAA8,U+BB34,U+BB36,U+BB38,U+BBF8,U+BC00,U+BC18,U+BC1B,U+BC29,U+BC30,U+BC95,U+BCC0,U+BCC4,U+BCF4,U+BCF8,U+BCFC,U+BD10,U+BD80,U+BD84,U+BE44,U+BF51,U+C0AC,U+C0C1,U+C0C8,U+C11C-C11D,U+C12F,U+C131,U+C138,U+C18C,U+C218,U+C2A8,U+C2B5,U+C2DC,U+C2E4,U+C2EC,U+C529,U+C544,U+C548,U+C54A,U+C54C,U+C558,U+C57D,U+C5B4,U+C5BD,U+C5C4,U+C5C7,U+C5D0,U+C5EC,U+C5F0,U+C5F4,U+C608,U+C624,U+C640,U+C65C,U+C678,U+C694,U+C6A9,U+C6B0,U+C6B4,U+C6D0,U+C704,U+C720,U+C73C,U+C740,U+C744,U+C74C,U+C758,U+C774-C775,U+C778,U+C77D,U+C784,U+C788,U+C790-C791,U+C7A5,U+C7AC,U+C800-C801,U+C804,U+C810-C811,U+C815,U+C81C,U+C838,U+C870,U+C874,U+C885,U+C8C4,U+C8FC,U+C911,U+C99D,U+C9C0-C9C1,U+C9C4,U+CC3E,U+CC45,U+CC98,U+CCA0,U+CCAD,U+CCB4,U+CD94,U+CDB0,U+CE58-CE59,U+CE68,U+D130,U+D1B5,U+D2B8,U+D310,U+D45C,U+D480,U+D544,U+D558-D559,U+D55C,U+D569,U+D56D,U+D574,U+D589,U+D5C8,U+D5D8,U+D638,U+D63C,U+D654-D655,U+D6A8,U+D769,U+D788,U+D78C; }
@font-face { font-family: "Noto Serif KR"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../assets/fonts/noto/noto-2-64492179.woff2") format("woff2");
  unicode-range: U+AC08,U+AC10-AC12,U+AC14,U+AC16,U+AC19,U+AC1C-AC1D,U+AC20,U+AC24,U+AC31,U+AC71,U+AC77-AC78,U+AC80-AC81,U+AC83,U+AC89,U+AC90,U+AC94,U+ACA0,U+ACA8-ACAA,U+ACAC,U+ACB9,U+ACBC,U+ACC1,U+ACE1,U+ACE4,U+ACE7-ACE8,U+ACF1,U+ACF3,U+ACFD,U+AD04,U+AD11,U+AD1C,U+AD70,U+AD73-AD75,U+AD7D,U+AD81,U+ADA4,U+ADC0,U+ADE0,U+ADF9,U+AE0B,U+AE0D,U+AE38,U+AE40-AE41,U+AE43,U+AE4E,U+AE50,U+AE54,U+AE5C-AE5D,U+AE65,U+AE68,U+AE70,U+AEBC,U+AEBE,U+AECD,U+AED8,U+AEF4,U+AF2C-AF2D,U+AF34,U+AF3C,U+AF42,U+AF64,U+AFB8,U+AFBC,U+AFC0,U+AFC8,U+AFCE,U+AFD4,U+AFE8,U+B00C,U+B010,U+B014,U+B01C-B01D,U+B044,U+B048,U+B04A,U+B04C,U+B054,U+B057,U+B07C,U+B080,U+B084,U+B08C,U+B09C,U+B0A0-B0A1,U+B0A8-B0A9,U+B0AB-B0AF,U+B0B1,U+B0B8,U+B0C4-B0C5,U+B0C8-B0C9,U+B0D0,U+B0E5,U+B109,U+B110,U+B113,U+B118-B119,U+B123-B124,U+B137,U+B140-B141,U+B144,U+B150,U+B178,U+B180,U+B192-B193,U+B205,U+B208,U+B20C,U+B214-B215,U+B220,U+B234,U+B258,U+B25C,U+B269,U+B274,U+B290,U+B298,U+B2A0,U+B2A5-B2A6,U+B2AC,U+B2C9,U+B2CC,U+B2D0,U+B2D8-B2D9,U+B2E5,U+B2EB-B2ED,U+B2F4-B2F5,U+B2F7,U+B2FF,U+B308,U+B311,U+B314,U+B355,U+B358,U+B35C,U+B35F,U+B364,U+B367,U+B369,U+B36E,U+B370,U+B378,U+B383,U+B3C8,U+B3CC,U+B3D5,U+B3D9,U+B3FC,U+B410,U+B420,U+B428,U+B450,U+B454,U+B458,U+B461,U+B465,U+B46C,U+B480,U+B4A4,U+B4C0,U+B4DD,U+B4E0,U+B4E3-B4E4,U+B4ED,U+B4F1,U+B514,U+B529-B52A,U+B531,U+B534,U+B545,U+B54C,U+B5A0,U+B5A8,U+B5B4,U+B5BB-B5BC,U+B5C0,U+B610-B611,U+B6AB,U+B6B1,U+B6F0,U+B6F4,U+B6F8,U+B72C,U+B730,U+B739,U+B744,U+B755,U+B760,U+B77D,U+B780,U+B784,U+B78C-B78D,U+B790-B791,U+B798,U+B79C,U+B7A8,U+B7AB-B7AC,U+B7B5,U+B7C9,U+B7F0,U+B7FC-B7FD,U+B7FF-B800,U+B808-B809,U+B80C,U+B810,U+B825,U+B828,U+B82C,U+B835,U+B838-B839,U+B85D,U+B864,U+B86C-B86D,U+B86F,U+B871,U+B8B0,U+B8E8,U+B8EC,U+B8F0,U+B8F9,U+B904,U+B918,U+B93C,U+B960,U+B96D,U+B974,U+B978,U+B984-B985,U+B987,U+B9AD,U+B9B0,U+B9B4,U+B9BC,U+B9BF,U+B9C1,U+B9C9,U+B9E1,U+B9E5,U+B9E8,U+B9EC,U+B9F9-B9FA,U+BA38-BA39,U+BA3C,U+BA40,U+BA48,U+BA54,U+BA58,U+BA5C,U+BA85,U+BA87,U+BAA9,U+BAAB-BAAC,U+BAB0,U+BAB8,U+BABB,U+BABD,U+BB18,U+BB3B-BB3C,U+BB49,U+BB50,U+BB58,U+BBC0,U+BBFC,U+BBFF,U+BC0D,U+BC0F,U+BC11,U+BC14-BC16,U+BC1C-BC1D,U+BC25,U+BC31,U+BC84,U+BC88,U+BC8C,U+BC94,U+BC97,U+BCA0,U+BCA4,U+BCA8,U+BCB3,U+BCBC-BCBD,U+BCCD,U+BCD1,U+BCD5,U+BCF5,U+BD04-BD05,U+BD09,U+BD24,U+BD81,U+BD88,U+BD99,U+BDF0,U+BE0C,U+BE10,U+BE14,U+BE45,U+BE48,U+BE4C,U+BE57,U+BE5B,U+BE60-BE61,U+BE64,U+BE68,U+BE7C-BE7D,U+BE80,U+BE84,U+BE8C,U+BE90,U+BED7,U+BF08,U+BFCC,U+BFD0,U+C058,U+C05C,U+C0AD,U+C0B0,U+C0B4,U+C0B6,U+C0BC-C0BD,U+C0C9,U+C0CC,U+C0DB,U+C0DD,U+C0F7,U+C100,U+C11E,U+C120,U+C124,U+C12C-C12D,U+C139,U+C13C,U+C140,U+C148,U+C14B,U+C154,U+C158,U+C168,U+C178,U+C18D,U+C190,U+C194,U+C19C,U+C1A1,U+C1E0,U+C1FC,U+C219,U+C21C,U+C220,U+C228,U+C22B,U+C26C,U+C270,U+C27C-C27D,U+C288,U+C298,U+C2A4,U+C2AC,U+C2B7,U+C2B9,U+C2DD,U+C2E0,U+C2E3,U+C2EB,U+C2ED,U+C2F1,U+C2F6,U+C2F8,U+C30C-C30D,U+C313,U+C368,U+C378,U+C37C,U+C3D8,U+C3DF,U+C4F0,U+C4F4,U+C4F8,U+C500-C501,U+C528,U+C52C,U+C545,U+C549,U+C54E,U+C554-C555,U+C557,U+C559,U+C55E,U+C560-C561,U+C564,U+C568,U+C571,U+C57C,U+C584,U+C587,U+C591,U+C598,U+C5B5,U+C5B8-C5B9,U+C5BB-C5BC,U+C5C5-C5C6,U+C5C8-C5C9,U+C5D4,U+C5D8,U+C5E0,U+C5E3,U+C5E5,U+C5ED-C5EE,U+C5FC,U+C600-C601,U+C605-C606,U+C61B,U+C625,U+C628,U+C62C,U+C62E,U+C633-C635,U+C637,U+C639,U+C644,U+C654-C655,U+C67C,U+C695,U+C6B8,U+C6C0-C6C1,U+C6C3,U+C6C5,U+C6CC,U+C6D4,U+C6E0,U+C6E8,U+C6EC,U+C6F9,U+C717,U+C721,U+C724,U+C728,U+C735,U+C74D,U+C751,U+C77C,U+C783,U+C785,U+C787,U+C789,U+C794,U+C796,U+C798,U+C7A0-C7A1,U+C7B0,U+C7B4,U+C7C1,U+C808,U+C80A,U+C820,U+C84C,U+C871,U+C880-C881,U+C88B-C88C,U+C8E0,U+C8FD,U+C900,U+C904,U+C90C,U+C918,U+C92C,U+C988-C989,U+C990,U+C9C8,U+C9D0-C9D1,U+C9D3,U+C9D5-C9D6,U+C9DA,U+C9DC-C9DD,U+C9E7,U+C9F8,U+CABC-CABD,U+CAD3,U+CBE4,U+CC0D,U+CC28-CC29,U+CC2C,U+CC2E,U+CC30,U+CC38,U+CC3D,U+CC44,U+CC55,U+CC59,U+CC99,U+CC9C,U+CCA8-CCA9,U+CCAB,U+CCD0,U+CCE4,U+CD08,U+CD18,U+CD1B,U+CD1D,U+CD2C,U+CD5C,U+CD95,U+CD98,U+CD9C,U+CDA4,U+CDA9,U+CDC4,U+CDCC,U+CDE8,U+CE20-CE21,U+CE35,U+CE5C,U+CE60,U+CE69,U+CE6D,U+CE74,U+CE78,U+CE7C,U+CE90,U+CEA0,U+CEA3,U+CEE4,U+CEE8,U+CEEC,U+CEF4,U+CEF8,U+CF00,U+CF08,U+CF1C,U+CF20,U+CF30,U+CF54,U+CF58,U+CF5C,U+CF70,U+CF8C,U+CFB0,U+CFE0,U+CFE4,U+CFE8,U+CFFC,U+D034,U+D038,U+D03C,U+D06C,U+D070,U+D074,U+D07C,U+D0A4,U+D0A8,U+D0AC,U+D0B7,U+D0B9,U+D0C0-D0C1,U+D0C8,U+D0D0,U+D0D3,U+D0D5,U+D0DC-D0DD,U+D0E0,U+D0ED,U+D0F0,U+D131,U+D138,U+D140,U+D14C-D14D,U+D150,U+D154,U+D15C,U+D1A0-D1A1,U+D1A4,U+D1B1,U+D22C,U+D234,U+D280,U+D29C,U+D2B9,U+D2BC,U+D2C0,U+D2C8,U+D2F0-D2F1,U+D2F4,U+D2F8,U+D301,U+D305,U+D30C,U+D30E,U+D314,U+D31D,U+D328,U+D33D,U+D37C,U+D398,U+D39C,U+D3A0,U+D3B4,U+D3B8,U+D3BC,U+D3C9,U+D3EC-D3ED,U+D3F0,U+D3F4,U+D3FC,U+D478-D479,U+D47C,U+D488-D489,U+D48D,U+D4E8,U+D504,U+D50C,U+D53C-D53D,U+D540,U+D54D,U+D54F,U+D551,U+D560,U+D568,U+D575,U+D578,U+D57C,U+D588,U+D5A5,U+D5CC,U+D5D0,U+D5E4,U+D5EC,U+D5F4,U+D5F7,U+D600-D601,U+D604,U+D611,U+D614-D615,U+D61C,U+D639,U+D640,U+D648-D649,U+D64D,U+D658,U+D65C,U+D669,U+D68C-D68D,U+D69F,U+D6C4-D6C5,U+D6C8,U+D6CC,U+D6D1,U+D6D7,U+D6E8,U+D6FC,U+D734,U+D744,U+D749,U+D750,U+D754,U+D758-D759,U+D76C,U+D770,U+D790,U+D798-D799,U+D7A3; }
@font-face { font-family: "Noto Serif KR"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../assets/fonts/noto/noto-3-afffa863.woff2") format("woff2");
  unicode-range: U+AC07,U+AC09,U+AC13,U+AC17,U+AC1A,U+AC2C-AC2D,U+AC2F,U+AC38,U+AC40,U+AC54,U+AC85,U+AC8A-AC8B,U+ACB8,U+ACEA,U+ACF0,U+ACF6,U+AD18,U+AD2D,U+AD34,U+AD38,U+AD49,U+AD63,U+AD76,U+AD7C,U+AD82,U+AD88,U+AD90,U+ADC4,U+ADC8,U+ADD0,U+ADD3,U+AE01-AE02,U+AE37,U+AE4D,U+AE6C,U+AE78,U+AE7C-AE7D,U+AEC4,U+AECF-AED1,U+AF08,U+AF3D,U+AF3F,U+AF41,U+AF43,U+AF49,U+AF5D,U+AF80,U+AF88,U+AF90,U+AFB9,U+AFC7,U+AFC9,U+AFCB,U+AFCD,U+AFE9,U+AFF0,U+B04E,U+B053,U+B055,U+B08D,U+B091,U+B099-B09A,U+B09F,U+B0B3,U+B0C7,U+B0D8,U+B10B-B10C,U+B11C-B11D,U+B125,U+B128,U+B12C,U+B135,U+B138,U+B154-B155,U+B158,U+B15C,U+B179,U+B188,U+B18B,U+B18D,U+B194,U+B1A8,U+B1CC,U+B1D0,U+B1D4,U+B1DD,U+B1E8,U+B1FD,U+B259,U+B260,U+B268,U+B289,U+B291,U+B299-B29A,U+B2AA,U+B2DB,U+B2DD,U+B2E2,U+B2E6,U+B2EE,U+B2F3,U+B2FB,U+B301,U+B304,U+B310,U+B313,U+B315,U+B365,U+B36B,U+B371,U+B374,U+B38C,U+B3A0,U+B3CB,U+B3CE,U+B3D4,U+B3D7,U+B3DB,U+B42B,U+B42D,U+B451,U+B460,U+B463,U+B4B9,U+B4E6,U+B4EC,U+B515,U+B518,U+B51B-B51C,U+B524-B525,U+B527,U+B540-B541,U+B550,U+B554,U+B55C,U+B560,U+B5A1,U+B5B1,U+B5B3,U+B5C4,U+B5CF-B5D0,U+B618,U+B625,U+B62C,U+B648,U+B664,U+B69C-B69D,U+B6A4,U+B700-B701,U+B729,U+B72F,U+B738,U+B748,U+B754,U+B764,U+B768,U+B771,U+B78F,U+B796-B797,U+B7A0,U+B7AD,U+B7B4,U+B7ED,U+B801,U+B818-B819,U+B81B,U+B834,U+B837,U+B8C1,U+B8E9,U+B8F8,U+B8FB,U+B93D,U+B940,U+B944,U+B94C,U+B959,U+B95C,U+B975,U+B989,U+B98E,U+B9CF,U+B9D1,U+B9D8-B9D9,U+B9DB,U+B9E3,U+B9F4-B9F5,U+B9F7-B9F8,U+BA42,U+BA49,U+BA4B,U+BA4D-BA4E,U+BA53,U+BA55,U+BA64,U+BA67,U+BA69,U+BA71,U+BA84,U+BAB9,U+BAFC,U+BB2B,U+BB35,U+BB3D-BB3E,U+BB44-BB45,U+BB47,U+BB4D,U+BB54,U+BB88,U+BB8C,U+BBA4,U+BBC8,U+BBD0,U+BBF9,U+BC08-BC09,U+BC0B,U+BC1F,U+BC24,U+BC27,U+BC2D,U+BC34,U+BC38,U+BC40,U+BC43-BC45,U+BC49,U+BC85,U+BC99-BC9A,U+BCB0,U+BCCF-BCD0,U+BCF6,U+BD07,U+BD48,U+BD4C,U+BD59,U+BD89,U+BD90,U+BD93,U+BD95,U+BDD4,U+BDDC,U+BE4E,U+BE55,U+BE59-BE5A,U+BE74-BE75,U+BE7B,U+BE8D,U+BE8F,U+BEA8,U+BED0-BED1,U+BED4,U+BED8,U+BEE3-BEE4,U+BF09,U+BF18,U+BF1B,U+BF50,U+BFB0,U+BFCD,U+BFD4,U+BFDC,U+C060,U+C068-C069,U+C090,U+C0AF,U+C0BF-C0C0,U+C0D0,U+C0D8-C0D9,U+C0DC,U+C0E4,U+C0F9,U+C115,U+C123,U+C126,U+C130,U+C149,U+C14C,U+C164,U+C170,U+C18E,U+C19D,U+C19F,U+C1A5,U+C1C4,U+C1E4,U+C1F3,U+C21F,U+C22D,U+C22F,U+C231-C232,U+C248,U+C26D,U+C274,U+C290,U+C2A5,U+C2AD-C2AE,U+C2B4,U+C2EF,U+C2F9,U+C2FC,U+C300,U+C308,U+C314,U+C369,U+C370,U+C379,U+C37D,U+C384,U+C3DC,U+C3E0,U+C3ED,U+C410,U+C464-C465,U+C4F1,U+C50C,U+C538-C539,U+C53B,U+C553,U+C570,U+C573-C575,U+C580,U+C58C,U+C595,U+C597,U+C5CA,U+C5CC,U+C5CE,U+C5D1,U+C5FD-C5FF,U+C607,U+C60C,U+C610,U+C62D,U+C641,U+C648,U+C660,U+C698,U+C6A4-C6A5,U+C6B1,U+C6BA,U+C6F0,U+C708,U+C70C,U+C714,U+C719,U+C73D,U+C74A,U+C75C,U+C78A,U+C78E,U+C797,U+C7A3,U+C7A6,U+C7BD,U+C7BF-C7C0,U+C813,U+C816,U+C81D,U+C824,U+C82D,U+C82F,U+C878,U+C887,U+C8C8,U+C8D7,U+C906,U+C90D,U+C90F,U+C950,U+C954,U+C958,U+C960,U+C98C,U+C998-C999,U+C9CA,U+C9D9,U+C9E0,U+C9E2,U+C9E4,U+C9EC-C9ED,U+C9F0-C9F1,U+CA0C,U+CA4C-CA4D,U+CA50,U+CA54,U+CA61,U+CA68,U+CAD1,U+CB10,U+CB14,U+CB48-CB49,U+CB50,U+CB59,U+CB64,U+CC0C,U+CC14,U+CC1C,U+CC21-CC22,U+CC27,U+CC39,U+CC3B-CC3C,U+CC48,U+CC4C,U+CC58,U+CCBC,U+CD09,U+CD0C,U+CDA5,U+CDA7,U+CE04,U+CE30,U+CE6B,U+CE75,U+CE84,U+CE89,U+CE94,U+CE98,U+CEA1,U+CEA4,U+CEE5,U+CEEB,U+CEF5,U+CEF7,U+CF04,U+CF10-CF11,U+CF13,U+CF15,U+CF24,U+CF55,U+CF64-CF65,U+CF67,U+CF69,U+CFF0,U+CFF5,U+D018,U+D044-D045,U+D047,U+D050,U+D07D,U+D0A5,U+D0B4-D0B5,U+D0C4,U+D0C9,U+D0D1,U+D0D4,U+D0E4,U+D0EC,U+D0F1,U+D134,U+D141,U+D143-D145,U+D15D,U+D15F,U+D168,U+D17C,U+D1A8,U+D1D8,U+D1F4,U+D22D,U+D230,U+D23C-D23D,U+D241,U+D248,U+D25C,U+D281,U+D284,U+D288,U+D291,U+D295,U+D2BF,U+D2C9,U+D2CB,U+D2D4,U+D300,U+D30D,U+D31C,U+D320-D321,U+D325,U+D32C,U+D338,U+D33B,U+D380,U+D384,U+D38C,U+D390,U+D3AD,U+D3C4-D3C5,U+D3C8,U+D3D0,U+D401,U+D482,U+D48B,U+D4CC,U+D4D4,U+D508,U+D514-D515,U+D54C,U+D565,U+D587,U+D5DB,U+D5DD,U+D5E5,U+D5E8,U+D5F9,U+D608,U+D610,U+D651,U+D667,U+D671,U+D683,U+D6A1,U+D6D4,U+D6E4,U+D718,U+D71C,U+D720,U+D729,U+D73C,U+D751,U+D760-D761,U+D765,U+D774,U+D77C,U+D79D; }
/* /nubi:noto-subset */
/* ↑ 2026-10-15 속도: Noto 굵기를 400;500;600;700 대신 범위(400..700)로 묻는다. 구글이 주는 글꼴 파일 124개는 주소까지 똑같고
   (가변 판이라 굵기 넷이 같은 파일), 목록 CSS 만 511줄 93KB → 139줄 23KB(압축)로 준다. 모양은 그대로다. */

:root[data-variant="atrium"] {
  --a-deep: #00462a; --a-deep-rgb: 0,70,42;   /* 누비 원래 녹색 (시안의 #00462F 는 탁하다는 평 — 10-10) */ --a-forest: #326e55; --a-sage: #55735f;   /* 10-10 전수조사: #829e8b 는 아이보리 위 2.7:1 — 글자로도 쓰여 4.6:1 로 내림 */ --a-mist: #d9e4d7; --a-ivory: #f4f0e5;
  --a-cream: #f8f4ea; --a-sheet: #fcfaf5; --a-white: #ffffff;
  --a-ink: #1c2a23; --a-ink-2: #44524a; --a-ink-3: #5f6b63; --a-ink-4: #5f6b63;   /* 10-10 전수조사: #8f9a92(2.8:1)를 걸린 시간·잠긴 메뉴 글자에 썼다 → ink-3 과 같게 */
  --a-line: rgba(0,70,47,.11); --a-line-2: rgba(0,70,47,.2); --a-line-3: rgba(0,70,47,.32);
  --a-gold: #7a6230;   /* 10-10 전수조사: #9c7e45 는 크림 위 3.5:1 — Epistula·§ 글자 → 5.3:1 */ --a-gold-line: rgba(156,126,69,.18);
  --a-serif: "Noto Serif KR", "ChosunilboMJ", Batang, serif;
  --a-latin: "Cormorant Garamond", "Noto Serif KR", serif;
  --a-r-panel: 8px; --a-r-card: 5px; --a-r-book: 3px; --a-r-side: 14px; --a-r-float: 22px; --a-r-cta: 5px;
  --a-sh-paper: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(48,44,30,.05), 0 18px 36px -26px rgba(48,44,30,.32);
  --a-sh-card: 0 1px 2px rgba(48,44,30,.04), 0 6px 14px -10px rgba(48,44,30,.18);
  --a-sh-lift: 0 2px 4px rgba(48,44,30,.05), 0 12px 22px -12px rgba(48,44,30,.26);
  --a-sh-float: 0 1px 2px rgba(48,44,30,.06), 0 14px 32px -16px rgba(30,40,30,.30);
  --a-glass: rgba(250,247,239,.68); --a-glass-strong: rgba(250,247,239,.9); --a-glass-brd: rgba(255,255,255,.72);
  --a-slow: cubic-bezier(.25,.6,.25,1);
  --a-side-w: 268px;
  /* 에디토리얼 토대의 역할 토큰을 아트리움 값으로 */
  --c-page: var(--a-ivory); --c-surface: var(--a-white); --c-sunk: #efeadd; --c-tint: rgba(0,70,47,.04);
  --c-ink: var(--a-ink); --c-ink-2: var(--a-ink-2); --c-ink-3: var(--a-ink-3);
  --c-line: var(--a-line); --c-line-soft: rgba(0,70,47,.07); --c-line-strong: var(--a-line-3); --c-field-line: var(--a-line-2);
  --c-brand: var(--a-deep); --c-brand-hover: #08503a; --c-brand-soft: var(--a-mist); --c-brand-ink: var(--a-forest); --c-on-brand: #ffffff;
  --c-gold: var(--a-gold); --c-page-rgb: 244,240,229; --c-brand-rgb: 0,70,47;
  --ff-display: var(--a-serif);
}

/* ── 바탕: 아이보리 위 로제트(저대비), 가장자리만 살짝 어둡게 ──
   10-16 사용자: 무늬가 잘 안 보인다 → 그림 대비 두 배(rosette_bg_v2), 덮는 아이보리 .42 → .15. 다크는 예전 그대로(사용자 확인) */
html[data-variant="atrium"] body {
  background-color: var(--a-ivory) !important;
  background-image:
    radial-gradient(140% 100% at 50% 45%, transparent 60%, rgba(70,60,30,.09) 100%),
    linear-gradient(rgba(244,240,229,.15), rgba(244,240,229,.15)),
    url("../assets/art/rosette_bg_v2.webp") !important;
  background-size: auto, auto, 365px 272px !important;
  background-attachment: fixed, scroll, scroll !important;
  color: var(--a-ink);
}

/* ── 유리 사이드바 (넓은 화면) — 상단바를 왼쪽에 세운다 ── */
@media (min-width: 1100px) {
  html[data-variant="atrium"] body { padding-left: calc(var(--a-side-w) + 28px); }
  html[data-variant="atrium"] body.demo-shot { padding-left: 0; }   /* 가이드 그림 촬영: 메뉴를 숨겼으니 그 자리도 비운다 */
  html[data-variant="atrium"] .topbar {
    position: fixed; left: 14px; top: 14px; bottom: 14px; width: var(--a-side-w); z-index: 30;
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px;
    padding: 18px 10px 14px; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0,70,47,.18) transparent;
    background: var(--a-glass); -webkit-backdrop-filter: blur(16px) saturate(115%); backdrop-filter: blur(16px) saturate(115%);
    border: 1px solid var(--a-glass-brd); border-radius: var(--a-r-side);
    box-shadow: 0 0 0 1px rgba(0,70,47,.06), var(--a-sh-float);
    transform: none !important;
  }
  html[data-variant="atrium"] .topbar::after { display: none !important; }
  html[data-variant="atrium"] .topbar > * { order: 0 !important; }
  html[data-variant="atrium"] .topbar > .brand { min-height: 0 !important; padding: 0 10px 12px; }
  html[data-variant="atrium"] .topbar .brand .brand-logo { height: 26px; }
  html[data-variant="atrium"] .topbar > .exam-menu { margin: 0 4px 6px; }
  html[data-variant="atrium"] .topbar .exam-cur { width: 100%; text-align: left; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--a-line); background: rgba(255,255,255,.42);
    font-family: var(--a-latin); font-size: 17px; font-weight: 600; letter-spacing: .08em; color: var(--a-deep); }
  html[data-variant="atrium"] .exam-list { border-radius: 20px; padding: 6px; background: var(--a-glass-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--a-glass-brd); box-shadow: var(--a-sh-float); }
  html[data-variant="atrium"] .exam-list button { border-radius: 14px; border-bottom: 0; }
  html[data-variant="atrium"] .topbar > #nav { display: flex !important; flex-direction: column; gap: 1px; margin: 0; flex: 1 1 auto; padding: 0 0 12px; -webkit-mask-image: none !important; mask-image: none !important; }
  html[data-variant="atrium"] #nav > * { order: 0 !important; }
  html[data-variant="atrium"] #nav a,
  html[data-variant="atrium"] #nav > .nav-tracklabel ~ a {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px !important; border-radius: 10px !important;
    font-size: 14px !important; font-weight: 400; color: var(--a-ink-2); background: transparent; box-shadow: none !important; transition: background .3s, color .3s;
  }
  html[data-variant="atrium"] #nav a:hover { background: rgba(255,255,255,.55); color: var(--a-ink); }
  html[data-variant="atrium"] #nav a.active { background: rgba(255,255,255,.82) !important; color: var(--a-deep); font-weight: 600; box-shadow: 0 0 0 1px rgba(0,70,47,.08), 0 4px 10px -6px rgba(48,44,30,.25) !important; }
  html[data-variant="atrium"] #nav a.locked { color: var(--a-ink-4); }
  html[data-variant="atrium"] #nav > .nav-tracklabel {
    margin: 16px 12px 6px !important; padding: 0 !important; border: 0 !important; background: none !important;
    font-family: var(--ff-ui); font-size: 11px !important; font-weight: 600; letter-spacing: .14em; color: var(--a-ink-3); line-height: 1.4;
  }
  html[data-variant="atrium"] #nav > .nav-div { width: auto !important; height: 1px !important; margin: 6px 12px !important; align-self: stretch; background: var(--a-line) !important; }
  html[data-variant="atrium"] .topbar > .theme-btn { margin: auto 4px 0 !important; }
  html[data-variant="atrium"] .topbar > :is(.theme-btn, .mob-btn) { text-align: left; border-radius: 10px; background: rgba(255,255,255,.38); border: 1px solid var(--a-line); margin-left: 4px; margin-right: 4px; font-size: 13px; padding: 7px 12px; }
  html[data-variant="atrium"] .topbar > .mob-btn { margin-top: 4px; }
  html[data-variant="atrium"] .toc { top: 24px !important; }
}
/* 좁은 화면: 위쪽 메뉴를 유리로 */
@media (max-width: 1099px) {
  html[data-variant="atrium"] .topbar { background: var(--a-glass-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--a-glass-brd); box-shadow: var(--a-sh-float); }
}

/* ── 페이지 몸통: 학습 화면은 불투명 종이 한 장(학습 패널, 8px) ── */
html[data-variant="atrium"] body:is([data-route="course"], [data-route="task"], [data-route="quiz"], [data-route="commentary"], [data-route="notes"], [data-route="guide"], [data-route="notice"], [data-route="column"], [data-route="feedback"], [data-route="me"], [data-route="export"], [data-route="programs"], [data-route="program"]) #app > .wrap {
  max-width: 900px; margin: 28px auto 60px; padding: 52px 60px 56px;
  background: var(--a-sheet); border: 1px solid rgba(0,70,47,.09); border-radius: var(--a-r-panel); box-shadow: var(--a-sh-paper);
}
html[data-variant="atrium"] body:is([data-route="programs"], [data-route="program"]) #app > .wrap { max-width: 1180px; }
html[data-variant="atrium"] body[data-route="read"] #app > .wrap { margin-top: 20px; }
@media (max-width: 900px) {
  /* 종이 패널을 쓰는 화면만 (10-10 전수조사: 책 읽기·홈까지 걸려 본문 폭이 290px 로 좁아졌다) */
  html[data-variant="atrium"] body:is([data-route="course"], [data-route="task"], [data-route="quiz"], [data-route="commentary"], [data-route="notes"], [data-route="guide"], [data-route="notice"], [data-route="column"], [data-route="feedback"], [data-route="me"], [data-route="export"]) #app > .wrap { padding: 26px 16px 30px !important; margin: 10px 6px 40px !important; }
  /* 심화 과정 — 종이 패널을 걷는다. 서가 그림이 절대 좌표라 패널 여백만큼 좁아지면 봉투가 화면 밖으로 나갔다 */
  html[data-variant="atrium"] body:is([data-route="programs"], [data-route="program"]) #app > .wrap { padding: 16px 12px 30px !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
  html[data-variant="atrium"] body:is([data-route="home"], [data-route="programs"], [data-route="program"]) .track-card { padding: 20px 14px !important; }
}

/* ── 제목 위계: 라틴 캡션 → 큰 명조(굵게, 딥그린) → 고딕 한 줄 ── */
html[data-variant="atrium"] h1.page {
  font-family: var(--a-serif) !important; font-weight: 700 !important; font-size: clamp(28px, 3.3vw, 40px) !important; line-height: 1.28 !important;
  letter-spacing: -.01em; color: var(--a-deep);
}
html[data-variant="atrium"] h1.page::before {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  font-family: var(--a-latin); font-size: 12.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--a-forest); line-height: 1;
}
html[data-variant="atrium"] h1.page::after { content: none; }
html[data-variant="atrium"] body[data-route="course"] h1.page::before { content: "NUBI · Liber"; }
html[data-variant="atrium"] body[data-route="task"] h1.page::before { content: "Liber · Exercitatio"; }
html[data-variant="atrium"] body[data-route="quiz"] h1.page::before { content: "Liber · Quaestiones"; }
html[data-variant="atrium"] body[data-route="commentary"] h1.page::before { content: "Liber · Commentarius"; }
html[data-variant="atrium"] body[data-route="notes"] h1.page::before { content: "Liber · Annotationes"; }
html[data-variant="atrium"] body[data-route="guide"] h1.page::before { content: "NUBI · Itinerarium"; }
html[data-variant="atrium"] body[data-route="notice"] h1.page::before { content: "NUBI · Nuntii"; }
html[data-variant="atrium"] body[data-route="column"] h1.page::before { content: "NUBI · Commentarii"; }   /* 입시칼럼도 공지와 같은 판 (2026-10-16) */
/* 공지·입시칼럼 전환: 진한 알약 대신 글자 탭 — 지금 칸에만 밑줄 (2026-10-16 사용자: 투박하다) */
html[data-variant="atrium"] .cl-tabs { display: flex; gap: 22px; padding: 0; margin: 2px 0 18px; border: 0; border-bottom: 1px solid var(--a-line); border-radius: 0; background: none; }
html[data-variant="atrium"] .cl-tabs a { position: relative; padding: 6px 2px 10px; border-radius: 0; background: none !important; font-size: 15.5px; font-weight: 500; color: var(--a-ink-3) !important; letter-spacing: -.01em; }
html[data-variant="atrium"] .cl-tabs a:hover { color: var(--a-ink) !important; }
html[data-variant="atrium"] .cl-tabs a[aria-current="page"] { color: var(--a-deep) !important; font-weight: 600; }
html[data-variant="atrium"] .cl-tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--a-deep); }
html[data-variant="atrium"] body[data-route="feedback"] h1.page::before { content: "NUBI · Responsa"; }
html[data-variant="atrium"] body[data-route="me"] h1.page::before { content: "NUBI · Acta"; }
html[data-variant="atrium"] body[data-route="export"] h1.page::before { content: "NUBI · Exportatio"; }
html[data-variant="atrium"] p.sub, html[data-variant="atrium"] .stage-desc { color: var(--a-ink-2); font-size: 15.5px; line-height: 1.75; }
html[data-variant="atrium"] .card h2 { font-family: var(--a-serif) !important; font-weight: 700 !important; font-size: 18px !important; color: var(--a-deep); line-height: 1.45; }

/* ── 단추: 조작하는 요소는 곡선(5px), 주요는 딥그린, 보조는 안쪽 실선 ── */
html[data-variant="atrium"] .btn:not(.ghost):not(:disabled) {
  background: var(--a-deep) !important; background-image: none !important; color: #fff; border-radius: var(--a-r-cta);
  font-weight: 600; letter-spacing: .01em; padding: 12px 22px;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 6px 14px -8px rgba(var(--a-deep-rgb), .55);
  transition: transform .4s var(--a-slow), box-shadow .4s var(--a-slow), background .3s;
}
html[data-variant="atrium"] .btn:not(.ghost):not(:disabled):hover { transform: translateY(-2px); background: #08503a !important; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 10px 18px -10px rgba(var(--a-deep-rgb), .6); }
html[data-variant="atrium"] .btn.ghost { background: transparent; color: var(--a-deep); border: 0; box-shadow: inset 0 0 0 1px var(--a-line-3); border-radius: var(--a-r-cta); }
html[data-variant="atrium"] .btn.ghost:hover { background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px var(--a-deep); }
html[data-variant="atrium"] .btn.small { padding: 8px 15px; font-size: 13.5px; }
html[data-variant="atrium"] .fb-btn { border-radius: var(--a-r-float); background: var(--a-glass-strong); color: var(--a-deep); border: 1px solid var(--a-glass-brd);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--a-sh-float); }

/* ── 일반 카드(5px, 흰 종이) ── */
html[data-variant="atrium"] :is(.card, .chapter-note, .guide-toc, .home-goon, .review-band, .program-hero) {
  background: var(--a-white); border: 1px solid var(--a-line); border-radius: var(--a-r-card); box-shadow: var(--a-sh-card);
}
html[data-variant="atrium"] .card { padding: 26px 28px; }

/* ── 과제 안내(목적) = 불투명 크림 + § ── */
html[data-variant="atrium"] .read-guide {
  background: var(--a-cream) !important; background-image: none !important; border: 1px solid var(--a-gold-line) !important; border-radius: var(--a-r-card) !important;
  box-shadow: none !important; padding: 24px 28px !important;
}
html[data-variant="atrium"] .read-guide::before { content: none !important; }
html[data-variant="atrium"] .rg-title:not(summary) { font-family: var(--a-serif) !important; font-size: 16.5px !important; font-weight: 700 !important; letter-spacing: 0 !important; color: var(--a-deep) !important;
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
html[data-variant="atrium"] .rg-title:not(summary)::before { content: "§" !important; width: auto !important; height: auto !important; background: none !important; font-family: var(--a-latin); font-size: 19px; color: var(--a-gold); font-weight: 500; }
html[data-variant="atrium"] .read-guide p { font-size: 14.5px; color: var(--a-ink-2) !important; line-height: 1.8; }

/* ── 선생님 메시지 = 불투명 크림 편지, 안쪽 액자선, Epistula ── */
html[data-variant="atrium"] .ment {
  position: relative; background: var(--a-cream) !important; background-image: none !important; border: 1px solid var(--a-gold-line) !important; border-radius: var(--a-r-card) !important;
  padding: 30px 36px 32px !important; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 10px 24px -20px rgba(70,55,20,.4) !important;
}
html[data-variant="atrium"] .ment::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(156,126,69,.14); border-radius: 3px; pointer-events: none; }
html[data-variant="atrium"] .ment .who { display: flex !important; align-items: center; gap: 12px; margin-bottom: 16px !important;
  font-family: var(--ff-ui) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .1em !important; color: var(--a-deep) !important; }
html[data-variant="atrium"] .ment .who::before { content: "" !important; width: 26px !important; height: 26px !important; flex: none; background: url("../assets/logo/nubi_mark_green.png") center / contain no-repeat !important; }
html[data-variant="atrium"] .ment .who::after { content: "Epistula"; margin-left: auto; font-family: var(--a-latin); font-style: normal; font-size: 12.5px; font-weight: 500; letter-spacing: .22em; color: var(--a-gold); text-transform: uppercase; }
html[data-variant="atrium"] .ment p { font-family: var(--a-serif) !important; font-size: 16px !important; line-height: 1.95 !important; color: var(--a-ink); }
html[data-variant="atrium"] .ment p + p { margin-top: 12px; }

/* ── 이번 권 할 일 ── */
/* 1권에서 익히는 것: 상자 대신 위아래 괘선, 왼쪽 이름표 · 오른쪽 내용 */
html[data-variant="atrium"] .vol-plan {
  background: none !important; border: 0 !important; border-top: 1px solid var(--a-line-2) !important; border-bottom: 1px solid var(--a-line-2) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 34px 0 !important;
}
html[data-variant="atrium"] .vol-plan::before, html[data-variant="atrium"] .vol-plan::after { content: none !important; }
html[data-variant="atrium"] .vol-plan summary { display: grid !important; grid-template-columns: 150px 1fr 28px; gap: 20px; align-items: baseline; padding: 22px 2px !important; }
html[data-variant="atrium"] .vol-plan summary::after { content: none !important; }
html[data-variant="atrium"] .vol-plan .vp-k { font-family: var(--ff-ui) !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: .08em !important; color: var(--a-forest) !important; margin: 0 !important; display: block !important; }
html[data-variant="atrium"] .vol-plan .vp-k::before { content: none !important; }
html[data-variant="atrium"] .vol-plan .vp-one { font-family: var(--a-serif) !important; font-size: 20px !important; font-weight: 600 !important; color: var(--a-deep); line-height: 1.5 !important; }
html[data-variant="atrium"] .vol-plan .vp-more { position: static !important; margin: 0 !important; justify-self: end; color: var(--a-ink-3) !important; animation: none !important; }
html[data-variant="atrium"] .vol-plan .vp-row { display: grid; grid-template-columns: 150px 1fr; gap: 6px 20px; padding: 16px 2px !important; margin: 0 !important; border-top: 1px solid var(--a-line) !important;
  font-size: 14px !important; color: var(--a-ink-2); line-height: 1.8 !important; }
html[data-variant="atrium"] .vol-plan .vp-row > b { grid-row: span 3; font-family: var(--a-serif) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--a-ink) !important; line-height: 1.6 !important; margin: 0 !important; }
html[data-variant="atrium"] .vol-plan .vp-row > :not(b) { grid-column: 2; }
html[data-variant="atrium"] .vol-plan ol li::before { border-color: var(--a-forest) !important; color: var(--a-forest) !important; }
html[data-variant="atrium"] .vol-plan .vp-row:last-child { padding-bottom: 22px !important; }
/* 과제 순서 머리: Ordo + 명조 */
html[data-variant="atrium"] .vp-steps { font-family: var(--a-serif) !important; font-size: 21px !important; font-weight: 700 !important; color: var(--a-deep); margin: 10px 0 12px !important; }
html[data-variant="atrium"] .vp-steps::before { content: "Ordo"; display: block; font-family: var(--a-latin); font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--a-sage); margin-bottom: 4px; }
/* 할 일: 지금 할 것(PRIMARY)만 큰 흰 카드, 나머지는 괘선 목록 */
html[data-variant="atrium"] body[data-route="course"] .stage-list { gap: 0 !important; border-top: 1px solid var(--a-line-2); margin-top: 14px; }
html[data-variant="atrium"] body[data-route="course"] .stage {
  display: grid !important; grid-template-columns: 44px 1fr 210px; gap: 16px !important; align-items: start;
  background: transparent !important; background-image: none !important; border: 0 !important; border-bottom: 1px solid var(--a-line) !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 16px 6px !important; opacity: 1 !important; animation: none !important; transform: none !important; transition: background .3s;
}
html[data-variant="atrium"] body[data-route="course"] .stage:hover { background: rgba(255,255,255,.7) !important; }
html[data-variant="atrium"] body[data-route="course"] .stage .num { width: auto !important; height: auto !important; border: 0 !important; background: none !important; border-radius: 0 !important;
  font-family: var(--a-serif) !important; font-size: 19px !important; font-weight: 600 !important; color: var(--a-sage) !important; line-height: 1.3; justify-content: flex-start; }
html[data-variant="atrium"] body[data-route="course"] .stage .t b { font-family: var(--a-serif) !important; font-size: 16.5px !important; font-weight: 600 !important; color: var(--a-ink) !important; line-height: 1.5; }
html[data-variant="atrium"] body[data-route="course"] .stage .t span { font-size: 14px !important; color: var(--a-ink-2) !important; line-height: 1.7 !important; }
html[data-variant="atrium"] body[data-route="course"] .stage .t .unit-time { font-size: 12.5px !important; color: var(--a-ink-4) !important; margin-top: 5px !important; }
html[data-variant="atrium"] body[data-route="course"] .stage .badge { font-size: 12.5px !important; color: var(--a-ink-3) !important; text-align: right; padding-top: 3px; line-height: 1.55; border: 0 !important; justify-self: end; }
html[data-variant="atrium"] body[data-route="course"] .stage.done .num, html[data-variant="atrium"] body[data-route="course"] .stage.done .badge { color: var(--a-forest) !important; }
html[data-variant="atrium"] body[data-route="course"] .stage.locked { background: transparent !important; }
html[data-variant="atrium"] body[data-route="course"] .stage.locked .t b { color: var(--a-ink-2) !important; }
html[data-variant="atrium"] body[data-route="course"] .stage.next {
  grid-template-columns: 64px 1fr auto; gap: 22px !important; align-items: center; margin: 14px 0;
  background: var(--a-white) !important; border: 1px solid rgba(0,70,47,.24) !important; border-radius: 6px !important; padding: 26px 28px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 14px 30px -20px rgba(48,44,30,.42) !important; transition: transform .45s var(--a-slow), box-shadow .45s var(--a-slow);
}
html[data-variant="atrium"] body[data-route="course"] .stage.next:hover { transform: translateY(-2px) !important; background: var(--a-white) !important; }
html[data-variant="atrium"] body[data-route="course"] .stage.next .num { width: 64px !important; height: 64px !important; border-radius: 50% !important; justify-content: center; align-items: center; display: grid !important; place-items: center;
  background: var(--a-deep) !important; color: #fff !important; font-size: 26px !important; }
html[data-variant="atrium"] body[data-route="course"] .stage.next .t b { font-size: 24px !important; font-weight: 700 !important; color: var(--a-deep) !important; line-height: 1.35; }
html[data-variant="atrium"] body[data-route="course"] .stage.next .t span { font-size: 15px !important; margin-top: 4px; }
html[data-variant="atrium"] body[data-route="course"] .stage.next .t::before { content: "지금 할 일"; display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--a-forest); }
html[data-variant="atrium"] body[data-route="course"] .stage.next .badge .btn { height: 44px; display: inline-flex; align-items: center; padding: 0 22px; font-size: 14.5px; }
/* 권 진도: 책 카드(3px), 지금 권만 표지 테두리·종이 두께·책갈피 */
html[data-variant="atrium"] .course-top { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin-top: 34px !important; }
html[data-variant="atrium"] .course-top::before { content: none !important; }
html[data-variant="atrium"] .vol-grid { gap: 10px !important; }
html[data-variant="atrium"] .vol-label { font-family: var(--a-serif) !important; font-size: 12px !important; color: var(--a-ink-3) !important; font-weight: 400 !important; }
html[data-variant="atrium"] .vol-cell {
  position: relative; align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important;
  min-height: 96px !important; padding: 10px 10px 9px !important; border-radius: var(--a-r-book) !important;
  background: rgba(255,253,247,.62) !important; border: 1px solid rgba(0,70,47,.1) !important; color: var(--a-ink) !important; box-shadow: none !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .45s var(--a-slow), box-shadow .45s var(--a-slow);
}
html[data-variant="atrium"] .vol-cell:hover { transform: translateY(-2px); box-shadow: var(--a-sh-lift) !important; }
html[data-variant="atrium"] .vol-cell .vol-book { font-family: var(--a-serif); font-size: 13px !important; font-weight: 600 !important; white-space: normal !important; line-height: 1.4; color: var(--a-ink) !important; }
html[data-variant="atrium"] .vol-cell .vol-eng { font-family: var(--a-latin); font-size: 12px !important; color: var(--a-ink-3) !important; display: block !important; }
html[data-variant="atrium"] .vol-cell .vol-auth { font-size: 11px !important; color: var(--a-ink-3) !important; margin-top: auto !important; display: block !important; }
html[data-variant="atrium"] .vol-cell .vol-n { font-family: var(--a-serif); font-size: 11.5px !important; color: var(--a-ink-3) !important; }
html[data-variant="atrium"] .vol-cell.current {
  background: #fbf8f0 !important; border-color: rgba(0,70,47,.38) !important; color: var(--a-deep) !important; transform: translateY(-2px);
  box-shadow: 1px 1px 0 #efe9da, 2px 2px 0 rgba(0,70,47,.14), 3px 3px 0 #efe9da, 4px 4px 0 rgba(0,70,47,.14), 10px 14px 22px -12px rgba(48,44,30,.45) !important;
}
html[data-variant="atrium"] .vol-cell.current::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(0,70,47,.2); pointer-events: none; }
html[data-variant="atrium"] .vol-cell.current::after { content: ""; position: absolute; right: 12px; top: -4px; width: 9px; height: 26px; background: #8c2f2b; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); opacity: .9; }
html[data-variant="atrium"] .vol-cell.current :is(.vol-book, .vol-eng, .vol-auth, .frac, b) { color: var(--a-deep) !important; }
html[data-variant="atrium"] .vol-cell.complete { background: rgba(217,228,215,.55) !important; color: var(--a-forest) !important; }
html[data-variant="atrium"] .status-line { background: var(--a-white) !important; border: 1px solid var(--a-line-2) !important; border-radius: 12px !important; font-family: var(--a-serif); color: var(--a-deep) !important; }
html[data-variant="atrium"] .status-line .st-dot { background: var(--a-forest) !important; box-shadow: 0 0 0 4px rgba(50,110,85,.14); }
html[data-variant="atrium"] .vol-time { font-size: 13px !important; color: var(--a-ink-3) !important; }

/* ── 과제 화면: 입력칸 · 예시 ── */
html[data-variant="atrium"] :is(textarea, input[type="text"], input[type="number"], select) {
  border: 1px solid var(--a-line-2) !important; border-radius: var(--a-r-card) !important; background: #fdfcf9 !important; font-size: 14.5px;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
html[data-variant="atrium"] textarea { font-family: var(--a-serif); line-height: 1.8; }
html[data-variant="atrium"] :is(textarea, input[type="text"], input[type="number"], select):focus { outline: 0 !important; border-color: var(--a-forest) !important; box-shadow: 0 0 0 3px rgba(50,110,85,.12); background: #fff !important; }
html[data-variant="atrium"] .field > label { font-size: 13.5px; font-weight: 700; color: var(--a-deep); }
html[data-variant="atrium"] details.eg { background: var(--a-white); border: 1px solid var(--a-line); border-radius: var(--a-r-card); }
html[data-variant="atrium"] details.eg > summary { color: var(--a-deep); font-weight: 600; }
html[data-variant="atrium"] .sentence-card, html[data-variant="atrium"] .passage { background: #faf8f2 !important; border: 1px solid var(--a-line) !important; border-radius: 4px !important; }
html[data-variant="atrium"] .grade.ok { background: rgba(217,228,215,.35); border-color: rgba(50,110,85,.35); border-radius: 4px; }
html[data-variant="atrium"] .grade.bad { background: rgba(140,47,43,.035); border: 1px solid rgba(140,47,43,.22); border-radius: 4px; }

/* ── 리트 문제: 시험지는 흰 종이, 직선 ── */
html[data-variant="atrium"] .exam-sheet { background: var(--a-white) !important; border: 1px solid var(--a-line-2) !important; border-radius: 4px !important; }
html[data-variant="atrium"] .exam-choices label.on { background: rgba(217,228,215,.45); outline: 1px solid rgba(50,110,85,.4); border-radius: 5px; }

/* ── 홈 ── */
html[data-variant="atrium"] body[data-route="home"] .home-hero {
  background: var(--a-sheet); border: 1px solid rgba(0,70,47,.09); border-radius: var(--a-r-panel); box-shadow: var(--a-sh-paper);
  padding: 40px 48px 38px; margin: 24px 0 26px;
}
html[data-variant="atrium"] body[data-route="home"] .home-hero::before { content: none !important; }
html[data-variant="atrium"] body[data-route="home"] .fp-rule { display: block !important; border-color: var(--a-line-2) !important; opacity: 1 !important; height: 4px; max-width: none !important; }
html[data-variant="atrium"] body[data-route="home"] .fp-title-en { font-family: var(--a-latin); font-size: 15px; letter-spacing: .3em; text-transform: uppercase; color: var(--a-forest) !important; }
html[data-variant="atrium"] body[data-route="home"] .fp-motto { font-family: var(--a-serif); font-size: 21px; font-weight: 600; color: var(--a-deep); }
html[data-variant="atrium"] body[data-route="home"] .fp-sub { font-size: 14.5px !important; color: var(--a-ink-2) !important; line-height: 1.85 !important; }
@media (min-width: 601px) {   /* 조각상 이름표 — 폰에서는 예전 누비 그대로(10-10 사용자) */
html[data-variant="atrium"] body[data-route="home"] .gl-stat .gtile {
  border-radius: var(--a-r-book) !important; background: rgba(255,253,247,.72) !important; border: 1px solid rgba(0,70,47,.1) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: none !important;
}
html[data-variant="atrium"] body[data-route="home"] .gl-stat .gtile .gt-name { font-family: var(--a-serif); font-weight: 600; color: var(--a-ink); }
html[data-variant="atrium"] body[data-route="home"] .gl-stat .gtile.on { background: #fbf8f0 !important; border-color: rgba(0,70,47,.38) !important;
  box-shadow: 1px 1px 0 #efe9da, 2px 2px 0 rgba(0,70,47,.14), 3px 3px 0 #efe9da, 4px 4px 0 rgba(0,70,47,.14) !important; }
html[data-variant="atrium"] body[data-route="home"] .gl-stat .gtile.on .gt-name { color: var(--a-deep); }
}
html[data-variant="atrium"] body[data-route="home"] .home-order { font-size: 13.5px; color: var(--a-ink-3); }
html[data-variant="atrium"] body[data-route="home"] .track-card,
html[data-variant="atrium"] body[data-route="programs"] .track-card {
  background: var(--a-sheet) !important; border: 1px solid rgba(0,70,47,.09) !important; border-radius: var(--a-r-panel) !important; box-shadow: var(--a-sh-paper) !important; padding: 34px 38px !important;
  transition: transform .45s var(--a-slow), box-shadow .45s var(--a-slow);
}
html[data-variant="atrium"] .track-card::before { opacity: .06 !important; }
html[data-variant="atrium"] .tk-head { border-bottom: 1px solid var(--a-line) !important; padding-bottom: 18px !important; }
html[data-variant="atrium"] .tk-head b { font-family: var(--a-serif) !important; font-size: 24px !important; font-weight: 700 !important; color: var(--a-deep); }
html[data-variant="atrium"] .tk-meta { font-size: 13px !important; color: var(--a-ink-3) !important; }
html[data-variant="atrium"] .tk-tagline { font-family: var(--a-serif); font-size: 15px !important; font-weight: 400 !important; color: var(--a-ink-2) !important; }
html[data-variant="atrium"] .tk-sec > b { font-family: var(--a-serif) !important; font-size: 15.5px !important; font-weight: 700 !important; color: var(--a-deep) !important; letter-spacing: 0 !important; }
html[data-variant="atrium"] .tk-sec > b::before { content: none !important; }
html[data-variant="atrium"] .tk-desc p, html[data-variant="atrium"] .tk-intro { font-size: 14px !important; color: var(--a-ink-2) !important; line-height: 1.8 !important; }
html[data-variant="atrium"] .bs-view { background: var(--a-white) !important; border-radius: var(--a-r-card) !important; box-shadow: inset 0 0 0 1px var(--a-line) !important; }
html[data-variant="atrium"] .card.settings { border-style: dashed; border-color: var(--a-line-2); background: rgba(252,250,245,.8); box-shadow: none; }

/* ── 가이드: 탭은 종이 위 알약 묶음 ── */
html[data-variant="atrium"] .guide-toggle { display: inline-flex; gap: 6px; padding: 4px; border-radius: 10px; background: rgba(0,70,47,.04); }
html[data-variant="atrium"] .gt-btn { border: 0 !important; border-radius: 7px !important; background: transparent !important; color: var(--a-ink-2) !important; box-shadow: none !important; font-weight: 500; }
html[data-variant="atrium"] .gt-btn.active { background: #fff !important; color: var(--a-deep) !important; font-weight: 600; box-shadow: 0 1px 3px rgba(48,44,30,.12) !important; }
html[data-variant="atrium"] .guide-sec { box-shadow: none !important; border: 0 !important; border-top: 1px solid var(--a-line-2) !important; border-radius: 0 !important; background: transparent !important; padding: 30px 0 !important; margin: 0 !important; }
html[data-variant="atrium"] .guide-sec h2 { font-size: 22px !important; }

/* ── 책 읽기: 장식 없는 흰 면(에디토리얼 그대로), 표시는 옅은 금빛 ── */
html[data-variant="atrium"] body[data-route="read"] .toc,
html[data-variant="atrium"] body[data-route="read"] .book { background: #fff !important; border: 1px solid var(--a-line) !important; border-radius: 8px !important; box-shadow: var(--a-sh-card) !important; }
html[data-variant="atrium"] .book .para.marked { background: rgba(206,173,104,.26) !important; box-shadow: none !important; }
html[data-variant="atrium"] .toc a.active { background: rgba(0,70,47,.06) !important; color: var(--a-ink) !important; font-weight: 700; }

/* ── 움직임: 조용히 나타난다 ── */
html[data-variant="atrium"] #app > .wrap { animation: atrium-in .6s var(--a-slow) backwards; }   /* both 로 두면 끝난 뒤에도 transform 이 남아 안쪽 position:fixed(폰 목차 판 등)가 이 판 기준으로 어긋났다 */
@keyframes atrium-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { html[data-variant="atrium"] *, html[data-variant="atrium"] *::before { animation: none !important; transition: none !important; } }

/* ── 사이드바 아이콘 — 시안과 같은 단색 선 아이콘. 링크 주소로 고른다(마크업은 그대로). 글자색을 따른다 ── */
@media (min-width: 1100px) {
  html[data-variant="atrium"] #nav a::before { content: ""; width: 17px; height: 17px; flex: none; background: var(--a-sage); -webkit-mask: var(--a-ic) center / contain no-repeat; mask: var(--a-ic) center / contain no-repeat; transition: background .3s; }
  html[data-variant="atrium"] #nav a:hover::before, html[data-variant="atrium"] #nav a.active::before { background: var(--a-deep); }
  html[data-variant="atrium"] #nav a.locked::before { width: 17px !important; height: 17px !important; margin: 0 !important; background: var(--a-ink-4); }
  html[data-variant="atrium"] #nav :is(a[href$="/home"], a[href="/"]) { --a-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20h14V9.5'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E"); }
  html[data-variant="atrium"] #nav a[href$="/guide"] { --a-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6c-2-1.5-5-2-8-2v14c3 0 6 .5 8 2 2-1.5 5-2 8-2V4c-3 0-6 .5-8 2Z'/%3E%3Cpath d='M12 6v14'/%3E%3C/svg%3E"); }
  html[data-variant="atrium"] #nav a[href$="/notice"] { --a-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v4h3l6 4V6l-6 4H4z'/%3E%3Cpath d='M16.5 9.5a4 4 0 0 1 0 5'/%3E%3C/svg%3E"); }
  html[data-variant="atrium"] #nav a[href$="/feedback"] { --a-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4V5Z'/%3E%3Cpath d='M8 9h8M8 12h5'/%3E%3C/svg%3E"); }
  html[data-variant="atrium"] #nav a[href$="/me"] { --a-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); }
  html[data-variant="atrium"] #nav a[href$="/export"] { --a-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E"); }
  html[data-variant="atrium"] #nav a[href$="/course"] { --a-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M4 12h10M4 18h10'/%3E%3Cpath d='m17 5 2 2 3-3M17 11l2 2 3-3'/%3E%3C/svg%3E"); }
  html[data-variant="atrium"] #nav a[href*="/read/"] { --a-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11a3 3 0 0 1 3 3v13H8a3 3 0 0 1-3-3V4Z'/%3E%3Cpath d='M5 17a3 3 0 0 1 3-3h11'/%3E%3C/svg%3E"); }
  html[data-variant="atrium"] #nav a[href*="/task/"] { --a-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-4L16 5l3 3L8 19l-4 1Z'/%3E%3Cpath d='m14 7 3 3'/%3E%3C/svg%3E"); }
  html[data-variant="atrium"] #nav a[href*="/quiz/"] { --a-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.4-1 1-1 1.7'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
  html[data-variant="atrium"] #nav a[href$="/commentary"] { --a-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6V3Z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E"); }
  html[data-variant="atrium"] #nav a[href$="/notes"] { --a-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
}

/* 접이식 안내(책 읽기의 "미시독해에 도움되는 독해 습관" 등) — 원래 화살표를 두고 글만 맞춘다 */
html[data-variant="atrium"] summary.rg-title { font-family: var(--ff-ui) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: var(--a-deep) !important; }

/* ── 홈 = 전시실 — 지금 누비의 그래픽(조각상·빛살·책장)을 그대로 살리고, 둘레만 아트리움으로 감싼다 ──
   (10-10 사용자: "메인은 조각상·책장 같은 그래픽을 충분히 못 살렸다. 두 디자인이 다 좋다" → 홈은 전시실, 공부는 서재) */
@media (min-width: 601px) {   /* 폰에서는 예전 누비 그대로 — 아래 폰 묶음의 조각상 줄 참고 */
/* 조각상 줄 — 네모 판(테두리·그림자)에 담으니 조각상 둘레가 판 모서리에 딱 잘려 급했다(10-10 사용자).
   판을 걷고, 아래에서 위로 번지는 빛 웅덩이 위에 세운다. 바닥은 양끝이 사라지는 실선 하나 */
html[data-variant="atrium"] body[data-route="home"] .gl-row {
  position: relative; padding: 44px 26px 22px; margin: 0 0 8px;
  background: radial-gradient(120% 100% at 50% 100%, rgba(252,250,245,.95) 0%, rgba(252,250,245,.62) 42%, rgba(252,250,245,0) 74%);
  border: 0; border-radius: 0; box-shadow: none;
}
html[data-variant="atrium"] body[data-route="home"] .gl-row::after {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: 8px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0,70,47,.22) 18%, rgba(0,70,47,.22) 82%, transparent);
}
html[data-variant="atrium"] body[data-route="home"] .gl-stat .gtile { position: relative; z-index: 5; }
}
/* 트랙 카드 뒤 도판 — 현행 농도로 */
html[data-variant="atrium"] body[data-route="home"] .track-card::before { opacity: .1 !important; }

/* ── 책장(서재) — 10-10 사용자: "초록이 이상하게 쓰였다, 책등 글씨는 기존처럼 명조가 멋있다" ──
   트랙 카드 바탕의 민트빛은 흰 종이 위에 초록 점묘 도판이 겹쳐 생겼다 → 따뜻한 크림 바탕 + 도판은 곱하기로 옅게.
   책장·책등·뽑은 책은 기존 누비 글꼴(조선일보명조) 그대로. */
html[data-variant="atrium"] body:is([data-route="home"], [data-route="programs"]) .track-card { background: #f6f1e4 !important; }
html[data-variant="atrium"] body:is([data-route="home"], [data-route="programs"]) .track-card::before { mix-blend-mode: multiply; opacity: .09 !important; filter: saturate(.7); }
html[data-variant="atrium"] :is(.bs-stage, .bs-stage *, .bs-big, .bs-big *, .vhc-inner, .vhc-inner *) { font-family: "ChosunilboMJ", "Noto Serif KR", Batang, serif; }

/* ══ 시안(sian_glass.html)에 있고 실제 앱에는 없던 부품 — js/atrium.js 가 붙이고, 모양은 시안 그대로 ══ */
@media (min-width: 1100px) {
  /* 시험 선택 단추 — "LEET 법학적성시험" */
  html[data-variant="atrium"] .topbar .exam-cur { display: flex; align-items: center; gap: 10px; }
  html[data-variant="atrium"] .topbar .exam-cur::after { content: "법학적성시험"; order: 1; flex: 1; font-family: var(--ff-ui); font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--a-ink-3); }
  html[data-variant="atrium"] .topbar .exam-cur .exam-caret { order: 2; }
  /* 이번 권 이름표 — 왼쪽 정렬 + 라틴 권수 */
  html[data-variant="atrium"] #nav > .nav-tracklabel { display: flex; justify-content: space-between; align-items: baseline; text-align: left; }
  html[data-variant="atrium"] #nav > .nav-tracklabel::after { content: attr(data-liber); font-family: var(--a-latin); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--a-sage); }
  /* 사이드바 아래 진도 */
  html[data-variant="atrium"] .at-sfoot { padding: 14px 12px; margin: 0 2px 8px; border-top: 1px solid var(--a-line); }
  html[data-variant="atrium"] .at-sfoot .sf-cap { font-family: var(--a-latin); font-size: 11.5px; letter-spacing: .2em; color: var(--a-sage); text-transform: uppercase; }
  html[data-variant="atrium"] .at-sfoot .sf-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 2px; }
  html[data-variant="atrium"] .at-sfoot .sf-row b { font-family: var(--a-serif); font-size: 15px; font-weight: 600; color: var(--a-deep); }
  html[data-variant="atrium"] .at-sfoot .sf-row span { font-size: 12px; color: var(--a-ink-3); font-variant-numeric: tabular-nums; }
  html[data-variant="atrium"] .at-sfoot .bar { height: 3px; border-radius: 3px; background: rgba(0,70,42,.1); margin-top: 8px; overflow: hidden; }
  html[data-variant="atrium"] .at-sfoot .bar i { display: block; height: 100%; background: var(--a-forest); border-radius: inherit; transition: width 1.2s var(--a-slow); }
  /* 개발용 도구 단추(파일럿) — 시안에는 없던 것이라 작게 */
  html[data-variant="atrium"] .topbar > .mob-btn { font-size: 12px !important; padding: 5px 10px !important; opacity: .85; }
}
html[data-variant="atrium"] .at-sfoot[hidden] { display: none; }
@media (max-width: 1099px) { html[data-variant="atrium"] .at-sfoot { display: none; } }

/* 이번 권 할 일 머리 — 두 줄 제목(윗줄) + 오른쪽 책 표지 */
html[data-variant="atrium"] h1.page .at-kick { display: block; font-family: var(--ff-ui); font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--a-ink-3); margin: 0 0 6px; }
html[data-variant="atrium"] body[data-route="course"] #app > .wrap.at-has-book { position: relative; }
html[data-variant="atrium"] body[data-route="course"] #app > .wrap.at-has-book > :is(h1.page, .course-subrow) { margin-right: 210px; }
html[data-variant="atrium"] .at-book { position: absolute; right: 60px; top: 52px; width: 168px; }
html[data-variant="atrium"] .at-book .cv { position: relative; border-radius: 2px 4px 4px 2px; overflow: hidden; border: 1px solid rgba(0,70,42,.35); background: #efeadd; aspect-ratio: 3 / 4;
  box-shadow: 1px 1px 0 #efe9da, 2px 2px 0 rgba(0,70,42,.16), 3px 3px 0 #efe9da, 4px 4px 0 rgba(0,70,42,.16), 5px 5px 0 #efe9da, 6px 6px 0 rgba(0,70,42,.16), 18px 22px 34px -16px rgba(48,44,30,.5); }
html[data-variant="atrium"] .at-book .cv .art { position: absolute; left: 0; right: 0; top: 0; height: 62%; background-position: center 30%; background-size: cover; background-repeat: no-repeat; }
html[data-variant="atrium"] .at-book .cv::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(255,255,255,.55); outline: 1px solid rgba(0,70,42,.25); outline-offset: 3px; pointer-events: none; }
html[data-variant="atrium"] .at-book .lab { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: #f7f2e5; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-top: 1px solid rgba(0,70,42,.25); padding: 0 10px; }
html[data-variant="atrium"] .at-book .lab small { font-family: var(--a-latin); font-size: 10.5px; letter-spacing: .26em; color: var(--a-forest); }
html[data-variant="atrium"] .at-book .lab b { font-family: var(--a-serif); font-size: 17px; color: var(--a-deep); line-height: 1.3; margin-top: 2px; }
html[data-variant="atrium"] .at-book .lab i { font-family: var(--a-latin); font-style: italic; font-size: 12px; color: var(--a-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 900px) {
  html[data-variant="atrium"] .at-book { display: none; }
  html[data-variant="atrium"] body[data-route="course"] #app > .wrap.at-has-book > :is(h1.page, .course-subrow) { margin-right: 0; }
}

/* 아래 독 — 지금 할 일 · 시작하기 (책 읽기 화면에서는 숨긴다) */
html[data-variant="atrium"] .at-dock-wrap { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; padding: 0 22px 18px; pointer-events: none; transition: opacity .4s, transform .5s var(--a-slow); }
@media (min-width: 1100px) { html[data-variant="atrium"] .at-dock-wrap { left: calc(var(--a-side-w) + 28px); } }
html[data-variant="atrium"] .at-dock-wrap.hide { opacity: 0; transform: translateY(16px); }
html[data-variant="atrium"] .at-dock-wrap.hide .at-dock { pointer-events: none; }
html[data-variant="atrium"] .at-dock { pointer-events: auto; max-width: 760px; margin: 0 auto; border-radius: var(--a-r-float); padding: 10px 10px 10px 14px; display: grid; grid-template-columns: 50px 1fr auto; gap: 14px; align-items: center;
  background: var(--a-glass); -webkit-backdrop-filter: blur(16px) saturate(115%); backdrop-filter: blur(16px) saturate(115%); border: 1px solid var(--a-glass-brd); box-shadow: 0 0 0 1px rgba(0,70,42,.06), var(--a-sh-float); }
html[data-variant="atrium"] .at-dock .ring { position: relative; width: 50px; height: 50px; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--a-deep); font-variant-numeric: tabular-nums; }
html[data-variant="atrium"] .at-dock .ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
html[data-variant="atrium"] .at-dock .ring circle { fill: none; stroke-width: 3; }
html[data-variant="atrium"] .at-dock .ring .bg { stroke: rgba(0,70,42,.12); }
html[data-variant="atrium"] .at-dock .ring .fg { stroke: var(--a-forest); stroke-linecap: round; stroke-dasharray: 131.9; stroke-dashoffset: 131.9; transition: stroke-dashoffset 1.2s var(--a-slow); }
html[data-variant="atrium"] .at-dock .now { min-width: 0; }
html[data-variant="atrium"] .at-dock .now small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: var(--a-forest); line-height: 1.3; }
html[data-variant="atrium"] .at-dock .now b { display: block; font-family: var(--a-serif); font-size: 16.5px; font-weight: 700; color: var(--a-deep); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-variant="atrium"] .at-dock .now span { display: block; font-size: 12.5px; color: var(--a-ink-3); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-variant="atrium"] .at-dock .btn { height: 48px; display: inline-flex; align-items: center; padding: 0 22px !important; border-radius: 16px !important; text-decoration: none; }
/* 피드백 단추는 독이 떠 있을 때만 위로 올린다 (10-10 전수조사: 늘 올려 두었더니 폰에서 '맨 위로' 단추에 가렸다) */
html[data-variant="atrium"] body.at-dock-on .fb-btn { bottom: 96px !important; }
html[data-variant="atrium"] #app > .wrap { margin-bottom: 120px !important; }
@media (max-width: 900px) { html[data-variant="atrium"] .at-dock-wrap { padding: 0 10px 10px; } html[data-variant="atrium"] .at-dock { grid-template-columns: 44px 1fr auto; gap: 10px; } }
/* 이름표가 줄 너비를 다 쓰게(라틴 권수가 오른쪽 끝으로) · 책 표지 아래로 권 칸이 내려오게 */
@media (min-width: 1100px) { html[data-variant="atrium"] #nav > .nav-tracklabel { align-self: stretch; width: auto; } }
html[data-variant="atrium"] body[data-route="course"] #app > .wrap.at-has-book > .course-subrow { min-height: 150px; align-items: flex-start; }

/* ══ 서비스판에만 있는 것 (pilot/tools/atrium_server.py 로 띄울 때) ══
   대화 단추·창(js/service/chatbot.js), 관리자 대화 창, 로그인 칸, 사용자 표시, 안내 띠, 관리 콘솔.
   떠 있는 단추는 유리(22px), 읽고 쓰는 창은 종이(14px 창 · 12px 말풍선). */
html[data-variant="atrium"] .cb-btn {
  border-radius: var(--a-r-float); background: var(--a-glass-strong); color: var(--a-deep); border: 1px solid var(--a-glass-brd);
  -webkit-backdrop-filter: blur(16px) saturate(115%); backdrop-filter: blur(16px) saturate(115%); box-shadow: 0 0 0 1px rgba(0,70,42,.06), var(--a-sh-float);
  font-weight: 600; transition: transform .4s var(--a-slow), background .3s;
}
html[data-variant="atrium"] .cb-btn:hover { background: #fff; transform: translateY(-2px); }
html[data-variant="atrium"] body.at-dock-on .cb-btn { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
html[data-variant="atrium"] body.has-cb.at-dock-on .fb-btn { bottom: 160px !important; }
html[data-variant="atrium"] :is(.cb-panel, .ad-panel) {
  border: 1px solid var(--a-glass-brd); border-radius: 14px; overflow: hidden; background: var(--a-sheet);
  box-shadow: 0 0 0 1px rgba(0,70,42,.08), 0 24px 48px -20px rgba(30,40,30,.4);
}
html[data-variant="atrium"] :is(.cb-head, .ad-bar) { background: var(--a-glass-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--a-line); }
html[data-variant="atrium"] .cb-head b { font-family: var(--a-serif); font-weight: 700; color: var(--a-deep); }
html[data-variant="atrium"] .cb-ava { border-radius: 12px; border-color: var(--a-line-3); font-family: var(--a-serif); }
html[data-variant="atrium"] .cb-ava.t { background: var(--a-deep); }
html[data-variant="atrium"] .cb-b { border-radius: 12px 12px 12px 4px; border-color: var(--a-line); background: #fff; }
html[data-variant="atrium"] .cb-msg.me .cb-b { border-radius: 12px 12px 4px 12px; background: var(--a-deep); border-color: var(--a-deep); }
html[data-variant="atrium"] .cb-msg.memo .cb-b { background: var(--a-cream); border-color: var(--a-gold-line); }
html[data-variant="atrium"] :is(.cb-input, .cb-foot) { background: var(--a-sheet); }
html[data-variant="atrium"] .cb-input textarea { border-radius: 10px !important; }
html[data-variant="atrium"] .cb-day { border-color: var(--a-line); background: rgba(255,255,255,.6); }
html[data-variant="atrium"] .cb-toast { border-radius: var(--a-r-float); border: 1px solid var(--a-glass-brd); background: var(--a-glass-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--a-sh-float); }
html[data-variant="atrium"] .cb-dot { background: #a4552f; }
/* 로그인 칸 · 사용자 표시 — 사이드바 안에서는 아래쪽에 세로로 */
@media (min-width: 1100px) {
  html[data-variant="atrium"] .topbar > :is(.svc-login, .svc-chip) { order: 0 !important; margin: 8px 4px 0 !important; display: flex; flex-wrap: wrap; gap: 6px; }
  html[data-variant="atrium"] .topbar > .svc-login input { flex: 1 1 100%; width: 100%; }
  html[data-variant="atrium"] .topbar > .svc-login button { flex: 1 1 0; }
}
html[data-variant="atrium"] .svc-login input { border-radius: 8px !important; border: 1px solid var(--a-line-2) !important; background: rgba(255,255,255,.7) !important; padding: 7px 10px; }
html[data-variant="atrium"] .svc-login button { border-radius: 8px !important; }
html[data-variant="atrium"] .svc-login button:not(.ghost):first-of-type { background: var(--a-deep); color: #fff; border-color: var(--a-deep); }
html[data-variant="atrium"] .svc-chip button { border-radius: 8px; }
/* 안내 띠 · 관리 콘솔 · 공지 — 종이 */
html[data-variant="atrium"] .svc-banner { border-radius: var(--a-r-panel); box-shadow: var(--a-sh-float); }
html[data-variant="atrium"] .svc-banner.quiet { background: var(--a-cream); border: 1px solid var(--a-gold-line); color: var(--a-ink); }
html[data-variant="atrium"] :is(.svc-console-box, .svc-ntc-box, .join-card, .pay-card) { border-radius: var(--a-r-panel) !important; background: var(--a-sheet) !important; border: 1px solid rgba(0,70,42,.09) !important; box-shadow: var(--a-sh-paper) !important; }
html[data-variant="atrium"] .svc-btn { border-radius: var(--a-r-cta); }
/* 복습 중 띠(○권을 복습으로 보는 중입니다) — 크림 안내 */
html[data-variant="atrium"] .review-band { background: var(--a-cream) !important; border: 1px solid var(--a-gold-line) !important; border-radius: var(--a-r-card) !important; box-shadow: none !important; }
html[data-variant="atrium"] .review-band b { font-family: var(--a-serif); color: var(--a-deep); }

/* ══ 폰(900px 이하) ══ — 10-10 폰 폭 390 으로 찍어 보고 고친 것 */
@media (max-width: 900px) {
  /* 1권에서 익히는 것: 이름표 칸(150px)을 걷고 한 기둥으로 */
  html[data-variant="atrium"] .vol-plan summary { grid-template-columns: 1fr 24px !important; gap: 6px 10px !important; }
  html[data-variant="atrium"] .vol-plan .vp-k { grid-column: 1 / -1; }
  html[data-variant="atrium"] .vol-plan .vp-one { font-size: 18px !important; }
  html[data-variant="atrium"] .vol-plan .vp-row { grid-template-columns: 1fr !important; gap: 4px !important; }
  html[data-variant="atrium"] .vol-plan .vp-row > b { grid-row: auto !important; }
  html[data-variant="atrium"] .vol-plan .vp-row > :not(b) { grid-column: 1 !important; }
  /* 앱이 폰에서 접이식(.mfold)으로 감싼 상자 — 바깥 접이식이 상자 몫을 하고 안쪽은 테두리를 걷는다 */
  html[data-variant="atrium"] details.mfold { background: var(--a-cream); border: 1px solid var(--a-gold-line); border-radius: var(--a-r-card); }
  html[data-variant="atrium"] details.mfold > :is(.read-guide, .ment, .card, .course-top) {
    border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 4px 16px 16px !important; margin: 0 !important;
  }
  html[data-variant="atrium"] details.mfold > :is(.ment)::before { content: none; }
  html[data-variant="atrium"] details.mfold > .read-guide > .rg-title:not(summary) { display: none; }
  html[data-variant="atrium"] .stage .badge { text-align: left !important; justify-self: start !important; }
  html[data-variant="atrium"] body[data-route="course"] .stage { grid-template-columns: 32px 1fr !important; }
  html[data-variant="atrium"] body[data-route="course"] .stage .badge { grid-column: 2; }
  html[data-variant="atrium"] body[data-route="course"] .stage.next { grid-template-columns: 48px 1fr !important; padding: 20px !important; }
  html[data-variant="atrium"] body[data-route="course"] .stage.next .num { width: 48px !important; height: 48px !important; font-size: 22px !important; }
  html[data-variant="atrium"] body[data-route="course"] .stage.next .t b { font-size: 20px !important; }
}
/* 글자 크기 단추 줄 — 뒤 띠를 걷는다 */
html[data-variant="atrium"] .read-bar { background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* ══ 10-10 전수조사(대비) 반영 ══ */
/* 금색 변수는 원래 앱의 밝은 화면에 없었다(초록 위 작은 금빛 글자는 기본값 #d9c37a 로 5:1). 에디토리얼 토대가 --gold 를 진하게 잇던 것을 되돌린다 */
:root[data-variant="atrium"][data-variant][data-variant][data-variant]:not([data-theme="dark"]):not([data-theme="contrast"]) { --gold: #d9c37a; }
/* 권 칸 — 원래 흐림(opacity .8~.88)과 겹쳐 4:1 아래로 떨어졌다 */
html[data-variant="atrium"] .vol-cell .vol-n, html[data-variant="atrium"] .vol-cell:not(.current) :is(.vol-book, .vol-eng, .vol-auth) { opacity: 1 !important; }
html[data-variant="atrium"] .vol-cell .vol-eng, html[data-variant="atrium"] .vol-cell .vol-auth, html[data-variant="atrium"] .vol-label { color: var(--a-ink-2) !important; }
/* 트랙 머리 — 원래 흐림과 겹쳐 3.7:1 */
html[data-variant="atrium"] .tk-head, html[data-variant="atrium"] .tk-meta { opacity: 1 !important; }
html[data-variant="atrium"] .tk-meta { color: var(--a-ink-2) !important; }
/* 작은 글자 — 12px 아래로 내려간 새 이름표 */
html[data-variant="atrium"] .at-dock .now small, html[data-variant="atrium"] .at-sfoot .sf-cap, html[data-variant="atrium"] #nav > .nav-tracklabel::after { font-size: 12.5px; }
/* 아래 독이 초록 꼬리말 위에 뜰 때도 읽히게 — 유리를 짙게 */
html[data-variant="atrium"] .at-dock { background: var(--a-glass-strong); }
/* 사이드바 아이콘 — 표시용 3:1 */
@media (min-width: 1100px) { html[data-variant="atrium"] #nav a::before { background: var(--a-ink-3); } }

/* ══ 10-10 전수조사(기능) 반영 ══ */
/* 숨긴 독 — 보이지 않게 완전히 뺀다(투명하게만 두면 탭 초점이 간다) */
html[data-variant="atrium"] .at-dock-wrap.hide { visibility: hidden; transition: opacity .4s, transform .5s var(--a-slow), visibility 0s .5s; }
html[data-variant="atrium"] #app > .wrap { margin-bottom: 60px !important; }
html[data-variant="atrium"] body.at-dock-on #app > .wrap { margin-bottom: 120px !important; }
/* 문제 시계 — 넓은 화면에서 사이드바를 덮지 않게 본문 쪽으로 */
@media (min-width: 1100px) { html[data-variant="atrium"] .quiz-clock { left: calc(var(--a-side-w) + 44px); } }
html[data-variant="atrium"] .quiz-clock { border-radius: 12px; border-color: var(--a-line-2); background: var(--a-glass-strong); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--a-sh-float); }
/* 아이콘이 정해지지 않은 메뉴 링크는 빈 자리로 둔다 (가면 그림이 없으면 꽉 찬 네모가 칠해졌다) */
@media (min-width: 1100px) { html[data-variant="atrium"] #nav a { --a-ic: linear-gradient(transparent, transparent); } }

/* ══ 아트리움이 꺼진 화면(속성을 뗀 경우)에서는 atrium.js 부품을 숨긴다. 모드는 라이트·다크 둘뿐(흰 바탕은 10-10 에 뺐다). 다크판은 이 파일 끝(자동 생성) ══ */
html:not([data-variant="atrium"]) :is(.at-dock-wrap, .at-sfoot, .at-book) { display: none !important; }
html:not([data-variant="atrium"]) h1.page .at-kick { display: block; font-size: 13px; font-weight: 400; opacity: .8; margin-bottom: 4px; }

/* ══ 10-10 전수조사(폰·태블릿) 반영 ══ */
/* 독이 떠 있으면 꼬리말 아래에도 자리를 남긴다 — 맨 아래 사업자 정보가 독에 가렸다 */
html[data-variant="atrium"] body.at-dock-on { padding-bottom: 104px; }
/* '맨 위로' 단추를 피드백 단추 위로 */
html[data-variant="atrium"] body.at-dock-on .to-top { bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important; }
html[data-variant="atrium"] body.at-dock-on.has-cb .to-top { bottom: calc(214px + env(safe-area-inset-bottom, 0px)) !important; }
/* 사이드바가 생기는 폭(1100~1200)에서 학습 패널이 창 오른쪽 끝에 붙었다 */
@media (min-width: 1100px) { html[data-variant="atrium"] body { padding-right: 24px; } }
@media (max-width: 900px) {
  /* 위 트랙 카드 규칙(34px 38px)보다 뒤에 와야 이긴다 */
  html[data-variant="atrium"] body:is([data-route="home"], [data-route="programs"], [data-route="program"]) .track-card { padding: 20px 12px !important; }
}

/* ══ 10-10 전수조사(넓은 화면) 반영 ══ */
@media (min-width: 1100px) {
  /* 떠 있는 단추(피드백·채팅) 자리를 비운다 — 책 읽기 본문 카드가 창 끝까지 와서 단추가 글을 가렸다 */
  html[data-variant="atrium"] body[data-route="read"] #app > .wrap { padding-right: 110px; }
  /* 사이드바가 키 900 화면에서 넘쳤다 — 메뉴 줄 간격을 줄인다 */
  html[data-variant="atrium"] #nav a, html[data-variant="atrium"] #nav > .nav-tracklabel ~ a { padding-top: 6px !important; padding-bottom: 6px !important; }
  html[data-variant="atrium"] #nav > .nav-tracklabel { margin-top: 12px !important; margin-bottom: 4px !important; }
  html[data-variant="atrium"] #nav > .nav-div { margin: 4px 12px !important; }
  html[data-variant="atrium"] .topbar > :is(.theme-btn, .mob-btn) { padding: 5px 12px !important; }
  /* 문제 시계 — 패널을 덮지 않게 사이드바 아래쪽 안에 둔다. 그동안 사이드바 안쪽은 시계만큼 비워 둔다 */
  html[data-variant="atrium"] .quiz-clock { left: 26px !important; bottom: 26px !important; width: calc(var(--a-side-w) - 24px); z-index: 31; }
  html[data-variant="atrium"] body[data-route="quiz"] .topbar { padding-bottom: 92px; }
}
@media (min-width: 1100px) and (max-height: 860px) {
  html[data-variant="atrium"] #nav a, html[data-variant="atrium"] #nav > .nav-tracklabel ~ a { padding-top: 4px !important; padding-bottom: 4px !important; font-size: 13.5px !important; }
  html[data-variant="atrium"] .topbar > .brand { padding-bottom: 6px !important; }
}
/* 심화 과정·관리 — 창이 좁으면 패널이 남은 폭에 맞춘다(1180px 고정이라 오른쪽이 잘렸다) */
html[data-variant="atrium"] body:is([data-route="programs"], [data-route="program"], [data-route="admin"]) #app > .wrap { max-width: min(1180px, 100%); }
html[data-variant="atrium"] body[data-route="admin"] #app > .wrap {
  margin: 28px auto 60px; padding: 40px 44px 48px; background: var(--a-sheet); border: 1px solid rgba(0,70,42,.09); border-radius: var(--a-r-panel); box-shadow: var(--a-sh-paper);
}
/* 심화 과정 제목 위계 — 화면 제목이 트랙 제목보다 세게 */
html[data-variant="atrium"] body:is([data-route="programs"], [data-route="program"]) #app :is(h1, .program-hero h1) {
  font-family: var(--a-serif) !important; font-weight: 700 !important; font-size: clamp(28px, 3vw, 36px) !important; color: var(--a-deep) !important; line-height: 1.3;
}
html[data-variant="atrium"] .prog-head { display: block !important; border-top-color: var(--a-line-2); padding-top: 22px; }
html[data-variant="atrium"] .prog-kicker { display: block; font-family: var(--a-latin); font-size: 12.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--a-forest); margin-bottom: 6px; }
html[data-variant="atrium"] .prog-head h2 { font-family: var(--a-serif) !important; font-weight: 700 !important; font-size: 22px !important; color: var(--a-deep); }
html[data-variant="atrium"] .prog-head p { margin-top: 6px !important; color: var(--a-ink-2) !important; }
html[data-variant="atrium"] .program-hero { background: var(--a-white) !important; border-radius: var(--a-r-card) !important; }
/* 홈 — 로고 카드를 낮춰 첫 화면에 조각상이 들어오게 */
html[data-variant="atrium"] body[data-route="home"] .home-hero { padding: 22px 40px 20px !important; margin: 16px 0 18px !important; }
html[data-variant="atrium"] body[data-route="home"] .fp-brand { margin: 16px auto 6px !important; }
html[data-variant="atrium"] body[data-route="home"] .fp-logo { height: 118px !important; }
html[data-variant="atrium"] body[data-route="home"] .fp-title-en { margin-bottom: 14px !important; }
html[data-variant="atrium"] body[data-route="home"] .fp-sub { margin-bottom: 22px !important; }
/* 제목 아래 숨 */
html[data-variant="atrium"] h1.page { margin-bottom: 16px !important; }
/* 권 목록 줄 머리표가 '7~12 / 권' 으로 꺾였다 */
html[data-variant="atrium"] .vol-label { white-space: nowrap; width: auto !important; min-width: 48px; }

/*<phone>*/
/* ══ 폰 사용성 정리 (10-10 사용자: "모바일 화면은 작살났다, 이용편의성이 지랄맞다") ══
   375·390 폭에서 화면마다 직접 눌러 보고 고친 것. 원칙 셋:
   ① 글이 들어갈 폭을 먼저 — 종이 패널은 가장자리까지 펴고(바깥 여백 6px + 안쪽 16px 이중 여백을 걷음), 안쪽 상자 여백도 줄인다.
   ② 떠 있는 것은 적게 — 아래 독은 폰에서 홈에만, 한 줄로 낮게, 아래로 내리는 동안은 숨는다(atrium.js).
   ③ 첫 화면에 할 일이 — 홈 로고 카드를 낮추고, 이번 권 할 일은 안내를 접어 '과제 순서'가 바로 보이게(app.js). */
@media (max-width: 900px) {
  /* 위 메뉴 둘째 줄 — 첫 칩이 화면 왼쪽 끝에 붙어 잘려 보였다(눈금 도구가 좌우 여백을 0 으로 덮음) */
  html[data-variant="atrium"] .topbar nav { padding-left: calc(14px + env(safe-area-inset-left, 0px)) !important; padding-right: calc(14px + env(safe-area-inset-right, 0px)) !important; scroll-padding-inline: 14px; }

  /* ① 종이 패널을 가장자리까지 */
  html[data-variant="atrium"] body:is([data-route="course"], [data-route="task"], [data-route="quiz"], [data-route="commentary"], [data-route="notes"], [data-route="guide"], [data-route="notice"], [data-route="column"], [data-route="feedback"], [data-route="me"], [data-route="export"], [data-route="admin"]) #app > .wrap {
    margin: 0 0 0 !important; padding: 22px calc(14px + env(safe-area-inset-right, 0px)) 36px calc(14px + env(safe-area-inset-left, 0px)) !important;
    border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; max-width: none !important; min-height: 60vh;
  }
  html[data-variant="atrium"] body.at-dock-on #app > .wrap { margin-bottom: 0 !important; }
  html[data-variant="atrium"] #app > .wrap :is(.card, .read-guide:not(details.mfold > *), .exam-sheet) { padding-left: 16px !important; padding-right: 16px !important; }
  html[data-variant="atrium"] #app > .wrap .card { padding-top: 18px !important; padding-bottom: 18px !important; }
  html[data-variant="atrium"] details.mfold > :is(.read-guide, .ment, .card, .course-top) { padding: 4px 14px 14px !important; }
  html[data-variant="atrium"] details.mfold > summary { padding-left: 14px !important; padding-right: 14px !important; }
  html[data-variant="atrium"] :is(textarea, input[type="text"], select) { font-size: 16px; }   /* 16px 아래면 아이폰이 누를 때마다 화면을 키운다 */
  /* 고르기 + 확신도 + % 한 줄 — '판정' 칸이 넓으면 %가 다음 줄로 떨어졌다 */
  html[data-variant="atrium"] .row:has(> input.conf) { flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; }
  html[data-variant="atrium"] .row:has(> input.conf) > select { flex: 1 1 auto; min-width: 0; max-width: none !important; }
  html[data-variant="atrium"] .row > input.conf { flex: none; width: 84px !important; }
  html[data-variant="atrium"] h1.page { font-size: 27px !important; }
  html[data-variant="atrium"] h1.page::before { margin-bottom: 10px; font-size: 11.5px; letter-spacing: .22em; }

  /* 글자 크기 단추 줄 — 띠를 걷었더니 본문 위에 단추 둘이 떠서 글자가 사이로 비쳤다. 오른쪽에 유리 알약 하나로 */
  html[data-variant="atrium"] .read-bar.quiz-bar { display: flex; justify-content: flex-end; pointer-events: none; padding: 6px 0 !important; margin-bottom: 6px !important; }
  html[data-variant="atrium"] .read-bar .read-size { pointer-events: auto; display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px;
    background: var(--a-glass-strong); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--a-glass-brd); box-shadow: var(--a-sh-float); }
  html[data-variant="atrium"] .read-bar .read-size button { min-width: 44px; height: 40px; }
  /* 과제 화면 맨 위에서는 단추 줄이 따로 한 줄(60px)을 먹었다 — 라틴 캡션 줄 오른쪽에 겹쳐 앉힌다 */
  html[data-variant="atrium"] .read-bar.quiz-bar:has(+ h1.page) { margin-bottom: -46px !important; margin-top: -8px !important; }
  html[data-variant="atrium"] .read-bar.quiz-bar + h1.page::before { min-height: 36px; padding-right: 104px; }

  /* 책 읽기 도구줄 — 원래는 종이색 띠였는데 아트리움이 띠를 걷어 단추 사이로 본문이 비쳤다. 유리 띠로 */
  html[data-variant="atrium"] body[data-route="read"] .read-bar:not(.quiz-bar) {
    background: var(--a-glass-strong) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    margin: 0 -14px 12px !important; padding: 6px 14px !important; border-bottom: 1px solid var(--a-glass-brd) !important; }
  /* 목차 — 도구줄 바로 밑에 떠 있는 판으로 연다(app.js 가 --toc-top). 본문 중간에서 눌러도 바로 보인다 */
  html[data-variant="atrium"] body[data-route="read"] .toc.open {
    position: fixed !important; z-index: 860; top: var(--toc-top, 72px); left: 10px; right: 10px; margin: 0 !important;
    max-height: calc(100vh - var(--toc-top, 72px) - 24px); max-height: calc(100dvh - var(--toc-top, 72px) - 24px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--a-sheet) !important; border: 1px solid var(--a-glass-brd) !important; border-radius: 14px !important; box-shadow: 0 24px 48px -18px rgba(30,40,30,.45) !important; padding: 12px 10px !important; }
  html[data-variant="atrium"] body[data-route="read"] .toc.open a, html[data-variant="atrium"] body[data-route="read"] .toc.open .toc-locked { min-height: 40px; }

  /* 떠 있는 단추 — 작게, 덜 가리게 */
  html[data-variant="atrium"] .fb-btn { padding: 8px 13px !important; font-size: 13px !important; }
  html[data-variant="atrium"] .quiz-clock { padding: 6px 12px !important; font-size: 13px !important; }

  /* 맨 아래 사업자 정보가 '맨 위로'·피드백 단추에 가렸다 — 꼬리말 아래에 단추 몫을 남긴다 */
  html[data-variant="atrium"] .nb-foot { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ② 아래 독 — 한 줄로 낮게(88 → 56px). 설명 줄은 걷고, 고리·단추를 줄인다 */
  html[data-variant="atrium"] .at-dock-wrap { padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important; }
  html[data-variant="atrium"] .at-dock { grid-template-columns: 38px 1fr auto !important; gap: 10px !important; padding: 7px 7px 7px 9px !important; border-radius: 18px !important; }
  html[data-variant="atrium"] .at-dock .ring { width: 38px; height: 38px; font-size: 10.5px; }
  html[data-variant="atrium"] .at-dock .now small { font-size: 11.5px !important; letter-spacing: .02em; }
  html[data-variant="atrium"] .at-dock .now b { font-size: 15px; line-height: 1.3; }
  html[data-variant="atrium"] .at-dock .now span { display: none; }
  html[data-variant="atrium"] .at-dock .btn { height: 42px; padding: 0 16px !important; font-size: 14.5px; border-radius: 13px !important; }
  /* 내리는 동안 숨는다(atrium.js 가 .tuck) — 위 메뉴와 같은 움직임 */
  html[data-variant="atrium"] .at-dock-wrap.tuck { transform: translateY(calc(100% + 12px)); opacity: 0; }
  html[data-variant="atrium"] .at-dock-wrap.tuck .at-dock { pointer-events: none; }
  /* 독 위로 올리는 단추 자리 — 독 높이(56 + 아래 8)에 맞춘다 */
  html[data-variant="atrium"] body.at-dock-on { padding-bottom: 72px; }
  html[data-variant="atrium"] body.at-dock-on .fb-btn { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
  html[data-variant="atrium"] body.at-dock-on .cb-btn { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
  html[data-variant="atrium"] body.has-cb.at-dock-on .fb-btn { bottom: calc(134px + env(safe-area-inset-bottom, 0px)) !important; }
  html[data-variant="atrium"] body.at-dock-on .to-top { bottom: calc(126px + env(safe-area-inset-bottom, 0px)) !important; }
  html[data-variant="atrium"] body.at-dock-on.has-cb .to-top { bottom: calc(184px + env(safe-area-inset-bottom, 0px)) !important; }
  /* 독이 숨은 동안에는 단추들도 제자리(아래)로 */
  html[data-variant="atrium"] body.at-dock-on.at-dock-tuck :is(.fb-btn, .cb-btn) { bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
  html[data-variant="atrium"] body.at-dock-on.has-cb.at-dock-tuck .fb-btn { bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }
  html[data-variant="atrium"] body.at-dock-on.at-dock-tuck .to-top { bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }
  html[data-variant="atrium"] body.at-dock-on.has-cb.at-dock-tuck .to-top { bottom: calc(128px + env(safe-area-inset-bottom, 0px)) !important; }
  html[data-variant="atrium"] :is(.fb-btn, .cb-btn, .to-top) { transition: transform .4s var(--a-slow), background .3s; }   /* bottom 은 움직이지 않는다 — 독이 뜨는 순간 단추가 미끄러지는 동안 독에 겹쳐 보였다 */

  /* ③ 홈 — 로고 카드를 낮춰 첫 화면에 조각상과 독이 같이 들어오게 */
  html[data-variant="atrium"] body[data-route="home"] .home-hero { padding: 14px 16px 14px !important; margin: 10px 0 12px !important; }
  html[data-variant="atrium"] body[data-route="home"] .fp-brand { margin: 10px auto 4px !important; }
  html[data-variant="atrium"] body[data-route="home"] .fp-logo { height: 78px !important; }
  html[data-variant="atrium"] body[data-route="home"] .fp-title-en { font-size: 11px !important; letter-spacing: .2em !important; margin-bottom: 8px !important; white-space: nowrap; }
  html[data-variant="atrium"] body[data-route="home"] .fp-motto { font-size: 18px !important; line-height: 1.5 !important; margin-top: 10px !important; }
  html[data-variant="atrium"] body[data-route="home"] .fp-motto .nw { display: inline-block; }   /* 쉼표에서 꺾이게 — '사고를 / 누비다'로 갈라졌다 */
  html[data-variant="atrium"] body[data-route="home"] .fp-sub { font-size: 13.5px !important; line-height: 1.75 !important; margin-bottom: 12px !important; }
  html[data-variant="atrium"] body[data-route="home"] .home-order { font-size: 13px; padding: 0 4px; }
  html[data-variant="atrium"] .tk-head b { font-size: 21px !important; }
  html[data-variant="atrium"] body:is([data-route="programs"], [data-route="program"]) .tk-head b { font-size: 19px !important; line-height: 1.4; }

  /* 가이드 탭 넷 — 아트리움이 inline-flex 로 덮어 폭을 다 못 썼다. 원래대로 네 칸을 똑같이 */
  html[data-variant="atrium"] .guide-toggle { display: grid !important; grid-template-columns: repeat(4, 1fr); width: 100%; gap: 2px; }
  html[data-variant="atrium"] .guide-toggle .gt-btn { padding: 9px 2px !important; font-size: 12.5px; line-height: 1.35; word-break: keep-all; }
}

/* ── 태블릿(601~900) — 폰처럼 끝까지 펴면 줄이 720px 로 길어져 읽기 힘들었다. 종이 한 장을 가운데 두고 여백을 준다 ── */
@media (min-width: 601px) and (max-width: 900px) {
  html[data-variant="atrium"] body:is([data-route="course"], [data-route="task"], [data-route="quiz"], [data-route="commentary"], [data-route="notes"], [data-route="guide"], [data-route="notice"], [data-route="column"], [data-route="feedback"], [data-route="me"], [data-route="export"], [data-route="admin"]) #app > .wrap {
    max-width: 720px !important; margin: 20px auto 48px !important; padding: 40px 40px 44px !important;
    border-radius: var(--a-r-panel) !important; border: 1px solid rgba(0,70,47,.09) !important; min-height: 0;
  }
  html[data-variant="atrium"] body.at-dock-on #app > .wrap { margin-bottom: 110px !important; }
  html[data-variant="atrium"] #app > .wrap :is(.card, .read-guide:not(details.mfold > *), .exam-sheet) { padding-left: 24px !important; padding-right: 24px !important; }
  html[data-variant="atrium"] #app > .wrap .card { padding-top: 22px !important; padding-bottom: 22px !important; }
  html[data-variant="atrium"] h1.page { font-size: 32px !important; }
  /* 책 읽기 — 본문 기둥도 같은 폭으로 */
  html[data-variant="atrium"] body[data-route="read"] #app > .wrap { max-width: 720px; margin-left: auto; margin-right: auto; }
  html[data-variant="atrium"] body[data-route="read"] .read-bar:not(.quiz-bar) { margin: 0 0 12px !important; border: 1px solid var(--a-glass-brd) !important; border-radius: 14px; }
  /* 홈 로고 카드 — 태블릿 폭에서는 폰 크기가 너무 작다 */
  html[data-variant="atrium"] body[data-route="home"] .home-hero { padding: 22px 32px 20px !important; }
  html[data-variant="atrium"] body[data-route="home"] .fp-logo { height: 100px !important; }
  html[data-variant="atrium"] body[data-route="home"] .fp-title-en { font-size: 12.5px !important; letter-spacing: .26em !important; }
  html[data-variant="atrium"] body[data-route="home"] .fp-motto { font-size: 20px !important; }
  html[data-variant="atrium"] body[data-route="home"] .fp-sub { font-size: 14.5px !important; }
  html[data-variant="atrium"] body[data-route="home"] .gl-stat .gtile .gt-name { font-size: 12px !important; }
}

/* ── 모든 폭: 접힌 상자는 상자 전체를 누를 수 있게 — 상자는 단추처럼 보이는데 실제로 눌리는 곳은 제목 한 줄(24px)뿐이었다 ── */
html[data-variant="atrium"] details:is(.rg-fold, .mh-fold) { padding: 0 18px 18px !important; }
html[data-variant="atrium"] details:is(.rg-fold, .mh-fold):not([open]) { padding-bottom: 0 !important; }
html[data-variant="atrium"] details:is(.rg-fold, .mh-fold) > summary { margin: 0 -18px; padding: 18px; }
/* 짧은 과제 메뉴 단추 — 901~1099px 에서 26px 로 낮아 누르기 어려웠다 */
@media (max-width: 1099px) {
  html[data-variant="atrium"] .topbar nav :is(.nav-vol, .nav-step) { min-height: 36px; display: inline-flex; align-items: center; }
  html[data-variant="atrium"] .topbar nav .nav-step { display: flex; }
}
/* 단계 펼침 판 — 태블릿에서는 화면 폭 가득 펼치지 않고 메뉴 밑에 카드 한 장으로 */
@media (min-width: 601px) and (max-width: 1099px) {
  html[data-variant="atrium"] .nav-sheet { left: 14px !important; right: auto !important; top: calc(100% + 6px) !important; width: min(400px, calc(100vw - 28px));
    max-height: calc(100vh - 140px); border: 1px solid var(--a-glass-brd) !important; border-radius: 14px !important; box-shadow: 0 24px 48px -18px rgba(30,40,30,.4) !important; padding: 6px 14px 14px !important; }
}
/* 피드백 메모 판 — 단추가 독 위로 올라가도 판은 제자리라 독 위에 겹쳐 떴다. 단추 바로 위로 따라 올린다 */
html[data-variant="atrium"] body.at-dock-on .fb-panel { bottom: 146px !important; z-index: 40; }
html[data-variant="atrium"] body.has-cb.at-dock-on .fb-panel { bottom: 210px !important; }
@media (max-width: 900px) {
  html[data-variant="atrium"] body.at-dock-on .fb-panel { bottom: calc(124px + env(safe-area-inset-bottom, 0px)) !important; }
  html[data-variant="atrium"] body.has-cb.at-dock-on .fb-panel { bottom: calc(182px + env(safe-area-inset-bottom, 0px)) !important; }
  html[data-variant="atrium"] body.at-dock-on.at-dock-tuck .fb-panel { bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ── 폰 조각상 줄 = 예전 누비 그대로 (10-10 사용자: "조각상 부분은 완전 예전 누비로") ──
   아트리움·에디토리얼 쪽 조각상 규칙은 601px 이상에서만 걸고(눈금 도구도 .gl-·.gtile 은 다시 찍지 않는다),
   여기서는 예전 누비 색·글꼴 변수만 되돌린다. 모양 규칙은 style.css 원래 것이 그대로 걸린다. */
@media (max-width: 600px) {
  html[data-variant="atrium"] body[data-route="home"] .gl-row {
    --ewha: #00462a; --ink: #00462a; --card: #f3eee1; --ink-soft: rgba(0,70,42,.78);
    --line: rgba(0,70,42,.45); --line-soft: rgba(0,70,42,.25); --ewha-rgb: 0,70,42; --gold: #d9c37a; --gold-rgb: 217,195,122;
    font-family: "ChosunilboMJ", "Noto Serif KR", "Batang", serif;
  }
  html[data-variant="atrium"][data-theme="dark"] body[data-route="home"] .gl-row {
    --ewha: #e8e3d8; --ink: #e8e3d8; --card: #171716; --ink-soft: rgba(232,227,216,.66);
    --line: rgba(232,227,216,.30); --line-soft: rgba(232,227,216,.16); --ewha-rgb: 232,227,216; --gold: #b8964f; --gold-rgb: 184,150,79;
  }
}
@media (max-width: 600px) and (prefers-color-scheme: dark) {
  html[data-variant="atrium"]:not([data-theme]) body[data-route="home"] .gl-row {
    --ewha: #e8e3d8; --ink: #e8e3d8; --card: #171716; --ink-soft: rgba(232,227,216,.66);
    --line: rgba(232,227,216,.30); --line-soft: rgba(232,227,216,.16); --ewha-rgb: 232,227,216; --gold: #b8964f; --gold-rgb: 184,150,79;
  }
}

/* ── 책 소개 영상 (2026-10-10) — app.js videoCardHtml. 썸네일 카드 → 누르면 그 자리에서 재생, 본 뒤에는 한 줄 ── */
html[data-variant="atrium"] .vol-video { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: center; margin: 4px 0 22px; padding: 14px;
  border: 1px solid var(--a-line-2); border-radius: var(--a-r-card); background: var(--a-white); box-shadow: var(--a-sh-card); }
html[data-variant="atrium"] .vv-thumb { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; background: #111; cursor: pointer; }
html[data-variant="atrium"] .vv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--a-slow); }
html[data-variant="atrium"] .vv-thumb:hover img { transform: scale(1.03); }
html[data-variant="atrium"] .vv-btn { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  background: var(--a-deep); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
html[data-variant="atrium"] .vv-btn::after { content: ""; position: absolute; left: 22px; top: 18px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--a-white); }
html[data-variant="atrium"] .vv-len { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.74); color: #fff; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-variant="atrium"] .vv-txt b { display: block; font-family: var(--a-serif); font-size: 19px; font-weight: 700; color: var(--a-deep); line-height: 1.45; margin-bottom: 6px; }
html[data-variant="atrium"] .vv-txt span { display: block; color: var(--a-ink-2); font-size: 15px; line-height: 1.7; }
html[data-variant="atrium"] .vol-video:is(.playing, .seen) { display: block; padding: 0; border: 0; background: none; box-shadow: none; }
html[data-variant="atrium"] .vv-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
html[data-variant="atrium"] .vv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
html[data-variant="atrium"] .vv-open:not(.vv-thumb) { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 16px 8px 10px;
  border: 1px solid var(--a-line-2); border-radius: 10px; background: var(--a-white); color: var(--a-deep); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
html[data-variant="atrium"] .vv-open:not(.vv-thumb):hover { border-color: var(--a-deep); }
html[data-variant="atrium"] .vv-mini { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--a-deep); }
html[data-variant="atrium"] .vv-mini::after { content: ""; position: absolute; left: 8px; top: 6px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--a-white); }
html[data-variant="atrium"] .vv-toc { width: 100%; margin: 0 0 12px; }
html[data-variant="atrium"] .vol-video.seen { margin: 0 0 16px; }
.vv-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10,10,9,.78); }
.vv-box { position: relative; width: min(960px, 100%); }
.vv-close { position: absolute; right: 0; top: -48px; min-height: 40px; padding: 8px 16px; border: 1px solid rgba(255,255,255,.5); border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
@media (max-width: 600px) {
  html[data-variant="atrium"] .vol-video { grid-template-columns: 1fr; gap: 12px; padding: 12px; margin: 2px 0 18px; }
  html[data-variant="atrium"] .vv-txt b { font-size: 17.5px; margin-bottom: 4px; }
  html[data-variant="atrium"] .vv-txt span { font-size: 14.5px; }
}
/*</phone>*/

/* 해설 '내가 낸 답' 상자 · 거시 2권 층 칸 — 아트리움 손질 (2026-10-14). 바탕 규칙은 style.css, 다크는 tools/atrium_dark_src.css */
html[data-variant="atrium"] .myans { border: 1px solid var(--a-line-2); background: var(--c-tint, rgba(0,70,47,.04)); border-radius: var(--a-r-card); }
html[data-variant="atrium"] .myans > summary { font-family: var(--a-serif); color: var(--a-deep); }
html[data-variant="atrium"] .g21-lv-fixed { border-color: var(--a-line-2); color: var(--a-deep); }
@media (max-width: 480px) {
  html[data-skin="editorial"] .wrap.commentary > .cm-pair > .card > h2 { font-size: var(--fs-title); line-height: var(--lh-snug); margin: 0 0 16px; }
}

/* ══ 광고 배너 — 사이드바 세로 배너 (2026-10-15, 서비스판 web/js/service/banner.js 가 붙인다) ══
   예전 홈 머리 그림 아래 가로 띠(.ad-slider)를 옮겼다. 넓은 화면은 사이드바 메뉴 아래 남는 높이(.sb-bn-slot),
   폰은 홈 맨 끝 교육서비스 줄 위(.ph-bn-row). 공부 화면에서는 banner.js 가 붙이지 않는다.
   그림은 세로 2:3 한 장(10-15 반응형부터 720×1080). 설계·시안·문구 윤문: docs/피드백_20261015/배너_사이드바_설계.md */
html[data-variant="atrium"] .sb-bn { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: var(--a-r-card); overflow: hidden;
  border: 1px solid var(--a-line-2); background: var(--a-cream); box-shadow: var(--a-sh-card); }
html[data-variant="atrium"] .sb-bn > :is(a, span.sb-bn-pic) { display: block; width: 100%; height: 100%; }
html[data-variant="atrium"] .sb-bn img { display: block; width: 100%; height: 100%; object-fit: cover; }
html[data-variant="atrium"] .sb-bn-mark { position: absolute; left: 8px; top: 8px; font: 600 10.5px/1 var(--ff-ui); letter-spacing: .12em; padding: 3px 7px; border-radius: 4px;
  background: rgba(28,42,35,.55); color: #fff; pointer-events: none; }
html[data-variant="atrium"] .sb-bn-x { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(28,42,35,.55); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
html[data-variant="atrium"] .sb-bn-x:hover { background: rgba(28,42,35,.78); }
html[data-variant="atrium"] .sb-bn :is(a, .sb-bn-x):focus-visible { outline: 2px solid var(--a-forest); outline-offset: 2px; }
html[data-variant="atrium"] .sb-bn .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 넓은 화면: 메뉴는 제 키만, 남는 높이를 배너 칸이. 배너는 늘 사이드바 폭을 꽉 채운 2:3(폭 238 이면 357 높이).
   높이가 모자라도 폭은 줄이지 않는다 — 폭이 사이드바보다 좁아지면 어색하다(10-15 사용자). 조금 모자라면(1366×768 노트북은 7px 쯤)
   그림 위아래를 조금 잘라(object-fit: cover, 가운데 기준) 맞추고, 높이가 폭의 1.3배보다 낮아지면(13% 넘게 잘려야 하면) 접는다 */
html[data-variant="atrium"] .sb-bn-slot { display: none; }
@media (min-width: 1100px) {
  html[data-variant="atrium"] .topbar:has(> .sb-bn-slot) > #nav { flex: 0 0 auto; }
  html[data-variant="atrium"] .topbar > .sb-bn-slot { display: flex; flex: 1 1 0; min-height: 0; overflow: hidden; container-type: size;
    justify-content: center; align-items: flex-start; padding: 10px 4px; }
  html[data-variant="atrium"] .sb-bn-slot .sb-bn { width: 100%; aspect-ratio: auto; height: min(100cqh, calc(100cqw * 1.5)); }
  @container (aspect-ratio > 10 / 13) { html[data-variant="atrium"] .sb-bn-slot .sb-bn { display: none; } }
  /* 키 낮은 창(1366×768 노트북 등): 배너가 있으면 사이드바 진도 칸을 뺀다. 같은 진도가 화면 아래 독(지금 할 일)에 있다 */
  @media (max-height: 820px) { html[data-variant="atrium"] .topbar:has(> .sb-bn-slot) > .at-sfoot { display: none; } }
}
/* 폰: 홈 맨 끝 */
/* 폰·태블릿 홈 끝: 화면 폭의 82% 까지(최대 320), 높이는 화면의 55% 를 넘지 않게 폭을 줄인다(2:3 이라 폭 = 높이 ÷ 1.5) */
html[data-variant="atrium"] .ph-bn-row { margin: 28px auto 8px; width: min(320px, 82vw, 36.6svh); min-width: 180px; }
@media (min-width: 1100px) { html[data-variant="atrium"] .ph-bn-row { display: none; } }
/* 태블릿 홈 첫 화면 (2026-10-20 사용자): 소개 카드 오른쪽에 나란히. 높이·폭은 banner.js fitHero 가 소개 카드에 맞춘다 */
html[data-variant="atrium"] .hb-row { display: flex; gap: 16px; align-items: flex-start; margin: 16px 0 18px; }   /* 소개 카드가 갖던 위아래 여백을 줄이 갖는다(위 616·707 줄과 같은 값) */
@media (max-width: 900px) { html[data-variant="atrium"] .hb-row { margin: 10px 0 12px; } }
html[data-variant="atrium"] body[data-route="home"] .hb-row > .home-hero { flex: 1 1 auto; min-width: 0; margin: 0 !important; }
html[data-variant="atrium"] .ph-bn-row.hb-side { flex: 0 0 auto; margin: 0; width: auto; min-width: 0; }
html[data-variant="atrium"] .ph-bn-row.hb-side .sb-bn { aspect-ratio: auto; }
/* 슬라이드 (2026-10-16 사용자 승인) — 켜진 배너가 둘 이상이면 banner.js 가 한 카드 안에 장을 나란히 놓고 가로로 민다(.5초).
   아래 막대가 장 수만큼. 지금 장 막대가 6초 동안 차오르고, 다 차면(animationend) banner.js 가 다음 장으로 넘긴다.
   .paused(마우스·손가락·초점·탭 숨김·화면 밖)면 막대도 선다. 움직임 줄이기 설정이면 위 전역 규칙이 애니메이션을 지워 저절로 넘기지 않고,
   막대는 지금 장까지 꽉 찬 위치 표시만. 화살표는 마우스가 있는 넓은 화면에서 올렸을 때만, 폰은 옆으로 밀어 넘긴다.
   막대·화살표·글자색은 그림 위에 얹히므로 라이트·다크가 같다 */
html[data-variant="atrium"] .sb-bn-many { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
html[data-variant="atrium"] .sb-bn-track { display: flex; width: 100%; height: 100%; transition: transform .5s var(--a-slow); will-change: transform; }
html[data-variant="atrium"] .sb-bn-slide { flex: 0 0 100%; width: 100%; height: 100%; }
html[data-variant="atrium"] .sb-bn-slide > :is(a, span.sb-bn-pic) { display: block; width: 100%; height: 100%; }
html[data-variant="atrium"] .sb-bn-bars { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 4px; padding: 16px 8px 3px; pointer-events: none;
  background: linear-gradient(rgba(20,26,22,0), rgba(20,26,22,.32)); }
html[data-variant="atrium"] .sb-bn-bar { flex: 1 1 0; min-width: 0; height: 15px; padding: 6px 0; border: 0; background: none; cursor: pointer; pointer-events: auto; }
html[data-variant="atrium"] .sb-bn-bar i { display: block; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(255,255,255,.38); }
html[data-variant="atrium"] .sb-bn-bar b { display: block; width: 0; height: 100%; border-radius: inherit; background: #fff; }
html[data-variant="atrium"] .sb-bn-bar.done b { width: 100%; }
html[data-variant="atrium"] .sb-bn-bar.on b { animation: sb-bn-fill 6s linear forwards; }
html[data-variant="atrium"] .sb-bn.paused .sb-bn-bar.on b { animation-play-state: paused; }
@keyframes sb-bn-fill { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { html[data-variant="atrium"] .sb-bn-bar.on b { width: 100%; } }
html[data-variant="atrium"] .sb-bn-arr { position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(28,42,35,.55); color: #fff; font: 400 21px/1 var(--ff-ui); cursor: pointer; opacity: 0; transition: opacity .2s, background .2s; }
html[data-variant="atrium"] .sb-bn-arr span { margin-top: -3px; }
html[data-variant="atrium"] .sb-bn-arr.prev { left: 6px; }
html[data-variant="atrium"] .sb-bn-arr.next { right: 6px; }
html[data-variant="atrium"] .sb-bn:hover .sb-bn-arr, html[data-variant="atrium"] .sb-bn-arr:focus-visible { opacity: 1; }
html[data-variant="atrium"] .sb-bn-arr:hover { background: rgba(28,42,35,.78); }
@media (hover: none) { html[data-variant="atrium"] .sb-bn-arr { display: none; } }
html[data-variant="atrium"] .sb-bn :is(.sb-bn-arr, .sb-bn-bar):focus-visible { outline: 2px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 4px rgba(28,42,35,.6); }

/* ══ 사이드바 접기 (2026-10-16 사용자 승인) — 넓은 화면(≥1100)만. js/atrium.js ⑤ 가 단추를 붙이고 html.sb-mini 를 켠다(이 기기에 기억, localStorage yb_sb_mini).
   접으면 72px 막대: 메뉴는 아이콘만(#nav a::before 그대로, 글자는 font-size 0 — 화면 읽기는 그대로 읽는다), 로고는 N 마크만,
   시험 고르기·배너 칸·진도 칸·트랙 이름표·흐르는 시계 칩·로그인 칸·도구 단추는 숨긴다. 밝기 단추는 그림만 남긴다. 맨 아래에 펼치기 단추.
   --a-side-w 를 72px 로 바꾸면 그 값을 쓰는 곳(본문 왼쪽 여백·아래 독·문제 시계)이 같이 넓어진다.
   같은 연필 아이콘인 주과제 ①·②·보조과제는 아이콘 아래 작은 글자(.sb-mk ①·②·보, atrium.js 가 단다)로 가른다. 마우스를 올리면 메뉴 이름 말풍선(.sb-tip).
   색은 토큰만 — 다크는 토큰이 바뀌어 따로 규칙이 없다. 문구 윤문: docs/피드백_20261016/윤문_배너접기.md */
html[data-variant="atrium"] .sb-fold, html[data-variant="atrium"] #nav a .sb-mk, html[data-variant="atrium"] .sb-tip { display: none; }
@media (min-width: 1100px) {
  html[data-variant="atrium"] .topbar > .sb-fold { display: grid; place-items: center; position: absolute; top: 15px; right: 12px; z-index: 2; width: 30px; height: 30px; padding: 0;
    border: 1px solid var(--a-line); border-radius: 9px; background: rgba(var(--a-deep-rgb), .03); color: var(--a-ink-3); cursor: pointer; transition: background .2s, color .2s; }
  html[data-variant="atrium"] .topbar > .sb-fold:hover { background: rgba(var(--a-deep-rgb), .09); color: var(--a-deep); }
  html[data-variant="atrium"] .topbar > .sb-fold:focus-visible { outline: 2px solid var(--a-forest); outline-offset: 2px; }
  html[data-variant="atrium"] .topbar > .sb-fold svg { width: 16px; height: 16px; }
  html[data-variant="atrium"] .topbar > .brand { margin-right: 40px; }   /* 로고가 접기 단추 밑으로 들어가지 않게 */
  html[data-variant="atrium"] .sb-tip { display: block; position: fixed; z-index: 60; padding: 5px 10px; border-radius: 7px; pointer-events: none; white-space: nowrap;
    font: 500 12.5px/1.4 var(--ff-ui); color: var(--a-sheet); background: var(--a-ink); box-shadow: var(--a-sh-float); opacity: 0; transform: translate(-4px, -50%); transition: opacity .15s, transform .15s; }
  html[data-variant="atrium"] .sb-tip.on { opacity: 1; transform: translate(0, -50%); }

  html.sb-mini[data-variant="atrium"] { --a-side-w: 72px; }
  html.sb-mini[data-variant="atrium"] .topbar { padding: 16px 10px 12px; overflow-x: hidden; }
  html.sb-mini[data-variant="atrium"] .topbar > :not(.brand):not(#nav):not(.theme-btn):not(.sb-fold) { display: none !important; }
  html.sb-mini[data-variant="atrium"] .topbar > .brand { display: block; width: 22px; overflow: hidden; margin: 0 auto 10px !important; padding: 0 !important; }
  html.sb-mini[data-variant="atrium"] .topbar > .brand .brand-logo { max-width: none; width: auto; height: 26px; }
  html.sb-mini[data-variant="atrium"] .topbar > #nav { padding: 0 0 8px; }
  html.sb-mini[data-variant="atrium"] .topbar #nav a { flex-direction: column; justify-content: center; align-items: center; gap: 0; position: relative;
    padding: 9px 0 !important; font-size: 0 !important; line-height: 0; white-space: nowrap; }
  html.sb-mini[data-variant="atrium"] .topbar #nav a > :not(.sb-mk) { display: none !important; }
  html.sb-mini[data-variant="atrium"] .topbar #nav a::before { width: 19px !important; height: 19px !important; margin: 0 !important; }
  html.sb-mini[data-variant="atrium"] .topbar #nav a .sb-mk { display: block; margin-top: 3px; font: 600 10px/1 var(--ff-ui); letter-spacing: 0; color: inherit; }
  html.sb-mini[data-variant="atrium"] .topbar #nav a .sb-mk.num { font-size: 13px; font-weight: 400; margin-top: 2px; }   /* ①·② 는 같은 크기로 쓰면 글자 안 숫자가 안 읽힌다 */
  html.sb-mini[data-variant="atrium"] .topbar #nav a:has(.sb-mk) { padding: 7px 0 5px !important; }
  html.sb-mini[data-variant="atrium"] .topbar #nav a.dot::after { top: 5px; right: 9px; }
  html.sb-mini[data-variant="atrium"] .topbar #nav > :is(.nav-tracklabel, .my-clock) { display: none !important; }
  html.sb-mini[data-variant="atrium"] .topbar #nav > .nav-div { margin: 5px 8px !important; }
  html.sb-mini[data-variant="atrium"] .topbar > .theme-btn { margin: auto 0 0 !important; padding: 6px 0 !important; text-align: center; }
  html.sb-mini[data-variant="atrium"] .topbar > .theme-btn .tb-tx { display: none; }
  html.sb-mini[data-variant="atrium"] .topbar > .sb-fold { position: static; order: 9 !important; flex: none; margin: 6px auto 0; }
  /* 문제 시계 — 펼친 사이드바에서는 사이드바 아래쪽 안에 앉는데(위 10-10 넓은 화면 묶음), 72px 에는 안 들어가서 본문 쪽 왼쪽 아래로 */
  html.sb-mini[data-variant="atrium"] body[data-route="quiz"] .topbar { padding-bottom: 12px; }
  html.sb-mini[data-variant="atrium"] .quiz-clock { left: calc(var(--a-side-w) + 44px) !important; width: auto; }
}

/* ── 내 시간 (2026-10-15) — 설계 docs/피드백_20261015/내시간_설계.md ──
   시계 그림(B안): 테두리 + 분침 + 원둘레를 도는 금색 점. 지난 시간을 보여 주는 자리는 점이 서 있고,
   흐르는 시계(.my-clock)만 점이 60초에 한 바퀴 돈다. 멈추면(.paused) 점도 서고 옅어진다. 움직임 줄이기 설정이면 돌지 않는다.
   색은 토큰만 쓴다 — 다크는 토큰이 바뀌어 따로 규칙을 두지 않는다. */
@keyframes mc-spin { to { transform: rotate(360deg); } }
html[data-variant="atrium"] .mc-ic { flex: none; overflow: visible; vertical-align: -2px; }
html[data-variant="atrium"] .mc-ic .mc-sec { transform-box: view-box; transform-origin: 8px 8px; }
/* 도는 것은 흐르는 시계와, 지금 재는 장의 그림(.mc-on — myClockPaint 가 붙인다)뿐. 다 잰 장은 서 있다 */
html[data-variant="atrium"] .my-clock .mc-ic .mc-sec, html[data-variant="atrium"] .mc-ic.mc-on .mc-sec { animation: mc-spin 60s linear infinite; }
html[data-variant="atrium"] .mc-ic.mc-on.mc-stop .mc-sec { animation-play-state: paused; }
/* 지금 재는 시계는 이화그린으로 2.4초에 한 번 천천히 옅어졌다 짙어진다 (10-15 사용자 고름: 시안 3번 '숨쉬기'). 1초 깜빡임은 본문 옆 네 군데가 같이 깜빡여 읽기를 흐트러뜨려 뺐다.
   다크는 이화그린을 쓰지 않는 원칙이라 --a-deep(다크에서 상아)을 따른다. 멈추면 숨쉬기도 멈춘다. */
@keyframes mc-breathe { 50% { opacity: .4; } }
html[data-variant="atrium"] .my-clock .mc-ic, html[data-variant="atrium"] .mc-ic.mc-on { color: var(--a-deep) !important; animation: mc-breathe 2.4s ease-in-out infinite; }
html[data-variant="atrium"] .my-clock.paused .mc-ic, html[data-variant="atrium"] .mc-ic.mc-on.mc-stop { animation-play-state: paused; }
html[data-variant="atrium"] .mc-ic .mc-rim { fill: none; stroke: currentColor; stroke-width: 1; opacity: .75; }
html[data-variant="atrium"] .mc-ic .mc-min { stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
html[data-variant="atrium"] .mc-ic .mc-dot { fill: var(--a-gold); }
html[data-variant="atrium"] .mc-ic .mc-hub { fill: currentColor; }
html[data-variant="atrium"] .paused .mc-ic .mc-sec { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { html[data-variant="atrium"] .mc-ic .mc-sec, html[data-variant="atrium"] .mc-ic { animation: none !important; } }
/* 할 일 줄 — 내가 읽은·쓴·푼 시간 알약. 네 면 테두리 */
html[data-variant="atrium"] .stage .t .my-time { display: flex !important; align-items: center; gap: 6px; width: max-content; max-width: 100%; margin-top: 8px !important; padding: 2px 10px;
  border: 1px solid var(--a-line-2); border-radius: 999px; font-size: 12.5px !important; line-height: 1.6 !important; color: var(--a-ink-2) !important; font-variant-numeric: tabular-nums; }
html[data-variant="atrium"] .stage .t .my-time .mt-k { display: inline !important; margin: 0 !important; font-size: 12.5px !important; font-weight: 600; color: var(--a-deep) !important; line-height: inherit !important; }
html[data-variant="atrium"] .stage .t .my-time .mc-ic { color: var(--a-ink-3); }
/* 목차 — 장 이름 밑 둘째 줄, 맨 위 합계 */
html[data-variant="atrium"] .toc .toc-tt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
html[data-variant="atrium"] .toc .toc-my { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--a-ink-3); font-variant-numeric: tabular-nums; }
html[data-variant="atrium"] .toc .toc-my .mc-ic { width: 12px; height: 12px; }
/* 목차 기둥은 좁다(넓은 화면에서 190px 안팎). 굵은 값은 한 줄로 두고, 오른쪽 설명이 안 들어가면 다음 줄 오른쪽으로 내린다 (2026-10-15 정렬 점검) */
html[data-variant="atrium"] .rd-tocbar .rd-tb { flex-wrap: wrap; row-gap: 2px; }
html[data-variant="atrium"] .rd-tocbar .rd-tb b { white-space: nowrap; }
html[data-variant="atrium"] .rd-tocbar .rd-tb > span:last-child { margin-left: auto; }
/* 합계 줄 굵은 값 안의 이름·숫자 칸은 오른쪽 설명(span)의 작은 글씨 규칙을 받지 않는다 */
html[data-variant="atrium"] .rd-tocbar .rd-tb.rd-my b span { font-size: inherit; color: inherit; }
html[data-variant="atrium"] .rd-tocbar .rd-tb + .rd-tb { margin-top: 4px; }
html[data-variant="atrium"] .rd-tocbar .rd-tb.rd-my b { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--a-ink-2); }
html[data-variant="atrium"] .rd-tocbar .rd-tb.rd-my .mc-ic { color: var(--a-ink-3); }
/* 장 머리 칸 — 셋째 칸 */
html[data-variant="atrium"] .rd-cells:has(.rd-mine) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-variant="atrium"] .rd-cell.rd-mine .rd-n { display: inline-flex; align-items: center; gap: 5px; }
html[data-variant="atrium"] .rd-cell.rd-mine .rd-n2 { font-size: 12px; color: var(--a-ink-3); }
@media (max-width: 560px) {
  html[data-variant="atrium"] .rd-cells:has(.rd-mine) { grid-template-columns: minmax(0, 1fr); }
  html[data-variant="atrium"] .rd-cell.rd-mine { grid-template-areas: "k v" "n v" "n2 v"; }
  html[data-variant="atrium"] .rd-cell.rd-mine .rd-n2 { grid-area: n2; }
}
/* 세 칸이 안 들어갈 만큼 칸이 좁으면 폰처럼 한 줄에 한 칸씩 (2026-10-16 점검).
   본문 기둥 폭은 화면 폭만으로 정해지지 않는다 — 1100px 이상에서 왼쪽 메뉴(268px)가 서고 목차 기둥(250px)까지 서면
   1100~1300px 언저리에서 본문이 360~470px로 줄어, 세 칸이 110px 남짓이 되고 '4시간 40분'과 '3분', '전체 … 중'과 '내가 읽은 시간'이 서로 겹쳤다.
   화면 폭(@media) 대신 이 상자의 폭(@container, 안쪽 폭)으로 가른다. 꺾이지 않는 글 가운데 가장 긴 것('전체 10시간 40분 중')이 120px 안팎이라
   세 칸 + 틈 둘 = 384px 아래에서 바꾼다. 평균 줄(.rd-n2)은 꺾여도 되는 글이라 셈에 넣지 않는다 */
html[data-variant="atrium"] .rd-meter { container-type: inline-size; }
@container (max-width: 389px) {
  html[data-variant="atrium"] .rd-cells, html[data-variant="atrium"] .rd-cells:has(.rd-mine) { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html[data-variant="atrium"] .rd-cell { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k v" "n v"; align-items: center; column-gap: 10px; row-gap: 1px; }
  html[data-variant="atrium"] .rd-cell.rd-mine { grid-template-areas: "k v" "n v" "n2 v"; }
  html[data-variant="atrium"] .rd-k { grid-area: k; } html[data-variant="atrium"] .rd-n { grid-area: n; } html[data-variant="atrium"] .rd-v { grid-area: v; }
  html[data-variant="atrium"] .rd-cell.rd-mine .rd-n2 { grid-area: n2; }
}
/* 내 기록 — 권 카드의 시간 줄 이름 앞 */
html[data-variant="atrium"] .me-key .mc-ic { margin-right: 5px; color: var(--a-ink-3); }
/* 흐르는 시계 — 시계 그림 + 글자 한 줄. 굵게 하지 않는다. 리트 문제 시계(왼쪽 아래 상자, 굵은 두 줄)와 생김새·자리를 달리 한다 */
html[data-variant="atrium"] .my-clock { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--a-ink-3); font: inherit; font-size: 12.5px; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; pointer-events: auto; transition: opacity .6s; }
html[data-variant="atrium"] .my-clock:hover, html[data-variant="atrium"] .my-clock:focus-visible { color: var(--a-ink); border-color: var(--a-line-2); }
html[data-variant="atrium"] .my-clock.paused { opacity: .5; }
html[data-variant="atrium"] .my-clock.off { padding: 0 8px; }
html[data-variant="atrium"] .my-clock.off .mc-t { display: none; }
html[data-variant="atrium"] #nav .my-clock.side { display: none; }
@media (min-width: 1100px) {
  html[data-variant="atrium"] #nav .my-clock.side { display: inline-flex; align-self: flex-end; position: relative; z-index: 1; height: 37px; margin: -38px 6px 1px 0; padding: 0 8px; font-size: 12px; }
  html[data-variant="atrium"] .read-bar .my-clock { display: none; }
}
html[data-variant="atrium"] .read-bar .my-clock { flex: none; align-self: center; }
html[data-variant="atrium"] .read-bar:not(.quiz-bar) .my-clock { margin-left: auto; }
html[data-variant="atrium"] .read-bar.quiz-bar .my-clock { align-self: center; margin-right: 6px; height: 34px; background: var(--a-glass-strong); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: var(--a-glass-brd); }
@media (max-width: 900px) { html[data-variant="atrium"] .read-bar .my-clock { height: 30px; padding: 0 8px; font-size: 12px; } }
/* 과제 화면: 단추 줄이 라틴 캡션 줄 오른쪽에 겹쳐 앉는다. 시계 몫만큼 캡션을 더 비켜 둔다 */
html[data-variant="atrium"] .read-bar.quiz-bar:has(.my-clock) + h1.page::before { padding-right: 236px; }
/* 촬영용(가이드 그림)·인쇄에서는 흐르는 시계를 뺀다 */
body.demo-shot .my-clock { display: none !important; }
@media print { .my-clock { display: none !important; } }

/* ── 책 읽기 도구줄 단추 한 벌 (2026-10-16) ──
   넓은 화면의 '목차 접기'는 흰 알약, 글자 크기는 흰 네모, 좁은 화면 목차 단추는 각진 흰 칸이라 셋이 따로 놀았다.
   넓은 화면(바탕 위에 떠 있다): 유리 알약 + 옅은 그림자. 좁은 화면(이미 유리 띠 안에 있다): 띠 안의 옅은 칩, 그림자 없음.
   글자 크기 두 단추는 한 알약 안의 칸으로 묶는다(폰은 원래 그랬다). 높이는 세 단추를 맞춘다: 넓은 화면 42px */
html[data-variant="atrium"] body[data-route="read"] .read-bar:not(.quiz-bar) :is(.toc-fold, .toc-toggle),
html[data-variant="atrium"] body[data-route="read"] .read-bar:not(.quiz-bar) .read-size {
  border: 1px solid var(--a-glass-brd); border-radius: 12px; background: var(--a-glass-strong);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--a-sh-card); }
html[data-variant="atrium"] body[data-route="read"] .read-bar:not(.quiz-bar) .read-size { box-sizing: border-box; align-items: center; gap: 2px; padding: 3px; }
@media (min-width: 901px) { html[data-variant="atrium"] body[data-route="read"] .read-bar:not(.quiz-bar) .read-size { height: 42px; } }
html[data-variant="atrium"] body[data-route="read"] .read-bar:not(.quiz-bar) .read-size button {
  min-width: 40px; min-height: 0; height: 34px; white-space: nowrap; border: 0; border-radius: 9px; background: transparent; color: var(--a-ink-2); transition: background .2s, color .2s; }
html[data-variant="atrium"] body[data-route="read"] .read-bar:not(.quiz-bar) .read-size button:not(:disabled):hover { background: rgba(var(--a-deep-rgb), .08); color: var(--a-deep); }
html[data-variant="atrium"] body[data-route="read"] .read-bar .toc-fold {
  gap: 8px; height: 42px; min-height: 0; padding: 0 16px 0 13px; white-space: nowrap; color: var(--a-ink-2); font-size: 13.5px; font-weight: 600; transition: color .2s, border-color .2s; }
html[data-variant="atrium"] body[data-route="read"] .read-bar .toc-fold:hover { color: var(--a-deep); border-color: var(--a-line-2); }
html[data-variant="atrium"] .toc-fold .tf-ic { flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; }
html[data-variant="atrium"] .toc-fold[aria-expanded="false"] .tf-col { fill: currentColor; fill-opacity: .18; }   /* 접힌 동안은 그림의 왼쪽 칸을 채워 '닫힌 기둥'으로 */
/* 좁은 화면 목차 단추 — '☰ 목차'는 꺾이거나 잘리지 않는 한 덩어리로 두고, 장 이름만 말줄임으로 줄인다 */
html[data-variant="atrium"] body[data-route="read"] .read-bar .toc-toggle {
  align-items: center; gap: 6px; padding: 0 14px; color: var(--a-ink); font-size: 14px; font-weight: 600; text-align: left; }
html[data-variant="atrium"] .toc-toggle .tt-k { flex: none; white-space: nowrap; }
html[data-variant="atrium"] .toc-toggle .tt-t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--a-ink-2); font-weight: 500; }
@media (max-width: 900px) {
  html[data-variant="atrium"] body[data-route="read"] .read-bar:not(.quiz-bar) :is(.toc-toggle, .read-size) {
    background: rgba(var(--a-deep-rgb), .045); border-color: var(--a-line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-variant="atrium"] body[data-route="read"] .read-bar:not(.quiz-bar) .read-size button { height: 40px; }   /* 손가락으로 누르는 자리 — 칸까지 48px */
  html[data-variant="atrium"] body[data-route="read"] .read-bar .toc-toggle { display: flex; }   /* 넓은 화면에서는 style.css 가 숨긴다 */
}
/* 폰: 펼친 뒤 붙는 안내(장을 고르면 바로 이동해요)는 자리가 없어 늘 잘렸다. 폰에서는 '✕ 목차 접기'만 */
@media (max-width: 600px) { html[data-variant="atrium"] .toc-toggle .tt-h { display: none; } }

/* 목차 기둥(넓은 화면 250px)의 장마다 '내가 읽은 시간' — 장 이름 칸이 116px 안팎이라 '1시간 6분' 같은 값이면
   '내가 읽은 / 시간', '1시간 / 6분'으로 두 줄씩 꺾여 장 사이 간격이 들쭉날쭉했다 (2026-10-16 점검: 901px 이상 전부).
   이름표는 같은 시계 그림을 단 맨 위 합계 줄이 이미 말해 준다 — 기둥 안에서는 그림 + 값만 보이고, 이름표는 화면 읽기용으로 남긴다.
   좁은 화면에서 펼치는 목차 판은 폭이 넉넉해 이름표까지 다 보인다 */
html[data-variant="atrium"] .toc .toc-my { white-space: nowrap; }
/* 다크에서 펼친 목차 판이 비쳤다 — 다크 규칙(.toc·.book 86% 바탕)이 판의 불투명 바탕(--a-sheet)을 덮어 뒤 본문 글자가 목록 사이로 보였다 */
html[data-variant="atrium"][data-theme="dark"] body[data-route="read"] .toc.open { background: var(--a-sheet) !important; }
@media (prefers-color-scheme: dark) { html[data-variant="atrium"]:not([data-theme]) body[data-route="read"] .toc.open { background: var(--a-sheet) !important; } }
@media (min-width: 901px) {
  html[data-variant="atrium"] .toc .toc-my .mt-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/*<atrium-dark>*/
/* 자동 생성 — pilot/tools/make_atrium_dark.py 가 tools/atrium_dark_src.css 에서 넣는다. 여기를 손으로 고치지 않는다. */
html[data-variant="atrium"][data-theme="dark"] {
  --a-deep: #e8e3d8; --a-deep-rgb: 232,227,216;
  --a-forest: #cfc8b8; --a-sage: #aaa498; --a-mist: rgba(232,227,216,.14); --a-ivory: #12110f;
  --a-cream: #221f1a; --a-sheet: #1a1815; --a-white: #1f1c18;
  --a-ink: #e8e3d8; --a-ink-2: #c4bfb4; --a-ink-3: #a29d93; --a-ink-4: #a29d93;
  --a-line: rgba(232,227,216,.12); --a-line-2: rgba(232,227,216,.2); --a-line-3: rgba(232,227,216,.34);
  --a-gold: #c9a862; --a-gold-line: rgba(201,168,98,.26);
  --a-sh-paper: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.4), 0 18px 36px -24px rgba(0,0,0,.8);
  --a-sh-card: 0 1px 2px rgba(0,0,0,.35), 0 6px 14px -10px rgba(0,0,0,.6);
  --a-sh-lift: 0 2px 4px rgba(0,0,0,.4), 0 12px 22px -12px rgba(0,0,0,.7);
  --a-sh-float: 0 1px 2px rgba(0,0,0,.4), 0 14px 32px -16px rgba(0,0,0,.75);
  --a-glass: rgba(30,27,23,.66); --a-glass-strong: rgba(30,27,23,.9); --a-glass-brd: rgba(232,227,216,.12);
  --c-page-rgb: 15,15,14; --c-brand-rgb: 232,227,216;
  color-scheme: dark;
}


html[data-variant="atrium"][data-theme="dark"] body {
  background-color: #12110f !important;
  background-image:
    radial-gradient(140% 100% at 50% 45%, transparent 62%, rgba(0,0,0,.28) 100%),
    linear-gradient(rgba(18,17,15,.08), rgba(18,17,15,.08)),
    url("../assets/art/rosette_bg_dark.webp") !important;
  color: var(--a-ink);
}


html[data-variant="atrium"][data-theme="dark"] #nav a:hover { background: rgba(255,255,255,.05); }
html[data-variant="atrium"][data-theme="dark"] #nav a.active { background: rgba(255,255,255,.09) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.06) !important; }
html[data-variant="atrium"][data-theme="dark"] .topbar .exam-cur,
html[data-variant="atrium"][data-theme="dark"] .topbar > :is(.theme-btn, .mob-btn) { background: rgba(255,255,255,.04); color: var(--a-ink-2); }
html[data-variant="atrium"][data-theme="dark"] .topbar { box-shadow: 0 0 0 1px rgba(0,0,0,.4), var(--a-sh-float); }
html[data-variant="atrium"][data-theme="dark"] .at-sfoot .bar { background: rgba(232,227,216,.12); }
html[data-variant="atrium"][data-theme="dark"] .at-sfoot .bar i { background: var(--a-gold); }


html[data-variant="atrium"][data-theme="dark"] .btn:not(.ghost):not(:disabled) { color: #111110 !important; box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 6px 14px -8px rgba(0,0,0,.7) !important; }
html[data-variant="atrium"][data-theme="dark"] .btn:not(.ghost):not(:disabled):hover { background: #ffffff !important; }
html[data-variant="atrium"][data-theme="dark"] .btn.ghost:hover { background: rgba(255,255,255,.05); }
html[data-variant="atrium"][data-theme="dark"] body[data-route="course"] .stage:hover { background: rgba(255,255,255,.03) !important; }
html[data-variant="atrium"][data-theme="dark"] body[data-route="course"] .stage.next .num { color: #111110 !important; }
html[data-variant="atrium"][data-theme="dark"] body[data-route="course"] .stage.next { box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 30px -18px rgba(0,0,0,.8) !important; border-color: rgba(232,227,216,.3) !important; }
html[data-variant="atrium"][data-theme="dark"] .vol-cell.current { background: #22211e !important; border-color: rgba(232,227,216,.45) !important;
  box-shadow: 1px 1px 0 #2a2925, 2px 2px 0 rgba(232,227,216,.14), 3px 3px 0 #2a2925, 4px 4px 0 rgba(232,227,216,.14), 10px 14px 22px -12px rgba(0,0,0,.8) !important; }
html[data-variant="atrium"][data-theme="dark"] .vol-cell.current::before { border-color: rgba(232,227,216,.18); }
html[data-variant="atrium"][data-theme="dark"] .vol-cell { background: rgba(255,255,255,.03) !important; border-color: rgba(232,227,216,.1) !important; }
html[data-variant="atrium"][data-theme="dark"] .vol-cell.complete { background: rgba(232,227,216,.1) !important; color: var(--a-ink) !important; }
html[data-variant="atrium"][data-theme="dark"] .status-line .st-dot { background: var(--a-gold) !important; box-shadow: 0 0 0 4px rgba(201,168,98,.16); }


html[data-variant="atrium"][data-theme="dark"] :is(textarea, input[type="text"], input[type="number"], select) { background-color: #121211 !important; color: var(--a-ink) !important; border-color: var(--a-line-2) !important; }
html[data-variant="atrium"][data-theme="dark"] :is(textarea, input[type="text"], input[type="number"], select):focus { background-color: #141413 !important; border-color: var(--a-gold) !important; box-shadow: 0 0 0 3px rgba(201,168,98,.16); }
html[data-variant="atrium"][data-theme="dark"] :is(.sentence-card, .passage) { background: #131312 !important; color: var(--a-ink) !important; }
html[data-variant="atrium"][data-theme="dark"] .grade.ok { background: rgba(232,227,216,.07); border-color: rgba(232,227,216,.3); }
html[data-variant="atrium"][data-theme="dark"] .grade.bad { background: rgba(217,138,94,.07); border-color: rgba(217,138,94,.4); }
html[data-variant="atrium"][data-theme="dark"] .exam-choices label.on { background: rgba(232,227,216,.1); outline-color: rgba(232,227,216,.4); }


html[data-variant="atrium"][data-theme="dark"] .ment .who::before { background-image: url("../assets/logo/nubi_mark_dark.png") !important; }


@media (min-width: 601px) {   
html[data-variant="atrium"][data-theme="dark"] body[data-route="home"] .gl-row { background: radial-gradient(120% 100% at 50% 100%, rgba(30,29,27,.95) 0%, rgba(22,22,21,.6) 42%, rgba(22,22,21,0) 74%); }
html[data-variant="atrium"][data-theme="dark"] body[data-route="home"] .gl-row::after { background: linear-gradient(90deg, transparent, rgba(201,168,98,.3) 18%, rgba(201,168,98,.3) 82%, transparent); }
html[data-variant="atrium"][data-theme="dark"] body[data-route="home"] .gl-stat .gtile { background: rgba(28,28,26,.82) !important; border-color: rgba(232,227,216,.12) !important; }
html[data-variant="atrium"][data-theme="dark"] body[data-route="home"] .gl-stat .gtile.on { background: #22211e !important; border-color: rgba(201,168,98,.55) !important;
  box-shadow: 1px 1px 0 #2a2925, 2px 2px 0 rgba(232,227,216,.12), 3px 3px 0 #2a2925, 4px 4px 0 rgba(232,227,216,.12) !important; }
html[data-variant="atrium"][data-theme="dark"] body[data-route="home"] .gl-stat .gtile.on .gt-name { color: var(--a-gold); }
}
html[data-variant="atrium"][data-theme="dark"] body:is([data-route="home"], [data-route="programs"], [data-route="program"]) .track-card { background: rgba(26,23,19,.55) !important; border-color: rgba(232,227,216,.12) !important; }
html[data-variant="atrium"][data-theme="dark"] body:is([data-route="home"], [data-route="programs"], [data-route="program"]) .track-card::before { mix-blend-mode: normal; opacity: .08 !important; }
html[data-variant="atrium"][data-theme="dark"] body[data-route="home"] .fp-rule { border-color: rgba(201,168,98,.35) !important; }
html[data-variant="atrium"][data-theme="dark"] .card.settings { background: rgba(255,255,255,.02); }


html[data-variant="atrium"][data-theme="dark"] .guide-toggle { background: rgba(255,255,255,.04); }
html[data-variant="atrium"][data-theme="dark"] .gt-btn.active { background: #262522 !important; box-shadow: 0 1px 3px rgba(0,0,0,.5) !important; }


html[data-variant="atrium"][data-theme="dark"] body[data-route="read"] :is(.toc, .book) { background: rgba(26,23,19,.86) !important; border-color: rgba(232,227,216,.12) !important; }
html[data-variant="atrium"][data-theme="dark"] .toc a.active { background: rgba(255,255,255,.06) !important; }


html[data-variant="atrium"][data-theme="dark"] .at-book .cv { background: #1e1d1a; border-color: rgba(232,227,216,.3);
  box-shadow: 1px 1px 0 #2a2925, 2px 2px 0 rgba(232,227,216,.14), 3px 3px 0 #2a2925, 4px 4px 0 rgba(232,227,216,.14), 5px 5px 0 #2a2925, 6px 6px 0 rgba(232,227,216,.14), 18px 22px 34px -16px rgba(0,0,0,.85); }
html[data-variant="atrium"][data-theme="dark"] .at-book .cv .art { filter: invert(1) grayscale(1) brightness(.72) contrast(.85); }
html[data-variant="atrium"][data-theme="dark"] .at-book .cv::after { border-color: rgba(201,168,98,.35); outline-color: rgba(232,227,216,.18); }
html[data-variant="atrium"][data-theme="dark"] .at-book .lab { background: #1a1917; border-top-color: rgba(232,227,216,.2); }


html[data-variant="atrium"][data-theme="dark"] .cb-b { background: #1c1c1a; color: var(--a-ink); }
html[data-variant="atrium"][data-theme="dark"] .cb-msg.me .cb-b { color: #111110; }
html[data-variant="atrium"][data-theme="dark"] .svc-login input { background: rgba(255,255,255,.05) !important; color: var(--a-ink); }
html[data-variant="atrium"][data-theme="dark"] .svc-login button:not(.ghost):first-of-type { color: #111110; }
html[data-variant="atrium"][data-theme="dark"] .cb-btn:hover { background: #262522; }


html[data-variant="atrium"][data-theme="dark"] body:is([data-route="course"], [data-route="task"], [data-route="quiz"], [data-route="commentary"], [data-route="notes"], [data-route="guide"], [data-route="notice"], [data-route="column"], [data-route="feedback"], [data-route="me"], [data-route="export"], [data-route="admin"]) #app > .wrap,
html[data-variant="atrium"][data-theme="dark"] body[data-route="home"] .home-hero {
  background: rgba(26,23,19,.52) !important; border-color: rgba(232,227,216,.14) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-variant="atrium"][data-theme="dark"] #app :is(.card, .ment, .read-guide, .vol-plan, .chapter-note, .guide-eg, .review-band, .status-line):not(.stage) { background-color: rgba(255,248,236,.035) !important; border-color: rgba(232,227,216,.14) !important; }
html[data-variant="atrium"][data-theme="dark"] details.mfold { background: rgba(255,248,236,.035) !important; border-color: rgba(232,227,216,.14) !important; }
html[data-variant="atrium"][data-theme="dark"] .topbar { background: rgba(26,23,19,.6) !important; border-color: rgba(232,227,216,.1) !important; }


html[data-variant="atrium"][data-theme="dark"] .myans { background: rgba(232,227,216,.05); border-color: rgba(232,227,216,.16); }
html[data-variant="atrium"][data-theme="dark"] .g1-group.g21-sub { background: rgba(232,227,216,.05); }


html[data-variant="atrium"][data-theme="dark"] .sb-bn img { filter: brightness(.9); }
@media (prefers-color-scheme: dark) {
  html[data-variant="atrium"]:not([data-theme]) {
    --a-deep: #e8e3d8; --a-deep-rgb: 232,227,216;
    --a-forest: #cfc8b8; --a-sage: #aaa498; --a-mist: rgba(232,227,216,.14); --a-ivory: #12110f;
    --a-cream: #221f1a; --a-sheet: #1a1815; --a-white: #1f1c18;
    --a-ink: #e8e3d8; --a-ink-2: #c4bfb4; --a-ink-3: #a29d93; --a-ink-4: #a29d93;
    --a-line: rgba(232,227,216,.12); --a-line-2: rgba(232,227,216,.2); --a-line-3: rgba(232,227,216,.34);
    --a-gold: #c9a862; --a-gold-line: rgba(201,168,98,.26);
    --a-sh-paper: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.4), 0 18px 36px -24px rgba(0,0,0,.8);
    --a-sh-card: 0 1px 2px rgba(0,0,0,.35), 0 6px 14px -10px rgba(0,0,0,.6);
    --a-sh-lift: 0 2px 4px rgba(0,0,0,.4), 0 12px 22px -12px rgba(0,0,0,.7);
    --a-sh-float: 0 1px 2px rgba(0,0,0,.4), 0 14px 32px -16px rgba(0,0,0,.75);
    --a-glass: rgba(30,27,23,.66); --a-glass-strong: rgba(30,27,23,.9); --a-glass-brd: rgba(232,227,216,.12);
    --c-page-rgb: 15,15,14; --c-brand-rgb: 232,227,216;
    color-scheme: dark;
  }
  
  
  html[data-variant="atrium"]:not([data-theme]) body {
    background-color: #12110f !important;
    background-image:
      radial-gradient(140% 100% at 50% 45%, transparent 62%, rgba(0,0,0,.28) 100%),
      linear-gradient(rgba(18,17,15,.08), rgba(18,17,15,.08)),
      url("../assets/art/rosette_bg_dark.webp") !important;
    color: var(--a-ink);
  }
  
  
  html[data-variant="atrium"]:not([data-theme]) #nav a:hover { background: rgba(255,255,255,.05); }
  html[data-variant="atrium"]:not([data-theme]) #nav a.active { background: rgba(255,255,255,.09) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.06) !important; }
  html[data-variant="atrium"]:not([data-theme]) .topbar .exam-cur,
  html[data-variant="atrium"]:not([data-theme]) .topbar > :is(.theme-btn, .mob-btn) { background: rgba(255,255,255,.04); color: var(--a-ink-2); }
  html[data-variant="atrium"]:not([data-theme]) .topbar { box-shadow: 0 0 0 1px rgba(0,0,0,.4), var(--a-sh-float); }
  html[data-variant="atrium"]:not([data-theme]) .at-sfoot .bar { background: rgba(232,227,216,.12); }
  html[data-variant="atrium"]:not([data-theme]) .at-sfoot .bar i { background: var(--a-gold); }
  
  
  html[data-variant="atrium"]:not([data-theme]) .btn:not(.ghost):not(:disabled) { color: #111110 !important; box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 6px 14px -8px rgba(0,0,0,.7) !important; }
  html[data-variant="atrium"]:not([data-theme]) .btn:not(.ghost):not(:disabled):hover { background: #ffffff !important; }
  html[data-variant="atrium"]:not([data-theme]) .btn.ghost:hover { background: rgba(255,255,255,.05); }
  html[data-variant="atrium"]:not([data-theme]) body[data-route="course"] .stage:hover { background: rgba(255,255,255,.03) !important; }
  html[data-variant="atrium"]:not([data-theme]) body[data-route="course"] .stage.next .num { color: #111110 !important; }
  html[data-variant="atrium"]:not([data-theme]) body[data-route="course"] .stage.next { box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 30px -18px rgba(0,0,0,.8) !important; border-color: rgba(232,227,216,.3) !important; }
  html[data-variant="atrium"]:not([data-theme]) .vol-cell.current { background: #22211e !important; border-color: rgba(232,227,216,.45) !important;
    box-shadow: 1px 1px 0 #2a2925, 2px 2px 0 rgba(232,227,216,.14), 3px 3px 0 #2a2925, 4px 4px 0 rgba(232,227,216,.14), 10px 14px 22px -12px rgba(0,0,0,.8) !important; }
  html[data-variant="atrium"]:not([data-theme]) .vol-cell.current::before { border-color: rgba(232,227,216,.18); }
  html[data-variant="atrium"]:not([data-theme]) .vol-cell { background: rgba(255,255,255,.03) !important; border-color: rgba(232,227,216,.1) !important; }
  html[data-variant="atrium"]:not([data-theme]) .vol-cell.complete { background: rgba(232,227,216,.1) !important; color: var(--a-ink) !important; }
  html[data-variant="atrium"]:not([data-theme]) .status-line .st-dot { background: var(--a-gold) !important; box-shadow: 0 0 0 4px rgba(201,168,98,.16); }
  
  
  html[data-variant="atrium"]:not([data-theme]) :is(textarea, input[type="text"], input[type="number"], select) { background-color: #121211 !important; color: var(--a-ink) !important; border-color: var(--a-line-2) !important; }
  html[data-variant="atrium"]:not([data-theme]) :is(textarea, input[type="text"], input[type="number"], select):focus { background-color: #141413 !important; border-color: var(--a-gold) !important; box-shadow: 0 0 0 3px rgba(201,168,98,.16); }
  html[data-variant="atrium"]:not([data-theme]) :is(.sentence-card, .passage) { background: #131312 !important; color: var(--a-ink) !important; }
  html[data-variant="atrium"]:not([data-theme]) .grade.ok { background: rgba(232,227,216,.07); border-color: rgba(232,227,216,.3); }
  html[data-variant="atrium"]:not([data-theme]) .grade.bad { background: rgba(217,138,94,.07); border-color: rgba(217,138,94,.4); }
  html[data-variant="atrium"]:not([data-theme]) .exam-choices label.on { background: rgba(232,227,216,.1); outline-color: rgba(232,227,216,.4); }
  
  
  html[data-variant="atrium"]:not([data-theme]) .ment .who::before { background-image: url("../assets/logo/nubi_mark_dark.png") !important; }
  
  
  @media (min-width: 601px) {   
  html[data-variant="atrium"]:not([data-theme]) body[data-route="home"] .gl-row { background: radial-gradient(120% 100% at 50% 100%, rgba(30,29,27,.95) 0%, rgba(22,22,21,.6) 42%, rgba(22,22,21,0) 74%); }
  html[data-variant="atrium"]:not([data-theme]) body[data-route="home"] .gl-row::after { background: linear-gradient(90deg, transparent, rgba(201,168,98,.3) 18%, rgba(201,168,98,.3) 82%, transparent); }
  html[data-variant="atrium"]:not([data-theme]) body[data-route="home"] .gl-stat .gtile { background: rgba(28,28,26,.82) !important; border-color: rgba(232,227,216,.12) !important; }
  html[data-variant="atrium"]:not([data-theme]) body[data-route="home"] .gl-stat .gtile.on { background: #22211e !important; border-color: rgba(201,168,98,.55) !important;
    box-shadow: 1px 1px 0 #2a2925, 2px 2px 0 rgba(232,227,216,.12), 3px 3px 0 #2a2925, 4px 4px 0 rgba(232,227,216,.12) !important; }
  html[data-variant="atrium"]:not([data-theme]) body[data-route="home"] .gl-stat .gtile.on .gt-name { color: var(--a-gold); }
  }
  html[data-variant="atrium"]:not([data-theme]) body:is([data-route="home"], [data-route="programs"], [data-route="program"]) .track-card { background: rgba(26,23,19,.55) !important; border-color: rgba(232,227,216,.12) !important; }
  html[data-variant="atrium"]:not([data-theme]) body:is([data-route="home"], [data-route="programs"], [data-route="program"]) .track-card::before { mix-blend-mode: normal; opacity: .08 !important; }
  html[data-variant="atrium"]:not([data-theme]) body[data-route="home"] .fp-rule { border-color: rgba(201,168,98,.35) !important; }
  html[data-variant="atrium"]:not([data-theme]) .card.settings { background: rgba(255,255,255,.02); }
  
  
  html[data-variant="atrium"]:not([data-theme]) .guide-toggle { background: rgba(255,255,255,.04); }
  html[data-variant="atrium"]:not([data-theme]) .gt-btn.active { background: #262522 !important; box-shadow: 0 1px 3px rgba(0,0,0,.5) !important; }
  
  
  html[data-variant="atrium"]:not([data-theme]) body[data-route="read"] :is(.toc, .book) { background: rgba(26,23,19,.86) !important; border-color: rgba(232,227,216,.12) !important; }
  html[data-variant="atrium"]:not([data-theme]) .toc a.active { background: rgba(255,255,255,.06) !important; }
  
  
  html[data-variant="atrium"]:not([data-theme]) .at-book .cv { background: #1e1d1a; border-color: rgba(232,227,216,.3);
    box-shadow: 1px 1px 0 #2a2925, 2px 2px 0 rgba(232,227,216,.14), 3px 3px 0 #2a2925, 4px 4px 0 rgba(232,227,216,.14), 5px 5px 0 #2a2925, 6px 6px 0 rgba(232,227,216,.14), 18px 22px 34px -16px rgba(0,0,0,.85); }
  html[data-variant="atrium"]:not([data-theme]) .at-book .cv .art { filter: invert(1) grayscale(1) brightness(.72) contrast(.85); }
  html[data-variant="atrium"]:not([data-theme]) .at-book .cv::after { border-color: rgba(201,168,98,.35); outline-color: rgba(232,227,216,.18); }
  html[data-variant="atrium"]:not([data-theme]) .at-book .lab { background: #1a1917; border-top-color: rgba(232,227,216,.2); }
  
  
  html[data-variant="atrium"]:not([data-theme]) .cb-b { background: #1c1c1a; color: var(--a-ink); }
  html[data-variant="atrium"]:not([data-theme]) .cb-msg.me .cb-b { color: #111110; }
  html[data-variant="atrium"]:not([data-theme]) .svc-login input { background: rgba(255,255,255,.05) !important; color: var(--a-ink); }
  html[data-variant="atrium"]:not([data-theme]) .svc-login button:not(.ghost):first-of-type { color: #111110; }
  html[data-variant="atrium"]:not([data-theme]) .cb-btn:hover { background: #262522; }
  
  
  html[data-variant="atrium"]:not([data-theme]) body:is([data-route="course"], [data-route="task"], [data-route="quiz"], [data-route="commentary"], [data-route="notes"], [data-route="guide"], [data-route="notice"], [data-route="column"], [data-route="feedback"], [data-route="me"], [data-route="export"], [data-route="admin"]) #app > .wrap,
  html[data-variant="atrium"]:not([data-theme]) body[data-route="home"] .home-hero {
    background: rgba(26,23,19,.52) !important; border-color: rgba(232,227,216,.14) !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html[data-variant="atrium"]:not([data-theme]) #app :is(.card, .ment, .read-guide, .vol-plan, .chapter-note, .guide-eg, .review-band, .status-line):not(.stage) { background-color: rgba(255,248,236,.035) !important; border-color: rgba(232,227,216,.14) !important; }
  html[data-variant="atrium"]:not([data-theme]) details.mfold { background: rgba(255,248,236,.035) !important; border-color: rgba(232,227,216,.14) !important; }
  html[data-variant="atrium"]:not([data-theme]) .topbar { background: rgba(26,23,19,.6) !important; border-color: rgba(232,227,216,.1) !important; }
  
  
  html[data-variant="atrium"]:not([data-theme]) .myans { background: rgba(232,227,216,.05); border-color: rgba(232,227,216,.16); }
  html[data-variant="atrium"]:not([data-theme]) .g1-group.g21-sub { background: rgba(232,227,216,.05); }
  
  
  html[data-variant="atrium"]:not([data-theme]) .sb-bn img { filter: brightness(.9); }
}
/*</atrium-dark>*/