/* =====================================================================
   ThingsOne — design system (tokens + components)
   Warm neutral canvas · single signal-blue accent · GSAP/Lenis motion
   ===================================================================== */

/* ── Pretendard Variable · unicode-range 분할 서브셋 (2026-08-13) ───────────────
   예전에는 PretendardVariable.woff2 한 덩어리(2,057,688B)를 **모든 페이지가 매번** 받았다.
   페이지 전송량의 절반 이상이 이 한 파일이었고, 공유호스팅 일 트래픽 한도를 가장 먼저 먹었다.

   지금은 unicode-range 로 쪼개 브라우저가 **화면에 실제로 나온 글자가 든 조각만** 받는다.
   - Pretendard-ko0  : 이 사이트가 지금 쓰는 문자 전부(한글 888자 + 라틴·문장부호 + 자모).
                       평소 방문은 이것 하나(228,104B = 원본의 11.1%)로 끝난다.
   - Pretendard-ko1..ko9 : 나머지 현대 한글 10,284자.
   - Pretendard-misc : 그 외(라틴 확장·기호 등).

   ★'쓰는 글자만 남기는' 정적 서브셋은 쓰지 않았다. 관리자가 공지·제품명에 새 글자를 쓰는 순간
     두부(□)가 뜨기 때문이다. 이 방식은 현대 한글 11,172자를 전부 담고 있어 그런 일이 없다 —
     드문 음절이 나오면 해당 조각이 그때 자동으로 내려온다.
   ★원본 통짜 파일은 assets/fonts/_backup/ 에 보관. 되돌리려면 이 블록을 예전 한 줄로 바꾸면 된다.
   ※생성 스크립트: _devonly/font_build.py (pyftsubset) — 재생성 시 이 블록도 함께 갱신할 것.
   ───────────────────────────────────────────────────────────────────────────── */
