@layer mobilefix, legacy;
/* ═══ Fonts — generated from fonts/site-fonts.css by tools/fonts-subset.py (site subset + dynamic fallback + Outfit). Do not hand-edit. ═══ */
/* ═══ CELLOGRAM web fonts — GENERATED by tools/fonts-subset.py ═══
   Paste this whole file at the top of /styles.css (urls are absolute).
   1) Pretendard dynamic subset — 92 unicode-range chunks (fallback for glyphs outside the site subset)
   2) Pretendard site subset(s) — declared LAST so they win for every code point they cover
   3) Outfit variable (latin / latin-ext)
   Pretendard: SIL OFL 1.1 © 2021 Kil Hyung-jin (fonts/pretendard/LICENSE.txt) · Outfit: SIL OFL 1.1 */

/* unicode-range of every chunk below = the exact cmap of that chunk file (regenerated by tools/fonts-subset.py).
   The upstream dynamic-subset CSS lists ~1,100 code points the font does not contain (hanja/kanji, compat
   ideographs, symbols) — a match on those only forced a useless 25–40 KB download (jp/cn banner, 中文·日本語 links). */
/* [0] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.0.woff2) format('woff2-variations');
	unicode-range: U+FF03-FF05, U+FF07, U+FF0A-FF0B, U+FF0D-FF19, U+FF1B, U+FF1D, U+FF20-FF5B, U+FF5D, U+FFE0-FFE1, U+FFE5-FFE6;
}

/* [1] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.1.woff2) format('woff2-variations');
	unicode-range: U+D723-D728, U+D72A-D733, U+D735-D748, U+D74A-D74F, U+D752-D753, U+D755-D757, U+D75A-D75F, U+D762-D764, U+D766-D768, U+D76A-D76B, U+D76D-D76F, U+D771-D787, U+D789-D78B, U+D78D-D78F, U+D791-D797, U+D79A, U+D79C, U+D79E-D7A3;
}

/* [2] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.2.woff2) format('woff2-variations');
	unicode-range: U+D679-D68B, U+D68E-D69E, U+D6A0, U+D6A2-D6A7, U+D6A9-D6C3, U+D6C6-D6C7, U+D6C9-D6CB, U+D6CD-D6D3, U+D6D5-D6D6, U+D6D8-D6E3, U+D6E5-D6E7, U+D6E9-D6FB, U+D6FD-D717, U+D719-D71F, U+D721-D722;
}

/* [3] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.3.woff2) format('woff2-variations');
	unicode-range: U+D5BC-D5C7, U+D5CA-D5CB, U+D5CD-D5CF, U+D5D1-D5D7, U+D5D9-D5DA, U+D5DC, U+D5DE-D5E3, U+D5E6-D5E7, U+D5E9-D5EB, U+D5ED-D5F6, U+D5F8, U+D5FA-D5FF, U+D602-D603, U+D605-D607, U+D609-D60F, U+D612-D613, U+D616-D61B, U+D61D-D637, U+D63A-D63B, U+D63D-D63F, U+D641-D647, U+D64A-D64C, U+D64E-D653, U+D656-D657, U+D659-D65B, U+D65D-D666, U+D668, U+D66A-D678;
}

/* [4] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.4.woff2) format('woff2-variations');
	unicode-range: U+D507, U+D509-D50B, U+D50D-D513, U+D515-D53B, U+D53E-D53F, U+D541-D543, U+D545-D54C, U+D54E, U+D550, U+D552-D557, U+D55A-D55B, U+D55D-D55F, U+D561-D564, U+D566-D567, U+D56A, U+D56C, U+D56E-D573, U+D576-D577, U+D579-D583, U+D585-D586, U+D58A-D5A4, U+D5A6-D5BB;
}

/* [5] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.5.woff2) format('woff2-variations');
	unicode-range: U+D464-D477, U+D47A-D47B, U+D47D-D47F, U+D481-D487, U+D489-D48A, U+D48C, U+D48E-D4E7, U+D4E9-D503, U+D505-D506;
}

/* [6] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.6.woff2) format('woff2-variations');
	unicode-range: U+D3BF-D3C7, U+D3CA-D3CF, U+D3D1-D3EB, U+D3EE-D3EF, U+D3F1-D3F3, U+D3F5-D3FB, U+D3FD-D400, U+D402-D45B, U+D45D-D463;
}

/* [7] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.7.woff2) format('woff2-variations');
	unicode-range: U+D2FF, U+D302-D304, U+D306-D30B, U+D30F, U+D311-D313, U+D315-D31B, U+D31E, U+D322-D324, U+D326-D327, U+D32A-D32B, U+D32D-D32F, U+D331-D337, U+D339-D33C, U+D33E-D37B, U+D37E-D37F, U+D381-D383, U+D385-D38B, U+D38E-D390, U+D392-D397, U+D39A-D39B, U+D39D-D39F, U+D3A1-D3A7, U+D3A9-D3AA, U+D3AC, U+D3AE-D3B3, U+D3B5-D3B7, U+D3B9-D3BB, U+D3BD-D3BE;
}

/* [8] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.8.woff2) format('woff2-variations');
	unicode-range: U+D257-D27F, U+D281-D29B, U+D29D-D29F, U+D2A1-D2AB, U+D2AD-D2B7, U+D2BA-D2BB, U+D2BD-D2BF, U+D2C1-D2C7, U+D2C9-D2EF, U+D2F2-D2F3, U+D2F5-D2F7, U+D2F9-D2FE;
}

/* [9] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.9.woff2) format('woff2-variations');
	unicode-range: U+D1B4, U+D1B6-D1F3, U+D1F5-D22B, U+D22E-D22F, U+D231-D233, U+D235-D23B, U+D23D-D240, U+D242-D256;
}

/* [10] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.10.woff2) format('woff2-variations');
	unicode-range: U+D105-D12F, U+D132-D133, U+D135-D137, U+D139-D13F, U+D141-D142, U+D144, U+D146-D14B, U+D14E-D14F, U+D151-D153, U+D155-D15B, U+D15E-D187, U+D189-D19F, U+D1A2-D1A3, U+D1A5-D1A7, U+D1A9-D1AF, U+D1B2-D1B3;
}

/* [11] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.11.woff2) format('woff2-variations');
	unicode-range: U+D04B-D04F, U+D051-D057, U+D059-D06B, U+D06D-D06F, U+D071-D073, U+D075-D07B, U+D07E-D0A3, U+D0A6-D0A7, U+D0A9-D0AB, U+D0AD-D0B3, U+D0B6, U+D0B8, U+D0BA-D0BF, U+D0C2-D0C3, U+D0C5-D0C7, U+D0C9-D0CF, U+D0D2, U+D0D6-D0DB, U+D0DE-D0DF, U+D0E1-D0E3, U+D0E5-D0EB, U+D0EE-D0F0, U+D0F2-D104;
}

/* [12] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.12.woff2) format('woff2-variations');
	unicode-range: U+CFA2-CFC3, U+CFC5-CFDF, U+CFE2-CFE3, U+CFE5-CFE7, U+CFE9-CFF4, U+CFF6-CFFB, U+CFFD-CFFF, U+D001-D003, U+D005-D017, U+D019-D033, U+D036-D037, U+D039-D03B, U+D03D-D04A;
}

/* [13] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.13.woff2) format('woff2-variations');
	unicode-range: U+CEF0-CEF3, U+CEF6, U+CEF9-CEFF, U+CF01-CF03, U+CF05-CF07, U+CF09-CF0F, U+CF11-CF12, U+CF14-CF1B, U+CF1D-CF1F, U+CF21-CF2F, U+CF31-CF53, U+CF56-CF57, U+CF59-CF5B, U+CF5D-CF63, U+CF66, U+CF68, U+CF6A-CF6F, U+CF71-CF84, U+CF86-CF8B, U+CF8D-CFA1;
}

/* [14] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.14.woff2) format('woff2-variations');
	unicode-range: U+CE3C-CE57, U+CE5A-CE5B, U+CE5D-CE5F, U+CE61-CE67, U+CE6A, U+CE6C, U+CE6E-CE73, U+CE76-CE77, U+CE79-CE7B, U+CE7D-CE83, U+CE85-CE88, U+CE8A-CE8F, U+CE91-CE93, U+CE95-CE97, U+CE99-CE9F, U+CEA2, U+CEA4-CEAB, U+CEAD-CEE3, U+CEE6-CEE7, U+CEE9-CEEB, U+CEED-CEEF;
}

/* [15] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.15.woff2) format('woff2-variations');
	unicode-range: U+CD92-CD93, U+CD96-CD97, U+CD99-CD9B, U+CD9D-CDA3, U+CDA6-CDA8, U+CDAA-CDAF, U+CDB1-CDC3, U+CDC5-CDCB, U+CDCD-CDE7, U+CDE9-CE03, U+CE05-CE1F, U+CE22-CE34, U+CE36-CE3B;
}

/* [16] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.16.woff2) format('woff2-variations');
	unicode-range: U+CCEF-CD07, U+CD0A-CD0B, U+CD0D-CD1A, U+CD1C, U+CD1E-CD2B, U+CD2D-CD5B, U+CD5D-CD77, U+CD79-CD91;
}

/* [17] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.17.woff2) format('woff2-variations');
	unicode-range: U+CC3F-CC43, U+CC46-CC47, U+CC49-CC4B, U+CC4D-CC53, U+CC55-CC58, U+CC5A-CC5F, U+CC61-CC97, U+CC9A-CC9B, U+CC9D-CC9F, U+CCA1-CCA7, U+CCAA, U+CCAC, U+CCAE-CCB3, U+CCB6-CCB7, U+CCB9-CCBB, U+CCBD-CCCF, U+CCD1-CCE3, U+CCE5-CCEE;
}

/* [18] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.18.woff2) format('woff2-variations');
	unicode-range: U+CB91-CBD3, U+CBD5-CBE3, U+CBE5-CC0B, U+CC0E-CC0F, U+CC11-CC13, U+CC15-CC1B, U+CC1D-CC20, U+CC23-CC27, U+CC2A-CC2B, U+CC2D, U+CC2F, U+CC31-CC37, U+CC3A, U+CC3C;
}

/* [19] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.19.woff2) format('woff2-variations');
	unicode-range: U+CAF4-CB47, U+CB4A-CB90;
}

/* [20] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.20.woff2) format('woff2-variations');
	unicode-range: U+CA4A-CA4B, U+CA4E-CA4F, U+CA51-CA53, U+CA55-CA5B, U+CA5D-CA60, U+CA62-CA83, U+CA85-CABB, U+CABE-CABF, U+CAC1-CAC3, U+CAC5-CACB, U+CACD-CAD0, U+CAD2, U+CAD4-CAD8, U+CADA-CAF3;
}

/* [21] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.21.woff2) format('woff2-variations');
	unicode-range: U+C996-C997, U+C99A-C99C, U+C99E-C9BF, U+C9C2-C9C3, U+C9C5-C9C7, U+C9C9-C9CF, U+C9D2, U+C9D4, U+C9D7-C9D8, U+C9DB, U+C9DE-C9DF, U+C9E1-C9E3, U+C9E5-C9E6, U+C9E8-C9EB, U+C9EE-C9F0, U+C9F2-C9F7, U+C9F9-CA0B, U+CA0D-CA28, U+CA2A-CA49;
}

/* [22] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.22.woff2) format('woff2-variations');
	unicode-range: U+C8E9-C8F4, U+C8F6-C8FB, U+C8FE-C8FF, U+C901-C903, U+C905-C90B, U+C90E-C910, U+C912-C917, U+C919-C92B, U+C92D-C94F, U+C951-C953, U+C955-C96B, U+C96D-C973, U+C975-C987, U+C98A-C98B, U+C98D-C98F, U+C991-C995;
}

/* [23] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.23.woff2) format('woff2-variations');
	unicode-range: U+C841-C84B, U+C84D-C86F, U+C872-C873, U+C875-C877, U+C879-C87F, U+C882-C884, U+C887-C88A, U+C88D-C8C3, U+C8C5-C8DF, U+C8E1-C8E8;
}

/* [24] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.24.woff2) format('woff2-variations');
	unicode-range: U+C779-C77B, U+C77E-C782, U+C786, U+C78B, U+C78D, U+C78F, U+C792-C793, U+C795, U+C797, U+C799-C79F, U+C7A2, U+C7A7-C7AB, U+C7AE-C7BB, U+C7BD-C7C0, U+C7C2-C7C7, U+C7C9-C7DC, U+C7DE-C7FF, U+C802-C803, U+C805-C807, U+C809, U+C80B-C80F, U+C812, U+C814, U+C817-C81B, U+C81E-C81F, U+C821-C823, U+C825-C82E, U+C830-C837, U+C839-C83B, U+C83D-C840;
}

/* [25] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.25.woff2) format('woff2-variations');
	unicode-range: U+C6BB-C6BF, U+C6C2, U+C6C4, U+C6C6-C6CB, U+C6CE-C6CF, U+C6D1-C6D3, U+C6D5-C6DB, U+C6DD-C6DF, U+C6E1-C6E7, U+C6E9-C6EB, U+C6ED-C6EF, U+C6F1-C6F8, U+C6FA-C703, U+C705-C707, U+C709-C70B, U+C70D-C716, U+C718, U+C71A-C71F, U+C722-C723, U+C725-C727, U+C729-C734, U+C736-C73B, U+C73E-C73F, U+C741-C743, U+C745-C74B, U+C74E-C750, U+C752-C757, U+C759-C773, U+C776-C777;
}

/* [26] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.26.woff2) format('woff2-variations');
	unicode-range: U+C5F5-C5FB, U+C5FE, U+C602-C605, U+C607, U+C609-C60F, U+C611-C61A, U+C61C-C623, U+C626-C627, U+C629-C62B, U+C62D, U+C62F-C632, U+C636, U+C638, U+C63A-C63F, U+C642-C643, U+C645-C647, U+C649-C652, U+C656-C65B, U+C65D-C65F, U+C661-C663, U+C665-C677, U+C679-C67B, U+C67D-C693, U+C696-C697, U+C699-C69B, U+C69D-C6A3, U+C6A6, U+C6A8, U+C6AA-C6AF, U+C6B2-C6B3, U+C6B5-C6B7, U+C6B9-C6BA;
}

/* [27] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.27.woff2) format('woff2-variations');
	unicode-range: U+C517-C527, U+C52A-C52B, U+C52D-C52F, U+C531-C538, U+C53A, U+C53C, U+C53E-C543, U+C546-C547, U+C54B, U+C54D-C552, U+C556, U+C55A-C55B, U+C55D, U+C55F, U+C562-C563, U+C565-C567, U+C569-C56F, U+C572, U+C574, U+C576-C57B, U+C57E-C57F, U+C581-C583, U+C585-C586, U+C588-C58B, U+C58E, U+C590, U+C592-C596, U+C599-C5B3, U+C5B6-C5B7, U+C5BA, U+C5BE-C5C3, U+C5CA-C5CB, U+C5CD, U+C5CF, U+C5D2-C5D3, U+C5D5-C5D7, U+C5D9-C5DF, U+C5E1-C5E2, U+C5E4, U+C5E6-C5EB, U+C5EF, U+C5F1-C5F3;
}

/* [28] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.28.woff2) format('woff2-variations');
	unicode-range: U+C475-C4EF, U+C4F2-C4F3, U+C4F5-C4F7, U+C4F9-C4FF, U+C502-C50B, U+C50D-C516;
}

/* [29] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.29.woff2) format('woff2-variations');
	unicode-range: U+C3D0-C3D7, U+C3DA-C3DB, U+C3DD-C3DE, U+C3E1-C3EC, U+C3EE-C3F3, U+C3F5-C42B, U+C42D-C463, U+C466-C474;
}

/* [30] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.30.woff2) format('woff2-variations');
	unicode-range: U+C32B-C367, U+C36A-C36B, U+C36D-C36F, U+C371-C377, U+C37A-C37B, U+C37E-C383, U+C385-C387, U+C389-C3CF;
}

/* [31] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.31.woff2) format('woff2-variations');
	unicode-range: U+C26A-C26B, U+C26D-C26F, U+C271-C273, U+C275-C27B, U+C27E-C287, U+C289-C28F, U+C291-C297, U+C299-C29A, U+C29C-C2A3, U+C2A5-C2A7, U+C2A9-C2AB, U+C2AD-C2B3, U+C2B6, U+C2B8, U+C2BA-C2BB, U+C2BD-C2DB, U+C2DE-C2DF, U+C2E1-C2E2, U+C2E5-C2EA, U+C2EE, U+C2F0, U+C2F2-C2F5, U+C2F7, U+C2FA-C2FB, U+C2FD-C2FF, U+C301-C307, U+C309-C30C, U+C30E-C312, U+C315-C323, U+C325-C328, U+C32A;
}

/* [32] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.32.woff2) format('woff2-variations');
	unicode-range: U+C1BC-C1C3, U+C1C5-C1DF, U+C1E1-C1FB, U+C1FD-C203, U+C205-C20C, U+C20E, U+C210-C217, U+C21A-C21B, U+C21D-C21E, U+C221-C227, U+C229-C22A, U+C22C, U+C22E, U+C230, U+C233-C24F, U+C251-C257, U+C259-C269;
}

/* [33] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.33.woff2) format('woff2-variations');
	unicode-range: U+C101-C11B, U+C11F, U+C121-C123, U+C125-C12B, U+C12E, U+C132-C137, U+C13A-C13B, U+C13D-C13F, U+C141-C147, U+C14A, U+C14C-C153, U+C155-C157, U+C159-C15B, U+C15D-C166, U+C169-C16F, U+C171-C177, U+C179-C18B, U+C18E-C18F, U+C191-C193, U+C195-C19B, U+C19D-C19E, U+C1A0, U+C1A2-C1A4, U+C1A6-C1BB;
}

/* [34] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.34.woff2) format('woff2-variations');
	unicode-range: U+C049-C057, U+C059-C05B, U+C05D-C05F, U+C061-C067, U+C069-C08F, U+C091-C0AB, U+C0AE-C0AF, U+C0B1-C0B3, U+C0B5, U+C0B7-C0BB, U+C0BE, U+C0C2-C0C7, U+C0CA-C0CB, U+C0CD-C0CF, U+C0D1-C0D7, U+C0D9-C0DA, U+C0DC, U+C0DE-C0E3, U+C0E5-C0EB, U+C0ED-C0F3, U+C0F6, U+C0F8, U+C0FA-C0FF;
}

/* [35] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.35.woff2) format('woff2-variations');
	unicode-range: U+BFA7-BFAF, U+BFB1-BFC4, U+BFC6-BFCB, U+BFCE-BFCF, U+BFD1-BFD3, U+BFD5-BFDB, U+BFDD-C048;
}

/* [36] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.36.woff2) format('woff2-variations');
	unicode-range: U+BF07, U+BF09-BF3F, U+BF41-BF4F, U+BF52-BF54, U+BF56-BFA6;
}

/* [37] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.37.woff2) format('woff2-variations');
	unicode-range: U+BE56, U+BE58, U+BE5C-BE5F, U+BE62-BE63, U+BE65-BE67, U+BE69-BE74, U+BE76-BE7B, U+BE7E-BE7F, U+BE81-BE8E, U+BE90, U+BE92-BEA7, U+BEA9-BECF, U+BED2-BED3, U+BED5-BED6, U+BED9-BEE3, U+BEE6-BF06;
}

/* [38] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.38.woff2) format('woff2-variations');
	unicode-range: U+BDB0-BDD3, U+BDD5-BDEF, U+BDF1-BE0B, U+BE0D-BE0F, U+BE11-BE13, U+BE15-BE43, U+BE46-BE47, U+BE49-BE4B, U+BE4D-BE53;
}

/* [39] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.39.woff2) format('woff2-variations');
	unicode-range: U+BD03, U+BD06, U+BD08, U+BD0A-BD0F, U+BD11-BD22, U+BD25-BD47, U+BD49-BD58, U+BD5A-BD7F, U+BD82-BD83, U+BD85-BD87, U+BD8A-BD8F, U+BD91-BD92, U+BD94, U+BD96-BD98, U+BD9A-BDAF;
}

/* [40] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.40.woff2) format('woff2-variations');
	unicode-range: U+BC4E-BC83, U+BC86-BC87, U+BC89-BC8B, U+BC8D-BC93, U+BC96, U+BC98, U+BC9B-BC9F, U+BCA2-BCA3, U+BCA5-BCA7, U+BCA9-BCB2, U+BCB4-BCBB, U+BCBE-BCBF, U+BCC1-BCC3, U+BCC5-BCCC, U+BCCE-BCD0, U+BCD2-BCD4, U+BCD6-BCF3, U+BCF7, U+BCF9-BCFB, U+BCFD-BD02;
}

/* [41] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.41.woff2) format('woff2-variations');
	unicode-range: U+BB90-BBA3, U+BBA5-BBAB, U+BBAD-BBBF, U+BBC1-BBF7, U+BBFA-BBFB, U+BBFD-BBFE, U+BC01-BC07, U+BC09-BC0A, U+BC0E, U+BC10, U+BC12-BC13, U+BC17, U+BC19-BC1A, U+BC1E, U+BC20-BC23, U+BC26, U+BC28, U+BC2A-BC2C, U+BC2E-BC2F, U+BC32-BC33, U+BC35-BC37, U+BC39-BC3F, U+BC41-BC42, U+BC44, U+BC46-BC48, U+BC4A-BC4D;
}

/* [42] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.42.woff2) format('woff2-variations');
	unicode-range: U+BAE6-BAFB, U+BAFD-BB17, U+BB19-BB33, U+BB37, U+BB39-BB3A, U+BB3D-BB43, U+BB45-BB46, U+BB48, U+BB4A-BB4F, U+BB51-BB53, U+BB55-BB57, U+BB59-BB62, U+BB64-BB8F;
}

/* [43] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.43.woff2) format('woff2-variations');
	unicode-range: U+BA30-BA37, U+BA3A-BA3B, U+BA3D-BA3F, U+BA41-BA47, U+BA49-BA4A, U+BA4C, U+BA4E-BA53, U+BA56-BA57, U+BA59-BA5B, U+BA5D-BA63, U+BA65-BA66, U+BA68-BA6F, U+BA71-BA73, U+BA75-BA77, U+BA79-BA84, U+BA86, U+BA88-BAA7, U+BAAA, U+BAAD-BAAF, U+BAB1-BAB7, U+BABA, U+BABC, U+BABE-BAE5;
}

/* [44] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.44.woff2) format('woff2-variations');
	unicode-range: U+B96E-B973, U+B976-B977, U+B979-B97B, U+B97D-B983, U+B986, U+B988, U+B98A-B98D, U+B98F-B9AB, U+B9AE-B9AF, U+B9B1-B9B3, U+B9B5-B9BB, U+B9BE, U+B9C0, U+B9C2-B9C7, U+B9CA-B9CB, U+B9CD, U+B9D2-B9D7, U+B9DA, U+B9DC, U+B9DF-B9E0, U+B9E2, U+B9E6-B9E7, U+B9E9-B9F3, U+B9F6, U+B9F8, U+B9FB-BA2F;
}

/* [45] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.45.woff2) format('woff2-variations');
	unicode-range: U+B8BF-B8CB, U+B8CD-B8E0, U+B8E2-B8E7, U+B8EA-B8EB, U+B8ED-B8EF, U+B8F1-B8F7, U+B8FA, U+B8FC, U+B8FE-B903, U+B905-B917, U+B919-B91F, U+B921-B93B, U+B93D-B957, U+B95A-B95B, U+B95D-B95F, U+B961-B967, U+B969-B96C;
}

/* [46] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.46.woff2) format('woff2-variations');
	unicode-range: U+B80D-B80F, U+B811-B817, U+B81A, U+B81C-B823, U+B826-B827, U+B829-B82B, U+B82D-B833, U+B836, U+B83A-B83F, U+B841-B85B, U+B85E-B85F, U+B861-B863, U+B865-B86B, U+B86E, U+B870, U+B872-B8AF, U+B8B1-B8BE;
}

/* [47] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.47.woff2) format('woff2-variations');
	unicode-range: U+B74D-B75F, U+B761-B763, U+B765-B774, U+B776-B77B, U+B77E-B77F, U+B781-B783, U+B785-B78B, U+B78E, U+B792-B796, U+B79A-B79B, U+B79D-B7A7, U+B7AA, U+B7AE-B7B3, U+B7B6-B7C8, U+B7CA-B7EB, U+B7EE-B7EF, U+B7F1-B7F3, U+B7F5-B7FB, U+B7FE, U+B802-B806, U+B80A-B80B;
}

/* [48] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.48.woff2) format('woff2-variations');
	unicode-range: U+B6A7-B6AA, U+B6AC-B6B0, U+B6B2-B6EF, U+B6F1-B727, U+B72A-B72B, U+B72D-B72E, U+B731-B737, U+B739-B73A, U+B73C-B743, U+B745-B74C;
}

/* [49] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.49.woff2) format('woff2-variations');
	unicode-range: U+B605-B60F, U+B612-B617, U+B619-B624, U+B626-B69B, U+B69E-B6A3, U+B6A5-B6A6;
}

/* [50] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.50.woff2) format('woff2-variations');
	unicode-range: U+B55F, U+B562-B583, U+B585-B59F, U+B5A2-B5A3, U+B5A5-B5A7, U+B5A9-B5B2, U+B5B5-B5BA, U+B5BD-B604;
}

/* [51] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.51.woff2) format('woff2-variations');
	unicode-range: U+B4A5-B4B6, U+B4B8-B4BF, U+B4C1-B4C7, U+B4C9-B4DB, U+B4DE-B4DF, U+B4E1-B4E2, U+B4E5-B4EB, U+B4EE, U+B4F0, U+B4F2-B513, U+B516-B517, U+B519-B51A, U+B51D-B523, U+B526, U+B528, U+B52B-B52F, U+B532-B533, U+B535-B537, U+B539-B53F, U+B541-B544, U+B546-B54B, U+B54D-B54F, U+B551-B55B, U+B55D-B55E;
}

/* [52] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.52.woff2) format('woff2-variations');
	unicode-range: U+B3F8-B3FB, U+B3FD-B40F, U+B411-B417, U+B419-B41B, U+B41D-B41F, U+B421-B427, U+B42A-B42B, U+B42D-B44F, U+B452-B453, U+B455-B457, U+B459-B45F, U+B462-B464, U+B466-B46B, U+B46D-B47F, U+B481-B4A3;
}

/* [53] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.53.woff2) format('woff2-variations');
	unicode-range: U+B342-B353, U+B356-B357, U+B359-B35B, U+B35D-B35E, U+B360-B363, U+B366, U+B368, U+B36A-B36D, U+B36F, U+B372-B373, U+B375-B377, U+B379-B37F, U+B381-B382, U+B384, U+B386-B38B, U+B38D-B3C3, U+B3C6-B3C7, U+B3C9-B3CA, U+B3CD-B3D3, U+B3D6, U+B3D8, U+B3DA-B3F7;
}

/* [54] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.54.woff2) format('woff2-variations');
	unicode-range: U+B27C-B283, U+B285-B28F, U+B292-B293, U+B295-B297, U+B29A-B29F, U+B2A1-B2A4, U+B2A7-B2A9, U+B2AB, U+B2AD-B2C7, U+B2CA-B2CB, U+B2CD-B2CF, U+B2D1-B2D7, U+B2DA, U+B2DC, U+B2DE-B2E3, U+B2E7, U+B2E9-B2EA, U+B2EF-B2F3, U+B2F6, U+B2F8, U+B2FA-B2FB, U+B2FD-B2FE, U+B302-B303, U+B305-B307, U+B309-B30F, U+B312, U+B316-B31B, U+B31D-B341;
}

/* [55] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.55.woff2) format('woff2-variations');
	unicode-range: U+B1D6-B1E7, U+B1E9-B1FC, U+B1FE-B203, U+B206-B207, U+B209-B20B, U+B20D-B213, U+B216-B21F, U+B221-B257, U+B259-B273, U+B275-B27B;
}

/* [56] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.56.woff2) format('woff2-variations');
	unicode-range: U+B120-B122, U+B126-B127, U+B129-B12B, U+B12D-B133, U+B136, U+B138, U+B13A-B13F, U+B142-B143, U+B145-B14F, U+B151-B153, U+B156-B157, U+B159-B177, U+B17A-B17B, U+B17D-B17F, U+B181-B187, U+B189-B18C, U+B18E-B191, U+B195-B1A7, U+B1A9-B1CB, U+B1CD-B1D5;
}

/* [57] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.57.woff2) format('woff2-variations');
	unicode-range: U+B05F-B07B, U+B07E-B07F, U+B081-B083, U+B085-B08B, U+B08D-B097, U+B09B, U+B09D-B09F, U+B0A2-B0A7, U+B0AA, U+B0B0, U+B0B2, U+B0B6-B0B7, U+B0B9-B0BB, U+B0BD-B0C3, U+B0C6-B0C7, U+B0CA-B0CF, U+B0D1-B0DF, U+B0E1-B0E4, U+B0E6-B107, U+B10A-B10B, U+B10D-B10F, U+B111-B112, U+B114-B117, U+B119-B11A, U+B11C-B11F;
}

/* [58] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.58.woff2) format('woff2-variations');
	unicode-range: U+AFAC-AFB7, U+AFBA-AFBB, U+AFBD-AFBF, U+AFC1-AFC6, U+AFCA-AFCC, U+AFCE-AFD3, U+AFD5-AFE7, U+AFE9-AFEF, U+AFF1-B00B, U+B00D-B00F, U+B011-B013, U+B015-B01B, U+B01D-B027, U+B029-B043, U+B045-B047, U+B049, U+B04B, U+B04D-B052, U+B055-B056, U+B058-B05C, U+B05E;
}

/* [59] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.59.woff2) format('woff2-variations');
	unicode-range: U+AF03-AF07, U+AF09-AF2B, U+AF2E-AF33, U+AF35-AF3B, U+AF3E-AF40, U+AF44-AF47, U+AF4A-AF5C, U+AF5E-AF63, U+AF65-AF7F, U+AF81-AFAB;
}

/* [60] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.60.woff2) format('woff2-variations');
	unicode-range: U+AE56-AE5B, U+AE5E-AE60, U+AE62-AE64, U+AE66-AE67, U+AE69-AE6B, U+AE6D-AE83, U+AE85-AEBB, U+AEBF, U+AEC1-AEC3, U+AEC5-AECB, U+AECE, U+AED0, U+AED2-AED7, U+AED9-AEF3, U+AEF5-AF02;
}

/* [61] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.61.woff2) format('woff2-variations');
	unicode-range: U+AD9C-ADA3, U+ADA5-ADBF, U+ADC1-ADC3, U+ADC5-ADC7, U+ADC9-ADD2, U+ADD4-ADDB, U+ADDD-ADDF, U+ADE1-ADE3, U+ADE5-ADF7, U+ADFA-ADFB, U+ADFD-ADFF, U+AE02-AE07, U+AE0A, U+AE0C, U+AE0E-AE13, U+AE15-AE2F, U+AE31-AE33, U+AE35-AE37, U+AE39-AE3F, U+AE42, U+AE44, U+AE46-AE49, U+AE4B, U+AE4F, U+AE51-AE53, U+AE55;
}

/* [62] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.62.woff2) format('woff2-variations');
	unicode-range: U+ACE2-ACE3, U+ACE5-ACE6, U+ACE9-ACEF, U+ACF2, U+ACF4, U+ACF7-ACFB, U+ACFE-ACFF, U+AD01-AD03, U+AD05-AD0B, U+AD0D-AD10, U+AD12-AD1B, U+AD1D-AD33, U+AD35-AD48, U+AD4A-AD4F, U+AD51-AD6B, U+AD6E-AD6F, U+AD71-AD72, U+AD77-AD7C, U+AD7E, U+AD80, U+AD82-AD87, U+AD89-AD8B, U+AD8D-AD8F, U+AD91-AD9B;
}

/* [63] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.63.woff2) format('woff2-variations');
	unicode-range: U+AC25-AC2C, U+AC2E, U+AC30, U+AC32-AC37, U+AC39-AC3F, U+AC41-AC4C, U+AC4E-AC6F, U+AC72-AC73, U+AC75-AC76, U+AC79-AC7F, U+AC82, U+AC84-AC88, U+AC8A-AC8B, U+AC8D-AC8F, U+AC91-AC93, U+AC95-AC9B, U+AC9D-AC9E, U+ACA1-ACA7, U+ACAB, U+ACAD-ACAF, U+ACB1-ACB7, U+ACBA-ACBB, U+ACBE-ACC0, U+ACC2-ACC3, U+ACC5-ACDF;
}

/* [64] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.64.woff2) format('woff2-variations');
	unicode-range: U+AC02-AC03, U+AC05-AC06, U+AC09-AC0F, U+AC17-AC18, U+AC1B, U+AC1E-AC1F, U+AC21-AC23;
}

/* [65] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.65.woff2) format('woff2-variations');
	unicode-range: U+338C-339C, U+339F-33A0, U+33A2-33CA, U+33CF-33D0, U+33D3, U+33D6, U+33D8, U+33DB-33DD;
}

/* [66] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.66.woff2) format('woff2-variations');
	unicode-range: U+3136, U+3138, U+313A-3140, U+3143-3144, U+3150, U+3152, U+3154-3156, U+3158-315B, U+315D-315F, U+3162, U+3164, U+3380-3384, U+3388-338B;
}

/* [67] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.67.woff2) format('woff2-variations');
	unicode-range: U+3003, U+3014-3019, U+301C, U+301E-301F, U+3041, U+3043, U+3045, U+3047, U+3049, U+304E, U+3050, U+3052, U+3056, U+305A, U+305C, U+305E, U+3062, U+3065, U+306C, U+3070-307D, U+3080, U+3085, U+3087, U+308E, U+3090-3091, U+30A1, U+30A5, U+30A9, U+30AE, U+30B1-30B2, U+30B4, U+30B6, U+30BC-30BE, U+30C2, U+30C5, U+30CC, U+30D2, U+30D4, U+30D8-30DD, U+30E4, U+30E6, U+30E8, U+30EE, U+30F0-30F2, U+30F4-30F6, U+3133, U+3135;
}

/* [68] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.68.woff2) format('woff2-variations');
	unicode-range: U+25C1, U+25CA, U+25E6, U+25EF, U+2756, U+2776-277F;
}

/* [69] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.69.woff2) format('woff2-variations');
	unicode-range: U+24B6-24CF, U+24EB-24F4;
}

/* [70] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.70.woff2) format('woff2-variations');
	unicode-range: U+215B-215E, U+2162-2169, U+2170-2179, U+2195-2199, U+21B0-21B1, U+21B3-21B4, U+21D0, U+21D2, U+21D4, U+21E7, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+226A-226B, U+22EF, U+2467-2473;
}

/* [71] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.71.woff2) format('woff2-variations');
	unicode-range: U+00A2-00A5, U+00A7-00A8, U+00AA, U+00AC, U+00B1-00B3, U+00B6, U+00B8-00BA, U+00BC-00BE, U+00C0, U+00C2, U+00C6-00CB, U+00CE-00D0, U+00D4, U+00D8-00D9, U+00DB-00DC, U+00DE-00DF, U+00E6, U+00EB, U+00EE-00F0, U+00F4, U+00F7-00F9, U+00FB, U+00FE-00FF, U+0111, U+0126-0127, U+0132-0133, U+0138, U+013F-0142, U+014A-014B, U+0152-0153, U+0166-0167, U+02BC, U+02C7, U+02D0, U+02D8-02D9, U+02DB-02DD, U+0391-0394, U+0396-03A1, U+03A3-03A9, U+03B2-03B6, U+03B8, U+03BC, U+03BE-03C1, U+03C3-03C9, U+2010, U+2015-2016, U+2018-2019, U+201B, U+201F-2021, U+2025, U+2030, U+2033-2036, U+203C, U+203E, U+2042, U+2074, U+207A-207F, U+2081-2084, U+2109, U+2113, U+2116, U+2121, U+2126, U+212B, U+2153;
}

/* [72] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.72.woff2) format('woff2-variations');
	unicode-range: U+00E8, U+02DA, U+2160, U+2194, U+3054, U+3058, U+306D, U+3086, U+308D, U+30AC, U+30BB, U+30C4, U+30CD-30CE, U+30E2, U+3132, U+3146, U+3149, U+339D, U+AC2D, U+ADC8, U+ADD3, U+AF48, U+B014, U+B134-B135, U+B158, U+B2AA, U+B35F, U+B6A4, U+B9CF, U+BB63, U+BD23, U+BE91, U+C29B, U+C3F4, U+C42C, U+C55C, U+C573, U+C58F, U+C78C, U+C7DD, U+C8F5, U+CAD1, U+CC48, U+CF10, U+CF20, U+D03C, U+D07D, U+D2A0, U+D30E, U+D38D, U+D3A8, U+D3C8, U+D5E5, U+D5F9, U+D6E4, U+FF02, U+FF1C;
}

/* [73] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.73.woff2) format('woff2-variations');
	unicode-range: U+03B1, U+2466, U+25A1, U+3008-3009, U+305B, U+305D, U+3069, U+30A7, U+30BA, U+30CF, U+30EF, U+3151, U+3157, U+AE14, U+AE6C, U+AEC0, U+AFC7, U+AFC9, U+B01C, U+B028, U+B308, U+B311, U+B314, U+B31C, U+B524, U+B560, U+B764, U+B920, U+B9E3, U+BD48, U+BE7D, U+C0DB, U+C231, U+C270, U+C2E3, U+C37D, U+C3ED, U+C530, U+C6A5, U+C6DC, U+C7A4, U+C954, U+C974, U+D000, U+D565, U+D667, U+D6C5, U+D79D, U+FF1E;
}

/* [74] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.74.woff2) format('woff2-variations');
	unicode-range: U+0131, U+2032, U+2465, U+3048, U+3051, U+3083-3084, U+308F, U+30C0, U+30D1, U+30D3, U+30D6, U+30DF, U+30E7, U+3153, U+AC20, U+ACF6, U+AD90, U+AF5D, U+AF80, U+AFCD, U+AFF0, U+B0A1, U+B0B5, U+B1FD, U+B2FC, U+B380, U+B51B, U+B584, U+B5B3, U+B8FD, U+B93C, U+B9F4, U+BB44, U+BC08, U+BC27, U+BC49, U+BE55, U+BE64, U+BFB0, U+BFC5, U+C178, U+C21F, U+C314, U+C4F1, U+C58D, U+C664, U+C698, U+C6A7, U+C6C1, U+C9ED, U+CAC0, U+CACC, U+CAD9, U+CCB5, U+CDCC, U+D0E4, U+D143, U+D320, U+D330, U+D54D, U+FF06, U+FF1F, U+FF5E;
}

/* [75] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.75.woff2) format('woff2-variations');
	unicode-range: U+00B4, U+20A9, U+20AC, U+2190, U+25C7, U+3060, U+3064, U+3081, U+3088, U+30A3, U+30A6, U+30AA, U+30B5, U+30C7, U+30CA-30CB, U+30D0, U+30E3, U+30E5, U+339E, U+AC38, U+AD76, U+AE84, U+AECC, U+B07D, U+B0B1, U+B215, U+B2A0, U+B310, U+B3D7, U+B52A, U+B618, U+B775, U+B797, U+BCD5, U+BD59, U+BE80, U+BEA8, U+BED1, U+BEE4-BEE5, U+C060, U+C2EF, U+C329, U+C3DC, U+C597, U+C5BD, U+C5E5, U+C69C, U+C9D6, U+CA29, U+CA5C, U+CA84, U+CC39, U+CC3B, U+CE89, U+CEE5, U+CF65, U+CF85, U+D058, U+D145, U+D22D, U+D325, U+D37D, U+D3AD, U+D769, U+FF0C;
}

/* [76] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.76.woff2) format('woff2-variations');
	unicode-range: U+2161, U+2464, U+3042, U+304A, U+3053, U+3061, U+307F, U+3082, U+308C, U+3092, U+30A8, U+30AB, U+30AD, U+30B0, U+30B3, U+30B7, U+30C1, U+30C6, U+30C9, U+30D5, U+30D7, U+30DE, U+30E0-30E1, U+30EC-30ED, U+AC07, U+AC1A, U+AC40, U+AD0C, U+AD88, U+ADA4, U+AE01, U+AE65, U+AEBD, U+AEC4, U+AFE8, U+B139, U+B205, U+B383, U+B38C, U+B42C, U+B461, U+B55C, U+B78F, U+B8FB, U+B9F7, U+BAFC, U+BC99, U+BED8, U+BFCD, U+C0BF, U+C0F9, U+C167, U+C204, U+C20F, U+C22F, U+C258, U+C298, U+C2BC, U+C388, U+C501, U+C50C, U+C5B9, U+C5CE, U+C641, U+C648, U+C73D, U+CA50, U+CA61, U+CC4C, U+CEAC, U+D0D4, U+D5F7, U+D6D7, U+FF1A;
}

/* [77] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.77.woff2) format('woff2-variations');
	unicode-range: U+2103, U+2463, U+25C6, U+25CB, U+3001, U+300A, U+3046, U+304C-304D, U+304F, U+3055, U+3059, U+3063, U+3066-3068, U+306F, U+3089, U+30B8, U+30BF, U+314F, U+AC2F, U+AC4D, U+ADC4, U+ADE4, U+AE41, U+AE4D-AE4E, U+AED1, U+AFB9, U+B0E0, U+B299, U+B365, U+B46C, U+B480, U+B4C8, U+B7B4, U+B819, U+B918, U+BAAB, U+BAB9, U+BE8F, U+BED7, U+C0EC, U+C19F, U+C1A5, U+C3D9, U+C464, U+C53D, U+C553, U+C570, U+C5CC, U+C633, U+C6A4, U+C7A3, U+C7A6, U+C886, U+C9D9-C9DA, U+C9EC, U+CA0C, U+CC21, U+CD1B, U+CD78, U+CDC4, U+CEF8, U+CFE4, U+D0A5, U+D0B5, U+D0EC, U+D15D, U+D188, U+D23C, U+D2AC, U+D729, U+D79B, U+FF01, U+FF08-FF09, U+FF5C;
}

/* [78] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.78.woff2) format('woff2-variations');
	unicode-range: U+2039-203A, U+25B3, U+25B7, U+25BD, U+25CF, U+266A, U+3002, U+300B, U+304B, U+3057, U+305F, U+306A-306B, U+307E, U+308A-308B, U+3093, U+30A2, U+30AF, U+30B9, U+30C3, U+30C8, U+30E9-30EB, U+33A1, U+AC94, U+AEBE, U+AECD, U+AF08, U+AF41, U+AF49, U+B010, U+B053, U+B109, U+B11B, U+B128, U+B154, U+B291, U+B2E6, U+B301, U+B385, U+B525, U+B5B4, U+B729, U+B72F, U+B738, U+B7FF, U+B837, U+B975, U+BA67, U+BB47, U+BC1F, U+BD90, U+BFD4, U+C27C, U+C324, U+C379, U+C3E0, U+C465, U+C53B, U+C58C, U+C610, U+C653, U+C6CD, U+C813, U+C82F, U+C999, U+C9E0, U+CAC4, U+CAD3, U+CBD4, U+CC10, U+CC22, U+CCB8, U+CCBC, U+CDA5, U+CE84, U+CEA3, U+CF67, U+CFE1, U+D241, U+D30D, U+D31C, U+D391, U+D401, U+D479, U+D5C9, U+D5DB, U+D649, U+D6D4;
}

/* [79] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.79.woff2) format('woff2-variations');
	unicode-range: U+00B0, U+00E9, U+2193, U+2462, U+300E-300F, U+3044, U+30A4, U+30FB-30FC, U+314D, U+AC89, U+AC9C, U+ACC1, U+AD04, U+AD75, U+AD7D, U+AE45, U+AE61, U+AF42, U+B0AB, U+B0AF, U+B0B3, U+B12C, U+B194, U+B1A8, U+B220, U+B258, U+B284, U+B2FF, U+B315, U+B371, U+B3D4-B3D5, U+B460, U+B527, U+B534, U+B810, U+B818, U+B98E, U+BA55, U+BBAC, U+BC0B, U+BC40, U+BCA1, U+BCCD, U+BD93, U+BE54, U+BE5A, U+BF08, U+BF50, U+BF55, U+BFDC, U+C0C0, U+C0D0, U+C0F4, U+C100, U+C11E, U+C170, U+C20D, U+C274, U+C290, U+C308, U+C369, U+C539, U+C587, U+C5FF, U+C6EC, U+C70C, U+C7AD, U+C7C8, U+C83C, U+C881, U+CB48, U+CC60, U+CE69, U+CE6B, U+CE75, U+CF04, U+CF08, U+CF55, U+CF70, U+CFFC, U+D0B7, U+D1A8, U+D2C8, U+D384, U+D47C, U+D48B, U+D5DD, U+D5E8, U+D720, U+D759;
}

/* [80] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.80.woff2) format('woff2-variations');
	unicode-range: U+00E0, U+00E2, U+0395, U+03B7, U+03BA, U+2460-2461, U+25A0, U+3010-3011, U+306E, U+30F3, U+314A, U+314C, U+AD49, U+AE0B, U+AE0D, U+AE43, U+AE5D, U+AECF, U+AF3C, U+AF64, U+AFD4, U+B080, U+B084, U+B0C5, U+B10C, U+B1E8, U+B2AC, U+B36E, U+B451, U+B515, U+B540, U+B561, U+B6AB, U+B6B1, U+B72C, U+B730, U+B744, U+B800, U+B8EC, U+B8F0, U+B904, U+B968, U+B96D, U+B987, U+B9D9, U+BB36, U+BB49, U+BC2D, U+BC43, U+BCF6, U+BD89, U+BE57, U+BE61, U+BED4, U+C090, U+C130, U+C148, U+C19C, U+C2F9, U+C36C, U+C37C, U+C384, U+C3DF, U+C575, U+C584, U+C660, U+C719, U+C816, U+CA4D, U+CA54, U+CABC, U+CB49, U+CC14, U+CFF5, U+D004, U+D038, U+D0B4, U+D0D3, U+D0E0, U+D0ED, U+D131, U+D1B0, U+D31F, U+D33D, U+D3A0, U+D3AB, U+D514, U+D584, U+D6A1, U+D6CC, U+D749, U+D760, U+D799;
}

/* [81] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.81.woff2) format('woff2-variations');
	unicode-range: U+0024, U+0060, U+03B9, U+03BB, U+03BD, U+2191, U+2606, U+300C-300D, U+3131, U+3134, U+3139, U+3141-3142, U+3148, U+3161, U+3163, U+321C, U+AC31, U+AC77, U+AC9F, U+ACB9, U+ACF0-ACF1, U+ACFD, U+AD73, U+AF3D, U+B00C, U+B04A, U+B057, U+B0C4, U+B188, U+B1CC, U+B214, U+B2DB, U+B2EE, U+B304, U+B4ED, U+B518, U+B5BC, U+B625, U+B69C-B69D, U+B7AC, U+B801, U+B86C, U+B959, U+B95C, U+B985, U+BA48, U+BB58, U+BC0C, U+BC38, U+BC85, U+BC9A, U+BF40, U+C068, U+C0BD, U+C0CC, U+C12F, U+C149, U+C1E0, U+C22B, U+C22D, U+C250, U+C2FC, U+C300, U+C313, U+C370, U+C3D8, U+C557, U+C580, U+C5E3, U+C62E, U+C634, U+C6F0, U+C74D, U+C783, U+C78E, U+C796, U+C7BC, U+C92C, U+CA4C, U+CC1C, U+CC54, U+CC59, U+CE04, U+CF30, U+CFC4, U+D140, U+D321, U+D38C, U+D399, U+D54F, U+D587, U+D5D0, U+D6E8, U+D770;
}

/* [82] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.82.woff2) format('woff2-variations');
	unicode-range: U+00D7, U+00EA, U+00FC, U+2192, U+25BC, U+3000, U+3137, U+3145, U+315C, U+AC13, U+AC71, U+AC90, U+ACB8, U+ACE7, U+AD7F, U+AE50, U+AEF4, U+AF34, U+AFBC, U+B048, U+B09A, U+B0AD, U+B0BC, U+B113, U+B125, U+B141, U+B20C, U+B2D9, U+B2ED, U+B367, U+B369, U+B374, U+B3CB, U+B4EC, U+B611, U+B760, U+B81B, U+B834, U+B8B0, U+B8E1, U+B989, U+B9D1, U+B9E1, U+B9FA, U+BA4D, U+BA78, U+BB35, U+BB54, U+BBF9, U+BC11, U+BCB3, U+BD05, U+BD95, U+BDD4, U+BE10, U+BED0, U+BF51, U+C0D8, U+C232, U+C2B7, U+C2EB, U+C378, U+C500, U+C52C, U+C549, U+C568, U+C598, U+C5C9, U+C61B, U+C639, U+C67C, U+C717, U+C78A, U+C80A, U+C90C-C90D, U+C950, U+C9E7, U+CBE4, U+CCA9, U+CCE4, U+CDB0, U+CE78, U+CE94, U+CE98, U+CF8C, U+D018, U+D034, U+D0F1, U+D1B1, U+D280, U+D2F8, U+D338, U+D380, U+D3B4, U+D610, U+D69F, U+D6FC, U+D758;
}

/* [83] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.83.woff2) format('woff2-variations');
	unicode-range: U+00E7, U+2022, U+203B, U+25C0, U+2605, U+2661, U+3147, U+318D, U+ACAA, U+ACBC, U+AD1C, U+AE4A, U+AE5C, U+B044, U+B054, U+B0C8-B0C9, U+B2A6, U+B2D0, U+B35C, U+B364, U+B428, U+B454, U+B465, U+B4B7, U+B4E3, U+B51C, U+B5A1, U+B784, U+B790, U+B7AB, U+B7F4, U+B82C, U+B835, U+B8E9, U+B8F8, U+B9D8, U+B9F9, U+BA5C, U+BA64, U+BABD, U+BB18, U+BB3B, U+BBFF, U+BC0D, U+BC45, U+BC97, U+BCBC, U+BE45, U+BE75, U+BE7C, U+BFCC, U+C0B6, U+C0F7, U+C14B, U+C2B4, U+C30D, U+C4F8, U+C5BB, U+C5D1, U+C5E0, U+C5EE, U+C5FD, U+C606, U+C6C5, U+C6E0, U+C708, U+C81D, U+C820, U+C824, U+C878, U+C918, U+C96C, U+C9E4, U+C9F1, U+CC2E, U+CD09, U+CEA1, U+CEF5, U+CEF7, U+CF64, U+CF69, U+CFE8, U+D035, U+D0AC, U+D230, U+D234, U+D2F4, U+D31D, U+D575, U+D578, U+D608, U+D614, U+D718, U+D751, U+D761, U+D78C, U+D790;
}

/* [84] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.84.woff2) format('woff2-variations');
	unicode-range: U+2665, U+3160, U+AC12, U+AC14, U+AC16, U+AC81, U+AD34, U+ADE0, U+AE54, U+AEBC, U+AF2C, U+AFC0, U+AFC8, U+B04C, U+B08C, U+B099, U+B0A9, U+B0AC, U+B0AE, U+B0B8, U+B123, U+B179, U+B2E5, U+B2F7, U+B4C0, U+B531, U+B538, U+B545, U+B550, U+B5A8, U+B6F0, U+B728, U+B73B, U+B7AD, U+B7ED, U+B809, U+B864, U+B86D, U+B871, U+B9BF, U+B9F5, U+BA40, U+BA4B, U+BA58, U+BA87, U+BAAC, U+BBC0, U+BC16, U+BC34, U+BD07, U+BD99, U+BE59, U+BFD0, U+C058, U+C0E4, U+C0F5, U+C12D, U+C139, U+C228, U+C529, U+C5C7, U+C635, U+C637, U+C735, U+C77D, U+C787, U+C789, U+C8C4, U+C989, U+C98C, U+C9D0, U+C9D3, U+CC0C, U+CC99, U+CD0C, U+CD2C, U+CD98, U+CDA4, U+CE59, U+CE60, U+CE6D, U+CEA0, U+D0D0-D0D1, U+D0D5, U+D14D, U+D1A4, U+D29C, U+D2F1, U+D301, U+D39C, U+D3BC, U+D4E8, U+D540, U+D5EC, U+D640, U+D750;
}

/* [85] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.85.woff2) format('woff2-variations');
	unicode-range: U+005E, U+25B2, U+25B6, U+314E, U+AC24, U+ACE1, U+ACE4, U+AE68, U+AF2D, U+B0D0, U+B0E5, U+B150, U+B155, U+B193, U+B2C9, U+B2DD, U+B3C8, U+B3FC, U+B410, U+B458, U+B4DD, U+B5A0, U+B5A4, U+B5BB, U+B7B5, U+B838, U+B840, U+B86F, U+B8F9, U+B960, U+B9E5, U+BAB8, U+BB50, U+BC1D, U+BC24-BC25, U+BCA8, U+BCBD, U+BD04, U+BD10, U+BD24, U+BE48, U+BE5B, U+BE68, U+C05C, U+C12C, U+C140, U+C15C, U+C168, U+C194, U+C219, U+C27D, U+C2A8, U+C2F1, U+C2F8, U+C368, U+C554-C555, U+C559, U+C564, U+C5D8, U+C5FC, U+C625, U+C65C, U+C6B1, U+C728, U+C794, U+C84C, U+C88C, U+C8E0, U+C8FD, U+C998, U+C9DD, U+CC0D, U+CC30, U+CEEC, U+CF13, U+CF1C, U+CF5C, U+D050, U+D07C, U+D0A8, U+D134, U+D138, U+D154, U+D1F4, U+D2BC, U+D329, U+D32C, U+D3D0, U+D3F4, U+D3FC, U+D56B, U+D5CC, U+D600-D601, U+D639, U+D6C8, U+D754, U+D765;
}

/* [86] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.86.woff2) format('woff2-variations');
	unicode-range: U+003C-003D, U+2026, U+314B, U+AC11, U+ACF3, U+AD74, U+AD81, U+ADF9, U+AE34, U+AF43, U+AFB8, U+B05D, U+B07C, U+B110, U+B118, U+B17C, U+B180, U+B18D, U+B192, U+B2CC, U+B355, U+B378, U+B4A4, U+B4EF, U+B78D, U+B799, U+B7A9, U+B7FD, U+B807, U+B80C, U+B839, U+B9B4, U+B9DB, U+BA3C, U+BAB0, U+BBA4, U+BC94, U+BE4C, U+C154, U+C1C4, U+C26C, U+C2AC, U+C2ED, U+C4F4, U+C55E, U+C561, U+C571, U+C5B5, U+C5C4, U+C654-C655, U+C695, U+C6E8, U+C6F9, U+C724, U+C751, U+C775, U+C7A0, U+C7C1, U+C874, U+C880, U+C9D5, U+C9F8, U+CABD, U+CC29, U+CC2C, U+CCA8, U+CCAB, U+CCD0, U+CE21, U+CE35, U+CE7C, U+CE90, U+CEE8, U+CEF4, U+CFE0, U+D070, U+D0B9, U+D0C1, U+D0C4, U+D0C8, U+D15C, U+D1A1, U+D2C0, U+D300, U+D314, U+D3ED, U+D478, U+D480, U+D48D, U+D508, U+D53D, U+D5E4, U+D611, U+D61C, U+D68D, U+D6A8, U+D798;
}

/* [87] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.87.woff2) format('woff2-variations');
	unicode-range: U+0023, U+0025, U+005F, U+00A9, U+AC08, U+AC78, U+ACA8, U+ACAC, U+ACE8, U+AD70, U+ADC0, U+ADDC, U+B137, U+B140, U+B208, U+B290, U+B2F5, U+B3C5, U+B3CC, U+B420, U+B429, U+B529, U+B530, U+B77D, U+B79C, U+B7A8, U+B7C9, U+B7F0, U+B7FC, U+B828, U+B860, U+B9AD, U+B9C1, U+B9C9, U+B9DD-B9DE, U+B9E8, U+BA38-BA39, U+BABB, U+BC00, U+BC8C, U+BCA0, U+BCA4, U+BCD1, U+BCFC, U+BD09, U+BDF0, U+BE60, U+C0AD, U+C0B4, U+C0BC, U+C190, U+C1FC, U+C220, U+C288, U+C2B9, U+C2F6, U+C528, U+C545, U+C558, U+C5BC, U+C5D4, U+C600, U+C644, U+C6C0, U+C6C3, U+C721, U+C798, U+C7A1, U+C811, U+C838, U+C871, U+C904, U+C990, U+C9DC, U+CC38, U+CC44, U+CCA0, U+CD1D, U+CD95, U+CDA9, U+CE5C, U+CF00, U+CF58, U+D150, U+D22C, U+D305, U+D328, U+D37C, U+D3F0, U+D551, U+D5A5, U+D5C8, U+D5D8, U+D63C, U+D64D, U+D669, U+D734, U+D76C;
}

/* [88] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.88.woff2) format('woff2-variations');
	unicode-range: U+0026, U+002B, U+003E, U+0040, U+007E, U+AC01, U+AC19, U+AC1D, U+ACA0, U+ACA9, U+ACB0, U+AD8C, U+AE09, U+AE38, U+AE40, U+AED8, U+B09C, U+B0A0, U+B108, U+B204, U+B298, U+B2D8, U+B2EB-B2EC, U+B2F4, U+B313, U+B358, U+B450, U+B4E0, U+B54C, U+B610, U+B780, U+B78C, U+B791, U+B8E8, U+B958, U+B974, U+B984, U+B9B0, U+B9BC-B9BD, U+B9CE, U+BA70, U+BBFC, U+BC0F, U+BC15, U+BC1B, U+BC31, U+BC95, U+BCC0, U+BCC4, U+BD81, U+BD88, U+C0C8, U+C11D, U+C13C, U+C158, U+C18D, U+C1A1, U+C21C, U+C4F0, U+C54A, U+C560, U+C5B8, U+C5C8, U+C5F4, U+C628, U+C62C, U+C678, U+C6CC, U+C808, U+C810, U+C885, U+C88B, U+C900, U+C988, U+C99D, U+C9C8, U+CC3D-CC3E, U+CC45, U+CD08, U+CE20, U+CEE4, U+D074, U+D0A4, U+D0DD, U+D2B9, U+D3B8, U+D3C9, U+D488, U+D544, U+D559, U+D56D, U+D588, U+D615, U+D648, U+D655, U+D658, U+D65C;
}

/* [89] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.89.woff2) format('woff2-variations');
	unicode-range: U+007C, U+AC10, U+AC15, U+AC74, U+AC80, U+AC83, U+ACC4, U+AD11, U+AD50, U+AD6D, U+ADFC, U+AE00, U+AE08, U+AE4C, U+B0A8, U+B124, U+B144, U+B178, U+B274, U+B2A5, U+B2E8, U+B2F9, U+B354, U+B370, U+B418, U+B41C, U+B4F1, U+B514, U+B798, U+B808, U+B824-B825, U+B8CC, U+B978, U+B9D0, U+B9E4, U+BAA9, U+BB3C, U+BC18, U+BC1C, U+BC30, U+BC84, U+BCF5, U+BCF8, U+BD84, U+BE0C, U+BE14, U+C0B0, U+C0C9, U+C0DD, U+C124, U+C2DD, U+C2E4, U+C2EC, U+C54C, U+C57C-C57D, U+C591, U+C5C5-C5C6, U+C5ED, U+C608, U+C640, U+C6B8, U+C6D4, U+C784, U+C7AC, U+C800-C801, U+C9C1, U+C9D1, U+CC28, U+CC98, U+CC9C, U+CCAD, U+CD5C, U+CD94, U+CD9C, U+CDE8, U+CE68, U+CF54, U+D0DC, U+D14C, U+D1A0, U+D1B5, U+D2F0, U+D30C, U+D310, U+D398, U+D45C, U+D50C, U+D53C, U+D560, U+D568, U+D589, U+D604, U+D6C4, U+D788;
}

/* [90] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.90.woff2) format('woff2-variations');
	unicode-range: U+AC04, U+AC1C, U+AC70, U+AC8C, U+ACBD, U+ACF5, U+ACFC, U+AD00, U+AD6C, U+ADF8, U+B098, U+B0B4, U+B294, U+B2C8, U+B300, U+B3C4, U+B3D9, U+B4DC, U+B4E4, U+B77C, U+B7EC, U+B85D, U+B97C, U+B9C8, U+B9CC, U+BA54, U+BA74, U+BA85, U+BAA8, U+BB34, U+BB38, U+BBF8, U+BC14, U+BC29, U+BC88, U+BCF4, U+BD80, U+BE44, U+C0C1, U+C11C, U+C120, U+C131, U+C138, U+C18C, U+C218, U+C2B5, U+C2E0, U+C544, U+C548, U+C5B4, U+C5D0, U+C5EC, U+C5F0, U+C601, U+C624, 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+C77C, U+C785, U+C788, U+C790-C791, U+C7A5, U+C804, U+C815, U+C81C, U+C870, U+C8FC, U+C911, U+C9C4, U+CCB4, U+CE58, U+CE74, U+D06C, U+D0C0, U+D130, U+D2B8, U+D3EC, U+D504, U+D55C, U+D569, U+D574, U+D638, U+D654, U+D68C;
}

/* [91] */
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-display: swap;
	font-weight: 45 920;
	src: url(/fonts/pretendard/woff2-dynamic-subset/PretendardVariable.subset.91.woff2) format('woff2-variations');
	unicode-range: U+0020-0022, U+0027-002A, U+002C-003B, U+003F, U+0041-005D, U+0061-007B, U+007D, U+00A0-00A1, U+00AB, U+00AD-00AE, U+00B7, U+00BB, U+00BF, U+2013-2014, U+201C-201D, U+2122, U+AC00, U+ACE0, U+AE30, U+B2E4, U+B85C, U+B9AC, U+C0AC, U+C2A4, U+C2DC, U+C774, U+C778, U+C9C0, U+D558;
}

/* ── site subset — GENERATED by tools/fonts-subset.py — do not hand-edit ── */
/* Site subset(s) — checked FIRST by the browser (last @font-face wins for overlapping unicode-range,
   CSS Fonts 4 §4.5). Glyphs outside these exact ranges fall back to the dynamic chunks above. */
/* site-ko.b4d523e1.woff2 — 624 chars · 106,356 B */
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-display: swap;
  font-weight: 45 920;
  src: url('/fonts/pretendard/site-ko.b4d523e1.woff2') format('woff2-variations'),
       url('/fonts/pretendard/site-ko.b4d523e1.woff2') format('woff2');
  unicode-range: U+318D, U+AC00-AC01, U+AC04, U+AC08, U+AC10-AC12, U+AC15-AC16, U+AC19, U+AC1C, U+AC31, U+AC70, U+AC74, U+AC78, U+AC80, U+AC83, U+AC89, U+AC8C, U+AC90, U+ACA0, U+ACA8-ACA9, U+ACAC, U+ACB0, U+ACB8, U+ACBD, U+ACC4, U+ACE0-ACE1, U+ACE8, U+ACF3, U+ACF5, U+ACFC-ACFD, U+AD00, U+AD04, U+AD0C, U+AD11, U+AD50, U+AD6C-AD6D, U+AD70, U+AD81, U+AD8C, U+ADA4, U+ADC0, U+ADDC, U+ADE0, U+ADF8-ADF9, U+ADFC, U+AE00, U+AE08-AE09, U+AE30, U+AE34, U+AE40, U+AE4C, U+AE50, U+AEBC, U+AED8, U+AEF4, U+AF2D, U+AFB8, U+AFD4, U+B044, U+B098, U+B0A0, U+B0A8, U+B0B4, U+B0C9, U+B0D0, U+B108, U+B110, U+B124, U+B137, U+B144, U+B150, U+B178, U+B17C, U+B192-B193, U+B204, U+B208, U+B274, U+B290, U+B294, U+B298, U+B2A5, U+B2C8-B2C9, U+B2CC, U+B2D0, U+B2D9, U+B2DD, U+B2E4, U+B2E8, U+B2EB-B2EC, U+B2F4-B2F5, U+B2F9, U+B300, U+B354-B355, U+B358, U+B35C, U+B370, U+B374, U+B378, U+B3C4-B3C5, U+B3C8, U+B3CC, U+B3D9, U+B410, U+B418, U+B41C, U+B420, U+B429, U+B450, U+B458, U+B465, U+B4A4, U+B4B7, U+B4C0, U+B4D0, U+B4DC-B4DD, U+B4E0, U+B4E4, U+B4EC-B4ED, U+B4F1, U+B514, U+B518, U+B51C, U+B530, U+B54C, U+B5A4, U+B5BB, U+B610, U+B6F0, U+B77C-B77D, U+B780, U+B784, U+B78C-B78D, U+B791, U+B798, U+B79C, U+B7A8, U+B7B5, U+B7C9, U+B7EC, U+B7F0, U+B7FC-B7FD, U+B808, U+B819, U+B824-B825, U+B828, U+B834, U+B839, U+B840, U+B85C-B85D, U+B860, U+B864, U+B86C-B86D, U+B86F, U+B8B0, U+B8CC, U+B8E8-B8E9, U+B8EC, U+B8F9, U+B904, U+B958, U+B960, U+B974, U+B978, U+B97C, U+B984-B985, U+B9AC-B9AD, U+B9B0, U+B9B4, U+B9BD, U+B9C1, U+B9C8-B9C9, U+B9CC, U+B9CE, U+B9D0, U+B9DD-B9DE, U+B9E1, U+B9E4, U+B9E8, U+BA38, U+BA3C, U+BA4D, U+BA54-BA55, U+BA58, U+BA5C, U+BA70, U+BA74, U+BA85, U+BAA8-BAA9, U+BAAC, U+BAB0, U+BABB, U+BABD, U+BB34, U+BB38, U+BB3B-BB3C, U+BBA4, U+BBAC, U+BBC0, U+BBF8-BBF9, U+BBFC, U+BC00, U+BC0F, U+BC14-BC16, U+BC18, U+BC1B-BC1D, U+BC24, U+BC29, U+BC30-BC31, U+BC38, U+BC84, U+BC88, U+BC8C, U+BC94-BC95, U+BCA0, U+BCA4, U+BCA8, U+BCBD, U+BCC0, U+BCC4, U+BCD1, U+BCF4-BCF5, U+BCF8, U+BCFC, U+BD05, U+BD09, U+BD80-BD81, U+BD84, U+BD88, U+BDF0, U+BE0C, U+BE44, U+BE48, U+BE4C, U+BE60, U+C0AC-C0AD, U+C0B0, U+C0B4, U+C0B6, U+C0BC, U+C0C1, U+C0C8-C0C9, U+C0D8, U+C0DD, U+C0E4, U+C11C-C11E, U+C120, U+C124, U+C12C-C12D, U+C12F, U+C131, U+C138, U+C13C, U+C140, U+C148, U+C154, U+C158, U+C15C, U+C170, U+C178, U+C18C-C18D, U+C190, U+C194, U+C1A1, U+C1C4, U+C218-C219, U+C21C, U+C220, U+C228, U+C288, U+C290, U+C298, U+C2A4, U+C2AC, U+C2B5, U+C2DC-C2DD, U+C2E0, U+C2E4, U+C2EC-C2ED, U+C2F1, U+C2F6, U+C313, U+C368, U+C4F0, U+C501, U+C528, U+C544, U+C548-C54A, U+C54C, U+C554-C555, U+C558-C559, U+C560-C561, U+C564, U+C57C-C57D, U+C580, U+C587, U+C591, U+C5B4-C5B5, U+C5B8, U+C5BC, U+C5C5-C5C8, U+C5D0, U+C5D4, U+C5D8, U+C5E0, U+C5E3, U+C5EC-C5ED, U+C5F0, U+C5F4, U+C5FC-C5FD, U+C600-C601, U+C608, U+C624-C625, U+C628, U+C62C, U+C62E, U+C635, U+C640, U+C644, U+C654, U+C65C, U+C678, U+C694, U+C6A9, U+C6B0, U+C6B4, U+C6B8, U+C6C0-C6C1, U+C6C3, U+C6CC, U+C6D0, U+C6D4, U+C6E8, U+C6F9, U+C704, U+C720-C721, U+C724, U+C728, U+C73C, U+C740, U+C744, U+C74C, U+C751, U+C758, U+C774-C775, U+C778, U+C77C-C77D, U+C783-C785, U+C788, U+C790-C791, U+C794, U+C798, U+C7A0-C7A1, U+C7A5, U+C7AC, U+C7C1, U+C800-C801, U+C804, U+C808, U+C810-C811, U+C815-C816, U+C81C, U+C838, U+C870, U+C874, U+C878, U+C881, U+C885, U+C88C, U+C8C4, U+C8FC, U+C900, U+C904, U+C90D, U+C911, U+C988-C989, U+C998, U+C99D, U+C9C0-C9C1, U+C9C4, U+C9C8, U+C9D0-C9D1, U+C9D3, U+C9D5, U+C9DC, U+C9F8, U+CC28-CC29, U+CC30, U+CC38, U+CC3D, U+CC44-CC45, U+CC55, U+CC98, U+CC9C, U+CCA0, U+CCAB, U+CCAD, U+CCB4, U+CCD0, U+CD08-CD09, U+CD18, U+CD1D, U+CD2C, U+CD5C, U+CD94-CD95, U+CD98, U+CD9C, U+CDA4-CDA5, U+CDA9, U+CDB0, U+CDE8, U+CE20-CE21, U+CE35, U+CE58-CE59, U+CE5C, U+CE60, U+CE68-CE69, U+CE74, U+CE78, U+CE7C, U+CE84, U+CE90, U+CEE4, U+CEE8, U+CEEC, U+CEF4, U+CF00, U+CF1C, U+CF54, U+CF58, U+CF5C, U+CF69, U+CF70, U+CFE0, U+D034, U+D06C, U+D074, U+D0A4, U+D0A8, U+D0B9, U+D0C0-D0C1, U+D0C4, U+D0C8, U+D0D1, U+D0D5, U+D0DC-D0DD, U+D130, U+D134, U+D14C-D14D, U+D150, U+D154, U+D15C, U+D1A0, U+D1A4, U+D1A8, U+D1B5, U+D1F4, U+D22C, U+D280, U+D2B8-D2B9, U+D2C0, U+D2F0-D2F1, U+D2F4, U+D2F8, U+D305, U+D30C, U+D310, U+D314, U+D328, U+D37C, U+D398, U+D3A9, U+D3B8, U+D3C9, U+D3D0, U+D3EC-D3ED, U+D3F0, U+D3F4, U+D45C, U+D478, U+D488, U+D4E8, U+D504, U+D50C, U+D53C, U+D540, U+D544, U+D54D, U+D551, U+D558-D559, U+D55C, U+D560, U+D568-D569, U+D56D, U+D574-D575, U+D588-D589, U+D5A5, U+D5C8, U+D5CC, U+D5DD, U+D5E4, U+D5E8, U+D5EC, U+D600, U+D604, U+D608, U+D611, U+D615, U+D638, U+D63C, U+D648, U+D64D, U+D654-D655, U+D658, U+D65C, U+D669, U+D68C-D68D, U+D6A8, U+D6C4, U+D6FC, U+D734, U+D750, U+D754, U+D761, U+D765, U+D788, U+D78C, U+D798;
}
/* site-kana.f0530565.woff2 — 138 chars · 28,444 B */
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-display: swap;
  font-weight: 45 920;
  src: url('/fonts/pretendard/site-kana.f0530565.woff2') format('woff2-variations'),
       url('/fonts/pretendard/site-kana.f0530565.woff2') format('woff2');
  unicode-range: U+3042, U+3044, U+3046, U+3048, U+304A-3055, U+3057-3061, U+3063-306C, U+306E-3070, U+3072-3073, U+3075, U+3078-3079, U+307B-307C, U+307E-3082, U+3084, U+3086-308C, U+308F, U+3092-3093, U+30A1-30A4, U+30A6-30C1, U+30C3-30C4, U+30C6-30CB, U+30CD-30E5, U+30E7, U+30E9-30ED, U+30EF, U+30F3, U+30FB-30FC;
}
/* site-base.23a03707.woff2 — 182 chars · 46,112 B */
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-display: swap;
  font-weight: 45 920;
  src: url('/fonts/pretendard/site-base.23a03707.woff2') format('woff2-variations'),
       url('/fonts/pretendard/site-base.23a03707.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A3, U+00A5, U+00A7, U+00A9, U+00AE, U+00B0-00B3, U+00B5, U+00B7, U+00D7, U+00E3, U+00E9, U+00ED, U+00F4, U+00F7, U+03B1-03B3, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2025-2026, U+2030, U+203B, U+207A-207B, U+2082-2084, U+20A9, U+20AC, U+2103, U+2116, U+2122, U+2190-2193, U+2197, U+2248, U+25CB, U+25CF, U+2713, U+3001-3003, U+3008-3011, U+3014-3015, U+301C, U+FF01, U+FF05, U+FF08-FF09, U+FF0B-FF0C, U+FF0E, U+FF10-FF1B, U+FF1F;
}
/* ── end site subset ── */

/* ── Outfit (self-hosted variable) ── */
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/outfit/outfit-latin-vf.woff2') format('woff2-variations'),
       url('/fonts/outfit/outfit-latin-vf.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext (악센트 + 유럽 확장) */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/outfit/outfit-latin-ext-vf.woff2') format('woff2-variations'),
       url('/fonts/outfit/outfit-latin-ext-vf.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ═══ end fonts ═══ */
@layer legacy {
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Focus outline: 키보드 탐색 시에만 표시, 마우스 클릭 시 숨김 */
*:focus { outline: none; }
*:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
/* 아코디언/details 요소 파란 테두리 제거 */
details summary:focus,
.accordion-trigger:focus,
.sub-accordion-trigger:focus,
button:focus,
a:focus { outline: none; }
details summary:focus-visible,
.accordion-trigger:focus-visible,
.sub-accordion-trigger:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; }

/* Scroll reveal animations */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.revealed { opacity: 1; transform: translateY(0); }

/* Hero text entrance */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-inner > * {
  animation: heroFadeUp 0.7s ease forwards;
  opacity: 0;
}
.hero-inner > *:nth-child(1) { animation-delay: var(--dur-panel); }
.hero-inner > *:nth-child(2) { animation-delay: 0.42s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.54s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.66s; }
.hero-inner > *:nth-child(5) { animation-delay: 0.78s; }
.hero-inner > *:nth-child(6) { animation-delay: 0.90s; }
:root {
  /* ═══════════════════════════════════════════════════════════════════════════
     CELLOGRAM Design System — Tokens v5.1.0 · System v4.1 (Mauve single-tone + Surface 5-tier)
     ════════════════════════════════════════════════════════════════════════════ */

  /* ─── Brand colors (Mauve key) ─── */
  --color-brand:         #947F82;                    /* Primary — Mauve (PANTONE 4115 U-aligned) */
  --color-brand-deep:    #6F5D60;                    /* Pressed / deep accent */
  --color-brand-tint:    rgba(148,127,130,0.08);     /* Hover bg tint */
  --color-brand-light:   #C4B5B7;                    /* Secondary accent (Light Mauve) */
  --color-brand-glow:    rgba(148,127,130,0.18);     /* Brand shadow / focus */

  /* ─── Surface palette (mauve-undertone neutral, light) ─── */
  --surface-canvas:      #FBFAFA;                    /* Outer canvas (lightest) */
  --surface-1:           #F4F1F0;                    /* Page bg — subtle mauve undertone */
  --surface-2:           #ECE7E5;                    /* Card / elevated surface */
  --surface-3:           #E0D8D6;                    /* Hover / pressed elevated */
  --surface-sunk:        #D4CDC9;                    /* Sunken / strong border */

  /* ─── Surface palette (dark scope) ─── */
  --surface-dark-0:      #0A0A09;                    /* Deepest (hero/ECM scenes) */
  --surface-dark-1:      #1A1718;                    /* Mauve-shifted dark */
  --surface-dark-2:      #261F21;                    /* Card on dark */
  --surface-dark-3:      #312729;                    /* Elevated card on dark */

  /* ─── Text palette (warm charcoal with mauve undertone) ─── */
  --text-primary:        #1F1A1B;                    /* 95% — main text */
  --text-secondary:      #4A4042;                    /* 75% — secondary heading */
  --text-tertiary:       #6B6263;                    /* 55% — meta / caption */
  --text-disabled:       #9C9091;                    /* 35% — disabled */
  --text-inverse:        #F5F0EE;                    /* on dark — primary */
  --text-inverse-mid:    rgba(245,240,238,0.85);     /* on dark — secondary */
  --text-inverse-soft:   rgba(245,240,238,0.7);      /* on dark — tertiary · P1-A3 v5.0: 0.6→0.7 (AA+ 6.5:1) */

  /* ─── Border palette ─── */
  --border-subtle:       #EDE6E4;                    /* Just-visible dividers */
  --border-default:      #DDD2CE;                    /* Inputs, cards */
  --border-strong:       #B8A6A2;                    /* Focus, emphasis */
  --border-brand:        var(--color-brand-light);   /* Brand interactive */

  /* ─── Spacing scale (4-multiple, 8-point grid) ─── */
  --space-0:     0;
  --space-1:     4px;
  --space-2:     8px;
  --space-3:     12px;
  --space-4:     16px;
  --space-5:     20px;
  --space-6:     24px;
  --space-8:     32px;
  --space-10:    40px;
  --space-12:    48px;
  --space-14:    56px;
  --space-16:    64px;
  --space-20:    80px;
  --space-24:    96px;
  --space-30:    120px;
  --space-40:    160px;

  /* ─── Border radius ─── */
  --radius-none:  0;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-pill:  9999px;
  /* Concentric inner radius — a rounded element nested inside a rounded card should use
     (parent radius − its inset padding) so both corner arcs stay visually concentric.
     Canonical case: a --radius-lg (12px) card with a --space-2 (8px) inset ⇒ 4px inner.
     Derived convenience token (not a design-tokens.json leaf ⇒ drift-check ignores it). · v6 B7a */
  --radius-inner: calc(var(--radius-lg) - var(--space-2));

  /* ─── Shadow scale ─── */
  --shadow-sm:    0 1px 2px rgba(31,26,27,0.05);
  --shadow-md:    0 4px 12px rgba(31,26,27,0.08);
  --shadow-lg:    0 12px 32px rgba(31,26,27,0.12);
  --shadow-xl:    0 24px 64px rgba(31,26,27,0.16);
  --shadow-mauve: 0 8px 24px var(--color-brand-glow);     /* Brand glow */
  --shadow-focus: 0 0 0 3px rgba(196,181,183,0.4);        /* Accent focus ring */

  /* ─── Frosted Glass — CELLOGRAM apothecary vial-glass (same values as /design) ───
     High-opacity frost (≥72%), mauve-tinted (#FAF8F8 warm off-white), saturate(150%).
     Depth = HAIRLINE BORDER + INSET RIM-LIGHT. NO offset drop shadow (brand rule).
     Resolution-independent (no px dims to scale).

     v6 B3 — formalized into a 4-tier scale (blur ↑ + tint-alpha ↑ = denser/more legible).
     Each tier carries an opaque SOLID twin from the mauve neutrals for the a11y
     fallback (prefers-reduced-transparency / no backdrop-filter support). */
  --glass-ultrathin-bg:    rgba(250, 248, 248, 0.72);     /* media overlays — lightest legible */
  --glass-ultrathin-blur:  blur(8px)  saturate(150%);
  --glass-ultrathin-solid: var(--surface-1);
  --glass-thin-bg:         rgba(250, 248, 248, 0.78);
  --glass-thin-blur:       blur(14px) saturate(150%);
  --glass-thin-solid:      var(--surface-1);
  --glass-regular-bg:      rgba(250, 248, 248, 0.80);     /* DEFAULT — = legacy --glass-bg */
  --glass-regular-blur:    blur(18px) saturate(150%);     /*           = legacy --glass-blur */
  --glass-regular-solid:   var(--surface-1);
  --glass-thick-bg:        rgba(250, 248, 248, 0.85);     /* menus/modals — high legibility */
  --glass-thick-blur:      blur(30px) saturate(150%);
  --glass-thick-solid:     var(--surface-2);

  /* Legacy aliases — repointed at their tier so every existing consumer renders
     IDENTICALLY (zero visual drift). soft→ultrathin (.72 exact), strong→thick
     (.85 exact), bg/blur→regular (exact). DO NOT hand-edit the rgba here. */
  --glass-bg:        var(--glass-regular-bg);             /* → rgba(250,248,248,0.80) */
  --glass-bg-soft:   var(--glass-ultrathin-bg);           /* → rgba(250,248,248,0.72) */
  --glass-bg-strong: var(--glass-thick-bg);               /* → rgba(250,248,248,0.85) */
  --glass-blur:      var(--glass-regular-blur);           /* → blur(18px) saturate(150%) */
  --glass-border:    1px solid rgba(111, 93, 96, 0.22);   /* hairline mauve */
  --glass-rim:                                            /* INSET rim-light only — no offset */
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);

  /* ─── Legacy aliases (backward compat — DO NOT USE in new code) ─── */
  --bg:                  var(--surface-1);
  --surface:             var(--surface-2);
  --dark-bg:             var(--surface-3);
  --charcoal:            var(--text-primary);
  --ash:                 var(--text-tertiary);
  --stone:               var(--border-default);
  --accent:              var(--color-brand-light);
  --text-on-dark:        var(--text-inverse);
  --text-on-dark-mid:    var(--text-inverse-mid);
  --text-on-dark-soft:   var(--text-inverse-soft);
  --white:               #FFFFFF;                    /* 64 회 직접 사용 → 단일 source */
  --black:               var(--surface-dark-0);      /* prototypes/concepts background — 브랜드 다크 정렬 */
  --mauve:               var(--color-brand);         /* 브랜드 색 강조 alias (inquiry prototypes) */

  /* ─── Font families — 2-font 시스템 (영문 Outfit + 한글 Pretendard) ─── */
  --display:  'Outfit', 'Pretendard', sans-serif;     /* Display headings */
  --body:     'Outfit', 'Pretendard', sans-serif;     /* Body — 영문 Outfit, 한글 Pretendard fallback */
  --en:       'Outfit', sans-serif;                    /* English-only label (한글 fallback 의도적 제외) */
  --ko:       'Pretendard', 'Outfit', sans-serif;     /* Korean primary — Pretendard */

  /* ═══ Slide layout tokens (vh 기반 — FHD/2K/4K 공통) ═══ */
  --slide-pad-y:    clamp(48px, 6vh, 120px);
  --slide-pad-x:    clamp(32px, 4vw, 140px);
  --slide-gap-lg:   clamp(24px, 3vh, 56px);
  --slide-gap-md:   clamp(16px, 2vh, 32px);
  --slide-gap-sm:   clamp(8px, 1vh, 16px);

  /* ═══ Typography 5-tier (vh 기반, 모든 viewport 자동 비례) ═══
     Display → H1 → H2 → H3 → Body Lead → Body → Caption → Label → Quote */
  --fs-display:     clamp(56px, 9vh, 172px);     /* Page core / hero */
  --fs-hero:        var(--fs-display);            /* alias (legacy code) */
  --fs-h1:          clamp(40px, 7vh, 128px);      /* Top section */
  --fs-h2:          clamp(32px, 5.5vh, 92px);     /* Mid section */
  --fs-h3:          clamp(22px, 3.5vh, 52px);     /* Subsection */
  --fs-body-lg:     clamp(20px, 2.04vh, 30px);    /* Lead paragraph */
  --fs-body:        clamp(16px, 1.67vh, 24px);    /* Body */
  --fs-sm:          clamp(13px, 1.3vh, 20px);     /* Caption */
  --fs-tag:         clamp(12px, 1.2vh, 18px);     /* Label / kicker */
  --fs-quote:       clamp(18px, 2.2vh, 28px);     /* Quote (italic + border-left) */

  /* ─── Line-height — Pretendard 한글 최적값 (사이트 primary lang = 한국어) ─── */
  --lh-display:     1.05;     /* Hero — 한글 최적 (영문 1.1) */
  --lh-tight:       1.1;      /* Heading 압축 */
  --lh-heading:     1.25;     /* H1-H3 — 한글 최적 (영문 1.3) */
  --lh-body:        1.7;      /* Body — role default (denser 절충; 한글 vs 영문 1.5) · v6 A6 */
  --lh-reading:     1.85;     /* Long-form section prose — reading air · v6 A6 */
  --lh-tight-body:  1.6;      /* Compact body */
  --lh-small:       1.5;      /* Small / Caption */

  /* ─── Letter-spacing — Pretendard 한글 최적값 (토스/스포카/Pretendard 공식 가이드) ─── */
  --ls-display:     -0.034em;  /* 40px+ Hero/H1 — 한글 글자 강하게 좁힘 */
  --ls-heading:     -0.022em;  /* 24-32px H2/H3 */
  --ls-body:        -0.011em;  /* 16-20px Body */
  --ls-small:       -0.005em;  /* 12-14px Small */
  --ls-tight:       -0.034em;  /* alias for display */
  --ls-normal:       0;
  --ls-loose:        0.02em;
  --ls-label:        0.18em;   /* uppercase tag/eyebrow */

  /* ─── Font-weight — Pretendard 한글 최적값 ─── */
  --fw-display:     200;       /* Hero — ExtraLight (영문 100 thin 대비 +1) */
  --fw-h1:          300;       /* H1 — Light */
  --fw-h2:          400;       /* H2 — Regular */
  --fw-h3:          500;       /* H3 — Medium */
  --fw-body-lg:     400;       /* Body Lead */
  --fw-body:        400;       /* Body — Regular */
  --fw-small:       500;       /* Small — Medium (한글 작은 사이즈 가독성 보강) */
  --fw-tag:         600;       /* Label — SemiBold */
  --fw-strong:      700;       /* Strong emphasis — Bold */
  --fw-display-strong: 800;    /* Display strong — ExtraBold */

  /* ═══════════════════════════════════════════════════════════════════════════
     Design System v5.0 — Phase 5 신규 토큰 (P0/P1)
     ════════════════════════════════════════════════════════════════════════════ */

  /* ─── P0-T1: Outfit 3-tier weight policy (overrides 위 fw-* 다양화 점진 정리) ─── */
  --fw-body-en:     400;       /* Outfit Body — Regular */
  --fw-medium:      500;       /* Outfit Medium — emphasis */
  --fw-heading-en:  400;       /* Outfit Heading — Regular (절제된 위계) */

  /* ─── P0-T2: Display tier 80–200px (hero-xl) ─── */
  --fs-display-xl:  clamp(80px, 12vh, 200px);   /* Mega hero / first-fold impact */

  /* ─── P1-T4: Body line-height 1.65 (한글 1.85 보다 컴팩트 영문 우선) ─── */
  --lh-body-en:     1.65;      /* Outfit body 영문 우선 컴팩트 */

  /* ─── P1-S3: Half-step spacing (hairline use) ─── */
  --space-half:     2px;       /* Border/hairline tweak */

  /* ─── P1-C3: Cream surface (Aesop/La Mer warm beige scope) ─── */
  --surface-cream:  #F4F1EB;   /* Editorial cream BG (no-card 변형) */

  /* ─── P0-M1/M2: Motion tokens — easing 3-tier 통합 + duration ─── */
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);      /* Material standard / 일반 transition */
  --ease-out-quart: cubic-bezier(0.16, 1, 0.3, 1);     /* Page reveal / hero entrance */
  --ease-elastic:   cubic-bezier(0.22, 1, 0.36, 1);    /* Card / panel pop */
  --dur-micro:      200ms;     /* Micro-interaction (hover/press) */
  --dur-panel:      300ms;     /* Panel/menu open-close */
  --dur-page:       500ms;     /* Page section reveal */

  /* ─── P0-S1: Section padding token ─── */
  --section-pad-y:  clamp(48px, 8vh, 120px);

  /* ─── P0-Co1: Card max padding upper bound ─── */
  --card-pad-max:   var(--space-12);  /* 48px — 카드 padding 상한 */

  /* ═══════════════════════════════════════════════════════════════════════════
     Design System v6.0 — Phase A (grounded fixes) · mauve single-tone preserved
     ════════════════════════════════════════════════════════════════════════════ */

  /* ─── A2: On-fill role — text/icon color sitting on a mauve/brand fill ─── */
  --on-primary:            #FFFFFF;                    /* resolves to white; kills raw #FFFFFF on brand fills */

  /* ─── A3: Functional status colors (low-chroma warm, functional-only — form feedback) ─── */
  --status-error:          #A83E38;                    /* Form error text */
  --status-error-bg:       rgba(168,62,56,0.08);       /* Error surface tint */
  --status-error-border:   rgba(168,62,56,0.28);       /* Error hairline */
  --status-success:        #5E7A5A;                    /* Form success text */
  --status-success-bg:     rgba(94,122,90,0.08);       /* Success surface tint */
  --status-success-border: rgba(94,122,90,0.28);       /* Success hairline */
  --status-info:           var(--color-brand);         /* Info — brand mauve */

  /* ─── A4: Tabular (fixed-width) numerals for aligned-number contexts ─── */
  --fvn-tabular:           tabular-nums;

  /* ═══════════════════════════════════════════════════════════════════════════
     Design System v6 · Phase B foundations (defined here, applied in later steps)
     — additive only; these tokens are UNUSED until a later step wires them in.
     ════════════════════════════════════════════════════════════════════════════ */

  /* Semantic role pairs (M3 on-* / outline) */
  --on-surface:          var(--text-primary);
  --on-surface-variant:  var(--text-tertiary);
  --outline:             var(--border-default);
  --outline-variant:     var(--border-subtle);

  /* Interaction state layers (M3, restraint-tuned below M3's 8/12/16) */
  --state-hover:  6%;
  --state-focus:  10%;
  --state-press:  9%;

  /* Elevation — shadow-free, consumes the mauve surface tiers (M3 tonal ∩ iOS material) */
  --elevation-0:  var(--surface-canvas);
  --elevation-1:  var(--surface-1);
  --elevation-2:  var(--surface-2);
  --elevation-3:  var(--surface-3);

  /* z-index scale */
  --z-base:     0;
  --z-raised:   10;
  --z-nav:      100;
  --z-overlay:  1000;
  --z-modal:    1100;
  --z-toast:    1200;

  /* Press / focus spring (iOS, critically damped — NO overshoot, quiet-luxury) */
  --press-scale:  0.98;
  --dur-press:    120ms;
  --ease-press:   cubic-bezier(0.2, 0, 0, 1);

  /* ═══════════════════════════════════════════════════════════════════════════
     Design System v6 · Phase B4 — Composite type-role tokens
     Bundle the hand-composed 4-token type recipe (size · line-height ·
     letter-spacing · weight) into ONE role per element. CSS `font` shorthand
     omits letter-spacing, so a role is a SMALL SET consumed via a `.type-*`
     utility class (defined near end of file), not a single shorthand var.
     Value-preserving ALIASES of the --fs/--lh/--ls/--fw scales → zero render
     change. OPT-IN: nothing restyles until a `.type-*` class is added to markup;
     retrofit of existing classes is deferred to a later verified pass.
     ════════════════════════════════════════════════════════════════════════════ */
  --type-h1-size:      var(--fs-h1);    --type-h1-lh:      var(--lh-heading);  --type-h1-ls:      var(--ls-display);  --type-h1-fw:      var(--fw-h1);
  --type-h2-size:      var(--fs-h2);    --type-h2-lh:      var(--lh-heading);  --type-h2-ls:      var(--ls-heading);  --type-h2-fw:      var(--fw-h2);
  --type-h3-size:      var(--fs-h3);    --type-h3-lh:      var(--lh-heading);  --type-h3-ls:      var(--ls-heading);  --type-h3-fw:      var(--fw-h3);
  --type-body-size:    var(--fs-body);  --type-body-lh:    var(--lh-body);     --type-body-ls:    var(--ls-body);     --type-body-fw:    var(--fw-body);
  --type-caption-size: var(--fs-sm);    --type-caption-lh: var(--lh-small);    --type-caption-ls: var(--ls-small);    --type-caption-fw: var(--fw-small);
  --type-label-size:   var(--fs-tag);   --type-label-lh:   var(--lh-small);    --type-label-ls:   var(--ls-label);    --type-label-fw:   var(--fw-tag);
}
html { scroll-behavior: smooth; background: var(--bg); }
body { font-family: var(--body); background: var(--bg); color: var(--charcoal); }

/* ─────────────────────────────────────────────────────────────────
   Hybrid Theme — Scoped Dark Sections
   :root는 light theme. Hero/ECM/CA/Mechanism/Composition 등 brand 임팩트
   섹션은 [data-slide-theme="dark"] 또는 .scene-dark로 격리해서 dark 유지.
   기존 .detail-light 패턴의 inverse — 검증된 구조.

   v3.0: scope 안에서 semantic 변수를 dark equivalent로 재정의.
   컴포넌트(.card 등)가 var(--surface-2) 등을 그대로 쓰면 자동 dark 적용.
   ──────────────────────────────────────────────────────────────── */
[data-slide-theme="dark"],
.scene-dark {
  /* Surface scope override (light → dark equivalent) */
  --surface-canvas: var(--surface-dark-0);
  --surface-1:      var(--surface-dark-0);
  --surface-2:      var(--surface-dark-2);
  --surface-3:      var(--surface-dark-3);
  --surface-sunk:   #050504;

  /* Text scope override */
  --text-primary:   var(--text-inverse);
  --text-secondary: var(--text-inverse-mid);
  --text-tertiary:  var(--text-inverse-soft);
  --text-disabled:  rgba(245,240,238,0.35);

  /* Border scope override (translucent on dark) */
  --border-subtle:  rgba(245,240,238,0.08);
  --border-default: rgba(245,240,238,0.16);
  --border-strong:  rgba(245,240,238,0.32);

  /* Legacy alias re-bind (so existing code following --bg/--charcoal also flips) */
  --bg:        var(--surface-1);
  --surface:   var(--surface-2);
  --dark-bg:   var(--surface-3);
  --charcoal:  var(--text-primary);
  --ash:       var(--text-tertiary);
  --stone:     var(--border-default);

  background: var(--surface-1) !important;
  color: var(--text-primary);
}
[data-slide-theme="light"] {
  background: var(--surface-1) !important;
  color: var(--text-primary);
}
[data-slide-theme="dark"] .ash,
.scene-dark .ash {
  color: var(--text-tertiary);
}

/* Light scope reset — dark scope 안에 nested 된 .detail-light/.scene-light 가
   parent dark token override를 덮고 다시 light tokens 으로 복귀.
   카드(.science-card, .ecm-phase-card 등)가 light card on dark page 시 핵심. */
.detail-light,
.scene-light,
[data-slide-theme="light"] {
  --surface-canvas: #FBFAFA;
  --surface-1:      #F4F1F0;
  --surface-2:      #ECE7E5;
  --surface-3:      #E0D8D6;
  --surface-sunk:   #D4CDC9;

  --text-primary:   #1F1A1B;
  --text-secondary: #4A4042;
  --text-tertiary:  #6B6263;
  --text-disabled:  #9C9091;

  --border-subtle:  #EDE6E4;
  --border-default: #DDD2CE;
  --border-strong:  #B8A6A2;

  /* Legacy alias re-bind */
  --bg:        var(--surface-1);
  --surface:   var(--surface-2);
  --dark-bg:   var(--surface-3);
  --charcoal:  var(--text-primary);
  --ash:       var(--text-tertiary);
  --stone:     var(--border-default);
}

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(17,17,16,0.85);
  border-bottom: 0.5px solid rgba(245,240,238,0.06);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(32px, 4vw, 120px); height: clamp(56px, 6.5vh, 96px);
  backdrop-filter: blur(16px);
  /* Dark glass: subtle inset rim-light for the glass edge (no offset shadow) */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: background var(--dur-micro) ease, border-color var(--dur-micro) ease;
}
/* Nav light mode for bright sections — light glass edge */
nav.nav-light {
  background: rgba(240,239,237,0.9);
  border-bottom-color: rgba(31,26,27,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
nav.nav-light .nav-links a { color: rgba(31,26,27,0.78); }
/* Light mode: ALL link hovers → teal (override dark mode white) */
nav.nav-light .nav-links a:hover,
nav.nav-light .nav-links > .nav-dropdown > a:hover,
nav.nav-light .nav-links > .nav-dropdown:hover > a { color: var(--color-brand) !important; font-weight: 700; }
nav.nav-light .nav-links a.nav-cta { color: var(--color-brand); border-bottom: none; }
nav.nav-light .nav-links a.nav-cta:hover { color: var(--color-brand) !important; }
nav.nav-light .nav-lang { color: rgba(31,26,27,0.35); }
nav.nav-light .nav-logo img { filter: none; }
nav.nav-light .nav-home .logo-bracket { color: rgba(31,26,27,0.3); }
nav.nav-light .nav-home .logo-o { color: var(--color-brand); }
nav.nav-light .nav-dropdown:hover > a { color: var(--color-brand) !important; }
nav.nav-light .nav-dropdown-menu {
  background: rgba(240,239,237,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: none;
}
nav.nav-light .nav-dropdown-menu a { color: rgba(31,26,27,0.6); }
nav.nav-light .nav-dropdown-menu a:hover { color: var(--color-brand) !important; }
.nav-logo img { filter: brightness(0) invert(1); }
.nav-logo { text-decoration: none; display: flex; align-items: center; line-height: 0; }

/* ─── Social (IG · YouTube) — nav · mobile menu. FHD 18px 고정 → 2K ×1.5(27) → 4K ×2.0(36) → mobile. footer-social(20→30→40) 정합 ─── */
.nav-social { display: flex; align-items: center; gap: 14px; padding-left: 20px; border-left: 0.5px solid rgba(245,240,238,0.18); }
.nav-social a { display: inline-flex; align-items: center; color: rgba(245,240,238,0.58); transition: color var(--dur-panel), transform 0.25s ease; }
.nav-social a:hover { color: var(--text-inverse); transform: translateY(-1px); }
.nav-social svg { width: 18px; height: 18px; display: block; }
nav.nav-light .nav-social { border-left-color: rgba(31,26,27,0.16); }
nav.nav-light .nav-social a { color: rgba(31,26,27,0.5); }
nav.nav-light .nav-social a:hover { color: var(--color-brand-deep); }

.mobile-social { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 28px; padding-top: 24px; border-top: 0.5px solid rgba(245,240,238,0.12); }
.mobile-social a { display: inline-flex; color: rgba(245,240,238,0.72); transition: color var(--dur-panel); }
.mobile-social a:hover { color: var(--color-brand-light); }
.mobile-social svg { width: 22px; height: 22px; display: block; }

@media (min-width: 2560px) {
  .nav-social { gap: 21px; padding-left: 30px; }
  .nav-social svg { width: 27px; height: 27px; }
}
@media (min-width: 3840px) {
  .nav-social { gap: 28px; padding-left: 40px; }
  .nav-social svg { width: 36px; height: 36px; }
}
@media (max-width: 768px) { .nav-social { display: none; } }

.nav-links { display: flex; gap: clamp(32px, 3.2vw, 88px); align-items: stretch; height: 100%; }
/* Default nav: nav가 dark section 위(또는 페이지 진입 시) — light text 가정.
   Light section 위 진입 시 nav.js가 .nav-light 추가 → 113-129 라인 inverse 적용. */
.nav-links a { font-family: var(--display); font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: rgba(245,240,238,0.6); text-decoration: none; cursor: pointer; transition: color var(--dur-panel), transform 0.25s ease; display: flex; align-items: center; }
.nav-links > a:hover,
.nav-links > .nav-dropdown > a:hover,
.nav-links > .nav-dropdown:hover > a { color: var(--text-inverse) !important; font-weight: 700; }
.nav-links a.nav-cta { color: var(--color-brand); border-bottom: none; padding-bottom: 0; }
.nav-lang { font-family: var(--display); font-size: var(--fs-tag); letter-spacing: 0.1em; color: rgba(245,240,238,0.45); cursor: pointer; }
.container { max-width: min(1200px, 92vw); margin: 0 auto; padding: 0 clamp(24px, 3vw, 80px); }
@media (min-width: 2000px) { .container { max-width: min(1600px, 86vw); } }
@media (min-width: 2800px) { .container { max-width: min(2000px, 80vw); } }
@media (min-width: 3600px) { .container { max-width: min(2400px, 76vw); } }

/* HERO — Dark background with 3D torus */
#home { min-height: 100vh; padding-top: 64px; display: flex; flex-direction: column; background: var(--surface-dark-0); position: relative; overflow: hidden; }
/* Torus guide canvas — fixed overlay */
.torus-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 55; pointer-events: none; display: none; }
.torus-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.hero-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: clamp(140px, 14vh, 260px) clamp(32px, 4vw, 120px) clamp(80px, 8vh, 160px); max-width: 1100px; margin: 0 auto; width: 100%; position: relative; z-index: 2; }
.hero-eyebrow { font-family: var(--display); font-size: var(--fs-tag); letter-spacing: 0.28em; text-transform: uppercase; font-weight: 400; color: var(--color-brand); margin-bottom: var(--slide-gap-md); }
.hero-headline {
  font-family: var(--display); font-size: var(--fs-hero);
  font-weight: var(--fw-display); letter-spacing: var(--ls-display); line-height: var(--lh-display);  /* Pretendard 한글 hero 최적 */
  color: var(--text-on-dark); margin: 0 0 var(--slide-gap-lg);
  white-space: nowrap;
}
.hero-headline strong { font-weight: var(--fw-display-strong); letter-spacing: var(--ls-display); }

.hero-line { width: 36px; height: 1px; background: rgba(245,240,238,0.2); margin-bottom: var(--slide-gap-sm); }
.hero-copy-ko { font-family: var(--ko); font-size: var(--fs-body-lg); font-weight: var(--fw-body-lg); line-height: var(--lh-reading); color: rgba(245,240,238,0.6); letter-spacing: var(--ls-body); margin-bottom: var(--slide-gap-sm); }
.hero-copy-en { font-family: var(--body); font-size: var(--fs-body); font-weight: 300; line-height: 1.85; color: rgba(245,240,238,0.25); letter-spacing: 0.02em; margin-bottom: var(--slide-gap-lg); }
.hero-cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: var(--fs-tag); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--color-brand); cursor: pointer; border-bottom: 1px solid var(--color-brand); padding-bottom: 3px; transition: gap 0.25s; }
.hero-cta:hover { gap: 16px; }


.hero-scroll-indicator {
  display: flex; flex-direction: column; align-items: center;
  margin-top: 40px;
  animation: scrollBounce 2.5s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(8px); opacity: 1; }
}

.signal-strip { border-top: 0.5px solid rgba(245,240,238,0.06); display: flex; position: relative; z-index: 2; }
.signal-item { flex: 1; padding: 30px 40px; border-right: 0.5px solid rgba(245,240,238,0.06); text-align: center; }
.signal-item:last-child { border-right: none; }
.signal-num { font-family: var(--display); font-size: var(--fs-h3); font-weight: 100; color: var(--text-on-dark); letter-spacing: var(--ls-tight); line-height: 1; margin-bottom: 12px; }   /* H3 numeric */
.signal-num sup { font-size: 0.4em; color: var(--color-brand); font-weight: 600; }
.signal-label { font-family: var(--display); font-size: var(--fs-tag); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 500; color: rgba(245,240,238,0.35); margin-bottom: 5px; }
.signal-sub { font-family: var(--ko); font-size: var(--fs-tag); font-weight: 200; color: rgba(245,240,238,0.4); letter-spacing: 0.02em; }   /* Label tier */

.sec-tag { font-family: var(--display); font-size: var(--fs-sm); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--color-brand-deep); margin-bottom: var(--slide-gap-md); position: relative; padding-left: 18px; }
.sec-tag::before { content: ''; position: absolute; left: 0; top: 50%; width: 8px; height: 0.5px; background: var(--color-brand-deep); opacity: 0.6; }
/* Dark-scene guard: light page bg → deep mauve (above), but on dark surfaces
   restore the lighter mauve (teal-dark fails on dark; teal = 5.3:1 on #0A0A09). */
.scene-dark .sec-tag, [data-slide-theme="dark"] .sec-tag { color: var(--color-brand); }
.scene-dark .sec-tag::before, [data-slide-theme="dark"] .sec-tag::before { background: var(--color-brand); }
.sec-title { font-family: var(--display); font-size: var(--fs-h1); font-weight: var(--fw-h1); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--charcoal); margin-bottom: var(--slide-gap-sm); }
.sec-title strong { font-weight: var(--fw-display-strong); }
.sec-sub { font-family: var(--ko); font-size: var(--fs-body-lg); font-weight: var(--fw-body-lg); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--ash); max-width: 56ch; }

/* ══════════════════════════════════════════════════════
   SCENE SYSTEM — Scroll-snap section locking
   Each scene = full-viewport page, snaps into view
   ══════════════════════════════════════════════════════ */

/* Snap container — scoped to home page */
html.home-page {
  scroll-snap-type: y proximity;
}

/* Scene — full viewport, snaps */
.scene {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Hero scene */
.scene-inner {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: flex-start; align-items: center; text-align: center;
  padding: clamp(140px, 14vh, 280px) clamp(32px, 4vw, 120px) 0;
  max-width: min(2200px, 84vw); margin: 0 auto; width: 100%;
  position: relative; z-index: 2;
}

/* Scene content — positioned in one half */
.scene-content {
  position: absolute; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 80px 60px;
  z-index: 2; width: 50%;
}
.scene-content--left { left: 5%; padding-left: 80px; padding-right: 40px; }
.scene-content--right { right: 5%; padding-right: 80px; padding-left: 40px; }
.scene-content--center {
  position: relative; width: 100%;
  max-width: 800px; margin: auto;
  text-align: center; padding: 80px 52px;
  display: flex; flex-direction: column; align-items: center;
}

/* Scene typography — agency-level dramatic contrast */
.gs-heading {
  font-family: var(--display); font-size: var(--fs-h1);
  font-weight: var(--fw-h1); line-height: var(--lh-display); letter-spacing: var(--ls-display);  /* Pretendard 한글 최적 */
  color: var(--text-on-dark); margin-bottom: var(--slide-gap-md);
  white-space: nowrap;
}
.gs-heading strong { font-weight: var(--fw-display-strong); letter-spacing: var(--ls-display); }
/* Protocol center heading — single line */
.scene-content--center .gs-heading { white-space: nowrap; }
.gs-body {
  font-family: var(--ko); font-size: var(--fs-body-lg); font-weight: var(--fw-body);
  line-height: var(--lh-body); color: rgba(245,240,238,0.6); margin-bottom: var(--slide-gap-lg);  /* Pretendard 한글 본문 */
  max-width: 48ch; letter-spacing: var(--ls-body);
}
.gs-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display); font-size: var(--fs-tag);                     /* Label tier */
  letter-spacing: var(--ls-label); text-transform: uppercase;
  font-weight: 600; color: var(--color-brand); text-decoration: none;
  border-bottom: 1px solid rgba(148,127,130,0.4); padding-bottom: 4px;
  transition: gap var(--dur-panel) ease, border-color var(--dur-panel) ease;
}
.gs-cta:hover { gap: 12px; border-color: var(--color-brand); }

/* Cards — breathing hover */
.gs-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2px, 0.3vh, 8px); margin-bottom: clamp(28px, 2.4vh, 56px); }
/* Frosted glass — apothecary vial-glass. Light frost ⇒ dark text (see title/body below).
   Depth = hairline mauve border + INSET rim-light only (no offset drop shadow). */
.gs-card {
  position: relative;
  background: var(--glass-bg); padding: clamp(32px, 3vh, 72px) clamp(24px, 2.4vw, 64px);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-rim);
  -webkit-box-shadow: var(--glass-rim);
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
  /* Card-internal axis: 이미지와 모든 텍스트를 동일 center-axis에 정렬 */
  text-align: center;
}
/* Specular top-edge highlight — pseudo, not a shadow */
.gs-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 32%);
}
.gs-card > * { position: relative; z-index: 1; }
.gs-card .sec-tag { display: inline-block; }
.gs-card .gs-cta { display: inline-block; }
.gs-card:hover {
  background: var(--glass-bg-strong); border-color: rgba(148,127,130,0.30);
  transform: translateY(-2px);
}
/* Frosted-glass card ⇒ dark text (legible over high-opacity light frost; design.html glass values) */
.gs-card-title {
  font-family: var(--display); font-size: var(--fs-h3); font-weight: 800;       /* H3 tier */
  /* v6: 의도적 리터럴 — 유리 카드는 장면 테마와 무관하게 항상 어두운 글자(모드 불변).
     var(--text-primary) 로 바꾸면 dark scope 에서 뒤집혀 가독성이 깨진다. */
  color: #1F1A1B; margin-bottom: clamp(12px, 1vh, 24px); letter-spacing: var(--ls-tight);
}
.gs-card-body {
  font-family: var(--ko); font-size: var(--fs-body); font-weight: var(--fw-body);  /* Pretendard 본문 */
  color: #4A4042; line-height: var(--lh-body); letter-spacing: var(--ls-body); margin-bottom: clamp(14px, 1.2vh, 28px);
}
/* Light scope inverse (frost is light here too — keep dark text consistent) */
.scene-light .gs-card-title { color: var(--charcoal); }
.scene-light .gs-card-body { color: rgba(31,26,27,0.6); }

/* ── Glass a11y / unsupported fallbacks — solid surface, no blur, no specular ──
   .gs-card = light frost → solid light. .ecm-info-card = dark glass → solid dark
   (keeps its light-on-dark text legible). */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .gs-card { background: #FBFAFA; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .ecm-info-card { background: var(--surface-dark-0); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .gs-card::before, .ecm-info-card::before { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gs-card { background: #FBFAFA; }
  .ecm-info-card { background: var(--surface-dark-0); }
}

/* ── Dual-Axis (#scene-dual, .scene-dark) → scene-tinted liquid glass ──────────
   Not a black box: a clear, translucent panel tinted with the scene's own light
   (deep teal → mauve breath) that the particle field shows through, with its
   top/bottom edges dissolved into the field. The glass lives on ::before so the
   feather-mask never touches the text; the text band is only slightly denser for
   legibility. Brand glass = mauve rim + inset rim-light + soft mauve glow
   (no offset drop shadow). */
.scene-dark .gs-card {
  background: transparent;
  border: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: 0 0 54px rgba(146, 127, 130, 0.14);          /* outer mauve glow only — no offset */
  -webkit-box-shadow: 0 0 54px rgba(146, 127, 130, 0.14);
}
/* The glass — transparent, scene-tinted, feathered into the particle field */
.scene-dark .gs-card::before {
  inset: 0;
  background: linear-gradient(180deg,                       /* airy at image, denser at text band */
    rgba(13, 33, 39, 0.18) 0%,
    rgba(16, 32, 38, 0.24) 44%,
    rgba(23, 27, 33, 0.36) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(155%);
          backdrop-filter: blur(10px) saturate(155%);
  border: 1px solid rgba(186, 158, 163, 0.26);             /* mauve rim */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),     /* glass top rim-light */
              inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.scene-dark .gs-card:hover {
  background: transparent;
  box-shadow: 0 0 64px rgba(146, 127, 130, 0.20);
}
.scene-dark .gs-card:hover::before {
  background: linear-gradient(180deg,
    rgba(15, 36, 42, 0.24) 0%,
    rgba(18, 34, 40, 0.30) 44%,
    rgba(26, 29, 36, 0.42) 100%);
  border-color: rgba(196, 168, 173, 0.34);
}
/* a11y / no-backdrop fallback — solid tinted-deep-teal, no blur/mask (legible) */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .scene-dark .gs-card { background: #11242A; box-shadow: none; }
  .scene-dark .gs-card::before { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .scene-dark .gs-card { background: #11242A; box-shadow: none; }
  .scene-dark .gs-card::before { display: none; }
}

/* Stats — alive numbers */
.gs-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 36px; }
.gs-stat {
  text-align: center; padding: 20px 12px;
  border: 0.5px solid rgba(245,240,238,0.04);
  transition: border-color 0.4s ease;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.gs-stat:hover { border-color: rgba(148,127,130,0.12); }
.gs-stat-num {
  font-family: var(--display); font-size: var(--fs-h3); font-weight: 300;       /* H3 numeric */
  color: var(--charcoal); letter-spacing: var(--ls-tight);
  text-align: center; width: 100%; display: block;
}
/* sup balance: invisible ::before mirrors sup width so "30" is truly centered */
.gs-stat-num:has(sup)::before {
  content: "μm";
  font-size: 0.38em;
  font-weight: 600;
  visibility: hidden;
  margin-right: 0.08em;
}
.gs-stat-num sup {
  font-size: 0.38em; color: var(--color-brand); font-weight: 600;
  vertical-align: super; margin-left: 0.08em;
}
.gs-stat-label {
  font-family: var(--ko); font-size: var(--fs-tag); color: rgba(245,240,238,0.4);   /* Label tier */
  margin-top: 10px; letter-spacing: 0.04em; font-weight: 400;
  text-align: center; width: 100%; display: block;
}

/* ── "Alive" micro-animations ── */

/* Sec-tag: subtle breathing */
.sec-tag {
  animation: tagBreathe 4s ease-in-out infinite;
}
@keyframes tagBreathe {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* CTA arrow pulse */
.gs-cta::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  border-right: 1px solid var(--color-brand);
  border-top: 1px solid var(--color-brand);
  transform: rotate(45deg);
  transition: transform var(--dur-panel) ease;
}
.gs-cta:hover::after { transform: rotate(45deg) translateX(2px); }

/* Signal strip items — stagger entrance */
.signal-item {
  opacity: 0; transform: translateY(12px);
  animation: signalIn 0.6s ease forwards;
}
.signal-item:nth-child(1) { animation-delay: 0.8s; }
.signal-item:nth-child(2) { animation-delay: 0.95s; }
.signal-item:nth-child(3) { animation-delay: 1.1s; }
.signal-item:nth-child(4) { animation-delay: 1.25s; }
@keyframes signalIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Hero headline — cinematic entrance */
.hero-headline {
  animation: heroReveal 1.4s var(--ease-out-quart) var(--dur-micro) forwards;
  opacity: 0;
}
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(40px) scale(0.95); letter-spacing: 0.03em; }
  to { opacity: 1; transform: translateY(0) scale(1); letter-spacing: -0.02em; }
}

/* ── Content always visible — animation is enhancement only ── */
.sc-fade {
  opacity: 1;
  transform: translateY(0);
}

/* Scene content padding refinement */
.scene-content--left { left: 6%; padding-left: 72px; padding-right: 32px; }
.scene-content--right { right: 6%; padding-right: 72px; padding-left: 32px; }


/* ── BRAND PAGE ── */
.brand-about { padding: 80px 0; background: var(--surface); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; margin-top: 56px; }
.about-body { font-family: var(--ko); font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-reading); letter-spacing: var(--ls-body); color: var(--charcoal); }   /* Pretendard 본문 */
/* ═══ Quote tier — unified italic + border-left 패턴 ═══ */
.quote, blockquote {
  font-family: var(--display); font-size: var(--fs-quote); font-weight: 300;
  letter-spacing: var(--ls-loose); line-height: 1.5;
  color: inherit;
  border-left: 2px solid var(--color-brand); padding-left: clamp(16px, 1.2vw, 32px);
  font-style: italic;
  margin: 0 0 var(--slide-gap-md);
}
.quote--ko { font-family: var(--ko); font-style: normal; letter-spacing: -0.01em; line-height: 1.7; }
.quote--center { border-left: none; padding-left: 0; text-align: center; }

.about-slogan {
  font-family: var(--display); font-size: var(--fs-quote); font-weight: 300;
  letter-spacing: var(--ls-loose); color: var(--charcoal);
  border-left: 2px solid var(--color-brand); padding-left: 24px;
  margin-bottom: 40px; line-height: 1.5;
}
.about-pillars { display: flex; flex-direction: column; gap: 0; }
.pillar-item { padding: 20px 0; border-bottom: 0.5px solid var(--stone); }
.pillar-item:first-child { border-top: 0.5px solid var(--stone); }
.pillar-tag { font-family: var(--display); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--color-brand); margin-bottom: 6px; }
.pillar-title { font-family: var(--ko); font-size: 15px; font-weight: 500; color: var(--charcoal); margin-bottom: 4px; }
.pillar-desc { font-family: var(--ko); font-size: 12px; font-weight: 300; line-height: 1.85; color: var(--ash); }

.brand-etymology { padding: 72px 0; background: var(--bg); }
.etymology-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 56px; }
.etym-card { background: var(--surface); border: 0.5px solid var(--stone); padding: 48px 40px; }
.etym-letter { font-family: var(--display); font-size: 64px; font-weight: 700; line-height: 1; color: var(--charcoal); margin-bottom: 16px; }
.etym-letter span { color: var(--color-brand); }
.etym-ko { font-family: var(--ko); font-size: 22px; font-weight: 300; color: var(--charcoal); margin-bottom: 8px; }
.etym-en { font-family: var(--display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; color: var(--ash); margin-bottom: 20px; }
.etym-desc { font-family: var(--ko); font-size: 13px; font-weight: 300; line-height: 1.9; color: var(--ash); }
.etym-caption { margin-top: 32px; padding-top: 24px; border-top: 0.5px solid var(--stone); font-family: var(--ko); font-size: 13px; font-weight: 300; color: var(--ash); line-height: 1.8; grid-column: 1 / -1; }

.brand-philosophy { padding: 100px 0; background: var(--surface-dark-0); }
.philosophy-main {
  font-family: var(--display); font-size: clamp(28px, 4vw, 52px);
  font-weight: 200; line-height: 1.3; letter-spacing: 0.02em;
  color: var(--text-inverse); margin: 56px 0 48px;
}
.philosophy-body { font-family: var(--ko); font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-reading); letter-spacing: var(--ls-body); color: rgba(245,240,238,0.65); max-width: 640px; margin-bottom: 56px; }   /* Pretendard 본문 */
.philosophy-anchor {
  font-family: var(--ko); font-size: var(--fs-quote); font-weight: 300;        /* Quote tier — KO variant */
  color: var(--text-on-dark); line-height: 1.7;
  border-left: 2px solid var(--color-brand); padding-left: 24px; letter-spacing: -0.01em;
}

.brand-values { padding: 72px 0; background: var(--surface); }
.values-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; margin-top: 56px; }
.value-card { border: 0.5px solid var(--stone); padding: 40px 32px; }
.value-card-num { font-family: var(--display); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--color-brand); margin-bottom: 20px; }
.value-card-title { font-family: var(--ko); font-size: 18px; font-weight: 400; color: var(--charcoal); margin-bottom: 12px; letter-spacing: -0.01em; line-height: 1.4; }
.value-card-desc { font-family: var(--ko); font-size: 13px; font-weight: 300; line-height: 1.9; color: var(--ash); }


/* PRODUCTS */
#products { background: var(--bg); padding: 100px 0; }
.products-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; }
.sys-eq { font-family: var(--display); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; color: var(--ash); text-align: right; line-height: 2; }
.sys-eq strong { color: var(--color-brand); font-weight: 600; }
.product-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.product-card { background: var(--surface); padding: 48px 40px; border: 0.5px solid var(--stone); cursor: pointer; transition: border-color var(--dur-micro); }
.product-card:hover { border-color: var(--color-brand); }
.product-num { font-family: var(--display); font-size: var(--fs-tag); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 500; color: var(--color-brand); margin-bottom: 16px; }
.product-name { font-family: var(--display); font-size: var(--fs-h3); font-weight: 300; letter-spacing: 0.01em; color: var(--charcoal); margin-bottom: 6px; line-height: var(--lh-tight); }    /* H3 */
.product-role { font-family: var(--ko); font-size: var(--fs-tag); font-weight: 400; color: var(--ash); margin-bottom: 28px; }
.product-specs { display: flex; flex-direction: column; margin-bottom: 24px; }
.spec-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 0.5px solid var(--stone); font-family: var(--body); font-size: var(--fs-tag); }
.spec-key { font-weight: 300; color: var(--ash); }
.spec-val { font-weight: 400; color: var(--charcoal); }
.product-anchor { font-family: var(--body); font-size: var(--fs-sm); font-weight: 300; color: var(--color-brand); line-height: var(--lh-tight-body); font-style: italic; }   /* Caption italic */

/* SCIENCE */
#science { background: var(--surface-dark-0); padding: 100px 0; }
#science .sec-tag { color: var(--color-brand); }
#science .sec-title { color: var(--text-inverse); font-weight: 200; letter-spacing: 0.02em; }
#science .sec-sub { color: rgba(245,240,238,0.4); font-family: var(--ko); }
.science-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 52px; }
.science-card { background: var(--surface); border: 0.5px solid var(--border-subtle); padding: 48px 40px; }   /* token: auto-flip */
.sci-tag { font-family: var(--display); font-size: var(--fs-tag); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 500; color: var(--color-brand); margin-bottom: 22px; }
.sci-num { font-family: var(--display); font-size: var(--fs-h1); font-weight: 200; letter-spacing: -0.01em; color: var(--charcoal); line-height: 1; margin-bottom: 5px; }
.sci-sub { font-family: var(--display); font-size: var(--fs-tag); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; color: var(--text-tertiary); margin-bottom: 26px; }   /* token: auto-flip */
.sci-div { width: 28px; height: 1px; background: var(--color-brand); margin-bottom: 22px; }
.sci-desc { font-family: var(--ko); font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--text-secondary); }   /* Pretendard 본문, token: auto-flip */

/* TECHNOLOGY */
#technology { padding: 100px 0; }
#technology.detail-light { background: #F0EFED; }
.tech-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 52px; border: 0.5px solid var(--stone); }
.tech-feat { padding: 36px 32px; border-right: 0.5px solid var(--stone); border-bottom: 0.5px solid var(--stone); }
.tech-feat:nth-child(3n) { border-right: none; }
.tech-feat:nth-child(n+4) { border-bottom: none; }
.tech-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand); margin-bottom: 16px; }
.tech-feat-title { font-family: var(--display); font-size: 16px; font-weight: 500; color: var(--charcoal); margin-bottom: 8px; letter-spacing: 0.01em; }
.tech-feat-desc { font-family: var(--ko); font-size: 15px; font-weight: 300; line-height: 1.85; color: var(--ash); }
.sem-strip { margin-top: 2px; background: var(--surface); border: 0.5px solid var(--stone); padding: 26px 40px; display: flex; align-items: center; gap: 48px; }
.sem-label { font-family: var(--display); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: var(--ash); white-space: normal; word-break: break-all; }
.sem-vals { display: flex; gap: 48px; }
.sem-val { font-family: var(--body); font-size: 11px; font-weight: 300; color: var(--color-brand); letter-spacing: 0.03em; }

/* YOUR RECORD */
#inquiry { background: var(--surface); padding: 100px 0; }
.record-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 52px; }
.record-card { border: 1px solid var(--stone); padding: 48px 40px; cursor: pointer; transition: border-color 0.4s, background 0.4s, box-shadow 0.4s, transform var(--dur-panel) ease; }
.record-card:hover { border-color: var(--color-brand); background: rgba(148,127,130,0.1); box-shadow: 0 16px 60px rgba(148,127,130,0.2), 0 0 0 1px var(--color-brand); transform: translateY(-6px) scale(1.01); }
.record-card-tag { font-family: var(--display); font-size: var(--fs-tag); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 500; color: var(--color-brand); margin-bottom: 16px; }
.record-card-title { font-family: var(--display); font-size: var(--fs-h3); font-weight: var(--fw-h3); letter-spacing: var(--ls-heading); color: var(--text-on-dark); margin-bottom: 12px; line-height: var(--lh-heading); }
.record-card-desc { font-family: var(--ko); font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--text-on-dark-soft); margin-bottom: 28px; }
/* Light scope inverse — record-card on light section */
[data-slide-theme="light"] .record-card-title,
.scene-light .record-card-title { color: var(--charcoal); }
[data-slide-theme="light"] .record-card-desc,
.scene-light .record-card-desc { color: var(--ash); }
.record-cta { font-family: var(--display); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--color-brand); border-bottom: 1px solid var(--color-brand); padding-bottom: 2px; display: inline-block; }

.close-strip { background: var(--bg); border-top: 0.5px solid var(--stone); padding: 80px 52px; text-align: center; }
.close-ko { font-family: var(--ko); font-size: clamp(17px, 2vw, 24px); font-weight: 300; color: var(--charcoal); line-height: 1.8; margin-bottom: 10px; letter-spacing: -0.01em; }
.close-en { font-family: var(--body); font-size: 13px; font-weight: 300; color: var(--ash); letter-spacing: 0.02em; font-style: italic; }

/* ── NARRATIVE CTA STRIP ── */
/* ═══ SECTION NUMBER — 01/02/03 ═══ */
.scene-num {
  position: absolute; top: 72px; left: 52px; z-index: 3;
  font-family: var(--display); font-size: 10px; font-weight: 300;
  letter-spacing: 0.2em; color: rgba(245,240,238,0.15);
}

/* ═══ FULLSCREEN TYPOGRAPHY — Philosophy section ═══ */
.scene-fulltype {
  display: flex; align-items: center; justify-content: center;
}
.fulltype-content {
  text-align: center; max-width: 900px; padding: 0 52px;
}
.fulltype-heading {
  font-family: var(--ko); font-size: var(--fs-h1);
  font-weight: var(--fw-display); line-height: var(--lh-display); letter-spacing: var(--ls-display);  /* Pretendard 한글 H1 */
  color: var(--text-on-dark); margin: var(--slide-gap-md) 0 var(--slide-gap-lg);
}
.fulltype-heading strong { font-weight: var(--fw-display-strong); }
.fulltype-body {
  font-family: var(--ko); font-size: var(--fs-body-lg); font-weight: var(--fw-body-lg);
  line-height: var(--lh-body); letter-spacing: var(--ls-body); color: rgba(245,240,238,0.6);  /* Pretendard 본문 */
  margin-bottom: var(--slide-gap-lg);
}

/* ═══ SCIENCE CENTER LAYOUT ═══ */
.scene-science-center {
  display: flex; align-items: center; justify-content: center;
}
.science-center-content {
  text-align: center; max-width: 800px; padding: 0 52px;
}
.science-center-content .sec-tag { text-align: center; }
.gs-stats--row {
  display: flex; justify-content: center; gap: 2px; margin-bottom: 40px;
}

/* ═══ LIGHT THEME SECTION (Science) ═══ */
.scene-light { background: #F0EFED; }
.scene-light .sec-tag { color: var(--color-brand-deep); }
.scene-light .sec-tag::before { background: var(--color-brand-deep); }
.scene-light .gs-heading { color: var(--charcoal); }
.scene-light .gs-heading strong { color: var(--color-brand-deep); }
.scene-light .gs-body { color: rgba(31,26,27,0.72); }
.scene-light .gs-stat { border-color: rgba(31,26,27,0.08); }
.scene-light .gs-stat:hover { border-color: rgba(148,127,130,0.2); }
.scene-light .gs-stat-num { color: var(--charcoal); }
.scene-light .gs-stat-num sup { color: var(--color-brand-deep); }
.scene-light .gs-stat-label { color: rgba(31,26,27,0.72); }
.scene-light .gs-cta { color: var(--color-brand-deep); border-bottom-color: rgba(111,93,96,0.4); }
.scene-light .scene-num { color: rgba(31,26,27,0.1); }
.gs-stats--row .gs-stat { flex: 1; max-width: 160px; }

/* ═══ CTA CLOSE — fullscreen "기록" 회귀 ═══ */
.scene-close {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  height: calc(100vh - 54px); /* subtract nav height */
  margin-top: 54px; /* push below nav */
  scroll-snap-align: end; /* snap to bottom edge so footer is visible */
  padding: 0;
  background: #F0EFED;
  overflow: visible;
  box-sizing: border-box;
}
.close-content { text-align: center; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 52px; }
.close-headline {
  display: block; font-family: var(--ko); font-size: var(--fs-h1);
  font-weight: 100; color: var(--charcoal); text-decoration: none;
  letter-spacing: -0.03em; line-height: 1.25;
  transition: color 0.4s ease;
}
.close-headline strong { font-weight: 800; color: var(--color-brand-deep); }
.close-headline:hover { color: rgba(31,26,27,0.6); }
.close-headline:hover strong { color: var(--charcoal); }
.close-links {
  display: flex; align-items: center; justify-content: center; gap: clamp(20px, 1.6vw, 44px);
  margin-top: clamp(48px, 4vh, 96px);
}
.close-links a {
  font-family: var(--display); font-size: clamp(13px, 1.15vh, 22px); letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 500;
  color: rgba(31,26,27,0.55); text-decoration: none;
  transition: color var(--dur-panel);
}
.close-links a:hover { color: var(--color-brand-deep); }
.close-dot {
  display: block;
  width: clamp(4px, 0.4vh, 8px); height: clamp(4px, 0.4vh, 8px);
  border-radius: 50%; background: rgba(31,26,27,0.25);
}

/* ═══ SCROLL DOT NAVIGATION ═══ */
.scroll-nav {
  position: fixed; right: 28px; top: 50%; transform: translateY(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 16px;
}
.scroll-nav-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(245,240,238,0.15); cursor: pointer;
  transition: background var(--dur-panel), transform var(--dur-panel);
  position: relative;
}
.scroll-nav-dot:hover, .scroll-nav-dot.active {
  background: var(--color-brand); transform: scale(1.3);
}
.scroll-nav-dot span {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-family: var(--display); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(245,240,238,0.4);
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-panel);
}
.scroll-nav-dot:hover span { opacity: 1; }

/* Light section — dark nav dots */
.scroll-nav.light-mode .scroll-nav-dot { background: rgba(31,26,27,0.2); }
.scroll-nav.light-mode .scroll-nav-dot:hover,
.scroll-nav.light-mode .scroll-nav-dot.active { background: var(--color-brand-deep); }
.scroll-nav.light-mode .scroll-nav-dot span { color: rgba(31,26,27,0.5); }

/* ── PAGE FADE-IN ── */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
body { animation: pageFadeIn var(--dur-page) ease-out forwards; }

/* ── NAV [O] HOME ── */
.nav-home {
  font-family: var(--display) !important; font-size: 16px !important;
  font-weight: 700 !important; letter-spacing: 0 !important;
  text-transform: none !important; line-height: 1;
  padding-right: 0; border-right: none;
  margin-right: 0;
}
.nav-home .logo-bracket { font-weight: 300; color: rgba(245,240,238,0.35); transition: color var(--dur-panel); }
.nav-home .logo-o { color: var(--color-brand); font-weight: 700; transition: color var(--dur-panel); }
.nav-home:hover .logo-bracket { color: var(--text-inverse); }

/* ── NAV ACTIVE STATE ── */
.nav-links a.nav-active { color: var(--text-inverse); font-weight: 600; }

/* ── HAMBURGER ── */
.hamburger {
  display: none; background: none; border: none; cursor: pointer;
  width: 24px; height: 18px; position: relative; padding: 0;
}
.hamburger span {
  display: block; width: 100%; height: 1px;
  background: rgba(245,240,238,0.6); position: absolute; left: 0;
  transition: transform var(--dur-panel), opacity var(--dur-panel);
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 8px; }
.hamburger span:nth-child(3) { top: 16px; }

/* ── MOBILE MENU ── */
.mobile-menu {
  display: none; position: fixed; top: 54px; left: 0; right: 0; bottom: 0;
  background: rgba(241,239,238,0.97); backdrop-filter: blur(20px);
  flex-direction: column; padding: 40px 32px; gap: 0; z-index: 99;
  overflow-y: auto;
}
.mobile-menu.active { display: flex; }
.mobile-menu a {
  font-family: var(--display); font-size: 14px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 300; color: rgba(31,26,27,0.55);
  text-decoration: none; padding: 16px 0;
  border-bottom: 0.5px solid rgba(31,26,27,0.08);
  transition: color var(--dur-panel);
}
.mobile-menu a:hover { color: var(--charcoal); }
.mobile-menu a.nav-cta { color: var(--color-brand); border-bottom-color: var(--color-brand); margin-top: 16px; }

/* ── MOBILE MENU ACCORDION ── */
.mobile-group { }
.mobile-parent {
  font-family: var(--display); font-size: 14px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 300; color: rgba(31,26,27,0.55);
  padding: 0; cursor: default;
  border-bottom: 0.5px solid rgba(31,26,27,0.08);
  display: flex; align-items: center; justify-content: space-between;
}
.mobile-parent-link {
  flex: 1; padding: 16px 0; color: inherit; text-decoration: none;
  transition: color var(--dur-panel);
}
.mobile-parent-link:hover { color: var(--charcoal); }
.mobile-toggle {
  background: none; border: none; cursor: pointer;
  padding: 16px 0 16px 16px; color: inherit;
  display: flex; align-items: center;
}
.mobile-chevron { transition: transform var(--dur-panel) ease; flex-shrink: 0; }
.mobile-group.open .mobile-chevron { transform: rotate(180deg); }
.mobile-group.open .mobile-parent { color: var(--charcoal); }
.mobile-children {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease;
  display: flex; flex-direction: column;
}
.mobile-group.open .mobile-children { max-height: 300px; }

/* ── FOOTER — minimal single line ── */
/* ═══ FOOTER — inline, blends with CTA ═══ */
.footer-inline {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 0 52px 20px;
  width: 100%; flex-shrink: 0;
}
.footer-inline span, .footer-inline a {
  font-family: var(--body); font-size: 10px; font-weight: 300;
  color: rgba(31,26,27,0.72); text-decoration: none;
}
.footer-inline a:hover { color: var(--color-brand-deep); }
.footer-sep-dot { width: 2px; height: 2px; border-radius: 50%; background: rgba(31,26,27,0.28); }

/* ── FOOTER — social icons (IG · YouTube) — 컬러·hover는 각 푸터 링크 룰 상속 ── */
.footer-social { display: inline-flex; align-items: center; gap: 14px; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.footer-social svg { width: 20px; height: 20px; display: block; }
.legal-footer .footer-social { display: flex; margin-top: 16px; }
/* 푸터 링크·소셜 키보드 focus 표시 (a11y) */
.footer-inline a:focus-visible, .detail-footer a:focus-visible, .legal-footer a:focus-visible, .footer-social a:focus-visible {
  outline: 2px solid var(--color-brand); outline-offset: 3px; border-radius: 3px;
}
/* 좁은 화면에서 한 줄 초과 시 아이콘 그룹 줄바꿈 허용 */
@media (max-width: 768px) { .footer-inline { flex-wrap: wrap; row-gap: 2px; } }
/* 2K/4K — FHD baseline ×1.5 / ×2.0 (멀티해상도 비례 룰) */
@media (min-width: 2560px) { .footer-social svg { width: 30px; height: 30px; } }
@media (min-width: 3840px) { .footer-social svg { width: 40px; height: 40px; } }

/* Legacy */
.footer-minimal { display: none; }
.footer-copy-single {
  font-family: var(--ko); font-size: 11px; font-weight: 300;
  color: rgba(245,240,238,0.45); letter-spacing: 0.01em;
}

/* LOGO — CELL[O]GRAM Weight & Color System */
.logo-cell    { font-weight: 800 !important; color: var(--charcoal) !important; }
.logo-bracket { font-weight: 800 !important; color: var(--color-brand) !important; }
.logo-gram    { font-weight: 400 !important; color: var(--charcoal) !important; }
.footer-logo .logo-cell  { color: var(--text-inverse) !important; }
.footer-logo .logo-gram  { color: var(--text-inverse) !important; }


/* ── PRODUCTS PAGE ── */
.products-intro { padding: 100px 0; background: var(--bg); }
.system-statement {
  font-family: var(--ko); font-size: 16px; font-weight: 300;
  line-height: 2; color: var(--charcoal); max-width: 640px; margin: 40px 0 20px;
}
.system-formula {
  font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-brand);
  margin-top: 32px;
}

.product-detail { padding: 100px 0; }
.product-detail:nth-of-type(odd) { background: var(--surface); }
.product-detail:nth-of-type(even) { background: var(--bg); }

.product-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
  margin-top: 56px;
}
.product-detail-left {}
.product-tag {
  font-family: var(--display); font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 500; color: var(--color-brand); margin-bottom: 16px;
}
.product-title {
  font-family: var(--display); font-size: var(--fs-h2); font-weight: 100;
  letter-spacing: -0.01em; color: var(--charcoal); line-height: 1.1; margin-bottom: var(--slide-gap-sm);
}
.product-role-tag {
  font-family: var(--ko); font-size: 15px; font-weight: 300;
  color: var(--ash); margin-bottom: 32px;
}
.product-specs-table { width: 100%; border-collapse: collapse; margin-bottom: 32px; }
.product-specs-table tr { border-bottom: 0.5px solid rgba(245,240,238,0.12); }
.product-specs-table td {
  font-family: var(--body); font-size: 15px; padding: 10px 0;
}
/* Dark scope default — products.html #ca/#ecm은 dark scope */
.product-specs-table td:first-child { font-weight: 300; color: rgba(245,240,238,0.55); width: 40%; }
.product-specs-table td:last-child { font-weight: 400; color: var(--text-on-dark); }
/* Light scope inverse */
[data-slide-theme="light"] .product-specs-table tr,
.scene-light .product-specs-table tr,
.detail-light .product-specs-table tr { border-bottom-color: rgba(31,26,27,0.12); }
[data-slide-theme="light"] .product-specs-table td:first-child,
.scene-light .product-specs-table td:first-child,
.detail-light .product-specs-table td:first-child { color: var(--ash); }
[data-slide-theme="light"] .product-specs-table td:last-child,
.scene-light .product-specs-table td:last-child,
.detail-light .product-specs-table td:last-child { color: var(--charcoal); }
.product-quote {
  font-family: var(--body); font-size: var(--fs-quote); font-weight: 300;     /* Quote tier — EN italic */
  color: var(--color-brand); font-style: italic; line-height: 1.5;
  border-left: 2px solid var(--color-brand); padding-left: 16px; margin-bottom: 40px;
}
.product-body {
  font-family: var(--ko); font-size: var(--fs-body); font-weight: var(--fw-body);    /* Pretendard 본문 */
  line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--ash);
}

/* Differentiator table */
.diff-table { width: 100%; border-collapse: collapse; margin: 40px 0 24px; }
.diff-table th {
  font-family: var(--display); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 600; padding: 12px 16px;
  text-align: left; border-bottom: 1px solid var(--stone);
}
.diff-table th:first-child { color: var(--ash); }
.diff-table th:nth-child(2) { color: var(--color-brand); background: var(--color-brand-tint); }
.diff-table th:nth-child(3) { color: var(--ash); }
.diff-table td {
  font-family: var(--ko); font-size: 15px; font-weight: 300;
  padding: 12px 16px; border-bottom: 0.5px solid var(--stone);
  vertical-align: top; line-height: 1.7;
}
.diff-table td:nth-child(2) { background: var(--color-brand-tint); font-weight: 400; color: var(--charcoal); }
.diff-table td:first-child { color: var(--ash); }
.diff-evidence {
  font-family: var(--body); font-size: 14px; font-weight: 300;
  color: var(--ash); font-style: italic; line-height: 1.7;
  border-top: 0.5px solid var(--stone); padding-top: 12px;
}

/* Category grid */
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 8px; }
.cat-card { background: var(--bg); border: 0.5px solid var(--stone); padding: 20px 24px; }
.cat-num {
  font-family: var(--display); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 600; color: var(--color-brand); margin-bottom: 8px;
}
.cat-title {
  font-family: var(--display); font-size: var(--fs-h3); font-weight: var(--fw-h3);   /* Pretendard H3 — Medium */
  color: var(--charcoal); margin-bottom: 6px; line-height: var(--lh-heading); letter-spacing: var(--ls-heading);
}
.cat-desc { font-family: var(--ko); font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--ash); }   /* Pretendard 본문 */

/* Timeline */
.timeline { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2px; margin-top: 56px; }
.timeline-item { padding: 32px 28px; border: 0.5px solid var(--stone); background: var(--surface); }
.timeline-period {
  font-family: var(--display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--color-brand); margin-bottom: 12px;
}
.timeline-driver {
  font-family: var(--display); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500; color: var(--ash); margin-bottom: 10px;
}
.timeline-effect {
  font-family: var(--ko); font-size: 13px; font-weight: 400;
  color: var(--charcoal); margin-bottom: 8px; line-height: 1.5;
}
.timeline-desc { font-family: var(--ko); font-size: 11px; font-weight: 300; line-height: 1.8; color: var(--ash); }

/* How to Use */
.howto { padding: 100px 0; background: var(--surface-dark-0); }
.howto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 56px; }
.howto-step { background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.07); padding: 40px 36px; }
.step-num {
  font-family: var(--display); font-size: var(--fs-h3); font-weight: 200;       /* H3 numeric */
  letter-spacing: var(--ls-tight); color: var(--color-brand); line-height: 1; margin-bottom: 16px;
}
.step-title {
  font-family: var(--display); font-size: var(--fs-tag); font-weight: 500;      /* Label tier */
  letter-spacing: 0.04em; color: var(--text-on-dark); margin-bottom: 16px; text-transform: uppercase;
}
.step-desc { font-family: var(--ko); font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--text-on-dark-mid); }   /* Pretendard 본문 */


/* ── QUALITY SECTION ── */
.quality-section {
  padding: 72px 0;
  background: var(--surface-dark-0);
  border-top: 0.5px solid rgba(255,255,255,0.06);
}
.quality-headline {
  font-family: var(--display); font-size: clamp(22px, 3vw, 36px);
  font-weight: 300; letter-spacing: 0.02em;
  color: var(--text-inverse); margin-bottom: 16px;
}
.quality-body {
  font-family: var(--ko); font-size: 14px; font-weight: 300;
  line-height: 1.95; color: rgba(245,240,238,0.5);
  max-width: 560px; margin-bottom: 48px;
}
.quality-stamps {
  display: flex; flex-wrap: wrap; gap: 2px;
}
.quality-stamp {
  border: 0.5px solid rgba(255,255,255,0.12);
  padding: 14px 28px;
  display: flex; flex-direction: column; gap: 5px;
}
.stamp-grade {
  font-family: var(--display); font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 600; color: var(--color-brand);
}
.stamp-label {
  font-family: var(--display); font-size: 13px;
  font-weight: 300; color: var(--text-inverse); letter-spacing: 0.02em;
}
.quality-divider {
  width: 0.5px; background: rgba(255,255,255,0.08);
  align-self: stretch;
}
.quality-badges {
  display: flex; gap: 24px; margin-top: 36px;
  padding-top: 36px;
  border-top: 0.5px solid rgba(255,255,255,0.06);
}
.quality-badge {
  font-family: var(--display); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 400; color: rgba(245,240,238,0.35);
}
.quality-badge span { color: rgba(245,240,238,0.6); }


/* ── SCIENCE PAGE ── */
.sci-mechanism { margin-top: 40px; display: flex; flex-direction: column; gap: 0; }
.mech-step {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 16px 0; border-bottom: 0.5px solid var(--border-subtle);   /* token: auto-flip */
}
.mech-step:last-child { border-bottom: none; }
.mech-num {
  font-family: var(--display); font-size: 14px; font-weight: 600;
  color: var(--color-brand); letter-spacing: 0.1em; min-width: 28px; margin-top: 1px;
}
.mech-content {}
.mech-title {
  font-family: var(--display); font-size: var(--fs-tag); font-weight: 500;        /* Label tier — caps */
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-primary);   /* token: auto-flip */
  margin-bottom: 4px;
}
.mech-desc {
  font-family: var(--ko); font-size: var(--fs-body); font-weight: var(--fw-body);   /* Pretendard 본문 */
  line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--text-secondary);   /* token: auto-flip */
}
.mech-ref {
  font-family: var(--en); font-size: var(--fs-sm); font-weight: 300;              /* Caption italic ref */
  color: var(--text-tertiary); margin-top: 6px; font-style: italic;   /* token: auto-flip */
}

.sci-pharma-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0.5px solid rgba(148,127,130,0.3);
  padding: 6px 14px; margin-bottom: 24px;
}
.sci-pharma-text {
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-brand);
}

.sci-categories { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.sci-cat {
  padding: 14px 16px;
  background: var(--color-brand-tint);                       /* token: mauve 8% — both scope */
  border: 0.5px solid var(--border-subtle);                  /* token: auto-flip */
}
.sci-cat-tag {
  font-family: var(--display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-brand);
  margin-bottom: 4px;
}
.sci-cat-name {
  font-family: var(--display); font-size: 15px; font-weight: 400;
  color: var(--text-primary); margin-bottom: 3px;            /* token: auto-flip */
}
.sci-cat-desc {
  font-family: var(--ko); font-size: 14px; font-weight: 300;
  line-height: 1.7; color: var(--text-tertiary);             /* token: auto-flip */
}

.sci-synergy {
  margin-top: 2px; grid-column: 1 / -1;
  background: var(--color-brand-tint);                       /* token: auto-flip */
  border: 0.5px solid rgba(148,127,130,0.32);                /* mauve 32% — both scope visible */
  padding: 24px 28px;
  display: flex; align-items: center; gap: 20px;
}
.sci-synergy-formula {
  font-family: var(--display); font-size: 17px; font-weight: 300;
  letter-spacing: 0.04em; color: var(--text-primary); white-space: normal; word-break: break-word;   /* token: auto-flip */
}
.sci-synergy-formula span { color: var(--color-brand); font-weight: 600; }
.sci-synergy-desc {
  font-family: var(--ko); font-size: 15px; font-weight: 300;
  line-height: 1.8; color: var(--text-tertiary);             /* token: auto-flip */
}

.sci-refs {
  margin-top: 48px; padding-top: 32px;
  border-top: 0.5px solid var(--border-subtle);              /* token: auto-flip */
}
.sci-refs-title {
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 16px;          /* token: auto-flip */
}
.sci-ref-item {
  font-family: var(--body); font-size: 14px; font-weight: 300;
  color: var(--text-tertiary); line-height: 1.9;             /* token: auto-flip */
  padding: 6px 0; border-bottom: 0.5px solid var(--border-subtle);
}
.sci-ref-item:last-child { border-bottom: none; }
.sci-ref-journal { color: var(--color-brand); font-style: italic; }   /* mauve italic — both scope */


/* ── PROTOCOL PAGE ── */
.protocol-section { padding: 100px 0; background: var(--bg); }
.protocol-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; margin-top: 52px; }
.protocol-card {
  background: var(--surface); border: 0.5px solid var(--stone); padding: 40px 32px;
  position: relative; overflow: hidden;
}
.protocol-badge {
  font-family: var(--display); font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 600; color: var(--color-brand); margin-bottom: 16px;
}
.protocol-name {
  font-family: var(--display); font-size: var(--fs-h3); font-weight: 300;     /* H3 tier */
  letter-spacing: 0.01em; color: var(--charcoal); margin-bottom: 8px;
}
.protocol-target {
  font-family: var(--ko); font-size: var(--fs-sm); font-weight: 300;          /* Caption */
  color: var(--ash); margin-bottom: 24px;
}
.protocol-device {
  font-family: var(--display); font-size: var(--fs-tag); font-weight: 500;    /* Label */
  letter-spacing: 0.08em; color: var(--charcoal); margin-bottom: 6px;
}
.protocol-blur {
  position: relative; margin-top: 20px;
}
.protocol-blur-content {
  font-family: var(--ko); font-size: var(--fs-sm); font-weight: 300;          /* Caption */
  line-height: var(--lh-body); color: var(--ash);
  filter: blur(4px); user-select: none; pointer-events: none;
}
.protocol-blur-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.protocol-lock {
  font-family: var(--display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ash); background: var(--surface);
  border: 0.5px solid var(--stone); padding: 6px 14px;
}

/* GATE */
.protocol-gate {
  margin-top: 2px; background: var(--surface-dark-0);
  border: 0.5px solid rgba(255,255,255,0.08);
  padding: 52px 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.gate-left {}
.gate-icon {
  font-family: var(--display); font-size: var(--fs-h3); font-weight: 200;      /* H3 symbol */
  color: var(--color-brand); margin-bottom: 20px; letter-spacing: 0.04em;
}
.gate-title {
  font-family: var(--display); font-size: var(--fs-h3); font-weight: 300;      /* H3 tier */
  letter-spacing: 0.01em; color: var(--text-on-dark); margin-bottom: 12px; line-height: var(--lh-heading);
}
.gate-desc {
  font-family: var(--ko); font-size: var(--fs-body); font-weight: 300;         /* Body */
  line-height: var(--lh-body); color: var(--text-on-dark-mid);
}
.gate-right {}
.gate-label {
  font-family: var(--display); font-size: var(--fs-tag); letter-spacing: var(--ls-label);   /* Label */
  text-transform: uppercase; font-weight: 500;
  color: rgba(245,240,238,0.55); margin-bottom: 10px;
}
.gate-input-row { display: flex; gap: 2px; }
.gate-input {
  flex: 1; background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.12);
  padding: 14px 18px; color: var(--text-on-dark);
  font-family: var(--body); font-size: var(--fs-body); font-weight: 300;       /* Body */
  outline: none;
}
.gate-input::placeholder { color: rgba(245,240,238,0.4); }
.gate-input:focus { border-color: var(--color-brand); }
.gate-input:focus-visible { box-shadow: var(--shadow-focus); }
.gate-btn {
  background: var(--color-brand-deep); border: none; padding: 14px 24px;
  font-family: var(--display); font-size: var(--fs-tag); letter-spacing: 0.14em;     /* Label */
  text-transform: uppercase; font-weight: 600; color: var(--on-primary); cursor: pointer;
  white-space: nowrap; transition: background var(--dur-micro);
}
.gate-btn:hover { background: var(--color-brand-deep); box-shadow: var(--shadow-mauve); }
.gate-note {
  font-family: var(--ko); font-size: var(--fs-sm); font-weight: 300;            /* Caption */
  color: rgba(245,240,238,0.5); margin-top: 12px; line-height: var(--lh-tight-body);
}
.gate-benefits { margin-top: 28px; display: flex; flex-direction: column; gap: 8px; }
.gate-benefit {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ko); font-size: var(--fs-sm); font-weight: 300;            /* Caption */
  color: rgba(245,240,238,0.55);
}
.gate-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-brand); flex-shrink: 0; }


/* ── PROTOCOL DEVICE SCIENCE ── */
.device-spec-row {
  display: flex; gap: 2px; margin-top: 2px;
}
.device-spec-card {
  flex: 1; background: var(--surface);
  border: 0.5px solid var(--stone); padding: 24px 20px;
}
.device-name {
  font-family: var(--display); font-size: 16px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--charcoal); margin-bottom: 14px;
}
.device-badge {
  display: inline-block; font-family: var(--display); font-size: 11px;
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-brand); border: 0.5px solid rgba(148,127,130,0.3);
  padding: 3px 8px; margin-bottom: 12px;
}
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table td {
  font-family: var(--body); font-size: 14px; padding: 5px 0;
  border-bottom: 0.5px solid var(--stone); vertical-align: top;
}
.spec-table td:first-child {
  font-weight: 500; color: var(--ash); width: 42%; padding-right: 8px;
  font-family: var(--display); letter-spacing: 0.04em;
}
.spec-table td:last-child { color: var(--charcoal); font-weight: 300; }
.spec-table tr:last-child td { border-bottom: none; }
.channel-science {
  margin-top: 2px; background: var(--surface-dark-0);
  border: 0.5px solid rgba(255,255,255,0.08);
  padding: 32px 36px;
}
.channel-title {
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-brand);
  margin-bottom: 20px;
}
.channel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.channel-item {}
.channel-item-head {
  font-family: var(--display); font-size: 15px; font-weight: 500;
  color: var(--text-inverse); margin-bottom: 6px; letter-spacing: 0.04em;
}
.channel-item-body {
  font-family: var(--ko); font-size: 15px; font-weight: 300;
  line-height: 1.85; color: rgba(245,240,238,0.45);
}
.channel-compare {
  margin-top: 20px; padding-top: 20px;
  border-top: 0.5px solid rgba(255,255,255,0.08);
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.compare-item { display: flex; flex-direction: column; gap: 3px; }
.compare-label {
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245,240,238,0.3);
}
.compare-val {
  font-family: var(--display); font-size: 16px; font-weight: 300;
  color: var(--text-inverse);
}
.compare-val span { color: var(--color-brand); font-weight: 600; }


/* ── PROTOCOL DETAIL (GATE UNLOCKED) ── */
.protocol-detail {
  margin-top: 2px; background: var(--surface-dark-0);
  border: 0.5px solid rgba(255,255,255,0.08);
  padding: 52px 48px;
}
.pd-header {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 40px; padding-bottom: 28px;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
}
.pd-title {
  font-family: var(--display); font-size: var(--fs-h3); font-weight: 300;     /* H3 tier — pd-section title */
  color: var(--text-on-dark); letter-spacing: 0.01em;
}
.pd-subtitle {
  font-family: var(--display); font-size: var(--fs-tag); font-weight: 400;    /* Label */
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-brand);
}
.pd-section { margin-bottom: 40px; }
.pd-section-tag {
  font-family: var(--display); font-size: var(--fs-tag); font-weight: 600;   /* Label tier */
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-brand);
  margin-bottom: 16px;
}
.pd-section-title {
  font-family: var(--display); font-size: var(--fs-h3); font-weight: 300;    /* H3 tier — 20 → 22-52 */
  color: var(--text-on-dark); margin-bottom: 12px; letter-spacing: var(--ls-loose);
  line-height: var(--lh-tight);
}
.pd-body {
  font-family: var(--ko); font-size: var(--fs-body); font-weight: var(--fw-body);
  line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--text-on-dark-mid);  /* Pretendard 본문 */
}
.pd-body strong { color: var(--text-on-dark); font-weight: var(--fw-h3); }
.pd-note {
  font-family: var(--body); font-size: var(--fs-sm); font-weight: 300;       /* Caption tier */
  color: var(--text-on-dark-soft); margin-top: 6px; font-style: italic;
  line-height: var(--lh-tight-body);
}
.pd-disclaimer {
  font-family: var(--ko); font-size: var(--fs-tag); font-weight: 300;        /* Label — 9.5 → 12+ */
  line-height: var(--lh-tight-body); color: rgba(245,240,238,0.5);
  letter-spacing: 0.01em; font-style: italic;
  margin-top: 32px; padding-top: 16px;
  border-top: 0.5px dashed rgba(245,240,238,0.08);
  max-width: 72ch;
}
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 12px; }
.pd-card {
  background: rgba(255,255,255,0.03);
  border: 0.5px solid rgba(255,255,255,0.06);
  padding: 20px 18px;
}
.pd-card-label {
  font-family: var(--display); font-size: var(--fs-tag); font-weight: 600;   /* Label tier */
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-brand);
  margin-bottom: 8px;
}
.pd-card-body {
  font-family: var(--ko); font-size: var(--fs-body); font-weight: var(--fw-body);
  line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--text-on-dark-mid);  /* Pretendard 본문 */
}
.pd-card-body strong { color: var(--text-on-dark); font-weight: var(--fw-h3); }
.pd-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.pd-table th {
  font-family: var(--display); font-size: var(--fs-tag); font-weight: 600;   /* Label tier */
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-on-dark-soft); padding: 8px 12px 8px 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.1); text-align: left;
}
.pd-table td {
  font-family: var(--body); font-size: var(--fs-sm); font-weight: 300;       /* Caption tier */
  color: var(--text-on-dark-mid); padding: 9px 12px 9px 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.04); vertical-align: top;
}
.pd-table td:first-child { color: var(--text-on-dark); font-weight: 500; min-width: 80px; }   /* 100% — 첫 컬럼 */
.pd-table tr:last-child td { border-bottom: none; }
.pd-mechanism {
  margin-top: 12px; display: flex; flex-direction: column; gap: 0;
}
.pd-mech-row {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 12px 0; border-bottom: 0.5px solid rgba(255,255,255,0.04);
}
.pd-mech-row:last-child { border-bottom: none; }
.pd-mech-num {
  font-family: var(--display); font-size: var(--fs-tag); font-weight: 600;   /* Label tier — 10 → 12+ */
  color: var(--color-brand); min-width: 24px; margin-top: 1px; letter-spacing: 0.08em;
}
.pd-mech-title {
  font-family: var(--display); font-size: var(--fs-tag); font-weight: 500;   /* Label tier */
  color: var(--text-on-dark); margin-bottom: 3px; letter-spacing: 0.04em;
}
.pd-mech-body {
  font-family: var(--ko); font-size: var(--fs-body); font-weight: var(--fw-body);
  line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--text-on-dark-mid);  /* Pretendard 본문 */
}
.pd-mech-body strong { color: var(--text-on-dark); font-weight: var(--fw-h3); }
.pd-ref {
  font-family: var(--body); font-size: var(--fs-tag); color: rgba(245,240,238,0.5);  /* Label tier — italic ref */
  font-style: italic; margin-top: 2px;
}
.pd-timeline {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 12px;
}
.pd-tl-item {
  background: rgba(255,255,255,0.03);
  border: 0.5px solid rgba(255,255,255,0.06);
  padding: 16px 14px;
}
.pd-tl-period {
  font-family: var(--display); font-size: var(--fs-tag); font-weight: 600;   /* Label tier */
  color: var(--color-brand); letter-spacing: 0.08em; margin-bottom: 6px;
}
.pd-tl-body {
  font-family: var(--ko); font-size: var(--fs-body); font-weight: var(--fw-body);
  line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--text-on-dark-mid);  /* Pretendard 본문 */
}
.pd-tl-body strong { color: var(--text-on-dark); font-weight: var(--fw-h3); }
.pd-session-table { margin-top: 12px; }
.pd-divider {
  border: none; border-top: 0.5px solid rgba(255,255,255,0.08);
  margin: 32px 0;
}


/* ── EVIDENCE SECTION ── */
.pd-evidence-block {
  margin-top: 16px; display: flex; flex-direction: column; gap: 2px;
}
.pd-ev-item {
  display: grid; grid-template-columns: 40px 1fr;
  background: rgba(255,255,255,0.02);
  border: 0.5px solid rgba(255,255,255,0.05);
  padding: 14px 16px; gap: 12px; align-items: start;
}
.pd-ev-num {
  font-family: var(--display); font-size: var(--fs-tag); font-weight: 600;   /* Label tier */
  color: var(--color-brand); letter-spacing: 0.12em; margin-top: 2px;
}
.pd-ev-title {
  font-family: var(--display); font-size: var(--fs-body); font-weight: 500;  /* Body 500w — 강조 */
  color: var(--text-on-dark); margin-bottom: 3px; letter-spacing: 0.03em;
}
.pd-ev-body {
  font-family: var(--ko); font-size: var(--fs-body); font-weight: var(--fw-body);
  line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--text-on-dark-mid);  /* Pretendard 본문 */
}
.pd-ev-body strong { color: var(--text-on-dark); font-weight: var(--fw-h3); }
.pd-ev-ref {
  font-family: var(--body); font-size: var(--fs-sm); color: rgba(245,240,238,0.5);  /* Caption italic */
  font-style: italic; margin-top: 4px;
}
.pd-section-sub {
  font-family: var(--display); font-size: var(--fs-body-lg); font-weight: 400;     /* Body Lead — 서브헤더 */
  color: var(--text-on-dark-soft); letter-spacing: 0.06em; margin: 20px 0 10px;
  padding-bottom: 8px; border-bottom: 0.5px solid rgba(255,255,255,0.06);
}
.pd-protocol-label {
  display: inline-block; font-family: var(--display); font-size: 8px;
  font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--charcoal); background: var(--color-brand); padding: 3px 10px;
  margin-bottom: 14px;
}
.pd-ref-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.pd-ref-table td {
  font-family: var(--body); font-size: var(--fs-sm); font-weight: 300;       /* Caption tier */
  color: rgba(245,240,238,0.55); padding: 5px 8px 5px 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.03); vertical-align: top;
  font-style: italic; line-height: var(--lh-tight-body);
}
.pd-ref-table td:first-child {
  font-style: normal; font-weight: 500;
  color: var(--text-on-dark-soft); white-space: nowrap; padding-right: 12px;
  min-width: 32px;
}
.pd-ref-table tr:last-child td { border-bottom: none; }


/* ═══════════════════════════════════════
   RESPONSIVE — TABLET 768px
═══════════════════════════════════════ */
@media (max-width: 768px) {

  /* HERO — mobile typography fix */
  :root { --fs-hero: clamp(28px, 8vw, 48px); }
  .h-line { white-space: normal !important; word-break: keep-all; }
  .h-line[style*="padding-left"] { padding-left: 0 !important; }
  .h-title { letter-spacing: -0.02em; line-height: 1.2; }
  .h-tag { font-size: 9px !important; letter-spacing: 0.3em; bottom: calc(50% + var(--fs-hero) + 8px) !important; }
  .scroll-hint { bottom: 60px !important; }

  /* NAV — hide menu items but keep lang switcher */
  .nav-links > a,
  .nav-links > .nav-dropdown { display: none; }
  .nav-links { gap: 0; flex: 1; justify-content: flex-start; padding-left: 8px; }
  .nav-lang-switcher { margin-left: 8px; margin-right: auto; }
  .nav-cta { display: none; }
  nav { padding: 0 20px; }
  .hamburger { display: block; }
  .nav-logo { font-size: 15px; }

  /* CONTAINER */
  .container { padding: 0 20px; }

  /* SECTION SPACING */
  section { padding: 64px 0 !important; }

  /* HERO */
  .hero-sphere { display: none; }
  #home { min-height: 80vh; }
  .hero-headline { font-size: clamp(28px, 8vw, 48px) !important; }
  .hero-inner { padding: 60px 24px 40px; }

  /* SIGNAL STRIP */
  .signal-strip {
    grid-template-columns: 1fr 1fr;
    gap: 1px;
  }

  /* BRAND / ABOUT */
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-pillars { grid-template-columns: 1fr; gap: 2px; }
  .etymology-grid { grid-template-columns: 1fr; gap: 2px; }
  .values-row { grid-template-columns: 1fr; gap: 2px; }

  /* PRODUCTS */
  .products-header { grid-template-columns: 1fr; gap: 24px; }
  .product-cards { grid-template-columns: 1fr; gap: 2px; }
  .product-specs { grid-template-columns: 1fr; }
  .spec-row { grid-template-columns: 1fr; gap: 2px; }
  .product-detail-grid { grid-template-columns: 1fr; gap: 2px; }
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 2px; }
  .timeline { grid-template-columns: 1fr 1fr; gap: 2px; }
  .howto-grid { grid-template-columns: 1fr; gap: 2px; }
  .quality-stamps { grid-template-columns: 1fr 1fr; gap: 2px; }
  .quality-badges { flex-direction: column; gap: 2px; }

  /* SCIENCE */
  .science-grid { grid-template-columns: 1fr; gap: 2px; }
  .sci-mechanism { grid-template-columns: 1fr; gap: 2px; }
  .sci-categories { grid-template-columns: 1fr; gap: 2px; }
  .sci-synergy { grid-template-columns: 1fr; gap: 2px; }

  /* TECHNOLOGY */
  .tech-grid { grid-template-columns: 1fr 1fr; gap: 2px; }
  .sem-strip { grid-template-columns: 1fr; gap: 2px; }
  .sem-vals { grid-template-columns: 1fr 1fr; gap: 2px; }

  /* PROTOCOL — DEVICE SPECS */
  .device-spec-row { flex-direction: column; gap: 2px; }
  .device-spec-card { width: 100%; }

  /* PROTOCOL — CHANNEL SCIENCE */
  .channel-science { padding: 24px 20px; }
  .channel-grid { grid-template-columns: 1fr; gap: 20px; }
  .channel-compare { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* PROTOCOL DETAIL */
  .protocol-detail { padding: 32px 20px; }
  .pd-header { flex-direction: column; gap: 8px; }
  .pd-grid { grid-template-columns: 1fr; gap: 2px; }
  .pd-timeline { grid-template-columns: 1fr 1fr; gap: 2px; }
  .pd-evidence-block { gap: 2px; }
  .pd-ev-item { grid-template-columns: 32px 1fr; }

  /* CONTACT */
  .record-split { grid-template-columns: 1fr; gap: 2px; }

  /* FOOTER */
  footer { grid-template-columns: 1fr; gap: 24px; text-align: left; }

  /* SECTION TITLES */
  .sec-title { font-size: clamp(28px, 7vw, 44px); }
}

/* ═══════════════════════════════════════
   RESPONSIVE — MOBILE 480px
═══════════════════════════════════════ */
@media (max-width: 480px) {

  /* CONTAINER */
  .container { padding: 0 16px; }

  /* SECTION SPACING */
  section { padding: 52px 0 !important; }

  /* HERO */
  .hero-title { font-size: clamp(28px, 9vw, 40px); line-height: 1.15; }
  .hero-eyebrow { font-size: 9px; }

  /* SIGNAL STRIP — 1 column scroll */
  .signal-strip {
    grid-template-columns: 1fr;
    gap: 1px;
  }
  .signal-item { padding: 20px 16px; }
  .signal-num { font-size: clamp(36px, 12vw, 56px); }

  /* ETYMOLOGY */
  .etym-cell { padding: 24px 16px; }
  .etym-word { font-size: clamp(28px, 9vw, 44px); }

  /* PRODUCT CARDS */
  .product-card { padding: 28px 20px; }

  /* CAT GRID — 1 col on very small */
  .cat-grid { grid-template-columns: 1fr; }

  /* TIMELINE — 1 col */
  .timeline { grid-template-columns: 1fr; }

  /* QUALITY STAMPS */
  .quality-stamps { grid-template-columns: 1fr 1fr; }

  /* TECH GRID — 1 col */
  .tech-grid { grid-template-columns: 1fr; }

  /* CHANNEL COMPARE */
  .channel-compare { grid-template-columns: 1fr; }

  /* PROTOCOL DETAIL */
  .pd-header { padding-bottom: 20px; }
  .pd-title { font-size: 18px; }
  .pd-timeline { grid-template-columns: 1fr 1fr; }
  .pd-ev-item { grid-template-columns: 28px 1fr; padding: 12px 12px; }
  .pd-ev-body { font-size: 11px; }

  /* TABLES — horizontal scroll */
  .pd-table { font-size: 11px; }
  .pd-table th, .pd-table td { padding: 7px 8px 7px 0; font-size: 11px; }
  .spec-table td { font-size: 11px; }

  /* RECORD */
  .record-card { padding: 28px 20px; }

  /* SECTION TITLES */
  .sec-title { font-size: clamp(24px, 8vw, 36px); }
  .sec-sub { font-size: 12px; }
  .sec-tag { font-size: var(--m-fs-eyebrow, 12px); }

  /* DEVICE SPEC */
  .device-spec-row { gap: 2px; }
}

/* ═══════════════════════════════════════
   NAV MOBILE TOGGLE (Simple)
═══════════════════════════════════════ */
@media (max-width: 768px) {
  .nav-mobile-btn {
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    padding: 8px;
  }
  .nav-mobile-btn span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--charcoal);
    transition: var(--dur-panel);
  }
  .nav-mobile-menu {
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 0.5px solid var(--stone);
    padding: 24px 20px;
    display: none;
    flex-direction: column;
    gap: 0;
    z-index: 999;
  }
  .nav-mobile-menu.open { display: flex; }
  .nav-mobile-menu a {
    font-family: var(--display);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--charcoal);
    text-decoration: none;
    padding: 14px 0;
    border-bottom: 0.5px solid var(--stone);
  }
  .nav-mobile-menu a:last-child { border-bottom: none; }
}

@media (min-width: 769px) {
  .nav-mobile-btn { display: none !important; }
  .nav-mobile-menu { display: none !important; }
}


/* TABLE OVERFLOW ON MOBILE */
@media (max-width: 600px) {
  .pd-table, .spec-table, .pd-ref-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .howto-grid { gap: 2px; }
  .pd-section { margin-bottom: 28px; }
  .pd-section-sub { font-size: 11px; margin: 14px 0 8px; }
  .channel-science { padding: 20px 16px; }
  .channel-grid { gap: 16px; }
  .channel-item-head { font-size: 12px; }
  .channel-item-body { font-size: 11px; }
  .compare-val { font-size: 12px; }
  .compare-label { font-size: 11px; }
  .pd-ref-table td { font-size: 10px; }
  .device-spec-row { display: flex; flex-direction: column; }
}


/* SCI SYNERGY MOBILE FIX */
@media (max-width: 768px) {
  .sci-synergy {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 16px;
  }
  .sci-synergy-formula {
    font-size: 13px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.6;
  }
  .system-statement {
    font-size: 14px;
    max-width: 100%;
    word-break: keep-all;
  }
  .system-formula {
    font-size: 11px;
    letter-spacing: 0.1em;
    word-break: break-word;
    white-space: normal;
  }
  .products-intro { padding: 60px 0; }
}


/* ═══════════════════════════════════════
   DESKTOP REFINEMENTS 1024px+
═══════════════════════════════════════ */

/* 1. 전체 body overflow-x 방지 — clip: hidden과 달리 스크롤 컨테이너를 만들지 않아 position:sticky가 산다 */
body { overflow-x: clip; }

/* 2. quality-stamp: flex basis 고정으로 4개 균등 배분 */
.quality-stamp { flex: 1; min-width: 180px; }

/* 3. pd-ref-table font size 데스크탑 */
.pd-ref-table td { font-size: 14px; }

/* 4. science-grid align-items: start → 높이 불균일 OK */
.science-grid { align-items: start; }

/* 5. product-detail-grid right col 이미지 없을 때 배경 처리 */
.product-detail-grid > div:last-child:not(.product-detail-left) {
  min-height: 200px;
}

/* 6. 1400px+ 와이드 스크린 — 컨테이너/패딩만, 폰트는 vh 토큰 사용 */
@media (min-width: 1400px) {
  .hero-inner { padding: 80px 60px 64px; }
  .protocol-detail { padding: 60px 56px; }
}

/* 7. 1024px – 1280px 중간 데스크탑 */
@media (min-width: 1025px) and (max-width: 1280px) {
  .container { padding: 0 40px; }
  .hero-inner { padding: 72px 40px 56px; }
  .about-grid { gap: 60px; }
  .product-detail-grid { gap: 60px; }
}

/* 8. (Legacy desktop body fallback removed — pd-body/mech-body/card-body now use var(--fs-body) tokens) */

/* 9. Hover states 데스크탑 전용 */
@media (hover: hover) {
  .pillar-item:hover {
    background: rgba(148,127,130,0.03);
    padding-left: 8px;
    transition: background var(--dur-micro), padding-left var(--dur-micro);
  }
  .product-card:hover {
    border-color: rgba(148,127,130,0.3);
    transition: border-color var(--dur-micro);
  }
  .record-card:hover {
    background: rgba(148,127,130,0.03);
    transition: background var(--dur-micro);
  }
  .pd-tl-item:hover {
    border-color: rgba(148,127,130,0.2);
    background: rgba(148,127,130,0.04);
    transition: border-color var(--dur-micro), background var(--dur-micro);
  }
  .nav-links a:hover {
    color: var(--color-brand);
    transition: color 0.15s;
  }
}

/* 10. Table 줄간격 데스크탑 */
.pd-table th, .pd-table td { padding: 10px 12px 10px 0; }
.spec-table td { padding: 6px 0; }

/* 11. channel-compare 데스크탑 여백 */
.channel-compare { padding-top: 24px; margin-top: 24px; }

/* 12. Protocol detail section 간격 */
.pd-section { margin-bottom: 44px; }
.pd-section:last-child { margin-bottom: 0; }

/* 13. evidence block 간격 */
.pd-evidence-block { margin-top: 14px; }
.pd-ev-item { padding: 16px 20px; }


/* NAV ANCHOR OFFSET */
:target {
  scroll-margin-top: 60px;
}
section[id] {
  scroll-margin-top: 52px;
}


/* LOGO IMAGE ADJUSTMENTS */
.nav-logo img { display: block; height: 20px; width: auto; }
.hero-logo img { display: block; height: clamp(36px, 5vw, 64px); width: auto; }
.footer-logo img { display: block; height: 18px; width: auto; }

/* Dark/light logo swap on dark sections */
.hero-logo { line-height: 0; }

@media (max-width: 768px) {
  .nav-logo img { height: 18px; }
}
/* ── Nav Overlay — dims content when dropdown is open ── */
.nav-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 95; /* below nav(100), above content */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-panel) ease, visibility var(--dur-panel);
}
body.nav-overlay-active .nav-overlay {
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
}

/* ── Nav Dropdown ── */
.nav-dropdown { position: relative; display: flex; align-items: center; align-self: stretch; }
.nav-dropdown > a { transition: color var(--dur-panel) ease, font-weight 0.15s ease; }
/* Dark mode: hover → white bold */
.nav-dropdown:hover > a { color: var(--text-inverse); font-weight: 700; }
/* Light mode: hover → teal bold (override) */
nav.nav-light .nav-dropdown:hover > a { color: var(--color-brand) !important; font-weight: 700; }

.nav-dropdown-menu {
  position: absolute; top: 100%; left: 0; transform: translateY(4px);
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none; border-radius: 0;
  padding: 12px 0 10px; min-width: 200px;
  z-index: 200;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}
.nav-dropdown-menu a {
  display: block; padding: 9px 0;
  font-family: var(--display); font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 400;
  color: rgba(245,240,238,0.35);
  text-decoration: none;
  transition: color var(--dur-micro) ease;
}
.nav-dropdown-menu a:hover {
  color: var(--color-brand) !important; font-weight: 700;
  transform: translateX(3px);
}

/* Light mode dropdown — transparent, no box */
nav.nav-light .nav-dropdown-menu {
  background: transparent !important;
  border: none !important;
  box-shadow: none;
}
nav.nav-light .nav-dropdown-menu a {
  color: rgba(31,26,27,0.6) !important;
}
nav.nav-light .nav-dropdown-menu a:hover {
  color: var(--color-brand) !important; font-weight: 700;
}

@media (max-width: 768px) {
  .nav-dropdown-menu { display: none; }
}

/* ── FAQ Accordion ── */
.faq-section { padding: 0 0 100px; }
.faq-grid { margin-top: 48px; }
.faq-category {
  margin-bottom: 48px;
}
.faq-category-tag {
  font-family: var(--display); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 600; color: var(--color-brand);
  margin-bottom: 16px; padding-left: 2px;
}
.faq-item {
  border-top: 0.5px solid var(--stone);
}
.faq-item:last-child {
  border-bottom: none;
}
.faq-item summary {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 20px 2px; cursor: pointer;
  font-family: var(--ko); font-size: var(--fs-body-lg); font-weight: var(--fw-h3);    /* Pretendard 질문 — Medium */
  color: var(--charcoal); line-height: var(--lh-heading); letter-spacing: var(--ls-heading);
  list-style: none; transition: color var(--dur-panel);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; flex-shrink: 0; margin-left: 20px;
  font-family: var(--display); font-size: var(--fs-body-lg); font-weight: 200;
  color: var(--ash); transition: transform var(--dur-panel), color var(--dur-panel);
}
.faq-item[open] summary::after {
  content: '−'; color: var(--color-brand);
}
.faq-item summary:hover { color: var(--color-brand); }
.faq-answer {
  padding: 0 2px 24px 2px;
  font-family: var(--ko); font-size: var(--fs-body); font-weight: var(--fw-body);   /* Pretendard 본문 */
  line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--ash);
  max-width: 800px;
}
.faq-answer strong {
  font-weight: var(--fw-h3); color: var(--charcoal);
}
.faq-answer .faq-highlight {
  color: var(--color-brand); font-weight: 400;
}
.faq-answer .faq-ref {
  display: block; margin-top: 8px;
  font-family: var(--en); font-size: var(--fs-sm); font-style: italic;        /* Caption italic */
  color: rgba(31,26,27,0.45); letter-spacing: 0.02em;
}
@media (max-width: 768px) {
  .faq-item summary { font-size: 13px; padding: 16px 2px; }
  .faq-answer { font-size: 12px; }
}


/* ═══════════════════════════════════════
   STEP 4-8 — VISUAL ENHANCEMENTS
═══════════════════════════════════════ */

/* ── Film Grain Overlay ── */
.film-grain {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 99980; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ── Gradient Blob (ambient background motion) ── */
.gradient-blob {
  position: fixed; top: -30%; left: -20%; width: 140%; height: 140%;
  z-index: -1; pointer-events: none; opacity: 0.4;
  background: radial-gradient(ellipse 40% 50% at 30% 40%, rgba(148,127,130,0.04) 0%, transparent 60%),
              radial-gradient(ellipse 30% 40% at 70% 60%, rgba(148,127,130,0.03) 0%, transparent 50%);
  animation: gradientDrift 25s ease-in-out infinite alternate;
}
@keyframes gradientDrift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  33%  { transform: translate(2%, -3%) rotate(1deg); }
  66%  { transform: translate(-1%, 2%) rotate(-0.5deg); }
  100% { transform: translate(1%, -1%) rotate(0.5deg); }
}

/* ── Card Lift Hover — Ferrari: no shadow, border only ── */
@media (hover: hover) {
  .card-lift {
    transition: transform var(--dur-panel) ease, border-color var(--dur-panel) ease;
  }
  .card-lift:hover {
    transform: translateY(-2px);
    border-color: rgba(148,127,130,0.15) !important;
  }
}

/* ── Link Underline Draw ── */
.link-draw {
  position: relative;
  text-decoration: none;
}
.link-draw::after {
  content: '';
  position: absolute; bottom: -2px; left: 0;
  width: 100%; height: 1px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.23,1,0.32,1);
}
.link-draw:hover::after {
  transform: scaleX(1);
}

/* ── Magnetic button base ── */
.magnetic {
  display: inline-block;
  will-change: transform;
}

/* ── Text split containers ── */
.text-reveal {
  overflow: hidden;
}
.split-word {
  will-change: transform, opacity;
}

/* ── Counter animation ── */
.count-up {
  font-variant-numeric: tabular-nums;
}

/* ── Stagger group items ── */
.stagger-item {
  will-change: transform, opacity;
}

/* ── Line draw element ── */
.line-draw {
  display: block;
  will-change: transform;
}

/* ═══════════════════════════════════════════════════
   DETAIL PAGE SYSTEM — shared across all sub-pages
   ═══════════════════════════════════════════════════ */

/* ── Detail Page Hero ── */
/* ── Detail Hero — 70vh, center aligned ── */
.detail-hero {
  min-height: 100vh; padding: 54px 52px 80px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  position: relative; background: var(--surface-dark-0);
}
.detail-hero .sec-tag { margin-bottom: 20px; padding-left: 0; }
.detail-hero .sec-tag::before { display: none; }
.detail-hero .detail-hero-sub { margin: 0 auto; }
.detail-hero-title {
  font-family: var(--ko); font-size: var(--fs-h1);
  font-weight: var(--fw-display); letter-spacing: var(--ls-display); line-height: var(--lh-display);  /* Pretendard 한글 H1 */
  color: var(--text-on-dark); margin-bottom: var(--slide-gap-md);
}
.detail-hero-title strong { font-weight: var(--fw-display-strong); }
/* Trailing-period utility: period renders but is excluded from centering width. */
.trail-period { display: inline-block; width: 0; overflow: visible; font-weight: inherit; }
.detail-hero-sub {
  font-family: var(--ko); font-size: var(--fs-body); font-weight: var(--fw-body);
  line-height: var(--lh-body); letter-spacing: var(--ls-body); color: rgba(245,240,238,0.6); max-width: 560px;
}
.detail-hero-line {
  width: 40px; height: 0.5px; background: rgba(245,240,238,0.15); margin: 32px 0 0;
}

/* ── Visual Placeholder — product/model image slots ── */
.visual-slot {
  position: absolute; right: 52px; bottom: 80px;
  width: 320px; height: 320px;
  border: 0.5px dashed rgba(245,240,238,0.08);
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
}
.visual-slot-label {
  font-family: var(--display); font-size: 9px; letter-spacing: 0.15em;
  text-transform: uppercase; color: rgba(245,240,238,0.12);
}
/* Product hero — 2-column with visual */
.detail-hero--product {
  flex-direction: row; align-items: center; justify-content: center;
  gap: 60px;
}
.detail-hero--product .detail-hero-text { flex: 0 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.detail-hero--product .visual-slot {
  position: relative; right: auto; bottom: auto;
  flex-shrink: 0;
}

/* ── Detail Section Typography — weight contrast ── */
.detail-section .sec-title {
  font-weight: 100; letter-spacing: -0.03em;
}
.detail-section .sec-title strong { font-weight: 800; }

/* ── Detail CTA — matches main page close ── */
.detail-cta {
  padding: 100px 52px 24px; text-align: center;
  background: #F0EFED;
}
.detail-cta-headline {
  font-family: var(--ko); font-size: var(--fs-h2);
  font-weight: 300; color: var(--charcoal); text-decoration: none;
  letter-spacing: -0.02em; line-height: 1.4;
  display: inline-block; transition: color var(--dur-panel);
}
.detail-cta-headline:hover { color: var(--color-brand-deep); }
.detail-cta-sub {
  font-family: var(--ko); font-size: 12px; font-weight: 300;
  color: rgba(31,26,27,0.3); margin-top: 16px;
}
.detail-footer {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 24px 52px 32px;
  background: #F0EFED;
}
.detail-footer span, .detail-footer a {
  font-family: var(--body); font-size: 10px; font-weight: 300;
  color: rgba(31,26,27,0.72); text-decoration: none;
}
.detail-footer a:hover { color: var(--color-brand-deep); }
.detail-footer .footer-sep-dot { width: 2px; height: 2px; border-radius: 50%; background: rgba(31,26,27,0.28); }

/* ── Section alternating backgrounds (data-slide-theme 명시 안 된 경우만) ──
   data-slide-theme 명시된 section은 global rule이 우선. */
.detail-section:not([data-slide-theme]):nth-of-type(even) { background: var(--surface); }
.detail-section:not([data-slide-theme]):nth-of-type(odd) { background: var(--bg); }

/* ── Accordion (Protocol page) ── */
.accordion-section { border-bottom: 0.5px solid var(--stone); }
.accordion-trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 24px 0; cursor: pointer; background: none; border: none;
  font-family: var(--ko); font-size: 20px; font-weight: 500;
  color: var(--charcoal); text-align: left; letter-spacing: -0.01em;
}
/* 시술 프로토콜 섹션: 헤드는 product-title과 완전 동일 스타일, 아코디언 주제는 thin */
#protocol .sec-title {
  font-family: var(--display) !important;
  font-weight: 300 !important;
  font-size: clamp(36px, 3.2vw, 52px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: var(--text-inverse) !important;
}
#protocol .accordion-trigger { font-weight: 100 !important; }
.accordion-trigger:hover { color: var(--color-brand); }
/* Accordion on light background */
.detail-light .accordion-trigger { color: var(--charcoal); }
.detail-light .accordion-trigger:hover { color: var(--color-brand-deep); }
.detail-light .accordion-section { border-bottom-color: rgba(31,26,27,0.1); }
.detail-light .accordion-icon::before, .detail-light .accordion-icon::after { background: rgba(31,26,27,0.4); }
.accordion-icon {
  width: 20px; height: 20px; position: relative; flex-shrink: 0;
}
.accordion-icon::before, .accordion-icon::after {
  content: ''; position: absolute; background: rgba(245,240,238,0.4);
  transition: transform var(--dur-panel);
}
.accordion-icon::before { width: 12px; height: 1px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.accordion-icon::after { width: 1px; height: 12px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.accordion-section.open .accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion-body {
  max-height: 0; overflow: hidden; transition: max-height 0.4s ease;
}
.accordion-section.open .accordion-body { max-height: none; }
.accordion-body-inner { padding: 0 0 32px; }

/* ── Sub-accordion (디바이스별 선택) ── */
.sub-accordion { border-bottom: 0.5px solid rgba(245,240,238,0.08); }
.sub-accordion-trigger {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 20px 0; font-family: var(--display); font-size: var(--fs-body);
  font-weight: 500; color: var(--text-inverse-soft); letter-spacing: -0.01em;
  list-style: none;
}
.sub-accordion-trigger::-webkit-details-marker { display: none; }
.sub-accordion-trigger::after {
  content: '+'; margin-left: auto; font-size: 18px; font-weight: 300;
  color: rgba(245,240,238,0.3); transition: transform var(--dur-panel);
}
.sub-accordion[open] .sub-accordion-trigger::after { content: '−'; color: var(--color-brand); }
.sub-accordion[open] .sub-accordion-trigger { color: var(--text-inverse); }
.sub-accordion-maker {
  font-size: var(--fs-tag); font-weight: 300; color: rgba(245,240,238,0.35);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.sub-accordion-body { padding: 0 0 28px; }

/* ── Light section for detail pages ── */
.detail-light { background: #F0EFED; }
.detail-light .sec-tag { color: var(--color-brand-deep); }
.detail-light .sec-tag::before { background: var(--color-brand-deep); }
.detail-light .sec-title { color: var(--charcoal); }
.detail-light .sec-title strong { color: var(--color-brand-deep); }
.detail-light .sec-sub { color: rgba(31,26,27,0.5); }
.detail-light .pillar-title, .detail-light .value-card-title { color: var(--charcoal); }
.detail-light .pillar-desc, .detail-light .value-card-desc { color: rgba(31,26,27,0.5); }
.detail-light .about-body { color: rgba(31,26,27,0.6); }
/* Tech features on light background — stronger contrast */
.detail-light .tech-grid { border-color: rgba(31,26,27,0.1); }
.detail-light .tech-feat { border-color: rgba(31,26,27,0.1); }
.detail-light .tech-feat-title { color: var(--charcoal); }
.detail-light .tech-feat-desc { color: rgba(31,26,27,0.6); }
.detail-light .tech-dot { background: var(--color-brand-deep); }
.detail-light .sem-label { color: rgba(31,26,27,0.5); }
.detail-light .sem-val { color: var(--color-brand-deep); }
.detail-light .sec-sub { color: rgba(31,26,27,0.5); }
.detail-light .etym-card { background: #FAFAF8; border-color: rgba(31,26,27,0.15); }
.detail-light .etym-letter { color: var(--charcoal); }
.detail-light .etym-ko { color: var(--charcoal); }
.detail-light .etym-en { color: rgba(31,26,27,0.45); }
.detail-light .etym-desc { color: rgba(31,26,27,0.5); }
.detail-light .etym-caption { color: rgba(31,26,27,0.45); border-top-color: rgba(31,26,27,0.08); }
.detail-light .value-card { border-color: rgba(31,26,27,0.08); }
.detail-light .value-card-num { color: var(--color-brand-deep); }
.detail-light .value-card-title { color: var(--charcoal); }
.detail-light .value-card-desc { color: rgba(31,26,27,0.5); }
.detail-light .about-slogan { color: var(--charcoal); border-left-color: var(--color-brand-deep); }
.detail-light .pillar-item { border-bottom-color: rgba(31,26,27,0.08); }
.detail-light .pillar-item:first-child { border-top-color: rgba(31,26,27,0.08); }
.detail-light .pillar-tag { color: var(--color-brand-deep); }

/* FAQ on light background */
.detail-light .faq-category-tag { color: var(--color-brand-deep); }
.detail-light .faq-item { border-bottom-color: rgba(31,26,27,0.08); }
.detail-light .faq-item summary { color: var(--charcoal); }
.detail-light .faq-item summary:hover { color: var(--color-brand-deep); }
.detail-light .faq-item summary::after { color: rgba(31,26,27,0.3); }
.detail-light .faq-answer { color: rgba(31,26,27,0.55); }
.detail-light .faq-answer strong { color: var(--charcoal); }
.detail-light .faq-answer .faq-highlight { color: var(--color-brand-deep); }
.detail-light .faq-answer .faq-ref { color: rgba(31,26,27,0.35); }
/* Record cards on dark bg after light FAQ */
.detail-light .record-card { border-color: rgba(31,26,27,0.12); }
.detail-light .record-card:hover { border-color: var(--color-brand-deep); background: rgba(111,93,96,0.08); box-shadow: 0 16px 60px rgba(111,93,96,0.18), 0 0 0 1px var(--color-brand-deep); }

/* ═══ DETAIL PAGE SNAP SYSTEM — 엄격 1섹션 1슬라이드 (100vh) ═══ */

html.detail-page {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
.dp-container {
  /* no special scroll — html handles it */
}

/* 엄격 슬라이드: 정확히 뷰포트 높이 */
.dp-slide {
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* 레거시 오버플로 클래스 → 엄격 슬라이드와 동일 동작 */
.dp-slide--overflow {
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* 콘텐츠 밀도가 큰 슬라이드 — 내부 스크롤 허용 (슬라이드 자체는 여전히 100vh 스냅) */
.dp-slide--scroll {
  overflow-y: auto;
  overflow-x: hidden;
  justify-content: flex-start;
  padding-top: clamp(80px, 10vh, 160px);
  padding-bottom: var(--slide-pad-y);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,240,238,0.2) transparent;
}
.dp-slide--scroll::-webkit-scrollbar { width: 4px; }
.dp-slide--scroll::-webkit-scrollbar-thumb { background: rgba(245,240,238,0.2); }
.dp-slide--scroll::-webkit-scrollbar-track { background: transparent; }

.dp-slide-scroll {
  width: 100%;
  max-width: min(1600px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

/* Merged CTA+footer slide */
.dp-slide--merged {
  height: auto;
  min-height: 100vh;
  max-height: none;
  scroll-snap-align: end;
  justify-content: space-between;
  overflow: visible;
}

/* Scroll indicator for overflow slides */
.dp-overflow-hint {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.dp-overflow-hint span {
  font-family: var(--display); font-size: 8px; letter-spacing: 0.15em;
  text-transform: uppercase; color: rgba(245,240,238,0.2);
}
.dp-overflow-hint::after {
  content: ''; width: 1px; height: 20px;
  background: linear-gradient(to bottom, rgba(245,240,238,0.2), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

/* Detail dot navigation */
.dp-nav {
  position: fixed; right: 28px; top: 50%; transform: translateY(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 16px;
}
.dp-nav-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(245,240,238,0.15); cursor: pointer;
  transition: background var(--dur-panel), transform var(--dur-panel);
  position: relative;
}
.dp-nav-dot:hover, .dp-nav-dot.active {
  background: var(--color-brand); transform: scale(1.3);
}
.dp-nav-dot span {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-family: var(--display); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(245,240,238,0.4);
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-panel);
}
.dp-nav-dot:hover span { opacity: 1; }
.dp-nav.light-mode .dp-nav-dot { background: rgba(31,26,27,0.2); }
.dp-nav.light-mode .dp-nav-dot:hover,
.dp-nav.light-mode .dp-nav-dot.active { background: var(--color-brand-deep); }
.dp-nav.light-mode .dp-nav-dot span { color: rgba(31,26,27,0.5); }

/* ── Responsive: disable enhancements on mobile ── */
@media (max-width: 768px) {
  .film-grain { display: none; }
  .gradient-blob { display: none; }
  .ambient-particles { display: none; }
  .magnetic { will-change: auto; }
  .text-reveal { overflow: visible; }
  .detail-hero { min-height: 40vh; padding: 100px 24px 48px; }
  .detail-hero-title { font-size: clamp(24px, 7vw, 40px); }
  html.detail-page { scroll-snap-type: none; }
  .dp-slide { min-height: auto; scroll-snap-align: none; }
  .dp-nav { display: none; }
}

/* ── v2 Subpage Typography Alignment ── */
.detail-section .sec-sub { text-align: left; max-width: 620px; }
.detail-section p { line-height: 1.9; }

/* ── Next Page Navigator ── */
.page-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 52px; margin-top: 40px; gap: 20px;
}
.page-nav a {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: clamp(9px, 0.65vw, 10px);
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  color: rgba(245,240,238,0.3); text-decoration: none;
  transition: color var(--dur-panel) ease, gap var(--dur-panel) ease;
}
.page-nav a:hover { color: var(--color-brand); gap: 16px; }
.detail-light .page-nav a { color: rgba(31,26,27,0.3); }
.detail-light .page-nav a:hover { color: var(--color-brand); }
@media (max-width: 768px) {
  .page-nav {
    padding: 0 16px;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
    margin-top: 24px;
  }
  .page-nav a {
    font-size: 10px;
    white-space: nowrap;
    letter-spacing: 0.1em;
  }
}

/* ═══ FIX 1: Subpage Typography Visibility ═══ */
/* Detail section headings — BOLD for readability */
.detail-section .sec-title {
  font-weight: 400 !important; letter-spacing: -0.02em;
  color: var(--text-inverse);
}
.detail-section .sec-title strong {
  font-weight: 900 !important;
}
.detail-light .detail-section .sec-title,
.detail-light .sec-title { color: var(--charcoal) !important; font-weight: 400 !important; }
.detail-light .detail-section .sec-title strong,
.detail-light .sec-title strong { color: var(--color-brand-deep) !important; font-weight: 900 !important; }

/* Detail hero title — stronger */
.detail-hero-title {
  font-weight: 300 !important;
  color: var(--text-inverse) !important;
}
.detail-hero-title strong { font-weight: 900 !important; }

/* Product/Science section titles — token-driven (auto-flip light/dark scope) */
.product-title { font-weight: 300 !important; font-size: clamp(36px, 3.2vw, 52px) !important; color: var(--text-primary); letter-spacing: -0.02em; }
.product-name { font-weight: 600 !important; font-size: clamp(18px, 1.5vw, 24px); color: var(--text-primary); }
.sci-num { font-weight: 400 !important; font-size: clamp(48px, 4vw, 72px); color: var(--text-primary); }
/* .science-card 안 텍스트 — base가 이미 token이라 .science-card override는 token re-bind만 (cascade 명시) */
.science-card .sci-num,
.science-card .sci-pharma-text,
.science-card .sci-tag,
.science-card h2,
.science-card h3 { color: var(--text-primary) !important; }
.science-card .sci-sub { color: var(--text-tertiary) !important; }
.science-card .sci-desc,
.science-card p { color: var(--text-secondary) !important; }
/* Mechanism (mech-*) inside .science-card */
.science-card .mech-step { border-bottom-color: var(--border-subtle); }
.science-card .mech-title { color: var(--text-primary); }
.science-card .mech-desc { color: var(--text-secondary); }
.science-card .mech-ref { color: var(--text-tertiary); }
/* Categories grid */
.science-card .sci-cat { background: var(--color-brand-tint); border-color: var(--border-subtle); }
.science-card .sci-cat-name { color: var(--text-primary); }
.science-card .sci-cat-desc { color: var(--text-tertiary); }
/* Synergy block */
.science-card .sci-synergy-formula { color: var(--text-primary); }
.science-card .sci-synergy-desc { color: var(--text-tertiary); }
/* References */
.science-card .sci-refs { border-top-color: var(--border-subtle); }
.science-card .sci-refs-title { color: var(--text-tertiary); }
.science-card .sci-ref-item { color: var(--text-secondary); border-bottom-color: var(--border-subtle); }
.science-card .sci-ref-journal { color: var(--color-brand); }

/* Body text — higher contrast + readable size, token-driven */
/* Phase 6 Batch 7: font-size/line-height !important 제거 — mobile cascade 자연 작동 */
.detail-section .sec-sub {
  font-size: clamp(18px, 1.3vw, 20px);
  font-weight: 400;
  color: var(--text-secondary) !important;
  line-height: 1.95;
}

/* Tech feature titles bolder */
.tech-feat-title { font-weight: 700 !important; font-size: clamp(16px, 1.1vw, 18px) !important; }
.detail-light .tech-feat-title { color: var(--charcoal) !important; }

/* Product/Science body text — readable size + contrast */
.product-body, .sci-desc, .cat-desc, .step-desc, .pd-body {
  font-size: clamp(17px, 1.2vw, 19px) !important;
  font-weight: 400 !important;
  line-height: 1.95;
  color: var(--text-inverse-soft) !important;
}
.detail-light .product-body,
.detail-light .sci-desc,
.detail-light .cat-desc { color: rgba(31,26,27,0.7) !important; }

/* Product role tag */
.product-role { color: rgba(245,240,238,0.5) !important; }
.detail-light .product-role { color: rgba(31,26,27,0.5) !important; }

/* Detail hero subtitle */
/* Phase 6 Batch 7: font-size !important 제거 — mobile cascade 자연 작동 */
.detail-hero-sub {
  color: rgba(245,240,238,0.6) !important;
  font-size: var(--fs-body-lg);
  font-weight: 400 !important;
}

/* ═══ FAQ Readability Overhaul ═══ */

/* Category title — teal colored, large, bold */
.accordion-trigger span {
  font-family: var(--display) !important;
  font-size: clamp(16px, 1.3vw, 20px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: var(--color-brand) !important;
}
.detail-light .accordion-trigger span { color: var(--color-brand-deep) !important; }

/* Category number tag */
.faq-category-tag {
  font-size: clamp(9px, 0.7vw, 11px) !important;
  margin-bottom: 20px !important;
}

/* Question text — bold, clearly distinct from answer */
/* Phase 6 Batch 7: font-size/padding/line-height !important 제거 — mobile cascade 자연 작동 */
.faq-item summary {
  font-family: var(--ko) !important;
  font-size: clamp(18px, 1.3vw, 20px);
  font-weight: 600 !important;
  color: var(--text-inverse) !important;
  line-height: 1.7;
  padding: 20px 2px;
}
.detail-light .faq-item summary { color: var(--charcoal) !important; }

/* Answer text — indented, lighter, smaller — clearly subordinate */
/* Phase 6 Batch 7: font-size/padding/max-width/line-height !important 제거 — mobile cascade 자연 작동 */
.faq-answer {
  font-size: clamp(16px, 1.1vw, 18px);
  font-weight: 400 !important;
  color: rgba(245,240,238,0.5) !important;
  line-height: 2.05;
  padding: 4px 2px 28px 20px;
  max-width: 780px;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  border-left: 2px solid rgba(148,127,130,0.15) !important;
  margin-left: 2px !important;
}
.detail-light .faq-answer {
  color: rgba(31,26,27,0.55) !important;
  border-left-color: rgba(148,127,130,0.2) !important;
}
.faq-answer strong { font-weight: 600 !important; color: rgba(245,240,238,0.75) !important; }
.detail-light .faq-answer strong { color: rgba(31,26,27,0.8) !important; }
.faq-answer .faq-highlight { color: var(--color-brand) !important; font-weight: 500 !important; }
.faq-answer br { display: block; content: ''; margin-top: 0; }

/* ═══ FAQ Disclaimer — 근거 문헌 정책 안내 ═══ */
.faq-disclaimer {
  margin: 40px 0 48px;
  padding: 20px 24px;
  border-left: 2px solid var(--color-brand);
  background: rgba(148,127,130,0.05);
  font-family: var(--ko);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(245,240,238,0.55);
  max-width: 900px;
}
.faq-disclaimer strong {
  color: var(--color-brand);
  font-weight: 500;
}
.detail-light .faq-disclaimer {
  color: rgba(31,26,27,0.65);
  background: rgba(148,127,130,0.06);
}
.detail-light .faq-disclaimer strong {
  color: var(--color-brand-deep, #006F7D);
}

/* ═══ FAQ Reference — 기전 근거 라벨 프리픽스 ═══ */
.faq-ref::before {
  content: '기전 근거 · ';
  color: var(--color-brand);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.04em;
}
.detail-light .faq-ref::before {
  color: var(--color-brand-deep, #006F7D);
}

/* ═══ FAQ Focus Mode — 선택 안 된 질문 summary를 opacity로 아웃포커스 ═══ */
.faq-item summary { transition: opacity 0.35s ease; }
.faq-grid.has-open .faq-item.faq-dim summary { opacity: 0.3 !important; }
.faq-grid.has-open .faq-item.faq-dim summary:hover { opacity: 0.65 !important; }

/* ═══ Diff Table on Light Background (FAQ, detail-light) ═══ */
.detail-light .diff-table th,
.detail-light .diff-table td {
  color: var(--charcoal) !important;
  border-color: rgba(31,26,27,0.12) !important;
}
.detail-light .diff-table th:first-child,
.detail-light .diff-table td:first-child {
  color: rgba(31,26,27,0.55) !important;
}
.detail-light .diff-table th:nth-child(2) {
  background: rgba(148,127,130,0.1) !important;
  color: var(--color-brand-deep, #006F7D) !important;
}
.detail-light .diff-table td:nth-child(2) {
  background: var(--color-brand-tint) !important;
  color: var(--charcoal) !important;
  font-weight: 500 !important;
}
.detail-light .diff-table th:nth-child(3),
.detail-light .diff-table td:nth-child(3) {
  color: rgba(31,26,27,0.6) !important;
}

/* Core statement box */
.core-statement { color: rgba(245,240,238,0.65) !important; }
.detail-light .core-statement { color: rgba(31,26,27,0.65) !important; }

/* ═══════════════════════════════════════════════════
   INQUIRY MODAL — Clinic / Partner contact form
   ═══════════════════════════════════════════════════ */
/* Custom cursor above modal */
.cur-dot { z-index: 100001 !important; }
.cur-ring { z-index: 100000 !important; }

.inquiry-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: none; align-items: center; justify-content: center;
  padding: 40px 20px;
  font-family: var(--ko);
}
.inquiry-modal.is-open {
  display: flex;
  animation: inquiryFadeIn var(--dur-panel) ease;
}
@keyframes inquiryFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.inquiry-backdrop {
  position: absolute; inset: 0;
  background: rgba(31,26,27,0.45);    /* light theme — soft dark scrim */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.inquiry-dialog {
  position: relative;
  background: var(--text-inverse);
  color: var(--charcoal);
  width: min(640px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: 56px 56px 48px;
  border-radius: 4px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.5);
  animation: inquirySlideUp 0.4s var(--ease-out-quart);
}
@keyframes inquirySlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.inquiry-close {
  position: absolute; top: 18px; right: 22px;
  width: 36px; height: 36px;
  background: none; border: none;
  font-size: 28px; font-weight: 300;
  color: rgba(31,26,27,0.5);
  cursor: pointer;
  transition: color var(--dur-micro);
  line-height: 1;
}
.inquiry-close:hover { color: var(--color-brand); }

.inquiry-header { margin-bottom: 36px; }
.inquiry-tag {
  font-family: var(--display); font-size: var(--fs-tag);                     /* Label tier */
  letter-spacing: var(--ls-label); text-transform: uppercase;
  font-weight: 600; color: var(--color-brand); margin-bottom: 14px;
}
.inquiry-title {
  font-family: var(--display); font-size: var(--fs-h3); font-weight: 300;    /* H3 tier */
  line-height: var(--lh-display); letter-spacing: var(--ls-tight);
  color: var(--charcoal); margin: 0 0 10px;
}
.inquiry-subtitle {
  font-family: var(--ko); font-size: var(--fs-sm); font-weight: 300;         /* Caption tier */
  color: rgba(31,26,27,0.55); margin: 0; line-height: var(--lh-tight-body);
}

.inquiry-type-tabs {
  display: flex; gap: 2px;
  background: rgba(31,26,27,0.05);
  padding: 4px; border-radius: 2px;
  margin-bottom: 28px;
}
.inquiry-type-tab {
  flex: 1; text-align: center; cursor: pointer;
  padding: 10px 16px;
  font-family: var(--display); font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em; color: rgba(31,26,27,0.55);
  border-radius: 2px;
  transition: background 0.25s, color 0.25s;
}
.inquiry-type-tab input { display: none; }
.inquiry-type-tab:hover { color: var(--charcoal); }
.inquiry-type-tab:has(input:checked) {
  background: #1A1A18;
  color: var(--text-inverse);
}

.inquiry-form { display: block; }
.inquiry-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 18px;
}
.inquiry-row[hidden] { display: none; }
.inquiry-label {
  display: block;
  font-family: var(--ko); font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(31,26,27,0.6);
}
.inquiry-label--full { grid-column: 1 / -1; margin-bottom: 18px; }
.inquiry-label > span {
  display: block;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
}
.inquiry-label > span em {
  color: var(--color-brand); font-style: normal; font-weight: 700;
}
.inquiry-label input[type="text"],
.inquiry-label input[type="email"],
.inquiry-label input[type="tel"],
.inquiry-label select,
.inquiry-label textarea {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--ko); font-size: 14px; font-weight: 400;
  color: var(--charcoal);
  background: #FFFFFF;
  border: 1px solid rgba(31,26,27,0.15);
  border-radius: 2px;
  transition: border-color var(--dur-micro), box-shadow var(--dur-micro);
  box-sizing: border-box;
}
.inquiry-label textarea {
  resize: vertical; min-height: 100px; line-height: 1.6;
}
.inquiry-label input:focus,
.inquiry-label select:focus,
.inquiry-label textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(148,127,130,0.12);
}
.inquiry-label input:invalid:not(:placeholder-shown) {
  border-color: var(--status-error);
}

.inquiry-checks {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  padding: 10px 0;
}
.inquiry-checks label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 400; color: rgba(31,26,27,0.75);
  cursor: pointer; text-transform: none; letter-spacing: 0;
}
.inquiry-checks input[type="checkbox"] {
  width: 14px; height: 14px; accent-color: var(--color-brand); margin: 0;
}

.inquiry-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.inquiry-consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 20px 0 24px;
  font-size: 11px; font-weight: 300;
  color: rgba(31,26,27,0.6); line-height: 1.65;
  cursor: pointer;
}
.inquiry-consent input[type="checkbox"] {
  flex-shrink: 0; margin-top: 2px;
  width: 15px; height: 15px; accent-color: var(--color-brand);
}

.inquiry-actions {
  display: flex; align-items: center; gap: 20px;
  padding-top: 8px;
  border-top: 1px solid rgba(31,26,27,0.08);
  margin-top: 8px; padding-top: 24px;
  flex-wrap: wrap;
}
.inquiry-submit {
  flex-shrink: 0;
  padding: 14px 36px;
  background: #1A1A18;
  color: var(--text-inverse);
  border: none; border-radius: 2px;
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-micro), transform 0.15s;
}
.inquiry-submit:hover:not(:disabled) { background: var(--color-brand); }
.inquiry-submit:disabled { opacity: 0.5; cursor: wait; }

.inquiry-status {
  flex: 1;
  font-size: 12px; font-weight: 400;
  color: rgba(31,26,27,0.65);
  line-height: 1.5;
}
.inquiry-status.is-success { color: var(--status-success); }
.inquiry-status.is-error { color: var(--status-error); }

/* Record CTA button reset — when it's a <button> not <a> */
.record-cta[data-inquiry-open] {
  font-family: var(--display); font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600; color: var(--color-brand);
  border-bottom: 1px solid var(--color-brand); padding-bottom: 2px !important;
  display: inline-block;
}
.record-cta[data-inquiry-open]:hover { color: var(--color-brand-deep); }

/* ═══ Searchable Country Select ═══ */
.country-select { position: relative; width: 100%; }
.country-select-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 11px 14px;
  font-family: var(--ko); font-size: 14px; font-weight: 400;
  color: var(--charcoal); background: #FFFFFF;
  border: 1px solid rgba(31,26,27,0.15); border-radius: 2px;
  cursor: pointer; transition: border-color var(--dur-micro);
  box-sizing: border-box;
}
.country-select-trigger:hover,
.country-select-trigger:focus { border-color: var(--color-brand); outline: none; }
.country-select-trigger:focus-visible { box-shadow: var(--shadow-focus); }
.country-select-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-select-arrow { flex-shrink: 0; margin-left: 8px; font-size: 12px; color: rgba(31,26,27,0.4); }
.country-select-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #FFFFFF; border: 1px solid rgba(31,26,27,0.15);
  border-radius: 2px; box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index: 100; max-height: 280px; display: flex; flex-direction: column;
}
.country-select-dropdown[hidden] { display: none !important; }
.country-select-search {
  padding: 10px 14px; border: none; border-bottom: 1px solid rgba(31,26,27,0.1);
  font-family: var(--ko); font-size: 14px; outline: none; width: 100%;
  box-sizing: border-box;
}
.country-select-search:focus-visible { box-shadow: var(--shadow-focus); }
.country-select-search::placeholder { color: rgba(31,26,27,0.35); }
.country-select-list {
  list-style: none; margin: 0; padding: 4px 0;
  overflow-y: auto; flex: 1;
}
.country-select-list li {
  padding: 9px 14px; cursor: pointer;
  font-family: var(--ko); font-size: 13px; color: var(--charcoal);
  transition: background 0.15s;
}
.country-select-list li:hover { background: var(--color-brand-tint); }
.country-select-list li span { font-size: 12px; }

/* 4K overrides for inquiry modal */
@media (min-width: 2560px) {
  .inquiry-dialog {
    width: min(1120px, 80vw);
    padding: clamp(88px, 4.4vh, 104px) clamp(88px, 4.4vh, 104px) clamp(72px, 3.7vh, 88px) !important;
    max-height: 92vh;
  }
  .inquiry-close { top: 28px; right: 32px; width: 56px !important; height: 56px !important; font-size: 44px !important; }
  .inquiry-tag { font-size: clamp(16px, 0.83vh, 20px) !important; margin-bottom: clamp(22px, 1.1vh, 26px) !important; }
  .inquiry-title { font-size: clamp(52px, 2.7vh, 60px) !important; margin-bottom: clamp(16px, 0.83vh, 20px); }
  .inquiry-subtitle { font-size: clamp(22px, 1.1vh, 26px) !important; }
  .inquiry-header { margin-bottom: clamp(60px, 3vh, 72px); }
  .inquiry-type-tabs { padding: 8px; margin-bottom: clamp(52px, 2.6vh, 60px); }
  .inquiry-type-tab { padding: clamp(18px, 0.93vh, 22px) clamp(28px, 0.84vw, 36px) !important; font-size: clamp(20px, 1vh, 24px); }
  .inquiry-row { gap: 28px !important; margin-bottom: clamp(28px, 1.5vh, 36px); }
  .inquiry-label > span { font-size: clamp(16px, 0.83vh, 20px); margin-bottom: clamp(14px, 0.74vh, 18px); }
  .inquiry-label input[type="text"],
  .inquiry-label input[type="email"],
  .inquiry-label input[type="tel"],
  .inquiry-label select,
  .inquiry-label textarea {
    padding: clamp(20px, 1vh, 24px) clamp(24px, 0.73vw, 30px);
    font-size: clamp(22px, 1.1vh, 26px);
  }
  .inquiry-label textarea { min-height: clamp(180px, 9vh, 220px) !important; }
  .inquiry-checks { gap: 18px 32px; padding: 16px 0; }
  .inquiry-checks label { font-size: clamp(20px, 1vh, 24px); gap: 12px; }
  .inquiry-checks input[type="checkbox"] { width: 24px; height: 24px; }
  .inquiry-consent { font-size: clamp(18px, 0.93vh, 22px) !important; gap: 16px; margin: clamp(36px, 1.85vh, 44px) 0 clamp(44px, 2.2vh, 52px); }
  .inquiry-consent input[type="checkbox"] { width: 26px !important; height: 26px !important; margin-top: 4px !important; }
  .inquiry-actions { gap: 36px; padding-top: clamp(44px, 2.2vh, 52px); }
  .inquiry-submit { padding: clamp(24px, 1.2vh, 28px) clamp(60px, 1.66vw, 72px) !important; font-size: clamp(20px, 1vh, 24px) !important; letter-spacing: 0.14em !important; }
  .inquiry-status { font-size: clamp(20px, 1vh, 24px); }
}

/* Mobile */
@media (max-width: 640px) {
  .inquiry-dialog { padding: 40px 28px 32px; max-height: 92vh; }
  .inquiry-title { font-size: 26px; }
  .inquiry-row { grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
  .inquiry-type-tabs { flex-direction: column; }
  .inquiry-type-tab { padding: 12px; }
  .inquiry-actions { flex-direction: column; align-items: flex-start; gap: 14px; }
  .inquiry-submit { width: 100%; }
}

/* ═══ FIX 2: Nav Hover — Teal Underline ═══ */

/* All top-level nav links get underline pseudo-element */
.nav-links > a,
.nav-links > .nav-dropdown > a {
  position: relative;
}
.nav-links > a::after,
.nav-links > .nav-dropdown > a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1.5px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out-quart);
  pointer-events: none;
}

/* Hover → show underline */
.nav-links > a:hover::after,
.nav-links > .nav-dropdown:hover > a::after {
  transform: scaleX(1);
}

/* [O] home link — no underline */
.nav-links > a.nav-home::after { display: none; }

/* Dropdown sub-menu items — NO underline pseudo */
.nav-dropdown-menu a::after { display: none !important; }

/* Light mode nav hover: teal text + teal underline */
nav.nav-light .nav-links > a:hover { color: var(--color-brand) !important; font-weight: 700; }
nav.nav-light .nav-links > a:hover::after,
nav.nav-light .nav-links > .nav-dropdown:hover > a::after { background: var(--color-brand); }

/* ═══ FIX 3: SEM Image Hover Animation ═══ */
.sem-image-wrap {
  position: relative;
  overflow: hidden;
  border: 0.5px solid rgba(31,26,27,0.08);
}
.sem-image-wrap img {
  width: 100%;
  display: block;
  transition: transform 0.6s var(--ease-out-quart), filter 0.6s ease;
}
.sem-image-wrap:hover img {
  transform: scale(1.08);
  filter: contrast(1.05) brightness(1.02);
}
.sem-image-wrap .sem-badge {
  position: absolute;
  top: 10px; right: 12px;
  font-family: var(--display);
  font-size: 14px; font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  transition: transform 0.4s ease, opacity var(--dur-panel);
}
.sem-image-wrap:hover .sem-badge {
  transform: translateY(-2px);
}
/* Overlay reveal on hover */
.sem-image-wrap::after {
  content: 'View Detail';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255,255,255,0);
  text-align: center;
  transition: color 0.4s ease;
}
.sem-image-wrap:hover::after {
  color: rgba(255,255,255,0.7);
}

/* ============================================================
   4K+ OPTIMIZATION (3000px+)
   Override :root token caps so content scales past 1440p limits.
   Also bumps nav, logo, body max-widths, and signal rows for
   readability on 27"–32" 4K monitors.
   ============================================================ */
@media (min-width: 2560px) {
  :root {
    --slide-pad-y:    clamp(80px, 7vh, 200px);
    --slide-pad-x:    clamp(64px, 5vw, 220px);
    --slide-gap-lg:   clamp(40px, 3.2vh, 88px);
    --slide-gap-md:   clamp(24px, 2.2vh, 48px);
    --slide-gap-sm:   clamp(12px, 1.1vh, 22px);

    --fs-hero:        clamp(120px, 10vh, 260px);
    --fs-h1:          clamp(88px, 7.5vh, 192px);
    --fs-h2:          clamp(56px, 5.8vh, 132px);
    --fs-h3:          clamp(36px, 3.8vh, 72px);
    --fs-body-lg:     clamp(40px, 2.04vh, 46px);
    --fs-body:        clamp(32px, 1.67vh, 38px);
    --fs-sm:          clamp(26px, 1.3vh, 30px);
    --fs-tag:         clamp(24px, 1.2vh, 28px);
  }

  /* NAV */
  nav { height: clamp(96px, 6vh, 140px); padding: 0 clamp(64px, 4vw, 180px); }
  .nav-logo img { height: clamp(32px, 2.4vh, 52px) !important; width: auto !important; }
  .nav-home { font-size: clamp(24px, 1.8vh, 38px) !important; }
  .nav-links { gap: clamp(56px, 3.5vw, 120px) !important; }
  .nav-links a { font-size: clamp(28px, 1.4vh, 32px) !important; letter-spacing: 0.16em; }
  .nav-dropdown-menu a { font-size: clamp(22px, 1.2vh, 28px) !important; letter-spacing: 0.08em; padding: 14px 0; }
  .nav-dropdown-menu { min-width: 320px; }

  /* SIDE DOT NAV */
  .dp-nav { right: clamp(32px, 2.2vw, 72px); gap: clamp(20px, 1.4vh, 36px); }
  .dp-nav-dot { width: clamp(10px, 0.7vh, 16px); height: clamp(10px, 0.7vh, 16px); }
  .dp-nav-dot span { font-size: clamp(12px, 0.9vh, 18px); }

  /* BODY / SUBHEAD MAX-WIDTHS — no more 560px cramming */
  .detail-hero-sub { max-width: min(1120px, 62vw) !important; }
  .sec-sub { max-width: min(1240px, 64vw) !important; }
  .gs-body { max-width: min(1100px, 62vw) !important; }
  /* Detail hero text container — widen so scaled-up h1 doesn't wrap beyond intended line count */
  .detail-hero-text { max-width: min(2200px, 80vw); }

  /* SIGNAL ROW (home hero stats under sphere) */
  .signal-num { font-size: clamp(56px, 4.2vh, 96px) !important; }
  .signal-label { font-size: clamp(12px, 0.95vh, 18px) !important; letter-spacing: 0.24em; }
  .signal-sub { font-size: clamp(13px, 1.1vh, 20px) !important; }

  /* HOME HERO inner — widen so title can breathe */
  .hero-inner { max-width: min(1800px, 80vw); padding: clamp(80px, 8vh, 160px) clamp(64px, 5vw, 160px) clamp(60px, 6vh, 120px); }

  /* STAT CARDS — FHD 스타일 스케일 업 (letter-spacing/padding 유지) */
  .gs-stat { padding: clamp(40px, 3.6vh, 72px) clamp(24px, 2vw, 56px); min-width: 240px; }
  .gs-stats--row { gap: clamp(16px, 1.4vh, 32px) !important; margin-bottom: clamp(40px, 3.6vh, 72px) !important; }
  .gs-stats--row .gs-stat { flex: 1; max-width: clamp(280px, 18vw, 400px) !important; }
  .gs-stat-num { font-size: clamp(56px, 4.6vh, 108px) !important; margin-bottom: clamp(12px, 1vh, 20px) !important; }
  .gs-stat-label { font-size: clamp(14px, 1.2vh, 22px) !important; letter-spacing: 0.04em; margin-top: clamp(10px, 1vh, 20px); }

  /* CTAs — bigger on 4K */
  .gs-cta, .hero-cta { font-size: clamp(15px, 1.2vh, 24px); letter-spacing: 0.22em; padding-bottom: 8px; }

  /* Scene content wrappers — widen on 4K */
  .science-center-content { max-width: min(1600px, 72vw); padding: 0 clamp(48px, 4vw, 120px); }
  .fulltype-content { max-width: min(1800px, 78vw) !important; padding: 0 clamp(48px, 4vw, 120px) !important; }
  .scene-content--center { max-width: min(1600px, 72vw) !important; padding: clamp(80px, 8vh, 160px) clamp(48px, 4vw, 120px) !important; }
  .scene-content--left, .scene-content--right { width: 48%; padding-left: clamp(72px, 6vw, 180px); padding-right: clamp(40px, 3vw, 100px); }

  /* CONTAINER WIDTHS */
  .container { max-width: min(2800px, 78vw); padding: 0 clamp(48px, 4vw, 140px); }
  .dp-slide-scroll { max-width: min(2800px, 82vw) !important; }

  /* CATEGORY / GRID CARDS */
  .cat-grid { gap: clamp(4px, 0.4vh, 8px); margin-top: clamp(24px, 2.4vh, 48px); }
  .cat-card { padding: clamp(32px, 3vh, 64px) clamp(36px, 2.8vw, 72px); }
  .cat-num { font-size: clamp(12px, 0.95vh, 18px); letter-spacing: 0.22em; margin-bottom: clamp(12px, 1vh, 20px); }
  .cat-title { font-size: clamp(24px, 2.2vh, 42px) !important; margin-bottom: clamp(8px, 0.8vh, 16px); }
  .cat-desc { font-size: clamp(14px, 1.2vh, 22px) !important; line-height: 1.9; }

  /* PRODUCT SPECS TABLE */
  .product-specs-table td { font-size: clamp(14px, 1.15vh, 22px); padding: clamp(10px, 1vh, 18px) 0; }
  .product-quote { font-size: clamp(16px, 1.4vh, 26px) !important; padding-left: clamp(16px, 1.2vw, 32px) !important; }
  .product-tag { font-size: clamp(12px, 0.95vh, 18px); letter-spacing: 0.22em; margin-bottom: clamp(16px, 1.4vh, 32px); }
  .product-role-tag { font-size: clamp(14px, 1.2vh, 22px) !important; margin-bottom: clamp(32px, 2.8vh, 56px) !important; }
  .product-body { font-size: clamp(16px, 1.35vh, 24px) !important; }

  /* PRODUCT TITLE — 더 크게 강조 */
  .product-title { font-size: clamp(64px, 5.2vh, 140px) !important; font-weight: 300; line-height: 1.05; margin-bottom: clamp(16px, 1.4vh, 28px); }
  .product-title strong { font-weight: 800 !important; }

  /* RECORD CARDS (Your Record 섹션) — FHD × 2 */
  .record-split { gap: 4px !important; margin-top: clamp(100px, 5vh, 112px) !important; max-width: min(2200px, 84vw); margin-left: auto; margin-right: auto; }
  .record-card { padding: clamp(88px, 4.8vh, 104px) clamp(72px, 2.1vw, 84px); }
  .record-card-tag { font-size: clamp(16px, 0.83vh, 20px); letter-spacing: 0.2em; margin-bottom: clamp(28px, 1.5vh, 36px); }
  .record-card-title { font-size: clamp(44px, 2.2vh, 52px); margin-bottom: clamp(22px, 1.1vh, 26px); line-height: 1.35; }
  .record-card-desc { font-size: clamp(24px, 1.2vh, 28px); line-height: 1.9; margin-bottom: clamp(52px, 2.6vh, 60px); }
  .record-cta { font-size: clamp(18px, 0.93vh, 22px); letter-spacing: 0.16em; padding-bottom: 4px; }

  /* BUTTONS / CTAs */
  .hero-cta, .gs-cta, .nav-cta { font-size: clamp(13px, 1vh, 19px); }

  /* DETAIL CTA SUB — was hardcoded 12px at all sizes */
  .detail-cta-sub { font-size: clamp(20px, 1.1vh, 26px); margin-top: clamp(28px, 1.5vh, 36px); }

  /* Page navigator (← prev | next →) */
  .page-nav { padding: 0 clamp(80px, 2.7vw, 120px); margin-top: clamp(60px, 2.8vh, 80px); gap: clamp(32px, 1.6vh, 40px); }
  .page-nav a { font-size: clamp(18px, 0.93vh, 22px); gap: clamp(16px, 0.83vh, 20px); letter-spacing: 0.18em; }

  /* ══════ DETAIL HERO (shared sub-page hero) ══════ */
  .detail-hero { padding: clamp(104px, 5vh, 116px) clamp(100px, 2.7vw, 112px) clamp(152px, 7.4vh, 172px); }
  .detail-hero .sec-tag { margin-bottom: clamp(36px, 1.85vh, 44px) !important; }
  .detail-hero-sub { max-width: min(1120px, 62vw) !important; }
  .detail-hero-line { width: clamp(72px, 3.7vh, 88px) !important; margin-top: clamp(60px, 3vh, 72px) !important; }

  /* ══════ DETAIL SECTION sub body ══════ */
  .detail-section .sec-sub { font-size: clamp(28px, 1.5vh, 32px); line-height: 1.95; }

  /* ══════ SCIENCE CARDS — shared science.html selectors ══════ */
  .science-grid { gap: 4px !important; margin-top: clamp(96px, 4.8vh, 112px) !important; }
  .science-card { padding: clamp(92px, 4.4vh, 104px) clamp(76px, 2.1vw, 88px) !important; }

  .sci-pharma-badge { padding: clamp(10px, 0.55vh, 14px) clamp(26px, 0.73vw, 32px) !important; margin-bottom: clamp(44px, 2.2vh, 52px) !important; gap: 16px !important; }
  .sci-pharma-text { font-size: clamp(16px, 0.83vh, 20px) !important; letter-spacing: 0.18em !important; }
  .sci-tag { font-size: clamp(16px, 0.83vh, 20px) !important; margin-bottom: clamp(40px, 2vh, 48px) !important; letter-spacing: 0.2em !important; }

  /* Overrides existing clamp(48,4vw,72) !important */
  .sci-num { font-size: clamp(128px, 6.7vh, 152px) !important; margin-bottom: clamp(8px, 0.46vh, 12px) !important; }

  .sci-sub { font-size: clamp(18px, 0.93vh, 22px) !important; margin-bottom: clamp(48px, 2.4vh, 56px) !important; letter-spacing: 0.14em !important; }
  .sci-div { width: clamp(52px, 1.45vw, 60px) !important; margin-bottom: clamp(40px, 2vh, 48px) !important; }
  /* Beats .product-body, .sci-desc, .cat-desc clamp cap 15px at line 2161 */
  .sci-desc { font-size: clamp(26px, 1.4vh, 32px) !important; line-height: 1.95 !important; }

  .sci-mechanism { margin-top: clamp(72px, 3.7vh, 88px) !important; }
  .mech-step { padding: clamp(28px, 1.5vh, 36px) 0 !important; gap: clamp(36px, 1vw, 44px) !important; }
  .mech-num { font-size: clamp(20px, 1vh, 24px) !important; min-width: clamp(52px, 1.45vw, 60px) !important; letter-spacing: 0.1em !important; margin-top: clamp(2px, 0.1vh, 4px) !important; }
  .mech-title { font-size: clamp(22px, 1.1vh, 26px) !important; margin-bottom: clamp(6px, 0.37vh, 10px) !important; letter-spacing: 0.06em !important; }
  .mech-desc { font-size: clamp(22px, 1.1vh, 26px) !important; line-height: 1.8 !important; }
  .mech-ref { font-size: clamp(18px, 0.93vh, 22px) !important; margin-top: clamp(10px, 0.55vh, 14px) !important; }

  /* ══════ SCI CATEGORIES / SYNERGY / REFS ══════ */
  .sci-categories { margin-top: clamp(44px, 2.2vh, 52px) !important; gap: 2px !important; }
  .sci-cat { padding: clamp(26px, 1.3vh, 32px) clamp(28px, 0.84vw, 36px) !important; }
  .sci-cat-tag { font-size: clamp(14px, 0.74vh, 18px) !important; margin-bottom: clamp(6px, 0.37vh, 10px) !important; letter-spacing: 0.16em !important; }
  .sci-cat-name { font-size: clamp(22px, 1.1vh, 26px) !important; margin-bottom: clamp(4px, 0.28vh, 8px) !important; }
  .sci-cat-desc { font-size: clamp(20px, 1vh, 24px) !important; line-height: 1.7 !important; }

  .sci-synergy { padding: clamp(44px, 2.2vh, 52px) clamp(52px, 1.45vw, 60px) !important; gap: clamp(36px, 1vw, 44px) !important; }
  .sci-synergy-formula { font-size: clamp(26px, 1.3vh, 30px) !important; }
  .sci-synergy-desc { font-size: clamp(22px, 1.1vh, 26px) !important; line-height: 1.8 !important; }

  .sci-refs { margin-top: clamp(92px, 4.4vh, 104px) !important; padding-top: clamp(60px, 3vh, 72px) !important; }
  .sci-refs-title { font-size: clamp(16px, 0.83vh, 20px) !important; margin-bottom: clamp(28px, 1.5vh, 36px) !important; letter-spacing: 0.18em !important; }
  .sci-ref-item { font-size: clamp(20px, 1vh, 24px) !important; padding: clamp(10px, 0.55vh, 14px) 0 !important; line-height: 1.9 !important; }

  /* ══════ TECHNOLOGY GRID (science.html #technology) ══════ */
  .tech-grid { margin-top: clamp(96px, 4.8vh, 112px) !important; }
  .tech-feat { padding: clamp(68px, 3.3vh, 80px) clamp(60px, 1.66vw, 72px); }
  .tech-dot { width: 12px; height: 12px; margin-bottom: clamp(28px, 1.5vh, 36px); }
  /* Beats existing clamp(12,0.85vw,14) !important at line 2156 */
  .tech-feat-title { font-size: clamp(24px, 1.2vh, 28px) !important; margin-bottom: clamp(14px, 0.74vh, 18px); letter-spacing: 0.01em !important; }
  .tech-feat-desc { font-size: clamp(22px, 1.1vh, 26px); line-height: 1.85; }

  /* ══════ SEM image badge — shared w/ science.html ══════ */
  .sem-image-wrap .sem-badge { font-size: clamp(20px, 1vh, 24px) !important; top: clamp(18px, 0.93vh, 22px) !important; right: clamp(22px, 0.58vw, 26px) !important; }
  .sem-image-wrap::after { font-size: clamp(14px, 0.74vh, 18px) !important; padding: clamp(22px, 1.1vh, 26px) !important; letter-spacing: 0.2em !important; }

  /* ══════ Override inline padding:100px 52px on section containers (science/products/protocol) ══════ */
  .dp-slide .container[style*="padding:100px"],
  .detail-section .dp-slide-scroll > .container[style*="padding"] {
    padding: clamp(192px, 9.5vh, 216px) clamp(100px, 2.7vw, 112px) !important;
  }

  /* ══════ PROTOCOL PAGE — accordion, device spec, channel, pd-* ══════ */
  .accordion-trigger { padding: clamp(44px, 2.2vh, 52px) 0 !important; font-size: clamp(36px, 1.85vh, 44px) !important; letter-spacing: -0.01em !important; }
  /* 카테고리 헤딩 (teal color) 4K */
  .accordion-trigger span { font-size: clamp(36px, 1.85vh, 44px) !important; }
  .accordion-body-inner { padding: 0 0 clamp(60px, 3vh, 72px) !important; }
  .accordion-icon { width: clamp(40px, 2vh, 48px) !important; height: clamp(40px, 2vh, 48px) !important; }
  .accordion-icon::before { width: clamp(24px, 1.2vh, 28px) !important; height: 2px !important; }
  .accordion-icon::after { width: 2px !important; height: clamp(24px, 1.2vh, 28px) !important; }
  /* Sub-accordion 4K */
  .sub-accordion-trigger { font-size: clamp(30px, 1.5vh, 36px) !important; padding: 28px 0 !important; }
  .sub-accordion-maker { font-size: clamp(20px, 1vh, 24px) !important; }
  .sub-accordion-trigger::after { font-size: 28px !important; }

  /* Device spec */
  .device-spec-row { gap: 4px !important; margin-top: 4px !important; }
  .device-spec-card { padding: clamp(44px, 2.2vh, 52px) clamp(36px, 1.04vw, 44px) !important; }
  .device-badge { font-size: clamp(14px, 0.74vh, 18px) !important; padding: clamp(5px, 0.28vh, 8px) clamp(14px, 0.42vw, 18px) !important; margin-bottom: clamp(22px, 1.12vh, 26px) !important; letter-spacing: 0.14em !important; }
  .device-name { font-size: clamp(24px, 1.2vh, 28px) !important; margin-bottom: clamp(26px, 1.3vh, 30px) !important; letter-spacing: 0.06em !important; }

  /* Spec table */
  .spec-table td { font-size: clamp(20px, 1vh, 24px) !important; padding: clamp(10px, 0.55vh, 14px) clamp(14px, 0.42vw, 18px) clamp(10px, 0.55vh, 14px) 0 !important; }

  /* Channel science block */
  .channel-title { font-size: clamp(16px, 0.83vh, 20px) !important; margin-bottom: clamp(36px, 1.85vh, 44px) !important; letter-spacing: 0.2em !important; }
  .channel-grid { gap: clamp(44px, 2.2vh, 52px) !important; }
  .channel-item-head { font-size: clamp(22px, 1.1vh, 26px) !important; margin-bottom: clamp(10px, 0.55vh, 14px) !important; letter-spacing: 0.04em !important; }
  .channel-item-body { font-size: clamp(22px, 1.1vh, 26px) !important; line-height: 1.85 !important; }
  .compare-item { gap: 6px !important; }
  .compare-label { font-size: clamp(16px, 0.83vh, 20px) !important; letter-spacing: 0.16em !important; }
  .compare-val { font-size: clamp(24px, 1.2vh, 28px) !important; }
  .channel-compare { padding-top: clamp(44px, 2.2vh, 52px) !important; margin-top: clamp(44px, 2.2vh, 52px) !important; }

  /* PD sections */
  .pd-section { margin-bottom: clamp(80px, 4vh, 96px) !important; }
  .pd-section-tag { font-size: clamp(16px, 0.83vh, 20px) !important; margin-bottom: clamp(28px, 1.5vh, 36px) !important; letter-spacing: 0.2em !important; }
  .pd-section-title { font-size: clamp(28px, 1.5vh, 36px) !important; margin-bottom: clamp(22px, 1.1vh, 26px) !important; letter-spacing: 0.02em !important; }
  .pd-section-sub { font-size: clamp(22px, 1.1vh, 26px) !important; margin-top: clamp(36px, 1.85vh, 44px) !important; margin-bottom: clamp(18px, 0.93vh, 22px) !important; padding-bottom: clamp(14px, 0.74vh, 18px) !important; letter-spacing: 0.06em !important; }
  .pd-body { font-size: clamp(26px, 1.4vh, 32px) !important; line-height: 1.95 !important; }
  .pd-note { font-size: clamp(20px, 1vh, 24px) !important; margin-top: clamp(10px, 0.55vh, 14px) !important; }
  .pd-disclaimer { font-size: clamp(13px, 0.65vh, 16px) !important; line-height: 1.75 !important; margin-top: clamp(48px, 2.4vh, 60px) !important; padding-top: clamp(24px, 1.2vh, 32px) !important; max-width: 100ch !important; }

  /* PD grid/cards */
  .pd-grid { gap: 4px !important; margin-top: clamp(28px, 1.5vh, 36px) !important; }
  .pd-card { padding: clamp(36px, 1.85vh, 44px) clamp(32px, 0.94vw, 40px) !important; }
  .pd-card-label { font-size: clamp(16px, 0.83vh, 20px) !important; margin-bottom: clamp(14px, 0.74vh, 18px) !important; letter-spacing: 0.18em !important; }
  .pd-card-body { font-size: clamp(22px, 1.1vh, 26px) !important; line-height: 1.9 !important; }

  /* PD table */
  .pd-table td, .pd-table th { font-size: clamp(22px, 1.1vh, 26px) !important; padding: clamp(18px, 0.93vh, 22px) clamp(22px, 0.63vw, 26px) clamp(18px, 0.93vh, 22px) 0 !important; }
  .pd-table td:first-child { min-width: 160px !important; }
  .pd-divider { margin: clamp(60px, 3vh, 72px) 0 !important; }

  /* Evidence blocks */
  .pd-evidence-block { gap: 4px !important; margin-top: clamp(26px, 1.3vh, 30px) !important; }
  .pd-ev-item { padding: clamp(28px, 1.5vh, 36px) clamp(36px, 1.04vw, 44px) !important; gap: clamp(22px, 0.63vw, 26px) !important; }
  .pd-ev-num { font-size: clamp(16px, 0.83vh, 20px) !important; min-width: 80px !important; letter-spacing: 0.12em !important; margin-top: clamp(2px, 0.1vh, 4px) !important; }
  .pd-ev-title { font-size: clamp(20px, 1vh, 24px) !important; margin-bottom: clamp(4px, 0.28vh, 8px) !important; letter-spacing: 0.03em !important; }
  .pd-ev-body { font-size: clamp(20px, 1vh, 24px) !important; line-height: 1.9 !important; }
  .pd-ev-ref { font-size: clamp(18px, 0.93vh, 22px) !important; margin-top: clamp(6px, 0.37vh, 10px) !important; }

  /* ══════ PRODUCTS PAGE — product-detail, diff-evidence, pd-timeline, pd-ref-table ══════ */
  /* Tighten existing caps that were under-scaling at 4K */
  .product-title { font-size: clamp(96px, 5vh, 112px) !important; margin-bottom: clamp(18px, 1vh, 24px); }
  /* #protocol title matches product-title size at 4K */
  #protocol .sec-title { font-size: clamp(96px, 5vh, 112px) !important; }
  .product-role-tag { font-size: clamp(22px, 1.1vh, 26px) !important; margin-bottom: clamp(58px, 3vh, 68px) !important; }
  .product-specs-table { margin-bottom: clamp(58px, 3vh, 68px) !important; }
  .product-specs-table td { font-size: clamp(22px, 1.1vh, 26px) !important; padding: clamp(18px, 0.93vh, 22px) 0; }
  .product-quote { font-size: clamp(24px, 1.2vh, 28px) !important; margin-bottom: clamp(72px, 3.7vh, 88px) !important; padding-left: clamp(28px, 0.84vw, 36px) !important; }
  .product-body { font-size: clamp(26px, 1.4vh, 32px) !important; line-height: 2 !important; }
  .product-tag { font-size: clamp(16px, 0.83vh, 20px); margin-bottom: clamp(28px, 1.5vh, 36px); letter-spacing: 0.22em; }

  /* Differentiator table (optional legacy) */
  .diff-table { margin: clamp(72px, 3.7vh, 88px) 0 clamp(44px, 2.2vh, 52px) !important; }
  .diff-table th { font-size: clamp(16px, 0.83vh, 20px) !important; padding: clamp(22px, 1.1vh, 26px) clamp(28px, 0.84vw, 36px) !important; }
  .diff-table td { font-size: clamp(22px, 1.1vh, 26px) !important; padding: clamp(22px, 1.1vh, 26px) clamp(28px, 0.84vw, 36px) !important; line-height: 1.7 !important; }
  .diff-evidence { font-size: clamp(20px, 1vh, 24px) !important; padding-top: clamp(22px, 1.1vh, 26px) !important; margin-top: clamp(28px, 1.5vh, 36px) !important; line-height: 1.7 !important; }

  /* PD timeline */
  .pd-timeline { gap: 4px !important; margin-top: clamp(22px, 1.1vh, 26px) !important; }
  .pd-tl-item { padding: clamp(28px, 1.5vh, 36px) clamp(24px, 0.73vw, 32px) !important; }
  .pd-tl-period { font-size: clamp(18px, 0.93vh, 22px) !important; margin-bottom: clamp(10px, 0.55vh, 14px) !important; letter-spacing: 0.08em !important; }
  .pd-tl-body { font-size: clamp(20px, 1vh, 24px) !important; line-height: 1.8 !important; }

  /* PD reference table */
  .pd-ref-table { margin-top: clamp(22px, 1.1vh, 26px) !important; }
  .pd-ref-table td { font-size: clamp(20px, 1vh, 24px) !important; padding: clamp(10px, 0.55vh, 14px) clamp(14px, 0.42vw, 18px) clamp(10px, 0.55vh, 14px) 0 !important; line-height: 1.7 !important; }
  .pd-ref-table td:first-child { padding-right: clamp(22px, 0.63vw, 26px) !important; min-width: 64px !important; }

  /* PD protocol label (pill) */
  .pd-protocol-label { font-size: clamp(14px, 0.74vh, 18px) !important; padding: clamp(5px, 0.28vh, 8px) clamp(18px, 0.52vw, 22px) !important; margin-bottom: clamp(26px, 1.3vh, 30px) !important; letter-spacing: 0.2em !important; }

  /* ══════ CONTACT PAGE FAQ — contact.html ══════ */
  .faq-section .sec-title { font-size: clamp(88px, 4.5vh, 104px) !important; }
  #inquiry { padding: clamp(192px, 9.5vh, 216px) 0 clamp(232px, 11.4vh, 260px) !important; }
  .faq-section { padding: 0 0 clamp(192px, 9.5vh, 216px) !important; }
  .faq-grid { margin-top: clamp(92px, 4.4vh, 104px) !important; }
  .faq-category { margin-bottom: clamp(92px, 4.4vh, 104px) !important; }
  .faq-category-tag { font-size: clamp(16px, 0.83vh, 20px) !important; margin-bottom: clamp(36px, 1.85vh, 44px) !important; letter-spacing: 0.18em !important; }
  .faq-item summary { font-size: clamp(32px, 1.67vh, 40px) !important; padding: clamp(36px, 1.85vh, 44px) 4px !important; line-height: 1.7 !important; }
  .faq-item summary::after { font-size: clamp(36px, 1.85vh, 44px) !important; margin-left: clamp(36px, 1.85vh, 44px) !important; }
  .faq-answer { font-size: clamp(28px, 1.48vh, 36px) !important; padding: 8px 4px clamp(52px, 2.6vh, 60px) clamp(36px, 1.85vh, 44px) !important; max-width: min(1560px, 80vw) !important; line-height: 2.05 !important; }
  .faq-answer .faq-ref { font-size: clamp(18px, 0.93vh, 22px) !important; margin-top: clamp(14px, 0.74vh, 18px) !important; letter-spacing: 0.02em !important; }

  /* ══════ INLINE STYLE OVERRIDES — attribute substring selectors ══════ */
  /* Applies to any detail page with these hardcoded inline values */
  /* font-size inline */
  main [style*="font-size:8px"] { font-size: 16px !important; }
  main [style*="font-size:9px"] { font-size: 18px !important; }
  main [style*="font-size:10px"] { font-size: 20px !important; }
  main [style*="font-size:11px"] { font-size: 22px !important; }
  main [style*="font-size:12px"] { font-size: 24px !important; }
  main [style*="font-size:15px"] { font-size: 30px !important; }
  main [style*="font-size:20px"] { font-size: 40px !important; }
  main [style*="font-size:28px"] { font-size: 56px !important; }

  /* margin inline */
  main [style*="margin-top:6px"] { margin-top: 12px !important; }
  main [style*="margin-top:12px"] { margin-top: 24px !important; }
  main [style*="margin-top:16px"] { margin-top: 32px !important; }
  main [style*="margin-top:20px"] { margin-top: 40px !important; }
  main [style*="margin-top:24px"] { margin-top: 48px !important; }
  main [style*="margin-top:32px"] { margin-top: 64px !important; }
  main [style*="margin-top:48px"] { margin-top: 96px !important; }
  main [style*="margin-top:52px"] { margin-top: 104px !important; }
  main [style*="margin-top:64px"] { margin-top: 128px !important; }
  main [style*="margin-bottom:8px"] { margin-bottom: 16px !important; }
  main [style*="margin-bottom:10px"] { margin-bottom: 20px !important; }
  main [style*="margin-bottom:16px"] { margin-bottom: 32px !important; }
  main [style*="margin-bottom:20px"] { margin-bottom: 40px !important; }
  main [style*="margin-bottom:24px"] { margin-bottom: 48px !important; }

  /* padding inline */
  main [style*="padding:14px 40px"] { padding: 28px 80px !important; }
  main [style*="padding:16px;"] { padding: 32px !important; }
  main [style*="padding:24px 28px"] { padding: 48px 56px !important; }
  main [style*="padding:14px 0 20px"] { padding: 28px 0 40px !important; }
  main [style*="padding:12px 0"] { padding: 24px 0 !important; }
  main [style*="padding:40px;"] { padding: 80px !important; }
  main [style*="padding-bottom:2px"] { padding-bottom: 4px !important; }

  /* max-width inline */
  main [style*="max-width:700px"] { max-width: 1400px !important; }

  /* border-radius inline */
  main [style*="border-radius:4px"] { border-radius: 8px !important; }
}

/* 5K+ — extra headroom */
@media (min-width: 4100px) {
  :root {
    --fs-display:     clamp(180px, 12vh, 360px);
    --fs-hero:        var(--fs-display);
    --fs-h1:          clamp(120px, 8.5vh, 240px);
    --fs-h2:          clamp(80px, 6.4vh, 168px);
    --fs-h3:          clamp(48px, 4.2vh, 96px);
    --fs-body-lg:     clamp(48px, 2.4vh, 56px);
    --fs-body:        clamp(40px, 2vh, 48px);
    --fs-sm:          clamp(32px, 1.5vh, 40px);
    --fs-tag:         clamp(28px, 1.3vh, 34px);
    --fs-quote:       clamp(36px, 2.5vh, 50px);
  }
  .container { max-width: min(3400px, 76vw); }
}

/* ═══════════════════════════════════════════════════
   MOBILE OPTIMIZATION — 375px~768px
   벤치마크: Apple.com, Stripe, Aesop, Augustinus Bader
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 홈페이지 Scene 레이아웃 → 모바일 풀와이드 ── */
  .scene {
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
  }
  /* 홈 히어로만 적절한 높이 유지 (빈 공간 방지) */
  .scene:first-child, #home {
    min-height: 80vh;
    min-height: 80svh;
  }
  .scene-content {
    position: relative;
    width: 100%;
    padding: 48px 16px;
  }
  .scene-content--left,
  .scene-content--right {
    left: auto;
    right: auto;
    width: 100%;
    padding: 48px 16px;
    text-align: center;
  }
  .scene-content--left .sec-tag,
  .scene-content--right .sec-tag {
    display: inline-block;
  }
  .scene-content--center {
    max-width: 100%;
    padding: 48px 16px;
  }
  .scene-inner {
    padding: 80px 16px 0;
    max-width: 100%;
  }
  .gs-heading {
    white-space: normal;
    font-size: clamp(24px, 7vw, 36px);
    word-break: keep-all;
  }
  .gs-body {
    max-width: 100%;
    font-size: 16px !important;
  }
  .gs-cards {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .gs-card {
    padding: 16px 14px;
  }
  .dp-nav { display: none; }

  /* ── 홈페이지 scroll-nav 도트 숨기기 ── */
  .scroll-nav { display: none; }

  /* ── nav/body 오버플로 방지 — clip: 스크롤 컨테이너를 만들지 않아 sticky 유지 ── */
  html, body {
    overflow-x: clip;
    max-width: 100vw;
  }
  nav {
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* ── close-content 오버플로 방지 ── */
  .close-content {
    max-width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* ── Signal 텍스트 최소 가독 크기 ── */
  .signal-label { font-size: 11px; letter-spacing: 0.16em; }
  .signal-sub { font-size: 12px; }
  .signal-num { font-size: clamp(28px, 8vw, 40px); }

  /* ── CTA/링크 터치 타깃 44px + 최소 폰트 ── */
  .gs-cta, .hero-cta {
    font-size: 12px !important;
    padding: 12px 0 !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .detail-cta-headline {
    min-height: 44px !important;
    padding: 8px 0 !important;
    display: inline-flex;
    align-items: center !important;
  }

  /* ── nav-logo 터치 타깃 ── */
  .nav-logo {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* ── footer 가독성 + 터치 타깃 ── */
  .detail-footer span, .detail-footer a {
    font-size: 11px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }

  /* ── 홈페이지 Signal Strip (30µm, 50+, 8, 3-6M) 2×2 ── */
  .signal-strip {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 12px;
    padding: 0 16px;
  }
  .signal-item {
    flex: 0 0 calc(50% - 8px);
    text-align: center;
  }

  /* ── CRITICAL #1: scroll-snap 해제 + 섹션 풀뷰포트 유지 ── */
  html, html.home-page {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
  }
  .scene, .dp-slide {
    scroll-snap-align: none;
    scroll-snap-stop: unset;
    min-height: 100vh;
    min-height: 100svh; /* dynamic viewport height — 모바일 주소창 대응 */
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .dp-slide--overflow {
    overflow: visible;
    height: auto;
    max-height: none;
    min-height: 100svh;
  }
  .dp-slide--scroll {
    overflow: visible;
    height: auto;
    max-height: none;
    min-height: auto; /* 콘텐츠가 긴 섹션은 자연 높이 */
  }
  .dp-slide--merged {
    min-height: auto;
  }

  /* ── 이슈 #4 핵심: GSAP reveal 즉시 표시 (스크롤 걸림 원인 제거) ── */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .reveal.revealed {
    opacity: 1 !important;
    transform: none !important;
  }

  /* ── CRITICAL #2: stat 카드 오버플로 (index.html) ── */
  .gs-stats--row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }
  .gs-stats--row .gs-stat {
    flex: 0 0 calc(50% - 4px) !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .science-center-content,
  .fulltype-content {
    max-width: 100% !important;
    padding: 0 16px !important;
  }

  /* ── CRITICAL #3: .sec-tag 가독성 (전 페이지) ── */
  .sec-tag {
    font-size: 12px !important;
    letter-spacing: 0.14em !important;
    padding-left: 14px !important;
  }
  .sec-tag::before { width: 6px !important; }
  .detail-hero .sec-tag {
    padding-left: 0 !important;
  }

  /* ── CRITICAL #4: 모달 탭 모바일 (contact.html) ── */
  .inquiry-type-tabs {
    flex-direction: column !important;
    gap: 4px !important;
    padding: 4px;
    margin-bottom: 20px;
  }
  .inquiry-type-tab {
    padding: 12px 16px;
    font-size: 13px !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── HIGH #5: 햄버거 터치 타깃 44px ── */
  .hamburger {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* ── HIGH #6: 모달 닫기 버튼 44px + 위치 고정 ── */
  .inquiry-close {
    position: absolute;
    width: 44px;
    height: 44px !important;
    top: 12px !important;
    right: 12px !important;
    font-size: 32px;
    z-index: 10 !important;
  }

  /* ── HIGH #7: sec-sub 최소 14px ── */
  /* Phase 6 Batch 7: desktop !important 제거 후 mobile도 자연 cascade */
  .detail-section .sec-sub {
    font-size: 14px;
    max-width: 100%;
  }

  /* ── HIGH #8-9: 컨테이너 패딩 축소 (52px → 16px) ── */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .dp-slide .container[style*="padding"],
  .detail-section .dp-slide-scroll > .container[style*="padding"] {
    padding: 60px 16px !important;
  }
  .page-nav { padding: 0 16px !important; }

  /* ── 네비게이션 모바일 ── */
  nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 56px;
    box-sizing: border-box;
    overflow: visible;
  }
  .nav-logo {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav-logo img { height: 20px !important; }
  .nav-links > a, .nav-links > .nav-dropdown { display: none; }
  .nav-links { gap: 0 !important; }
  .nav-lang { display: none; }
  .nav-overlay { display: none; }
  .hamburger {
    position: relative;
    right: 0;
    flex-shrink: 0;
    overflow: visible;
    margin-left: auto;
    /* span 라인을 44px 컨테이너 중앙에 배치 */
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .hamburger span {
    position: relative;
    top: auto;
    width: 22px;
    height: 2px;
  }

  /* ── 모바일 메뉴 (아코디언) ── */
  .mobile-menu {
    padding: 80px 24px 40px;
  }
  .mobile-menu > a {
    font-size: 18px;
    padding: 14px 48px 14px 0;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .mobile-parent {
    font-size: 18px !important;
    min-height: 48px !important;
  }
  .mobile-parent-link {
    padding: 14px 0;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    font-weight: inherit;
  }
  .mobile-toggle {
    min-width: 48px !important;
    min-height: 48px !important;
    justify-content: center !important;
  }
  /* 현재 페이지 활성화 표시 */
  .mobile-menu a.mobile-active,
  .mobile-parent-link.mobile-active {
    color: var(--color-brand);
    font-weight: 700;
  }
  /* 하위 메뉴 항목 스타일 */
  .mobile-menu a.mobile-sub {
    font-size: 15px;
    padding: 12px 0 12px 24px;
    min-height: 44px;
    color: rgba(31,26,27,0.55);
    border-bottom: none;
    display: flex;
    align-items: center;
  }
  .mobile-menu a.mobile-sub:hover,
  .mobile-menu a.mobile-sub.mobile-active {
    color: var(--color-brand);
  }

  /* ── 이슈 1: 햄버거 밝은 배경 대비 (mix-blend-mode) ── */
  .hamburger span {
    background: var(--text-inverse);
  }
  nav.nav-light .hamburger span {
    background: #1A1A18 !important;
  }

  /* ── 히어로 모바일 (풀스크린) ── */
  .detail-hero {
    padding: 80px 16px 40px !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    display: flex;
    flex-direction: column !important;
    justify-content: center !important;
  }
  /* 서브 카피 2~3줄 + 가운데 정렬 (콘텐츠 짤림 없음) */
  /* Phase 6 Batch 7: font-size !important 제거 — desktop refactor 후 cascade 정상.
     max-width는 brand.html inline style="max-width:56ch" override 위해 !important 유지 */
  .detail-hero-sub {
    font-size: 14px;
    line-height: 1.7;
    max-width: 100% !important;
    text-align: center !important;
  }
  .fulltype-body {
    font-size: 14px !important;
    line-height: 1.7 !important;
    text-align: center !important;
  }
  .hero-copy-ko {
    font-size: 14px !important;
    line-height: 1.7 !important;
    text-align: center !important;
  }
  .gs-body {
    text-align: center !important;
    word-break: keep-all !important;
  }
  .detail-hero-title {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.2 !important;
    word-break: keep-all !important;
  }
  /* JP: allow natural character-level break so hard <br> doesn't overflow on narrow mobile */
  html[lang="ja"] .detail-hero-title {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-break: auto !important;
  }
  /* CELLOGRAM anchor h2 — mobile hierarchy (sits below detail-hero-title, above body) */
  .cg-anchor h2 {
    font-size: clamp(24px, 6.6vw, 32px) !important;
    line-height: 1.35 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }
  html[lang="ja"] .cg-anchor h2 {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
  html[lang^="zh"] .cg-anchor h2 {
    word-break: break-all !important;
    line-break: strict !important;
  }
  .detail-hero-sub {
    font-size: 15px;
    max-width: 100% !important;
  }

  /* ── 그리드 1컬럼 (stat/card 외 추가) ── */
  .record-split {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .tech-grid {
    grid-template-columns: 1fr !important;
  }
  .pd-timeline {
    grid-template-columns: 1fr 1fr !important;
  }
  .device-spec-row {
    flex-direction: column !important;
  }
  .channel-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .channel-compare {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── 카드 패딩 축소 ── */
  .record-card { padding: 28px 20px !important; }
  .science-card { padding: 28px 20px !important; }
  .cat-card { padding: 16px 20px !important; }
  .pillar-card { padding: 28px 20px !important; }
  .tech-feat { padding: 24px 20px !important; }
  .pd-card { padding: 16px 14px !important; }
  .pd-ev-item { padding: 14px 16px !important; }
  .device-spec-card { padding: 20px 16px !important; }

  /* ── 아코디언 터치 영역 ── */
  .accordion-trigger {
    padding: 18px 0;
    font-size: 17px !important;
    min-height: 44px !important;
  }
  .accordion-icon {
    width: 24px;
    height: 24px !important;
  }

  /* ── FAQ 모바일 ── */
  /* Phase 6 Batch 7: font-size/padding/max-width !important 제거 — desktop refactor 후 cascade 정상 */
  .faq-item summary {
    padding: 16px 4px;
    font-size: 16px;
    min-height: 44px !important;
  }
  .faq-answer {
    font-size: 14px;
    padding: 4px 4px 20px 12px;
    max-width: 100%;
  }
  .faq-grid { margin-top: 32px; }

  /* ── 인쿼리 모달 풀스크린 ── */
  .inquiry-modal { padding: 0 !important; }
  .inquiry-dialog {
    width: 100%;
    max-width: 100% !important;
    max-height: 100vh;
    height: 100vh !important;
    border-radius: 0;
    padding: 60px 20px 32px;
  }
  .inquiry-title { font-size: 24px !important; }
  .inquiry-subtitle { font-size: 13px !important; }
  .inquiry-row { grid-template-columns: 1fr !important; gap: 12px !important; margin-bottom: 12px !important; }
  .inquiry-label input[type="text"],
  .inquiry-label input[type="email"],
  .inquiry-label input[type="tel"],
  .inquiry-label select,
  .inquiry-label textarea {
    min-height: 44px !important;
    font-size: 16px !important; /* iOS zoom 방지 */
    padding: 12px;
  }
  .inquiry-submit {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 14px !important;
  }

  /* ── 국가 검색 드롭다운 모바일 ── */
  .country-select-dropdown {
    max-height: 240px !important;
  }
  .country-select-search {
    font-size: 16px !important; /* iOS zoom 방지 */
    min-height: 44px !important;
  }
  .country-select-list li {
    padding: 12px 14px;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* ── CTA/버튼/푸터 모바일 ── */
  .detail-cta { padding: 60px 16px 24px; }
  .detail-cta-headline { font-size: clamp(20px, 5vw, 28px); }
  .detail-footer {
    padding: 16px;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    position: relative;
    z-index: 2;
  }
  /* 마지막 섹션(CTA+footer) — 점프 방지: 뷰포트 높이 확보 */
  .dp-slide--merged {
    min-height: 100vh;
    min-height: 100svh;
    height: auto;
    padding: 60px 16px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* 홈페이지 close 섹션 */
  /* 홈 클로징 섹션 한정 — 예전 [class*="close"] 는 모달·시트의 닫기 버튼(absolute)까지 relative 로 끌어내려 화면 밖으로 밀어냈다(09-22) */
  .close-section, .scene-close, .close-content, .close-headline, .close-links, .close-dot {
    position: relative !important;
  }
  .close-content {
    padding: 40px 16px !important;
  }
  .close-headline {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.3;
  }
  .close-links {
    margin-top: 32px;
    gap: 16px;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .close-links a {
    font-size: 11px;
  }

  /* 섹션 간 갭 제거 — 스크롤 점프 방지 */
  .scene, section, .dp-slide {
    margin: 0;
  }

  /* ── 3D/성능 최적화 ── */
  canvas { max-width: 100vw !important; }
  /* 스크롤 동작: 관성 스크롤, snap 완전 제거 */
  html {
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: auto !important;
  }
  /* GPU 힌트만 제거 (GSAP reveal 애니메이션은 유지) */
  .scene, .dp-slide, section {
    will-change: auto;
  }

  /* ── brand.html 섹션 모바일 ── */
  .pillars-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0;
    max-width: 100%;
    overflow: visible;
  }
  .pillars-header { margin-bottom: 32px !important; }
  .pillars-header h2 { font-size: clamp(24px, 7vw, 36px); }
  #pillars { padding: 48px 0 !important; }
  #pillars > .container { max-width: 100% !important; padding: 0 16px !important; }
  .pillar-card {
    padding: 24px 20px !important;
    overflow: visible !important;
  }
  .pillar-num { font-size: clamp(48px, 14vw, 72px); margin-bottom: 16px; }
  .pillar-label { font-size: 11px; margin-bottom: 10px; }
  .pillar-title-kr { font-size: 16px; margin-bottom: 12px; }
  .pillar-desc { font-size: 14px; }
  .value-giant { font-size: clamp(64px, 18vw, 120px) !important; }
  .value-meta { margin-top: 32px !important; max-width: 92vw !important; }
  .breakdown-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
  .breakdown-cell { padding: 24px 16px !important; }
  .logo-center { margin-bottom: 40px !important; }
  .logo-part { font-size: clamp(36px, 10vw, 52px) !important; }
  .name-section { padding: 60px 16px !important; }

  /* ── Protocol 세부 텍스트 모바일 ── */
  .pd-section-title { font-size: 17px; }
  .pd-section-tag { font-size: 11px; }
  .pd-body { font-size: 15px !important; }
  .pd-note { font-size: 12px; }
  .pd-card-label { font-size: 11px; }
  .pd-card-body { font-size: 13px; }
  .pd-ev-title { font-size: 13px; }
  .pd-ev-body { font-size: 13px; }
  .pd-ev-ref { font-size: 11px; }
  .pd-table td, .pd-table th { font-size: 12px; padding: 8px 8px 8px 0 !important; }

  /* ── Science 세부 텍스트 모바일 ── */
  .sci-tag { font-size: 11px; }
  .sci-num { font-size: clamp(36px, 10vw, 56px); }
  .sci-sub { font-size: 11px; }
  .sci-desc { font-size: 14px !important; }
  .mech-num { font-size: 12px; }
  .mech-title { font-size: 13px; }
  .mech-desc { font-size: 13px; }
  .mech-ref { font-size: 11px; }
  .sci-cat-tag { font-size: 11px; }
  .sci-cat-name { font-size: 13px; }
  .sci-cat-desc { font-size: 12px; }
  .sci-refs-title { font-size: 11px; }
  .sci-ref-item { font-size: 12px; }

  /* ── Product 세부 텍스트 모바일 ── */
  .product-tag { font-size: 11px; }
  .product-title { font-size: clamp(28px, 8vw, 40px) !important; }
  .product-role-tag { font-size: 13px; margin-bottom: 20px !important; }
  .product-specs-table td { font-size: 13px; }
  .product-quote { font-size: 14px; padding-left: 12px !important; margin-bottom: 24px !important; }
  .diff-table th { font-size: 11px; padding: 8px !important; }
  .diff-table td { font-size: 12px; padding: 8px !important; }
  .diff-evidence { font-size: 12px; }
  .cat-num { font-size: 11px; }
  .cat-title { font-size: 15px; }
  .cat-desc { font-size: 13px !important; }
  .tech-feat-title { font-size: 14px !important; }
  .tech-feat-desc { font-size: 13px; }

  /* ── Record 카드 모바일 ── */
  .record-card-tag { font-size: 11px; }
  .record-card-title { font-size: 20px; }
  .record-card-desc { font-size: 14px; }
  .record-cta { font-size: 11px; }

  /* ── FAQ disclaimer 모바일 ── */
  .faq-disclaimer {
    font-size: 11px;
    padding: 14px 16px;
    margin: 24px 0 32px;
  }

  /* ── Device spec 모바일 ── */
  .device-badge { font-size: 11px; padding: 5px 12px !important; }
  .device-name { font-size: 14px; }
  .spec-table td { font-size: 12px; padding: 6px 0 !important; }
  .channel-title { font-size: 11px; }
  .channel-item-head { font-size: 13px; }
  .channel-item-body { font-size: 13px; }
  .compare-label { font-size: 11px; }
  .compare-val { font-size: 14px; }
}

/* ═══════════════════════════════════════════
   i18n — Language-specific Typography
   ═══════════════════════════════════════════ */

/* ── English ── (Pretendard 미로드 — Latin-optimized 토큰 환원) */
html[lang="en"] {
  --display: 'Outfit', sans-serif;
  --body:    'Outfit', sans-serif;
  --ko:      'Outfit', sans-serif;
  /* Latin line-height (Outfit 최적) */
  --lh-display:  1.1;
  --lh-heading:  1.3;
  --lh-body:     1.7;
  /* Latin letter-spacing (한글 강한 음수 자간 불필요) */
  --ls-display:  -0.02em;
  --ls-heading:  -0.015em;
  --ls-body:      0;
  --ls-small:     0;
  --ls-tight:    -0.02em;
}
html[lang="en"] .fulltype-body,
html[lang="en"] .gs-body,
html[lang="en"] .sec-sub,
html[lang="en"] .faq-answer {
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.85;
  letter-spacing: 0;
}
html[lang="en"] h1, html[lang="en"] h2 {
  letter-spacing: -0.03em;
}

/* ── Japanese ── (Pretendard 미로드 — Noto Sans JP optimization) */
html[lang="ja"] {
  --display: 'Outfit', 'Noto Sans JP', sans-serif;
  --body:    'Outfit', 'Noto Sans JP', sans-serif;
  --ko:      'Noto Sans JP', 'Outfit', sans-serif;
  /* JP — 한자 가나 vertical space 충분히 */
  --lh-display:  1.15;
  --lh-heading:  1.4;
  --lh-body:     2.0;     /* 한자 가독성 — Korean 1.85 대비 더 여유 */
  /* JP — 음수 자간 약하게 (한자/가나는 한글보다 자간 보정 적음) */
  --ls-display:  -0.01em;
  --ls-heading:   0;
  --ls-body:      0;
  --ls-small:     0;
  --ls-tight:    -0.01em;
}
html[lang="ja"] .fulltype-body,
html[lang="ja"] .gs-body,
html[lang="ja"] .sec-sub {
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 2.2;
}
html[lang="ja"] .faq-answer {
  line-height: 2.0;
}
html[lang="ja"] h1, html[lang="ja"] h2 {
  letter-spacing: 0;
}

/* ── Chinese Simplified ── (Pretendard 미로드 — Noto Sans SC optimization) */
html[lang="zh-Hans"],
html[lang="zh"] {
  --display: 'Outfit', 'Noto Sans SC', sans-serif;
  --body:    'Outfit', 'Noto Sans SC', sans-serif;
  --ko:      'Noto Sans SC', 'Outfit', sans-serif;
  /* CN — 한자 균형 / 영문보다 살짝 여유 */
  --lh-display:  1.15;
  --lh-heading:  1.35;
  --lh-body:     1.85;
  /* CN — 음수 자간 거의 안 씀 */
  --ls-display:   0;
  --ls-heading:   0;
  --ls-body:      0;
  --ls-small:     0;
  --ls-tight:     0;
}
html[lang="zh-Hans"] .fulltype-body,
html[lang="zh-Hans"] .gs-body,
html[lang="zh-Hans"] .sec-sub,
html[lang="zh"] .fulltype-body,
html[lang="zh"] .gs-body,
html[lang="zh"] .sec-sub {
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 2.2;
}
html[lang="zh-Hans"] .faq-answer,
html[lang="zh"] .faq-answer {
  line-height: 2.0;
}
html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2,
html[lang="zh"] h1, html[lang="zh"] h2 {
  letter-spacing: 0;
}

/* ── Language Switcher ── */
.nav-lang-switcher {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: 12px;
}
.lang-flag {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-style: normal;
  line-height: 1;
}
.nav-lang-current {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  cursor: pointer;
  transition: opacity var(--dur-panel);
  opacity: 0.65;
  outline: none;
}
.nav-lang-current:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.nav-lang-current:hover { opacity: 1; }
.nav-lang-switcher.open .nav-lang-current { opacity: 1; }
.nav-lang-current .lang-flag { font-size: 24px; }
/* Globe icon (lang-flag.lang-globe) — 지구본 SVG 표시 */
.nav-lang-current .lang-flag.lang-globe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 0; /* emoji 텍스트 표시 제거 */
}
.nav-lang-current .lang-flag.lang-globe > svg {
  width: 22px;
  height: 22px;
  /* Default: nav 가 dark bg (hero/scene-dark 위) → light 아이콘 */
  color: rgba(245,240,238,0.75);
  transition: color var(--dur-micro), transform var(--dur-panel);
}
/* nav-light scope (light scene 위 nav) → dark 아이콘 */
nav.nav-light .nav-lang-current .lang-flag.lang-globe > svg {
  color: var(--text-secondary);
}
.nav-lang-current:hover .lang-flag.lang-globe > svg,
.nav-lang-switcher.open .lang-flag.lang-globe > svg {
  color: var(--color-brand);
  transform: rotate(15deg);  /* subtle 회전 — 지구본 회전 메타포 */
}
/* 화살표 svg (nav-lang-current 직계 자식) */
.nav-lang-current > svg {
  color: rgba(245,240,238,0.55);  /* dark nav: 옅은 light */
  transition: transform 0.25s;
  margin-top: 1px;
}
nav.nav-light .nav-lang-current > svg {
  color: var(--text-tertiary);     /* light nav: dark tertiary */
}
.nav-lang-switcher.open .nav-lang-current svg {
  transform: rotate(180deg);
}
.nav-lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;                              /* 중앙 정렬 (globe icon 아래 수직 정렬) */
  /* Box-less — 배경/보더/그림자 제거. 아이콘만 floating */
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  padding: 4px 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -4px);       /* 가운데 + 위로 4px (in 상태) */
  transition: opacity var(--dur-micro), visibility var(--dur-micro), transform var(--dur-micro);
  z-index: 1100;
}
.nav-lang-switcher.open .nav-lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);          /* 가운데 + 정위치 */
}
.lang-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  text-decoration: none;
  border-radius: 0;
  background: none;
  border: none;
  outline: none;
  transition: transform 0.15s, opacity 0.15s;
  opacity: 0.85;
}
.lang-option .lang-flag { font-size: 22px; }
.lang-option:hover {
  transform: scale(1.12);
  opacity: 1;
}
.lang-option:focus:not(:focus-visible) { outline: none; box-shadow: none; }
/* 클릭(마우스) 후 outline/active highlight 제거.
   A11y: :focus-visible 는 제외 — 키보드 포커스 시 글로벌 ring(2px teal)이 보이도록.
   (mouse :focus / :active 는 계속 정리, ::-moz-focus-inner·tap highlight 는 하단 유지) */
.nav-lang-switcher *:focus:not(:focus-visible),
.nav-lang-switcher *:active {
  outline: none !important;
  box-shadow: none !important;
}
.nav-lang-current::-moz-focus-inner,
.lang-option::-moz-focus-inner { border: 0; padding: 0; }
.nav-lang-current,
.lang-option {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.lang-option.lang-active {
  opacity: 1;
}

/* ── Mobile Language Switcher ── */
.mobile-lang-switcher { display: none; } /* replaced by nav-bar flag */
.mobile-lang-switcher-legacy {
  display: flex;
  gap: 0;
  padding: 16px 0;
  margin-top: 12px;
  border-top: 1px solid rgba(245,240,238,0.06);
}
.mobile-lang-switcher a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  text-decoration: none;
  transition: transform var(--dur-micro);
}
.mobile-lang-switcher .lang-flag { font-size: 26px; }
.mobile-lang-switcher a:hover { transform: scale(1.1); }
.mobile-lang-switcher a.lang-active .lang-flag { filter: drop-shadow(0 0 4px var(--color-brand)); }

/* Light theme — nav scope reset (light tokens force-bound for nav children) */
nav.nav-light {
  --text-primary:   #1F1A1B;
  --text-secondary: #4A4042;
  --text-tertiary:  #6B6263;
  --text-disabled:  #9C9091;
  --border-subtle:  #EDE6E4;
  --border-default: #DDD2CE;
  --charcoal:       var(--text-primary);
  --ash:            var(--text-tertiary);
  --stone:          var(--border-default);
}
/* Light theme — language switcher dropdown (frosted dark on light bg) */
nav.nav-light .nav-lang-dropdown {
  background: rgba(31, 26, 27, 0.05);
  border-color: rgba(31, 26, 27, 0.1);
  box-shadow: 0 12px 32px rgba(31, 26, 27, 0.08);
}
nav.nav-light .lang-option:hover { background: none; transform: scale(1.12); }
nav.nav-light .lang-option.lang-active { background: none; }

/* ── i18n Responsive — Mobile (768px) ── */
@media (max-width: 768px) {
  /* Language switcher stays visible on mobile — next to hamburger */
  .nav-lang-switcher {
    position: absolute;
    right: 64px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    height: auto;
    z-index: 10;
  }
  .nav-lang-current { opacity: 0.8; }
  .nav-lang-current .lang-flag { font-size: 0; }
  .nav-lang-current .lang-flag::after {
    content: attr(data-code);
    font-size: 14px;
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: rgba(245,240,238,0.55);
  }
  .nav-lang-current svg { display: none; }
  .nav-lang-dropdown {
    /* base 의 left:50% + translate(-50%, ...) 중앙 정렬 유지 (모든 해상도 일관) */
    top: calc(100% + 10px);
    padding: 8px;
  }
  .lang-option .lang-flag { font-size: 0; } /* hide emoji in dropdown too */
  .lang-option .lang-flag::after {
    content: attr(data-code);
    font-size: 14px;
    font-family: var(--display);
    font-weight: 500;
    letter-spacing: 0.08em;
    color: rgba(245,240,238,0.4);
  }
  .lang-option:hover .lang-flag::after { color: rgba(245,240,238,0.8); }
  .lang-option.lang-active .lang-flag::after { color: var(--color-brand); }
  .lang-option { padding: 8px 14px; }

  /* CJK mobile line-height adjustments */
  html[lang="ja"] .fulltype-body,
  html[lang="ja"] .gs-body,
  html[lang="ja"] .sec-sub,
  html[lang="zh"] .fulltype-body,
  html[lang="zh"] .gs-body,
  html[lang="zh"] .sec-sub,
  html[lang="zh-Hans"] .fulltype-body,
  html[lang="zh-Hans"] .gs-body,
  html[lang="zh-Hans"] .sec-sub {
    line-height: 1.9;
  }
  html[lang="ja"] .faq-answer,
  html[lang="zh"] .faq-answer,
  html[lang="zh-Hans"] .faq-answer {
    line-height: 1.8;
  }

  /* English mobile — prevent text overflow on narrow screens */
  html[lang="en"] .fulltype-heading {
    font-size: clamp(28px, 8vw, 48px) !important;
    word-break: normal;
  }
  html[lang="en"] .fulltype-body,
  html[lang="en"] .gs-body {
    line-height: 1.7;
    font-size: 14px;
  }
  html[lang="en"] .signal-sub {
    font-size: 11px;
  }

  /* CJK mobile headings — slightly smaller to prevent overflow */
  html[lang="ja"] .fulltype-heading,
  html[lang="zh"] .fulltype-heading,
  html[lang="zh-Hans"] .fulltype-heading {
    font-size: clamp(24px, 7vw, 40px) !important;
  }
}

/* ── i18n Responsive — Small Mobile (480px) ── */
@media (max-width: 480px) {
  html[lang="en"] .gs-card-body,
  html[lang="en"] .gs-card-title {
    font-size: 13px;
  }
  html[lang="en"] .signal-label {
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  /* CJK small mobile — tighter spacing */
  html[lang="ja"] .fulltype-body,
  html[lang="ja"] .gs-body,
  html[lang="zh"] .fulltype-body,
  html[lang="zh"] .gs-body,
  html[lang="zh-Hans"] .fulltype-body,
  html[lang="zh-Hans"] .gs-body {
    line-height: 1.75;
    font-size: 13px;
  }
}

/* ── i18n Responsive — 4K / High-DPI (2560px+) ── */
@media (min-width: 2560px) {
  /* Language switcher scaling for 4K — proportional to nav (link ~30px, flag ~1.6x) */
  .nav-lang-current .lang-flag { font-size: clamp(36px, 2.2vh, 52px); }
  /* Globe icon — vh 비례 (lang-flag emoji와 동일 척도) */
  .nav-lang-current .lang-flag.lang-globe {
    width: clamp(30px, 1.9vh, 42px);
    height: clamp(30px, 1.9vh, 42px);
  }
  .nav-lang-current .lang-flag.lang-globe > svg {
    width: clamp(30px, 1.9vh, 42px);
    height: clamp(30px, 1.9vh, 42px);
  }
  .nav-lang-current > svg { width: 10px; height: 10px; }
  .nav-lang-dropdown { padding: 8px; border-radius: 10px; top: calc(100% + 12px); }
  .lang-option { padding: 10px 14px; border-radius: 6px; }
  .lang-option .lang-flag { font-size: clamp(32px, 2vh, 48px); }

  /* CJK 4K line-height — more breathing room on large screens */
  html[lang="ja"] .fulltype-body,
  html[lang="ja"] .gs-body,
  html[lang="zh"] .fulltype-body,
  html[lang="zh"] .gs-body,
  html[lang="zh-Hans"] .fulltype-body,
  html[lang="zh-Hans"] .gs-body {
    line-height: 2.4;
  }
  html[lang="en"] .fulltype-body,
  html[lang="en"] .gs-body {
    line-height: 2.0;
  }
}

/* ── i18n Responsive — Ultra-wide 4K+ (3600px+) ── */
@media (min-width: 3600px) {
  /* Ultra 4K — nav link ~36px+, flag proportional */
  .nav-lang-current .lang-flag { font-size: clamp(44px, 2.8vh, 64px); }
  /* Globe icon — Ultra 4K vh 비례 */
  .nav-lang-current .lang-flag.lang-globe {
    width: clamp(38px, 2.4vh, 52px);
    height: clamp(38px, 2.4vh, 52px);
  }
  .nav-lang-current .lang-flag.lang-globe > svg {
    width: clamp(38px, 2.4vh, 52px);
    height: clamp(38px, 2.4vh, 52px);
  }
  .nav-lang-current > svg { width: 12px; height: 12px; }
  .nav-lang-dropdown { padding: 10px; border-radius: 12px; }
  .lang-option { padding: 12px 16px; border-radius: 8px; }
  .lang-option .lang-flag { font-size: clamp(40px, 2.5vh, 58px); }
}

/* ── Product detail image column (products.html Slide 2/4) ── */
.product-detail-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  transform-style: preserve-3d;
}
/* 두 제품 이미지 프레임/크기 통일 — 1:1 정사각 + contain */
.product-detail-right img {
  width: 100%;
  max-width: 460px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(0deg) rotateY(0deg) scale(1);
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  backface-visibility: hidden;
}
/* JS가 마우스 진입 시 투입하는 광택 레이어 */
/* Light theme default — multiply (어두운 효과); dark scene 안에서는 screen */
[data-slide-theme="dark"] .product-tilt-glare,
.scene-dark .product-tilt-glare { mix-blend-mode: screen; }
.product-tilt-glare {
  position: absolute;
  inset: 0;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  margin: auto;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: multiply;        /* light bg default; .scene-dark에서 screen으로 override */
  border-radius: 4px;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .product-detail-right img { transition: none; transform: none; }
  .product-tilt-glare { display: none; }
}

/* Mobile: image above text regardless of DOM order */
@media (max-width: 768px) {
  .product-detail-grid .product-detail-right { order: -1; perspective: none; }
  .product-detail-right img { max-width: 320px; transform: none; }
  .product-tilt-glare { display: none; }
}

/* ── Homepage Dual-Axis card vial image (index.html .gs-card) ── */
/* products.html 과 동일 비율(1:1 정사각 + contain) 유지하여 페이지 간 일관성 확보 */
.gs-card-image {
  width: 100%;
  max-width: clamp(160px, 22vh, 280px);
  aspect-ratio: 1 / 1;
  margin: 0 auto clamp(16px, 1.6vh, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gs-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform var(--dur-page) cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gs-card:hover .gs-card-image img {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .gs-card-image img { transition: none; }
  .gs-card:hover .gs-card-image img { transform: none; }
}
@media (max-width: 768px) {
  .gs-card-image { max-width: clamp(140px, 38vw, 200px); }
}
/* 2K scale-up — FHD baseline × ~1.4 */
@media (min-width: 2560px) {
  .gs-card-image { max-width: clamp(340px, 26vh, 420px); }
}
/* 4K scale-up — FHD baseline × ~2.0 (heading proportional scale에 맞춤) */
@media (min-width: 3840px) {
  .gs-card-image { max-width: clamp(440px, 28vh, 560px); }
}

/* ══════════════════════════════════════════════════════════════
   ECM Ingredient Map — products.html Slide 4 (dark · teal)
   좌측 text column + 우측 방사형 연결선 맵. 52 actives, 5 rings.
   클릭 시 성분 상세 정보 카드.
   ══════════════════════════════════════════════════════════════ */

/* ECM 슬라이드 진입 시 3D 배경 분자 구체 숨김 */
body.in-ecm-slide .dp-3d-backdrop { opacity: 0; }

/* #ca / #ecm 섹션 컨테이너 — 넉넉한 max-width 제약으로 좌우 breathing room 확보
   섹션 내부 flex-center + grid align center로 좌우 콘텐츠 시각 중심을 일치시킴.
   Container padding-top < padding-bottom으로 content block을 상단으로 시프트하여
   실제 콘텐츠 시각 중심이 "nav 제외 영역의 중앙"에 위치하도록 조정 */
#ca .container,
#ecm .container {
  max-width: 1240px;
  margin: 0 auto;
  padding-top: clamp(16px, 2vh, 28px) !important;
  padding-bottom: clamp(112px, 14vh, 140px) !important;
}

/* ECM 섹션은 dp-slide 기본 동작(justify-content: center)을 유지하여 수직 중앙 정렬 */
/* 위 padding 비대칭(pt << pb)이 content center를 section center에서 ~54px 위로 이동
   → viewport center(450)보다 위로 → nav(52px) 제외 영역의 center(476)와 일치 */

.ecm-detail-grid {
  grid-template-columns: 0.72fr 1.28fr !important;
  align-items: center !important;   /* 좌우 콘텐츠가 서로 중심선 일치 */
  gap: clamp(64px, 9vw, 140px);
}
.ecm-detail-grid > .ecm-map {
  margin-top: 0;
}

/* ───── ECM Neural Mesh shader background (Phase 1: products.html #ecm) ─────
   Voronoi cell network behind .ecm-map radial pill diagram.
   Mounted by js/shaders/ecm-mesh.js when section enters viewport.
   Mobile (≤768px) and prefers-reduced-motion → display:none (handled below). */
section[data-shader="neural-mesh"] {
  position: relative;            /* ensure .ecm-shader-bg absolute positions correctly */
  isolation: isolate;            /* keep mix-blend-mode scoped to this section */
}
.ecm-shader-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;                    /* below .dp-slide-scroll content */
  pointer-events: none;          /* clicks pass through to .ecm-pill etc. */
  opacity: 0;
  transition: opacity 1.2s ease-out;
  mix-blend-mode: screen;        /* additive over var(--dark-bg) */
  display: block;
}
.ecm-shader-bg.is-ready { opacity: 0.35; }   /* Subtle — pill 가독성 우선 */
section[data-shader="neural-mesh"] > .dp-slide-scroll {
  position: relative;
  z-index: 1;                    /* foreground content above shader */
}

@media (prefers-reduced-motion: reduce) {
  .ecm-shader-bg { display: none !important; }
}
@media (max-width: 768px) {
  .ecm-shader-bg { display: none; }
}

.ecm-map {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  /* 진입 애니메이션 timing scale (0.55 = 기존 4s → 2.2s) */
  --ecm-intro-scale: 0.55;
}

.ecm-map-lines {
  position: absolute;
  left: 50%; top: 50%;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}
.ecm-map-lines line {
  stroke: rgba(148,127,130,0.45);
  stroke-width: 0.14;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: ecm-line-draw calc(1.4s * var(--ecm-intro-scale, 1)) cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  animation-delay: calc(var(--delay, var(--dur-page)) * var(--ecm-intro-scale, 1));
}
@keyframes ecm-line-draw {
  to { stroke-dashoffset: 0; }
}

/* Vial — 41% of stage (−20% from the previous 51%), balanced teal halo */
.ecm-vial {
  position: relative;
  z-index: 5;
  width: 41%;
  aspect-ratio: 1 / 1;
  /* Vial은 시각적 요소만 — 마우스 이벤트 통과시켜 .ecm-pill까지 닿게 */
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 22px 50px rgba(148,127,130,0.34))
          drop-shadow(0 0 80px rgba(148,127,130,0.16))
          drop-shadow(0 0 140px rgba(245,240,238,0.05));
  opacity: 0;
  animation: ecm-vial-enter calc(1.2s * var(--ecm-intro-scale, 1)) var(--ease-elastic) calc(var(--dur-micro) * var(--ecm-intro-scale, 1)) forwards;
}
.ecm-vial::before {
  content: '';
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, var(--color-brand-glow), transparent 60%);
  z-index: -1;
  animation: ecm-halo 8s ease-in-out 1.4s infinite;
}
@keyframes ecm-halo {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.08); }
}
.ecm-vial img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  animation: ecm-breathe 7s ease-in-out 1.4s infinite;
}
/* Fix: <picture> wrap이 flex layout 깨뜨려 container가 native img height로 stretched 되는 문제 */
.ecm-vial picture,
.gs-card-image picture {
  display: contents;
}
@keyframes ecm-vial-enter {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ecm-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.ecm-pill {
  position: absolute;
  left: var(--cx, 50%); top: var(--cy, 50%);
  transform-origin: 0 0;
  transform: rotate(var(--a)) translate(var(--r));
  z-index: 3;
  opacity: 0;
  animation: ecm-pill-enter calc(0.7s * var(--ecm-intro-scale, 1)) var(--ease-elastic) forwards;
  animation-delay: calc(var(--fade-delay, 0.8s) * var(--ecm-intro-scale, 1));
  cursor: pointer;
}
@keyframes ecm-pill-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ecm-pill > span {
  display: block;
  transform: rotate(calc(-1 * var(--a)));
  font-family: var(--body);
  font-style: italic;
  font-weight: 300;
  font-size: 11px;
  color: rgba(245,240,238,0.6);
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding: 3px 8px;
  transition: color .25s, transform .25s;
  user-select: none;
}
.ecm-pill:hover > span {
  color: var(--color-brand);
  transform: rotate(calc(-1 * var(--a))) scale(1.1);
}
.ecm-pill.is-active > span {
  color: var(--color-brand);
  transform: rotate(calc(-1 * var(--a))) scale(1.14);
}
.ecm-pill.core > span {
  font-family: var(--display);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--color-brand);
  padding: 5px 11px;
  background: rgba(10,10,9,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 0.5px solid rgba(148,127,130,0.4);
  border-radius: 100px;
  box-shadow: 0 2px 12px rgba(148,127,130,0.2);
}
.ecm-pill.core:hover > span,
.ecm-pill.core.is-active > span {
  color: var(--accent);
  background: rgba(148,127,130,0.15);
  border-color: rgba(148,127,130,0.72);
  transform: rotate(calc(-1 * var(--a))) scale(1.08);
}

/* Hit area 확장 — pill div 자체가 좁아서(span 너비) 작은 라벨은 hover trigger 어려움.
   투명 ::before 레이어로 cursor hit area를 양옆/상하로 8px씩 확장.
   4K에서는 viewport 비례로 더 크게 (cursor 비례 보정). */
.ecm-pill {
  cursor: pointer;
}
.ecm-pill::before {
  content: '';
  position: absolute;
  inset: -8px -10px;
  z-index: -1;
  cursor: pointer;
}
/* core pill은 더 넓게 — vial 가까운 위치라 마우스 접근 어려움 보정 */
.ecm-pill.core::before {
  inset: -10px -14px;
}
/* 2K hit area 확장 (×1.5) */
@media (min-width: 2560px) {
  .ecm-pill::before { inset: -12px -15px; }
  .ecm-pill.core::before { inset: -15px -21px; }
}
/* 4K hit area 확장 (×2) — OS cursor가 4K에서 작아 보임 보정 */
@media (min-width: 3840px) {
  .ecm-pill::before { inset: -16px -20px; }
  .ecm-pill.core::before { inset: -20px -28px; }
}
.ecm-pill.trace > span {
  font-size: 10px;
  color: rgba(245,240,238,0.32);
  padding: 2px 7px;
}

/* ─ INFO CARD — floating tooltip next to hovered pill ─ */
.ecm-info-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 308px;
  z-index: 20;
  padding: 22px 24px 24px;
  background: linear-gradient(165deg, rgba(20,20,18,0.97) 0%, rgba(10,10,9,0.99) 100%);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 0.5px solid rgba(148,127,130,0.42);
  border-radius: 8px;
  /* Dark glass (over dark ECM shader — keeps its light text legible). Brand glass:
     hairline mauve border + INSET rim-light + soft mauve glow. NO offset drop shadow. */
  box-shadow: 0 0 40px rgba(148,127,130,0.16),
              inset 0 1px 0 rgba(255,255,255,0.12),
              inset 0 0 0 1px rgba(255,255,255,0.04);
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  pointer-events: none;
  visibility: hidden;
  transition: transform 0.28s var(--ease-elastic),
              opacity 0.22s var(--ease-elastic),
              visibility 0s linear 0.28s;
  transform-origin: var(--tail-x, 50%) var(--tail-y, 0%);
}
.ecm-info-card.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

/* Tooltip tail — small triangle pointing to the pill */
.ecm-info-card::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: inherit;
  border-left: 0.5px solid rgba(148,127,130,0.45);
  border-top: 0.5px solid rgba(148,127,130,0.45);
  transform: rotate(var(--tail-rotate, -45deg));
  top: var(--tail-top, auto);
  bottom: var(--tail-bottom, auto);
  left: var(--tail-left, -6px);
  right: var(--tail-right, auto);
  z-index: -1;
}

.ecm-info-card .close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  background: transparent;
  border: 0.5px solid rgba(245,240,238,0.22);
  border-radius: 50%;
  color: rgba(245,240,238,0.55);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
  display: flex; align-items: center; justify-content: center;
}
.ecm-info-card .close:hover {
  color: var(--color-brand);
  border-color: var(--color-brand);
  background: rgba(148,127,130,0.1);
}
.ecm-info-card .info-head { margin-bottom: 12px; }
.ecm-info-card .info-body { min-width: 0; }

/* Eyebrow / kicker — phase 라벨 */
.ecm-info-card .ing-phase {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(148,127,130,0.92);
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ecm-info-card .ing-phase::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--color-brand);
  opacity: 0.7;
}

/* 영문 제품명 — 카드 hero level (위계 1순위) */
.ecm-info-card .ing-name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.022em;
  line-height: 1.18;
  color: var(--text-inverse);
  margin-bottom: 5px;
  padding-right: 32px; /* room for close */
}

/* 한글 제품명 — Pretendard, 가독성 위계 2순위 */
.ecm-info-card .ing-kr {
  font-family: var(--ko);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.011em;  /* Pretendard ko-body */
  line-height: 1.4;
  color: var(--text-inverse-soft);
  padding-right: 32px;
}

/* Role — 인용문 형식의 한 줄 요약 (위계 3순위) */
.ecm-info-card .ing-role {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.005em;
  line-height: 1.45;
  color: var(--color-brand);
  margin: 14px 0 14px;
  padding: 12px 14px;
  background: rgba(148,127,130,0.06);
  border-left: 2px solid var(--color-brand);
  border-radius: 0 4px 4px 0;
}

/* 본문 desc — Pretendard, Web 가독성 표준 사이즈 + 한글 최적 자간/line-height */
.ecm-info-card .ing-desc {
  font-family: var(--ko);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.011em;  /* Pretendard ko-body */
  line-height: 1.7;
  color: rgba(245,240,238,0.88);
  word-break: keep-all;       /* 한글 어절 단위 줄바꿈 */
  overflow-wrap: break-word;
}

/* ── Fact-based extension: meta line · facts list · refs ── */
.ecm-info-card .ing-meta {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 0.5px solid rgba(245,240,238,0.08);
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(245,240,238,0.42);
  line-height: 1.5;
}
.ecm-info-card .ing-facts {
  margin-top: 9px;
}
.ecm-info-card .ing-facts-label,
.ecm-info-card .ing-refs-label {
  font-family: var(--display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: 4px;
  opacity: 0.85;
}
.ecm-info-card .ing-facts ul,
.ecm-info-card .ing-refs ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ecm-info-card .ing-facts li {
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(245,240,238,0.65);
  padding: 2px 0 2px 9px;
  position: relative;
}
.ecm-info-card .ing-facts li::before {
  content: '·';
  position: absolute;
  left: 2px;
  top: 1px;
  color: var(--color-brand);
  font-weight: 700;
}
.ecm-info-card .ing-refs {
  margin-top: 9px;
  padding-top: 7px;
  border-top: 0.5px dashed rgba(245,240,238,0.08);
}
.ecm-info-card .ing-refs li {
  font-family: var(--body);
  font-size: 9.5px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(245,240,238,0.5);
  padding: 2px 0;
}
.ecm-info-card .ing-refs a {
  color: rgba(148,127,130,0.85);
  text-decoration: none;
  border-bottom: 0.5px solid rgba(148,127,130,0.3);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ecm-info-card .ing-refs a:hover {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
}

/* ─────────────────────────────────────────────────────────────────
   ecm-info-card 2K/4K scale-up (CLAUDE.md FHD baseline 정책)
   FHD 1920px → 308px width 기본
   2K   2560-3839px → ×1.23 (380px width)
   4K   3840px+     → ×1.56 (480px width)
   ──────────────────────────────────────────────────────────────── */

@media (min-width: 2560px) {
  .ecm-info-card {
    width: 380px;
    padding: 28px 30px 30px;
    border-radius: 10px;
  }
  .ecm-info-card .close {
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
  .ecm-info-card .info-head { margin-bottom: 14px; }
  .ecm-info-card .ing-phase {
    font-size: 12px;
    margin-bottom: 10px;
    gap: 8px;
  }
  .ecm-info-card .ing-phase::before { width: 18px; }
  .ecm-info-card .ing-name {
    font-size: 28px;
    margin-bottom: 6px;
    padding-right: 38px;
  }
  .ecm-info-card .ing-kr {
    font-size: 15px;
    line-height: 1.45;
    padding-right: 38px;
  }
  .ecm-info-card .ing-role {
    font-size: 15px;
    margin: 16px 0;
    padding: 14px 16px;
  }
  .ecm-info-card .ing-desc {
    font-size: 17px;
    line-height: 1.7;
  }
}

@media (min-width: 3840px) {
  .ecm-info-card {
    width: 480px;
    padding: 36px 40px 40px;
    border-radius: 12px;
    box-shadow: 0 32px 64px rgba(0,0,0,0.62),
                0 0 56px var(--color-brand-glow),
                inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .ecm-info-card .close {
    top: 18px;
    right: 18px;
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
  .ecm-info-card .info-head { margin-bottom: 18px; }
  .ecm-info-card .ing-phase {
    font-size: 14px;
    margin-bottom: 12px;
    gap: 10px;
  }
  .ecm-info-card .ing-phase::before { width: 22px; height: 1.5px; }
  .ecm-info-card .ing-name {
    font-size: 36px;
    margin-bottom: 8px;
    padding-right: 48px;
    line-height: 1.15;
  }
  .ecm-info-card .ing-kr {
    font-size: 18px;
    line-height: 1.5;
    padding-right: 48px;
  }
  .ecm-info-card .ing-role {
    font-size: 18px;
    margin: 20px 0;
    padding: 18px 20px;
    border-left-width: 3px;
  }
  .ecm-info-card .ing-desc {
    font-size: 21px;
    line-height: 1.7;
  }
}

/* ══════════════════════════════════════════════════════════════
   ECM Four Phases Composition — products.html Slide 5
   50가지 성분을 4단계 서사로 요약하는 2×2 카드 grid
   ══════════════════════════════════════════════════════════════ */
.ecm-phases-head {
  text-align: center;
  margin-bottom: clamp(28px, 3.5vh, 48px);
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.ecm-phases-head .sec-tag {
  color: var(--color-brand);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 16px;
  display: block;
}
.ecm-phases-h {
  font-family: var(--display);
  font-weight: 100;
  font-size: clamp(28px, 3.2vw, 46px);    /* 비율 재조정: 부제 대비 3.5:1 수준 */
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--text-on-dark);             /* Mechanism/Composition section은 dark scope */
  margin-bottom: 14px;
}
.ecm-phases-h em {
  font-style: normal;
  font-weight: 300;
  color: var(--color-brand);
}
.ecm-phases-sub {
  font-family: var(--ko);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(245,240,238,0.6);
  max-width: none;        /* 한 줄로 자연 배치 */
  margin: 0 auto;
  white-space: nowrap;    /* 데스크톱에서 한 줄 강제 */
}
/* 모바일에선 nowrap 해제 — 자연 줄바꿈 허용 */
@media (max-width: 768px) {
  .ecm-phases-sub { white-space: normal; max-width: 44ch; }
}

/* 2×2 phase grid */
.ecm-phase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.4vw, 22px);
  max-width: 1080px;
  margin: 0 auto;
}

.ecm-phase-card {
  position: relative;
  padding: clamp(20px, 2.2vw, 28px);
  background: var(--surface);                              /* opaque light surface — shader 차단 */
  border: 0.5px solid var(--color-brand-glow);
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
  display: flex;
  flex-direction: column;
}
.ecm-phase-card:hover {
  background: var(--surface-3);                            /* token: light #E0D8D6 / dark #312729 auto-flip */
  border-color: rgba(148,127,130,0.55);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px var(--color-brand-glow);
}
.ecm-phase-card .ph-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
}
.ecm-phase-card .ph-num {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-brand);
  flex-shrink: 0;
}
.ecm-phase-card .ph-name {
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.018em;
  line-height: 1;
  color: var(--charcoal);
}
.ecm-phase-card .ph-role {
  font-family: var(--body);
  font-style: italic;
  font-size: 12px;
  color: var(--color-brand);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--border-subtle);   /* token: light/dark auto-flip */
}
.ecm-phase-card .ph-body {
  font-family: var(--ko);
  font-size: var(--fs-sm);                             /* Caption tier — 카드 안 작은 본문 */
  font-weight: var(--fw-small);                        /* Pretendard small — Medium 가독성 보강 */
  line-height: var(--lh-tight-body);
  letter-spacing: var(--ls-small);
  color: var(--text-secondary);                        /* token: 75%-equiv — light #4A4042, dark inverse-mid */
  margin-bottom: 14px;
  flex-grow: 1;
}
.ecm-phase-card .ph-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0;
  margin: 0 0 14px;
}
.ecm-phase-card .ph-tags li {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--text-secondary);                        /* token: light/dark auto-flip */
  padding: 4px 9px;
  background: rgba(148,127,130,0.12);                  /* mauve tint — both scope visible */
  border: 0.5px solid rgba(148,127,130,0.32);
  border-radius: 100px;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.ecm-phase-card .ph-tags li:hover {
  color: var(--color-brand);
  border-color: rgba(148,127,130,0.6);
  background: rgba(148,127,130,0.2);
}
.ecm-phase-card .ph-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 12px;
  border-top: 0.5px solid var(--border-subtle);        /* token: light/dark auto-flip */
  gap: 12px;
}
.ecm-phase-card .ph-count {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 200;
  letter-spacing: -0.015em;
  color: var(--charcoal);
}
.ecm-phase-card .ph-count em {
  font-family: var(--display);
  font-style: normal;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-tertiary);                         /* token: light/dark auto-flip */
  margin-left: 3px;
}
.ecm-phase-card .ph-anchor {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-brand);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
  white-space: nowrap;
}
.ecm-phase-card .ph-anchor:hover {
  color: var(--color-brand-deep);                   /* dark mauve — light card 위 visible */
  border-bottom-color: currentColor;
}

/* ─ Phase summary — compact single line ─ */
.ecm-phases-summary {
  text-align: center;
  margin-top: clamp(24px, 3vh, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ecm-phases-summary .s-total {
  font-family: var(--display);
  font-weight: 100;
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--charcoal);
}
.ecm-phases-summary .s-label {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245,240,238,0.45);
  font-weight: 500;
}

/* Responsive */
@media (max-width: 1024px) {
  .ecm-phase-grid { grid-template-columns: 1fr 1fr; }
  .ecm-phase-card { padding: 24px; }
}
@media (max-width: 768px) {
  .ecm-phase-grid { grid-template-columns: 1fr; gap: 12px; }
  .ecm-phase-card { padding: 22px; }
  .ecm-phase-card .ph-head { gap: 12px; }
  .ecm-phase-card .ph-name { font-size: 24px; }
  .summary-inline { gap: 8px; }
  .summary-inline .s-num { font-size: 16px; }
  .summary-inline .s-total { font-size: 44px; }
}

/* 2K (2560–3839) — Phase cards + Four Steps scale up */
@media (min-width: 2560px) and (max-width: 3839px) {
  .ecm-phases-head { max-width: min(72vw, 1400px); margin-bottom: clamp(48px, 4vh, 80px); }
  .ecm-phases-h { font-size: clamp(46px, 2.4vw, 68px); margin-bottom: clamp(18px, 1vh, 26px); }
  .ecm-phases-sub { font-size: clamp(14px, 0.7vw, 20px); line-height: 1.7; }
  .ecm-phase-grid { max-width: min(78vw, 1800px); gap: clamp(22px, 1vw, 36px); }
  .ecm-phase-card { padding: clamp(32px, 1.5vw, 48px); }
  .ecm-phase-card .ph-head { gap: clamp(16px, 0.8vw, 22px); margin-bottom: clamp(12px, 0.6vh, 18px); }
  .ecm-phase-card .ph-num { font-size: clamp(12px, 0.55vw, 16px); }
  .ecm-phase-card .ph-name { font-size: clamp(32px, 1.7vw, 48px); }
  .ecm-phase-card .ph-role { font-size: clamp(14px, 0.62vw, 18px); margin-bottom: clamp(16px, 0.8vh, 22px); padding-bottom: clamp(14px, 0.7vh, 18px); }
  .ecm-phase-card .ph-body { font-size: clamp(14px, 0.7vw, 19px); line-height: 1.85; margin-bottom: clamp(16px, 0.8vh, 22px); }
  .ecm-phase-card .ph-tags { gap: clamp(6px, 0.3vw, 9px); margin-bottom: clamp(16px, 0.8vh, 22px); }
  .ecm-phase-card .ph-tags li { font-size: clamp(11px, 0.5vw, 14px); padding: clamp(4px, 0.2vw, 6px) clamp(10px, 0.5vw, 14px); }
  .ecm-phase-card .ph-meta { padding-top: clamp(14px, 0.7vh, 18px); }
  .ecm-phase-card .ph-count { font-size: clamp(18px, 0.88vw, 26px); }
  .ecm-phase-card .ph-count em { font-size: clamp(10px, 0.47vw, 14px); }
  .ecm-phase-card .ph-anchor { font-size: clamp(11px, 0.5vw, 14px); }
  .ecm-phases-summary .s-total { font-size: clamp(72px, 4vw, 112px); }
  .ecm-phases-summary .s-label { font-size: clamp(12px, 0.6vw, 16px); }
}

/* 4K (3840+) — Phase cards + Four Steps scale up further */
@media (min-width: 3840px) {
  .ecm-phases-head { max-width: min(68vw, 2200px); margin-bottom: clamp(72px, 4vh, 120px); }
  .ecm-phases-h { font-size: clamp(68px, 2.4vw, 100px); margin-bottom: clamp(24px, 1vh, 36px); }
  .ecm-phases-sub { font-size: clamp(20px, 0.62vw, 28px); line-height: 1.75; }
  .ecm-phase-grid { max-width: min(76vw, 2800px); gap: clamp(32px, 1vw, 56px); }
  .ecm-phase-card { padding: clamp(48px, 1.5vw, 72px); }
  .ecm-phase-card .ph-head { gap: clamp(22px, 0.7vw, 30px); margin-bottom: clamp(18px, 0.55vh, 26px); }
  .ecm-phase-card .ph-num { font-size: clamp(14px, 0.42vw, 20px); }
  .ecm-phase-card .ph-name { font-size: clamp(48px, 1.5vw, 68px); }
  .ecm-phase-card .ph-role { font-size: clamp(18px, 0.52vw, 24px); margin-bottom: clamp(22px, 0.7vh, 30px); padding-bottom: clamp(18px, 0.55vh, 24px); }
  .ecm-phase-card .ph-body { font-size: clamp(18px, 0.58vw, 26px); line-height: 1.9; margin-bottom: clamp(22px, 0.7vh, 30px); }
  .ecm-phase-card .ph-tags { gap: clamp(8px, 0.22vw, 12px); margin-bottom: clamp(22px, 0.7vh, 30px); }
  .ecm-phase-card .ph-tags li { font-size: clamp(13px, 0.42vw, 18px); padding: clamp(6px, 0.18vw, 9px) clamp(13px, 0.4vw, 18px); }
  .ecm-phase-card .ph-meta { padding-top: clamp(18px, 0.55vh, 24px); }
  .ecm-phase-card .ph-count { font-size: clamp(26px, 0.8vw, 38px); }
  .ecm-phase-card .ph-count em { font-size: clamp(12px, 0.4vw, 18px); }
  .ecm-phase-card .ph-anchor { font-size: clamp(13px, 0.42vw, 18px); }
  .ecm-phases-summary .s-total { font-size: clamp(100px, 3.5vw, 160px); }
  .ecm-phases-summary .s-label { font-size: clamp(14px, 0.5vw, 20px); }
}

/* ══════════════════════════════════════════════════════════════
   THREE PILLARS · Triadic Constellation — products.html Slide 4
   PDLLA (top) · Hyaluronic Acid (bottom-left) · Trehalose (bottom-right)
   각 pillar vial + 소규모 orbit + 중앙 공통 교집합
   ══════════════════════════════════════════════════════════════ */
.ecm-map.triadic-map .ecm-vial { display: none; } /* triadic map은 기존 중앙 vial 대신 3 pillar vial 사용 */

.pillar-vial {
  position: absolute;
  left: var(--px, 50%);
  top: var(--py, 50%);
  transform: translate(-50%, -50%);
  width: clamp(76px, 8.5vw, 108px);
  aspect-ratio: 1 / 1;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  animation: ecm-vial-enter calc(1.2s * var(--ecm-intro-scale, 1)) var(--ease-elastic) forwards;
  animation-delay: calc(var(--pillar-delay, var(--dur-micro)) * var(--ecm-intro-scale, 1));
  filter: drop-shadow(0 14px 32px rgba(148,127,130,0.3))
          drop-shadow(0 0 60px rgba(148,127,130,0.12));
}
.pillar-vial img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: ecm-breathe 7s ease-in-out calc(1s * var(--ecm-intro-scale, 1)) infinite;
}
.pillar-vial .pillar-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-brand);
  white-space: nowrap;
}

/* 중앙 공통 교집합 */
.tc-center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  text-align: center;
  pointer-events: auto;
  padding: 16px 18px;
  background: rgba(10,10,9,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0.5px dashed rgba(148,127,130,0.35);
  border-radius: 2px;
  opacity: 0;
  animation: ecm-pill-enter calc(0.7s * var(--ecm-intro-scale, 1)) var(--ease-elastic) forwards;
  animation-delay: calc(2.6s * var(--ecm-intro-scale, 1));
}
.tc-center-title {
  font-family: var(--display);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(245,240,238,0.4);
  margin-bottom: 10px;
}
.tc-center-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tc-shared {
  font-family: var(--body);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  color: rgba(245,240,238,0.82);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.25s, transform 0.25s;
}
.tc-shared:hover,
.tc-shared.is-active {
  color: var(--color-brand);
  transform: scale(1.06);
}

/* ─ DYNAMIC HOVER LINE — temporary teal line from active pill to vial ─ */
.ecm-hover-line {
  position: absolute;
  left: 50%; top: 50%;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 4;
  overflow: visible;
}
.ecm-hover-line line {
  stroke: rgba(148,127,130,0.85);
  stroke-width: 0.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(148,127,130,0.6));
  opacity: 0;
  transition: opacity 0.25s ease;
}
.ecm-hover-line.is-active line { opacity: 1; }

/* Reduced motion — final state, no animation */
@media (prefers-reduced-motion: reduce) {
  .ecm-pill, .ecm-vial { opacity: 1 !important; animation: none !important; }
  .ecm-pill { transform: rotate(var(--a)) translate(var(--r)) !important; }
  .ecm-map-lines line { stroke-dashoffset: 0 !important; animation: none !important; }
  .ecm-vial img, .ecm-vial::before { animation: none !important; }
}

/* Large desktop (1600+) — slightly larger map, more space */
@media (min-width: 1600px) {
  #ca .container, #ecm .container { max-width: 1360px; }
  .ecm-map { max-width: 600px; }
}

/* 2K (2560–3839) — scale map, pills, typography */
@media (min-width: 2560px) and (max-width: 3839px) {
  #ca .container, #ecm .container { max-width: min(2200px, 82vw); }
  .ecm-map { max-width: min(56vw, 880px); }
  .ecm-pill > span { font-size: clamp(13px, 0.72vw, 18px); padding: clamp(4px, 0.22vw, 6px) clamp(10px, 0.55vw, 14px); }
  .ecm-pill.core > span { font-size: clamp(13px, 0.72vw, 18px); padding: clamp(6px, 0.32vw, 8px) clamp(13px, 0.68vw, 16px); }
  .ecm-pill.trace > span { font-size: clamp(12px, 0.58vw, 15px); padding: clamp(3px, 0.16vw, 4px) clamp(9px, 0.5vw, 12px); }
  /* Lift inline clamp caps for pill radii via attribute selectors */
  .ecm-pill[style*="clamp(135px, 11vw, 158px)"] { --r: clamp(160px, 7.2vw, 280px) !important; }
  .ecm-pill[style*="clamp(175px, 14vw, 202px)"] { --r: clamp(205px, 9.16vw, 360px) !important; }
  .ecm-pill[style*="clamp(218px, 18vw, 248px)"] { --r: clamp(250px, 11.24vw, 440px) !important; }
  .ecm-pill[style*="clamp(260px, 21vw, 294px)"] { --r: clamp(295px, 13.33vw, 520px) !important; }
  .ecm-pill[style*="clamp(300px, 24vw, 335px)"] { --r: clamp(336px, 15.18vw, 600px) !important; }
  .ecm-info-card { width: clamp(280px, 20vw, 420px); }
}

/* 4K (3840+) — map 1.6x, pills spread proportionally */
@media (min-width: 3840px) {
  #ca .container, #ecm .container { max-width: min(3200px, 83vw); }
  .ecm-map { max-width: min(52vw, 1200px); }
  .ecm-pill > span { font-size: clamp(16px, 0.58vw, 26px); padding: clamp(5px, 0.2vw, 8px) clamp(13px, 0.45vw, 18px); }
  .ecm-pill.core > span { font-size: clamp(16px, 0.58vw, 26px); padding: clamp(7px, 0.26vw, 10px) clamp(16px, 0.52vw, 22px); }
  .ecm-pill.trace > span { font-size: clamp(14px, 0.5vw, 22px); padding: clamp(4px, 0.13vw, 6px) clamp(11px, 0.37vw, 15px); }
  .ecm-pill[style*="clamp(135px, 11vw, 158px)"] { --r: clamp(220px, 5.8vw, 320px) !important; }
  .ecm-pill[style*="clamp(175px, 14vw, 202px)"] { --r: clamp(285px, 7.4vw, 410px) !important; }
  .ecm-pill[style*="clamp(218px, 18vw, 248px)"] { --r: clamp(350px, 9.1vw, 500px) !important; }
  .ecm-pill[style*="clamp(260px, 21vw, 294px)"] { --r: clamp(410px, 10.8vw, 590px) !important; }
  .ecm-pill[style*="clamp(300px, 24vw, 335px)"] { --r: clamp(475px, 12.3vw, 680px) !important; }
  .ecm-info-card { width: clamp(360px, 15vw, 560px); }
}

/* Tablet (<1280px) — hide trace ring to reduce density */
@media (max-width: 1280px) {
  .ecm-pill.trace { display: none; }
  .ecm-pill > span { font-size: 10px; }
  .ecm-pill.core > span { font-size: 10px; padding: 4px 10px; }
}

/* Small tablet (<1024px) — tighter grid */
@media (max-width: 1024px) {
  .ecm-detail-grid { grid-template-columns: 1fr 1fr !important; gap: 48px !important; }
}

/* Mobile — stack grid (text top, map below), card becomes fixed bottom sheet */
@media (max-width: 768px) {
  .ecm-detail-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ecm-map { max-width: 92vw; margin-top: 24px; }
  .ecm-pill > span { font-size: 11px; padding: 3px 8px; }
  .ecm-pill.core > span { font-size: 11px; padding: 4px 10px; }
  /* ─ Mobile radii: shrink so outer-ring pills fit within map bounds ─ */
  .ecm-pill[style*="clamp(135px, 11vw, 158px)"] { --r: clamp(82px, 22vw, 140px) !important; }
  .ecm-pill[style*="clamp(175px, 14vw, 202px)"] { --r: clamp(100px, 26.66vw, 170px) !important; }
  .ecm-pill[style*="clamp(218px, 18vw, 248px)"] { --r: clamp(115px, 30.66vw, 200px) !important; }
  .ecm-pill[style*="clamp(260px, 21vw, 294px)"] { --r: clamp(130px, 34.66vw, 230px) !important; }
  .ecm-pill[style*="clamp(300px, 24vw, 335px)"] { --r: clamp(150px, 40vw, 260px) !important; }
  /* Tooltip → bottom sheet (touch devices, to avoid finger-obscuring near pill) */
  .ecm-info-card {
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100%;
    padding: 20px 24px 32px;
    border-radius: 16px 16px 0 0;
    border-top: 2px solid var(--color-brand);
    border-left: none;
    border-right: none;
    max-height: 62vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.35s var(--ease-elastic), opacity var(--dur-panel), visibility 0s linear 0.35s;
  }
  .ecm-info-card.is-open { transform: translateY(0) !important; }
  .ecm-info-card::before { display: none; }
  .ecm-info-card .ing-name { font-size: 22px; }
  .ecm-info-card .ing-desc { font-size: 13px; }
  .ecm-hover-line { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT PRIMITIVES — Design System v4.1 (Tokens v5.1.0)
   재사용 가능한 base components: Button (3 variant), Card (4 variant),
   Spacing utilities. design-tokens.json 단일 출처 동기화.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Button base ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--display);
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background 0.25s var(--ease-elastic),
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.18s ease,
    box-shadow var(--dur-panel) ease;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  min-height: 44px;              /* 44px touch target floor (Korean mobile comfort) · v6 A7 */
  border: 1px solid transparent;
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.btn:active { transform: translateY(1px); }

/* Primary — Mauve filled */
.btn--primary {
  background: var(--color-brand-deep);
  color: var(--on-primary);
  border-color: var(--color-brand-deep);
}
.btn--primary:hover {
  background: var(--color-brand-deep);
  border-color: var(--color-brand-deep);
  box-shadow: var(--shadow-mauve);
  transform: translateY(-1px);
}

/* Secondary — Mauve outline */
.btn--secondary {
  background: transparent;
  color: var(--color-brand);
  border-color: var(--color-brand);
}
.btn--secondary:hover {
  background: var(--color-brand-tint);
  color: var(--color-brand-deep);
  border-color: var(--color-brand-deep);
  transform: translateY(-1px);
}

/* Ghost — text only with subtle hover */
.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: transparent;
}
.btn--ghost:hover {
  background: var(--surface-2);
  color: var(--color-brand);
}

/* Sizes */
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: 11px;
  min-height: var(--space-8);
}
.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--fs-sm);
  min-height: var(--space-12);
}

/* Block (full-width) */
.btn--block { width: 100%; }

/* Dark scope inverse — Ghost on dark surface */
[data-slide-theme="dark"] .btn--ghost,
.scene-dark .btn--ghost { color: var(--text-inverse); }
[data-slide-theme="dark"] .btn--ghost:hover,
.scene-dark .btn--ghost:hover {
  background: rgba(245,240,238,0.08);
  color: var(--color-brand-light);
}

/* ─── Card base ─── */
.card {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition:
    border-color var(--dur-panel) ease,
    box-shadow var(--dur-panel) ease,
    transform var(--dur-panel) ease,
    background var(--dur-panel) ease;
}
.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card__label {
  font-family: var(--display);
  font-size: var(--fs-tag);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-brand);
  margin: 0;
}
.card__title {
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: var(--lh-heading);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
.card__body {
  font-family: var(--ko);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--text-secondary);
  margin: 0;
}
.card__meta {
  font-family: var(--display);
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  margin: 0;
}
.card__footer {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 0.5px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

/* Card variants */
.card--outlined {
  background: transparent;
  border-color: var(--border-default);
}
.card--outlined:hover {
  background: var(--surface-2);
}

.card--elevated {
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.card--elevated:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.card--brand {
  background: var(--color-brand-tint);
  border-color: var(--color-brand-light);
}
.card--brand .card__title { color: var(--color-brand-deep); }
.card--brand:hover {
  background: rgba(148,127,130,0.14);
  border-color: var(--color-brand);
  box-shadow: var(--shadow-mauve);
}

/* Card on dark scope */
[data-slide-theme="dark"] .card,
.scene-dark .card {
  background: var(--surface-dark-2);
  border-color: rgba(245,240,238,0.08);
}
[data-slide-theme="dark"] .card:hover,
.scene-dark .card:hover {
  background: var(--surface-dark-3);
  border-color: rgba(245,240,238,0.16);
}
[data-slide-theme="dark"] .card__title,
.scene-dark .card__title { color: var(--text-inverse); }
[data-slide-theme="dark"] .card__body,
.scene-dark .card__body { color: var(--text-inverse-mid); }
[data-slide-theme="dark"] .card__meta,
.scene-dark .card__meta { color: var(--text-inverse-soft); }
[data-slide-theme="dark"] .card__footer,
.scene-dark .card__footer { border-top-color: rgba(245,240,238,0.08); }

/* ═══════════════════════════════════════════════════════════════════════════
   Design System v5.0 — Phase 5 신규 컴포넌트 (P0-Co1, P1-Co4)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── P0-Co1: .no-card variant — BG 통일 + 1px divider (카드 외 콘텐츠 분리) ─── */
.no-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: var(--space-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.no-card:last-child { border-bottom: 0; }
.no-card--cream {
  background: var(--surface-cream);
  padding: var(--space-8) var(--space-6);
  border-bottom: 0;
  border-radius: var(--radius-lg);
}

/* P0-Co2: .card padding upper bound — overflowing 카드 padding 제한 */
.card { padding: min(var(--space-8), var(--card-pad-max)); }
/* P1-R2: card radius 표준 (이미 적용됨, no-op safety) */

/* ─── P1-Co4: .btn--link — text only with underline hover (CTA 외 navigational) ─── */
.btn--link {
  background: transparent;
  color: var(--color-brand);
  border: 0;
  padding: var(--space-2) 0;
  min-height: auto;
  text-transform: none;
  letter-spacing: var(--ls-body);
  font-weight: var(--fw-medium, 500);
  position: relative;
}
.btn--link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 2px;
  height: 1px;
  background: currentColor;
  transition: right var(--dur-micro, var(--dur-micro)) var(--ease-standard, var(--ease-standard));
}
.btn--link:hover::after { right: 0; }
.btn--link:hover { color: var(--color-brand-deep); }

/* ─── P1-Sh2: dark scope shadow override ─── */
[data-slide-theme="dark"] .card,
.scene-dark .card {
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
[data-slide-theme="dark"] .card--elevated,
.scene-dark .card--elevated {
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}

/* ─── P0-A1: focus-visible 글로벌 정책 (모든 a/button/details/[role=button]) ─── */
a:focus-visible,
button:focus-visible,
details > summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ─── P1-A2: Skip-to-content link (글로벌) ─── */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-3) var(--space-5);
  background: var(--color-brand-deep);
  color: var(--on-primary);
  text-decoration: none;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: top var(--dur-micro, var(--dur-micro)) var(--ease-standard, var(--ease-standard));
}
.skip-link:focus,
.skip-link:focus-visible {
  top: var(--space-3);
  outline: 2px solid var(--text-inverse);
  outline-offset: 2px;
}

/* ─── v6 B6: press-spring feedback — token-driven, :active-only, critically-damped
   (no overshoot · quiet-luxury). Supersedes P1-M4's hardcoded scale(0.97)/100ms with
   --press-scale (0.98) / --dur-press (120ms) / --ease-press, and gates the press
   transform behind no-preference so reduced-motion users get no scale at all.
   Resting appearance is untouched — transform applies on :active only. ─── */
@media (prefers-reduced-motion: no-preference) {
  .btn:active,
  .inquiry-submit:active:not(:disabled),
  .cg-toast:active,
  button:active:not(:disabled):not([aria-disabled="true"]) {
    transform: scale(var(--press-scale));
    transition: transform var(--dur-press) var(--ease-press);
  }
}

/* ─── P1-M5: prefers-reduced-motion 글로벌 확대 ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── v6 B3: glass accessibility twins — global ───
   prefers-reduced-transparency → drop backdrop blur on every real glass surface
   (nav bar, light dropdown-menu glass, .gs-card, /design .glass-* ) and repoint the
   glass tint tokens to their opaque mauve-neutral solids. Also serves as the
   backdrop-filter performance / unsupported fallback. */
@media (prefers-reduced-transparency: reduce) {
  [class*="glass"],
  nav,
  .nav-dropdown-menu,
  .gs-card {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
  :root {
    --glass-bg:        var(--surface-1);
    --glass-bg-soft:   var(--surface-1);
    --glass-bg-strong: var(--surface-2);
    /* v6 Liquid Glass — 굴절이 꺼지면 투명 유리는 불투명 면으로 되돌린다 */
    --lens-bg:         var(--surface-1);
    --lens-rim:        none;
  }
}
/* prefers-contrast: more → thicken the hairline mauve border for glass edges */
@media (prefers-contrast: more) {
  :root { --glass-border: 1px solid rgba(111, 93, 96, 0.40); }
}

/* ─── Spacing utility classes (4-multiple) ─── */
.stack-1 > * + * { margin-top: var(--space-1); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-8 > * + * { margin-top: var(--space-8); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.cluster--sm { gap: var(--space-2); }
.cluster--lg { gap: var(--space-6); }

/* ═══════════════════════════════════════════════════════════════════════════
   Design System v6.0 — Phase A · numeric alignment + Korean orphan automation
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── A4: Tabular (fixed-width, lining) numerals ─── */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* Aligned-number display contexts — stats · specs · comparison-table cells.
   (Ordinal index labels like .cat-num/.step-num/.pd-mech-num intentionally excluded.) */
.signal-num,
.gs-stat-num,
.sci-num,
.spec-val,
.device-spec-row,
.compare-val,
.pd-table td {
  font-variant-numeric: var(--fvn-tabular);
  font-feature-settings: 'tnum' 1;
}

/* ─── A5: text-wrap orphan automation (progressive enhancement; keeps word-break: keep-all) ─── */
/* Headings/titles — balance line lengths */
h1, h2, h3,
.hero-headline, .sec-title, .gs-heading,
.detail-hero-title, .close-headline, .quality-headline,
.card__title, .gs-card-title, .record-card-title, .value-card-title,
.product-title, .cat-title, .step-title, .mech-title,
.channel-title, .tech-feat-title, .sci-refs-title, .gate-title,
.pd-title, .pd-section-title, .pd-mech-title, .pd-ev-title {
  text-wrap: balance;
}
/* Body/prose — avoid last-line orphans, improve rag */
.hero-copy-ko, .about-body, .philosophy-body,
.sci-desc, .record-card-desc, .cat-desc, .step-desc,
.gs-body, .gs-card-body, .sec-sub,
.value-card-desc, .tech-feat-desc, .mech-desc,
.quality-body, .product-body,
.pd-body, .pd-card-body, .pd-mech-body, .pd-tl-body, .pd-ev-body,
.channel-item-body, .detail-hero-sub {
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v4 Phase A — Nav wordmark (CELL[O]GRAM weighted gradient)
   ═══════════════════════════════════════════════════════════════════════════ */
.nav-logo--wordmark {
  font-family: var(--en);
  font-size: 22px;
  letter-spacing: -0.005em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: var(--text-inverse);
  transition: color 0.25s var(--ease-elastic);
}
/* 로고 어플리케이션 규칙(/design 표준 3색): 다크=on-dark 흰 단일톤 · 라이트=모브 단일톤.
   색이 아니라 웨이트 위계(700·500·300)로 [O]를 세운다 — 투톤 금지. */
.nav-logo--wordmark .lw-cell    { font-weight: 700; }
.nav-logo--wordmark .lw-bracket { font-weight: 300; padding: 0 1px; }
.nav-logo--wordmark .lw-o       { font-weight: 500; }
.nav-logo--wordmark .lw-gram    { font-weight: 300; }
nav.nav-light .nav-logo--wordmark { color: var(--color-brand); }
@media (max-width: 768px) {
  .nav-logo--wordmark { font-size: 19px; }
}
@media (min-width: 2560px) {
  .nav-logo--wordmark { font-size: 33px; }
}
@media (min-width: 3840px) {
  .nav-logo--wordmark { font-size: 44px; }
}

/* ─── Nav wordmark — [O] signature hover micro-interaction (Quiet Luxury, motion-only) ───
   Precision settle, never bouncy. transform-only → zero layout reflow.
   inline-block enables transform; vertical-align:baseline holds the type baseline.
   All motion gated behind prefers-reduced-motion: no-preference. */
@media (prefers-reduced-motion: no-preference) {
  .nav-logo--wordmark .lw-cell,
  .nav-logo--wordmark .lw-bracket,
  .nav-logo--wordmark .lw-o,
  .nav-logo--wordmark .lw-gram {
    display: inline-block;
    vertical-align: baseline;
    transform: translateX(0) scale(1);
    transition: transform 0.35s var(--ease-elastic);
  }
  /* spans are siblings (cell·[·O·]·gram) — :nth-of-type counts <span>:
     #2 = left bracket [ , #4 = right bracket ] */
  .nav-logo--wordmark:hover .lw-bracket:nth-of-type(2) { transform: translateX(-1.5px); }
  .nav-logo--wordmark:hover .lw-bracket:nth-of-type(4) { transform: translateX(1.5px); }
  .nav-logo--wordmark:hover .lw-o { transform: scale(1.05); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Apple HIG Mobile Audit — Top 7 Critical Fix (전 페이지 공통)
   design_ux agent audit 결과 반영 — 쿠키 배너 / 탭 타겟 44pt / KR 가독성
   ═══════════════════════════════════════════════════════════════════════════ */

/* #1 쿠키 배너 압축 + bottom safe-area inset */
.cgc-banner {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}
.cgc-title { display: none !important; }
.cgc-body {
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: #1A1A1A !important;
}
.cgc-body a {
  color: #1A1A1A !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* #2 쿠키 버튼 touch target 44pt + 대비 강화 */
.cgc-btn {
  min-height: 44px !important;
  padding: 12px 18px !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
}
.cgc-btn-primary {
  background: var(--color-brand-deep) !important;
  color: var(--on-primary) !important;
  border: 1px solid var(--color-brand) !important;
}
.cgc-btn-secondary {
  background: rgba(31,26,27,0.05) !important;
  color: #1A1A1A !important;
  border: 1px solid rgba(31,26,27,0.15) !important;
}
.cgc-btn-link {
  color: #1A1A1A !important;
  text-decoration: underline !important;
}

/* #6 KR 본문/heading line-height + word-break (전 viewport — 한국어 가독성 표준) */
.fulltype-body, .gs-body, .gs-card-body {
  line-height: 1.6 !important;
  letter-spacing: -0.01em !important;
  overflow-wrap: break-word !important;
  word-break: keep-all !important;
}
.fulltype-heading, .gs-heading, .close-headline {
  line-height: 1.35 !important;
  letter-spacing: -0.02em !important;
}

/* ─── Mobile only (≤768px) ─── */
@media (max-width: 768px) {
  /* #4 햄버거 44×44pt 탭 영역 */
  .hamburger {
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-right: 4px;
    padding: 0;
  }
  .hamburger span {
    position: static;
    width: 20px;
    height: 1.5px;
    margin: 0;
  }

  /* #5 KR 언어 토글 44×44pt + affordance */
  .nav-lang-current {
    min-width: 44px;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 4px;
    padding: 0 8px;
  }

  /* #7 Eyebrow letter-spacing + size (uppercase 가독성) */
  .h-tag, .sec-tag {
    letter-spacing: 0.18em !important;
    font-size: var(--m-fs-eyebrow, 12px) !important;   /* 09-22: 11→12 (최소 글자 12px) */
  }

  /* 보너스: hero 본문 padding-inline (한손 reachability) */
  .fulltype-content, .scene-content, .science-center-content, .close-content {
    padding-inline: 24px !important;
  }

  /* ─── Apple HIG #3 — hero 빈 공간 축소 (brand/products/science) ─── */
  .detail-hero {
    min-height: 70vh;
    padding: 32px 24px 32px !important;
  }
  .detail-hero-title {
    white-space: normal !important;
    word-break: keep-all !important;
  }
  .proto-hero-intro {
    width: 100% !important;
    min-height: 70vh !important;
    padding: 80px 24px 32px !important;
    align-items: center !important;
  }
  .proto-hero-inner {
    max-width: 100% !important;
  }

  /* ─── Apple HIG Round 2 — 잔여 minor fix ─── */

  /* products 본문 우측 클리핑 (inline white-space:nowrap 강제 해제) */
  .detail-hero-sub {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }

  /* science CTA "자세히 보기 · COLLAGEN ARCHITECTURE" 1줄화 */
  .proto-detail-text {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
  }

  /* contact "클리닉 문의 →" 화살표 baseline 정렬 (Round 2) */
  .hero-half-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Apple HIG Round 3 — #15 scroll progress + #17 page bg flicker
   ═══════════════════════════════════════════════════════════════════════════ */

/* #15 scroll progress indicator (전 viewport) */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--color-brand);
  z-index: 200;
  pointer-events: none;
  transition: width 0.08s linear;
}

/* #17 페이지별 SSR 첫 paint bg 매핑 — light hero 페이지 깜빡임 방지 */
body.page-light { background: #F0EFED; }
body.page-dark { background: var(--surface-dark-0); }

/* ═══════════════════════════════════════════════════════════════════════════
   Apple HIG Round 4 — Below-fold audit fix (4 critical)
   ═══════════════════════════════════════════════════════════════════════════ */

/* #R4-2 홈 .gs-stat 라벨 위계 강화 */
.gs-stat-label {
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  color: rgba(245,240,238,0.75) !important;
  line-height: 1.5 !important;
}
.scene-light .gs-stat-label {
  color: rgba(31,26,27,0.65) !important;
}

/* #R4-3 홈 .gs-card 카드 텍스트 대비 강화 (dark scope) */
.scene-dark .gs-card-title { color: #F3EFE7 !important; }
.scene-dark .gs-card-body { color: rgba(245,240,238,0.8) !important; }

/* #R4-5 products spec table 본문 폰트 (≥15px Apple Body) */
.product-specs-table td,
.product-specs-table th {
  font-size: 15px !important;
  line-height: 1.5 !important;
  padding: 12px 8px !important;
}

/* #R4-19 footer 링크 터치 영역 (44pt) */
@media (max-width: 768px) {
  .footer-inline a {
    display: inline-block;
    padding: 12px 8px;
    font-size: 14px;
    min-height: 44px;
    line-height: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Apple HIG Round 5 — H/I/J/K/L (5 fix)
   ═══════════════════════════════════════════════════════════════════════════ */

/* K (R4-4) brand .brand-values mobile vertical 축소 — 거대 "존중/설계/기록" 100vh → 60vh */
@media (max-width: 768px) {
  .brand-values { min-height: 60vh !important; padding: 32px 0 !important; }
  .value-block { min-height: auto !important; padding: 24px 0 !important; }
}

/* L (R4-15) scroll snap proximity (mobile only) — section 경계 명확화 */
@media (max-width: 768px) {
  html { scroll-snap-type: y proximity; scroll-padding-top: 60px; }
  section, .dp-slide, .scene { scroll-snap-align: start; }
}

/* J (R4-6) products .ecm-phase-card padding 통일 (mobile) — 8pt grid */
@media (max-width: 768px) {
  .ecm-phase-card { padding: 16px !important; }
}


/* ─── Bug 1 fix — contact FAQ open 강제 가시 (R5에서 staggered fade가 mobile에서 visible 안 되는 case) ─── */
.q-row[open] .q-body .answer-line {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Apple HIG Round 6 — Bug 2/3 + #14 시그니처 + R4 잔여
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bug 2 — products .product-quote 세로 두꺼운 띠 (mobile) */
@media (max-width: 768px) {
  .product-quote {
    border-left-width: 1px;
    background: transparent;
    padding-left: 12px !important;
    color: rgba(245,240,238,0.6);
    font-size: 13px;
  }
  .ecm-info-card .ing-role {
    border-left-width: 1px !important;
    padding: 10px 12px;
  }
}

/* Bug 3 — products .ecm-phase-card 위계 정렬 (mobile) */
@media (max-width: 768px) {
  .ecm-phase-card .ph-num {
    font-size: 11px;
    letter-spacing: 0.28em;
    margin-bottom: 8px;
    display: block;
  }
  .ecm-phase-card .ph-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .ecm-phase-card .ph-name {
    font-size: 26px;
    font-weight: 300;
    line-height: 1.1;
  }
  .ecm-phase-card .ph-body {
    font-weight: 400;
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 18px;
    color: var(--text-inverse-soft);
  }
  .ecm-phase-card .ph-tags li {
    font-size: 9.5px;
    padding: 3px 8px;
  }
  .ecm-phase-card {
    padding: 22px 18px !important;
  }
}

/* #14 contact 시그니처 (canvas) mobile fold 회피 */
@media (max-width: 768px) {
  #hero-canvas {
    height: 60vh !important;
    top: 0 !important;
    bottom: auto !important;
    opacity: 0.55 !important;
  }
  .hero-half { min-height: 56vh !important; }
}

/* R4 #7 ecm-pill 44pt 탭 영역 */
@media (max-width: 768px) {
  .ecm-pill::before { inset: -14px -18px; }
  .ecm-pill { min-height: 44px; min-width: 44px; }
}

/* R4 #13 쿠키 row 320px wrap */
@media (max-width: 360px) {
  .cgc-actions { flex-wrap: wrap; gap: 8px; }
  .cgc-btn { flex: 1 1 100% !important; min-height: 44px; }
}

/* R4 #16 reduced-motion 글로벌 */
@media (prefers-reduced-motion: reduce) {
  .ecm-pill,
  .aside-sphere,
  .aside-sphere::before,
  .ecm-vial,
  .hero-center-logo.lit {
    animation: none !important;
    transition: none !important;
  }
  #hero-canvas { display: none !important; }
}


/* === 모바일 hotfix (2026-05-31) === */
/* Issue 1: vial → ring 1 SVG connecting lines가 모바일 좁은 viewport에서
   preserveAspectRatio="none" stretch로 vertical mauve stripe로 보임.
   → preserveAspectRatio="xMidYMid meet"로 정교 fix (products.html 4 페이지). hotfix 제거. */

/* Issue 2: .ecm-info-card position: absolute + 모바일 inline style 제거 시
   parent(.ecm-map) 좌상단에 stay → scroll 시 같이 움직임. viewport 기준 fixed로 변경. */
@media (max-width: 768px) {
  .ecm-info-card {
    position: fixed !important;
    top: auto !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 20px !important;
    width: auto !important;
    max-width: calc(100vw - 32px) !important;
    z-index: 100 !important;
  }
}

/* === vial 좌우 vertical stripe 모바일 강화 hotfix (2026-06-01) ===
   ecm-shader-bg + ecm-map-lines + ecm-hover-line 모두 모바일 hidden 했음에도
   stripe 잔존 → ecm-map container에 강제 dark background + isolate 추가.
   Vial PNG 좌우 edge 또는 잔여 visual artifact 완전 차단. */
@media (max-width: 768px) {
  .ecm-map-lines { display: none !important; }
  .ecm-hover-line { display: none !important; }
  .ecm-shader-bg { display: none !important; }

  /* vial container 자체에 isolation + background reset */
  section[data-shader="neural-mesh"] {
    background: var(--dark-bg, var(--surface-dark-0)) !important;
    isolation: isolate;
  }
  section[data-shader="neural-mesh"]::before,
  section[data-shader="neural-mesh"]::after { display: none !important; }

  /* ecm-map 좌우 stripe 가능성 차단 */
  .ecm-map {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* vial drop-shadow가 vertical stripe로 보일 가능 — mobile blur 축소 */
  .ecm-vial {
    filter: drop-shadow(0 12px 24px rgba(148, 127, 130, 0.24)) !important;
  }
  .ecm-vial::before { display: none !important; }
}

/* === Liquid Glass (iOS 18 style) — Mechanism · Four Steps + Composition · Four Phases (2026-06-01) ===
   .ecm-phase-card = products.html Mechanism (CA) + Composition (ECM Prime) 4-card.
   White-transparent base + strong backdrop blur + bright edge highlight + inner refraction. */
.ecm-phase-card {
  position: relative;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 24px;
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

/* v6 B7b — squircle (continuous-curvature) corners on the signature Liquid-Glass card.
   Progressive enhancement: the border-radius above stays the fallback; only browsers that
   support corner-shape upgrade the 24px arcs to a superellipse. corner-shape is brand-new,
   so today the vast majority of browsers render exactly as the border-radius fallback.
   Reserved for this one signature surface per spec (squircle ≠ every card). NB: .gs-card —
   the homepage hero cards — is intentionally square-cornered (no border-radius), so the
   signature *rounded* surface is this iOS-18 Liquid-Glass product card. */
@supports (corner-shape: superellipse(2)) {
  .ecm-phase-card { corner-shape: superellipse(2.4); }
}

/* Inner refraction — diagonal liquid highlight (유리 단면 효과) */
.ecm-phase-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.02) 35%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.06) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* 내부 모든 콘텐츠는 highlight 위에 — 가독성 보장 */
.ecm-phase-card > * { position: relative; z-index: 1; }

/* Hover — 유리가 살짝 떠오르는 효과 */
.ecm-phase-card:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow:
    0 16px 56px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

/* 가독성 보장 — phase-card 내 텍스트 모두 흰색 계열 (dark glass scope) */
.ecm-phase-card .ph-num { color: var(--color-brand); }
.ecm-phase-card .ph-name { color: var(--text-inverse); }
.ecm-phase-card .ph-role { color: var(--text-inverse-mid); }
.ecm-phase-card .ph-body { color: rgba(245, 240, 238, 0.78); }
.ecm-phase-card .ph-tags li { color: var(--text-inverse-soft); border-color: rgba(255, 255, 255, 0.18); }
.ecm-phase-card .ph-meta { color: rgba(245, 240, 238, 0.65); }
.ecm-phase-card .ph-count em { color: var(--color-brand); font-style: normal; }
.ecm-phase-card .ph-anchor { color: var(--text-inverse-mid); }
.ecm-phase-card .ph-anchor:hover { color: var(--color-brand); }

/* Mobile responsive — radius 줄임 + backdrop blur 약화 (성능) */
@media (max-width: 768px) {
  .ecm-phase-card {
    border-radius: 12px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Design System v6 · Phase B5 — Toast (snackbar) + Field (form) components
   ─────────────────────────────────────────────────────────────────────────────
   Consumes EXISTING tokens only (glass tier · --status-* · --z-toast · motion ·
   radius · space). No new :root tokens; no raw status hex. Quiet-luxury:
   rim-light depth (no offset drop shadow), restrained rise+fade, reduced-motion
   and reduced-transparency twins. Color is never the sole signal — every toast
   carries a type-icon glyph + text; every field carries a message + border-state.
   JS: js/components/toast.js (CellToast.show) · js/components/field.js (CellField)
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Toast container — fixed bottom-center stack, non-interactive shell ─── */
.cg-toast-container {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  pointer-events: none;
}

/* ─── Toast — glass-thick material; INSET rim-light only (no offset shadow) ─── */
.cg-toast {
  --cg-accent: var(--status-info);   /* private component var (not a :root token) */
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 360px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--glass-thick-bg);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-rim);
  -webkit-box-shadow: var(--glass-rim);
  color: var(--on-surface);
  font-size: var(--fs-sm);
  line-height: var(--lh-small);
  pointer-events: auto;
  cursor: pointer;
  /* enter/leave — restrained rise + fade */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-panel) var(--ease-out-quart),
              transform var(--dur-panel) var(--ease-out-quart);
}
.cg-toast.is-in  { opacity: 1; transform: translateY(0); }
.cg-toast.is-out { opacity: 0; }

/* Thin left accent bar — secondary status cue (optional; icon+text lead) */
.cg-toast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--cg-accent);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

/* Icon chip — small ring, glyph + ring carry the status hue */
.cg-toast__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-weight: 700;
  line-height: 1;
  color: var(--cg-accent);
}
.cg-toast__msg { flex: 1 1 auto; min-width: 0; }

/* Status modifiers — set the accent only; body stays neutral glass */
.cg-toast--success { --cg-accent: var(--status-success); }
.cg-toast--error   { --cg-accent: var(--status-error); }
.cg-toast--info    { --cg-accent: var(--status-info); }

/* Reduced-motion — appear/disappear instantly, no slide */
@media (prefers-reduced-motion: reduce) {
  .cg-toast,
  .cg-toast.is-in,
  .cg-toast.is-out {
    transition: none;
    transform: none;
  }
}

/* Reduced-transparency — drop the blur, sit on an opaque mauve-neutral solid
   (the global [class*="glass"] twin does not match .cg-toast, so restate it) */
@media (prefers-reduced-transparency: reduce) {
  .cg-toast {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background: var(--surface-2);
  }
}

/* Mobile (≤768px) — full-width bottom, thumb-safe above the edge */
@media (max-width: 768px) {
  .cg-toast-container {
    left: 0;
    right: 0;
    transform: none;
    align-items: stretch;
    padding: var(--space-4);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }
  .cg-toast { max-width: none; }
}

/* ─── Field — label + input + message slot; validation-state ready ─── */
.cg-field { display: flex; flex-direction: column; gap: var(--space-2); }
.cg-field > label,
.cg-field .cg-field__label {
  font-size: var(--fs-tag);
  color: var(--on-surface-variant);
}

.cg-field input,
.cg-field textarea,
.cg-field select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  color: var(--on-surface);
  background: var(--surface-1);
  border: 1px solid var(--outline);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-micro) var(--ease-out-quart),
              box-shadow   var(--dur-micro) var(--ease-out-quart);
}
.cg-field input:focus,
.cg-field textarea:focus,
.cg-field select:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: var(--shadow-focus);
}

/* Error state — border + tint + message hue */
.cg-field.is-error input,
.cg-field.is-error textarea,
.cg-field.is-error select {
  border-color: var(--status-error);
  background: var(--status-error-bg);
}
.cg-field.is-error .cg-field__msg { color: var(--status-error); }

/* Success state — border + message hue (no fill; restraint) */
.cg-field.is-success input,
.cg-field.is-success textarea,
.cg-field.is-success select {
  border-color: var(--status-success);
}
.cg-field.is-success .cg-field__msg { color: var(--status-success); }

/* Message slot — reserve height to avoid layout shift on state change */
.cg-field__msg {
  font-size: var(--fs-tag);
  line-height: var(--lh-small);
  min-height: 1.2em;
  color: var(--on-surface-variant);
}

/* Disabled */
.cg-field input:disabled,
.cg-field textarea:disabled,
.cg-field select:disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Design System v6 · Phase B4 — Type-role utility classes (opt-in)
   Bundle a full type role in ONE class instead of hand-composing 4 tokens
   (v5 audit: font-size only 31% adopted — 4-token composition is error-prone).
   Usage:  <h3 class="type-h3">…</h3>  ← replaces size + line-height +
   letter-spacing + weight set by hand. ADDITIVE: restyle nothing until the
   class is added to markup. Font-family stays the element's own (KR vs EN).
   ═══════════════════════════════════════════════════════════════════════════ */
.type-h1      { font-size: var(--type-h1-size);      line-height: var(--type-h1-lh);      letter-spacing: var(--type-h1-ls);      font-weight: var(--type-h1-fw); }
.type-h2      { font-size: var(--type-h2-size);      line-height: var(--type-h2-lh);      letter-spacing: var(--type-h2-ls);      font-weight: var(--type-h2-fw); }
.type-h3      { font-size: var(--type-h3-size);      line-height: var(--type-h3-lh);      letter-spacing: var(--type-h3-ls);      font-weight: var(--type-h3-fw); }
.type-body    { font-size: var(--type-body-size);    line-height: var(--type-body-lh);    letter-spacing: var(--type-body-ls);    font-weight: var(--type-body-fw); }
.type-caption { font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: var(--type-caption-ls); font-weight: var(--type-caption-fw); }
.type-label   { font-size: var(--type-label-size);   line-height: var(--type-label-lh);   letter-spacing: var(--type-label-ls);   font-weight: var(--type-label-fw); }
} /* @layer legacy */


/* ══════════════════════════════════════════════════════════════════
   Liquid Glass — 실제 굴절 렌즈 (Design System v6)
   ------------------------------------------------------------------
   애플 iOS 26 재질의 파라미터 모델(Frost·Depth·Splay·Light Angle·Refraction)
   차용. 값은 절제형(굴절 26 — 애플 원본은 64). 토큰 = material.lens_*.

   굴절 필터(#cg-lens)는 js/core.js 가 문서에 주입한다 — backdrop-filter 의
   SVG 필터는 외부 파일 참조가 동작하지 않기 때문(2026-08-11 실측).
   미지원 브라우저는 앞줄(서리)만 적용되어 기능 저하 없이 degrade 한다.

   적용 기준: **배경이 비치는 유리에만.** 불투명도가 높은 면(≥0.9)은
   굴절이 보이지 않아 GPU 비용만 든다.
   ══════════════════════════════════════════════════════════════════ */

/* 라이브 적용 대상 판정 (2026-08-11 실측)
   - nav .......... 전 페이지 상단, 스크롤 중 배경이 계속 바뀜 → 적용 ✓
   - .mobile-menu . 배경 0.97 불투명 · 전체화면 메뉴(가독성 최우선) → 미적용
   - .ecm-info-card / .ecm-phase-card . 0.94~0.97 불투명 다크 카드 → 굴절이
                    보이지 않아 GPU 비용만 든다 → 미적용
   - .gs-card ..... 라이브 사용처 0 (prototypes/_backup 에만 존재) = 죽은 규칙
                    → 적용하지 않음. 별건으로 정리 필요.
   즉 현재 라이브에서 굴절이 실제로 보이는 유리는 nav 하나다. */

/* 어두운 유리 — 네비게이션. 글자 가독성이 최우선이라 **불투명도는 그대로 두고**
   굴절과 상단 광원만 얹는다. */
nav {
          backdrop-filter: url(#cg-lens) blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* 굴절을 끄는 경우 — 성능/접근성/모션 민감 */
@media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) {
  .gs-card, nav { backdrop-filter: var(--lens-frost); }
  .gs-card::after { display: none; }
}

/* ═══ Offscreen 무한루프 애니메이션 정지 — js/nav.js IntersectionObserver 가 .anim-offscreen 토글 ═══
   뷰포트(+80px) 밖에 있는 동안만 paused. 1회성 진입 애니메이션(ecm-vial-enter 등)은 건드리지 않도록
   무한 애니메이션을 실제로 가진 캐리어(요소/의사요소)만 지정한다. prefers-reduced-motion 은 nav.js 에서 제외. */
.anim-offscreen.sec-tag,                /* tagBreathe */
.anim-offscreen.scroll-line,            /* scroll-pulse — index 히어로 스크롤 힌트 */
.anim-offscreen.ecm-vial::before,       /* ecm-halo — products ECM map */
.anim-offscreen.ecm-vial img,           /* ecm-breathe */
.anim-offscreen.hero-center-logo,       /* heroLogoHeartbeat — contact 히어로 */
.anim-offscreen.aside-sphere,           /* sphereRotate — contact aside */
.anim-offscreen.aside-sphere::before,   /* sphereCounter */
.anim-offscreen.cg-glow,                /* cg-pulse — brand */
.anim-offscreen.sem-static img {        /* semKB — index no-dive 정지컷 */
  animation-play-state: paused !important;
}

/* Phase 1 — 푸터 화장품 고지: 저작권 표기보다 한 단계 작고 낮은 대비 */
.footer-notice{font-size:.85em;opacity:.82;max-width:62ch;line-height:1.55}
@media(max-width:820px){.footer-notice{font-size:.8em;line-height:1.5}}

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile UI/UX upgrade — 2026-09-21 (shared layer, 4 languages)
   리뷰 6축(IA·타이포·레이아웃·모션·성능·접근성) 통합 수정. 이 블록은 파일 끝(비-@layer)이라
   @layer legacy 안의 규칙과 앞선 규칙을 이긴다. 페이지 인라인 <style>을 이겨야 하는 곳만
   !important 또는 `html body` 특이도를 쓴다. JS 훅: html.menu-open ·
   body.cgc-open · body.ecm-sheet-open · .hamburger[aria-expanded] · html.hero-css (nav.js·
   cookie-consent.js·ecm-ingredient-info.js·index 헤드 스크립트). (하단 문의 바는 09-22 대표 지시로 제거)
   ═══════════════════════════════════════════════════════════════════════════ */

/* A11Y-01 / LAY-02 — 법률 페이지 목차 <nav class="legal-toc">가 전역 nav{position:fixed}를 물려받지 않게 */
nav.legal-toc {
  position: static; height: auto; z-index: auto; display: block;
  background: var(--surface-2); backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none; border-bottom: 0; padding: 24px 28px;
}

/* TC-01 — 한국어 어절 줄바꿈을 루트에서 상속(개별 클래스 규칙은 그대로 유효) */
html[lang="ko"] body { word-break: keep-all; overflow-wrap: anywhere; }
/* TC-02 / LAY-03 — 일본어·중국어는 keep-all 금지(띄어쓰기 없음 → 한 줄로 늘어나 잘림) */
html[lang="ja"] :is(h1, h2, h3, h4, p, li, dd, dt, summary, .q-text, .answer-line, .hero-half-title, .faq-q, .faq-a),
html[lang^="zh"] :is(h1, h2, h3, h4, p, li, dd, dt, summary, .q-text, .answer-line, .hero-half-title, .faq-q, .faq-a) {
  word-break: normal !important; overflow-wrap: anywhere; line-break: strict;
}

/* 홈 히어로 정지 포스터(모바일 전용 마크업, index 4언어) — 데스크톱은 숨김 */
.hero-poster { display: none; }
@keyframes cgHeroDrift { from { transform: scale(1) translateY(0); } to { transform: scale(1.06) translateY(-1.5%); } }
@keyframes cgHeroIn { to { opacity: 1; transform: none; } }
@media (max-width: 821px) {
  .hero-poster {
    display: block; position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; pointer-events: none;
    animation: cgHeroDrift 16s ease-in-out infinite alternate;
  }
  /* PERF-01 — 모바일은 글자 분할·GSAP 없이 CSS 전용 등장(LCP = h1) */
  html.hero-css .h-line { opacity: 0; transform: translateY(14px); animation: cgHeroIn .7s var(--ease-out-quart) both; }
  html.hero-css .h-line + .h-line { animation-delay: .16s; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-poster { animation: none; }
  html.hero-css .h-line { animation: none; opacity: 1; transform: none; }
}

@media (max-width: 768px) {
  /* ── 터치 피드백 (MOT-01) — pointer-down 즉시 반응, quiet luxury ── */
  body { -webkit-tap-highlight-color: rgba(148,127,130,0.16); }
  .hero-cta:active, .gs-cta:active, .exh-item:active, .tp5-card:active, .detail-cta a:active, .hero-half-cta:active {
    transform: scale(var(--press-scale)); transition: transform var(--dur-press) var(--ease-press);
  }
  .mobile-menu a:active, .mobile-parent-link:active, .mobile-toggle:active, .q-summary:active,
  .faq-item summary:active, .inquiry-type-tab:active, .page-nav a:active, .lang-option:active {
    background: rgba(148,127,130,0.08);
  }

  /* ── 상단 nav: 밝은 구간에서도 언어 컨트롤이 보이게 (NAV-02) ── */
  .nav-lang-current { opacity: 1; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .nav-lang-current .lang-flag::after { color: rgba(245,240,238,0.82); }
  nav.nav-light .nav-lang-current .lang-flag::after { color: rgba(31,26,27,0.72); }
  .nav-lang-dropdown { background: rgba(17,17,16,0.96); border-radius: 8px; border: 0.5px solid rgba(245,240,238,0.12); }
  nav.nav-light .nav-lang-dropdown { background: rgba(240,239,237,0.98); border-color: rgba(31,26,27,0.12); }
  .lang-option { min-height: 44px; }
  .lang-option .lang-flag::after { color: rgba(245,240,238,0.72); }
  nav.nav-light .lang-option .lang-flag::after { color: rgba(31,26,27,0.62); }
  .lang-option.lang-active .lang-flag::after { color: var(--color-brand-light); }
  nav.nav-light .lang-option.lang-active .lang-flag::after { color: var(--color-brand-deep); }

  /* ── 햄버거 → X 변형 (MOT-02 / NAV-03), aria-expanded는 nav.js가 관리 ── */
  .hamburger span { transition: transform var(--dur-panel) var(--ease-standard), opacity var(--dur-micro) var(--ease-standard); }
  .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* ── 모바일 메뉴: 조용한 페이드, 스크롤 락, 대비, 다른 고정 크롬 위에 ── */
  .mobile-menu {
    display: flex; top: 56px; z-index: 160;
    visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity var(--dur-micro) var(--ease-standard), transform var(--dur-micro) var(--ease-standard), visibility 0s linear var(--dur-micro);
    background: #F0EFED; backdrop-filter: none; -webkit-backdrop-filter: none;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 20px 24px calc(40px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-menu.active { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
  html.menu-open { overflow: hidden; }
  html.menu-open #cgc-banner, html.menu-open .cgc-banner { display: none !important; }
  .mobile-menu a, .mobile-menu .mobile-parent { color: rgba(31,26,27,0.8); font-weight: 400; }
  .mobile-menu a.mobile-sub { color: rgba(31,26,27,0.72); }
  .mobile-menu a.mobile-active, .mobile-parent-link.mobile-active, .mobile-menu a.mobile-sub.mobile-active { color: var(--color-brand-deep); }
  /* 언어 칩 — 메뉴 맨 위 (NAV-10) */
  .mobile-menu .mobile-lang-switcher { display: flex; order: -1; gap: 8px; margin: 0 0 12px; padding: 0; justify-content: flex-start; border: 0; }
  .mobile-menu .mobile-lang-switcher a {
    flex: 0 0 auto; min-width: 56px; min-height: 40px; padding: 0 14px; margin: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0.5px solid rgba(31,26,27,0.18); border-radius: 100px;
    font-family: var(--display); font-size: 12px; letter-spacing: 0.1em; font-weight: 500; text-transform: uppercase;
    color: rgba(31,26,27,0.72); background: transparent;
  }
  .mobile-menu .mobile-lang-switcher a:hover { transform: none; }
  .mobile-menu .mobile-lang-switcher .lang-flag { font-size: 0; }
  .mobile-menu .mobile-lang-switcher .lang-flag::after { content: attr(data-code); font-size: 12px; }
  html[lang="ko"] .mobile-menu .mobile-lang-switcher a[data-lang="ko"],
  html[lang="en"] .mobile-menu .mobile-lang-switcher a[data-lang="en"],
  html[lang="ja"] .mobile-menu .mobile-lang-switcher a[data-lang="jp"],
  html[lang^="zh"] .mobile-menu .mobile-lang-switcher a[data-lang="cn"] {
    background: var(--color-brand-deep); border-color: var(--color-brand-deep); color: var(--on-primary);
  }
  /* 메뉴 1차 CTA — nav.js가 주입 (.mobile-menu-cta) */
  .mobile-menu a.mobile-menu-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; margin: 20px 0 4px; padding: 0 16px;
    background: var(--color-brand-deep); color: var(--on-primary); border-radius: 8px; border-bottom: 0;
    font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: none;
  }
  .mobile-menu a.mobile-menu-cta:active { background: var(--color-brand); }
  .mobile-social { margin-top: 20px; }
  .mobile-social a { width: 44px; height: 44px; align-items: center; justify-content: center; color: rgba(31,26,27,0.6); }


  /* (ECM 성분 카드 바텀시트는 아래 @layer mobilefix 블록) */

  /* ── products ECM 키워드 지도 → 칩 목록 (LAY-01 / TC-03): 데스크톱 px 궤도 대신 흐름 배치 ── */
  .ecm-map {
    aspect-ratio: auto; height: auto !important; max-width: none;
    display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 8px;
    padding: 4px 0; overflow: visible;
  }
  .ecm-map-lines, .ecm-hover-line { display: none !important; }
  .ecm-vial { position: static; order: -1; flex: 0 0 100%; width: 100%; aspect-ratio: auto; height: 150px; margin: 0 0 10px; }
  .ecm-vial img { max-height: 150px; }
  .ecm-pill { position: static !important; transform: none !important; animation: none !important; opacity: 1 !important; margin: 0; min-width: 0; }
  .ecm-pill::before { display: none; }
  .ecm-pill > span, .ecm-pill.core > span {
    transform: none !important; display: inline-flex; align-items: center; min-height: 40px;
    font-style: normal; font-size: 13px; line-height: 1; letter-spacing: 0.02em; white-space: nowrap;
    padding: 0 14px; border-radius: 100px;
  }
  .ecm-pill:not(.core) > span {
    font-family: var(--display); font-weight: 400; color: rgba(245,240,238,0.8);
    border: 0.5px solid rgba(245,240,238,0.16); background: rgba(255,255,255,0.03);
  }
  .ecm-pill.trace { display: none; }
  .ecm-pill:hover > span, .ecm-pill.is-active > span, .ecm-pill.core:hover > span, .ecm-pill.core.is-active > span { transform: none !important; }
  .ecm-pill.is-active > span { color: var(--color-brand-light); border-color: var(--color-brand); }
  .ecm-pill:active > span { transform: scale(var(--press-scale)) !important; transition: transform var(--dur-press) var(--ease-press); }

  /* (빈 화면 정책·science 스택은 아래 @layer mobilefix 블록 — legacy 레이어의 !important를 이기기 위해) */
  .dp-slide--merged { min-height: auto !important; padding: 72px 16px 24px !important; justify-content: flex-start; gap: 40px; }

  /* ── 탭 타깃 44px + 대비 (A11Y-04 / A11Y-05 / NAV-06 / TC-04 / TC-08) ── */
  .page-nav { gap: 12px; margin-top: 32px; padding: 0 8px !important; }
  .page-nav a { min-height: 44px; padding: 0 10px; font-size: 12px; letter-spacing: 0.12em; color: rgba(245,240,238,0.7); }
  .detail-light .page-nav a, body.page-light .page-nav a { color: rgba(31,26,27,0.66); }
  .close-links a, .detail-footer a, .footer-inline a, .legal-footer a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
  .footer-social a { width: 44px; height: 44px; }
  .ecm-phase-card .ph-anchor { display: inline-flex; align-items: center; min-height: 44px; }
  .ecm-phase-card .ph-num, .ecm-phase-card .ph-anchor, .product-tag { color: var(--color-brand-light); }
  .ecm-phase-card .ph-body { font-size: 14px; }
  .ecm-phase-card .ph-tags li { font-size: 11px; padding: 4px 9px; }
  .aside-eyebrow, .stream-chapter-cat, .aside-chapter-cat, .legal-eyebrow { color: var(--color-brand-deep); }
  .sec-tag { animation: none; opacity: 1; }
  .faq-item summary, .q-summary { min-height: 48px; }
  .footer-notice { font-size: 13px; line-height: 1.55; opacity: 1; max-width: 100%; }
  .detail-footer .footer-notice, .footer-inline .footer-notice { font-size: 13px; }
}

/* ═══ @layer mobilefix — 선언 순서상 첫 레이어. !important 규칙은 '먼저 선언된 레이어'가 이기므로
   legacy 레이어·페이지 인라인 <style>의 !important 를 여기서만 덮어쓴다. 이 블록의 모든 선언은 !important 필수. ═══ */
@layer mobilefix {
  @media (max-width: 768px) {
    /* science 히어로: 구체(상) → 카피(하) 스택, 뷰포트 강제 해제 (LAY-05 / LAY-07) */
    #science { display: flex !important; flex-direction: column !important; min-height: auto !important; padding: 56px 0 0 !important; }
    .proto-sphere-stage { position: relative !important; left: 0 !important; right: auto !important; top: 0 !important; width: 100% !important; height: 38svh !important; min-height: 250px !important; max-height: 360px !important; opacity: 1 !important; }
    .proto-hero-intro { width: 100% !important; min-height: auto !important; height: auto !important; padding: 4px 6vw 48px !important; background: none !important; align-items: flex-start !important; }
    #ecm-section { min-height: auto !important; }
    .proto-ecm-orbs-stage { height: 46svh !important; min-height: 300px !important; max-height: 420px !important; }
    .proto-ecm-intro { min-height: auto !important; height: auto !important; padding: 8px 6vw 56px !important; background: none !important; }
    .proto-ecm-phase-label { font-size: 11px !important; }

    /* products ECM 성분 카드 → 바텀시트 (MOT-05 / NAV-07). legacy hotfix(bottom:20px, z 100 !important)를 덮어씀 */
    .ecm-info-card {
      position: fixed !important; top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
      width: auto !important; max-width: none !important; z-index: 170 !important;
      max-height: 72svh !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important;
      border-radius: 16px 16px 0 0 !important; padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
      transform: translateY(100%) !important; transform-origin: center bottom !important;
      transition: transform var(--dur-panel) var(--ease-out-quart), opacity var(--dur-micro) var(--ease-standard), visibility 0s linear var(--dur-panel) !important;
    }
    .ecm-info-card.is-open { transform: none !important; transition-delay: 0s !important; }
    .ecm-info-card::before { display: none !important; }
    .ecm-info-card .close { width: 44px !important; height: 44px !important; top: 6px !important; right: 6px !important; font-size: 18px !important; }
  }
}

/* ═══ Follow-up 2026-09-21 (2차) — 헤딩 램프(TC-13) · 터치 호버 게이팅(MOT-11) · 포커스 링(A11Y-13) ═══ */

/* MOT-11 — 터치 기기(hover 불가)에서 sticky hover 방지: 탭 후 남는 호버 상태를 기본값으로 되돌린다.
   (호버 규칙은 legacy 레이어 안이라 비레이어 일반 선언으로 덮인다) */
@media (hover: none) {
  .hero-cta:hover { gap: 10px; }
  .page-nav a:hover { gap: 10px; color: rgba(245,240,238,0.7); }
  .detail-light .page-nav a:hover, body.page-light .page-nav a:hover { color: rgba(31,26,27,0.66); }
  .faq-item summary:hover { color: var(--charcoal); }
  .footer-inline a:hover, .detail-footer a:hover { color: rgba(31,26,27,0.72); }
  .close-links a:hover { color: rgba(31,26,27,0.55); }
  .ecm-phase-card:hover {
    transform: none; background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.22);
    box-shadow: 0 12px 48px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -1px 0 rgba(255,255,255,0.05);
  }
  .record-card:hover, .card:hover, .card-lift:hover, .tp5-card:hover, .gs-card:hover { transform: none; }
  .mobile-menu a:hover, .mobile-parent-link:hover { color: rgba(31,26,27,0.8); }
  .mobile-menu a.mobile-sub:hover { color: rgba(31,26,27,0.72); }
  .mobile-social a:hover { color: rgba(31,26,27,0.6); }
  .ecm-pill:not(.core):not(.is-active):hover > span { color: rgba(245,240,238,0.8); }
  .ecm-pill.core:not(.is-active):hover > span { color: var(--color-brand); background: rgba(10,10,9,0.75); border-color: rgba(148,127,130,0.4); }
  .ecm-info-card .close:hover { color: rgba(245,240,238,0.55); border-color: rgba(245,240,238,0.22); background: transparent; }
  .ecm-phase-card .ph-anchor:hover { color: var(--color-brand-light); }
}

@layer mobilefix {
  /* A11Y-13 — 키보드 포커스 링 복원(전역 *:focus{outline:none}·인라인 !important를 덮음). :focus-visible 이므로 터치/마우스에는 안 보임 */
  a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible,
  input:focus-visible, select:focus-visible, textarea:focus-visible,
  .nav-lang-current:focus-visible, .lang-option:focus-visible,
  .inquiry-form input:focus-visible, .inquiry-form select:focus-visible, .inquiry-form textarea:focus-visible,
  .inquiry-dialog :is(input, select, textarea, button):focus-visible {
    outline: 2px solid var(--color-brand) !important; outline-offset: 2px !important;
  }

  @media (max-width: 768px) {
    /* TC-13 — 모바일 헤딩 램프: 히어로 40 · 섹션 32 · 디스플레이 문장 40 (환자 페이지는 자체 램프, .dp-container/.scene 한정) */
    .dp-container .detail-hero-title, .dp-container .proto-hero-title, .dp-container .hero-half-title {
      font-size: 40px !important; line-height: 1.15 !important; letter-spacing: -0.02em !important;
    }
    .scene .h-title { font-size: 36px !important; line-height: 1.15 !important; }
    .dp-container h2.proto-hero-title, .dp-container .sec-title, .dp-container .product-title, .dp-container .close-headline,
    .scene .gs-heading, .scene .close-headline {
      font-size: 32px !important; line-height: 1.2 !important; letter-spacing: -0.02em !important;
    }
    .scene .fulltype-heading { font-size: 40px !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; }
  }
}

/* Follow-up — 제품 상세 슬라이드(CA·ECM) 하단 여백: 인라인 padding-bottom 118px가 모바일 칩 목록 아래 빈 띠를 만듦 → 40px */
@layer mobilefix { @media (max-width: 768px) { .dp-slide--overflow > .dp-slide-scroll > .container { padding-bottom: 40px !important; } } }

/* ═══ Page transitions — cross-document View Transitions, mobile only (2026-09-22 world-class pass) ═══
   Opt-in lives here for the 28 styles.css pages (patient pages carry their own inline opt-in).
   Back/forward (iOS swipe-back) is skipped by the <head> pagereveal guard; reduced motion = no transition.
   The site nav is captured separately so it stays still while the page crossfades underneath. */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  body > nav { view-transition-name: cg-site-nav; }
  ::view-transition-group(cg-site-nav) { animation-duration: .3s; animation-timing-function: cubic-bezier(.2,0,0,1); }
  ::view-transition-old(root) { animation: .2s cubic-bezier(.4,0,1,1) both cg-vt-out; }
  ::view-transition-new(root) { animation: .42s cubic-bezier(.16,1,.3,1) both cg-vt-in; }
}
@keyframes cg-vt-out { to { opacity: 0; } }
@keyframes cg-vt-in { from { opacity: 0; transform: translateY(12px); } }

/* ═══ Mobile footer system — one layout for home (.footer-inline) and detail pages (.detail-footer) ═══
   2026-09-22 world-class pass · CSS-only (markup untouched, 4 languages). Stack: legal notice → social → links → ©.
   Colours are theme-aware (light: products/science/brand · dark: home S5, contact) and meet AA at their sizes.
   Lives in @layer mobilefix with !important so page-level inline styles cannot re-break it. */
@layer mobilefix {
  @media (max-width: 768px) {
    .footer-inline, .detail-footer {
      display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important;
      column-gap: 18px !important; row-gap: 0 !important;
      padding: 28px 20px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
      margin: 12px 0 0 !important; text-align: center !important;
      border-top: 1px solid rgba(31,26,27,0.08) !important;
    }
    .footer-inline .footer-sep-dot, .detail-footer .footer-sep-dot { display: none !important; }
    .footer-inline .footer-notice, .detail-footer .footer-notice {
      order: 0 !important; flex: 1 1 100% !important; display: block !important; max-width: 31em !important;
      margin: 0 auto 10px !important; padding: 0 !important; min-height: 0 !important;
      font-size: 13px !important; line-height: 1.65 !important; letter-spacing: -0.005em !important; opacity: 1 !important;
      color: rgba(31,26,27,0.7) !important; text-wrap: pretty;
    }
    .footer-inline .footer-social, .detail-footer .footer-social {
      order: 1 !important; flex: 1 1 100% !important; display: flex !important; justify-content: center !important; gap: 4px !important; margin: 2px 0 !important;
    }
    .footer-inline .footer-social a, .detail-footer .footer-social a { width: 44px !important; height: 44px !important; color: rgba(31,26,27,0.62) !important; }
    .footer-inline > a, .detail-footer > a, .footer-inline .cgc-settings-link, .detail-footer .cgc-settings-link {
      order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 44px !important; min-width: 44px !important;
      padding: 0 2px !important; font-size: 13px !important; line-height: 1 !important; letter-spacing: 0.02em !important;
      color: rgba(31,26,27,0.74) !important; background: none !important; border: 0 !important; text-decoration: none !important;
    }
    .footer-inline > span:not(.footer-notice):not(.footer-sep-dot), .detail-footer > span:not(.footer-notice):not(.footer-sep-dot) {
      order: 3 !important; flex: 1 1 100% !important; display: block !important; min-height: 0 !important;
      padding: 2px 0 0 !important; font-size: 12px !important; line-height: 1.6 !important; color: rgba(31,26,27,0.62) !important;
    }
    /* dark scenes (home S5, contact closing) */
    .scene-dark .footer-inline, [data-slide-theme="dark"] .detail-footer { border-top-color: rgba(245,240,238,0.1) !important; }
    .scene-dark .footer-inline .footer-notice, [data-slide-theme="dark"] .detail-footer .footer-notice { color: rgba(245,240,238,0.66) !important; }
    .scene-dark .footer-inline > a, .scene-dark .footer-inline .cgc-settings-link,
    [data-slide-theme="dark"] .detail-footer > a, [data-slide-theme="dark"] .detail-footer .cgc-settings-link,
    .scene-dark .footer-inline .footer-social a, [data-slide-theme="dark"] .detail-footer .footer-social a { color: rgba(245,240,238,0.76) !important; }
    .scene-dark .footer-inline > span:not(.footer-notice):not(.footer-sep-dot),
    [data-slide-theme="dark"] .detail-footer > span:not(.footer-notice):not(.footer-sep-dot) { color: rgba(245,240,238,0.56) !important; }
  }
}
/* home S5 closing + page-nav on dark (part of the mobile footer system) */
@layer mobilefix {
  @media (max-width: 768px) {
    #scene-cta .footer-inline { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; margin-top: 40px !important; }
    #scene-cta { justify-content: flex-start !important; padding-top: 18svh !important; }
    .close-links { flex-wrap: wrap !important; justify-content: center !important; column-gap: 14px !important; row-gap: 0 !important; margin-top: 4px !important; }
    .close-links .close-dot { display: none !important; }
    .close-links a { font-size: 12px !important; letter-spacing: 0.16em !important; }
    [data-slide-theme="dark"] .page-nav a { color: rgba(245,240,238,0.72) !important; }
  }
}

/* ═══ Mobile design tokens (≤768px) — 2026-09-22 world-class pass ═══
   Calibrated on 23 premium beauty/aesthetics sites measured at 390px (research/luxury/summary.json):
   gutter median ≈20px · body 14–16px · section titles 22–36px · hero 24–48px · captions 12–14px.
   CELLOGRAM is editorial-cinematic, so display sizes sit at the upper end; running text is raised to 15px (was 13–14px). */
@media (max-width: 768px) {
  :root {
    --m-gutter: 20px;
    --m-section-y: 96px;          /* vertical breathing room between major sections */
    --m-fs-hero: 38px;  --m-lh-hero: 1.18;
    --m-fs-h2: 28px;    --m-lh-h2: 1.25;
    --m-fs-h3: 20px;    --m-lh-h3: 1.35;
    --m-fs-lead: 17px;  --m-lh-lead: 1.65;
    --m-fs-body: 15px;  --m-lh-body: 1.7;    /* Korean running text (research: 15–16px, lh 1.65–1.75); en/ja/zh may use 1.6 */
    --m-fs-small: 13px;
    --m-fs-eyebrow: 12px; --m-ls-eyebrow: 0.18em;   /* 09-22: 11→12 — 럭셔리 22곳 대문자 라벨 중앙값 12px·최소 글자 12px */
    --m-radius: 12px;
    --m-ease-out: cubic-bezier(.16,1,.3,1);
    --m-dur-reveal: 650ms;
  }
}

/* 홈 가운데 정렬 라벨의 장식 대시 — 휴대폰에서 글자와 떨어져 왼쪽 끝에 떠 보여 숨김(브랜드 페이지와 같은 처리, 09-22) */
@media (max-width: 821px) {
  .sec-tag.s2-rev::before, .s3-head .sec-tag::before, .vmeta .sec-tag::before { display: none; }
}

/* ═══ 2026-09-23 모바일 점검 후속 (라이브 점검 보고서 QU57pJEt) ═══
   위 @layer mobilefix 블록 = legacy 의 !important 를 덮어야 하는 것만(선행 레이어의 important 가 이긴다).
   아래 비레이어 블록 = 일반 선언(비레이어 일반 선언이 레이어 일반 선언을 이긴다). */
@layer mobilefix {
  /* 일본어 제목: 문절(<wbr>) 단위로만 줄바꿈 — legacy 의 overflow-wrap:anywhere·line-break:auto 가 끝 가나 한 자를 떨어뜨리던 문제 */
  html[lang="ja"] :is(h1, h2, h3):has(wbr), html[lang^="zh"] :is(h1, h2, h3):has(wbr) { word-break: keep-all !important; line-break: strict !important; }
  /* 일본어 굵은 제목: 차단된 Noto Sans JP 대신 기기 폰트 최굵기(900)로 뭉개지던 문제 → 700 상한 */
  html[lang="ja"] .dp-container :is(h1, h2, h3) strong { font-weight: 700 !important; }   /* 상세 페이지만(홈 .scene 제목은 정상) */
  /* 일본어·중국어에는 기울임체를 쓰지 않는다(합성 사체로 한자가 기울어 보임) */
  html[lang="ja"] *, html[lang^="zh"] * { font-style: normal !important; }
  @media (max-width: 821px) {
    /* 홈 「설계에는 근거가 있습니다」: 제목·수치·버튼과 같이 왼쪽 정렬 */
    #scene-science .s4-body .gs-body { text-align: left !important; }
  }
  @media (max-width: 380px) {
    /* 좁은 폰(갤럭시 360·폴드 344·SE 375): 히어로 제목 40px 고정 → 화면 폭 비례(영문 브랜드 3줄·일본어 끝 글자 방지) */
    .dp-container .detail-hero-title, .dp-container .detail-hero .detail-hero-title, .dp-container .proto-hero-title, .dp-container .hero-half-title { font-size: min(40px, 9.4vw) !important; }
  }
  @media (max-width: 768px) {
    /* 과학 첫 화면: 헤더(--cg-nav-h)+섹션 메뉴 바(44)가 화면 위 100px 을 덮어 SEM 사진 윗부분(아이폰 15 에서 42px)이 가리던 것 → 사진 칸을 메뉴 바 아래에서 시작.
       페이지 인라인 mobilefix 의 #science{padding-top:var(--cg-nav-h)} 가 문서 순서상 뒤라서 html 접두로 특이도를 올림 */
    html #science { padding-top: calc(var(--cg-nav-h, 56px) + 44px) !important; }
  }
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* 아이폰 가로 회전 시 글자 자동 확대 방지 */
html[lang="ja"] { line-break: strict; }                              /* 일본어 금칙(줄 첫머리 ー·작은 가나 금지) */

/* 성분 카드: 영문·일본어 페이지에 한국어 부제(kr)가 뜨던 문제 — 이름은 이미 영문 */
html[lang="en"] .ecm-info-card .ing-kr, html[lang="ja"] .ecm-info-card .ing-kr { display: none; }

/* 홈 제품 링크: 글자 화살표(→)와 장식 꺾쇠(›)가 겹치던 것 — 꺾쇠 제거(데스크톱 포함) */
.gs-cta::after { display: none; }

/* 과학 첫 화면: 폰은 실제 SEM 사진(데스크톱은 three.js 구체 그대로) */
.m-sci1-photo, .m-sci1-cap { display: none; }

/* 과학 현미경 렌즈: SEM 사진 하단 장비 정보줄(mag·det·HFW)이 원 안에 걸리지 않게 — 사진 칸을 110%로, 아래 10%는 원 밖 */
.sz-layer img[alt^="sem-"] { height: 110%; }

@media (max-width: 821px) {
  /* 홈 수치 4칸: 「Non-porous」가 단어 중간(아이폰)·하이픈(갤럭시)에서 끊기던 것 — 한 줄, 폭 비례 */
  #scene-science .s4-row .num { font-size: clamp(24px, 7.2vw, 34px); white-space: nowrap; }
  #scene-science .s4-body .gs-body br { display: none; }
  /* 홈 두 제품 → 「설계에는 근거가」 사이 빈 화면 줄이기 */
  html.m-dive #scene-dual .s3-sticky { padding-bottom: 8vh; }
  #scene-science .s4-body { margin-top: 9vh; }
}

@media (max-width: 768px) {
  /* 과학 페이지 하단 문구: inline-flex 가 <strong> 앞뒤 띄어쓰기를 지워 「다음기록을」「nextrecordwith」 */
  .detail-cta-headline { display: inline-block; }
  /* 과학 첫 화면 사진 */
  #proto-sci1-canvas { display: none; }
  #protoSphereStage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
  .m-sci1-photo { display: block; width: min(54vw, 224px); aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(196,181,183,.22), 0 0 80px 6px rgba(148,127,130,.16); }
  .m-sci1-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.05); }
  .m-sci1-cap { display: block; margin: 0; font-family: var(--display); font-size: 12px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: rgba(245,240,238,.62); }
  /* 제품 사양표 줄 구분선: tr 의 0.5px 선을 아이폰(사파리)이 그리지 않음 → 칸 아래 1px */
  .product-specs-table tr { border-bottom: 0; }
  .product-specs-table td { border-bottom: 1px solid rgba(245,240,238,0.12); }
  [data-slide-theme="light"] .product-specs-table td, .scene-light .product-specs-table td, .detail-light .product-specs-table td { border-bottom-color: rgba(31,26,27,0.12); }
  /* 문의 폼 선택 칸: 아이폰에서 누르는 높이 22px → 44px */
  .inquiry-label select { min-height: 44px; }
}

/* 09-23: 일본어·중국어 약관 표 — 좁은 3열에서 「大韓民/国」「ロ/グ」처럼 글자 단위로 갈라지던 것 → 표만 옆으로 넘기기 */
@media (max-width: 480px) {
  html[lang="ja"] .legal-table, html[lang^="zh"] .legal-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html[lang="ja"] .legal-table :is(th, td), html[lang^="zh"] .legal-table :is(th, td) { min-width: 6.5em; }
}

/* 09-23: 현미경 캡션 한 단어 줄(「동일한 구 / 형태.」) 방지 */
.sz-cap, .m-sz-list .m-sz-cap { text-wrap: balance; }
/* 09-23: 폰 — 작은 모브 라벨 대비 4.5:1 이상(디자인 시스템 딥 모브 토큰) */
@media (max-width: 768px) {
  html .aside-eyebrow, html .stream-chapter-cat { color: var(--color-brand-deep); }   /* 문의 FAQ(밝은 바탕) */
}
@media (max-width: 821px) {
  #scene-science .s4-row .lbl { color: rgba(31,26,27,0.72); }                          /* 홈 수치 설명(밝은 바탕) */
}