@font-face{font-family:"Pretendard";src:url("../fonts/Pretendard-ko0.woff2") format("woff2-variations");font-weight:45 920;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+1EBF,U+1EC7,U+2010-2027,U+2032-2033,U+203A-203B,U+2060,U+20A9,U+20AC,U+2103,U+2113,U+2116,U+2190-2194,U+2197,U+21D2,U+2212,U+2248,U+2264-2265,U+2460-2469,U+25A1,U+25B6,U+25C0,U+2605,U+26A0,U+2713,U+3000-3003,U+3008-3011,U+3014-301F,U+3131-3164,U+318D,U+321C,U+338F,U+3396-3397,U+339C-339E,U+33A1,U+AC00-AC01,U+AC04,U+AC07-AC08,U+AC10-AC12,U+AC14-AC16,U+AC19,U+AC1C-AC1D,U+AC24,U+AC2C,U+AC30-AC31,U+AC70-AC71,U+AC74,U+AC77-AC78,U+AC80-AC81,U+AC83,U+AC8C,U+ACA0,U+ACA8-ACA9,U+ACAC,U+ACB0,U+ACB8-ACB9,U+ACBC-ACBD,U+ACC1,U+ACC4,U+ACE0,U+ACE4,U+ACE7-ACE8,U+ACF3,U+ACF5,U+ACFC,U+AD00,U+AD04,U+AD11,U+AD18,U+AD34,U+AD50,U+AD6C-AD6D,U+AD70,U+AD73-AD75,U+AD7F,U+AD81,U+AD8C,U+ADA4,U+ADC0,U+ADDC,U+ADE0,U+ADF8,U+ADFC,U+AE00,U+AE08-AE09,U+AE0B,U+AE30,U+AE34,U+AE38,U+AE40-AE41,U+AE43,U+AE4A,U+AE4C,U+AE4E,U+AE50,U+AE54,U+AE5C,U+AE65,U+AE68,U+AE7C,U+AEBC,U+AEBE,U+AED8,U+AEF4,U+AF2C-AF2D,U+AF34,U+AF42,U+AF49,U+AFB8,U+AFBC,U+AFC0,U+AFC8-AFC9,U+AFD4,U+AFE8,U+B00C,U+B010,U+B014,U+B01D,U+B044,U+B04A,U+B04C,U+B054,U+B05D,U+B07C,U+B08C,U+B098-B099,U+B09C,U+B0A0,U+B0A8-B0A9,U+B0AB-B0AE,U+B0B1,U+B0B4,U+B0B8,U+B0C5,U+B0C8-B0C9,U+B0E5,U+B108-B109,U+B10C,U+B110,U+B113,U+B118,U+B123-B124,U+B137,U+B141,U+B144,U+B150,U+B155,U+B178,U+B17C,U+B180,U+B192-B194,U+B204,U+B208,U+B20C,U+B214-B215,U+B220,U+B25C,U+B274,U+B290,U+B294,U+B298,U+B2A5-B2A6,U+B2C8,U+B2CC,U+B2D8-B2D9,U+B2E4-B2E5,U+B2E8,U+B2EB-B2EC,U+B2F4-B2F5,U+B2F7,U+B2F9,U+B2FF-B300,U+B354-B355,U+B358,U+B35C,U+B364,U+B367,U+B369,U+B36E,U+B370-B371,U+B378,U+B383,U+B3C4-B3C5,U+B3C8,U+B3CC,U+B3D9,U+B3FC,U+B410,U+B418,U+B41C,U+B420,U+B428-B429,U+B450,U+B454,U+B458,U+B465,U+B46C,U+B480,U+B4A4,U+B4B7,U+B4DC-B4DD,U+B4E0,U+B4E4,U+B4EC-B4ED,U+B4EF,U+B4F1,U+B514,U+B518,U+B529,U+B530-B531,U+B54C,U+B5A0,U+B5A4,U+B5A8,U+B5BB-B5BC,U+B610-B611,U+B6AB,U+B6B1,U+B6F0,U+B6F4,U+B728,U+B72C,U+B739,U+B73B,U+B744,U+B760,U+B775,U+B77C-B77D,U+B780,U+B78C-B78D,U+B790-B791,U+B798-B799,U+B79C,U+B7A8-B7A9,U+B7AB-B7AC,U+B7B5,U+B7C9,U+B7EC-B7ED,U+B7F0,U+B7F4,U+B7FC-B7FD,U+B800,U+B807-B809,U+B80C,U+B824-B825,U+B828,U+B82C,U+B834-B835,U+B838-B839,U+B840,U+B85C-B85D,U+B860,U+B864,U+B86C-B86D,U+B86F,U+B871,U+B8B0,U+B8CC,U+B8E8,U+B8F8-B8F9,U+B958,U+B95C,U+B960,U+B974,U+B978,U+B97C,U+B984-B985,U+B9AC-B9AD,U+B9B0,U+B9B4,U+B9BC-B9BD,U+B9BF,U+B9C1,U+B9C8-B9C9,U+B9CC,U+B9CE,U+B9D0,U+B9D8,U+B9DD-B9DE,U+B9E1,U+B9E4-B9E5,U+B9E8,U+B9F5,U+BA38-BA39,U+BA3C,U+BA40,U+BA48,U+BA4B,U+BA4D,U+BA54,U+BA64,U+BA70,U+BA74,U+BA78,U+BA85,U+BA87,U+BAA8-BAA9,U+BAAB,U+BAB0,U+BABB,U+BB34,U+BB36,U+BB38,U+BB3B-BB3C,U+BB49,U+BB50,U+BB54,U+BBAC,U+BBC0,U+BBF8,U+BBFC,U+BBFF-BC00,U+BC0B,U+BC0F,U+BC11,U+BC14-BC16,U+BC18,U+BC1B-BC1D,U+BC24,U+BC29,U+BC30-BC31,U+BC34,U+BC38,U+BC43,U+BC84,U+BC88,U+BC8C,U+BC94-BC95,U+BC97,U+BCA0,U+BCA4,U+BCA8,U+BCBC-BCBD,U+BCC0,U+BCC4,U+BCCD,U+BCD1,U+BCF4-BCF5,U+BCF8,U+BCFC,U+BD05,U+BD07,U+BD09,U+BD10,U+BD24,U+BD80-BD81,U+BD84,U+BD88,U+BD93,U+BD95,U+BD99,U+BDF0,U+BE0C,U+BE14,U+BE44-BE45,U+BE48,U+BE4C,U+BE59,U+BE5B,U+BE60-BE61,U+BE68,U+BE7C,U+BE80,U+BE90,U+BED4,U+BF51,U+BFD0,U+C058,U+C090,U+C0AC-C0AD,U+C0B0,U+C0B4,U+C0BC-C0BD,U+C0C0-C0C1,U+C0C8-C0C9,U+C0CC,U+C0DD,U+C0F7,U+C11C-C11E,U+C120,U+C124,U+C12D,U+C131,U+C138-C139,U+C13C,U+C140,U+C14B,U+C154,U+C158,U+C15C,U+C168,U+C178,U+C18C-C18D,U+C190,U+C194,U+C19F,U+C1A1,U+C1C4,U+C1FC,U+C218,U+C21C,U+C220,U+C228,U+C22B,U+C26C,U+C27C-C27D,U+C2A4,U+C2AC,U+C2B5,U+C2B7,U+C2B9,U+C2DC-C2DD,U+C2E0,U+C2E3-C2E4,U+C2EC-C2ED,U+C2F1,U+C2F6,U+C2F8,U+C30D,U+C313,U+C368,U+C378,U+C3D8-C3D9,U+C3DF-C3E0,U+C4F0,U+C4F4,U+C4F8,U+C501,U+C50C,U+C528-C529,U+C52C,U+C539,U+C53D,U+C544-C545,U+C548-C54A,U+C54C,U+C554-C555,U+C558-C559,U+C55E,U+C560-C561,U+C564,U+C571,U+C574-C575,U+C57C-C57D,U+C587,U+C591,U+C598,U+C5B4-C5B5,U+C5B8-C5B9,U+C5BB-C5BC,U+C5C4-C5C9,U+C5D0-C5D1,U+C5D4,U+C5E0,U+C5E3,U+C5EC-C5ED,U+C5F0,U+C5F4,U+C5FC,U+C600-C601,U+C606,U+C608,U+C61B,U+C624,U+C628,U+C62C,U+C62E,U+C633-C635,U+C640,U+C644,U+C654-C655,U+C65C,U+C678,U+C67C,U+C694,U+C6A9,U+C6B0-C6B1,U+C6B4,U+C6B8,U+C6C0,U+C6C3,U+C6CC,U+C6D0,U+C6D4,U+C6E0,U+C6E8,U+C6F9,U+C704,U+C708,U+C717,U+C720-C721,U+C724,U+C728,U+C73C,U+C740,U+C744,U+C74C,U+C751,U+C758,U+C774,U+C778,U+C77C-C77D,U+C783-C785,U+C787-C78A,U+C790-C791,U+C794,U+C798,U+C7A0-C7A1,U+C7A5-C7A6,U+C7AC,U+C7C1,U+C800-C801,U+C804,U+C808,U+C810-C811,U+C815,U+C81C-C81D,U+C82F,U+C838,U+C84C,U+C870-C871,U+C874,U+C881,U+C885,U+C88B-C88C,U+C8E0,U+C8FC-C8FD,U+C900,U+C904,U+C90C-C90D,U+C911,U+C918,U+C92C,U+C988-C989,U+C998,U+C99D,U+C9C0-C9C1,U+C9C4,U+C9C8,U+C9D0-C9D1,U+C9D3,U+C9D5,U+C9DA,U+C9DC-C9DD,U+C9E7,U+C9F8,U+CA61,U+CABC-CABD,U+CB49,U+CBE4,U+CC0C-CC0D,U+CC22,U+CC28-CC29,U+CC2C,U+CC30,U+CC38,U+CC3D-CC3E,U+CC44-CC45,U+CC48,U+CC4C-CC4D,U+CC55,U+CC59,U+CC98,U+CC9C,U+CCA8-CCA9,U+CCAB,U+CCAD,U+CCB4,U+CCD0,U+CCE4,U+CD08-CD09,U+CD1D,U+CD2C,U+CD5C,U+CD94-CD95,U+CD98,U+CD9C,U+CDA4,U+CDA9,U+CDB0,U+CDC4,U+CDCC,U+CDE8,U+CE20-CE21,U+CE35,U+CE58-CE59,U+CE5C,U+CE60,U+CE68-CE69,U+CE6D,U+CE74,U+CE78,U+CE90,U+CE94,U+CEA0-CEA1,U+CEE4,U+CEE8,U+CEEC,U+CEF4,U+CEF7,U+CF00,U+CF13,U+CF1C,U+CF20,U+CF2C,U+CF30,U+CF54,U+CF58,U+CF5C,U+CF64,U+CFE0,U+CFFC,U+D034,U+D06C,U+D070,U+D074,U+D07C-D07D,U+D0A4,U+D0A8,U+D0AC,U+D0B4-D0B5,U+D0B7,U+D0B9,U+D0C0-D0C1,U+D0C8,U+D0D3-D0D5,U+D0DC-D0DD,U+D0E0,U+D0ED,U+D0EF,U+D130,U+D134,U+D138,U+D140,U+D14C-D14D,U+D150,U+D15C,U+D1A0,U+D1A4,U+D1A8,U+D1B1,U+D1B5,U+D22C-D22D,U+D248,U+D280,U+D284,U+D290,U+D295,U+D29C,U+D2B8-D2B9,U+D2BC,U+D2C0,U+D2C8,U+D2F0-D2F1,U+D2F4,U+D2F8,U+D300-D301,U+D305,U+D30C,U+D30E,U+D310,U+D314,U+D321,U+D328-D329,U+D32C,U+D338,U+D37C,U+D38C,U+D398-D399,U+D39C,U+D3AB,U+D3B4,U+D3B8,U+D3BC,U+D3C9,U+D3D0,U+D3EC-D3ED,U+D3F0,U+D3F4,U+D3FC,U+D45C,U+D478,U+D480,U+D488,U+D48D,U+D4E8,U+D504,U+D508,U+D50C,U+D514,U+D53C-D53D,U+D540,U+D544,U+D551,U+D558-D559,U+D55C,U+D560,U+D568-D569,U+D56D,U+D574-D575,U+D578,U+D584,U+D588-D589,U+D5A5,U+D5C8,U+D5D8,U+D5DB,U+D5E4,U+D5EC,U+D5F7,U+D600,U+D604,U+D611,U+D614-D615,U+D638-D639,U+D63C,U+D640,U+D648,U+D654-D655,U+D658,U+D65C,U+D669,U+D68C-D68D,U+D6A1,U+D6A8,U+D6C4,U+D6C8,U+D6D1,U+D6D4,U+D6E8,U+D720,U+D734,U+D750,U+D754,U+D758,U+D761,U+D76C,U+D770,U+D788,U+D78C,U+D790,U+D798,U+D7A3,U+FF01-FF60}
@font-face{font-family:"Pretendard";src:url("../fonts/Pretendard-ko1.woff2") format("woff2-variations");font-weight:45 920;font-style:normal;font-display:swap;unicode-range:U+AC02-AC03,U+AC05-AC06,U+AC09-AC0F,U+AC13,U+AC17-AC18,U+AC1A-AC1B,U+AC1E-AC23,U+AC25-AC2B,U+AC2D-AC2F,U+AC32-AC6F,U+AC72-AC73,U+AC75-AC76,U+AC79-AC7F,U+AC82,U+AC84-AC8B,U+AC8D-AC9F,U+ACA1-ACA7,U+ACAA-ACAB,U+ACAD-ACAF,U+ACB1-ACB7,U+ACBA-ACBB,U+ACBE-ACC0,U+ACC2-ACC3,U+ACC5-ACDF,U+ACE1-ACE3,U+ACE5-ACE6,U+ACE9-ACF2,U+ACF4,U+ACF6-ACFB,U+ACFD-ACFF,U+AD01-AD03,U+AD05-AD10,U+AD12-AD17,U+AD19-AD33,U+AD35-AD4F,U+AD51-AD6B,U+AD6E-AD6F,U+AD71-AD72,U+AD76-AD7E,U+AD80,U+AD82-AD8B,U+AD8D-ADA3,U+ADA5-ADBF,U+ADC1-ADDB,U+ADDD-ADDF,U+ADE1-ADF7,U+ADF9-ADFB,U+ADFD-ADFF,U+AE01-AE07,U+AE0A,U+AE0C-AE2F,U+AE31-AE33,U+AE35-AE37,U+AE39-AE3F,U+AE42,U+AE44-AE49,U+AE4B,U+AE4D,U+AE4F,U+AE51-AE53,U+AE55-AE5B,U+AE5D-AE64,U+AE66-AE67,U+AE69-AE7B,U+AE7D-AEBB,U+AEBD,U+AEBF-AED7,U+AED9-AEF3,U+AEF5-AF2B,U+AF2E-AF33,U+AF35-AF41,U+AF43-AF48,U+AF4A-AFB7,U+AFB9-AFBB,U+AFBD-AFBF,U+AFC1-AFC7,U+AFCA-AFD3,U+AFD5-AFE7,U+AFE9-B00B,U+B00D-B00F,U+B011-B013,U+B015-B01C,U+B01E-B043,U+B045-B049,U+B04B,U+B04D-B053,U+B055-B05C,U+B05E-B07B,U+B07D-B08B,U+B08D-B097,U+B09A-B09B,U+B09D-B09F,U+B0A1-B0A7,U+B0AA,U+B0AF-B0B0,U+B0B2-B0B3,U+B0B5-B0B7,U+B0B9-B0C4,U+B0C6-B0C7,U+B0CA-B0E4,U+B0E6-B107,U+B10A-B10B,U+B10D-B10F,U+B111-B112,U+B114-B117,U+B119-B122,U+B125-B136,U+B138-B139}
@font-face{font-family:"Pretendard";src:url("../fonts/Pretendard-ko2.woff2") format("woff2-variations");font-weight:45 920;font-style:normal;font-display:swap;unicode-range:U+B13A-B140,U+B142-B143,U+B145-B14F,U+B151-B154,U+B156-B177,U+B179-B17B,U+B17D-B17F,U+B181-B191,U+B195-B203,U+B205-B207,U+B209-B20B,U+B20D-B213,U+B216-B21F,U+B221-B25B,U+B25D-B273,U+B275-B28F,U+B291-B293,U+B295-B297,U+B299-B2A4,U+B2A7-B2C7,U+B2C9-B2CB,U+B2CD-B2D7,U+B2DA-B2E3,U+B2E6-B2E7,U+B2E9-B2EA,U+B2ED-B2F3,U+B2F6,U+B2F8,U+B2FA-B2FE,U+B301-B353,U+B356-B357,U+B359-B35B,U+B35D-B363,U+B365-B366,U+B368,U+B36A-B36D,U+B36F,U+B372-B377,U+B379-B382,U+B384-B3C3,U+B3C6-B3C7,U+B3C9-B3CB,U+B3CD-B3D8,U+B3DA-B3FB,U+B3FD-B40F,U+B411-B417,U+B419-B41B,U+B41D-B41F,U+B421-B427,U+B42A-B44F,U+B451-B453,U+B455-B457,U+B459-B464,U+B466-B46B,U+B46D-B47F,U+B481-B4A3,U+B4A5-B4B6,U+B4B8-B4DB,U+B4DE-B4DF,U+B4E1-B4E3,U+B4E5-B4EB,U+B4EE,U+B4F0,U+B4F2-B513,U+B515-B517,U+B519-B528,U+B52A-B52F,U+B532-B54B,U+B54D-B59F,U+B5A1-B5A3,U+B5A5-B5A7,U+B5A9-B5BA,U+B5BD-B60F,U+B612-B644}
@font-face{font-family:"Pretendard";src:url("../fonts/Pretendard-ko3.woff2") format("woff2-variations");font-weight:45 920;font-style:normal;font-display:swap;unicode-range:U+B645-B6AA,U+B6AC-B6B0,U+B6B2-B6EF,U+B6F1-B6F3,U+B6F5-B727,U+B729-B72B,U+B72D-B738,U+B73A,U+B73C-B743,U+B745-B75F,U+B761-B774,U+B776-B77B,U+B77E-B77F,U+B781-B78B,U+B78E-B78F,U+B792-B797,U+B79A-B79B,U+B79D-B7A7,U+B7AA,U+B7AD-B7B4,U+B7B6-B7C8,U+B7CA-B7EB,U+B7EE-B7EF,U+B7F1-B7F3,U+B7F5-B7FB,U+B7FE-B7FF,U+B801-B806,U+B80A-B80B,U+B80D-B823,U+B826-B827,U+B829-B82B,U+B82D-B833,U+B836-B837,U+B83A-B83F,U+B841-B85B,U+B85E-B85F,U+B861-B863,U+B865-B86B,U+B86E,U+B870,U+B872-B8AF,U+B8B1-B8CB,U+B8CD-B8E7,U+B8E9-B8F7,U+B8FA-B957,U+B959-B95B,U+B95D-B95F,U+B961-B973,U+B975-B977,U+B979-B97B,U+B97D-B983,U+B986-B9AB,U+B9AE-B9AF,U+B9B1-B9B3,U+B9B5-B9BB,U+B9BE,U+B9C0,U+B9C2-B9C7,U+B9CA-B9CB,U+B9CD,U+B9CF,U+B9D1-B9D7,U+B9D9-B9DC,U+B9DF-B9E0,U+B9E2-B9E3,U+B9E6-B9E7,U+B9E9-B9F4,U+B9F6-BA37,U+BA3A-BA3B,U+BA3D-BA3F,U+BA41-BA47,U+BA49-BA4A,U+BA4C,U+BA4E-BA53,U+BA55-BA63,U+BA65-BA6F,U+BA71-BA73,U+BA75-BA77,U+BA79-BA84,U+BA86,U+BA88-BAA7,U+BAAA,U+BAAC-BAAF,U+BAB1-BABA,U+BABC-BB33,U+BB35,U+BB37,U+BB39-BB3A,U+BB3D-BB48,U+BB4A-BB4F,U+BB51-BB53,U+BB55-BB68}
@font-face{font-family:"Pretendard";src:url("../fonts/Pretendard-ko4.woff2") format("woff2-variations");font-weight:45 920;font-style:normal;font-display:swap;unicode-range:U+BB69-BBAB,U+BBAD-BBBF,U+BBC1-BBF7,U+BBF9-BBFB,U+BBFD-BBFE,U+BC01-BC0A,U+BC0C-BC0E,U+BC10,U+BC12-BC13,U+BC17,U+BC19-BC1A,U+BC1E-BC23,U+BC25-BC28,U+BC2A-BC2F,U+BC32-BC33,U+BC35-BC37,U+BC39-BC42,U+BC44-BC83,U+BC85-BC87,U+BC89-BC8B,U+BC8D-BC93,U+BC96,U+BC98-BC9F,U+BCA1-BCA3,U+BCA5-BCA7,U+BCA9-BCBB,U+BCBE-BCBF,U+BCC1-BCC3,U+BCC5-BCCC,U+BCCE-BCD0,U+BCD2-BCF3,U+BCF6-BCF7,U+BCF9-BCFB,U+BCFD-BD04,U+BD06,U+BD08,U+BD0A-BD0F,U+BD11-BD23,U+BD25-BD7F,U+BD82-BD83,U+BD85-BD87,U+BD89-BD92,U+BD94,U+BD96-BD98,U+BD9A-BDEF,U+BDF1-BE0B,U+BE0D-BE13,U+BE15-BE43,U+BE46-BE47,U+BE49-BE4B,U+BE4D-BE58,U+BE5A,U+BE5C-BE5F,U+BE62-BE67,U+BE69-BE7B,U+BE7D-BE7F,U+BE81-BE8F,U+BE91-BED3,U+BED5-BF50,U+BF52-BFCF,U+BFD1-C057,U+C059-C061}
@font-face{font-family:"Pretendard";src:url("../fonts/Pretendard-ko5.woff2") format("woff2-variations");font-weight:45 920;font-style:normal;font-display:swap;unicode-range:U+C062-C08F,U+C091-C0AB,U+C0AE-C0AF,U+C0B1-C0B3,U+C0B5-C0BB,U+C0BE-C0BF,U+C0C2-C0C7,U+C0CA-C0CB,U+C0CD-C0DC,U+C0DE-C0F6,U+C0F8-C11B,U+C11F,U+C121-C123,U+C125-C12C,U+C12E-C130,U+C132-C137,U+C13A-C13B,U+C13D-C13F,U+C141-C14A,U+C14C-C153,U+C155-C157,U+C159-C15B,U+C15D-C167,U+C169-C177,U+C179-C18B,U+C18E-C18F,U+C191-C193,U+C195-C19E,U+C1A0,U+C1A2-C1C3,U+C1C5-C1FB,U+C1FD-C217,U+C219-C21B,U+C21D-C21F,U+C221-C227,U+C229-C22A,U+C22C-C26B,U+C26D-C27B,U+C27E-C2A3,U+C2A5-C2AB,U+C2AD-C2B4,U+C2B6,U+C2B8,U+C2BA-C2DB,U+C2DE-C2DF,U+C2E1-C2E2,U+C2E5-C2EB,U+C2EE-C2F0,U+C2F2-C2F5,U+C2F7,U+C2F9-C30C,U+C30E-C312,U+C314-C367,U+C369-C377,U+C379-C3D7,U+C3DA-C3DE,U+C3E1-C4EF,U+C4F1-C4F3,U+C4F5-C4F7,U+C4F9-C500,U+C502-C50B,U+C50D-C527,U+C52A-C52B,U+C52D-C538,U+C53A-C53C,U+C53E-C543,U+C546-C547,U+C54B,U+C54D-C553,U+C556-C557,U+C55A-C55D,U+C55F,U+C562-C563,U+C565-C56F}
@font-face{font-family:"Pretendard";src:url("../fonts/Pretendard-ko6.woff2") format("woff2-variations");font-weight:45 920;font-style:normal;font-display:swap;unicode-range:U+C570,U+C572-C573,U+C576-C57B,U+C57E-C586,U+C588-C590,U+C592-C597,U+C599-C5B3,U+C5B6-C5B7,U+C5BA,U+C5BD-C5C3,U+C5CA-C5CF,U+C5D2-C5D3,U+C5D5-C5DF,U+C5E1-C5E2,U+C5E4-C5EB,U+C5EE-C5EF,U+C5F1-C5F3,U+C5F5-C5FB,U+C5FD-C5FF,U+C602-C605,U+C607,U+C609-C61A,U+C61C-C623,U+C625-C627,U+C629-C62B,U+C62D,U+C62F-C632,U+C636-C63F,U+C641-C643,U+C645-C653,U+C656-C65B,U+C65D-C677,U+C679-C67B,U+C67D-C693,U+C695-C6A8,U+C6AA-C6AF,U+C6B2-C6B3,U+C6B5-C6B7,U+C6B9-C6BF,U+C6C1-C6C2,U+C6C4-C6CB,U+C6CD-C6CF,U+C6D1-C6D3,U+C6D5-C6DF,U+C6E1-C6E7,U+C6E9-C6F8,U+C6FA-C703,U+C705-C707,U+C709-C716,U+C718-C71F,U+C722-C723,U+C725-C727,U+C729-C73B,U+C73D-C73F,U+C741-C743,U+C745-C74B,U+C74D-C750,U+C752-C757,U+C759-C773,U+C775-C777,U+C779-C77B,U+C77E-C782,U+C786,U+C78B-C78F,U+C792-C793,U+C795-C797,U+C799-C79F,U+C7A2-C7A4,U+C7A7-C7AB,U+C7AD-C7C0,U+C7C2-C7FF,U+C802-C803,U+C805-C807,U+C809-C80F,U+C812-C814,U+C816-C81B,U+C81E-C82E,U+C830-C837,U+C839-C84B,U+C84D-C86F,U+C872-C873,U+C875-C880,U+C882-C884,U+C886-C88A,U+C88D-C8DF,U+C8E1-C8FB,U+C8FE-C8FF,U+C901-C903,U+C905-C90B,U+C90E-C910,U+C912-C917,U+C919-C92B,U+C92D-C987,U+C98A-C997,U+C999-C99C,U+C99E-C9BF,U+C9C2-C9C3,U+C9C5-C9C7,U+C9C9-C9CF,U+C9D2,U+C9D4,U+C9D6-C9D9,U+C9DB,U+C9DE-C9E6,U+C9E8-C9F7,U+C9F9-CA60,U+CA62-CAAF}
@font-face{font-family:"Pretendard";src:url("../fonts/Pretendard-ko7.woff2") format("woff2-variations");font-weight:45 920;font-style:normal;font-display:swap;unicode-range:U+CAB0-CABB,U+CABE-CB48,U+CB4A-CBE3,U+CBE5-CC0B,U+CC0E-CC21,U+CC23-CC27,U+CC2A-CC2B,U+CC2D-CC2F,U+CC31-CC37,U+CC39-CC3C,U+CC3F-CC43,U+CC46-CC47,U+CC49-CC4B,U+CC4E-CC54,U+CC56-CC58,U+CC5A-CC97,U+CC99-CC9B,U+CC9D-CCA7,U+CCAA,U+CCAC,U+CCAE-CCB3,U+CCB5-CCCF,U+CCD1-CCE3,U+CCE5-CD07,U+CD0A-CD1C,U+CD1E-CD2B,U+CD2D-CD5B,U+CD5D-CD93,U+CD96-CD97,U+CD99-CD9B,U+CD9D-CDA3,U+CDA5-CDA8,U+CDAA-CDAF,U+CDB1-CDC3,U+CDC5-CDCB,U+CDCD-CDE7,U+CDE9-CE1F,U+CE22-CE34,U+CE36-CE57,U+CE5A-CE5B,U+CE5D-CE5F,U+CE61-CE67,U+CE6A-CE6C,U+CE6E-CE73,U+CE75-CE77,U+CE79-CE8F,U+CE91-CE93,U+CE95-CE9F,U+CEA2-CEE3,U+CEE5-CEE7,U+CEE9-CEEB,U+CEED-CEF3,U+CEF5-CEF6,U+CEF8-CEFF,U+CF01-CF12,U+CF14-CF1B,U+CF1D-CF1F,U+CF21-CF2B,U+CF2D-CF2F,U+CF31-CF53,U+CF55-CF57,U+CF59-CF5B,U+CF5D-CF63,U+CF65-CFAB}
@font-face{font-family:"Pretendard";src:url("../fonts/Pretendard-ko8.woff2") format("woff2-variations");font-weight:45 920;font-style:normal;font-display:swap;unicode-range:U+CFAC-CFDF,U+CFE1-CFFB,U+CFFD-D033,U+D035-D06B,U+D06D-D06F,U+D071-D073,U+D075-D07B,U+D07E-D0A3,U+D0A5-D0A7,U+D0A9-D0AB,U+D0AD-D0B3,U+D0B6,U+D0B8,U+D0BA-D0BF,U+D0C2-D0C7,U+D0C9-D0D2,U+D0D6-D0DB,U+D0DE-D0DF,U+D0E1-D0EC,U+D0EE,U+D0F0-D12F,U+D131-D133,U+D135-D137,U+D139-D13F,U+D141-D14B,U+D14E-D14F,U+D151-D15B,U+D15D-D19F,U+D1A1-D1A3,U+D1A5-D1A7,U+D1A9-D1B0,U+D1B2-D1B4,U+D1B6-D22B,U+D22E-D247,U+D249-D27F,U+D281-D283,U+D285-D28F,U+D291-D294,U+D296-D29B,U+D29D-D2B7,U+D2BA-D2BB,U+D2BD-D2BF,U+D2C1-D2C7,U+D2C9-D2EF,U+D2F2-D2F3,U+D2F5-D2F7,U+D2F9-D2FF,U+D302-D304,U+D306-D30B,U+D30D,U+D30F,U+D311-D313,U+D315-D320,U+D322-D327,U+D32A-D32B,U+D32D-D337,U+D339-D37B,U+D37D-D38B,U+D38D-D397,U+D39A-D39B,U+D39D-D3AA,U+D3AC-D3B3,U+D3B5-D3B7,U+D3B9-D3BB,U+D3BD-D3C8,U+D3CA-D3CF,U+D3D1-D3EB,U+D3EE-D3EF,U+D3F1-D3F3,U+D3F5-D3FB,U+D3FD-D45B,U+D45D-D477,U+D479-D47F,U+D481-D487,U+D489-D48C,U+D48E-D4B4}
@font-face{font-family:"Pretendard";src:url("../fonts/Pretendard-ko9.woff2") format("woff2-variations");font-weight:45 920;font-style:normal;font-display:swap;unicode-range:U+D4B5-D4E7,U+D4E9-D503,U+D505-D507,U+D509-D50B,U+D50D-D513,U+D515-D53B,U+D53E-D53F,U+D541-D543,U+D545-D550,U+D552-D557,U+D55A-D55B,U+D55D-D55F,U+D561-D567,U+D56A-D56C,U+D56E-D573,U+D576-D577,U+D579-D583,U+D585-D587,U+D58A-D5A4,U+D5A6-D5C7,U+D5C9-D5D7,U+D5D9-D5DA,U+D5DC-D5E3,U+D5E5-D5EB,U+D5ED-D5F6,U+D5F8-D5FF,U+D601-D603,U+D605-D610,U+D612-D613,U+D616-D637,U+D63A-D63B,U+D63D-D63F,U+D641-D647,U+D649-D653,U+D656-D657,U+D659-D65B,U+D65D-D668,U+D66A-D68B,U+D68E-D6A0,U+D6A2-D6A7,U+D6A9-D6C3,U+D6C5-D6C7,U+D6C9-D6D0,U+D6D2-D6D3,U+D6D5-D6E7,U+D6E9-D71F,U+D721-D733,U+D735-D74F,U+D751-D753,U+D755-D757,U+D759-D760,U+D762-D76B,U+D76D-D76F,U+D771-D787,U+D789-D78B,U+D78D-D78F,U+D791-D797,U+D799-D7A2}
@font-face{font-family:"Pretendard";src:url("../fonts/Pretendard-misc.woff2") format("woff2-variations");font-weight:45 920;font-style:normal;font-display:swap;unicode-range:U+0100-0148,U+014A-01C3,U+01C5-031E,U+0321-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03E1,U+03F0-049D,U+04A0-04FF,U+052F,U+0E3F,U+1D43,U+1D47-1D49,U+1D4D,U+1D4F-1D50,U+1D52,U+1D56-1D58,U+1D5B,U+1D62-1D65,U+1D9C,U+1DA0,U+1DBB,U+1DBF-1DF5,U+1DFC-1EBE,U+1EC0-1EC6,U+1EC8-1F15,U+1F18-1F1D,U+1F20-1F45,U+1F48-1F4D,U+1F50-1F57,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7D,U+1F80-1FB4,U+1FB6-1FC4,U+1FC6-1FD3,U+1FD6-1FDB,U+1FDD-1FEF,U+1FF2-1FF4,U+1FF6-1FFE,U+2000-200D,U+202F-2031,U+2034-2039,U+203C-205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20A0-20A8,U+20AA-20AB,U+20AD-20BF,U+20DB-20DE,U+20E8,U+20F0,U+2100-2101,U+2105-2106,U+2109,U+2117,U+211E-2123,U+2126,U+212A-212B,U+212E,U+2132,U+213B,U+214D,U+214F,U+2153,U+215A-2188,U+2195-2196,U+2198-2199,U+21A9-21AA,U+21B0-21B1,U+21B3-21B5,U+21BA-21BB,U+21D0,U+21D4,U+21DE-21DF,U+21E4-21E5,U+21E7,U+21EA,U+2202,U+2205-2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2260,U+226A-226B,U+22EF,U+2303,U+2305,U+2318,U+2325-2327,U+2329-232B,U+2380,U+2387,U+238B,U+23CE-23CF,U+2423,U+246A-2473,U+24B6-24CF,U+24EA-24F4,U+24FF,U+25A0,U+25A2,U+25AA,U+25B2-25B3,U+25B7,U+25BA-25BD,U+25C1,U+25C4-25C7,U+25CA-25CB,U+25CF,U+25E6,U+25EF,U+2600,U+2606,U+263C,U+2661,U+2665,U+266A,U+2717,U+2756,U+2776-2789,U+27EF,U+27F5-27FA,U+2985-2986,U+2B06,U+2B12-2B13,U+2B1C,U+2C7C,U+2C7F,U+2DFF,U+2E18,U+3041-3094,U+3099-309E,U+30A1-30FE,U+3380-3384,U+3388-338E,U+3390-3395,U+3398-339B,U+339F-33A0,U+33A2-33CA,U+33CF-33D0,U+33D3,U+33D6,U+33D8,U+33DB-33DD,U+A69F,U+A7FF,U+A92E,U+E000,U+E002-E05E,U+E06A-E080,U+E093-E096,U+E0A5-E0E6,U+E0F3-E11C,U+E11E-E12A,U+E131-E147,U+E14E-E164,U+EE01-EE05,U+F000-F057,U+F6C3,U+FE20-FE2D,U+FEFF,U+FFA1-FFBE,U+FFC2-FFC7,U+FFCA-FFCF,U+FFD2-FFD7,U+FFDA-FFDC,U+FFE0-FFE1,U+FFE5-FFE6,U+1F10B,U+1F12F-1F149,U+1F150-1F16B,U+1F170-1F189,U+1F850,U+1F852,U+F0000-F0002}

:root{
  /* color */
  --canvas:#F7F6F3;
  --ink-muted:#5B6068;
  --hairline:color-mix(in srgb, #1C1E22 12%, transparent);
  --hairline-strong:color-mix(in srgb, #1C1E22 20%, transparent);
  --accent:#0E7CFF;
  --accent-deep:#0A5AD6;
  --warn:#E23A1E;
  --night:#14161A;
  --night-2:#0E1013;
  --cream:#FFFCF4;
  --cream-muted:color-mix(in srgb, #FFFCF4 60%, transparent);
  --hairline-dark:color-mix(in srgb, #FFFFFF 16%, transparent);

  /* type */
  --sans:"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* easing */
  --ease-entrance:cubic-bezier(.22,1,.36,1);
  --ease-inout:cubic-bezier(.45,0,.55,1);
  --ease-emphatic:cubic-bezier(.76,0,.24,1);
  --ease-micro:cubic-bezier(.4,0,.2,1);

  --wrap:1200px;
  --header-h:76px;
  /* .cat-subnav(style.css 아래) 실측 높이 62.75px. sticky 가 복구되면서 헤더 아래를
     이만큼 더 먹으므로, 그 아래에 붙는 것들(자동화 가이드 목차·앵커 착지)이 참조한다.
     ★.cat-tab 의 padding/font-size 를 바꾸면 이 값도 같이 고칠 것. */
  --subnav-h:63px;

  /* radius · glass (7/21 통합: 완전 필 100px/999px 혼용 → --radius-pill 하나로, 글래스 blur 10/12/14 → --glass-blur 하나로. 시각 변화 없음) */
  --radius-pill:999px;
  --radius-tile:22px;   /* 카드 표준 반경(v2.css와 동일값) */
  --glass-blur:12px;
}

/* --------------------------------------------------------------- reset --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  line-height:1.65; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* ★가로 넘침은 계속 막되 body 를 '스크롤 컨테이너'로 만들지 않는다.
     responsive.css:4 의 html{overflow-x:clip} 때문에 body→뷰포트 overflow 전파가 끊긴다.
     그 상태에서 hidden 이 body 에 남으면 짝인 overflow-y:visible 이 auto 로 승격되어
     body 자신이 스크롤포트가 되는데, body 는 height:auto 라 scrollHeight==clientHeight —
     즉 '절대 스크롤되지 않는 스크롤포트'다. 그 안의 position:sticky 는 기준이 움직이지 않아
     영원히 발동하지 않는다(.cat-subnav / .ag-toc 가 전 페이지에서 죽어 있던 원인).
     실측 판별: body 에 overflow-y:scroll 을 강제하면 스크롤바가 body 에 붙어
     body.clientWidth 가 1265→1250 으로 줄었다(html 은 불변) = body 가 자기 스크롤포트.
     clip 은 스크롤박스를 만들지 않으므로 sticky 가 살아난다.
     첫 줄은 clip 미지원(Safari ≤15) 폴백 — 그 브라우저는 현행 거동 그대로 유지된다.
     같은 함정을 admin/admin.css:23 이 이미 주석으로 문서화하고 clip 으로 피해 갔다. */
  overflow-x:hidden;
  overflow-x:clip;
}
h1,h2,h3,h4,p,dl,dd,ul{margin:0}
ul{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
.mono{font-family:var(--mono);font-weight:500;letter-spacing:.02em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;width:100%}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:12px;top:12px;border-radius:8px}

/* JS-driven reveals: hidden only when JS is active AND motion is allowed */
.js [data-reveal],.js [data-splittext] .line{opacity:0}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-splittext] .line{opacity:1 !important;transform:none !important}
}

/* --------------------------------------------------------------- buttons --- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;border-radius:var(--radius-pill);font-weight:600;font-size:15px;letter-spacing:-.01em;
  border:1px solid transparent;
  white-space:nowrap;
}
/* 화살표 아이콘: 크기 고정 + 수축 금지.
   .btn 은 inline-flex 이고 이 svg 에는 width/height 속성도 CSS 규칙도 없었다. 그래서
   flex 기본값(0 1 auto)으로 수축 대상이 된 채 남아 실제로 0px 까지 짜부라져 보이지 않았다
   (1440px 실측: btn 130px, 텍스트 68px, gap 8px → svg 에 2px 만 남음).
   형제 규칙인 .btn-naver .naver-mark / .btn-arrow 와 동일한 관례로 맞춘다. */
.btn svg{width:16px;height:16px;flex:0 0 auto}
/* ★버튼이 커서에서 위로 도망가는 리프트는 쓰지 않는다(운영자 지시).
   개별 페이지에서 끄면 끄는 걸 잊은 곳이 남는다 — 전역에서 아예 없앤다.
   호버 피드백은 배경·테두리 색으로만 준다. */
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
.btn-naver{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:var(--radius-pill);
  background:#03C75A;color:#fff;font-weight:700;font-size:15px;letter-spacing:-.01em;white-space:nowrap;
  box-shadow:0 12px 28px -12px rgba(3,199,90,.55);}
.btn-naver:hover{background:#02b451;box-shadow:0 18px 40px -14px rgba(3,199,90,.65)}   /* 리프트 제거(운영자 지시) */
.btn-naver .naver-mark{width:20px;height:20px;flex:0 0 auto}
.btn-naver .btn-arrow{width:15px;height:15px;opacity:.92}

.pd-naver{margin-top:28px}

/* --------------------------------------------------------------- header --- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--header-h);
  display:flex;align-items:center;color:var(--cream);
  transition:background .4s var(--ease-micro),color .4s var(--ease-micro),box-shadow .4s var(--ease-micro),backdrop-filter .4s;
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header.scrolled{
  background:color-mix(in srgb,var(--canvas) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(var(--glass-blur));backdrop-filter:saturate(1.4) blur(var(--glass-blur));color:var(--ink);
  box-shadow:0 1px 0 var(--hairline);
}
.brand-word b{font-weight:800}
.brand-word.big{font-size:30px}
.brand .on-light{display:none}
.site-header.scrolled .brand .on-dark{display:none}
.site-header.scrolled .brand .on-light{display:block}

.gnb{display:flex;gap:34px;margin-left:auto;margin-right:auto}
.gnb-link{font-size:15px;font-weight:500;opacity:.9;position:relative;padding:4px 0}
.gnb-link::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:var(--accent);transition:right .35s var(--ease-entrance)}
.gnb-link:hover{opacity:1}
.gnb-link:hover::after{right:0}
.gnb-item{position:relative;display:flex;align-items:center}
.gnb-item>.gnb-link{display:inline-flex;align-items:center;gap:5px}
.gnb-chev{width:14px;height:14px;opacity:.55;transition:transform .3s var(--ease-micro)}
.gnb-item.has-sub:hover .gnb-chev{transform:rotate(180deg)}
/* ── GNB 메가패널 ────────────────────────────────────────────────────────────
   항목 = 라벨 + 한 줄 설명(site.json nav[].children[].desc). 제품 그룹만 카테고리 썸네일.
   --mx: 패널의 수평 정렬 기준. 가운데 정렬만 쓰면 첫/마지막 그룹이 화면 밖으로 나간다. */
.gnb-sub{position:absolute;top:100%;left:50%;--mx:-50%;transform:translateX(var(--mx)) translateY(8px);padding:10px;
  border-radius:16px;background:color-mix(in srgb,var(--night) 95%,transparent);border:1px solid var(--hairline-dark);
  box-shadow:0 30px 64px -20px rgba(0,0,0,.6);-webkit-backdrop-filter:saturate(1.3) blur(var(--glass-blur));backdrop-filter:saturate(1.3) blur(var(--glass-blur));
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .24s var(--ease-micro),transform .24s var(--ease-micro);z-index:60}
.gnb-sub.mega-start{left:0;--mx:0}
.gnb-sub.mega-end{left:auto;right:0;--mx:0}
/* 폭을 명시하지 않으면 absolute 패널이 min-content 로 쪼그라들어 설명이 세로로 무너진다 */
.gnb-sub[data-cols="1"]{width:306px}
.gnb-sub[data-cols="2"]{width:614px}
.gnb-sub.is-prod[data-cols="2"]{width:700px}
.gnb-sub{max-width:calc(100vw - 32px)}
/* 패널은 항목 기준으로 열린다 — 좁은 데스크톱에서는 폭을 줄여야 화면 밖으로 나가지 않는다
   (GNB 자체는 961px 이상에서만 노출된다) */
@media (max-width:1240px){
  .gnb-sub[data-cols="2"]{width:548px}
  .gnb-sub.is-prod[data-cols="2"]{width:600px}
}
@media (max-width:1040px){
  .gnb-sub[data-cols="2"]{width:496px}
  .gnb-sub.is-prod[data-cols="2"]{width:536px}
  .gnb-sub.is-prod .gnb-mi{grid-template-columns:40px 1fr;column-gap:10px}
  .gnb-mi-th{width:40px;height:40px}
}
.gnb-sub::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.gnb-item.has-sub:hover .gnb-sub,.gnb-item.has-sub:focus-within .gnb-sub{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(var(--mx)) translateY(2px)}
.gnb-mega{display:grid;grid-template-columns:1fr;gap:2px}
.gnb-sub[data-cols="2"] .gnb-mega{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:6px}
.gnb-mi{display:grid;grid-template-columns:1fr;align-items:start;gap:2px;padding:10px 13px;border-radius:11px;
  color:var(--cream);transition:background .2s var(--ease-micro)}
.gnb-sub.is-prod .gnb-mi{grid-template-columns:48px 1fr;column-gap:12px;align-items:center;padding:9px 12px}
.gnb-mi::after{display:none}
.gnb-mi:hover,.gnb-mi:focus-visible{background:color-mix(in srgb,#fff 9%,transparent)}
.gnb-mi-th{width:48px;height:48px;display:grid;place-items:center;border-radius:10px;
  background:color-mix(in srgb,#fff 6%,transparent);overflow:hidden}
/* ★세로로 긴 이미지가 48px 상자를 넘어(실측 48×69) 부모의 overflow:hidden 에 위아래가
   잘리고 있었다 — IP 카메라 썸네일이 머리만 남던 원인. 가로형은 우연히 맞아 티가 안 났다.
   원인은 grid 아이템의 기본 `min-height:auto`. 이것이 축소를 막아 height:100% 도
   max-height:100% 도 종횡비에 밀려 무시된다. min-*:0 을 주어야 상자 안에 들어간다.
   (전역 `img{height:auto}` 도 함께 걸려 있어 height 를 명시해야 한다) */
.gnb-mi-th img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}
.gnb-mi-x{display:flex;flex-direction:column;gap:3px;min-width:0}
.gnb-mi-t{font-size:14px;font-weight:600;line-height:1.35;color:#fff;opacity:.94;letter-spacing:-.005em}
.gnb-mi:hover .gnb-mi-t{opacity:1}
.gnb-mi-ext{font-size:11px;margin-left:5px;opacity:.6;font-weight:400}
/* 설명은 최대 3줄 — 나중에 더 긴 문구가 들어와도 패널 높이가 터지지 않게 하는 안전장치 */
.gnb-mi-d{font-size:12.5px;line-height:1.5;color:var(--cream);opacity:.56;word-break:keep-all;
  max-width:26em;font-weight:400;letter-spacing:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.gnb-mi:hover .gnb-mi-d{opacity:.72}
.gnb-mega-all{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:8px 3px 1px;padding:10px 10px 3px;border-top:1px solid var(--hairline-dark);
  font-size:12.5px;font-weight:600;color:var(--cream);opacity:.6;transition:opacity .2s}
.gnb-mega-all::after{display:none}
.gnb-mega-all span{transition:transform .24s var(--ease-micro)}
.gnb-mega-all:hover{opacity:1}

@media (prefers-reduced-motion:reduce){
  .gnb-sub{transition:opacity .01s}
  .gnb-mega-all span,.gnb-mega-all:hover span{transition:none;transform:none}
}
.drawer-sub{display:flex;flex-direction:column;gap:2px;margin:-8px 0 4px 14px;padding-left:14px;border-left:1px solid var(--hairline)}
.drawer-sub a{font-size:15px!important;font-weight:500!important;}
.header-actions{display:flex;align-items:center;gap:14px}

.nav-toggle{display:none;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.nav-toggle span{width:20px;height:1.6px;background:currentColor;transition:transform .3s var(--ease-micro),opacity .3s}

/* mobile drawer */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(82vw,340px);background:var(--night);color:var(--cream);z-index:80;transform:translateX(100%);padding:80px 30px;display:flex}
.drawer.open{transform:translateX(0)}
.drawer-close{position:absolute;top:20px;right:24px;font-size:32px;line-height:1;color:var(--cream)}
.drawer-nav{display:flex;flex-direction:column;gap:22px;width:100%}
.drawer-nav a{font-size:22px;font-weight:600}
.drawer-cta{margin-top:14px;color:var(--accent) !important}
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .4s;z-index:70}
.drawer-backdrop.show{opacity:1;visibility:visible}

/* --------------------------------------------------------------- hero --- */
.hero{
  position:relative;min-height:100svh;background:var(--night-2);color:var(--cream);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--header-h) + 40px) 0 90px;overflow:hidden;
}
.hero-headline{
  font-weight:800;letter-spacing:-.035em;line-height:1.05;
  font-size:clamp(2.5rem,5.4vw,4.6rem);margin-bottom:26px;
}
.hero-headline .line{display:block;overflow:hidden}
/* hero scroll cue removed (anti-slop) */
/* --------------------------------------------------- section helpers --- */
.section-eyebrow{display:inline-block;padding:6px 13px;margin-bottom:18px;border:1px solid var(--hairline);border-radius:var(--radius-pill);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);background:color-mix(in srgb,#fff 55%,transparent)}
.section-title{font-size:clamp(1.9rem,4vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.trust .section-eyebrow{color:var(--cream-muted);border-color:var(--hairline-dark);background:color-mix(in srgb,#fff 5%,transparent)}
.hub-visual{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.hub-name .line{display:block;overflow:hidden}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:20px}
.product-card{border:1px solid var(--hairline);border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 6px 22px rgba(20,22,26,.05),inset 0 1px 0 rgba(255,255,255,.7);}
.product-card:hover{box-shadow:0 26px 56px rgba(20,22,26,.12),inset 0 1px 0 rgba(255,255,255,.7)}
.product-thumb{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* ★세로로 긴 제품(카메라·플러그)은 max-height 에 먼저 걸려 카드 안에서 유독 작아진다.
   가로형은 max-width 72% 에 먼저 걸리므로 이 값을 올려도 영향이 없다 — 세로형만 커진다.
   4:3 컨테이너 기준 88% 여도 위아래 여백이 남는다(실측: 185px 박스에 163px). */
.product-thumb img{max-width:72%;max-height:88%;width:auto;object-fit:contain;transition:transform .5s var(--ease-entrance)}
.product-meta{padding:20px 22px 24px}
.product-axis{display:inline-block;font-size:11px;letter-spacing:.14em;color:var(--accent-ink);margin-bottom:9px}
.product-meta h3{font-size:1.12rem;font-weight:700;letter-spacing:-.02em;margin-bottom:7px}
.product-meta p{font-size:13.5px;color:var(--ink-muted);line-height:1.55}

/* --------------------------------------------------------------- footer --- */
.site-footer{background:var(--night);color:var(--cream);padding:100px 0 40px}
.foot-cta{border-bottom:1px solid var(--hairline-dark);padding-bottom:56px;margin-bottom:56px}
.foot-eyebrow{font-size:12px;letter-spacing:.2em;color:var(--cream-muted);margin-bottom:16px}
.foot-title{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.03em;margin-bottom:30px}
.buy-grid{display:flex;flex-wrap:wrap;gap:12px}
.buy-chip{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border:1px solid var(--hairline-dark);border-radius:var(--radius-pill);font-size:14.5px;font-weight:500;transition:border-color .3s,background .3s var(--ease-micro)}
.buy-chip svg{width:15px;height:15px;opacity:.6;transition:opacity .3s var(--ease-micro)}
.buy-chip:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.buy-chip:hover svg{opacity:1}
.foot-main{display:grid;gap:40px;padding-bottom:48px}
.foot-tagline{margin-top:16px;font-size:14.5px;color:var(--cream-muted);line-height:1.7}
.foot-col h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-muted);margin-bottom:18px;font-weight:600}
.foot-col a{display:block;font-size:14.5px;padding:6px 0;color:var(--cream);opacity:.85;transition:opacity .25s,color .25s}
.foot-col a:hover{opacity:1;color:var(--accent)}
.foot-contact p{font-size:14px;color:var(--cream-muted);line-height:1.7;margin-bottom:10px}
.foot-contact a{display:inline;color:var(--cream-muted)}
.foot-contact a:hover{color:var(--accent)}
/* 지원 링크(FAQ · 1:1 문의 · A/S 안내 · 게시판): 구분자 · 를 ::after 로 각 링크 상자 안에 넣고
   flex-wrap 으로 링크를 통째로 줄바꿈한다. <span>·</span> 방식은 좁은 폭(영문 푸터 ~720px)에서
   · 가 다음 줄 첫머리로 떨어졌고 WORD JOINER 로도 못 막았다(Chrome 실측) → 구조로 해결. */
.foot-links{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.5em;row-gap:2px}
.foot-links a{padding:2px 0}
.foot-links a:not(:last-child)::after{content:"\00B7";margin-left:.5em;opacity:.55}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--hairline-dark);font-size:12.5px;color:var(--cream-muted)}

/* --------------------------------------------------------------- backtop --- */
.backtop{position:fixed;right:24px;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;z-index:55;opacity:0;visibility:hidden;transform:translateY(10px);}
.backtop svg{width:20px;height:20px}
.backtop.show{opacity:1;visibility:visible;transform:none}
.backtop:hover{background:var(--accent)}

/* --------------------------------------------------------------- responsive --- */
@media (max-width:960px){
  .gnb{display:none}
  .nav-toggle{display:flex}
  .header-actions .btn-ghost{display:none}
  .hub-visual{max-width:420px;margin:0 auto}
  .foot-main{gap:32px}
  /* (제거) .foot-brand{grid-column:1/-1}
     이 구간(561~960px)의 컬럼은 cinematic.css 의 1.6fr 1.2fr 가 이긴다. 여기서 brand 를
     전폭(1/-1)으로 펼치면 유일한 콘텐츠 열(고객지원)이 아래 왼쪽 한 열로 밀려 오른쪽 1.2fr 이
     통째로 빈다(Fold 펼침 884px 실측). 브랜드│고객지원 2열 나란히로 되돌린다.
     ※ 560px 이하는 cinematic.css:316 이 1열로 접으므로 grid-column 없이도 정상. */
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  .hero-actions .btn{flex:1 1 auto;justify-content:center}
  .foot-bottom{flex-direction:column;gap:8px}
}

/* ===================== sub-page header (always solid) ===================== */
body:not(.is-home) .site-header{
  background:color-mix(in srgb,var(--canvas) 92%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(var(--glass-blur));backdrop-filter:saturate(1.4) blur(var(--glass-blur));color:var(--ink);box-shadow:0 1px 0 var(--hairline);
}
body:not(.is-home) .site-header .brand .on-dark{display:none}
body:not(.is-home) .site-header .brand .on-light{display:block}
body:not(.is-home) .gnb-sub{background:color-mix(in srgb,var(--night) 96%,transparent)}

/* ===================== product detail page ===================== */
.pd-crumb{padding-top:calc(var(--header-h) + 26px);padding-bottom:6px;background:var(--canvas)}
.pd-crumb .wrap{display:flex;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--ink-muted)}
.pd-crumb a{color:var(--ink-muted);transition:color .2s}
.pd-crumb a:hover{color:var(--accent-ink)}
.pd-crumb b{color:var(--ink);font-weight:600}
.pd-crumb span{opacity:.45}

.pd{background:var(--canvas);padding:clamp(18px,3vw,34px) 0 clamp(80px,10vw,120px)}
.pd-inner{display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(30px,4vw,64px);align-items:center;margin-bottom:clamp(48px,6vw,80px)}
.pd-media{width:100%;max-width:440px;justify-self:center}
.pd-media{position:relative;aspect-ratio:1/1;border-radius:28px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 30% 18%,rgba(14,124,255,.12),transparent 60%),linear-gradient(160deg,#f4f5f7,#e9ebee);border:1px solid var(--hairline)}
.pd-media-glow{position:absolute;left:50%;top:46%;width:70%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(14,124,255,.14),transparent 62%)}
.pd-media img{width:auto;height:50%;max-width:96%;object-fit:contain;}
.pd-info{max-width:520px}
.pd-cat{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px}
.pd-name{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.08}
.pd-model{margin-top:8px;font-size:13px;letter-spacing:.02em;color:var(--muted,#6b7280)}
.pd-tagline{margin-top:14px;font-size:clamp(1.05rem,1.6vw,1.25rem);font-weight:600;color:var(--ink)}
.pd-desc{margin-top:14px;font-size:15px;line-height:1.75;color:var(--ink-muted)}
.pd-protocols{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.pd-proto{padding:7px 14px;border:1px solid var(--hairline);border-radius:var(--radius-pill);font-size:12.5px;color:var(--ink);background:color-mix(in srgb,var(--accent) 5%,#fff)}

.pd-features{display:grid;gap:clamp(16px,2vw,24px);margin-bottom:clamp(40px,5vw,64px)}
.pd-feature{padding:28px 26px;border:1px solid var(--hairline);border-radius:18px;background:#fff}
.pd-feature-num{display:block;font-size:12px;color:var(--accent-ink);margin-bottom:14px}
.pd-feature h3{font-size:1.1rem;font-weight:700;letter-spacing:-.01em;margin-bottom:9px}
.pd-feature p{font-size:14px;line-height:1.65;color:var(--ink-muted)}

.pd-specs{margin-bottom:clamp(40px,5vw,64px)}
.pd-specs-title{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;margin-bottom:22px}
.pd-spec-list{border-top:1px solid var(--hairline)}
/* 라벨열: 고정 180px → 내용에 맞춰 최대 180px까지만. 좁은 화면에서 라벨이 억지로
   180px를 차지해 값 열을 밀어내던 문제를 없앤다. minmax(0,…)로 그리드 자식의
   min-width:auto 때문에 긴 값이 열을 밀어내는 것도 함께 차단. */
/* ★라벨 열은 고정폭이어야 한다. max-content 는 '행마다 독립 계산'이라
   행 하나하나가 자기 라벨 길이에 맞춰지고, 그래서 값(dd) 시작선이 층층이 어긋난다
   (실측 1280px 허브: dd.left 119/134/134/119/108/108 = 편차 26px, 영문은 40px).
   같은 문제를 .facts-ledger(flagship.css:367)는 이미 고정폭 clamp 로 풀어 두었다 — 기법을 맞춘다.
   기본값은 한글 기준 — 한글 라벨은 최장 50px(실측 '연결 방식'·'크기·무게')이라
   영문 기준으로 잡으면 100px 가까이 비어 값이 저 멀리 밀린다.
   영문은 라벨이 최장 133px('Charging & battery life')라 아래에서 따로 넓힌다. */
.pd-spec-row{display:grid;grid-template-columns:clamp(56px,6%,76px) minmax(0,1fr);gap:20px;padding:15px 4px;border-bottom:1px solid var(--hairline)}
/* 영문 라벨은 한글의 2.7배까지 길어진다(133px vs 50px 실측) — 데스크톱에서만 열을 넓힌다.
   ★min-width:861px 로 가둔 이유: 그 아래는 style.css 의 @media(max-width:860px) 가
     라벨 열을 120px 로 고정하고 있는데, body.lang-en(특이도 0,2,1)이 그 규칙(0,1,0)을
     이겨 버려 기존 거동이 바뀐다. 데스크톱 구간에만 적용해 충돌을 피한다. */
@media (min-width:861px){
  body.lang-en .pd-spec-row{grid-template-columns:clamp(88px,13%,150px) minmax(0,1fr)}
}
/* 라벨 열이 고정폭이 된 이상 dt 의 상한도 트랙에 맞춰야 한다.
   예전 max-width:180px 는 트랙 상한(한글 76px / 영문 150px)보다 커서,
   관리자 CMS 로 긴 라벨을 넣으면 트랙 밖으로 삐져나올 수 있었다.
   min-width:0 이 없으면 grid item 의 자동 최소 크기(min-content) 때문에 줄바꿈 대신 넘친다. */
.pd-spec-row dt{max-width:100%;min-width:0;overflow-wrap:break-word}
.pd-spec-row dt{font-size:13.5px;color:var(--ink-muted)}
.pd-spec-row dd{font-size:15px;font-weight:500;color:var(--ink)}
.pd-certs{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:22px}
.pd-certs-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin-right:4px}
.pd-cert{padding:6px 13px;border:1px solid var(--hairline);border-radius:var(--radius-pill);font-size:12px;color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 6%,#fff)}
/* 인증 약어 각주 — 운영자 요청 "작은 8 폰트". 8px 는 가독성 한계라 8pt(≈10.7px)로 잡았다. */
.pd-cert-note{margin-top:8px;font-size:8pt;line-height:1.5;color:var(--ink-muted)}

.pd-related-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px}
.pd-related-head h2{font-size:1.4rem;font-weight:800;letter-spacing:-.02em}
.pd-related-all{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--accent-ink)}
.pd-related-all svg{width:15px;height:15px}
.pd-related-rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:16px}
.pd-rel-item{border:1px solid var(--hairline);border-radius:18px;overflow:hidden;background:#fff;transition:transform .4s var(--ease-micro),box-shadow .4s}
.pd-rel-item:hover{box-shadow:0 18px 40px rgba(20,22,26,.1)}
.pd-rel-thumb{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pd-rel-thumb img{max-height:78%;}
.pd-rel-name{padding:14px 16px 4px;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.pd-rel-spec{padding:0 16px 16px;font-size:12px;color:var(--ink-muted)}

@media (max-width:860px){
  .pd-inner{grid-template-columns:1fr;gap:28px}
  .pd-media{max-width:440px;margin:0 auto;width:100%}
  .pd-features{grid-template-columns:1fr}
  .pd-spec-row{grid-template-columns:120px 1fr;gap:14px}
}

/* ===================== category landing page ===================== */
.cat-hero{position:relative;overflow:hidden;}
.cat-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(90% 80% at 82% 6%, rgba(14,124,255,.28), transparent 58%),
    radial-gradient(60% 70% at 6% 98%, rgba(127,215,238,.12), transparent 60%),
    linear-gradient(180deg,#12151c,#0c0e14)}
.cat-hero-bg::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(100% 90% at 80% 10%,#000,transparent 72%);
  mask-image:radial-gradient(100% 90% at 80% 10%,#000,transparent 72%)}
.cat-hero .wrap{position:relative;z-index:1}
.cat-crumb{display:flex;align-items:center;gap:9px;font-size:13px;margin-bottom:clamp(16px,3vw,28px)}
.cat-crumb a{transition:color .2s}
.cat-crumb b{font-weight:600}
.cat-crumb span{opacity:.4}
.cat-hero-tag{margin-top:11px;}

.cat-subnav{position:sticky;top:var(--header-h);z-index:40;background:color-mix(in srgb,var(--canvas) 92%,transparent);
  -webkit-backdrop-filter:saturate(1.3) blur(var(--glass-blur));backdrop-filter:saturate(1.3) blur(var(--glass-blur));border-bottom:1px solid var(--hairline)}
.cat-subnav-row{display:flex;gap:clamp(18px,3vw,40px);overflow-x:auto;scrollbar-width:none}
.cat-subnav-row::-webkit-scrollbar{display:none}
.cat-tab{position:relative;flex:0 0 auto;padding:18px 2px;font-size:15px;font-weight:600;color:var(--ink-muted);white-space:nowrap;transition:color .25s}
.cat-tab::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:2px;background:var(--accent);transition:right .35s var(--ease-entrance)}
.cat-tab:hover{color:var(--ink)}
.cat-tab.on{color:var(--accent-ink)}
.cat-tab.on::after{right:0}

.cat-products{background:var(--canvas);padding:clamp(18px,3vw,30px) 0 clamp(70px,10vw,120px)}
.cat-empty{padding:40px 0;color:var(--ink-muted)}
.cat-products .product-card{display:flex;flex-direction:column}
.cat-products .product-meta{flex:1;display:flex;flex-direction:column}
.prod-go{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:13.5px;font-weight:700;color:var(--accent-ink);transition:color .3s var(--ease-micro)}
.prod-go svg{width:16px;height:16px}

/* products index (lineups) */
.lineup-index{padding:clamp(44px,6vw,76px) 0 clamp(72px,10vw,120px)}

/* product detail prev/next pager */
.pd-crumb .wrap{justify-content:space-between;gap:16px}
.pd-crumb-trail{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.pd-pager{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.pd-pager-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--hairline);background:#fff;color:var(--ink);}
.pd-pager-btn:hover{border-color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 8%,#fff);color:var(--accent-ink)}
.pd-pager-btn svg{width:20px;height:20px}
@media (max-width:560px){
  .pd-crumb .wrap{flex-wrap:wrap}
}