/* 축소하지 못했습니다. 축소되지 않은 콘텐츠를 반환합니다.
(13,2314): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,4950): run-time error CSS1039: Token not allowed after unary operator: '-swiper-centered-offset-before'
(13,5079): run-time error CSS1039: Token not allowed after unary operator: '-swiper-centered-offset-after'
(13,5209): run-time error CSS1039: Token not allowed after unary operator: '-swiper-centered-offset-before'
(13,5335): run-time error CSS1039: Token not allowed after unary operator: '-swiper-centered-offset-after'
(13,5746): run-time error CSS1039: Token not allowed after unary operator: '-swiper-virtual-size'
(13,5861): run-time error CSS1039: Token not allowed after unary operator: '-swiper-virtual-size'
(13,5889): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,6001): run-time error CSS1039: Token not allowed after unary operator: '-swiper-navigation-size'
(13,6048): run-time error CSS1039: Token not allowed after unary operator: '-swiper-navigation-size'
(13,6101): run-time error CSS1039: Token not allowed after unary operator: '-swiper-navigation-size'
(13,6223): run-time error CSS1039: Token not allowed after unary operator: '-swiper-navigation-color'
(13,6253): run-time error CSS1039: Token not allowed after unary operator: '-swiper-theme-color'
(13,6497): run-time error CSS1039: Token not allowed after unary operator: '-swiper-navigation-size'
(13,8084): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-width'
(13,8121): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-size'
(13,8170): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-height'
(13,8208): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-size'
(13,8300): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-inactive-color'
(13,8360): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-inactive-opacity'
(13,8703): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-opacity'
(13,8757): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-color'
(13,8787): run-time error CSS1039: Token not allowed after unary operator: '-swiper-theme-color'
(13,9122): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-vertical-gap'
(13,9833): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-horizontal-gap'
(13,10645): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-color'
(13,10675): run-time error CSS1039: Token not allowed after unary operator: '-swiper-theme-color'
(13,12586): run-time error CSS1039: Token not allowed after unary operator: '-swiper-preloader-color'
(13,12615): run-time error CSS1039: Token not allowed after unary operator: '-swiper-theme-color'
(13,12891): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,12950): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(94,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(95,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(96,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(97,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(98,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(99,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(100,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(101,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(102,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(103,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(104,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(105,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(106,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(107,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(108,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(109,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(110,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(111,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(112,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(113,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(114,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(115,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(117,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(118,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(119,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(121,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(122,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(123,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(124,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(125,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(126,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(127,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(128,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(129,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(130,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(132,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(133,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(134,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(136,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(137,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(138,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(139,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(140,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(141,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(142,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(143,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(144,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(145,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(147,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(148,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(149,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(150,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(151,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(152,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(154,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(155,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(156,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(158,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(159,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(160,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(177,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(178,21): run-time error CSS1039: Token not allowed after unary operator: '-font-family-base'
(179,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-md'
(180,21): run-time error CSS1039: Token not allowed after unary operator: '-line-height-base'
(181,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(276,15): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(277,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(281,27): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(286,31): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(286,62): run-time error CSS1039: Token not allowed after unary operator: '-container-max'
(292,24): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(297,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(301,23): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(305,23): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(309,23): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(315,23): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(316,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(317,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-md'
(319,21): run-time error CSS1039: Token not allowed after unary operator: '-line-height-tight'
(329,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(334,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(335,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-3xl'
(337,21): run-time error CSS1039: Token not allowed after unary operator: '-line-height-tight'
(343,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(344,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xl'
(346,21): run-time error CSS1039: Token not allowed after unary operator: '-line-height-tight'
(352,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(353,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl'
(355,21): run-time error CSS1039: Token not allowed after unary operator: '-line-height-tight'
(360,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(361,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(363,21): run-time error CSS1039: Token not allowed after unary operator: '-line-height-tight'
(367,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(371,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(375,15): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(376,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(380,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(384,15): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(388,15): run-time error CSS1039: Token not allowed after unary operator: '-color-subtle'
(392,15): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(396,15): run-time error CSS1039: Token not allowed after unary operator: '-color-error'
(429,13): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(451,13): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(484,13): run-time error CSS1039: Token not allowed after unary operator: '-space-1'
(488,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(492,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(496,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(500,13): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(504,20): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(508,20): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(512,20): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(516,20): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(520,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(524,23): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(528,17): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(532,17): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(560,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(564,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(568,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(572,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(576,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(580,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(586,20): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(590,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(594,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface-soft'
(608,20): run-time error CSS1039: Token not allowed after unary operator: '-header-height'
(628,13): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(644,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(660,13): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(661,15): run-time error CSS1039: Token not allowed after unary operator: '-color-navy'
(674,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(678,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(687,20): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(694,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(712,15): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(713,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(714,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(750,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(783,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(796,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(815,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(830,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(851,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(857,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(881,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(882,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(883,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-xs'
(884,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(918,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(920,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(925,31): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(925,52): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(925,82): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(925,103): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(925,126): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(925,147): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(925,174): run-time error CSS1039: Token not allowed after unary operator: '-duration-fast'
(925,195): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(925,223): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(925,244): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(942,15): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(943,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-primary'
(949,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-primary-hover'
(954,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(955,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(956,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(961,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(962,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(967,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(968,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(969,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(975,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(983,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(989,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(1001,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1002,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-xs'
(1003,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1004,33): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(1004,54): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1004,77): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(1004,98): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1004,126): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(1004,147): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1107,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1108,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(1119,15): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1124,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(1125,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1130,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(1134,15): run-time error CSS1039: Token not allowed after unary operator: '-color-navy'
(1135,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(1145,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1146,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border-strong'
(1147,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1148,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1149,33): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(1149,54): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1149,82): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(1149,103): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1149,131): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(1149,152): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1159,15): run-time error CSS1039: Token not allowed after unary operator: '-color-subtle'
(1166,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1174,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1175,22): run-time error CSS1039: Token not allowed after unary operator: '-color-error'
(1180,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1188,15): run-time error CSS1039: Token not allowed after unary operator: '-color-subtle'
(1190,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1194,15): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(1195,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(1200,15): run-time error CSS1039: Token not allowed after unary operator: '-color-error'
(1204,15): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(1242,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-xs'
(1248,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1249,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(1265,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(1266,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1267,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(1286,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1287,31): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(1287,66): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(1295,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(1300,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1301,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1308,33): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1309,31): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1317,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(1318,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1335,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(1336,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(1343,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1344,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(1345,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(1349,15): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1350,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-primary'
(1355,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1356,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1357,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(1362,15): run-time error CSS1039: Token not allowed after unary operator: '-color-error'
(1363,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1368,15): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(1374,15): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(1380,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1381,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1382,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1388,15): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1389,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-primary'
(1395,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1396,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1397,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1406,15): run-time error CSS1039: Token not allowed after unary operator: '-color-error'
(1410,15): run-time error CSS1039: Token not allowed after unary operator: '-color-info'
(1414,15): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(1419,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1420,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1421,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1426,17): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1430,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(1431,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(1432,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl'
(1434,21): run-time error CSS1039: Token not allowed after unary operator: '-line-height-tight'
(1439,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1440,17): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(1442,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(1443,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1456,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1457,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1458,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1459,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1461,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1464,30): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(1464,51): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1464,79): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(1464,100): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1464,130): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(1464,151): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1469,22): run-time error CSS1039: Token not allowed after unary operator: '-product-accent-line'
(1470,32): run-time error CSS1039: Token not allowed after unary operator: '-product-accent-soft'
(1474,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1475,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1476,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1480,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1481,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1482,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1486,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1487,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1488,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1492,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1493,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1494,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1521,10): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1532,36): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1532,66): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1551,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1554,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl'
(1564,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(1584,15): run-time error CSS1039: Token not allowed after unary operator: '-product-accent'
(1585,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1612,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(1629,15): run-time error CSS1039: Token not allowed after unary operator: '-product-accent'
(1630,26): run-time error CSS1039: Token not allowed after unary operator: '-product-accent-line'
(1631,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(1637,33): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(1637,54): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1637,82): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(1637,103): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1637,130): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(1637,151): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1645,15): run-time error CSS1039: Token not allowed after unary operator: '-product-accent'
(1652,30): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(1652,51): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1657,22): run-time error CSS1039: Token not allowed after unary operator: '-product-accent'
(1658,31): run-time error CSS1039: Token not allowed after unary operator: '-product-accent-soft'
(1666,15): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1684,15): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1694,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(1706,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1707,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(1708,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1709,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(1711,30): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(1711,51): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1711,81): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(1711,102): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1711,130): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(1711,151): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1716,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(1730,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1738,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1753,23): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(1755,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1756,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(1757,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(1758,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1772,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1773,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(1774,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(1775,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1800,20): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1801,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1819,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(1821,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1827,30): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(1827,51): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1840,15): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1841,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(1842,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1850,15): run-time error CSS1039: Token not allowed after unary operator: '-color-subtle'
(1851,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-md'
(1858,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1859,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1864,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1870,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1876,15): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(1877,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(1890,13): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(1901,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1902,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1903,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(1904,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1910,15): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1912,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-primary'
(1917,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1924,15): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(1939,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1943,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1948,21): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1957,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1961,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(1962,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-xs'
(1963,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(1980,15): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(1999,17): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2000,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2001,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(2002,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(2003,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md'
(2015,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-xs'
(2016,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(2020,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2021,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(2028,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2029,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-xs'
(2039,15): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(2040,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(2045,31): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2049,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2092,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2095,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(2103,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(2111,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2124,15): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(2131,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(2132,20): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(2136,15): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(2141,15): run-time error CSS1039: Token not allowed after unary operator: '-color-error'
(2173,17): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2198,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(2199,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(2200,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg'
(2218,17): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2218,32): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2222,19): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2222,34): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2226,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(2227,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl'
(2244,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2247,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(2263,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(2271,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(2272,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-md'
(2286,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(2299,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2300,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(2301,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(2318,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2324,18): run-time error CSS1039: Token not allowed after unary operator: '-header-height'
(2324,41): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2325,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2326,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(2327,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(2328,17): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2335,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2336,23): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2344,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2345,20): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2346,21): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2347,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2348,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(2349,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl'
(2354,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2355,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xl'
(2366,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2376,13): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2382,13): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2383,15): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(2384,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(2389,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2393,23): run-time error CSS1039: Token not allowed after unary operator: '-space-16'
(2393,39): run-time error CSS1039: Token not allowed after unary operator: '-space-10'
(2399,23): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2400,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2401,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(2408,23): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2414,15): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(2415,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(2420,22): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(2424,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2425,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(2426,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xl'
(2431,17): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2432,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2433,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(2438,20): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2442,23): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2443,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(2444,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl'
(2449,20): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2450,15): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(2451,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(2458,13): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2468,13): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2469,20): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2475,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2476,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(2477,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(2485,17): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2486,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(2487,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2488,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2492,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(2493,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(2501,20): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2507,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(2531,13): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(2551,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(2628,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(2643,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(2650,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2689,20): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(2698,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2700,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(2701,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(2709,27): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2728,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(2738,15): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(2750,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2752,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(2753,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(2780,15): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(2814,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(2815,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(2816,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(2821,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(2821,60): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(2821,97): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(2821,132): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(2821,173): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(2838,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(2842,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2844,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(2859,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(2868,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2869,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2878,15): run-time error CSS1039: Token not allowed after unary operator: '-color-subtle'
(2882,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2893,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(2903,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(2903,62): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(2903,99): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(2903,134): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(2945,31): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2951,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2959,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(2981,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(2982,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-full'
(2983,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(2984,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(2989,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(2989,67): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(2989,97): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(2989,132): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(3003,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-base'
(3008,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3027,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3028,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3040,15): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(3052,15): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(3054,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3070,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3071,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3078,20): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3084,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3090,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(3096,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3097,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3098,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(3104,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3114,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(3119,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3135,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3147,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3160,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3165,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-muted'
(3170,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3171,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(3172,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(3180,17): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(3189,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(3190,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm'
(3196,15): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(3197,19): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs'
(3202,20): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(3232,22): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(3246,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(3259,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(3334,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3337,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(3341,26): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(3341,47): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(3341,75): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(3341,96): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(3341,124): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(3341,145): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(3341,172): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(3341,193): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(3353,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3354,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-primary'
(3365,33): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(3365,54): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(3365,82): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(3365,103): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(3365,131): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(3365,152): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(3369,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3379,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(3439,42): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(3485,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3508,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(3509,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3514,31): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(3514,52): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(3514,80): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(3514,101): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(3547,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(3654,31): run-time error CSS1039: Token not allowed after unary operator: '-duration-fast'
(3654,52): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(3654,82): run-time error CSS1039: Token not allowed after unary operator: '-duration-fast'
(3654,103): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(3654,131): run-time error CSS1039: Token not allowed after unary operator: '-duration-fast'
(3654,152): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(3654,179): run-time error CSS1039: Token not allowed after unary operator: '-duration-fast'
(3654,200): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(3668,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3669,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3678,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3693,26): run-time error CSS1039: Token not allowed after unary operator: '-duration-fast'
(3693,47): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(3693,75): run-time error CSS1039: Token not allowed after unary operator: '-duration-fast'
(3693,96): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(3693,123): run-time error CSS1039: Token not allowed after unary operator: '-duration-fast'
(3693,144): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(3698,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(3699,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(3705,30): run-time error CSS1039: Token not allowed after unary operator: '-duration-fast'
(3705,51): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(3759,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(3774,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(3799,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(3806,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(3813,15): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(3819,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(3822,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm'
(3827,15): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(3912,36): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(3912,70): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(3912,100): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(3982,15): run-time error CSS1039: Token not allowed after unary operator: '-color-error'
(4048,15): run-time error CSS1039: Token not allowed after unary operator: '-color-error'
(4077,32): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(4077,65): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(4084,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(4088,36): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(4088,67): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(4092,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(4118,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(4120,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(4124,15): run-time error CSS1039: Token not allowed after unary operator: '-color-success'
(4143,15): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(4191,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-primary'
(4195,36): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(4195,70): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(4195,104): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(4195,134): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(4200,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-primary-hover'
(4214,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(4215,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(4216,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(4303,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(4316,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(4349,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(4387,31): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(4387,52): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(4463,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(4470,30): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(4470,51): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(4474,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(4519,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(4520,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(4525,36): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(4525,72): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(4525,106): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(4525,140): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(4544,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(4652,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(4665,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(4706,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(4716,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(4725,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(4726,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(4732,33): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(4732,54): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(4732,82): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(4732,103): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(4736,15): run-time error CSS1039: Token not allowed after unary operator: '-color-subtle'
(4740,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(4750,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(4821,32): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(4821,68): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(4821,102): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(4821,136): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(4841,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(4842,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(4849,20): run-time error CSS1039: Token not allowed after unary operator: '-gradient-primary'
(4866,31): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(4895,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(4912,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(4987,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(4997,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(4998,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(5003,31): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5003,52): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5003,80): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5003,101): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5003,128): run-time error CSS1039: Token not allowed after unary operator: '-duration-fast'
(5003,149): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5037,33): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5037,54): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5037,82): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5037,103): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5037,126): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5037,147): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5073,31): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(5089,26): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5089,47): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5109,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(5113,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(5150,31): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5150,52): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5150,75): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5150,96): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5155,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(5162,26): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5162,47): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5162,74): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5162,95): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5166,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(5171,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(5191,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(5207,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(5216,45): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5216,76): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5228,34): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5340,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(5342,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(5348,30): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5348,51): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5348,79): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5348,100): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5348,128): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5348,149): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5365,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(5403,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(5415,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(5416,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(5501,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(5503,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(5533,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(5534,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(5546,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(5566,15): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(5574,33): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5574,54): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5574,82): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5574,103): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5574,131): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5574,152): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5582,26): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5582,47): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5582,74): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5582,95): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5582,120): run-time error CSS1039: Token not allowed after unary operator: '-duration-fast'
(5582,141): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5591,48): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5624,30): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5624,51): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5624,76): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5624,97): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5624,125): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5624,146): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5624,176): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(5624,197): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5628,50): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(5653,13): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(5662,17): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(5663,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(5668,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(5672,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(5703,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(5711,27): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5751,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(5764,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-700'
(5789,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(5846,31): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(5883,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5884,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5885,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5918,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(5919,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(5920,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(5921,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(5947,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(5957,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6009,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6013,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6018,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6036,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6041,32): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(6041,66): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(6041,102): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(6041,135): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(6054,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(6071,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6073,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(6075,39): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(6075,73): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(6075,107): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(6079,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6092,20): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(6093,39): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(6093,73): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(6093,107): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(6097,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6098,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6109,32): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(6110,33): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(6179,26): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6219,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6229,32): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(6230,33): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(6311,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6313,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(6323,18): run-time error CSS1039: Token not allowed after unary operator: '-header-height'
(6329,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(6338,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6362,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6379,27): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6482,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(6494,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6518,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6527,33): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(6570,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6571,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(6587,33): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(6592,18): run-time error CSS1039: Token not allowed after unary operator: '-header-height'
(6636,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6641,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6702,20): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6725,39): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(6725,68): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(6725,101): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(6730,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6731,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(6737,36): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(6753,37): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(6753,71): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(6753,107): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(6753,138): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(6753,171): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(6759,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6776,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6820,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6827,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6847,31): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6875,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6893,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(6947,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6951,37): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(6951,73): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(6956,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(6957,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(6981,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(6991,33): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(7050,40): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(7055,34): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(7055,68): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(7079,34): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(7079,67): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(7153,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(7154,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(7173,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(7195,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(7211,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(7220,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(7267,31): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(7267,62): run-time error CSS1039: Token not allowed after unary operator: '-container-max'
(7316,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(7361,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(7362,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(7393,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(7439,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(7441,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(7469,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(7470,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(7499,30): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(7562,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(7574,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(7596,20): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(7627,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(7644,15): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(7671,27): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(7710,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7805,24): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(7853,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(7957,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(7962,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(8009,33): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(8013,33): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(8417,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8418,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8527,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8528,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8529,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8530,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8531,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8535,25): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(8545,22): run-time error CSS1039: Token not allowed after unary operator: '-header-height'
(8561,15): run-time error CSS1039: Token not allowed after unary operator: '-header-height'
(8569,24): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(8578,30): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(8578,51): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(8578,78): run-time error CSS1039: Token not allowed after unary operator: '-duration-base'
(8578,99): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(8611,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(8635,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(8636,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(8637,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(8651,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-strong'
(8661,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(8663,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(8664,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(8672,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(8673,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(8674,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(8675,22): run-time error CSS1039: Token not allowed after unary operator: '-color-white'
(8679,17): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(8683,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(9034,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(9094,29): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(9124,19): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(9150,19): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(9151,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(9351,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9352,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9353,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9357,25): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(9404,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg'
(9408,19): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(9761,19): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(9778,19): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(9783,19): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(9787,21): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(9787,36): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(9837,24): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(10127,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10170,21): run-time error CSS1039: Token not allowed after unary operator: '-container-max'
(10171,25): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(10172,24): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(10188,21): run-time error CSS1039: Token not allowed after unary operator: '-container-max'
(10355,30): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(10356,26): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(10371,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10637,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10641,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10831,34): run-time error CSS1039: Token not allowed after unary operator: '-color-border'
(11518,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(11521,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(11814,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(11816,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(11862,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-line'
(11865,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(11881,24): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
(12119,24): run-time error CSS1039: Token not allowed after unary operator: '-container-padding'
 */
/**
 * Swiper 8.1.4
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2022 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: April 24, 2022
 */

@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
@charset "utf-8";

@font-face {
  font-family: "Pretendard";
  src: url(/Content/Renewal/fonts/Pretendard-Thin.woff2) format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url(/Content/Renewal/fonts/Pretendard-ExtraLight.woff2) format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url(/Content/Renewal/fonts/Pretendard-Light.woff2) format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url(/Content/Renewal/fonts/Pretendard-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url(/Content/Renewal/fonts/Pretendard-Medium.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url(/Content/Renewal/fonts/Pretendard-SemiBold.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url(/Content/Renewal/fonts/Pretendard-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url(/Content/Renewal/fonts/Pretendard-ExtraBold.woff2) format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url(/Content/Renewal/fonts/Pretendard-Black.woff2) format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Common Foundation
   ASP.NET MVC(CSHTML) partial migration friendly static publishing base.
   ========================================================================== */

:root {
  --color-primary: #6a5cff;
  --color-primary-600: #5b4bff;
  --color-primary-700: #3f2df0;
  --color-primary-soft: #f1efff;
  --color-primary-line: #d8d1ff;
  --color-accent-purple: #8b7cff;
  --color-accent-blue: #4f8cff;
  --color-navy: #1b1f3b;
  --color-text: #1b1f3b;
  --color-text-strong: #0d1321;
  --color-muted: #667085;
  --color-subtle: #9aa4b2;
  --color-white: #fff;
  --color-bg: #f8f9f6;
  --color-surface: #e7eaf3;
  --color-surface-soft: #fbfbff;
  --color-border: #e7eaf3;
  --color-border-strong: #cfd6e6;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ff4444;
  --color-info: #3b82f6;

  --gradient-primary: #6a5cff;
  --gradient-primary-hover: #5b4bff;
  --gradient-blue: #4f8cff;

  --font-family-base: "Pretendard", -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;
  --font-size-3xl: 40px;
  --line-height-tight: 1.25;
  --line-height-base: 1.6;

  --container-max: 1200px;
  --container-padding: 24px;
  --header-height: 76px;

  --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-16: 64px;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 16px rgba(27, 31, 59, 0.05);
  --shadow-md: 0 16px 36px rgba(44, 39, 120, 0.08);
  --shadow-lg: 0 28px 70px rgba(44, 39, 120, 0.13);

  --duration-fast: 150ms;
  --duration-base: 220ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  background: var(--color-white);
  word-break: keep-all;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  margin: 0;
  color: inherit;
  font: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

textarea {
  resize: vertical;
}

::selection {
  color: var(--color-white);
  background: var(--color-primary);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.container {
  width: min(100% - calc(var(--container-padding) * 2), var(--container-max));
  margin-inline: auto;
}

.container-fluid {
  width: 100%;
  padding-inline: var(--container-padding);
}

.page {
  min-height: 100vh;
  background: var(--color-white);
}

.section {
  padding-block: var(--space-12);
}

.section-sm {
  padding-block: var(--space-8);
}

.page-heading {
  margin-bottom: var(--space-8);
  text-align: center;
}

.eyebrow {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-primary);
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: var(--line-height-tight);
  text-transform: uppercase;
}

.eyebrow::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: 12px auto 0;
  background: var(--color-primary);
}

.h1,
h1 {
  color: var(--color-text-strong);
  font-size: var(--font-size-3xl);
  font-weight: 800;
  line-height: var(--line-height-tight);
  letter-spacing: 0;
}

.h2,
h2 {
  color: var(--color-text-strong);
  font-size: var(--font-size-2xl);
  font-weight: 800;
  line-height: var(--line-height-tight);
  letter-spacing: 0;
}

.h3,
h3 {
  color: var(--color-text-strong);
  font-size: var(--font-size-xl);
  font-weight: 800;
  line-height: var(--line-height-tight);
}

.h4,
h4 {
  color: var(--color-text-strong);
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: var(--line-height-tight);
}

.body-lg {
  font-size: var(--font-size-lg);
}

.body-sm {
  font-size: var(--font-size-sm);
}

.caption {
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

.text-primary {
  color: var(--color-primary) !important;
}

.text-muted {
  color: var(--color-muted) !important;
}

.text-subtle {
  color: var(--color-subtle) !important;
}

.text-success {
  color: var(--color-success) !important;
}

.text-error {
  color: var(--color-error) !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.fw-400 {
  font-weight: 400 !important;
}

.fw-500 {
  font-weight: 500 !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.fw-800 {
  font-weight: 800 !important;
}

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.auto-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.layout-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--space-6);
  align-items: start;
}

.flex {
  display: flex !important;
}

.inline-flex {
  display: inline-flex !important;
}

.items-center {
  align-items: center !important;
}

.items-start {
  align-items: flex-start !important;
}

.justify-between {
  justify-content: space-between !important;
}

.justify-center {
  justify-content: center !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.gap-1 {
  gap: var(--space-1) !important;
}

.gap-2 {
  gap: var(--space-2) !important;
}

.gap-3 {
  gap: var(--space-3) !important;
}

.gap-4 {
  gap: var(--space-4) !important;
}

.gap-6 {
  gap: var(--space-6) !important;
}

.mt-2 {
  margin-top: var(--space-2) !important;
}

.mt-4 {
  margin-top: var(--space-4) !important;
}

.mt-6 {
  margin-top: var(--space-6) !important;
}

.mt-8 {
  margin-top: var(--space-8) !important;
}

.mb-4 {
  margin-bottom: var(--space-4) !important;
}

.mb-6 {
  margin-bottom: var(--space-6) !important;
}

.p-4 {
  padding: var(--space-4) !important;
}

.p-6 {
  padding: var(--space-6) !important;
}

.w-100 {
  width: 100% !important;
}

.hide {
  display: none !important;
}

.show {
  display: block !important;
}

.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.radius-sm {
  border-radius: var(--radius-sm) !important;
}

.radius-md {
  border-radius: var(--radius-md) !important;
}

.radius-lg {
  border-radius: var(--radius-lg) !important;
}

.shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

.shadow-md {
  box-shadow: var(--shadow-md) !important;
}

.border {
  border: 1px solid var(--color-border) !important;
}

.divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
}

.surface {
  background: var(--color-surface);
}

.surface-soft {
  background: var(--color-surface-soft);
}

@charset "utf-8";

/* ==========================================================================
   Common UI Components
   Class-based components intended for HTML and future CSHTML partials.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header-height);
  padding: 0;
  border-bottom: 1px solid transparent;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.site-header.is-scrolled {
  border-bottom-color: rgba(126, 126, 160, 0.16);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px rgba(13, 19, 33, 0.04);
}

.site-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: var(--space-6);
  padding: 0 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  line-height: 1;
}

.logo-text {
  color: var(--color-primary);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-shadow: 0 6px 14px rgba(91, 75, 255, 0.12);
}

.logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.gnb {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  color: var(--color-navy);
  font-weight: 600;
}

.site-actions {
  gap: 22px;
  margin-left: auto;
}

.gnb-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  gap: var(--space-2);
}

.site-action-link {
  color: var(--color-text-strong);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.site-action-divider {
  width: 1px;
  height: 22px;
  background: var(--color-border);
}

.site-cart-link {
  position: relative;
  justify-content: center;
  width: 36px;
  color: var(--color-text-strong);
}

.site-cart-link .ui-icon {
  width: 26px;
  height: 26px;
}

.cart-count {
  position: absolute;
  top: 1px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  color: var(--color-white);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.header-signup {
  min-width: 88px;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 14px;
}

.site-footer {
  margin-top: 56px;
  padding: 42px 0 34px;
  border-top: 1px solid #eef0f6;
  background: linear-gradient(180deg, #fbfbff 0%, #ffffff 100%);
}

.site-footer-inner {
  display: block;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 64px;
  align-items: start;
  padding-bottom: 24px;
  border-bottom: 1px solid #e3e6ee;
}

.footer-logo {
  display: inline-flex;
  color: var(--color-primary);
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1;
}

.footer-info-list {
  display: grid;
  gap: 6px;
  margin-top: 22px;
  color: #4b5368;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.32;
}

.footer-info-list div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
}

.footer-info-list dt,
.footer-info-list dd {
  margin: 0;
}

.footer-info-list dt::after {
  content: " :";
}

.footer-cs {
  color: var(--color-text-strong);
  text-align: left;
}

.footer-cs-label {
  display: block;
  font-size: 16px;
  font-weight: 650;
}

.footer-cs-phone {
  display: block;
  margin-top: 16px;
  color: var(--color-primary);
  font-size: 32px;
  font-weight: 750;
  letter-spacing: 0.02em;
  line-height: 1;
}

.footer-cs-time {
  margin-top: 16px;
  color: #4b5368;
  font-size: 14px;
  line-height: 1.35;
}

.footer-kakao-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  color: var(--color-text-strong);
  font-size: 15px;
  font-weight: 650;
}

.footer-kakao-icon {
  display: block;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.footer-kakao-arrow {
  color: var(--color-text-muted);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 22px;
  color: #4b5368;
  font-size: 14px;
  line-height: 1.4;
}

.footer-policy {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--color-text-strong);
  font-size: 14px;
  font-weight: 600;
}

.footer-policy span {
  color: var(--color-text-muted);
  font-weight: 400;
}

.icon-btn.mobile-menu {
  display: none;
}

.mobile-header-actions {
  display: none;
}

.mobile-menu-content {
  display: none;
}

.mobile-header-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: var(--color-text-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-white);
}

.mobile-header-action svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.mobile-header-cart svg {
  width: 23px;
  height: 23px;
}

.mobile-header-action .cart-count {
  top: 6px;
  right: 5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 26px;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.btn:hover {
  transform: none;
}

.btn:disabled,
.btn.is-disabled {
  color: #fff;
  background: #d8d2f8;
  border-color: #d8d2f8;
  pointer-events: none;
  transform: none;
}

.btn-primary {
  color: var(--color-white);
  background: var(--gradient-primary);
  box-shadow: none;
}

.btn-primary:hover,
.btn-primary.is-active {
  background: var(--gradient-primary-hover);
  box-shadow: none;
}

.btn-outline {
  color: var(--color-primary);
  background: var(--color-white);
  border-color: var(--color-primary);
}

.btn-outline:hover,
.btn-outline.is-active {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: none;
}

.btn-light {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-color: var(--color-primary-soft);
}

.btn-text {
  min-height: auto;
  padding: 0;
  color: var(--color-primary);
  background: transparent;
  border: 0;
}

.btn-sm {
  min-height: 36px;
  padding-inline: 16px;
  font-size: var(--font-size-sm);
}

.btn-lg {
  min-height: 64px;
  padding-inline: 32px;
  font-size: var(--font-size-lg);
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  color: #566078;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-white);
  transition: border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}

.ui-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.ui-icon-menu {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h16v2H4V7Zm0 4h16v2H4v-2Zm0 4h16v2H4v-2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h16v2H4V7Zm0 4h16v2H4v-2Zm0 4h16v2H4v-2Z'/%3E%3C/svg%3E");
}

.ui-icon-cart {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 19a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 .001 4A2 2 0 0 0 17 19ZM6.2 5l.35 2H21l-2.1 8.4A2 2 0 0 1 16.96 17H7.9a2 2 0 0 1-1.97-1.66L3.98 4H1V2h4.66l.52 3h.02Zm.7 4 1.03 6h9.03L18.46 9H6.9Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 19a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 .001 4A2 2 0 0 0 17 19ZM6.2 5l.35 2H21l-2.1 8.4A2 2 0 0 1 16.96 17H7.9a2 2 0 0 1-1.97-1.66L3.98 4H1V2h4.66l.52 3h.02Zm.7 4 1.03 6h9.03L18.46 9H6.9Z'/%3E%3C/svg%3E");
}

.ui-icon-search {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 3a7.5 7.5 0 0 1 5.95 12.06l4.24 4.25-1.41 1.41-4.25-4.24A7.5 7.5 0 1 1 10.5 3Zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 3a7.5 7.5 0 0 1 5.95 12.06l4.24 4.25-1.41 1.41-4.25-4.24A7.5 7.5 0 1 1 10.5 3Zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Z'/%3E%3C/svg%3E");
}

.ui-icon-trash {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3h6l1 2h5v2h-2l-1.2 14H6.2L5 7H3V5h5l1-2Zm1.24 2h3.52l-.5-1h-2.52l-.5 1ZM7 7l1.03 12h7.94L17 7H7Zm3 3h2v6h-2v-6Zm4 0h2v6h-2v-6Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3h6l1 2h5v2h-2l-1.2 14H6.2L5 7H3V5h5l1-2Zm1.24 2h3.52l-.5-1h-2.52l-.5 1ZM7 7l1.03 12h7.94L17 7H7Zm3 3h2v6h-2v-6Zm4 0h2v6h-2v-6Z'/%3E%3C/svg%3E");
}

.ui-icon-lock {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 9h2v12H5V9h2V7a5 5 0 0 1 10 0v2Zm-8 0h6V7a3 3 0 0 0-6 0v2Zm-2 2v8h10v-8H7Zm4 2h2v4h-2v-4Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 9h2v12H5V9h2V7a5 5 0 0 1 10 0v2Zm-8 0h6V7a3 3 0 0 0-6 0v2Zm-2 2v8h10v-8H7Zm4 2h2v4h-2v-4Z'/%3E%3C/svg%3E");
}

.ui-icon-eye {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5c5.2 0 8.5 4.4 9.6 6.2l.5.8-.5.8C20.5 14.6 17.2 19 12 19s-8.5-4.4-9.6-6.2L1.9 12l.5-.8C3.5 9.4 6.8 5 12 5Zm0 2c-3.8 0-6.4 3-7.8 5 1.4 2 4 5 7.8 5s6.4-3 7.8-5C18.4 10 15.8 7 12 7Zm0 2.5A2.5 2.5 0 1 1 12 14a2.5 2.5 0 0 1 0-5Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5c5.2 0 8.5 4.4 9.6 6.2l.5.8-.5.8C20.5 14.6 17.2 19 12 19s-8.5-4.4-9.6-6.2L1.9 12l.5-.8C3.5 9.4 6.8 5 12 5Zm0 2c-3.8 0-6.4 3-7.8 5 1.4 2 4 5 7.8 5s6.4-3 7.8-5C18.4 10 15.8 7 12 7Zm0 2.5A2.5 2.5 0 1 1 12 14a2.5 2.5 0 0 1 0-5Z'/%3E%3C/svg%3E");
}

.ui-icon-arrow {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13.2 5.3 5.7 5.7H3v2h15.9l-5.7 5.7 1.4 1.4L22.7 12l-8.1-8.1-1.4 1.4Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13.2 5.3 5.7 5.7H3v2h15.9l-5.7 5.7 1.4 1.4L22.7 12l-8.1-8.1-1.4 1.4Z'/%3E%3C/svg%3E");
}

.ui-icon-filter {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4h18l-7 8.2V20l-4 2v-9.8L3 4Zm4.3 2 4.7 5.5v7.2l.1-.1v-7.1L16.7 6H7.3Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4h18l-7 8.2V20l-4 2v-9.8L3 4Zm4.3 2 4.7 5.5v7.2l.1-.1v-7.1L16.7 6H7.3Z'/%3E%3C/svg%3E");
}

.ui-icon-chevron-down {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 15.4-6.7-6.7 1.4-1.4 5.3 5.3 5.3-5.3 1.4 1.4-6.7 6.7Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 15.4-6.7-6.7 1.4-1.4 5.3 5.3 5.3-5.3 1.4 1.4-6.7 6.7Z'/%3E%3C/svg%3E");
}

.ui-icon-grid {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h6v6H4V4Zm2 2v2h2V6H6Zm8-2h6v6h-6V4Zm2 2v2h2V6h-2ZM4 14h6v6H4v-6Zm2 2v2h2v-2H6Zm8-2h6v6h-6v-6Zm2 2v2h2v-2h-2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h6v6H4V4Zm2 2v2h2V6H6Zm8-2h6v6h-6V4Zm2 2v2h2V6h-2ZM4 14h6v6H4v-6Zm2 2v2h2v-2H6Zm8-2h6v6h-6v-6Zm2 2v2h2v-2h-2Z'/%3E%3C/svg%3E");
}

.ui-icon-list {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h4v4H4V5Zm6 1h10v2H10V6ZM4 10h4v4H4v-4Zm6 1h10v2H10v-2ZM4 15h4v4H4v-4Zm6 1h10v2H10v-2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h4v4H4V5Zm6 1h10v2H10V6ZM4 10h4v4H4v-4Zm6 1h10v2H10v-2ZM4 15h4v4H4v-4Zm6 1h10v2H10v-2Z'/%3E%3C/svg%3E");
}

.ui-icon-gamepad {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.3 8h7.4a5.3 5.3 0 0 1 4.9 3.3l1.1 2.8a4 4 0 0 1-6.7 4l-1.6-1.6h-2.8L9 18.1a4 4 0 0 1-6.7-4l1.1-2.8A5.3 5.3 0 0 1 8.3 8Zm0 2a3.3 3.3 0 0 0-3.1 2.1l-1.1 2.8a2 2 0 0 0 3.3 2l2.2-2.4h4.8l2.2 2.4a2 2 0 0 0 3.3-2l-1.1-2.8a3.3 3.3 0 0 0-3.1-2.1H8.3ZM7 12h2v-1h2v1h1v2h-1v1H9v-1H7v-2Zm8.5-.6a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2Zm2.4 2.3a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.3 8h7.4a5.3 5.3 0 0 1 4.9 3.3l1.1 2.8a4 4 0 0 1-6.7 4l-1.6-1.6h-2.8L9 18.1a4 4 0 0 1-6.7-4l1.1-2.8A5.3 5.3 0 0 1 8.3 8Zm0 2a3.3 3.3 0 0 0-3.1 2.1l-1.1 2.8a2 2 0 0 0 3.3 2l2.2-2.4h4.8l2.2 2.4a2 2 0 0 0 3.3-2l-1.1-2.8a3.3 3.3 0 0 0-3.1-2.1H8.3ZM7 12h2v-1h2v1h1v2h-1v1H9v-1H7v-2Zm8.5-.4a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2Zm2.4 2.3a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2Z'/%3E%3C/svg%3E");
}

.ui-icon-play-circle {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3a9 9 0 1 1 0 18 9 9 0 0 1 0-18Zm0 2a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm-2 3.8 6 3.2-6 3.2V8.8Zm2 3.3v1.8l1.7-.9-1.7-.9Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3a9 9 0 1 1 0 18 9 9 0 0 1 0-18Zm0 2a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm-2 3.8 6 3.2-6 3.2V8.8Zm2 3.3v1.8l1.7-.9-1.7-.9Z'/%3E%3C/svg%3E");
}

.ui-icon-tag {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.6 13.6 11.4 4.4A2 2 0 0 0 10 3.8H4.8a1 1 0 0 0-1 1V10c0 .5.2 1 .6 1.4l9.2 9.2a2 2 0 0 0 2.8 0l4.2-4.2a2 2 0 0 0 0-2.8ZM15 19.2 5.8 10V5.8H10l9.2 9.2L15 19.2ZM8 8.8a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.6 13.6 11.4 4.4A2 2 0 0 0 10 3.8H4.8a1 1 0 0 0-1 1V10c0 .5.2 1 .6 1.4l9.2 9.2a2 2 0 0 0 2.8 0l4.2-4.2a2 2 0 0 0 0-2.8ZM15 19.2 5.8 10V5.8H10l9.2 9.2L15 19.2ZM8 8.8a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Z'/%3E%3C/svg%3E");
}

.ui-icon-globe {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm7.7 9h-3.1a15 15 0 0 0-1.1-5.1A8 8 0 0 1 19.7 11ZM12 4c.8 1 2.2 3.2 2.5 7h-5c.3-3.8 1.7-6 2.5-7ZM4.3 13h3.1c.1 1.9.5 3.6 1.1 5.1A8 8 0 0 1 4.3 13Zm3.1-2H4.3a8 8 0 0 1 4.2-5.1A15 15 0 0 0 7.4 11ZM12 20c-.8-1-2.2-3.2-2.5-7h5c-.3 3.8-1.7 6-2.5 7Zm3.5-1.9c.6-1.5 1-3.2 1.1-5.1h3.1a8 8 0 0 1-4.2 5.1Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm7.7 9h-3.1a15 15 0 0 0-1.1-5.1A8 8 0 0 1 19.7 11ZM12 4c.8 1 2.2 3.2 2.5 7h-5c.3-3.8 1.7-6 2.5-7ZM4.3 13h3.1c.1 1.9.5 3.6 1.1 5.1A8 8 0 0 1 4.3 13Zm3.1-2H4.3a8 8 0 0 1 4.2-5.1A15 15 0 0 0 7.4 11ZM12 20c-.8-1-2.2-3.2-2.5-7h5c-.3 3.8-1.7 6-2.5 7Zm3.5-1.9c.6-1.5 1-3.2 1.1-5.1h3.1a8 8 0 0 1-4.2 5.1Z'/%3E%3C/svg%3E");
}

.ui-icon-headset {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3a8 8 0 0 0-8 8v4a3 3 0 0 0 3 3h2v-7H6a6 6 0 0 1 12 0h-3v7h3v1h-5v2h5a2 2 0 0 0 2-2v-1a3 3 0 0 0 2-2.83V11a8 8 0 0 0-8-8ZM7 13v3a1 1 0 0 1-1-1v-2h1Zm11 3h-1v-3h1v3Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3a8 8 0 0 0-8 8v4a3 3 0 0 0 3 3h2v-7H6a6 6 0 0 1 12 0h-3v7h3v1h-5v2h5a2 2 0 0 0 2-2v-1a3 3 0 0 0 2-2.83V11a8 8 0 0 0-8-8ZM7 13v3a1 1 0 0 1-1-1v-2h1Zm11 3h-1v-3h1v3Z'/%3E%3C/svg%3E");
}

.ui-icon-external-link {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 3h7v7h-2V6.4l-7.3 7.3-1.4-1.4L17.6 5H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 3h7v7h-2V6.4l-7.3 7.3-1.4-1.4L17.6 5H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/%3E%3C/svg%3E");
}

.icon-btn:hover,
.icon-btn.is-active {
  color: var(--color-primary);
  border-color: var(--color-primary-line);
  background: #fff;
}

.icon-btn .count {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding-inline: 6px;
  color: var(--color-white);
  font-size: 11px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

.form-group {
  display: grid;
  gap: var(--space-2);
}

.form-label {
  color: var(--color-navy);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}

.textarea {
  min-height: 112px;
  padding-block: 16px;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-subtle);
}

.input:focus,
.select:focus,
.textarea:focus,
.input-focus {
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: 0 0 0 2px rgba(106, 92, 255, 0.08);
}

.input-error,
.form-group.is-error .input,
.form-group.is-error .textarea {
  color: var(--color-text);
  border-color: var(--color-error);
}

.input-success,
.form-group.is-success .input {
  color: var(--color-text);
  border-color: #22c55e;
}

.input:disabled,
.select:disabled,
.textarea:disabled,
.input-disabled {
  color: var(--color-subtle);
  background: #f6f7fa;
  border-color: var(--color-border);
}

.input-message {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.input-message.error {
  color: var(--color-error);
}

.input-message.success {
  color: var(--color-success);
}

.input-wrap {
  position: relative;
  width: 100%;
}

.input-wrap .input {
  padding-left: 52px;
  padding-right: 58px;
}

.input-wrap-right .input {
  padding-left: 18px;
}

.input-wrap .input-icon {
  position: absolute;
  top: 50%;
  left: 18px;
  color: #69728a;
  transform: translateY(-50%);
  pointer-events: none;
}

.input-wrap .input-action {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.input-wrap .icon-btn.input-action {
  width: 36px;
  height: 36px;
  color: #667085;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
}

.input-wrap .icon-btn.input-action:hover,
.input-wrap .icon-btn.input-action.is-active {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.select {
  appearance: none;
  padding-right: 46px;
  background-image: linear-gradient(45deg, transparent 50%, #4d5873 50%), linear-gradient(135deg, #4d5873 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.check,
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.check input,
.radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.check-mark,
.radio-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid #a9b1c4;
  background: var(--color-white);
  transition: background var(--duration-base), border-color var(--duration-base);
}

.check-mark {
  border-radius: 4px;
}

.radio-mark {
  border-radius: var(--radius-pill);
}

.check input:checked + .check-mark,
.radio input:checked + .radio-mark {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.check input:checked + .check-mark::after {
  content: "";
  width: 10px;
  height: 6px;
  border-bottom: 2px solid var(--color-white);
  border-left: 2px solid var(--color-white);
  transform: rotate(-45deg) translateY(-1px);
}

.radio input:checked + .radio-mark::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
}

.check input:disabled + .check-mark,
.radio input:disabled + .radio-mark {
  opacity: 0.5;
}

.badge,
.chip,
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  gap: 6px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.badge {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-line);
}

.badge-sale {
  color: var(--color-white);
  background: var(--gradient-primary);
  border-color: transparent;
}

.badge-sale-soft {
  color: var(--color-primary);
  background: var(--color-white);
  border-color: var(--color-primary-line);
  box-shadow: none;
}

.badge-live {
  color: var(--color-error);
  background: var(--color-white);
  border-color: #ff9b9b;
}

.badge-event {
  color: var(--color-info);
  background: #e9f2ff;
  border-color: transparent;
}

.badge-success {
  color: var(--color-success);
  background: #e9f8ef;
  border-color: transparent;
}

.chip {
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: none;
}

.chip-active,
.chip.is-active {
  color: var(--color-white);
  background: var(--gradient-primary);
  border-color: transparent;
}

.tag {
  min-height: 28px;
  color: var(--color-primary);
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

.tag-status {
  border-color: transparent;
  background: #eee9ff;
}

.tag-down {
  color: var(--color-error);
}

.tag-up {
  color: var(--color-info);
}

.tag-muted {
  color: var(--color-muted);
  background: #f6f7fb;
}

.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: 0 10px 28px rgba(27, 31, 59, 0.03);
}

.card-body {
  padding: var(--space-6);
}

.card-title {
  margin-bottom: var(--space-4);
  color: var(--color-text-strong);
  font-size: var(--font-size-xl);
  font-weight: 800;
  line-height: var(--line-height-tight);
}

.info-box {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  color: #27324a;
  border: 1px solid var(--color-primary-line);
  border-radius: var(--radius-sm);
  background: #fbfaff;
}

.product-card-grid {
  max-width: 1120px;
  gap: 16px;
  margin-inline: auto;
}

.product-card {
  position: relative;
  overflow: hidden;
  --product-accent: var(--color-primary);
  --product-accent-line: var(--color-primary-line);
  --product-accent-soft: rgba(91, 75, 255, 0.14);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-white);
  box-shadow: 0 10px 26px rgba(27, 31, 59, 0.04);
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--product-accent-line);
  box-shadow: 0 14px 30px var(--product-accent-soft);
}

.product-card-orange {
  --product-accent: #f97316;
  --product-accent-line: #fed7aa;
  --product-accent-soft: rgba(249, 115, 22, 0.14);
}

.product-card-teal {
  --product-accent: #0f9b9f;
  --product-accent-line: #b8ecec;
  --product-accent-soft: rgba(15, 155, 159, 0.14);
}

.product-card-purple {
  --product-accent: #6a2cff;
  --product-accent-line: #d8c8ff;
  --product-accent-soft: rgba(106, 44, 255, 0.14);
}

.product-card-blue {
  --product-accent: #2f6bff;
  --product-accent-line: #c9d7ff;
  --product-accent-soft: rgba(47, 107, 255, 0.14);
}

.product-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  aspect-ratio: 1 / 0.72;
  padding: 0;
  background: #f5f6ff;
  overflow: hidden;
}

.product-card-fade .product-thumb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 1;
  height: 64px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.68) 58%,
    var(--color-white) 100%
  );
}

.product-thumb img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 17px 17px 0 0;
  transition: transform 320ms var(--ease-out), filter 320ms var(--ease-out);
}

.product-card:hover .product-thumb img {
  transform: none;
  filter: saturate(1.01);
}

.product-thumb-image {
  padding: 0;
  background: transparent;
}

.product-thumb-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(72%, 220px);
  aspect-ratio: 1 / 0.72;
  color: var(--color-primary);
  font-size: 42px;
  font-weight: 900;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 0 1px rgba(91, 75, 255, 0.08);
}

.product-info {
  padding: 14px 18px 16px;
}

.product-name {
  color: var(--color-text-strong);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}

.product-desc {
  margin-top: 6px;
  color: #202637;
  font-size: 13px;
  line-height: 1.4;
}

.product-price {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 4px;
  margin: 16px 0 0;
  padding-bottom: 13px;
  color: var(--product-accent);
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.product-badge-label,
.product-price-label {
  font-size: 1em;
  font-weight: 700;
}

.product-badge-value,
.product-price-value {
  font-size: 1.08em;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.product-price em,
.product-badge em {
  font-style: normal;
  font-size: 1.08em;
  font-weight: 900;
}

.product-price strong {
  color: var(--color-text-strong);
  font-size: 19px;
  font-weight: 800;
  white-space: nowrap;
}

.product-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.24em;
  min-height: 30px;
  padding: 0 12px;
  color: var(--product-accent);
  border: 1px solid var(--product-accent-line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.015em;
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.product-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  color: var(--product-accent);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.product-link span {
  transition: transform var(--duration-base) var(--ease-out);
}

.product-card:hover .product-badge {
  transform: translateY(-1px);
  border-color: var(--product-accent);
  box-shadow: 0 6px 14px var(--product-accent-soft);
}

.product-card:hover .product-link span {
  transform: translateX(4px);
}

.product-card-dark {
  color: var(--color-white);
  background: #263f98;
  border-color: transparent;
}

.product-card-dark .product-thumb {
  background: #06143a;
}

.product-card-dark .product-thumb-image {
  background: transparent;
}

.product-card-dark .product-name,
.product-card-dark .product-price,
.product-card-dark .product-desc,
.product-card-dark .product-link,
.product-card-dark .product-price strong {
  color: var(--color-white);
}

.product-card-dark .product-price {
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

.promo-widget-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.promo-widget {
  position: relative;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  overflow: hidden;
  min-height: 126px;
  padding: 18px 54px 18px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.promo-widget:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary-line);
  box-shadow: 0 14px 30px rgba(68, 55, 190, 0.11);
}

[data-card-link-url]:focus-visible {
  outline: 3px solid rgba(111, 92, 246, .65);
  outline-offset: 3px;
}

.promo-widget-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background: #f4f1ff;
}

.promo-widget-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.promo-widget-body {
  min-width: 0;
}

.promo-widget-mark {
  color: #0b101f;
  font-size: 32px;
  font-weight: 900;
}

.promo-widget-kicker {
  width: fit-content;
  margin-bottom: var(--space-2);
  padding: 5px 10px;
  color: var(--color-primary);
  border: 1px solid var(--color-primary-line);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  box-shadow: none;
  font-size: 12px;
  font-weight: 800;
}

.promo-widget-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 24px;
  margin-bottom: 8px;
  padding: 0 10px;
  color: var(--color-primary);
  border: 1px solid var(--color-primary-line);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.promo-widget-title {
  color: #050505;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
}

.promo-widget-desc {
  margin-top: 4px;
  color: #4d5567;
  font-size: 13px;
  font-weight: 500;
}

.promo-widget-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: var(--space-3);
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 800;
}

.promo-widget-price .price-origin {
  font-size: 12px;
}

.promo-widget-price strong {
  color: #050505;
  font-size: 17px;
  font-weight: 900;
}

.promo-widget-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 12px;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 700;
}

.promo-widget-link span {
  transition: transform var(--duration-base) var(--ease-out);
}

.promo-widget:hover .promo-widget-link span {
  transform: translateX(4px);
}

.promo-widget-sale {
  position: absolute;
  top: 18px;
  right: 18px;
  min-width: 42px;
  padding: 5px 9px;
  color: var(--color-white);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.price-origin {
  color: var(--color-subtle);
  font-size: var(--font-size-md);
  font-weight: 400;
  text-decoration: line-through;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.table {
  min-width: 720px;
  background: var(--color-white);
}

.table th,
.table td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.table th {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  font-weight: 700;
  background: #fbfcff;
}

.table tr:last-child td {
  border-bottom: 0;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: 36px;
}

.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding-inline: 12px;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-weight: 700;
}

.page-link:hover,
.page-link.is-active {
  color: var(--color-white);
  border-color: transparent;
  background: var(--gradient-primary);
}

.tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
}

.tab-btn {
  position: relative;
  min-height: 52px;
  padding: 0 32px;
  color: var(--color-muted);
  font-weight: 700;
}

.tab-btn::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: transparent;
}

.tab-btn.is-active {
  color: var(--color-primary);
}

.tab-btn.is-active::after {
  background: var(--color-primary);
}

.tab-panel {
  display: none;
  padding-top: var(--space-6);
}

.tab-panel.is-active {
  display: block;
}

.accordion {
  display: grid;
  gap: var(--space-3);
}

.accordion-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-white);
}

.accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  text-align: left;
  font-weight: 700;
}

.accordion-body {
  display: none;
  padding: 0 18px 18px;
  color: var(--color-muted);
}

.accordion-item.is-active .accordion-body {
  display: block;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  display: none;
  min-width: 180px;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
}

.dropdown.is-active .dropdown-menu {
  display: block;
}

.dropdown-item {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-sm);
}

.dropdown-item:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.breadcrumb {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: #f6f7fb;
}

.breadcrumb-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item {
  border-left: 1px solid var(--color-border);
}

.breadcrumb-item.is-active {
  color: var(--color-text);
}

.toast-container {
  position: fixed;
  top: 92px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 220;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(126, 126, 160, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 36px rgba(13, 19, 33, 0.12);
  opacity: 0;
  pointer-events: auto;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.is-active {
  opacity: 1;
  transform: translateY(0);
}

.toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 900;
  background: var(--color-primary-soft);
}

.toast-content {
  min-width: 0;
}

.toast-title {
  color: var(--color-text-strong);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.toast-text {
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.toast-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  color: var(--color-muted);
  background: transparent;
  font-size: 18px;
  line-height: 1;
}

.toast-close:hover {
  color: var(--color-text-strong);
  background: var(--color-surface);
}

.toast-success .toast-icon {
  color: var(--color-success);
  background: rgba(34, 197, 94, 0.1);
}

.toast-error .toast-icon {
  color: var(--color-error);
  background: rgba(255, 68, 68, 0.1);
}

.toast-warning .toast-icon {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}

@media (max-width: 640px) {
  .toast-container {
    top: 76px;
    right: 16px;
    bottom: auto;
    left: 16px;
    transform: none;
    width: auto;
  }

  .toast {
    padding: 14px;
    border-radius: 12px;
  }
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(13, 19, 33, 0.48);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    visibility 0s linear 0.22s;
}

.modal.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* 계정정보 입력처럼 페이지 전용 모달 위에서도 공통 안내·확인 모달이 항상 보이게 한다. */
#renewalAlertModal,
#renewalConfirmModal {
  z-index: 2200;
}

.modal-dialog {
  width: min(100%, 480px);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.22s ease;
}

.modal.is-active .modal-dialog {
  transform: translateY(0) scale(1);
}

.modal-dialog-sm {
  width: min(100%, 420px);
}

.modal-header,
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
}

.modal-body {
  padding: 0 var(--space-6) var(--space-6);
}

.modal-title {
  color: var(--color-text-strong);
  font-size: var(--font-size-xl);
  font-weight: 800;
}

.modal-message {
  padding: 34px 32px 28px;
  text-align: center;
}

.modal-message-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 50%;
  color: var(--color-primary);
  font-size: 24px;
  font-weight: 800;
  background: var(--color-primary-soft);
}

.modal-message-icon .ui-icon {
  width: 26px;
  height: 26px;
  background: currentColor;
}

.modal-message-icon.is-success {
  color: #fff;
  background: linear-gradient(135deg, #7461ef 0%, #5842e3 100%);
  box-shadow: 0 10px 24px rgba(91, 70, 224, .28);
}

.modal-message-title {
  color: var(--color-text-strong);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.35;
}

.modal-message-text {
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  line-height: 1.6;
}

.modal-action-footer {
  justify-content: center;
  gap: 10px;
  padding: 0 32px 32px;
}

.modal-action-footer .btn {
  flex: 1;
  min-height: 46px;
  max-width: 160px;
  border-radius: var(--radius-sm);
}

.modal-action-footer.is-single .btn {
  max-width: 220px;
}

.quantity {
  display: inline-grid;
  grid-template-columns: 42px 56px 42px;
  min-height: 40px;
  width: max-content;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

.quantity button,
.quantity input {
  min-width: 0;
  border: 0;
  text-align: center;
  background: transparent;
}

.quantity button {
  color: #3f4962;
  font-size: 20px;
}

.quantity input {
  border-inline: 1px solid var(--color-border);
  font-weight: 700;
}

.summary-card {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  padding: var(--space-6);
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  color: #27324a;
}

.summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-strong);
  font-size: var(--font-size-xl);
  font-weight: 800;
}

.summary-total strong {
  color: var(--color-primary);
  font-size: var(--font-size-2xl);
}

.guide-shell {
  background: #fff;
}

.guide-top {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
}

.guide-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  gap: var(--space-6);
}

.guide-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.guide-nav a:hover {
  color: var(--color-primary);
}

.guide-hero {
  padding-block: var(--space-16) var(--space-10);
  text-align: center;
}

.guide-kicker {
  display: inline-flex;
  margin-bottom: var(--space-3);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.guide-hero h1 {
  margin-bottom: var(--space-3);
}

.guide-hero p {
  max-width: 720px;
  margin-inline: auto;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

.guide-section {
  margin-block: var(--space-8);
}

.guide-title {
  margin-bottom: var(--space-4);
  color: var(--color-text-strong);
  font-size: var(--font-size-2xl);
  font-weight: 800;
}

.guide-panel {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.9);
}

.guide-subsection {
  margin-top: var(--space-6);
}

.guide-subtitle {
  margin-bottom: var(--space-4);
  color: var(--color-text-strong);
  font-size: var(--font-size-xl);
  font-weight: 800;
}

.guide-note {
  margin-top: var(--space-3);
  color: var(--color-muted);
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

.guide-inline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.guide-wrap {
  flex-wrap: wrap;
}

.guide-stack {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.guide-panel-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.guide-panel-item {
  display: grid;
  align-content: start;
  justify-items: start;
  min-height: 148px;
  padding: var(--space-5);
  gap: var(--space-4);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.guide-panel-item-title {
  color: var(--color-text-strong);
  font-size: var(--font-size-xs);
  font-weight: 800;
}

.guide-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-3);
}

.guide-inline-actions .btn {
  min-height: 40px;
  padding-inline: 18px;
  font-size: var(--font-size-sm);
}

.guide-toast-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.guide-panel-item .input,
.guide-panel-item .select,
.guide-panel-item .textarea,
.guide-panel-item .input-wrap {
  width: min(100%, 340px);
  justify-self: center;
}

.guide-panel-item .quantity {
  justify-self: center;
}

.guide-brand {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

.guide-brand-text-logo {
  display: inline-flex;
  font-size: 34px;
  line-height: 1;
}

.guide-brand-logo {
  max-width: 220px;
  height: auto;
  object-fit: contain;
}

.guide-brand-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   Main Page
   ========================================================================== */

.main-page {
  background: linear-gradient(180deg, #fbfbff 0%, #fff 56%, #fbfbff 100%);
}

.main-page .site-header {
  background: rgba(251, 251, 255, 0.94);
}

.main-page .site-header-inner {
  box-shadow: none;
}

.main-hero {
  padding: 28px 0 26px;
}

.hero-banner {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  border: 1px solid rgba(216, 209, 255, 0.52);
  border-radius: 26px;
  box-shadow: 0 18px 50px rgba(91, 75, 255, 0.08);
}

.home-hero-swiper {
  height: 400px;
  border-radius: inherit;
}

.home-hero-swiper .swiper-wrapper {
  height: 400px;
}

.home-hero-slide {
  position: relative;
  display: block;
  height: 400px;
}

.hero-banner-media {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-banner-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-service-list {
  position: absolute;
  right: 84px;
  bottom: 50px;
  left: 430px;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  gap: 14px;
}

.hero-service-card {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--color-text-strong);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  transition: color 0.2s ease, transform 0.2s ease;
}

.hero-service-card img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  padding: 14px;
  border-radius: 18px;
  background: var(--color-white);
  object-fit: contain;
  box-shadow: 0 12px 24px rgba(65, 52, 154, 0.11);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.hero-service-card:hover {
  color: var(--color-primary);
  transform: translateY(-3px);
}

.hero-service-card:hover img {
  box-shadow: 0 16px 30px rgba(82, 69, 219, 0.18);
}

.hero-controls {
  position: absolute;
  bottom: 48px;
  left: 116px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-pagination {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
}

.hero-line {
  display: block;
  flex: 0 0 auto;
  width: 23px;
  height: 2px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: rgba(13, 19, 33, 0.16);
  cursor: pointer;
  opacity: 1;
}

.hero-line.is-active {
  background: var(--color-text-strong);
}

.hero-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-text-strong);
  font-size: 15px;
  line-height: 1;
}

.home-product-empty {
  margin-top: 24px;
  padding: 36px 20px;
  border: 1px dashed var(--color-border);
  border-radius: 16px;
  background: #fbfbff;
  text-align: center;
}

.main-section {
  padding: 42px 0;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.section-head h2 {
  color: var(--color-text-strong);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.section-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
}

.section-more span,
.support-card-head > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-text-strong);
}

.main-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.popular-product-grid {
  max-width: 1160px;
  gap: 28px;
  margin-inline: auto;
}

.product-card-feature {
  background: #263f98;
}

.product-card-feature .product-info {
  background: #263f98;
}

.product-card-feature .product-name,
.product-card-feature .product-desc,
.product-card-feature .product-price,
.product-card-feature .product-link {
  color: var(--color-white);
}

.product-card-feature .product-price {
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

.section-head-product {
  align-items: flex-end;
}

.section-head-product h2 {
  margin-bottom: 24px;
}

.main-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.mobile-more-actions {
  display: none;
  justify-content: center;
  margin-top: 22px;
}

.mobile-more-button {
  width: min(100%, 370px);
  min-height: 46px;
  gap: 8px;
  padding-inline: 24px;
  border-radius: 8px;
  border-color: var(--color-primary-line);
  background: var(--color-white);
  color: var(--color-primary-700);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
  transition: transform var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}

.mobile-more-button::after {
  content: "";
  display: inline-flex;
  width: 16px;
  height: 16px;
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.3 5.3 1.4-1.4L18.8 12l-8.1 8.1-1.4-1.4 6.7-6.7-6.7-6.7Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.3 5.3 1.4-1.4L18.8 12l-8.1 8.1-1.4-1.4 6.7-6.7-6.7-6.7Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
  transition: transform var(--transition-base);
}

.mobile-more-button:hover {
  border-color: var(--color-primary);
  background: #fbfaff;
  color: var(--color-primary-700);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(106, 92, 255, 0.12);
}

.mobile-more-button.is-active::after {
  transform: rotate(-90deg);
}

.main-search {
  position: relative;
  display: block;
  width: min(100%, 260px);
  height: 42px;
  margin: 0 0 2px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 24px rgba(50, 45, 120, 0.05);
}

.main-search input {
  width: 100%;
  height: 100%;
  padding: 0 44px 0 20px;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: inherit;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  outline: 0;
}

.main-search input::placeholder {
  color: var(--color-subtle);
}

.main-search input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(106, 92, 255, 0.12);
}

.main-search .ui-icon {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--color-text-strong);
  pointer-events: none;
}

.main-promo-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.main-promo-grid .promo-widget {
  transition: opacity var(--transition-base), transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.main-promo-grid.is-active .promo-widget:nth-child(n+6) {
  animation: mobileMoreFade 0.24s ease both;
}

@keyframes mobileMoreFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-actions {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

.main-board-section {
  padding-top: 58px;
}

.board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}

.board-panel {
  min-width: 0;
}

.faq-panel {
  padding-left: 52px;
  border-left: 1px solid var(--color-border);
}

.board-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.board-panel h2 {
  margin: 0;
  color: var(--color-text-strong);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
}

.board-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}

.board-more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-text-strong);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(13, 19, 33, 0.04);
  transition: transform var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

.board-more-link span[aria-hidden="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background: transparent;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform var(--transition-base);
}

.board-more-link:hover {
  border-color: rgba(106, 92, 255, 0.34);
  color: var(--color-primary);
  transform: translateX(2px);
  box-shadow: 0 10px 22px rgba(106, 92, 255, 0.1);
}

.board-more-link:hover span[aria-hidden="true"] {
  transform: translate(2px, -1px);
}

.notice-list {
  display: grid;
}

.notice-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 15px;
  font-weight: 500;
}

.notice-list a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-list time {
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 500;
}

.new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  color: var(--color-white);
  border-radius: 4px;
  background: var(--color-primary);
  font-size: 10px;
  font-weight: 800;
  vertical-align: 1px;
}

.mini-faq-list {
  display: grid;
}

.mini-faq-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 52px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 15px;
  font-weight: 500;
}

.guide-summary-card {
  max-width: 360px;
  margin-top: var(--space-5);
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.guide-doc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.guide-doc-card {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.guide-doc-label {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.guide-doc-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-strong);
}

.guide-doc-card p {
  margin: 0 0 16px;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.guide-doc-list,
.guide-page-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-doc-list li {
  position: relative;
  padding-left: 14px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.55;
}

.guide-doc-list li::before {
  position: absolute;
  top: 10px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-primary);
  content: "";
}

.guide-page-list li {
  display: grid;
  grid-template-columns: 86px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.guide-page-list a {
  color: var(--color-primary);
  font-weight: 700;
}

.guide-page-list span {
  color: var(--color-text-muted);
}

.swatch {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

.swatch-color {
  height: 84px;
}

.swatch-info {
  padding: var(--space-3);
}

.swatch-info strong,
.swatch-info span {
  display: block;
}

.swatch-info strong {
  color: var(--color-text-strong);
  font-size: var(--font-size-sm);
  font-weight: 800;
}

.swatch-info span {
  margin-top: 2px;
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.guide-color-grid {
  margin-top: var(--space-5);
}

.guide-type-sample .eyebrow::after {
  margin-left: 0;
}

.guide-product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1160px;
  margin-inline: auto;
  gap: 28px;
}

/* ==========================================================================
   Auth Pages
   ========================================================================== */

.auth-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #fbfbff 0%, #fff 42%, #fbfbff 100%);
}

.auth-page .site-footer {
  margin-top: 24px;
}

.auth-main {
  display: flex;
  justify-content: center;
  padding: 32px var(--container-padding) 22px;
}

.auth-panel {
  width: min(100%, 500px);
}

.auth-heading {
  margin-bottom: 20px;
  text-align: center;
}

.auth-eyebrow {
  display: block;
  color: var(--color-primary-700);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
}

.auth-eyebrow::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin: 8px auto 12px;
  background: var(--color-primary-700);
}

.auth-heading h1 {
  color: #111827;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
}

.auth-form {
  display: grid;
  gap: 11px;
}

/* 회원가입 서버 검증 메시지 */
.auth-validation-summary,
.auth-validation-message {
  color: #ff3045;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.auth-validation-summary {
  padding: 11px 14px;
  border: 1px solid rgba(255, 48, 69, 0.24);
  border-radius: 8px;
  background: rgba(255, 48, 69, 0.05);
}

.auth-validation-summary ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth-validation-summary.validation-summary-valid,
.auth-validation-summary[hidden],
.auth-validation-message.field-validation-valid {
  display: none;
}

.auth-validation-message {
  display: block;
  padding: 0 12px;
}

.auth-validation-message-center {
  text-align: center;
}

.auth-field-group {
  display: grid;
  gap: 8px;
}

.signup-email-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 10px;
  align-items: stretch;
}

.signup-email-code-row[hidden] {
  display: none;
}

.email-verify-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  background: #fff;
  color: var(--color-primary-700);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  transition: color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.email-verify-button:hover,
.email-verify-button.is-complete {
  background: #fbfaff;
  box-shadow: 0 10px 24px rgba(91, 75, 255, 0.1);
  transform: translateY(-1px);
}

.email-verify-button.is-complete {
  color: #fff;
  border-color: var(--color-primary);
  background: var(--gradient-primary);
}

.auth-field {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 46px;
  border: 1px solid #ccd3df;
  border-radius: 8px;
  background: #fff;
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}

.auth-field:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(106, 92, 255, 0.08);
}

.auth-field.is-error {
  border-color: #ff3045;
}

.auth-field.is-valid .auth-field-state {
  display: inline-block;
  color: var(--color-primary-700);
}

.auth-field.is-readonly {
  background: rgba(248, 249, 251, 0.64);
}

.auth-field input,
.auth-field select {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 44px;
  padding: 0 40px 0 50px;
  color: #111827;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  outline: 0;
}

.auth-field select {
  appearance: none;
  cursor: pointer;
}

.auth-field input::placeholder {
  color: #8a93a8;
  opacity: 1;
}

.auth-field.is-readonly input {
  color: #8a93a8;
}

.auth-field-with-hint {
  gap: 8px;
  padding-right: 18px;
}

.auth-field-with-hint input {
  flex: 1 1 0;
  min-width: 0;
  padding-right: 0;
  width: auto;
}

.auth-inline-hint {
  color: #9aa3b5;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.verified-fields {
  display: grid;
  gap: 11px;
  animation: verifiedFieldsIn 220ms var(--ease-out);
}

.verified-fields[hidden] {
  display: none;
}

@keyframes verifiedFieldsIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-field-icon {
  position: absolute;
  top: 50%;
  left: 17px;
  width: 16px;
  height: 16px;
  color: #566078;
  transform: translateY(-50%);
  pointer-events: none;
}

.auth-field-action,
.auth-field-state {
  position: absolute;
  top: 50%;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: #566078;
  transform: translateY(-50%);
}

.auth-field-action:hover,
.auth-field-action.is-active {
  color: var(--color-primary);
}

.auth-field-state {
  display: none;
  pointer-events: none;
}

.auth-select-field .auth-field-state {
  display: inline-block;
}

/* 회원가입 유입경로 직접입력 */
.signup-route-direct[hidden] {
  display: none;
}

.identity-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  gap: 8px;
  color: var(--color-primary-700);
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  transition: background var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.identity-button:hover,
.identity-button.is-complete {
  background: #fbfaff;
  box-shadow: 0 10px 28px rgba(91, 75, 255, 0.08);
}

.identity-button .ui-icon {
  width: 19px;
  height: 19px;
}

.auth-info-box {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  color: #111827;
  border: 1px solid #e1defa;
  border-radius: 8px;
  background: #f8f6ff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
}

.auth-info-box .ui-icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--color-primary-700);
}

.password-rule-list {
  display: none;
  gap: 4px;
  padding: 0 0 1px 14px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.auth-field-group.has-feedback .password-rule-list {
  display: grid;
}

.password-rule-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ff3045;
}

.password-rule-list li.is-pass {
  color: #16a34a;
}

.rule-mark {
  width: 18px;
  font-size: 15px;
  line-height: 1;
  text-align: center;
}

.auth-error-message {
  display: none;
  padding-left: 14px;
  color: #ff3045;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.auth-field-group.has-error .auth-error-message {
  display: block;
}

.terms-section {
  display: grid;
  gap: 10px;
}

.terms-section h2 {
  color: #111827;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.terms-box {
  overflow: hidden;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #fff;
}

.terms-item + .terms-item {
  border-top: 1px solid #d8dee8;
}

.terms-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 0 14px 0 16px;
  color: #111827;
  font-size: 13px;
  font-weight: 500;
}

.terms-label {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  cursor: pointer;
}

.terms-label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.terms-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid #7b8497;
  border-radius: 4px;
  background: #fff;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.terms-check::after {
  content: "";
  display: none;
  width: 8px;
  height: 4px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}

.terms-label input:checked + .terms-check {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: 0 4px 10px rgba(106, 92, 255, 0.2);
}

.terms-label input:checked + .terms-check::after {
  display: block;
}

.terms-label:hover .terms-check {
  border-color: var(--color-primary);
}

.terms-label input:focus-visible + .terms-check {
  box-shadow: 0 0 0 3px rgba(106, 92, 255, 0.12);
}

.terms-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: #566078;
  border-radius: 6px;
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.terms-toggle:hover,
.terms-toggle.is-active {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.terms-toggle .ui-icon {
  width: 18px;
  height: 18px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.terms-toggle.is-active .ui-icon {
  transform: rotate(90deg);
}

.terms-detail {
  display: none;
  padding: 0 14px 14px 44px;
  background: #fbfcff;
}

.terms-item.is-active .terms-detail {
  display: block;
}

.terms-row.is-error {
  background: rgba(255, 48, 69, 0.05);
}

.terms-row.is-error .terms-check {
  border-color: #ff3045;
}

.terms-detail-scroll {
  max-height: 118px;
  overflow-y: auto;
  padding: 10px 12px;
  color: #4b5568;
  border: 1px solid #e4e8f0;
  border-radius: 7px;
  background: #fff;
  font-size: 12px;
  line-height: 1.65;
}

.terms-detail-scroll p + p {
  margin-top: 8px;
}

/* 기존 회원가입 이용약관 원문 */
.terms-legacy-text {
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  white-space: pre-wrap;
  word-break: keep-all;
}

.terms-detail-link {
  display: inline-flex;
  margin-top: 10px;
  color: var(--color-primary-700);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.terms-validation-message {
  padding: 0 14px 10px 44px;
}

.terms-detail-scroll::-webkit-scrollbar {
  width: 6px;
}

.terms-detail-scroll::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background: #cfd6e6;
}

.terms-detail-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* 정책 전문 페이지 */
.policy-main {
  padding: 72px 0 120px;
}

.policy-container {
  max-width: 1120px;
}

.policy-header {
  margin-bottom: 36px;
  text-align: center;
}

.policy-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--color-primary-700);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.policy-header h1 {
  color: var(--color-text);
  font-size: 40px;
  line-height: 1.25;
}

.policy-header p {
  margin-top: 12px;
  color: var(--color-muted);
  font-size: 16px;
}

.policy-card {
  padding: 48px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.policy-content {
  margin: 0;
  color: var(--color-muted);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.85;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .policy-main {
    padding: 40px 0 72px;
  }

  .policy-header {
    margin-bottom: 24px;
  }

  .policy-header h1 {
    font-size: 30px;
  }

  .policy-header p {
    font-size: 14px;
  }

  .policy-card {
    padding: 24px 20px;
    border-radius: 18px;
  }

  .policy-content {
    font-size: 14px;
    line-height: 1.75;
    word-break: break-word;
  }
}

.login-main {
  padding-top: 44px;
}

.login-panel {
  width: min(100%, 420px);
}

.login-heading {
  margin-bottom: 24px;
}

.login-intro {
  color: #1f2937;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

.login-panel .auth-field,
.login-panel .signup-submit,
.login-panel .auth-divider {
  width: min(100%, 400px);
  margin-inline: auto;
}

.sns-login-list {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 28px;
}

.sns-login-form {
  display: inline-flex;
  margin: 0;
}

.sns-login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  box-shadow: 0 10px 22px rgba(31, 27, 58, 0.08);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), filter 180ms var(--ease-out);
}

.sns-login-button:hover {
  box-shadow: 0 14px 28px rgba(31, 27, 58, 0.14);
  filter: saturate(1.05);
  transform: translateY(-2px);
}

.sns-login-naver {
  color: #fff;
  background: linear-gradient(135deg, #23cf12 0%, #0eb900 100%);
  font-size: 28px;
  font-weight: 900;
}

.sns-login-kakao {
  color: #2d2417;
  background: #fee500;
  font-size: 12px;
  font-weight: 900;
}

.sns-login-kakao span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 25px;
  border-radius: 50%;
  background: #2d2417;
  color: #fee500;
  line-height: 1;
}

.auth-divider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-block: 34px 24px;
  color: #7b8497;
  font-size: 16px;
  font-weight: 700;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  background: #d8dee8;
}

.login-form {
  gap: 16px;
}

.login-security-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 400px);
  min-height: 65px;
  margin-inline: auto;
  overflow: hidden;
}

.login-security-message {
  width: 100%;
  padding: 12px 14px;
  color: var(--color-error);
  border: 1px solid #ffcaca;
  border-radius: 10px;
  background: #fff4f4;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.login-security-message.is-local-bypass {
  color: #7c5d12;
  border-color: #f1d58a;
  background: #fff9e8;
}

.login-submit {
  margin-top: 8px;
}

.auth-link-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
  color: #111827;
  font-size: 15px;
  font-weight: 600;
}

.auth-link-group > span {
  color: #c6ccda;
  font-weight: 400;
}

.find-password-main {
  padding-top: 44px;
}

.find-password-panel {
  width: min(100%, 420px);
}

.find-password-heading .auth-eyebrow {
  font-size: 13px;
}

.find-password-heading .auth-eyebrow::after {
  width: 26px;
}

.find-password-intro {
  margin-bottom: 28px;
}

.find-password-form {
  gap: 16px;
}

.find-password-captcha {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(100%, 400px);
  margin-inline: auto;
  color: var(--color-error);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.find-password-captcha > div {
  max-width: 100%;
}

.find-password-panel .auth-field,
.find-password-panel .signup-submit {
  width: min(100%, 400px);
  margin-inline: auto;
}

.find-password-submit {
  margin-top: 8px;
}

.find-password-link {
  margin-top: 26px;
}

.back-login-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4b5568;
  transition: color 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.back-login-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  border-radius: 50%;
  background: currentColor;
  transform: translateX(0);
  transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out);
}

.back-login-link:hover {
  color: var(--color-primary);
  transform: translateX(-2px);
}

.back-login-link:hover .back-login-icon {
  opacity: 0.86;
  transform: translateX(-2px);
}

/* 인증 결과 및 비밀번호 재설정 화면 */
.auth-result-main {
  padding-top: 64px;
}

.auth-result-panel {
  width: min(100%, 460px);
  text-align: center;
}

.auth-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 24px;
  color: var(--color-primary);
  border-radius: 50%;
  background: var(--color-primary-soft);
}

.auth-result-icon.is-success {
  color: var(--color-success);
  background: #edfff4;
}

.auth-result-icon .ui-icon {
  width: 32px;
  height: 32px;
  background: currentColor;
}

.auth-result-heading {
  margin-bottom: 18px;
}

body.renewal-page.layout-variant-v3 .auth-result-panel .register-completion-heading {
  margin-bottom: 42px;
}

.auth-result-description {
  color: var(--color-muted);
  font-size: 16px;
  line-height: 1.75;
}

.auth-result-actions {
  width: min(100%, 400px);
  margin: 32px auto 0;
}

.auth-result-actions .signup-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-result-actions--dual {
  display: grid;
  gap: 12px;
}

.reset-password-form .auth-field-group,
.reset-password-form .signup-submit {
  width: min(100%, 400px);
  margin-inline: auto;
}

@media (max-width: 768px) {
  .auth-result-main {
    padding-top: 40px;
  }

  .auth-result-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
  }

  .auth-result-description {
    font-size: 14px;
  }
}

.signup-submit {
  width: 100%;
  min-height: 46px;
  margin-top: 0;
  border-radius: 8px;
  background: var(--gradient-primary);
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(106, 92, 255, 0.18);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background 180ms var(--ease-out), filter 180ms var(--ease-out);
}

.signup-submit:hover,
.signup-submit.is-active {
  background: var(--gradient-primary-hover);
  box-shadow: 0 14px 28px rgba(106, 92, 255, 0.26);
  filter: saturate(1.04);
  transform: translateY(-2px);
}

.signup-submit:active {
  box-shadow: 0 8px 18px rgba(106, 92, 255, 0.2);
  transform: translateY(0);
}

.auth-result-actions .auth-result-secondary,
.auth-result-actions .auth-result-secondary:hover,
.auth-result-actions .auth-result-secondary.is-active {
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  background: var(--color-white);
  box-shadow: none;
  filter: none;
}

.ui-icon-mail {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5h18v14H3V5Zm2 2v.4l7 4.38 7-4.38V7H5Zm14 2.76-7 4.38-7-4.38V17h14V9.76Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5h18v14H3V5Zm2 2v.4l7 4.38 7-4.38V7H5Zm14 2.76-7 4.38-7-4.38V17h14V9.76Z'/%3E%3C/svg%3E");
}

.ui-icon-key {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 9a5 5 0 1 0 4.58 7H14v2h3v-2h2v-2h3V9H7Zm0 2h13v1h-3v2h-2v2h-2v-2H9.58A3 3 0 1 1 7 11Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 9a5 5 0 1 0 4.58 7H14v2h3v-2h2v-2h3V9H7Zm0 2h13v1h-3v2h-2v2h-2v-2H9.58A3 3 0 1 1 7 11Z'/%3E%3C/svg%3E");
}

.ui-icon-check {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.2 16.6-4.1-4.1-1.4 1.4 5.5 5.5L21 7.6l-1.4-1.4L9.2 16.6Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.2 16.6-4.1-4.1-1.4 1.4 5.5 5.5L21 7.6l-1.4-1.4L9.2 16.6Z'/%3E%3C/svg%3E");
}

.ui-icon-user {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.4 0-8 2.5-8 5.5V21h2v-1.5c0-1.7 2.7-3.5 6-3.5s6 1.8 6 3.5V21h2v-1.5c0-3-3.6-5.5-8-5.5Zm0-8a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.4 0-8 2.5-8 5.5V21h2v-1.5c0-1.7 2.7-3.5 6-3.5s6 1.8 6 3.5V21h2v-1.5c0-3-3.6-5.5-8-5.5Zm0-8a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z'/%3E%3C/svg%3E");
}

.ui-icon-phone {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h10v20H7V2Zm2 2v16h6V4H9Zm2 13h2v2h-2v-2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h10v20H7V2Zm2 2v16h6V4H9Zm2 13h2v2h-2v-2Z'/%3E%3C/svg%3E");
}

.ui-icon-users {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm8.5 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM9 13c-4.2 0-7 2.4-7 5v2h2v-2c0-1.4 2-3 5-3s5 1.6 5 3v2h2v-2c0-2.6-2.8-5-7-5Zm8.5 1c-.6 0-1.2.1-1.7.2.9.7 1.6 1.5 1.9 2.5 1.4.1 2.3.8 2.3 1.6V20h2v-1.7c0-2.3-2-4.3-4.5-4.3ZM9 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm8.5 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm8.5 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM9 13c-4.2 0-7 2.4-7 5v2h2v-2c0-1.4 2-3 5-3s5 1.6 5 3v2h2v-2c0-2.6-2.8-5-7-5Zm8.5 1c-.6 0-1.2.1-1.7.2.9.7 1.6 1.5 1.9 2.5 1.4.1 2.3.8 2.3 1.6V20h2v-1.7c0-2.3-2-4.3-4.5-4.3ZM9 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm8.5 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z'/%3E%3C/svg%3E");
}

.ui-icon-shield-check {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2 4 5.5v5.7c0 5 3.4 9.6 8 10.8 4.6-1.2 8-5.8 8-10.8V5.5L12 2Zm6 9.2c0 4-2.5 7.6-6 8.7-3.5-1.1-6-4.7-6-8.7V6.8l6-2.6 6 2.6v4.4Zm-7.1 2.5-2-2-1.4 1.4 3.4 3.4 6-6-1.4-1.4-4.6 4.6Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2 4 5.5v5.7c0 5 3.4 9.6 8 10.8 4.6-1.2 8-5.8 8-10.8V5.5L12 2Zm6 9.2c0 4-2.5 7.6-6 8.7-3.5-1.1-6-4.7-6-8.7V6.8l6-2.6 6 2.6v4.4Zm-7.1 2.5-2-2-1.4 1.4 3.4 3.4 6-6-1.4-1.4-4.6 4.6Z'/%3E%3C/svg%3E");
}

.ui-icon-info {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 10h2v8h-2v-8Zm0-4h2v2h-2V6Zm1-4a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 10h2v8h-2v-8Zm0-4h2v2h-2V6Zm1-4a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Z'/%3E%3C/svg%3E");
}

.ui-icon-chevron-right {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.3 5.3 1.4-1.4L18.8 12l-8.1 8.1-1.4-1.4 6.7-6.7-6.7-6.7Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.3 5.3 1.4-1.4L18.8 12l-8.1 8.1-1.4-1.4 6.7-6.7-6.7-6.7Z'/%3E%3C/svg%3E");
}

.ui-icon-chevron-left {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14.7 5.3-1.4-1.4L5.2 12l8.1 8.1 1.4-1.4L8 12l6.7-6.7Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14.7 5.3-1.4-1.4L5.2 12l8.1 8.1 1.4-1.4L8 12l6.7-6.7Z'/%3E%3C/svg%3E");
}

.ui-icon-chevron-down {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 15.3-6.1-6.1 1.4-1.4 4.7 4.7 4.7-4.7 1.4 1.4-6.1 6.1Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 15.3-6.1-6.1 1.4-1.4 4.7 4.7 4.7-4.7 1.4 1.4-6.1 6.1Z'/%3E%3C/svg%3E");
}

.ui-icon-copy {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 7h10v13H8V7Zm2 2v9h6V9h-6ZM6 4h10v2H8v9H6V4Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 7h10v13H8V7Zm2 2v9h6V9h-6ZM6 4h10v2H8v9H6V4Z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Mypage
   ========================================================================== */

.mypage-page {
  background: #fff;
}

.mypage-main {
  padding-bottom: 48px;
}

.mypage-hero {
  padding: 42px 0 40px;
}

.mypage-heading {
  text-align: center;
}

.mypage-eyebrow {
  display: block;
  color: var(--color-primary-700);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
}

.mypage-eyebrow::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin: 8px auto 12px;
  background: var(--color-primary-700);
}

.mypage-heading h1 {
  color: #111827;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
}

.mypage-heading p {
  margin-top: 18px;
  color: #7b8497;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
}

.mypage-section {
  padding: 0 0 64px;
}

.mypage-section-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  color: #111827;
}

.mypage-section-title .ui-icon {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.mypage-section-title h2 {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.mypage-table-wrap {
  overflow-x: auto;
}

.mypage-table {
  min-width: 1080px;
  color: #111827;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
}

.mypage-table th,
.mypage-table td {
  padding: 12px 22px;
  border-bottom: 1px solid #e7eaf3;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.mypage-table th {
  color: #7b8497;
  font-size: 13px;
  font-weight: 800;
  background: #fbfcff;
}

.mypage-table tbody tr {
  transition: background var(--duration-base) var(--ease-out);
}

.mypage-table tbody tr:hover {
  background: #fbfaff;
}

.mypage-mobile-order-grid {
  display: none;
}

.mypage-mobile-order-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #dfe5f0;
  border-radius: 10px;
  background: #fff;
}

.mypage-mobile-order-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.mypage-mobile-order-head strong {
  display: block;
  overflow-wrap: anywhere;
  color: #111827;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.mypage-mobile-order-head span:not(.order-logo) {
  display: block;
  margin-top: 4px;
  color: #7b8497;
  font-size: 12px;
  font-weight: 600;
}

.mypage-mobile-order-info {
  display: grid;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid #edf0f6;
}

.mypage-mobile-order-info div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mypage-mobile-order-info dt {
  color: #7b8497;
  font-size: 12px;
  font-weight: 700;
}

.mypage-mobile-order-info dd {
  color: #111827;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.mypage-mobile-order-card .mypage-detail-btn {
  width: 100%;
  min-height: 42px;
  border-color: rgba(106, 92, 255, 0.34);
  background: linear-gradient(180deg, #fff 0%, #fbfaff 100%);
  color: var(--color-primary-700);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(106, 92, 255, 0.08);
}

.mypage-mobile-order-card .mypage-detail-btn .ui-icon {
  transition: transform var(--duration-base) var(--ease-out);
}

.mypage-mobile-order-card .mypage-detail-btn:hover {
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 12px 24px rgba(106, 92, 255, 0.14);
}

.mypage-mobile-order-card .mypage-detail-btn:hover .ui-icon {
  transform: translateX(2px);
}

.mypage-mobile-order-card .mypage-detail-btn:active {
  transform: translateY(1px);
  box-shadow: 0 6px 14px rgba(106, 92, 255, 0.1);
}

.order-product {
  display: flex;
  align-items: center;
  gap: 20px;
}

.order-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid #e7eaf3;
  border-radius: 8px;
  background: #fff;
}

.order-logo img {
  width: 32px;
  max-height: 28px;
  object-fit: contain;
}

.mypage-detail-btn,
.mypage-more-btn,
.mypage-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-primary-700);
  border: 1px solid var(--color-primary-line);
  border-radius: 8px;
  background: #fff;
  font-weight: 800;
  line-height: 1;
  transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background 180ms var(--ease-out);
}

.mypage-detail-btn {
  min-height: 36px;
  padding: 0 12px 0 14px;
  font-size: 13px;
}

.mypage-detail-btn .ui-icon,
.mypage-more-btn .ui-icon,
.mypage-edit-btn .ui-icon {
  width: 16px;
  height: 16px;
}

.mypage-detail-btn:hover,
.mypage-more-btn:hover,
.mypage-edit-btn:hover {
  border-color: var(--color-primary);
  background: #fbfaff;
  box-shadow: 0 10px 22px rgba(106, 92, 255, 0.12);
  transform: translateY(-1px);
}

.mypage-more {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.mypage-more-btn {
  width: min(100%, 370px);
  min-height: 46px;
  font-size: 15px;
}

.mypage-detail-grid {
  padding-top: 12px;
}

.mypage-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 112px;
}

.mypage-info-panel {
  min-width: 0;
}

.mypage-info-list {
  border-top: 1px solid #e7eaf3;
}

.mypage-info-list div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 16px;
  min-height: 62px;
  align-items: center;
  border-bottom: 1px solid #e7eaf3;
}

.mypage-info-list dt,
.login-history-list span,
.login-history-list em {
  color: #7b8497;
  font-size: 14px;
  font-weight: 800;
  font-style: normal;
}

.mypage-info-list dd,
.login-history-list strong,
.login-history-list time {
  color: #111827;
  font-size: 15px;
  font-weight: 600;
}

.mypage-edit-btn {
  width: 100%;
  min-height: 48px;
  margin-top: 24px;
  font-size: 15px;
}

.login-history-list {
  border-top: 1px solid #e7eaf3;
}

.mobile-login-history-list {
  display: none;
}

.mobile-login-history-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid #dfe5f0;
  border-radius: 10px;
  background: #fff;
}

.mobile-login-history-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.mobile-login-history-card span {
  color: #7b8497;
  font-size: 12px;
  font-weight: 800;
}

.mobile-login-history-card strong,
.mobile-login-history-card time {
  color: #111827;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.mobile-login-history-card time {
  color: var(--color-primary-700);
}

.login-history-list div {
  display: grid;
  grid-template-columns: 72px minmax(100px, 1fr) 80px minmax(150px, 1.2fr);
  gap: 12px;
  min-height: 47px;
  align-items: center;
  border-bottom: 1px solid #e7eaf3;
}

.login-history-list em {
  color: var(--color-primary-700);
}

.ui-icon-receipt {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 3h14v18l-2-1.2-2 1.2-2-1.2-2 1.2-2-1.2L7 21l-2-1.2V3Zm2 2v12.5l2-1.2 2 1.2 2-1.2 2 1.2 2-1.2V5H7Zm3 4h7v2h-7V9Zm0 4h7v2h-7v-2ZM7 9h2v2H7V9Zm0 4h2v2H7v-2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 3h14v18l-2-1.2-2 1.2-2-1.2-2 1.2-2-1.2L7 21l-2-1.2V3Zm2 2v12.5l2-1.2 2 1.2 2-1.2 2 1.2 2-1.2V5H7Zm3 4h7v2h-7V9Zm0 4h7v2h-7v-2ZM7 9h2v2H7V9Zm0 4h2v2H7v-2Z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Order History
   ========================================================================== */

.order-history-main {
  padding-bottom: 56px;
}

.order-history-hero {
  padding-bottom: 34px;
}

.order-history-panel {
  padding: 34px 38px 36px;
  background: transparent;
}

.order-history-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.order-history-count {
  color: #111827;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.order-history-count strong {
  color: var(--color-primary-700);
  font-weight: 800;
}

.order-history-search {
  position: relative;
  display: block;
  width: min(100%, 390px);
  height: 42px;
  margin: 0 0 2px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 24px rgba(50, 45, 120, 0.05);
}

.order-history-search input {
  width: 100%;
  height: 100%;
  padding: 0 44px 0 20px;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: inherit;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  outline: 0;
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.order-history-search input::placeholder {
  color: var(--color-subtle);
}

.order-history-search input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(106, 92, 255, 0.12);
}

.order-history-search .ui-icon {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 20px;
  height: 20px;
  color: var(--color-text-strong);
  transform: translateY(-50%);
  pointer-events: none;
}

.order-history-table-wrap {
  overflow-x: auto;
  border: 1px solid #e1e6f0;
  border-radius: 8px;
}

.order-history-mobile-grid {
  display: none;
}

.order-history-full-table {
  min-width: 1120px;
}

.order-history-full-table th,
.order-history-full-table td {
  padding: 12px 22px;
}

.order-history-full-table tr:last-child td {
  border-bottom: 0;
}

.order-history-product {
  gap: 20px;
}

.order-history-product > span:last-child {
  display: grid;
  gap: 5px;
}

.order-history-product strong {
  color: #111827;
  font-size: 15px;
  font-weight: 600;
}

.order-history-product em {
  color: #667085;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
}

.order-history-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
}

.order-page-number,
.order-page-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  color: #111827;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out), background 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.order-page-nav {
  gap: 0;
  border-color: #dfe5f0;
  background: #fff;
}

.order-page-nav .ui-icon {
  width: 16px;
  height: 16px;
}

.order-page-nav .ui-icon + .ui-icon {
  margin-left: -8px;
}

.order-page-number:hover,
.order-page-nav:hover {
  color: var(--color-primary-700);
  border-color: var(--color-primary-line);
  background: #fbfaff;
}

.order-page-number.is-active {
  color: #fff;
  border-color: transparent;
  background: var(--gradient-primary);
  box-shadow: 0 8px 16px rgba(106, 92, 255, 0.18);
}

/* ==========================================================================
   Profile Edit
   ========================================================================== */

.profile-edit-main {
  padding-bottom: 56px;
}

.profile-edit-hero {
  padding-bottom: 34px;
}

.profile-edit-container {
  width: min(100% - calc(var(--container-padding) * 2), 500px);
}

.profile-edit-block {
  padding: 0 0 42px;
  border-bottom: 1px solid #dfe5f0;
}

.profile-edit-block + .profile-edit-block {
  padding-top: 38px;
}

.profile-edit-block:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.profile-edit-form {
  display: grid;
  gap: 18px;
}

.profile-readonly-notice {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: -8px 0 18px;
  padding: 13px 14px;
  border: 1px solid var(--color-primary-line);
  border-radius: 8px;
  background: #f8f6ff;
  color: #4b5568;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
}

.profile-readonly-notice::before {
  content: "i";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.profile-password-submit {
  margin-top: 4px;
}

.sns-connect-box {
  overflow: hidden;
  border: 1px solid #dfe5f0;
  border-radius: 8px;
  background: #fff;
}

.sns-connect-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 62px;
  padding: 0 22px;
}

.sns-connect-row + .sns-connect-row {
  border-top: 1px solid #e7eaf3;
}

.sns-connect-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #fff;
  border-radius: 50%;
  font-weight: 900;
  line-height: 1;
}

.sns-connect-kakao {
  color: #fee500;
  background: #2d2417;
  font-size: 9px;
}

.sns-connect-naver {
  background: #03c75a;
  font-size: 22px;
}

.sns-connect-row strong {
  color: #111827;
  font-size: 15px;
  font-weight: 700;
}

.sns-connect-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #111827;
  font-size: 14px;
  font-weight: 800;
}

.sns-connect-state .ui-icon {
  width: 22px;
  height: 22px;
  padding: 4px;
  color: #fff;
  border-radius: 50%;
  background: var(--color-primary);
}

.sns-connect-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 116px;
  min-height: 40px;
  padding: 0 18px;
  color: var(--color-primary-700);
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 800;
  transition: background var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.sns-connect-btn:hover {
  background: #fbfaff;
  box-shadow: 0 10px 22px rgba(106, 92, 255, 0.12);
  transform: translateY(-1px);
}

.profile-help-text {
  margin-top: 18px;
  color: #7b8497;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

.profile-withdraw-block .profile-help-text {
  margin-top: -12px;
}

.profile-withdraw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 18px;
  color: #111827;
  border: 1px solid #a9b1c4;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 800;
  transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}

.profile-withdraw-btn:hover {
  color: #ff3045;
  border-color: #ff9b9b;
  background: #fff8f8;
}

.ui-icon-link {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 14.5 8.1 13l5-5 1.4 1.4-5 5.1Zm.8 3.5H8a6 6 0 0 1 0-12h3v2H8a4 4 0 0 0 0 8h2.3v2ZM13 18h3a6 6 0 0 0 0-12h-2.3v2H16a4 4 0 0 1 0 8h-3v2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 14.5 8.1 13l5-5 1.4 1.4-5 5.1Zm.8 3.5H8a6 6 0 0 1 0-12h3v2H8a4 4 0 0 0 0 8h2.3v2ZM13 18h3a6 6 0 0 0 0-12h-2.3v2H16a4 4 0 0 1 0 8h-3v2Z'/%3E%3C/svg%3E");
}

.ui-icon-user-plus {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.2 0-7 2.4-7 5v2h2v-2c0-1.4 2-3 5-3 1.3 0 2.5.3 3.4.8l1.1-1.7A8.7 8.7 0 0 0 9 13Zm0-8a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm9 8v3h3v2h-3v3h-2v-3h-3v-2h3v-3h2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.2 0-7 2.4-7 5v2h2v-2c0-1.4 2-3 5-3 1.3 0 2.5.3 3.4.8l1.1-1.7A8.7 8.7 0 0 0 9 13Zm0-8a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm9 8v3h3v2h-3v3h-2v-3h-3v-2h3v-3h2Z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Customer Center
   ========================================================================== */

.customer-center-page {
  background: #fff;
}

.customer-center-main {
  padding-bottom: 58px;
}

.customer-center-hero {
  padding: 46px 0 34px;
}

.customer-center-container {
  width: min(100% - calc(var(--container-padding) * 2), 760px);
}

.customer-tab-list {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #e7eaf3;
}

.customer-tab-btn {
  position: relative;
  min-width: 180px;
  min-height: 52px;
  color: #7b8497;
  font-size: 17px;
  font-weight: 800;
  transition: color var(--duration-base) var(--ease-out);
}

.customer-tab-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.customer-tab-btn::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: transparent;
}

.customer-tab-btn.is-active {
  color: var(--color-primary-700);
}

.customer-tab-btn.is-active::after {
  background: var(--color-primary);
}

.customer-tab-panel {
  display: none;
  padding-top: 22px;
}

.customer-tab-panel.is-active {
  display: block;
}

.customer-list-card {
  overflow: hidden;
  border: 1px solid #dfe5f0;
  border-radius: 10px;
  background: #fff;
}

.customer-list-entry {
  border-bottom: 1px solid #e7eaf3;
}

.customer-list-entry:last-child {
  border-bottom: 0;
}

.customer-list-item {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 18px;
  align-items: center;
  min-height: 84px;
  padding: 18px 28px;
  color: #111827;
  text-align: left;
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}

.customer-list-item:hover {
  background: #fbfaff;
  color: var(--color-primary-700);
}

.customer-list-item > .ui-icon {
  width: 18px;
  height: 18px;
  color: #111827;
  transition: color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.customer-list-entry.is-active .customer-list-item {
  color: var(--color-primary-700);
  background: #fbfaff;
}

.customer-list-entry.is-active .customer-list-item > .ui-icon {
  color: var(--color-primary-700);
  transform: rotate(90deg);
}

.customer-item-content {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.customer-item-content strong,
.faq-list-item strong {
  color: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.customer-item-content em {
  margin-right: 18px;
  color: var(--color-primary-700);
  font-style: normal;
  font-weight: 800;
}

.customer-item-content time {
  color: #7b8497;
  font-size: 14px;
  font-weight: 600;
}

.faq-list-item {
  grid-template-columns: 28px minmax(0, 1fr) 24px;
}

.customer-question-mark {
  color: var(--color-primary-700);
  font-size: 18px;
  font-weight: 900;
}

.customer-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 240ms var(--ease-out), opacity 180ms var(--ease-out);
}

.customer-answer-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 28px;
  color: #4b5568;
  background: #fbfcff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.75;
  transition: padding 240ms var(--ease-out);
}

.customer-answer-inner img {
  max-width: 100%;
  height: auto;
}

.customer-answer-inner table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.customer-list-entry.is-active .customer-answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.customer-list-entry.is-active .customer-answer-inner {
  padding: 18px 28px 20px;
}

.customer-pagination {
  margin-top: 36px;
}

.customer-list-card.customer-empty {
  display: grid;
  min-height: 180px;
  padding: 52px 24px;
  place-content: center;
  color: #4b5568;
  text-align: center;
}

.customer-empty strong {
  display: block;
  color: #111827;
  font-size: 17px;
  font-weight: 800;
}

.customer-empty p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
}

/* ==========================================================================
   Product List Page
   ========================================================================== */

.product-list-page {
  background: linear-gradient(180deg, #fbfbff 0%, #fff 48%, #fbfbff 100%);
}

.product-list-page .site-header {
  background: rgba(251, 251, 255, 0.94);
}

.product-list-page .site-header-inner {
  box-shadow: none;
}

.product-list-hero {
  padding: 28px 0 56px;
}

.product-list-banner {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(216, 209, 255, 0.52);
  border-radius: 26px;
  background: #f4f1ff;
  box-shadow: 0 18px 50px rgba(91, 75, 255, 0.08);
}

.product-list-banner picture,
.product-list-banner img {
  display: block;
  width: 100%;
}

.product-list-banner img {
  aspect-ratio: 2048 / 640;
  height: auto;
  object-fit: cover;
}

.product-list-banner-actions {
  position: absolute;
  right: 72px;
  bottom: 42px;
  left: 72px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-list-banner-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 124px;
  min-width: 124px;
  height: 56px;
  min-height: 56px;
  padding: 0 18px;
  gap: 8px;
  color: var(--color-text-strong);
  border: 1px solid rgba(231, 234, 243, 0.92);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 28px rgba(64, 56, 150, 0.08);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}

.product-list-banner-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 124, 255, 0.46);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 30px rgba(64, 56, 150, 0.1);
}

.product-list-banner-btn:active {
  transform: translateY(0);
  background: #f5f2ff;
  box-shadow: 0 8px 18px rgba(64, 56, 150, 0.08);
}

.product-list-banner-btn.is-active {
  color: var(--color-primary-700);
  border-color: rgba(91, 75, 255, 0.92);
  background: linear-gradient(180deg, #ffffff 0%, #f3f0ff 100%);
  box-shadow: inset 0 0 0 1px rgba(91, 75, 255, 0.28), 0 12px 26px rgba(91, 75, 255, 0.15);
}

.product-list-banner-btn img {
  width: 22px;
  height: 22px;
  aspect-ratio: 1;
  object-fit: contain;
}

.product-list-banner-logo-btn {
  min-width: 124px;
  min-height: 56px;
  padding-inline: 12px;
}

.product-list-banner-logo-btn img {
  width: auto;
  max-width: 108px;
  max-height: 42px;
  height: auto;
  object-fit: contain;
}

.product-list-banner-logo-btn.is-active img {
  filter: none;
}

.product-list-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: var(--color-primary);
  border: 1px solid rgba(216, 209, 255, 0.72);
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #f5f2ff 100%);
}

.product-list-banner-icon .ui-icon {
  width: 17px;
  height: 17px;
}

.product-list-banner-btn:hover .product-list-banner-icon {
  color: var(--color-primary-700);
  border-color: var(--color-primary-line);
  box-shadow: 0 8px 16px rgba(91, 75, 255, 0.12);
}

.category-icon {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: currentColor;
}

.category-icon-infinity::before {
  content: "∞";
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.category-icon-game::before {
  content: "";
  width: 23px;
  height: 16px;
  border: 3px solid currentColor;
  border-radius: 9px 9px 7px 7px;
}

.category-icon-game::after {
  content: "+";
  position: absolute;
  left: 5px;
  top: 1px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.category-icon-play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid currentColor;
}

.product-list-section {
  padding: 0 0 74px;
}

.product-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
}

.product-list-toolbar-left,
.product-list-toolbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.product-list-toolbar-right {
  gap: 10px;
  margin-left: auto;
}

.product-list-search {
  width: 260px;
  flex: 0 0 260px;
}

.product-list-select,
.product-list-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  color: var(--color-text-strong);
  border: 1px solid rgba(216, 209, 255, 0.62);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 28px rgba(64, 56, 150, 0.05);
  font-weight: 800;
}

.product-list-select {
  min-width: 164px;
  padding: 0 16px;
  gap: 8px;
  font-size: 14px;
}

.product-list-dropdown {
  display: block;
}

.product-list-dropdown-menu {
  width: 100%;
  min-width: 164px;
  border-radius: 14px;
}

.product-list-dropdown-menu .dropdown-item {
  min-height: 36px;
  font-size: 13px;
  font-weight: 700;
}

.product-list-dropdown-menu .dropdown-item.is-active {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.product-list-sort-dropdown .product-list-dropdown-menu {
  right: 0;
  left: auto;
  min-width: 136px;
}

.product-list-select .ui-icon-filter {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.product-list-select .ui-icon-chevron-down {
  width: 18px;
  height: 18px;
  margin-left: auto;
}

.product-list-sort {
  min-width: 112px;
}

.product-list-count {
  color: #4b5368;
  font-size: 14px;
  font-weight: 700;
}

.product-list-count strong {
  color: var(--color-text-strong);
  font-size: 15px;
  font-weight: 900;
}

.product-list-view-btn {
  width: 42px;
  padding: 0;
  transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.product-list-view-btn .ui-icon {
  width: 20px;
  height: 20px;
  color: #272d3d;
  transform-origin: center;
  transition: color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.product-list-view-btn.is-icon-changing .ui-icon {
  opacity: 0;
  transform: scale(0.76) rotate(-10deg);
}

.product-list-view-btn .ui-icon.is-switching {
  animation: product-view-icon-swap 220ms var(--ease-out);
}

@keyframes product-view-icon-swap {
  0% {
    opacity: 0.55;
    transform: scale(0.78) rotate(-12deg);
  }

  55% {
    opacity: 1;
    transform: scale(1.08) rotate(4deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-list-view-btn .ui-icon.is-switching {
    animation: none;
  }
}

.product-list-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 28px;
}

.product-list-grid .product-card {
  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}

.product-list-grid.is-view-switching .product-card {
  animation: product-list-card-switch 260ms var(--ease-out) both;
}

.product-list-grid.is-view-switching .product-card:nth-child(2n) {
  animation-delay: 24ms;
}

.product-list-grid.is-view-switching .product-card:nth-child(3n) {
  animation-delay: 48ms;
}

@keyframes product-list-card-switch {
  0% {
    opacity: 0.68;
    transform: translateY(8px) scale(0.985);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.product-list-grid.is-widget-view {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.product-list-grid.is-widget-view .product-card {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 152px;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}

.product-list-grid.is-widget-view .product-thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
}

.product-list-grid.is-widget-view .product-thumb img {
  border-radius: var(--radius-md);
}

.product-list-grid.is-widget-view .product-card-fade .product-thumb::after {
  display: none;
}

.product-list-grid.is-widget-view .product-badge {
  top: 14px;
  right: 14px;
  left: auto;
}

.product-list-grid.is-widget-view .product-info {
  min-width: 0;
  padding: 0;
}

.product-list-grid.is-widget-view .product-price {
  margin-top: 10px;
  padding-bottom: 0;
  border-bottom: 0;
}

.product-list-grid.is-widget-view .product-link {
  margin-top: 10px;
}

.product-list-card-category {
  display: block;
  margin-bottom: 6px;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 800;
}

.product-list-empty {
  margin-top: 24px;
  padding: 52px 20px;
  border: 1px dashed var(--color-border);
  border-radius: 18px;
  background: #fbfbff;
  color: #667085;
  font-weight: 700;
  text-align: center;
}

.product-list-dropdown-menu .dropdown-item {
  width: 100%;
  text-align: left;
}

/* ==========================================================================
   Product Detail Page
   ========================================================================== */

.product-detail-page {
  background: linear-gradient(180deg, #fbfbff 0%, #fff 54%, #fbfbff 100%);
}

.product-detail-page .site-header {
  background: rgba(251, 251, 255, 0.94);
}

.product-detail-page .site-header-inner {
  box-shadow: none;
}

.product-detail-main {
  padding: 32px 0 74px;
}

.product-detail-title {
  margin-bottom: 34px;
  text-align: center;
}

.product-detail-title span {
  display: block;
  color: var(--color-primary-700);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
}

.product-detail-title span::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin: 8px auto 12px;
  background: var(--color-primary-700);
}

.product-detail-title h1 {
  color: #111827;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
}

/* Product detail empty state */
.product-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  padding: 56px 24px;
  text-align: center;
}

.product-detail-empty > .ui-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  color: var(--color-primary);
}

.product-detail-empty h2 {
  color: #111827;
  font-size: 24px;
  font-weight: 850;
}

.product-detail-empty p {
  margin-top: 10px;
  color: #667085;
  font-size: 15px;
}

.product-detail-empty .btn {
  min-width: 180px;
  margin-top: 26px;
}

.detail-content-empty {
  padding: 40px 20px;
  color: #667085;
  text-align: center;
}

.product-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

.product-detail-content {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.detail-panel,
.detail-order-panel {
  border: 1px solid rgba(207, 214, 230, 0.92);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(27, 31, 59, 0.035);
}

.detail-panel {
  padding: 22px;
}

.detail-section-label {
  display: flex;
  align-items: center;
  min-height: 38px;
  margin: 2px 0 2px;
  padding: 0 18px;
  border-left: 3px solid var(--color-primary);
  border-radius: 0;
  background: linear-gradient(90deg, rgba(246, 243, 255, 0.96) 0%, rgba(248, 246, 255, 0.72) 100%);
}

.detail-section-label h2 {
  color: #111827;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.product-detail-page .detail-section-label,
.payment-page .detail-section-label {
  margin: 12px 0 -12px;
}

.detail-panel > h2,
.detail-order-panel > h2 {
  margin-bottom: 16px;
  color: #050505;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.product-overview-grid {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.product-overview-thumb {
  position: relative;
  overflow: hidden;
  align-self: start;
  --product-accent: var(--color-primary);
  --product-accent-line: var(--color-primary-line);
  --product-accent-soft: rgba(91, 75, 255, 0.14);
  border-radius: 10px;
  background: #f4f1ff;
  aspect-ratio: 1 / 0.92;
}

.product-overview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-overview-thumb .product-badge {
  top: 12px;
  left: 12px;
  min-height: 26px;
  padding: 0 11px;
  gap: 0.2em;
  font-size: 11px;
  letter-spacing: 0;
}

.product-overview-info {
  min-width: 0;
}

.detail-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  margin-bottom: 16px;
  padding: 0 14px;
  color: var(--color-primary);
  border: 1px solid var(--color-primary-line);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.product-overview-info h2 {
  color: #050505;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.32;
}

.product-overview-info p {
  margin-top: 14px;
  color: #4b5368;
  font-size: 14px;
  font-weight: 500;
}

.detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.detail-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  padding-inline: 14px;
  color: #222a3a;
  border-right: 1px solid var(--color-border);
}

.detail-meta-item:first-child {
  padding-left: 0;
}

.detail-meta-item:last-child {
  border-right: 0;
}

.detail-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: #344054;
}

.detail-meta-icon .ui-icon {
  width: 20px;
  height: 20px;
}

.detail-meta-item strong {
  display: block;
  color: #050505;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.detail-meta-item span:not(.detail-meta-icon) {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  margin-top: 4px;
  color: #344054;
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-meta-item span:not(.detail-meta-icon) .ui-icon-external-link {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--color-primary);
}

a.detail-meta-item span:not(.detail-meta-icon) {
  color: var(--color-primary);
}

.detail-meta-copy-value {
  max-width: 100%;
  color: var(--color-primary) !important;
}

.detail-meta-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-meta-copy-btn,
.detail-meta-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  border: 1px solid rgba(111, 91, 255, 0.18);
  border-radius: 7px;
  background: rgba(248, 246, 255, 0.78);
  cursor: pointer;
  transition: color 160ms var(--ease-out), background 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.detail-meta-copy-btn .ui-icon,
.detail-meta-link-btn .ui-icon {
  width: 14px;
  height: 14px;
}

.detail-meta-copy-btn:hover,
.detail-meta-copy-btn.is-copied,
.detail-meta-link-btn:hover {
  color: #372cff;
  border-color: var(--color-primary-line);
  background: #fff;
  transform: translateY(-1px);
}

.product-option-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.product-option-card {
  position: relative;
  display: grid;
  justify-items: center;
  min-height: 118px;
  padding: 18px 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-white);
  cursor: pointer;
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background 180ms var(--ease-out);
}

.product-option-card.is-selected {
  border-color: var(--color-primary);
  background: linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
  box-shadow: inset 0 0 0 1px rgba(106, 92, 255, 0.34), 0 10px 22px rgba(91, 75, 255, 0.08);
}

.product-option-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  border: 1.5px solid #b8c1d3;
  border-radius: 50%;
  background: var(--color-white);
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.product-option-card.is-selected .product-option-check {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: 0 4px 10px rgba(91, 75, 255, 0.22);
}

.product-option-card.is-selected .product-option-check::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 4px;
  height: 8px;
  border-right: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: rotate(45deg);
}

.product-option-card h3 {
  color: #050505;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.product-option-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  gap: 4px 6px;
  margin-top: 12px;
  line-height: 1.25;
}

.product-option-price del {
  color: #98a2b3;
  font-size: 12px;
  white-space: nowrap;
}

.product-option-price strong {
  color: #050505;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.product-option-price span {
  flex: 0 0 100%;
  color: #ff1f3d;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.product-option-card .quantity {
  grid-template-columns: 34px 44px 34px;
  min-height: 34px;
  margin-top: 12px;
}

.product-option-card .quantity button {
  font-size: 18px;
}

.product-option-card .quantity input {
  font-size: 14px;
}

.detail-tabs {
  justify-content: center;
}

.detail-tabs .tab-btn {
  min-width: 190px;
}

.detail-description-box {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #fbfcff;
}

.detail-description-box h3 {
  color: #050505;
  font-size: 16px;
  font-weight: 800;
}

.detail-description-box p {
  margin-top: 12px;
  color: #344054;
  font-size: 15px;
  line-height: 1.65;
}

.detail-check-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.detail-check-list li {
  position: relative;
  padding-left: 24px;
  color: #344054;
  font-size: 14px;
  line-height: 1.5;
}

.detail-check-list li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-primary);
}

.detail-check-list li::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 5px;
  width: 4px;
  height: 7px;
  border-right: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: rotate(45deg);
}

.detail-description-box img {
  width: 100%;
  margin-top: 20px;
  border-radius: 12px;
}

.detail-review-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.detail-review-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  min-height: 116px;
  padding: 24px 32px;
  border: 1px solid rgba(223, 229, 240, 0.82);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 20px rgba(27, 31, 59, 0.018);
}

.detail-review-stars {
  display: inline-flex;
  gap: 6px;
  color: #4328ff;
  font-size: 0;
  line-height: 1;
}

.detail-review-stars::before {
  content: "";
  display: block;
  width: 118px;
  height: 22px;
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 118 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1.7 13.9 7.5l6.4.9-4.6 4.5 1.1 6.4L11 16.3l-5.7 3 1.1-6.4L1.8 8.4l6.4-.9L11 1.7Zm24 0 2.9 5.8 6.4.9-4.6 4.5 1.1 6.4-5.8-3-5.7 3 1.1-6.4-4.6-4.5 6.4-.9L35 1.7Zm24 0 2.9 5.8 6.4.9-4.6 4.5 1.1 6.4-5.8-3-5.7 3 1.1-6.4-4.6-4.5 6.4-.9L59 1.7Zm24 0 2.9 5.8 6.4.9-4.6 4.5 1.1 6.4-5.8-3-5.7 3 1.1-6.4-4.6-4.5 6.4-.9L83 1.7Zm24 0 2.9 5.8 6.4.9-4.6 4.5 1.1 6.4-5.8-3-5.7 3 1.1-6.4-4.6-4.5 6.4-.9L107 1.7Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 118 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1.7 13.9 7.5l6.4.9-4.6 4.5 1.1 6.4L11 16.3l-5.7 3 1.1-6.4L1.8 8.4l6.4-.9L11 1.7Zm24 0 2.9 5.8 6.4.9-4.6 4.5 1.1 6.4-5.8-3-5.7 3 1.1-6.4-4.6-4.5 6.4-.9L35 1.7Zm24 0 2.9 5.8 6.4.9-4.6 4.5 1.1 6.4-5.8-3-5.7 3 1.1-6.4-4.6-4.5 6.4-.9L59 1.7Zm24 0 2.9 5.8 6.4.9-4.6 4.5 1.1 6.4-5.8-3-5.7 3 1.1-6.4-4.6-4.5 6.4-.9L83 1.7Zm24 0 2.9 5.8 6.4.9-4.6 4.5 1.1 6.4-5.8-3-5.7 3 1.1-6.4-4.6-4.5 6.4-.9L107 1.7Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.detail-review-body {
  min-width: 0;
}

.detail-review-body p {
  color: #111827;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}

.detail-review-body p + p {
  margin-top: 2px;
}

.detail-review-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
  margin-top: 16px;
  color: #667085;
  font-size: 13px;
  font-weight: 600;
}

.detail-review-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  color: var(--color-primary);
  border-radius: 6px;
  background: var(--color-primary-soft);
  font-weight: 800;
}

.detail-review-pagination {
  margin-top: 36px;
}

.detail-order-panel {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  padding: 18px;
}

.order-alert {
  padding: 14px 16px;
  border: 1px solid var(--color-primary-line);
  border-radius: 10px;
  background: #f8f6ff;
}

.order-alert strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 800;
}

.order-alert strong .ui-icon {
  width: 18px;
  height: 18px;
}

.order-alert ul {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-left: 18px;
  list-style: disc;
  color: #344054;
  font-size: 13px;
  line-height: 1.45;
}

.selected-product {
  margin-top: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}

.selected-product h3 {
  margin-bottom: 14px;
  color: #050505;
  font-size: 15px;
  font-weight: 800;
}

.selected-product-list {
  display: grid;
  gap: 0;
}

.selected-product-empty {
  padding: 16px;
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  background: #fbfcff;
  color: #667085;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.selected-product-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid #edf0f6;
}

.selected-product-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.selected-product-row img {
  width: 54px;
  height: 54px;
  border-radius: 9px;
  object-fit: cover;
}

.selected-product-info strong {
  display: block;
  color: #050505;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.selected-product-info span {
  display: block;
  margin-top: 5px;
  color: #667085;
  font-size: 13px;
}

.selected-product-quantity {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

.selected-product-quantity .quantity {
  grid-template-columns: 32px 40px 32px;
  min-height: 34px;
}

.selected-product-remove {
  color: #667085;
  font-size: 22px;
  line-height: 1;
}

.selected-product-price {
  display: block;
  grid-column: 1 / -1;
  margin-top: 2px;
  color: #050505;
  font-size: 15px;
  font-weight: 800;
  text-align: right;
}

.order-price-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.order-price-list div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #344054;
  font-size: 14px;
}

.order-price-list strong {
  font-weight: 500;
}

.order-price-list .is-discount,
.order-price-list .is-discount strong {
  color: #ff1f3d;
}

.order-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid var(--color-primary-line);
  border-radius: 10px;
  background: #f8f6ff;
}

.order-total span {
  color: #050505;
  font-size: 15px;
  font-weight: 800;
}

.order-total strong {
  color: var(--color-primary);
  font-size: 23px;
  font-weight: 850;
}

.order-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.detail-order-panel .order-actions .btn {
  min-height: 48px;
  padding-inline: 20px;
  border-radius: 8px;
  font-size: 15px;
}

/* Payment */
.payment-main {
  padding: 32px 0 74px;
}

.order-detail-status {
  color: var(--color-primary) !important;
}

.order-detail-status.is-waiting {
  color: #ff334b !important;
}

.order-detail-summary-head {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-line);
}

.order-detail-summary-meta {
  display: grid;
  gap: 14px;
}

.order-detail-summary-meta > div,
.order-detail-mobile-meta > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.order-detail-summary-meta dt,
.order-detail-mobile-meta dt {
  color: #344054;
  font-size: 14px;
  font-weight: 400;
}

.order-detail-summary-meta dd,
.order-detail-mobile-meta dd {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  color: #344054;
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}

.order-detail-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--color-primary);
  border: 1px solid var(--color-primary-line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.order-detail-copy-btn .ui-icon {
  width: 14px;
  height: 14px;
}

.order-detail-mobile-meta {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-line);
}

.payment-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  display: grid;
  gap: 16px;
  align-self: start;
  min-width: 0;
}

/* Empty payment layout */
.payment-layout-empty {
  grid-template-columns: minmax(0, 1fr);
}

.payment-sidebar .detail-order-panel {
  position: static;
}

.payment-product-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.payment-product-thumb {
  overflow: hidden;
  position: relative;
  width: 150px;
  aspect-ratio: 1;
  border-radius: 8px;
  background: #f4f1ff;
}

.payment-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.payment-product-thumb .product-badge {
  top: 10px;
  left: 10px;
  min-height: 24px;
  padding: 0 10px;
  gap: 0.2em;
  color: var(--color-primary);
  font-size: 10px;
}

.payment-product-thumb .product-badge-label {
  color: var(--color-primary);
  font-weight: 800;
}

.payment-product-thumb .product-badge-value {
  color: #372cff;
  font-weight: 900;
}

.payment-product-info {
  min-width: 0;
}

.payment-product-title-row {
  display: block;
}

.payment-product-info h3 {
  color: #111827;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

.payment-product-mobile-badge {
  display: none;
}

.payment-product-info p {
  margin-top: 14px;
  color: #344054;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

.payment-product-meta {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 28px;
  color: #111827;
  font-size: 14px;
}

.payment-product-meta div {
  display: flex;
  align-items: center;
  gap: 18px;
}

.payment-product-meta div + div {
  position: relative;
}

.payment-product-meta div + div::before {
  content: "";
  position: absolute;
  left: -14px;
  width: 1px;
  height: 16px;
  background: var(--color-border);
}

.payment-product-meta dt {
  color: #344054;
  font-weight: 500;
}

.payment-product-meta dd {
  font-weight: 800;
}

.payment-product-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: #1f2937;
  border: 1px solid #d7deea;
  border-radius: 50%;
  background: #fff;
  transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.payment-product-toggle:hover,
.payment-product-toggle[aria-expanded="true"] {
  color: var(--color-primary);
  border-color: var(--color-primary-line);
}

.payment-product-toggle .ui-icon {
  width: 18px;
  height: 18px;
  transition: transform 180ms var(--ease-out);
}

.payment-product-toggle[aria-expanded="true"] .ui-icon {
  transform: rotate(180deg);
}

.payment-product-detail {
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 260ms var(--ease-out), margin-top 260ms var(--ease-out), border-color 200ms var(--ease-out), opacity 200ms var(--ease-out), transform 260ms var(--ease-out);
}

.payment-product-detail.is-open {
  max-height: 420px;
  margin-top: 20px;
  border-color: var(--color-border);
  opacity: 1;
  transform: translateY(0);
}

.payment-product-detail-head,
.payment-product-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 140px 140px;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 16px;
}

.payment-product-detail-head {
  color: #667085;
  border-bottom: 1px solid var(--color-border);
  background: #fbfcff;
  font-size: 13px;
  font-weight: 700;
}

.payment-product-detail-row {
  color: #111827;
  border-bottom: 1px solid #edf0f6;
  font-size: 14px;
}

.payment-product-detail-row strong {
  font-weight: 800;
}

.payment-product-detail-head span:not(:first-child),
.payment-product-detail-row span,
.payment-product-detail-row strong:not(:first-child) {
  text-align: right;
}

.payment-product-detail-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 0 16px;
  color: #667085;
  background: #fbfcff;
  font-size: 14px;
  font-weight: 700;
}

.payment-product-detail-total strong {
  margin-left: 10px;
  color: #111827;
  font-size: 16px;
  font-weight: 850;
}

.payment-info-table {
  display: grid;
  border-top: 1px solid var(--color-border);
}

.payment-info-table div {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  min-height: 42px;
  border-bottom: 1px solid var(--color-border);
}

.payment-info-table dt,
.payment-info-table dd {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  color: #344054;
  font-size: 14px;
  line-height: 1.4;
}

.payment-info-table dt {
  background: rgba(248, 250, 252, 0.72);
  font-weight: 700;
}

.payment-info-table dd {
  border-left: 1px solid var(--color-border);
  font-weight: 500;
}

.payment-bank-wrap {
  margin-top: 26px;
}

.payment-bank-wrap > strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  margin-bottom: 12px;
  padding: 0 12px;
  color: #111827;
  border: 1px solid rgba(111, 91, 255, 0.16);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(246, 243, 255, 0.96) 0%, rgba(255, 255, 255, 0.86) 100%);
  font-size: 14px;
  font-weight: 800;
}

.payment-bank-wrap > strong::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(111, 91, 255, 0.12);
}

.payment-bank-list {
  overflow: hidden;
  border: 1px solid #dfe5f0;
  border-radius: 10px;
  background: #fbfcff;
}

.payment-bank-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(190px, 1fr) 32px;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.72);
}

.payment-bank-row:last-child {
  border-bottom: 0;
}

.payment-bank-name {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: #344054;
  font-size: 14px;
  font-weight: 700;
}

.payment-bank-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
}

.bank-kakao {
  color: #111827;
  background: #ffe500;
}

.bank-shinhan {
  color: #fff;
  background: linear-gradient(135deg, #1664d9 0%, #12b8d7 100%);
}

.payment-bank-account {
  min-width: 0;
  color: #1f2937;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}

.payment-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-primary);
  border: 1px solid rgba(111, 91, 255, 0.16);
  border-radius: 7px;
  background: #fff;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out);
}

.payment-copy-btn:hover,
.payment-copy-btn.is-copied {
  border-color: var(--color-primary-line);
  background: var(--color-primary-soft);
}

.payment-copy-btn .ui-icon {
  width: 18px;
  height: 18px;
}

.payment-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 11px 14px;
  color: #344054;
  border-radius: 7px;
  background: #f8f6ff;
  font-size: 13px;
  font-weight: 600;
}

.payment-note .ui-icon {
  width: 17px;
  height: 17px;
  color: var(--color-primary);
}

.payment-status {
  color: #ff1f3d;
  font-weight: 800;
}

.payment-summary-card .order-price-list {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}

.payment-guide-card {
  display: grid;
  gap: 18px;
  padding: 22px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
}

.payment-guide-card h2 {
  margin-bottom: 0;
  color: #111827;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.38;
}

.payment-guide-card ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 0;
  counter-reset: payment-guide-step;
  color: #1f2937;
  font-size: 13px;
  line-height: 1.45;
  list-style: none;
}

.payment-guide-card li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.payment-guide-card li::before {
  content: counter(payment-guide-step) ".";
  counter-increment: payment-guide-step;
  color: #111827;
  font-weight: 700;
}

.payment-guide-card .btn {
  min-height: 48px;
  margin-top: 4px;
  border-radius: 8px;
  font-size: 15px;
}

.payment-account-card {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(24px, 5vw, 56px) var(--container-padding);
  overflow-y: auto;
  background: rgba(5, 8, 18, 0.88);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms var(--ease-out), visibility 220ms var(--ease-out);
}

.payment-account-card[hidden] {
  display: none;
}

.payment-account-card.is-open {
  opacity: 1;
  visibility: visible;
}

.payment-account-dialog {
  position: relative;
  display: grid;
  width: min(100%, 520px);
  gap: 18px;
  padding: 26px;
  border: 1px solid rgba(207, 214, 230, 0.95);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(27, 31, 59, 0.12);
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.payment-account-card.is-open .payment-account-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

body.is-payment-account-modal-open {
  overflow: hidden;
}

.payment-account-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.payment-account-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 9px;
  background: #eef4ff;
}

.payment-account-logo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.payment-account-head h2 {
  margin: 0;
  color: #111827;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.payment-account-head p {
  margin-top: 8px;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

/* Payment account modal close button */
.payment-account-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #667085;
  border: 0;
  border-radius: 50%;
  background: #f6f7fb;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.payment-account-close:hover,
.payment-account-close:focus-visible {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

@media (prefers-reduced-motion: reduce) {
  .payment-account-card,
  .payment-account-dialog {
    transition-duration: 0.01ms;
  }
}

/* Payment status variants */
[data-payment-status="DepositConfirmed"] .payment-status,
[data-payment-status="Completed"] .payment-status {
  color: #0b8f55;
}

[data-payment-status="DepositCheckRequested"] .payment-status,
[data-payment-status="AccountSubmitted"] .payment-status,
[data-payment-status="Charging"] .payment-status {
  color: var(--color-primary);
}

.payment-account-form {
  display: grid;
  gap: 14px;
}

.payment-account-field {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.payment-account-field > span {
  color: #111827;
  font-size: 13px;
  font-weight: 800;
}

.payment-account-field em {
  color: var(--color-primary);
  font-style: normal;
}

.payment-account-field .input {
  min-height: 42px;
  padding-inline: 14px;
  border-radius: 7px;
  font-size: 13px;
}

.payment-account-help {
  display: grid;
  gap: 20px;
  margin-top: 6px;
  padding: 18px;
  border: 1px solid var(--color-primary-line);
  border-radius: 8px;
  background: rgba(248, 246, 255, 0.7);
}

.payment-account-help h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.payment-account-help h3 span {
  color: #37b4ff;
}

.payment-account-help ol {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding-left: 26px;
  color: #1f2937;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.payment-account-form .btn {
  min-height: 48px;
  margin-top: 4px;
  border-radius: 8px;
  font-size: 15px;
}

.payment-account-secure {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #98a2b3;
  font-size: 12px;
  font-weight: 600;
}

.payment-account-secure .ui-icon {
  width: 15px;
  height: 15px;
}

.mobile-order-summary {
  display: none;
}

.mobile-order-summary-inner {
  width: min(100% - calc(var(--container-padding) * 2), var(--container-max));
  margin-inline: auto;
}

.payment-mobile-guide-compact {
  display: none;
}

.mobile-order-summary-backdrop,
.mobile-order-sheet {
  display: none;
}

/* Cart */
.cart-main {
  padding: 32px 0 74px;
}

.cart-title {
  margin-bottom: 28px;
}

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

.cart-content {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.cart-select-bar,
.cart-group {
  border: 1px solid rgba(207, 214, 230, 0.92);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(27, 31, 59, 0.035);
}

.cart-select-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-color: var(--color-primary-line);
}

.cart-check {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  color: #1f2937;
  font-size: 17px;
  font-weight: 600;
}

.cart-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cart-check span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 1px solid #b7c0d4;
  border-radius: 5px;
  background: #fff;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.cart-check span::after {
  content: "";
  width: 5px;
  height: 10px;
  margin-top: -2px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  opacity: 0;
  transform: rotate(45deg);
}

.cart-check input:checked + span {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.cart-check input:checked + span::after {
  opacity: 1;
}

.cart-check em {
  font-style: normal;
}

.cart-text-btn,
.cart-remove-product,
.cart-option-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #344054;
  font-weight: 600;
}

.cart-text-btn,
.cart-remove-product {
  min-height: 38px;
  padding: 0 10px;
  border-radius: 8px;
}

.cart-text-btn:hover,
.cart-remove-product:hover {
  color: var(--color-primary);
  background: #f6f4ff;
}

.cart-text-btn .ui-icon,
.cart-remove-product .ui-icon {
  width: 18px;
  height: 18px;
}

.cart-group-list {
  display: grid;
  gap: 16px;
}

.cart-group {
  padding: 20px 22px 10px;
}

.cart-product-head {
  display: grid;
  grid-template-columns: 24px 150px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  padding-bottom: 18px;
}

.cart-product-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 0.92;
  border-radius: 10px;
  background: #f4f1ff;
}

.cart-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-product-thumb .product-badge {
  top: 9px;
  left: 9px;
  min-height: 22px;
  padding: 0 10px;
  border: 1px solid var(--color-primary-line);
  background: linear-gradient(135deg, #ffffff 0%, #f4f1ff 100%);
  color: var(--color-primary);
  box-shadow: 0 8px 18px rgba(91, 75, 255, 0.12);
  font-size: 10px;
}

.cart-product-thumb .product-badge-value {
  color: #372cff;
  font-weight: 900;
}

.cart-product-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 13px;
}

.cart-product-badges .detail-chip {
  margin-bottom: 0;
}

.cart-discount-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 12px;
  color: var(--color-primary);
  border: 1px solid var(--color-primary-line);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.cart-product-info h2 {
  color: #050505;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
}

.cart-product-info p {
  margin-top: 14px;
  color: #344054;
  font-size: 15px;
  line-height: 1.6;
}

.cart-remove-product {
  justify-self: end;
  white-space: nowrap;
}

.cart-option-list {
  border-top: 1px solid var(--color-border);
}

.cart-option-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) 108px 78px 108px 118px 122px 24px;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 14px 0;
  border-bottom: 1px solid #edf0f6;
}

.cart-option-row:last-child {
  border-bottom: 0;
}

.cart-option-name {
  color: #050505;
  font-size: 15px;
  font-weight: 600;
}

.cart-option-row del {
  color: #98a2b3;
  font-size: 14px;
  text-align: right;
}

.cart-option-discount {
  color: #ff1f3d;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.cart-option-row [data-cart-unit],
.cart-option-total {
  color: #050505;
  font-size: 15px;
  font-weight: 800;
  text-align: right;
}

.cart-option-row .quantity {
  grid-template-columns: 32px 42px 32px;
  min-height: 32px;
  justify-self: center;
}

.cart-option-remove {
  color: #344054;
  font-size: 24px;
  line-height: 1;
}

.cart-group-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  padding: 12px 18px;
  border: 1px solid var(--color-primary-line);
  border-radius: 8px;
  background: #fbfaff;
}

.cart-group-total span {
  color: #344054;
  font-size: 14px;
  font-weight: 500;
}

.cart-group-total strong {
  color: var(--color-primary);
  font-size: 17px;
  font-weight: 850;
}

.cart-summary {
  padding: 18px;
}

.cart-summary-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-bottom: 0;
  border-bottom: 0;
}

.cart-summary-list::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 8px;
  background: var(--color-border);
}

.cart-summary-list div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #344054;
  font-size: 14px;
}

.cart-summary-list span,
.cart-summary-list strong {
  color: inherit;
  font-size: 14px;
  font-weight: 500;
}

.cart-summary-list .is-discount,
.cart-summary-list .is-discount strong {
  color: #ff1f3d;
}

.order-total,
.cart-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid var(--color-primary-line);
  border-radius: 10px;
  background: #fbfaff;
}

.order-total span,
.cart-summary-total span {
  flex: 0 0 auto;
  color: #050505;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.order-total strong,
.cart-summary-total strong {
  min-width: 0;
  color: var(--color-primary);
  font-size: 23px;
  font-weight: 850;
  line-height: 1.15;
  text-align: right;
  white-space: nowrap;
}

.cart-summary-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.cart-summary-actions .btn {
  min-height: 48px;
  padding-inline: 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
}

.cart-empty {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 64px 20px;
  border: 1px dashed var(--color-border);
  border-radius: 14px;
  background: #fbfcff;
}

.cart-empty strong {
  color: #344054;
  font-size: 18px;
}

/* Order review modal */
.order-review-modal{z-index:1210}.order-review-dialog{width:min(560px,calc(100% - 32px));padding:0;overflow:hidden;border-radius:22px}.order-review-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:28px 30px 22px;border-bottom:1px solid #eceaf2}.order-review-head>div>span{display:block;margin-bottom:6px;color:#7461ef;font-size:11px;font-weight:900;letter-spacing:.14em}.order-review-head h2{margin:0;color:#171820;font-size:24px;font-weight:850;letter-spacing:-.045em}.order-review-head p{margin:8px 0 0;color:#777f90;font-size:13px;line-height:1.55}.order-review-close{display:grid;flex:0 0 36px;width:36px;height:36px;padding:0;border:1px solid #e3e0ee;border-radius:50%;color:#646a79;background:#fff;font-size:25px;line-height:1;place-items:center}.order-review-product{display:flex;align-items:center;gap:14px;margin:22px 30px 0;padding:16px 18px;border:1px solid #e4e0fa;border-radius:14px;background:#faf9ff}.order-review-product>.ui-icon{flex:0 0 40px;width:40px;height:40px;padding:10px;border-radius:12px;color:#6d5af0;background:#efecff}.order-review-product div{display:grid;min-width:0;gap:5px}.order-review-product small{overflow:hidden;color:#818899;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.order-review-product small b{margin-left:5px;color:#626a79}.order-review-product strong{overflow:hidden;color:#252832;font-size:15px;text-overflow:ellipsis;white-space:nowrap}.order-review-form{padding:23px 30px 28px}.order-review-rating{margin:0;padding:0;border:0}.order-review-rating legend,.order-review-content>span{display:block;margin-bottom:11px;color:#292c37;font-size:14px;font-weight:800}.order-review-rating em,.order-review-content em{color:#f14f67;font-style:normal}.order-review-stars{display:flex;width:max-content;flex-direction:row-reverse;justify-content:flex-end}.order-review-stars input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}.order-review-stars label{cursor:pointer;color:#d9dbe3;font-size:34px;line-height:1;transition:color 140ms ease,transform 140ms ease}.order-review-stars label:hover,.order-review-stars label:hover~label,.order-review-stars input:checked~label{color:#ffbf3e}.order-review-stars label:hover{transform:translateY(-2px)}.order-review-stars input:focus-visible+label{outline:2px solid #7461ef;outline-offset:3px;border-radius:3px}.order-review-rating p{margin:8px 0 0;color:#8b91a0;font-size:11px}.order-review-content{position:relative;display:block;margin-top:22px}.order-review-content textarea{box-sizing:border-box;width:100%;min-height:130px;padding:15px 16px 30px;resize:vertical;border:1px solid #dddfea;border-radius:12px;outline:0;color:#252832;background:#fff;font:inherit;font-size:13px;line-height:1.65;transition:border-color 160ms ease,box-shadow 160ms ease}.order-review-content textarea:focus{border-color:#7461ef;box-shadow:0 0 0 3px rgba(116,97,239,.1)}.order-review-content textarea::placeholder{color:#afb3be}.order-review-content>small{position:absolute;right:13px;bottom:11px;color:#9ca1ae;font-size:10px}.order-review-content>small b{color:#6553e8}.order-review-guide{display:flex;align-items:center;gap:7px;margin:13px 0 0;color:#858b99;font-size:11px}.order-review-guide .ui-icon{width:15px;height:15px;color:#7461ef}.order-review-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}.order-review-actions .btn{min-height:46px;border-radius:11px;font-size:14px;font-weight:800}

@media(max-width:640px){.order-review-modal{align-items:flex-end;padding:0}.order-review-dialog{width:100%;max-height:92vh;margin:0;border-radius:22px 22px 0 0;overflow-y:auto}.order-review-head{padding:23px 20px 18px}.order-review-head h2{font-size:21px}.order-review-head p{font-size:12px}.order-review-product{margin:18px 20px 0;padding:14px}.order-review-form{padding:20px 20px calc(22px + env(safe-area-inset-bottom))}.order-review-stars label{font-size:31px}.order-review-content textarea{min-height:120px}.order-review-actions{position:sticky;bottom:0;margin:22px -20px -22px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -8px 20px rgba(35,31,59,.06)}}

/* Order review entry points */
[data-order-detail-url]{cursor:pointer}[data-order-detail-url]:focus-visible{outline:2px solid #7461ef;outline-offset:-2px}.order-row-actions{display:flex;align-items:center;justify-content:center}.order-row-actions .order-review-trigger,.order-card-actions .order-review-trigger{display:inline-flex;align-items:center;justify-content:center;gap:5px;box-sizing:border-box;min-height:36px;margin:0;padding:0 13px;border:1px solid #cfc7ff;border-radius:10px;color:#5d4ae1;background:#f5f3ff;box-shadow:0 3px 10px rgba(80,65,170,.06);font-size:11px;font-weight:800;white-space:nowrap}.order-row-actions .order-review-trigger>span,.order-card-actions .order-review-trigger>span{font-size:15px;line-height:1}.order-row-actions .order-review-trigger:hover,.order-card-actions .order-review-trigger:hover{border-color:#6553e8;color:#fff;background:#6553e8;box-shadow:0 6px 14px rgba(101,83,232,.18)}.order-review-unavailable{color:#b1b5c0;font-size:13px}.order-card-actions{display:flex;justify-content:flex-end;margin-top:14px}.order-card-actions .order-review-trigger{min-height:40px;padding:0 16px;font-size:12px}
.order-review-complete,.order-review-trigger.is-complete{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 13px;border:1px solid #ccebdc;border-radius:10px;color:#16825d;background:#effaf5;font-size:11px;font-weight:800;white-space:nowrap}.order-card-actions .order-review-complete{min-height:40px;padding:0 16px;font-size:12px}.order-review-trigger.is-complete:disabled{cursor:default;opacity:1}

/* Order review product image and rating feedback */
.order-review-product-image{display:grid;flex:0 0 48px;width:48px;height:48px;overflow:hidden;border:1px solid #e5e1f8;border-radius:13px;background:#fff;place-items:center}.order-review-product-image img{display:block;width:100%;height:100%;padding:5px;object-fit:contain}.order-review-product-image img[hidden]{display:none}.order-review-product-image .ui-icon{width:24px;height:24px;color:#7562ef}.order-review-product-image .ui-icon[hidden]{display:none}.order-review-stars input:checked~label{filter:drop-shadow(0 4px 5px rgba(255,181,45,.28))}.order-review-stars label.is-popping{animation:order-review-star-pop 420ms cubic-bezier(.2,.9,.3,1.35)}
@keyframes order-review-star-pop{0%{transform:scale(1)}38%{color:#ffad20;filter:drop-shadow(0 0 8px rgba(255,184,48,.68));transform:translateY(-7px) scale(1.32) rotate(-8deg)}70%{transform:translateY(1px) scale(.94) rotate(3deg)}100%{transform:translateY(0) scale(1) rotate(0)}}
@media(prefers-reduced-motion:reduce){.order-review-stars label.is-popping{animation:none}}

/* Rounded review rating stars */
.order-review-stars label{display:grid;width:42px;height:42px;place-items:center}
.order-review-star-icon{display:block;width:38px;height:38px;fill:currentColor;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:filter 140ms ease,transform 140ms ease}
.order-review-stars label:hover .order-review-star-icon{filter:drop-shadow(0 4px 5px rgba(255,181,45,.28))}
@media(max-width:640px){.order-review-stars label{width:39px;height:39px}.order-review-star-icon{width:35px;height:35px}}

@charset "utf-8";

/* ==========================================================================
   Common Responsive Rules
   PC-first base with mobile-heavy service use considered from the start.
   ========================================================================== */

@media (max-width: 1200px) {
  :root {
    --container-padding: 20px;
  }

  .grid-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-service-list {
    right: 54px;
    bottom: 50px;
    left: 390px;
    gap: 8px;
  }

  .hero-service-card img {
    width: 82px;
    height: 82px;
    padding: 12px;
  }

  .product-list-banner-actions {
    right: 48px;
    bottom: 34px;
    left: 48px;
  }

  .product-list-banner-btn {
    width: 112px;
    min-width: 112px;
    height: 50px;
    min-height: 50px;
    padding-inline: 16px;
  }
}

@media (max-width: 1100px) {
  .product-detail-page {
    padding-bottom: 116px;
  }

  .product-detail-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .product-detail-content {
    order: 1;
  }

  .detail-order-panel {
    order: 2;
    position: static;
    width: 100%;
    max-width: 100%;
    display: none;
  }

  .product-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-order-summary {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    display: block;
    padding: 12px 0 max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(207, 214, 230, 0.9);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -10px 30px rgba(27, 31, 59, 0.12);
    backdrop-filter: blur(14px);
    isolation: isolate;
  }

  .mobile-order-summary.is-open .mobile-order-summary-backdrop {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    z-index: 0;
    display: block;
    height: 100vh;
    border: 0;
    background: rgba(17, 24, 39, 0.34);
  }

  .mobile-order-sheet {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    display: block;
    max-height: min(68vh, 560px);
    padding: 10px var(--container-padding) 18px;
    overflow-y: auto;
    border-top: 1px solid rgba(207, 214, 230, 0.92);
    border-radius: 18px 18px 0 0;
    background: #fff;
    box-shadow: 0 -18px 44px rgba(27, 31, 59, 0.18);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transform: translateY(18px);
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  .mobile-order-summary.is-open .mobile-order-sheet {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .mobile-order-sheet-handle {
    width: 42px;
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 999px;
    background: #d8deea;
  }

  .mobile-order-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }

  .mobile-order-sheet-head h2 {
    color: #050505;
    font-size: 17px;
    font-weight: 850;
  }

  .mobile-order-sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #667085;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: #fff;
    font-size: 22px;
    line-height: 1;
  }

  .mobile-selected-product {
    margin-top: 0;
    padding-bottom: 14px;
  }

  .mobile-selected-product .selected-product-list {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 2px;
  }

  .mobile-selected-product .selected-product-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    padding-bottom: 14px;
  }

  .mobile-order-price-list {
    margin-top: 14px;
  }

  .mobile-order-summary-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .mobile-order-summary-info {
    display: grid;
    gap: 0;
    min-width: 0;
  }

  .mobile-order-summary-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(225, 230, 240, 0.95);
  }

  .mobile-order-summary-title {
    color: #111827;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
  }

  .mobile-order-summary-price {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
  }

  .mobile-order-summary-label {
    display: none;
  }

  .mobile-order-summary-price strong {
    color: #050505;
    font-size: 22px;
    font-weight: 850;
    line-height: 1.15;
    white-space: nowrap;
  }

  .mobile-order-summary-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: 1px solid #cfd6e6;
    border-radius: 50%;
    background: #fff;
    transition: border-color 0.18s ease, transform 0.18s ease;
  }

  .mobile-order-summary-toggle::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: 3px;
    border-top: 2px solid #8a93a6;
    border-left: 2px solid #8a93a6;
    transform: rotate(45deg);
    transition: transform 0.2s ease, margin 0.2s ease, border-color 0.18s ease;
  }

  .mobile-order-summary.is-open .mobile-order-summary-toggle {
    border-color: var(--color-primary-line);
  }

  .mobile-order-summary.is-open .mobile-order-summary-toggle::before {
    margin-top: -3px;
    border-color: var(--color-primary);
    transform: rotate(225deg);
  }

  .mobile-order-summary-info small {
    display: none;
  }

  .mobile-order-summary-actions {
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    gap: 10px;
  }

  .mobile-order-summary-actions .btn {
    min-height: 56px;
    padding-inline: 14px;
    border-radius: 7px;
    font-size: 18px;
    font-weight: 900;
    white-space: nowrap;
  }
}

@media (max-width: 1024px) {
  .mypage-info-grid {
    gap: 56px;
  }

  .mypage-table {
    min-width: 980px;
  }

  .mypage-table th,
  .mypage-table td {
    padding: 11px 18px;
  }

  .order-history-panel {
    padding: 28px 28px 32px;
  }

  .order-history-full-table {
    min-width: 1040px;
  }

  .profile-edit-container {
    width: min(100% - calc(var(--container-padding) * 2), 500px);
  }

  .customer-center-container {
    width: min(100% - calc(var(--container-padding) * 2), 720px);
  }
}

/* Order History: 태블릿 구간에서는 PC 테이블 대신 카드 목록을 사용해 가로 스크롤을 방지합니다. */
@media (max-width: 1180px) {
  body.order-history-page {
    overflow-x: hidden;
  }

  .order-history-page .order-history-section,
  .order-history-page .order-history-panel,
  .order-history-page .order-history-mobile-grid,
  .order-history-page .mypage-mobile-order-card,
  .order-history-page .order-history-toolbar {
    min-width: 0;
    max-width: 100%;
  }

  .order-history-page .order-history-table-wrap {
    display: none;
  }

  .order-history-page .order-history-mobile-grid {
    display: grid;
    gap: 14px;
  }
}

@media (max-width: 768px) {
  .mypage-hero {
    padding: 34px 0 30px;
  }

  .mypage-eyebrow {
    font-size: 13px;
  }

  .mypage-heading h1 {
    font-size: 24px;
  }

  .mypage-heading p {
    margin-top: 14px;
    font-size: 14px;
  }

  .mypage-section {
    padding-bottom: 48px;
  }

  .mypage-section-title {
    gap: 10px;
    margin-bottom: 18px;
  }

  .mypage-section-title .ui-icon {
    width: 21px;
    height: 21px;
  }

  .mypage-section-title h2 {
    font-size: 18px;
  }

  .mypage-table {
    min-width: 900px;
    font-size: 14px;
  }

  .order-product {
    gap: 14px;
  }

  .order-logo {
    width: 40px;
    height: 40px;
  }

  .mypage-more {
    margin-top: 20px;
  }

  .mypage-info-grid {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .mypage-info-list div {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .order-history-panel {
    padding: 22px 18px 26px;
  }

  .order-history-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 22px;
  }

  .order-history-search {
    width: 100%;
  }

  .order-history-full-table {
    min-width: 920px;
  }

  .order-history-full-table th,
  .order-history-full-table td {
    padding: 11px 18px;
  }

  .order-history-pagination {
    gap: 6px;
    overflow-x: visible;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 2px;
  }

  .profile-edit-hero {
    padding-bottom: 28px;
  }

  .profile-edit-block {
    padding-bottom: 34px;
  }

  .profile-edit-block + .profile-edit-block {
    padding-top: 30px;
  }

  .profile-edit-form {
    gap: 14px;
  }

  .profile-readonly-notice {
    margin-bottom: 16px;
    font-size: 12px;
  }

  .sns-connect-row {
    min-height: 58px;
    padding-inline: 16px;
  }

  .customer-center-hero {
    padding: 36px 0 28px;
  }

  .customer-tab-btn {
    min-width: 150px;
    font-size: 15px;
  }

  .customer-list-item {
    min-height: 76px;
    padding: 16px 20px;
  }

  .customer-answer-inner {
    padding-inline: 20px;
  }

  .customer-list-entry.is-active .customer-answer-inner {
    padding: 16px 20px 18px;
  }

  .customer-pagination {
    overflow-x: visible;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 2px;
  }
}

@media (max-width: 480px) {
  .mypage-main {
    padding-bottom: 32px;
  }

  .mypage-hero {
    padding: 28px 0 26px;
  }

  .mypage-heading h1 {
    font-size: 24px;
  }

  .mypage-heading p {
    font-size: 13px;
  }

  .mypage-table {
    min-width: 820px;
    font-size: 13px;
  }

  .mypage-table th,
  .mypage-table td {
    padding: 10px 14px;
  }

  .mypage-detail-btn {
    min-height: 34px;
    font-size: 12px;
  }

  .mypage-more-btn,
  .mypage-edit-btn {
    min-height: 44px;
    font-size: 13px;
  }

  .mypage-info-list div {
    grid-template-columns: 94px minmax(0, 1fr);
    min-height: 56px;
  }

  .mypage-info-list dt,
  .login-history-list span,
  .login-history-list em {
    font-size: 12px;
  }

  .mypage-info-list dd,
  .login-history-list strong,
  .login-history-list time {
    font-size: 13px;
  }

  .login-history-list div {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 8px 12px;
    padding: 12px 0;
  }

  .order-history-main {
    padding-bottom: 36px;
  }

  .order-history-hero {
    padding-bottom: 22px;
  }

  .order-history-panel {
    padding: 18px 14px 22px;
  }

  .order-history-count {
    font-size: 17px;
  }

  .order-history-search input {
    font-size: 13px;
  }

  .order-history-full-table {
    min-width: 820px;
  }

  .order-history-product {
    gap: 12px;
  }

  .order-history-product strong {
    font-size: 13px;
  }

  .order-history-product em {
    font-size: 12px;
  }

  .order-page-number,
  .order-page-nav {
    min-width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .profile-edit-main {
    padding-bottom: 36px;
  }

  .profile-edit-block {
    padding-bottom: 28px;
  }

  .profile-edit-block + .profile-edit-block {
    padding-top: 26px;
  }

  .sns-connect-row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 12px;
  }

  .sns-connect-state,
  .sns-connect-btn {
    grid-column: auto;
    justify-self: end;
    white-space: nowrap;
  }

  .sns-connect-btn {
    width: auto;
    min-width: 82px;
    min-height: 36px;
    padding-inline: 10px;
    font-size: 13px;
  }

  .sns-connect-state {
    gap: 5px;
    font-size: 12px;
  }

  .sns-connect-state .ui-icon {
    width: 18px;
    height: 18px;
    padding: 3px;
  }

  .profile-help-text {
    font-size: 12px;
  }

  .profile-readonly-notice {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 8px;
    padding: 11px 12px;
    font-size: 12px;
  }

  .profile-readonly-notice::before {
    width: 16px;
    height: 16px;
    font-size: 11px;
  }

  .customer-center-main {
    padding-bottom: 38px;
  }

  .customer-center-hero {
    padding: 30px 0 22px;
  }

  .customer-tab-list {
    justify-content: stretch;
  }

  .customer-tab-btn {
    flex: 1;
    min-width: 0;
    min-height: 46px;
    font-size: 14px;
  }

  .customer-tab-panel {
    padding-top: 16px;
  }

  .customer-list-item {
    min-height: 70px;
    padding: 14px 14px;
  }

  .customer-answer-inner {
    padding-inline: 14px;
    font-size: 12px;
  }

  .customer-list-entry.is-active .customer-answer-inner {
    padding: 14px 14px 16px;
  }

  .customer-item-content strong,
  .faq-list-item strong {
    font-size: 14px;
  }

  .customer-item-content em {
    display: block;
    margin: 0 0 4px;
  }

  .customer-item-content time {
    font-size: 12px;
  }

  .faq-list-item {
    grid-template-columns: 24px minmax(0, 1fr) 20px;
    gap: 12px;
  }
}

@media (max-width: 1024px) {
  :root {
    --font-size-3xl: 34px;
    --font-size-2xl: 26px;
  }

  .layout-sidebar {
    grid-template-columns: 1fr;
  }

  .summary-card {
    position: static;
  }

  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-banner {
    min-height: 340px;
  }

  .home-hero-swiper,
  .home-hero-swiper .swiper-wrapper,
  .home-hero-slide {
    height: 340px;
  }

  .hero-service-list {
    right: 40px;
    bottom: 46px;
    left: 360px;
    display: flex;
    gap: 10px;
  }

  .hero-service-card img {
    width: 76px;
    height: 76px;
    padding: 11px;
    border-radius: 16px;
  }

  .hero-controls {
    bottom: 42px;
    left: 82px;
    display: flex;
  }

  .main-product-grid,
  .main-promo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-list-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .product-list-grid.is-widget-view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-detail-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    gap: 22px;
  }

  .product-overview-grid {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
  }

  .product-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-list-toolbar {
    gap: 18px;
  }

  .product-list-toolbar-left,
  .product-list-toolbar-right {
    gap: 16px;
  }

  .product-list-select {
    min-width: 150px;
  }

  .popular-product-grid {
    max-width: 760px;
  }

  .section-head-product {
    align-items: flex-start;
  }

  .main-search {
    width: min(100%, 320px);
    margin-top: 18px;
  }

  .support-grid,
  .board-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding: 16px;
    --header-height: 64px;
    --font-size-3xl: 30px;
    --font-size-2xl: 24px;
    --font-size-xl: 20px;
  }

  .section {
    padding-block: var(--space-8);
  }

  .site-header {
    border-bottom-color: rgba(126, 126, 160, 0.16);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 20px rgba(13, 19, 33, 0.04);
  }

  .site-header-inner {
    min-height: var(--header-height);
    padding: 0 16px;
    gap: 8px;
  }

  .logo {
    min-height: 40px;
    margin-right: auto;
  }

  .logo-text {
    font-size: 24px;
  }

  .gnb {
    position: fixed;
    top: var(--header-height);
    right: 0;
    left: 0;
    z-index: 99;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0;
    padding: 10px var(--container-padding) 16px;
    border-top: 1px solid rgba(231, 234, 243, 0.86);
    border-bottom: 1px solid rgba(231, 234, 243, 0.96);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 22px 34px rgba(13, 19, 33, 0.1);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
  }

  .site-action-divider {
    display: none;
  }

  .site-cart-link {
    position: relative;
    width: 100%;
  }

  .gnb > .gnb-link,
  .gnb > .header-signup {
    display: none;
  }

  .gnb.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .gnb-link,
  .gnb .btn {
    justify-content: flex-start;
    width: 100%;
  }

  .gnb-link {
    min-height: 50px;
    padding: 0 4px;
    border-bottom: 1px solid rgba(231, 234, 243, 0.88);
    color: var(--color-text-strong);
    font-size: 15px;
  }

  .site-cart-link {
    justify-content: space-between;
  }

  .site-cart-link::before {
    content: "장바구니";
  }

  .site-cart-link .ui-icon {
    margin-left: auto;
  }

  .site-cart-link .cart-count {
    position: static;
    margin-left: 8px;
  }

  .gnb .header-signup {
    min-height: 48px;
    margin-top: 10px;
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
  }

  .mobile-menu-content {
    display: grid;
    gap: 0;
  }

  .mobile-menu-link {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 0 4px;
    border-bottom: 1px solid rgba(231, 234, 243, 0.88);
    color: var(--color-text-strong);
    font-size: 15px;
    font-weight: 700;
  }

  .mobile-menu-link.is-primary {
    justify-content: center;
    min-height: 48px;
    margin-top: 10px;
    padding: 0 18px;
    color: var(--color-white);
    border-bottom: 0;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
  }

  .mobile-menu-link.is-outline {
    justify-content: center;
    min-height: 48px;
    margin-top: 8px;
    padding: 0 18px;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: var(--color-white);
  }

  .mobile-menu-link.is-muted {
    color: var(--color-muted);
  }

  .mobile-menu[aria-expanded="true"] {
    color: var(--color-primary);
    background: transparent;
  }

  .mobile-menu[aria-expanded="true"] .ui-icon-menu {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.4 5 5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.4 5 5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5Z'/%3E%3C/svg%3E");
  }

  .mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .mobile-header-action,
  .icon-btn.mobile-menu {
    border-color: transparent;
    background: transparent;
  }

  .site-footer {
    margin-top: 42px;
    padding: 36px 0 30px;
  }

  .site-footer .container {
    padding-inline: 24px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 22px;
  }

  .footer-cs {
    text-align: left;
  }

  .footer-cs-phone {
    font-size: 28px;
  }

  .footer-info-list {
    font-size: 14px;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .footer-policy {
    justify-content: flex-start;
    gap: 18px;
    font-size: 14px;
  }

  .icon-btn.mobile-menu {
    display: inline-flex;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .main-hero {
    padding-top: 18px;
  }

  .hero-banner {
    min-height: 300px;
    aspect-ratio: auto;
    overflow: visible;
    margin-bottom: 104px;
  }

  .home-hero-swiper,
  .home-hero-swiper .swiper-wrapper,
  .home-hero-slide {
    height: 300px;
  }

  .hero-banner-media > img {
    object-position: center center;
  }

  .hero-service-list {
    top: calc(100% + 14px);
    right: 4px;
    bottom: auto;
    left: 4px;
    justify-content: center;
    gap: 12px;
  }

  .hero-service-card {
    gap: 5px;
    font-size: 10px;
  }

  .hero-service-card img {
    width: 70px;
    height: 70px;
    padding: 10px;
    border-radius: 14px;
  }

  .hero-controls {
    display: none;
  }

  .product-list-hero {
    padding: 18px 0 32px;
  }

  .product-list-banner {
    border-radius: 22px;
  }

  .product-list-banner img {
    aspect-ratio: 1456 / 1040;
    height: auto;
    object-position: center;
  }

  .product-list-banner-actions {
    right: 16px;
    bottom: 16px;
    left: 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    padding-bottom: 0;
  }

  .product-list-banner-actions::-webkit-scrollbar {
    display: none;
  }

  .product-list-banner-btn {
    width: 100%;
    min-width: 0;
    height: 42px;
    min-height: 42px;
    padding-inline: 8px;
    gap: 6px;
    font-size: 11px;
  }

  .product-list-banner-btn img {
    width: 20px;
    height: 20px;
  }

  .product-list-banner-logo-btn {
    min-width: 0;
    min-height: 42px;
    padding-inline: 8px;
  }

  .product-list-banner-logo-btn img {
    width: auto;
    max-width: 74px;
    max-height: 30px;
    height: auto;
  }

  .product-list-banner-icon {
    width: 24px;
    height: 24px;
  }

  .product-list-banner-icon .ui-icon {
    width: 15px;
    height: 15px;
  }

  .product-list-section {
    padding-bottom: 54px;
  }

  .product-list-toolbar {
    align-items: center;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) 40px;
    gap: 12px 8px;
    margin-bottom: 22px;
  }

  .product-list-toolbar-left,
  .product-list-toolbar-right {
    display: contents;
  }

  .product-list-select,
  .product-list-view-btn {
    min-height: 38px;
  }

  .product-list-select {
    min-width: 0;
    padding-inline: 12px;
    gap: 6px;
    font-size: 12px;
  }

  .product-list-search {
    grid-column: 1 / 4;
    order: 1;
    width: 100%;
    max-width: none;
    height: 40px;
    margin: 0;
  }

  .product-list-toolbar-left .product-list-dropdown,
  .product-list-search {
    min-width: 0;
  }

  .product-list-count,
  .product-list-toolbar-left .product-list-dropdown,
  .product-list-sort-dropdown {
    order: 0;
  }

  .product-list-view-btn {
    grid-column: 4;
    justify-self: end;
    order: 1;
    width: 40px;
    height: 40px;
  }

  .product-list-dropdown .product-list-select {
    width: 100%;
  }

  .product-list-sort-dropdown {
    grid-column: 3 / 5;
    width: 100%;
    min-width: 0;
  }

  .product-list-count {
    font-size: 12px;
    padding-left: 6px;
    white-space: nowrap;
  }

  .product-list-count strong {
    font-size: 13px;
  }

  .product-list-view-btn {
    width: 40px;
  }

  .product-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
  }

  .product-list-grid.is-widget-view {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .product-detail-main {
    padding-top: 20px;
  }

  .product-detail-title h1 {
    font-size: 26px;
  }

  .product-detail-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .product-detail-content {
    order: 1;
  }

  .detail-order-panel {
    order: 2;
    position: static;
    width: 100%;
    max-width: 100%;
  }

  .product-overview-grid {
    grid-template-columns: 1fr;
  }

  .product-overview-thumb {
    max-width: 320px;
  }

  .detail-meta-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .detail-meta-item {
    padding-inline: 0;
    border-right: 0;
  }

  .detail-tabs {
    justify-content: flex-start;
  }

  .detail-tabs .tab-btn {
    min-width: 150px;
  }

  .detail-review-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px;
  }

  .detail-review-stars {
    font-size: 0;
  }

  .section-head,
  .section-head-product {
    align-items: stretch;
    flex-direction: column;
  }

  .main-product-grid,
  .main-promo-grid,
  .support-grid,
  .news-faq-grid,
  .board-grid {
    grid-template-columns: 1fr;
  }

  .faq-panel {
    padding: 28px 0 0;
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }

  .popular-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
    gap: 14px;
  }

  .popular-product-grid .product-badge {
    top: 10px;
    right: 10px;
    left: auto;
    min-height: 24px;
    padding: 0 8px;
    font-size: 10px;
  }

  .popular-product-grid .product-badge-value {
    font-size: 1.05em;
  }

  .popular-product-grid .product-info {
    padding: 12px 12px 14px;
  }

  .popular-product-grid .product-name {
    font-size: 14px;
  }

  .popular-product-grid .product-desc,
  .popular-product-grid .product-link {
    font-size: 12px;
  }

  .popular-product-grid .product-price {
    margin-top: 12px;
    padding-bottom: 10px;
    font-size: 12px;
  }

  .main-search {
    width: 100%;
  }

  .section-head-product {
    gap: 14px;
  }

  .section-head-product .main-category-tabs {
    margin-top: 14px;
  }

  .section-head-product .main-search {
    margin-top: 6px;
  }

  .main-category-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: calc(var(--container-padding) * -1);
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .main-category-tabs::-webkit-scrollbar {
    display: none;
  }

  .main-category-tabs .chip {
    flex: 0 0 auto;
  }

  .quick-service-grid {
    grid-template-columns: 1fr;
  }

  .tabs {
    overflow-x: auto;
    white-space: nowrap;
  }

  .tab-btn {
    flex: 0 0 auto;
    padding-inline: 22px;
  }

  .card-body,
  .guide-panel {
    padding: var(--space-5);
  }

  .guide-brand {
    grid-template-columns: 1fr;
  }

  .promo-widget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .main-promo-grid {
    grid-template-columns: 1fr;
  }

  .main-promo-grid:not(.is-active) .promo-widget:nth-child(n+6) {
    display: none;
  }

  .mobile-more-actions {
    display: flex;
  }

  .promo-widget {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 16px;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }

  .promo-widget-title {
    font-size: 16px;
  }

  .promo-widget-desc {
    font-size: 13px;
  }

  .promo-widget-sale {
    font-size: 12px;
  }

  .main-board-section .container {
    padding-inline: 22px;
  }

  .board-grid {
    gap: 30px;
  }

  .btn-lg {
    min-height: 56px;
  }

  .input,
  .select {
    min-height: 52px;
  }

  .breadcrumb {
    max-width: 100%;
    overflow-x: auto;
  }

  .auth-main {
    padding-block: 28px 20px;
  }

  .auth-panel {
    width: min(100%, 460px);
  }

  .auth-heading {
    margin-bottom: 18px;
  }

  .auth-eyebrow {
    font-size: 13px;
  }

  .auth-heading h1 {
    font-size: 24px;
  }

  .auth-form {
    gap: 20px;
  }

  .auth-field,
  .identity-button,
  .signup-submit {
    min-height: 44px;
  }

  .auth-field input,
  .auth-field select {
    min-height: 42px;
    padding-left: 48px;
    padding-right: 38px;
    font-size: 13px;
  }

  .auth-field-icon {
    left: 16px;
    width: 16px;
    height: 16px;
  }

  .auth-field-action,
  .auth-field-state {
    right: 8px;
    width: 25px;
    height: 25px;
  }

  .identity-button,
  .signup-submit {
    gap: 8px;
    font-size: 13px;
  }

  .auth-info-box {
    gap: 10px;
    padding: 12px 14px;
    font-size: 12px;
  }

  .password-rule-list,
  .auth-error-message {
    padding-left: 12px;
    font-size: 12px;
  }

  .terms-section {
    gap: 16px;
  }

  .terms-row {
    min-height: 44px;
    gap: 10px;
    padding-inline: 14px;
    font-size: 12px;
  }

  .terms-detail {
    padding: 0 12px 12px 38px;
  }

  .terms-detail-scroll {
    max-height: 108px;
  }

  .login-main {
    padding-top: 34px;
  }

  .login-panel {
    width: min(100%, 400px);
  }

  .login-panel .auth-field,
  .login-panel .signup-submit,
  .login-panel .auth-divider {
    width: 100%;
  }

  .login-intro {
    font-size: 14px;
  }

  .sns-login-list {
    gap: 22px;
    margin-top: 22px;
  }

  .sns-login-button {
    width: 52px;
    height: 52px;
  }

  .sns-login-naver {
    font-size: 25px;
  }

  .auth-divider {
    gap: 12px;
    margin: 28px 0 18px;
    font-size: 14px;
  }

  .auth-link-group {
    margin-top: 22px;
    font-size: 14px;
  }

  .find-password-main {
    padding-top: 34px;
  }

  .find-password-panel {
    width: min(100%, 400px);
  }

  .find-password-heading .auth-eyebrow {
    font-size: 13px;
  }

  .find-password-heading .auth-eyebrow::after {
    width: 26px;
  }

  .find-password-intro {
    margin-bottom: 26px;
  }

  .find-password-panel .auth-field,
  .find-password-panel .signup-submit {
    width: 100%;
  }
}

@media (max-width: 480px) {
  html {
    min-width: 0;
  }

  :root {
    --container-padding: 14px;
    --font-size-3xl: 26px;
    --font-size-2xl: 22px;
  }

  .page-heading {
    margin-bottom: var(--space-6);
  }

  .main-section {
    padding: 34px 0;
  }

  .section-head {
    gap: 16px;
    margin-bottom: 22px;
  }

  .section-head h2 {
    font-size: 22px;
  }

  .main-category-tabs {
    gap: 8px;
  }

  .main-category-tabs .chip {
    min-height: 38px;
    padding-inline: 16px;
  }

  .main-search {
    height: 46px;
  }

  .btn {
    width: 100%;
    padding-inline: 18px;
  }

  .btn-sm,
  .btn-text,
  .icon-btn,
  .quantity button {
    width: auto;
  }

  .icon-btn {
    width: 40px;
    height: 40px;
  }

  .product-name {
    font-size: var(--font-size-lg);
  }

  .product-info {
    padding: var(--space-4);
  }

  .promo-widget-grid {
    grid-template-columns: 1fr;
  }

  .hero-banner {
    min-height: 270px;
    border-radius: 20px;
    margin-bottom: 96px;
  }

  .home-hero-swiper,
  .home-hero-swiper .swiper-wrapper,
  .home-hero-slide {
    height: 270px;
  }

  .hero-service-list {
    top: calc(100% + 12px);
    right: 0;
    bottom: auto;
    left: 0;
    gap: 9px;
  }

  .hero-service-card img {
    width: 62px;
    height: 62px;
    padding: 8px;
    border-radius: 12px;
  }

  .hero-controls {
    display: none;
  }

  .popular-product-grid .product-info {
    padding: 12px;
  }

  .popular-product-grid .product-name {
    font-size: 14px;
  }

  .popular-product-grid .product-desc,
  .popular-product-grid .product-link {
    font-size: 12px;
  }

  .popular-product-grid .product-price {
    margin-top: 12px;
    padding-bottom: 10px;
    font-size: 12px;
  }

  .section-head-product .main-category-tabs {
    margin-top: 14px;
  }

  .section-head-product .main-search {
    margin-top: 6px;
  }

  .product-list-banner {
    border-radius: 20px;
  }

  .product-list-banner img {
    aspect-ratio: 1456 / 1040;
    object-position: center;
  }

  .product-list-banner-actions {
    right: 12px;
    bottom: 12px;
    left: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .product-list-banner-btn {
    height: 34px;
    min-height: 34px;
    padding-inline: 5px;
    gap: 4px;
    font-size: 10px;
  }

  .product-list-banner-btn img {
    width: 18px;
    height: 18px;
  }

  .product-list-banner-logo-btn {
    min-height: 34px;
    padding-inline: 4px;
  }

  .product-list-banner-logo-btn img {
    width: auto;
    max-width: 64px;
    max-height: 22px;
    height: auto;
  }

  .product-list-banner-icon {
    width: 18px;
    height: 18px;
  }

  .product-list-banner-icon .ui-icon {
    width: 12px;
    height: 12px;
  }

  .product-list-hero {
    padding-bottom: 28px;
  }

  .product-list-toolbar-left {
    display: contents;
  }

  .product-list-toolbar-left .product-list-dropdown,
  .product-list-count,
  .product-list-sort-dropdown,
  .product-list-search {
    min-width: 0;
  }

  .product-list-toolbar-right {
    display: contents;
  }

  .product-list-toolbar {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) 38px;
    align-items: center;
    justify-content: space-between;
    gap: 10px 6px;
  }

  .product-list-search {
    grid-column: 1 / 4;
    order: 1;
    width: 100%;
    height: 38px;
    margin: 0;
  }

  .product-list-select,
  .product-list-view-btn {
    min-height: 34px;
  }

  .product-list-select {
    width: 100%;
    align-items: center;
    padding: 0 9px;
    gap: 5px;
    font-size: 11px;
    justify-content: flex-start;
  }

  .product-list-sort {
    padding-left: 9px;
  }

  .product-list-view-btn {
    grid-column: 4;
    justify-self: end;
    order: 1;
    width: 38px;
    height: 38px;
  }

  .product-list-select .ui-icon-filter,
  .product-list-view-btn .ui-icon {
    width: 16px;
    height: 16px;
  }

  .product-list-select .ui-icon-chevron-down {
    width: 14px;
    height: 14px;
  }

  .product-list-count {
    font-size: 11px;
    padding-left: 5px;
  }

  .product-list-count strong {
    font-size: 12px;
  }

  @media (max-width: 390px) {
    .product-list-toolbar {
      grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) 34px;
      align-items: center;
      gap: 8px 5px;
    }

    .product-list-select {
      min-height: 32px;
      padding-inline: 7px;
      gap: 4px;
      font-size: 10px;
    }

    .product-list-sort {
      padding-left: 7px;
    }

    .product-list-view-btn {
      width: 34px;
      height: 34px;
      min-height: 34px;
    }

    .product-list-search {
      height: 34px;
    }

    .product-list-select .ui-icon-filter,
    .product-list-view-btn .ui-icon {
      width: 14px;
      height: 14px;
    }

    .product-list-select .ui-icon-chevron-down {
      width: 13px;
      height: 13px;
    }

    .product-list-count {
      font-size: 10px;
      padding-left: 4px;
    }

    .product-list-count strong {
      font-size: 11px;
    }
  }

  .product-list-grid {
    gap: 14px 12px;
  }

  .product-list-grid.is-widget-view .product-card {
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: 120px;
    padding: 14px;
  }

  .product-list-grid .product-badge {
    top: 10px;
    left: 10px;
    min-height: 24px;
    padding-inline: 8px;
    font-size: 10px;
  }

  .product-list-grid .product-info {
    padding: 12px;
  }

  .product-list-grid .product-name {
    font-size: 14px;
    line-height: 1.25;
  }

  .product-list-grid .product-desc,
  .product-list-grid .product-link {
    font-size: 12px;
  }

  .product-detail-main {
    padding-bottom: 50px;
  }

  .detail-panel,
  .detail-order-panel {
    border-radius: 12px;
  }

  .detail-panel,
  .detail-order-panel {
    padding: 18px;
  }

  .detail-section-label {
    min-height: 36px;
    margin: 0 0 -2px;
    padding: 0 14px;
  }

  .detail-section-label h2 {
    font-size: 15px;
  }

  .product-detail-title h1 {
    font-size: 24px;
  }

  .product-overview-info h2 {
    font-size: 22px;
  }

  .product-option-grid {
    grid-template-columns: 1fr;
  }

  .detail-tabs .tab-btn {
    min-width: auto;
    padding-inline: 18px;
  }

  .detail-review-card {
    padding: 16px;
  }

  .detail-review-body p {
    font-size: 14px;
  }

  .detail-review-meta {
    gap: 6px 10px;
    font-size: 12px;
  }

  .selected-product-row {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .selected-product-quantity {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .order-total {
    align-items: flex-start;
    flex-direction: column;
  }

  .order-total strong {
    font-size: 26px;
  }

  .promo-widget {
    grid-template-columns: 96px minmax(0, 1fr);
    min-height: 124px;
    padding: var(--space-4);
  }

  .promo-widget-title {
    font-size: 16px;
  }

  .promo-widget-price {
    gap: 4px 8px;
    font-size: 13px;
  }

  .promo-widget-price strong {
    font-size: 20px;
  }

  .modal {
    padding: var(--space-4);
  }

  .modal-header,
  .modal-footer {
    padding: var(--space-4);
  }

  .modal-body {
    padding: 0 var(--space-4) var(--space-4);
  }

  .pagination {
    gap: 6px;
  }

  .page-link {
    min-width: 36px;
    height: 36px;
    padding-inline: 10px;
  }

  .site-footer {
    padding: 30px 0 24px;
  }

  .site-footer .container {
    padding-inline: 24px;
  }

  .footer-logo {
    font-size: 22px;
  }

  .footer-info-list {
    gap: 7px;
    margin-top: 18px;
    font-size: 13px;
  }

  .footer-cs-label {
    font-size: 15px;
  }

  .footer-cs-phone {
    font-size: 26px;
  }

  .footer-cs-time,
  .footer-kakao-link {
    font-size: 14px;
  }

  .footer-bottom {
    padding-top: 20px;
    font-size: 13px;
  }

  .auth-main {
    padding: 24px var(--container-padding) 18px;
  }

  .auth-heading {
    margin-bottom: 18px;
  }

  .auth-eyebrow {
    font-size: 13px;
  }

  .auth-eyebrow::after {
    width: 28px;
    margin: 9px auto 12px;
  }

  .auth-heading h1 {
    font-size: 24px;
  }

  .auth-form {
    gap: 16px;
  }

  .auth-field-group {
    gap: 8px;
  }

  .auth-field,
  .identity-button,
  .signup-submit {
    min-height: 46px;
    border-radius: 7px;
  }

  .auth-field input,
  .auth-field select {
    min-height: 44px;
    padding-left: 42px;
    padding-right: 34px;
    font-size: 12px;
  }

  .auth-field-icon {
    left: 13px;
    width: 16px;
    height: 16px;
  }

  .auth-field-action,
  .auth-field-state {
    right: 6px;
    width: 25px;
    height: 25px;
  }

  .identity-button,
  .signup-submit {
    gap: 8px;
    font-size: 13px;
  }

  .identity-button .ui-icon {
    width: 18px;
    height: 18px;
  }

  .auth-info-box {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.65;
  }

  .auth-info-box .ui-icon {
    width: 16px;
    height: 16px;
    margin-top: 2px;
  }

  .password-rule-list,
  .auth-error-message {
    padding-left: 8px;
    font-size: 13px;
  }

  .password-rule-list li {
    gap: 8px;
  }

  .rule-mark {
    font-size: 17px;
  }

  .terms-section h2 {
    font-size: 16px;
  }

  .terms-row {
    grid-template-columns: minmax(0, 1fr) 24px;
    min-height: 46px;
    gap: 8px;
    padding-inline: 12px;
    font-size: 12px;
  }

  .terms-label {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 8px;
  }

  .terms-check {
    width: 16px;
    height: 16px;
  }

  .terms-toggle {
    width: 24px;
    height: 24px;
  }

  .terms-detail {
    padding: 0 10px 10px 34px;
  }

  .terms-detail-scroll {
    max-height: 96px;
    padding: 8px 10px;
    font-size: 11px;
  }

  .login-main {
    padding-top: 26px;
  }

  .login-heading {
    margin-bottom: 18px;
  }

  .login-intro {
    font-size: 13px;
  }

  .sns-login-list {
    gap: 18px;
    margin-top: 18px;
  }

  .sns-login-button {
    width: 46px;
    height: 46px;
  }

  .sns-login-naver {
    font-size: 22px;
  }

  .sns-login-kakao {
    font-size: 10px;
  }

  .sns-login-kakao span {
    width: 29px;
    height: 22px;
  }

  .auth-divider {
    gap: 10px;
    margin: 24px 0 16px;
    font-size: 13px;
  }

  .login-form {
    gap: 12px;
  }

  .auth-link-group {
    gap: 10px;
    margin-top: 20px;
    font-size: 13px;
  }

  .find-password-main {
    padding-top: 28px;
  }

  .find-password-heading .auth-eyebrow {
    font-size: 13px;
  }

  .find-password-heading .auth-eyebrow::after {
    width: 26px;
  }

  .find-password-intro {
    margin-bottom: 20px;
  }

  .find-password-form {
    gap: 12px;
  }

  .back-login-link {
    gap: 8px;
  }

  .back-login-icon {
    width: 18px;
    height: 18px;
  }
}

/* ==========================================================================
   Page Responsive Polish
   ========================================================================== */

@media (max-width: 1024px) {
  .auth-main,
  .mypage-main,
  .order-history-main,
  .profile-edit-main,
  .customer-center-main,
  .product-detail-main {
    overflow-x: hidden;
  }

  .mypage-section,
  .order-history-panel,
  .profile-edit-block,
  .customer-tabs,
  .detail-panel,
  .detail-order-panel {
    max-width: 100%;
  }

  .login-history-list div {
    grid-template-columns: 64px minmax(90px, 1fr) 72px minmax(140px, 1.15fr);
  }
}

@media (max-width: 768px) {
  .guide-top-inner {
    align-items: flex-start;
    flex-direction: column;
    min-height: auto;
    padding-block: 16px;
    gap: 12px;
  }

  .guide-nav {
    width: 100%;
    overflow-x: auto;
    gap: 18px;
    padding-bottom: 4px;
    white-space: nowrap;
  }

  .guide-hero {
    padding-block: 48px 28px;
    text-align: left;
  }

  .guide-hero p {
    margin-inline: 0;
  }

  .guide-doc-grid,
  .guide-product-grid {
    grid-template-columns: 1fr;
  }

  .guide-panel {
    padding: 20px;
  }

  .guide-panel-group {
    grid-template-columns: 1fr;
  }

  .guide-panel-item {
    min-height: auto;
    border-right: 0;
  }

  .guide-inline {
    flex-wrap: wrap;
  }

  .mypage-page {
    --container-padding: 36px;
  }

  .mypage-page:not(.order-history-page):not(.profile-edit-page) .mypage-hero {
    padding-bottom: 48px;
  }

  .mypage-page:not(.order-history-page):not(.profile-edit-page) .mypage-orders {
    padding-bottom: 72px;
  }

  .mypage-page:not(.order-history-page):not(.profile-edit-page) .mypage-orders .mypage-table-wrap {
    display: none;
  }

  .mypage-page:not(.order-history-page):not(.profile-edit-page) .mypage-mobile-order-grid {
    display: grid;
    gap: 14px;
  }

  .mypage-page:not(.order-history-page):not(.profile-edit-page) .mypage-mobile-order-card:nth-child(n+4) {
    display: none;
  }

  .mypage-page:not(.order-history-page):not(.profile-edit-page) .login-history-list {
    display: none;
  }

  .mypage-page:not(.order-history-page):not(.profile-edit-page) .mobile-login-history-list {
    display: grid;
    gap: 12px;
  }

  .mypage-page:not(.order-history-page):not(.profile-edit-page) .mypage-detail-grid {
    padding-top: 20px;
  }

  .mypage-page:not(.order-history-page):not(.profile-edit-page) .mypage-info-grid {
    gap: 64px;
  }

  .mypage-page .container {
    width: 100%;
    max-width: var(--container-max);
    padding-right: var(--container-padding);
    padding-left: var(--container-padding);
  }

  .auth-main {
    padding-inline: 36px;
  }

  .customer-center-container {
    width: 100%;
    max-width: 720px;
    padding-right: 36px;
    padding-left: 36px;
  }

  .product-detail-main .container {
    width: 100%;
    max-width: var(--container-max);
    padding-right: 36px;
    padding-left: 36px;
  }

  .order-history-pagination:not(.customer-pagination) .order-page-number:nth-of-type(n+8),
  .customer-pagination .order-page-number:nth-of-type(n+7) {
    display: none;
  }

  .auth-panel,
  .login-panel,
  .find-password-panel,
  .profile-edit-container,
  .customer-center-container {
    width: 100%;
    max-width: 500px;
  }

  .mypage-page .profile-edit-container {
    width: 100%;
    max-width: 500px;
  }

  .login-panel,
  .find-password-panel {
    max-width: 400px;
  }

  .mypage-section,
  .order-history-panel,
  .profile-edit-block,
  .customer-center-container,
  .product-detail-main .container {
    min-width: 0;
  }

  .mypage-table-wrap,
  .order-history-table-wrap {
    margin-inline: 0;
    padding-inline: 0;
    border-radius: 8px;
    scrollbar-width: thin;
  }

  .mypage-table,
  .order-history-full-table {
    width: max-content;
  }

  .mypage-info-grid {
    gap: 44px;
  }

  .mypage-info-list dd,
  .login-history-list strong,
  .login-history-list time,
  .order-history-product strong,
  .order-history-product em,
  .customer-item-content strong,
  .faq-list-item strong,
  .selected-product-info strong,
  .selected-product-info span {
    overflow-wrap: anywhere;
  }

  .order-history-panel {
    padding-inline: 0;
  }

  .order-history-toolbar,
  .order-history-pagination {
    padding-inline: 0;
  }

  .order-history-table-wrap {
    border-right: 1px solid #e1e6f0;
    border-left: 1px solid #e1e6f0;
  }

  .order-history-page .order-history-table-wrap {
    display: none;
  }

  .order-history-page .order-history-mobile-grid {
    display: grid;
    gap: 14px;
  }

  .profile-edit-container,
  .customer-center-container {
    margin-inline: auto;
  }

  .profile-edit-section-title,
  .mypage-section-title {
    min-width: 0;
  }

  .sns-connect-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 12px;
    min-width: 0;
  }

  .sns-connect-state,
  .sns-connect-btn {
    grid-column: auto;
    justify-self: end;
    white-space: nowrap;
  }

  .sns-connect-btn {
    width: auto;
    min-width: 96px;
    padding-inline: 14px;
  }

  .customer-tab-list {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .customer-tab-list::-webkit-scrollbar {
    display: none;
  }

  .customer-list-item {
    grid-template-columns: minmax(0, 1fr) 22px;
  }

  .faq-list-item {
    grid-template-columns: 24px minmax(0, 1fr) 22px;
    min-width: 0;
  }

  .faq-list-item strong {
    min-width: 0;
    word-break: keep-all;
  }

  .product-detail-layout,
  .product-detail-content,
  .detail-order-panel,
  .product-overview-grid,
  .product-option-grid,
  .detail-meta-grid,
  .selected-product-row {
    min-width: 0;
  }

  .detail-order-panel {
    overflow: hidden;
  }

  .selected-product-row {
    grid-template-columns: 56px minmax(0, 1fr) auto;
  }

  .product-overview-thumb {
    width: 100%;
    margin-inline: auto;
  }

  .detail-tabs {
    margin-inline: calc(var(--container-padding) * -1);
    padding-inline: var(--container-padding);
    scrollbar-width: none;
  }

  .detail-tabs::-webkit-scrollbar {
    display: none;
  }

  .detail-description-box img {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .mypage-page {
    --container-padding: 28px;
  }

  .mypage-page:not(.order-history-page):not(.profile-edit-page) .mypage-hero {
    padding-bottom: 44px;
  }

  .mypage-page:not(.order-history-page):not(.profile-edit-page) .mypage-orders {
    padding-bottom: 68px;
  }

  .mypage-page:not(.order-history-page):not(.profile-edit-page) .mypage-mobile-order-grid {
    gap: 12px;
  }

  .mypage-mobile-order-card {
    padding: 16px;
    border-radius: 8px;
  }

  .order-history-page .order-history-mobile-grid {
    gap: 12px;
  }

  .mobile-login-history-card {
    padding: 16px;
    border-radius: 8px;
  }

  .mypage-mobile-order-info div {
    align-items: flex-start;
  }

  .mypage-page:not(.order-history-page):not(.profile-edit-page) .mypage-detail-grid {
    padding-top: 18px;
  }

  .mypage-page:not(.order-history-page):not(.profile-edit-page) .mypage-info-grid {
    gap: 60px;
  }

  .auth-page .site-footer,
  .mypage-page .site-footer,
  .order-history-page .site-footer,
  .profile-edit-page .site-footer,
  .customer-center-page .site-footer,
  .product-detail-page .site-footer {
    margin-top: 24px;
  }

  .auth-panel,
  .login-panel,
  .find-password-panel {
    max-width: 100%;
  }

  .auth-main {
    padding-right: 28px;
    padding-left: 28px;
  }

  .customer-center-container,
  .product-detail-main .container {
    padding-right: 28px;
    padding-left: 28px;
  }

  .order-history-pagination:not(.customer-pagination) .order-page-number:nth-of-type(n+8),
  .customer-pagination .order-page-number:nth-of-type(n+7) {
    display: none;
  }

  .auth-field input,
  .auth-field select {
    line-height: 1.35;
  }

  .signup-email-row {
    grid-template-columns: minmax(0, 1fr) 98px;
    gap: 8px;
  }

  .email-verify-button {
    font-size: 12px;
  }

  .auth-field-with-hint {
    gap: 6px;
    padding-right: 12px;
  }

  .auth-field-with-hint input {
    padding-right: 0;
  }

  .auth-inline-hint {
    font-size: 10px;
  }

  .auth-link-group {
    flex-wrap: wrap;
    justify-content: center;
  }

  .mypage-section {
    padding-bottom: 42px;
  }

  .mypage-section-title,
  .profile-edit-section-title {
    align-items: flex-start;
  }

  .mypage-info-grid {
    gap: 42px;
  }

  .mypage-info-list div {
    gap: 10px;
  }

  .order-history-toolbar {
    gap: 14px;
  }

  .order-history-search {
    min-width: 0;
  }

  .order-history-pagination,
  .customer-pagination {
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
  }

  .order-history-pagination,
  .customer-pagination {
    overflow-x: visible;
    flex-wrap: wrap;
    justify-content: center;
  }

  .profile-edit-container,
  .customer-center-container {
    max-width: 100%;
  }

  .mypage-page .profile-edit-container {
    width: 100%;
    max-width: 500px;
  }

  .sns-connect-row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .sns-connect-btn {
    width: auto;
    min-width: 82px;
    padding-inline: 10px;
  }

  .sns-connect-state {
    gap: 5px;
    font-size: 12px;
  }

  .profile-edit-block {
    padding-inline: 0;
  }

  .customer-list-card {
    border-radius: 8px;
  }

  .customer-list-item {
    gap: 12px;
  }

  .customer-question-mark {
    font-size: 16px;
  }

  .product-detail-title {
    margin-bottom: 24px;
  }

  .product-detail-layout {
    gap: 14px;
  }

  .detail-order-panel {
    display: grid;
    gap: 14px;
  }

  .product-overview-thumb {
    max-width: 260px;
  }

  .product-option-card {
    min-height: 110px;
  }

  .selected-product-row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
  }

  .selected-product-quantity {
    grid-column: 2;
    justify-self: start;
  }

  .selected-product-price {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .order-actions {
    gap: 8px;
  }

  .detail-order-panel .order-actions .btn {
    min-height: 44px;
    font-size: 14px;
  }

  .mobile-order-summary {
    padding-top: 10px;
  }

  .product-detail-page {
    padding-bottom: 148px;
  }

  .mobile-order-summary-inner {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mobile-order-summary-actions {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .selected-product-price,
  .order-price-list div,
  .order-total {
    min-width: 0;
  }

  .order-price-list div {
    align-items: flex-start;
  }

  .order-price-list strong,
  .order-total strong {
    overflow-wrap: anywhere;
    text-align: right;
  }
}

@media (max-width: 360px) {
  :root {
    --container-padding: 12px;
  }

  .mypage-page {
    --container-padding: 24px;
  }

  .mypage-page:not(.order-history-page):not(.profile-edit-page) .mypage-hero {
    padding-bottom: 40px;
  }

  .mypage-page:not(.order-history-page):not(.profile-edit-page) .mypage-orders {
    padding-bottom: 60px;
  }

  .mypage-mobile-order-card {
    padding: 14px;
  }

  .mobile-login-history-card {
    padding: 14px;
  }

  .mobile-login-history-card div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .mobile-login-history-card strong,
  .mobile-login-history-card time {
    text-align: left;
  }

  .mypage-mobile-order-info div {
    flex-direction: column;
    gap: 4px;
  }

  .mypage-mobile-order-info dd {
    text-align: left;
  }

  .mypage-page:not(.order-history-page):not(.profile-edit-page) .mypage-info-grid {
    gap: 54px;
  }

  .auth-main,
  .customer-center-container,
  .product-detail-main .container {
    padding-right: 24px;
    padding-left: 24px;
  }

  .site-header-inner {
    padding-inline: 12px;
  }

  .auth-field input,
  .auth-field select {
    padding-left: 38px;
    font-size: 11px;
  }

  .auth-field-icon {
    left: 12px;
  }

  .login-history-list div,
  .mypage-info-list div {
    grid-template-columns: 1fr;
  }

  .login-history-list em,
  .login-history-list time {
    display: block;
  }

  .customer-tab-btn {
    font-size: 13px;
  }

  .detail-panel,
  .detail-order-panel {
    padding: 16px;
  }

  .order-total strong {
    font-size: 23px;
  }
}

@media (max-width: 1100px) {
  .product-detail-page {
    padding-bottom: 116px;
  }

  .product-detail-layout {
    grid-template-columns: 1fr;
  }

  .detail-order-panel {
    display: none;
    position: static;
  }

  .mobile-order-summary {
    display: block;
  }
}

@media (max-width: 480px) {
  .product-detail-page {
    padding-bottom: 148px;
  }
}

@media (max-width: 900px) {
  .product-detail-empty {
    min-height: 300px;
    padding: 42px 18px;
  }

  .product-detail-empty h2 {
    font-size: 21px;
  }

  .product-detail-main {
    overflow-x: hidden;
  }

  .product-detail-layout,
  .product-detail-content,
  .detail-panel,
  .detail-section-label,
  .product-overview-grid,
  .product-option-grid,
  .product-detail-info {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .product-overview {
    padding: 16px;
  }

  .product-overview-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .product-overview-thumb {
    width: min(100%, 480px);
    max-width: 480px;
    margin-inline: auto;
  }

  .product-overview-info {
    display: grid;
    gap: 12px;
  }

  .product-overview-info .detail-chip {
    justify-self: start;
    min-width: 92px;
    margin-bottom: 0;
    padding-inline: 16px;
  }

  .product-overview-info h2 {
    font-size: 22px;
    line-height: 1.32;
    word-break: keep-all;
  }

  .product-overview-info p {
    margin-top: 0;
    font-size: 14px;
    line-height: 1.55;
    word-break: keep-all;
  }

  .detail-meta-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 4px;
    padding-top: 14px;
  }

  .detail-meta-item {
    align-items: flex-start;
    gap: 6px;
    padding-inline: 8px;
    border-right: 1px solid var(--color-border);
  }

  .detail-meta-item:first-child {
    padding-left: 0;
  }

  .detail-meta-item:last-child {
    padding-right: 0;
    border-right: 0;
  }

  .detail-meta-icon .ui-icon {
    width: 18px;
    height: 18px;
  }

  .detail-meta-item strong {
    font-size: 12px;
  }

  .detail-meta-item span:not(.detail-meta-icon) {
    gap: 3px;
    font-size: 12px;
    word-break: keep-all;
  }

  .product-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .product-option-card {
    min-height: auto;
    padding: 16px 10px 12px;
  }

  .product-option-check {
    top: 10px;
    right: 10px;
  }

  .product-option-card h3 {
    max-width: calc(100% - 22px);
    font-size: 15px;
  }

  .product-option-price {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
  }

  .product-option-price del {
    font-size: 11px;
  }

  .product-option-price strong {
    font-size: 13px;
  }

  .product-option-card .quantity {
    grid-template-columns: 30px 38px 30px;
    min-height: 32px;
    margin-top: 10px;
  }

  .detail-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .detail-tabs .tab-btn {
    min-width: 0;
    padding-inline: 6px;
    font-size: 14px;
    white-space: nowrap;
  }

  .detail-description-box {
    padding: 16px;
  }

  .detail-description-box p,
  .detail-check-list {
    font-size: 14px;
  }

  .detail-description-box img {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .product-overview {
    padding: 14px;
  }

  .product-overview-thumb {
    width: min(100%, 100%);
    max-width: 100%;
  }

  .product-overview-info h2 {
    font-size: 21px;
  }

  .detail-section-label {
    min-height: 34px;
    padding-inline: 12px;
  }

  .detail-section-label h2 {
    font-size: 15px;
  }

  .product-option-card .quantity {
    grid-template-columns: 34px 46px 34px;
  }
}

@media (max-width: 420px) {
  .product-option-grid {
    grid-template-columns: 1fr;
  }

  .product-option-card {
    padding: 18px 14px 14px;
  }

  .product-option-card .quantity {
    grid-template-columns: 34px 46px 34px;
  }
}

@media (max-width: 900px) {
  .product-overview-thumb {
    width: min(100%, 450px);
    max-width: 450px;
  }

  .product-overview-thumb .product-badge {
    top: 16px;
    left: 16px;
    min-height: 36px;
    padding: 0 18px;
    gap: 0.24em;
    border-radius: 999px;
    font-size: 16px;
  }

  .mobile-order-summary.is-open .mobile-order-summary-backdrop {
    bottom: 100%;
  }

  .mobile-order-summary {
    box-shadow: none;
  }
}

@media (max-width: 480px) {
  .product-overview-thumb {
    width: min(100%, calc(100% - 18px));
    max-width: calc(100% - 18px);
  }

  .product-overview-thumb .product-badge {
    top: 14px;
    left: 14px;
    min-height: 34px;
    padding-inline: 16px;
    font-size: 15px;
  }

  .mobile-order-summary.is-open .mobile-order-summary-backdrop {
    bottom: 100%;
  }
}

@media (max-width: 1180px) {
  .cart-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    gap: 22px;
  }

  .cart-product-head {
    grid-template-columns: 24px 132px minmax(0, 1fr) auto;
    gap: 16px;
  }

  .cart-option-row {
    grid-template-columns: minmax(110px, 1fr) 96px 66px 96px 106px 108px 22px;
    gap: 10px;
  }
}

@media (max-width: 1024px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }

  .cart-summary {
    position: static;
  }
}

@media (max-width: 768px) {
  .cart-main {
    padding: 22px 0 56px;
  }

  .cart-title {
    margin-bottom: 22px;
  }

  .cart-content {
    gap: 14px;
  }

  .cart-select-bar {
    padding: 14px 16px;
  }

  .cart-check {
    gap: 9px;
    font-size: 15px;
  }

  .cart-text-btn {
    font-size: 14px;
  }

  .cart-group {
    padding: 16px 16px 10px;
  }

  .cart-product-head {
    grid-template-columns: 22px 92px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 16px;
  }

  .cart-product-thumb {
    border-radius: 8px;
  }

  .cart-product-info .detail-chip {
    min-height: 28px;
    margin-bottom: 8px;
    padding-inline: 14px;
    font-size: 13px;
  }

  .cart-product-info h2 {
    font-size: 17px;
  }

  .cart-product-info p {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
  }

  .cart-remove-product {
    grid-column: 3;
    justify-self: start;
    margin-top: 4px;
    font-size: 13px;
  }

  .cart-option-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 14px 0;
  }

  .cart-option-name {
    grid-column: 1 / -1;
    padding-right: 28px;
    font-size: 15px;
  }

  .cart-option-row del,
  .cart-option-discount,
  .cart-option-row [data-cart-unit] {
    text-align: left;
  }

  .cart-option-discount,
  .cart-option-row [data-cart-unit] {
    justify-self: start;
  }

  .cart-option-row .quantity {
    grid-column: 1;
    justify-self: start;
  }

  .cart-option-total {
    grid-column: 2;
    justify-self: end;
  }

  .cart-option-remove {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
  }

  .cart-group-total {
    padding: 12px 14px;
  }

  .cart-summary {
    padding: 18px;
  }

  .cart-summary-list {
    gap: 14px;
    margin-top: 18px;
    padding-bottom: 0;
  }

  .cart-summary-total {
    margin-top: 22px;
    padding: 14px 16px;
  }

  .cart-summary-total span {
    font-size: 15px;
  }

  .cart-summary-total strong {
    font-size: 23px;
  }

  .cart-summary-actions {
    gap: 10px;
    margin-top: 16px;
  }

  .cart-summary-actions .btn {
    min-height: 48px;
    font-size: 15px;
  }
}

@media (max-width: 520px) {
  .cart-select-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .cart-product-head {
    grid-template-columns: 22px 82px minmax(0, 1fr);
    gap: 10px;
  }

  .cart-product-info h2 {
    font-size: 16px;
  }

  .cart-option-row {
    grid-template-columns: 1fr;
  }

  .cart-option-row .quantity,
  .cart-option-total,
  .cart-option-remove {
    grid-column: 1;
  }

  .cart-option-total {
    justify-self: start;
  }

  .cart-option-remove {
    grid-row: 1;
    justify-self: end;
  }
}

@media (max-width: 900px) {
  .cart-page {
    padding-bottom: 150px;
  }

  .cart-page .cart-summary {
    display: none;
  }

  .cart-mobile-order-summary {
    display: block;
  }

  .cart-mobile-order-summary .mobile-order-sheet {
    max-height: calc(100vh - 126px);
    overflow-y: auto;
  }

  .cart-mobile-selected-list {
    display: grid;
    gap: 14px;
  }

  .cart-mobile-selected-row {
    grid-template-columns: 58px minmax(0, 1fr) auto;
  }

  .cart-mobile-selected-row .selected-product-price {
    grid-column: 3;
    justify-self: end;
    font-size: 15px;
  }

  .cart-page .cart-group {
    position: relative;
  }

  .cart-page .cart-product-head {
    grid-template-columns: 24px 120px minmax(0, 1fr);
    gap: 14px;
    padding-right: 108px;
  }

  .cart-page .cart-product-thumb {
    align-self: start;
  }

  .cart-page .cart-product-info .detail-chip {
    min-width: 86px;
    margin-bottom: 10px;
  }

  .cart-page .cart-product-info h2 {
    font-size: 18px;
    line-height: 1.35;
    word-break: keep-all;
  }

  .cart-page .cart-product-info p {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.55;
    word-break: keep-all;
  }

  .cart-page .cart-remove-product {
    position: absolute;
    top: 18px;
    right: 18px;
    grid-column: auto;
    justify-self: auto;
    margin-top: 0;
    min-height: 34px;
    padding-inline: 8px;
    font-size: 14px;
  }

  .cart-page .cart-option-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    padding: 18px 0;
  }

  .cart-page .cart-option-name {
    grid-column: 1;
    grid-row: 1;
    padding-right: 0;
    font-size: 17px;
  }

  .cart-page .cart-option-remove {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }

  .cart-page .cart-option-row del {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    text-align: left;
  }

  .cart-page .cart-option-discount {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    text-align: right;
  }

  .cart-page .cart-option-row [data-cart-unit] {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    text-align: left;
    font-size: 17px;
  }

  .cart-page .cart-option-row .quantity {
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
  }

  .cart-page .cart-option-total {
    grid-column: 2;
    grid-row: 4;
    justify-self: end;
    align-self: center;
    font-size: 17px;
  }
}

@media (max-width: 480px) {
  .cart-page {
    padding-bottom: 150px;
  }

  .cart-mobile-selected-row {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
  }

  .cart-mobile-selected-row .selected-product-price {
    grid-column: 3;
    justify-self: end;
    align-self: center;
    text-align: right;
    white-space: nowrap;
  }

  .cart-mobile-order-summary .mobile-order-summary-actions {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .cart-page .cart-product-head {
    grid-template-columns: 22px 92px minmax(0, 1fr);
    gap: 10px;
    padding-right: 44px;
  }

  .cart-page .cart-product-info .detail-chip {
    min-width: 74px;
    min-height: 26px;
    padding-inline: 12px;
    font-size: 12px;
  }

  .cart-page .cart-product-info h2 {
    font-size: 15px;
  }

  .cart-page .cart-product-info p {
    margin-top: 6px;
    font-size: 12px;
  }

  .cart-page .cart-remove-product {
    top: 16px;
    right: 14px;
    width: 34px;
    min-height: 34px;
    padding: 0;
    font-size: 0;
  }

  .cart-page .cart-remove-product .ui-icon {
    width: 18px;
    height: 18px;
  }

  .cart-page .cart-option-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 10px;
    padding: 16px 0;
  }

  .cart-page .cart-option-name {
    font-size: 15px;
  }

  .cart-page .cart-option-row [data-cart-unit],
  .cart-page .cart-option-total {
    font-size: 16px;
  }
}

@media (max-width: 900px) {
  .product-detail-page .product-detail-content {
    gap: 18px;
  }

  .product-detail-page .detail-section-label {
    margin-top: 4px;
    margin-bottom: 4px;
  }
}

@media (max-width: 480px) {
  .product-detail-page .product-detail-content {
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .pagination,
  .order-history-pagination,
  .customer-pagination,
  .detail-review-pagination {
    margin-top: 28px;
  }

  .cart-page .cart-select-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px;
  }

  .cart-page .cart-select-bar .cart-check,
  .cart-page .cart-select-bar .cart-text-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .cart-page .cart-select-bar .cart-text-btn {
    min-height: 34px;
    padding-inline: 8px;
  }

  .cart-page .cart-group {
    padding: 14px;
  }

  .cart-page .cart-product-head {
    grid-template-columns: 24px 96px minmax(0, 1fr);
    gap: 10px;
    padding-right: 40px;
    padding-bottom: 14px;
  }

  .cart-page .cart-product-check {
    align-self: start;
    padding-top: 1px;
  }

  .cart-page .cart-product-thumb {
    width: 96px;
    aspect-ratio: 1 / 0.92;
  }

  .cart-page .cart-product-thumb .product-badge {
    display: none;
  }

  .cart-page .cart-product-info {
    min-width: 0;
  }

  .cart-page .cart-product-info .detail-chip {
    display: inline-flex;
    min-width: 78px;
    min-height: 28px;
    margin-bottom: 8px;
    padding-inline: 12px;
    font-size: 13px;
    overflow: visible;
    white-space: nowrap;
  }

  .cart-page .cart-product-info .detail-chip::after {
    content: "최대 10% 할인";
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin-left: 8px;
    padding: 0 10px;
    border: 1px solid var(--color-primary-line);
    border-radius: 999px;
    background: #fff;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  .cart-page .cart-product-info h2 {
    max-width: 100%;
    font-size: 17px;
    line-height: 1.35;
  }

  .cart-page .cart-product-info p {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.45;
  }

  .cart-page .cart-remove-product {
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-height: 34px;
    height: 34px;
    padding: 0;
    font-size: 0;
    line-height: 1;
  }

  .cart-page .cart-remove-product .ui-icon {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0;
  }

  .cart-page .cart-option-row {
    grid-template-columns: max-content minmax(128px, 1fr);
    grid-template-areas:
      "name name"
      "remove remove"
      "price price"
      "quantity total";
    gap: 10px 12px;
    padding: 16px 0;
  }

  .cart-page .cart-option-name {
    grid-area: name;
    padding-right: 0;
    font-size: 17px;
    line-height: 1.35;
  }

  .cart-page .cart-option-remove {
    grid-area: remove;
    justify-self: start;
    align-self: center;
    width: auto;
    height: 24px;
    color: #667085;
    font-size: 0;
  }

  .cart-page .cart-option-remove::before {
    content: "삭제";
    font-size: 13px;
    font-weight: 700;
  }

  .cart-page .cart-option-row del {
    grid-area: price;
    justify-self: start;
    align-self: end;
    text-align: left;
    font-size: 14px;
  }

  .cart-page .cart-option-discount {
    grid-area: price;
    justify-self: start;
    align-self: end;
    margin-left: 104px;
    text-align: left;
    font-size: 14px;
  }

  .cart-page .cart-option-row [data-cart-unit] {
    grid-area: price;
    justify-self: start;
    align-self: start;
    margin-top: 24px;
    text-align: left;
    font-size: 17px;
  }

  .cart-page .cart-option-row .quantity {
    grid-area: quantity;
    justify-self: start;
    grid-template-columns: 32px 46px 32px;
    min-height: 34px;
  }

  .cart-page .cart-option-total {
    grid-area: total;
    justify-self: start;
    align-self: center;
    text-align: left;
    font-size: 17px;
  }
}

@media (max-width: 420px) {
  .cart-page .cart-select-bar {
    gap: 8px;
  }

  .cart-page .cart-select-bar .cart-check {
    font-size: 14px;
  }

  .cart-page .cart-text-btn {
    gap: 6px;
    font-size: 13px;
  }

  .cart-page .cart-product-head {
    grid-template-columns: 24px 84px minmax(0, 1fr);
  }

  .cart-page .cart-product-thumb {
    width: 84px;
  }

  .cart-page .cart-product-info h2 {
    font-size: 15px;
  }

  .cart-page .cart-product-info p {
    font-size: 12px;
  }

  .cart-page .cart-option-discount {
    margin-left: 92px;
  }
}

@media (max-width: 640px) {
  .cart-page .cart-option-list {
    display: grid;
    gap: 10px;
    padding-top: 12px;
  }

  .cart-page .cart-option-row {
    grid-template-columns: minmax(0, 1fr) 28px;
    grid-template-areas:
      "name remove"
      "meta meta"
      "quantity total";
    gap: 8px 12px;
    padding: 14px 16px;
    border: 0;
    border-radius: 8px;
    background: #f7f8fc;
  }

  .cart-page .cart-option-name {
    grid-area: name;
    align-self: center;
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.42;
  }

  .cart-page .cart-option-remove {
    grid-area: remove;
    justify-self: end;
    align-self: start;
    width: 28px;
    height: 28px;
    color: #8a93a6;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
  }

  .cart-page .cart-option-remove::before {
    content: none;
  }

  .cart-page .cart-option-row del,
  .cart-page .cart-option-discount,
  .cart-page .cart-option-row [data-cart-unit] {
    grid-area: meta;
    align-self: center;
    justify-self: start;
    font-size: 13px;
    line-height: 1.2;
  }

  .cart-page .cart-option-row del {
    margin-right: 10px;
  }

  .cart-page .cart-option-discount {
    margin-left: 88px;
  }

  .cart-page .cart-option-row [data-cart-unit] {
    margin-top: 0;
    margin-left: 146px;
    font-weight: 800;
  }

  .cart-page .cart-option-row .quantity {
    grid-area: quantity;
    justify-self: start;
    grid-template-columns: 38px 52px 38px;
    min-height: 40px;
    background: #fff;
  }

  .cart-page .cart-option-total {
    grid-area: total;
    justify-self: end;
    align-self: center;
    color: #050505;
    font-size: 15px;
    font-weight: 700;
    text-align: right;
  }
}

@media (max-width: 1024px) {
  .payment-layout {
    grid-template-columns: 1fr;
  }

  .payment-sidebar {
    position: static;
  }
}

@media (max-width: 900px) {
  .payment-page {
    padding-bottom: 126px;
  }

  .payment-page .payment-sidebar {
    display: none;
  }

  .payment-mobile-order-summary {
    display: block;
  }

  .payment-mobile-order-sheet {
    max-height: min(58vh, 430px);
  }

  .payment-mobile-guide-card {
    margin-top: 16px;
    padding: 16px;
  }

  .payment-mobile-order-summary .mobile-order-summary-inner {
    gap: 12px;
  }

  .payment-mobile-guide-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid #e8e6f5;
    border-radius: 6px;
    background: #fafaff;
  }

  .payment-mobile-guide-compact .ui-icon {
    display: block;
    width: 18px;
    height: 18px;
    padding: 0;
    flex: 0 0 auto;
    border-radius: 0;
    background-color: var(--color-primary);
    box-shadow: none;
    color: var(--color-primary);
  }

  .payment-mobile-guide-compact p {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #44465a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .payment-mobile-order-summary .mobile-order-summary-total-row {
    padding-bottom: 10px;
  }

  /* 모바일 단일 주문 액션 */
  .payment-mobile-order-summary .mobile-order-summary-actions > .btn:only-child {
    grid-column: 1 / -1;
    width: 100%;
  }

  .payment-product-thumb .product-badge {
    display: none;
  }

  .payment-product-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .payment-product-title-row h3 {
    min-width: 0;
  }

  .payment-product-mobile-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid var(--color-primary-line);
    border-radius: 999px;
    background: #fff;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .payment-main {
    padding: 22px 0 56px;
  }

  /* Mobile payment account modal */
  .payment-account-card {
    align-items: center;
    padding: 18px var(--container-padding);
  }

  .payment-account-dialog {
    max-height: calc(100vh - 36px);
    max-height: calc(100dvh - 36px);
    overflow-y: auto;
  }

  .payment-content {
    gap: 16px;
  }

  .payment-product-card {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 14px;
  }

  .payment-product-thumb {
    width: 108px;
  }

  .payment-product-info h3 {
    font-size: 17px;
  }

  .payment-product-info p {
    margin-top: 8px;
    font-size: 13px;
  }

  .payment-product-meta {
    gap: 20px;
    margin-top: 16px;
    font-size: 13px;
  }

  .payment-product-meta div {
    gap: 10px;
  }

  .payment-product-meta div + div::before {
    left: -10px;
  }

  .payment-info-table div {
    grid-template-columns: 130px minmax(0, 1fr);
  }

  .payment-bank-row {
    grid-template-columns: minmax(120px, 1fr) minmax(150px, 1fr) 30px;
    gap: 10px;
  }

  .payment-bank-account {
    font-size: 13px;
  }

  .payment-product-detail-head,
  .payment-product-detail-row {
    grid-template-columns: minmax(0, 1fr) 62px 88px 96px;
    gap: 8px;
    padding-inline: 12px;
    font-size: 12px;
  }
}

@media (max-width: 520px) {
  .payment-product-card {
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: start;
  }

  .payment-product-thumb {
    width: 92px;
  }

  .payment-product-info h3 {
    font-size: 16px;
  }

  .payment-product-meta {
    flex-wrap: wrap;
    gap: 8px 18px;
  }

  .payment-product-toggle {
    width: 28px;
    height: 28px;
  }

  .payment-product-detail {
    margin-top: 0;
  }

  .payment-product-detail.is-open {
    margin-top: 16px;
    max-height: 520px;
  }

  .payment-product-detail-head {
    display: none;
  }

  .payment-product-detail-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "name qty unit"
      "amount amount amount";
    gap: 7px 12px;
    padding: 14px 12px;
    font-size: 13px;
  }

  .payment-product-detail-row strong:first-child {
    grid-area: name;
    min-width: 0;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
  }

  .payment-product-detail-row span:nth-child(2) {
    grid-area: qty;
    justify-self: end;
    color: #667085;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
  }

  .payment-product-detail-row span:nth-child(2)::before {
    content: "수량 ";
  }

  .payment-product-detail-row span:nth-child(3) {
    grid-area: unit;
    justify-self: end;
    color: #667085;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
  }

  .payment-product-detail-row span:nth-child(3)::before {
    content: "단가 ";
  }

  .payment-product-detail-row strong:last-child {
    grid-area: amount;
    align-self: start;
    justify-self: end;
    padding-left: 0;
    font-size: 15px;
    text-align: right;
    white-space: nowrap;
  }

  .payment-product-detail-total {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
    font-size: 13px;
    width: 100%;
    justify-items: stretch;
  }

  .payment-product-detail-total span {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    justify-self: stretch;
    gap: 12px;
    width: 100%;
  }

  .payment-product-detail-total span strong {
    justify-self: end;
    margin-left: auto;
    text-align: right;
  }

  .payment-info-table div {
    grid-template-columns: 108px minmax(0, 1fr);
  }

  .payment-info-table dt,
  .payment-info-table dd {
    padding: 10px;
    font-size: 13px;
  }

  .payment-bank-wrap {
    margin-top: 20px;
  }

  .payment-bank-wrap > strong {
    min-height: 28px;
    margin-bottom: 10px;
    padding-inline: 10px;
    font-size: 13px;
  }

  .payment-bank-row {
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 6px 10px;
    min-height: 52px;
    padding: 11px 12px;
  }

  .payment-bank-account {
    grid-column: 1;
    text-align: left;
  }

  .payment-copy-btn {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .payment-guide-card {
    gap: 12px;
    padding: 18px;
  }

  .payment-guide-card h2 {
    font-size: 15px;
  }

  .payment-guide-card .btn {
    min-height: 44px;
    font-size: 14px;
  }

  .payment-account-card {
    padding: 18px var(--container-padding);
  }

  .payment-account-dialog {
    gap: 16px;
    padding: 20px;
  }

  .payment-account-head {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
  }

  .payment-account-logo {
    width: 30px;
    height: 30px;
  }

  .payment-account-logo img {
    width: 25px;
    height: 25px;
  }

  .payment-account-head h2 {
    font-size: 16px;
  }

  .payment-account-field {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .payment-account-help {
    gap: 16px;
    padding: 14px;
  }

  .payment-account-help ol {
    padding-left: 22px;
  }

  .payment-account-form .btn {
    min-height: 44px;
    font-size: 14px;
  }

  .payment-note {
    align-items: flex-start;
  }

  .payment-summary-card .order-total strong {
    font-size: 23px;
  }
}

@media (max-width: 900px) {
  .cart-page .cart-product-info .detail-chip::after {
    content: none;
  }

  .cart-page .cart-product-badges {
    gap: 8px;
    margin-bottom: 8px;
  }

  .cart-page .cart-discount-chip {
    min-height: 28px;
    padding-inline: 12px;
    font-size: 13px;
  }

  .cart-page .cart-option-list {
    margin-left: 34px;
  }

  .cart-page .cart-option-row {
    grid-template-columns: minmax(112px, 1fr) max-content max-content max-content 28px;
    grid-template-areas:
      "name original discount unit remove"
      "quantity quantity . total total";
    gap: 12px 10px;
    padding: 14px 0;
    border-bottom: 1px solid #edf0f6;
    border-radius: 0;
    background: transparent;
  }

  .cart-page .cart-option-name {
    grid-area: name;
    align-self: center;
    min-width: 0;
    padding-right: 0;
    overflow: hidden;
    color: #050505;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cart-page .cart-option-row del {
    grid-area: original;
    align-self: center;
    justify-self: end;
    margin: 0;
    color: #98a2b3;
    font-size: 13px;
    text-align: right;
    white-space: nowrap;
  }

  .cart-page .cart-option-discount {
    grid-area: discount;
    align-self: center;
    justify-self: end;
    margin: 0;
    color: #ff1f3d;
    font-size: 13px;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
  }

  .cart-page .cart-option-row [data-cart-unit] {
    grid-area: unit;
    align-self: center;
    justify-self: end;
    margin: 0;
    color: #050505;
    font-size: 14px;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
  }

  .cart-page .cart-option-remove {
    grid-area: remove;
    align-self: center;
    justify-self: end;
    width: 28px;
    height: 28px;
    color: #8a93a6;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
  }

  .cart-page .cart-option-remove::before {
    content: none;
  }

  .cart-page .cart-option-row .quantity {
    grid-area: quantity;
    justify-self: start;
    grid-template-columns: 38px 52px 38px;
    min-height: 40px;
    background: #fff;
  }

  .cart-page .cart-option-total {
    grid-area: total;
    align-self: center;
    justify-self: end;
    color: #050505;
    font-size: 16px;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  .cart-page .cart-option-list {
    margin-left: 34px;
  }

  .cart-page .cart-option-row {
    grid-template-columns: minmax(82px, 1fr) max-content max-content max-content 24px;
    gap: 10px 6px;
  }

  .cart-page .cart-option-name {
    font-size: 13px;
  }

  .cart-page .cart-option-row del,
  .cart-page .cart-option-discount {
    font-size: 12px;
  }

  .cart-page .cart-option-row [data-cart-unit] {
    font-size: 13px;
  }

  .cart-page .cart-option-remove {
    width: 24px;
    height: 24px;
    font-size: 24px;
  }
}

@media (max-width: 900px) {
  .product-detail-page .product-detail-content,
  .payment-page .product-detail-content {
    gap: 18px;
  }

  .product-detail-page .detail-section-label,
  .payment-page .detail-section-label {
    margin: 12px 0 -10px;
  }
}

@media (max-width: 480px) {
  .product-detail-page .product-detail-content,
  .payment-page .product-detail-content {
    gap: 16px;
  }

  .product-detail-page .detail-section-label,
  .payment-page .detail-section-label {
    margin: 10px 0 -8px;
  }
}

@media (max-width: 900px) {
  .product-detail-page .product-overview {
    padding: 14px;
  }

  .product-detail-page .product-overview-grid {
    gap: 14px;
  }

  .product-detail-page .product-overview-info {
    gap: 10px;
    padding-inline: 10px;
  }

  .product-detail-page .product-overview-info .detail-chip {
    justify-self: start;
    min-width: 88px;
    min-height: 30px;
    padding-inline: 14px;
  }

  .product-detail-page .product-overview-info h2 {
    font-size: 20px;
    line-height: 1.35;
    word-break: keep-all;
  }

  .product-detail-page .product-overview-info p {
    font-size: 13px;
    line-height: 1.55;
  }

  .product-detail-page .detail-meta-grid {
    margin-top: 2px;
    padding-top: 14px;
  }

  .product-detail-page .detail-meta-item {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    padding-inline: 10px;
    text-align: left;
  }

  .product-detail-page .detail-meta-icon {
    flex: 0 0 auto;
    margin-top: 0;
  }

  .product-detail-page .detail-meta-item span:not(.detail-meta-icon) {
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
  }

  .product-detail-page .detail-meta-copy-value {
    flex-wrap: nowrap;
  }

  .product-detail-page .detail-meta-copy-value .detail-meta-text {
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  .product-detail-page .product-overview-info {
    padding-inline: 8px;
  }

  .product-detail-page .detail-meta-item {
    gap: 6px;
    padding-inline: 6px;
  }
}

@media (max-width: 420px) {
  .product-detail-page .product-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .product-detail-page .product-option-card {
    padding: 16px 8px 12px;
  }

  .product-detail-page .product-option-card h3 {
    font-size: 14px;
  }

  .product-detail-page .product-option-price strong {
    font-size: 13px;
  }

  .product-detail-page .product-option-card .quantity {
    grid-template-columns: 30px 38px 30px;
  }
}

@media (max-width: 900px) {
  .cart-page .cart-product-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  .cart-page .cart-product-badges .detail-chip {
    min-height: 28px;
    margin-bottom: 0;
  }

  .cart-page .cart-product-badges .detail-chip::after {
    content: none;
  }

  .cart-page .cart-discount-chip {
    min-height: 28px;
    padding-inline: 12px;
    font-size: 13px;
  }

  .cart-page .cart-option-list {
    display: grid;
    gap: 10px;
    margin-left: 34px;
    padding-top: 10px;
  }

  .cart-page .cart-option-row {
    grid-template-columns: minmax(112px, 1fr) max-content max-content max-content 36px;
    grid-template-areas:
      "name original discount unit remove"
      "quantity quantity . total remove";
    gap: 12px 10px;
    padding: 14px;
    border: 1px solid #e5e9f2;
    border-radius: 10px;
    background: #fafbff;
  }

  .cart-page .cart-option-row + .cart-option-row {
    margin-top: 0;
  }

  .cart-page .cart-option-remove {
    grid-area: remove;
    align-self: center;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: #7b8496;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
  }

  .cart-page .cart-option-total {
    padding-right: 4px;
  }
}

@media (max-width: 520px) {
  .cart-page .cart-option-list {
    margin-left: 34px;
  }

  .cart-page .cart-option-row {
    grid-template-columns: minmax(78px, 1fr) max-content max-content max-content 32px;
    gap: 10px 6px;
    padding: 12px;
  }

  .cart-page .cart-option-remove {
    width: 32px;
    height: 32px;
    font-size: 24px;
  }
}

@media (max-width: 900px) {
  .mobile-order-summary-price {
    gap: 10px;
  }
}

@media (max-width: 900px) {
  .product-detail-page .mobile-selected-product .selected-product-row {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    grid-template-areas:
      "image info controls"
      "price price price";
    gap: 8px 10px;
    align-items: center;
  }

  .product-detail-page .mobile-selected-product .selected-product-row img {
    grid-area: image;
  }

  .product-detail-page .mobile-selected-product .selected-product-info {
    grid-area: info;
    min-width: 0;
  }

  .product-detail-page .mobile-selected-product .selected-product-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product-detail-page .mobile-selected-product .selected-product-quantity {
    grid-area: controls;
    grid-column: auto;
    justify-content: flex-end;
    gap: 8px;
  }

  .product-detail-page .mobile-selected-product .selected-product-price {
    grid-area: price;
    grid-column: 1 / -1;
    margin-top: 0;
    padding-left: 64px;
    text-align: right;
  }
}

@media (max-width: 520px) {
  .product-detail-page .mobile-selected-product .selected-product-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .product-detail-page .mobile-selected-product .selected-product-row img {
    width: 48px;
    height: 48px;
  }

  .product-detail-page .mobile-selected-product .selected-product-quantity .quantity {
    grid-template-columns: 30px 36px 30px;
  }

  .product-detail-page .mobile-selected-product .selected-product-remove {
    font-size: 20px;
  }

  .product-detail-page .mobile-selected-product .selected-product-price {
    padding-left: 56px;
  }
}

@media (max-width: 900px) {
  .cart-page .cart-product-badges {
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .cart-page .cart-product-badges .detail-chip {
    min-width: 66px;
    min-height: 26px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .cart-page .cart-product-info .detail-chip::after,
  .cart-page .cart-product-badges .detail-chip::after {
    content: none;
  }

  .cart-page .cart-discount-chip {
    min-height: 26px;
    padding-inline: 9px;
    font-size: 12px;
  }
}

@media (max-width: 520px) {
  .cart-page .cart-product-badges {
    gap: 5px;
  }

  .cart-page .cart-product-badges .detail-chip {
    min-width: 60px;
    padding-inline: 9px;
  }

  .cart-page .cart-discount-chip {
    padding-inline: 8px;
    font-size: 11px;
  }
}

@media (max-width: 520px) {
  .cart-page .cart-option-row {
    position: relative;
    grid-template-columns: minmax(0, 1fr) max-content max-content 30px;
    grid-template-areas:
      "name discount unit remove"
      "quantity quantity total total";
    gap: 12px 8px;
    padding: 14px;
  }

  .cart-page .cart-option-name {
    grid-area: name;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.28;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
  }

  .cart-page .cart-option-row del {
    display: none;
  }

  .cart-page .cart-option-discount {
    grid-area: discount;
    margin: 0;
    align-self: center;
    justify-self: end;
    font-size: 12px;
    white-space: nowrap;
  }

  .cart-page .cart-option-row [data-cart-unit] {
    grid-area: unit;
    margin: 0;
    align-self: center;
    justify-self: end;
    font-size: 13px;
    white-space: nowrap;
  }

  .cart-page .cart-option-remove {
    position: static;
    grid-area: remove;
    align-self: center;
    justify-self: end;
    width: 30px;
    height: 30px;
  }

  .cart-page .cart-option-row .quantity {
    grid-area: quantity;
    justify-self: start;
  }

  .cart-page .cart-option-total {
    grid-area: total;
    align-self: center;
    justify-self: end;
    font-size: 16px;
  }
}

@media (max-width: 900px) {
  .product-detail-page .detail-meta-copy-value .detail-meta-text {
    display: none !important;
  }
}

.renewal-ui .renewal-logout-form {
  display: inline-flex;
  align-items: center;
}

.renewal-ui .renewal-logout-button {
  font: inherit;
}

.renewal-ui .cart-count.is-hidden {
  display: none;
}

.renewal-ui .footer-info-list:empty,
.renewal-ui .footer-cs-details:empty {
  display: none;
}

/* Home visibility states */
.renewal-ui.main-page [hidden],
.renewal-ui.product-list-page [hidden] {
  display: none !important;
}

@media (min-width: 769px) {
  .renewal-ui .mobile-menu-content {
    display: none;
  }
}

@charset "utf-8";

/* v3 공통 레이아웃: renewal-page.layout-variant-v3 범위에서만 적용한다. */
.renewal-page.layout-variant-v3 .renewal-v3-header { min-height: 70px; border: 0; border-bottom: 1px solid #eeeef2; background: rgba(255,255,255,.93); box-shadow: none; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.renewal-page.layout-variant-v3 .renewal-v3-header.is-scrolled { border-bottom-color: #e8e7ed; background: rgba(255,255,255,.98); box-shadow: 0 8px 24px rgba(30,31,39,.045); }
.renewal-page.layout-variant-v3 .renewal-v3-header-inner { min-height: 70px; padding-inline: 28px; background: transparent; box-shadow: none; }
.renewal-page.layout-variant-v3 .renewal-v3-logo { display: inline-flex; align-items: center; gap: 6px; color: #6753e7; text-decoration: none; }
.renewal-page.layout-variant-v3 .renewal-v3-logo > span { font-size: 26px; font-weight: 900; letter-spacing: -.055em; line-height: 1; }
.renewal-page.layout-variant-v3 .renewal-v3-logo > i { width: 7px; height: 7px; margin-top: 12px; border-radius: 3px; background: linear-gradient(135deg,#9b8aff,#654fe0); box-shadow: 0 3px 8px rgba(101,79,224,.22); transform: rotate(45deg); }
.renewal-page.layout-variant-v3 .renewal-v3-header-nav { gap: 2px; }
.renewal-page.layout-variant-v3 .renewal-v3-nav-link { position: relative; min-height: 38px; padding: 0 15px; color: #555761; font-size: 15px; font-weight: 720; transition: color .2s ease; }
.renewal-page.layout-variant-v3 .renewal-v3-nav-link::after { position: absolute; right: 15px; bottom: 5px; left: 15px; height: 2px; border-radius: 999px; background: #705ce9; content: ""; opacity: 0; transform: scaleX(.45); transition: opacity .2s ease,transform .2s ease; }
.renewal-page.layout-variant-v3 .renewal-v3-nav-link:hover, .renewal-page.layout-variant-v3 .renewal-v3-nav-link:focus-visible, .renewal-page.layout-variant-v3 .renewal-v3-nav-link.is-current { color: #25262e; }
.renewal-page.layout-variant-v3 .renewal-v3-nav-link:hover::after, .renewal-page.layout-variant-v3 .renewal-v3-nav-link:focus-visible::after, .renewal-page.layout-variant-v3 .renewal-v3-nav-link.is-current::after { opacity: 1; transform: scaleX(1); }
.renewal-page.layout-variant-v3 .renewal-v3-service-status { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; margin: 0 11px 0 16px; padding: 0 11px; border-left: 1px solid #e8e7ec; color: #7b7e89; font-size: 12px; font-weight: 700; white-space: nowrap; }
.renewal-page.layout-variant-v3 .renewal-v3-service-status i { width: 6px; height: 6px; border-radius: 50%; background: #3ccf7e; box-shadow: 0 0 0 4px rgba(60,207,126,.1); }
.renewal-page.layout-variant-v3 .renewal-v3-cart { width: 38px; min-width: 38px; height: 38px; border: 0; border-radius: 0; background: transparent; color: #292a32; transition: color .2s ease,transform .2s ease; }
.renewal-page.layout-variant-v3 .renewal-v3-cart:hover, .renewal-page.layout-variant-v3 .renewal-v3-cart:focus-visible { background: transparent; color: #6753e7; transform: translateY(-2px); }
.renewal-page.layout-variant-v3 .renewal-v3-cart:hover .ui-icon, .renewal-page.layout-variant-v3 .renewal-v3-cart:focus-visible .ui-icon { animation: renewal-v3-cart-bounce .52s cubic-bezier(.2,.8,.2,1); }
.renewal-page.layout-variant-v3 .renewal-v3-cart .cart-count { top: -3px; right: -5px; min-width: 19px; height: 19px; border: 2px solid #fff; background: #6d58e9; font-size: 9px; }
.renewal-page.layout-variant-v3 .renewal-v3-login { min-height: 38px; padding: 0 12px; color: #484a54; font-size: 14px; font-weight: 750; transition: color .2s ease,transform .2s ease; }
.renewal-page.layout-variant-v3 .renewal-v3-login:hover, .renewal-page.layout-variant-v3 .renewal-v3-login:focus-visible { color: #6753e7; transform: translateY(-1px); }
.renewal-page.layout-variant-v3 .renewal-v3-start { min-width: 102px; min-height: 38px; gap: 13px; margin-left: 5px; padding: 0 15px 0 17px; border: 1px solid #22232b; border-radius: 999px; background: #22232b; box-shadow: none; color: #fff; font-size: 14px; font-weight: 800; transition: background-color .2s ease,border-color .2s ease,transform .2s ease; }
.renewal-page.layout-variant-v3 .renewal-v3-start span { color: #aea1ff; font-size: 15px; font-weight: 500; }
.renewal-page.layout-variant-v3 .renewal-v3-start:hover, .renewal-page.layout-variant-v3 .renewal-v3-start:focus-visible { border-color: #604bd9; background: #604bd9; color: #fff; transform: translateY(-1px); }
.renewal-page.layout-variant-v3 .renewal-v3-start:hover span { color: #fff; }
.renewal-page.layout-variant-v3 .renewal-auth-member { display: none; }
.renewal-page.layout-variant-v3[data-auth-state="logged-in"] .renewal-auth-guest { display: none !important; }
.renewal-page.layout-variant-v3[data-auth-state="logged-in"] .renewal-v3-account { position: relative; display: block; margin-left: 12px; }
.renewal-page.layout-variant-v3 .renewal-v3-account > summary { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; border: 1px solid #ded8ff; border-radius: 12px; background: linear-gradient(145deg,#fbfaff,#f0edff); box-shadow: 0 5px 14px rgba(91,70,202,.1),inset 0 1px 0 rgba(255,255,255,.9); color: #6753e7; cursor: pointer; list-style: none; transition: color .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.renewal-page.layout-variant-v3 .renewal-v3-account > summary::-webkit-details-marker { display: none; }
.renewal-page.layout-variant-v3 .renewal-v3-account > summary:hover, .renewal-page.layout-variant-v3 .renewal-v3-account > summary:focus-visible, .renewal-page.layout-variant-v3 .renewal-v3-account[open] > summary { border-color: #b9adff; background: linear-gradient(145deg,#f4f1ff,#e7e1ff); box-shadow: 0 9px 20px rgba(91,70,202,.18),0 0 0 3px rgba(109,88,233,.07); color: #513bd2; transform: translateY(-2px); }
.renewal-page.layout-variant-v3 .renewal-v3-account > summary .ui-icon { width: 23px; height: 23px; }
.renewal-page.layout-variant-v3 .renewal-v3-account > summary:hover .ui-icon-user, .renewal-page.layout-variant-v3 .renewal-v3-account > summary:focus-visible .ui-icon-user, .renewal-page.layout-variant-v3 .renewal-v3-account[open] > summary .ui-icon-user { animation: renewal-v3-user-wave .58s cubic-bezier(.22,.75,.25,1); }
.renewal-page.layout-variant-v3 .renewal-v3-account-menu { position: absolute; z-index: 30; top: calc(100% + 10px); right: 0; display: grid; width: 224px; padding: 9px; border: 1px solid #ebe9f2; border-radius: 18px; background: rgba(255,255,255,.98); box-shadow: 0 20px 48px rgba(34,31,52,.14); }
.renewal-page.layout-variant-v3 .renewal-v3-account:not([open]) > .renewal-v3-account-menu { display: none; }
.renewal-page.layout-variant-v3 .renewal-v3-account-welcome { display: grid; gap: 3px; margin-bottom: 7px; padding: 10px 11px 12px; border-radius: 12px; background: #f6f4ff; }
.renewal-page.layout-variant-v3 .renewal-v3-account-welcome strong { color: #353143; font-size: 13px; font-weight: 820; }
.renewal-page.layout-variant-v3 .renewal-v3-account-welcome span { color: #888399; font-size: 10px; font-weight: 600; }
.renewal-page.layout-variant-v3 .renewal-v3-account-menu > a, .renewal-page.layout-variant-v3 .renewal-v3-account-logout button { display: flex; align-items: center; width: 100%; min-height: 38px; gap: 9px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: #4b4d57; font: inherit; font-size: 12px; font-weight: 730; text-align: left; cursor: pointer; }
.renewal-page.layout-variant-v3 .renewal-v3-account-menu > a:hover, .renewal-page.layout-variant-v3 .renewal-v3-account-logout button:hover { background: #f5f3fd; color: #604bd9; }
.renewal-page.layout-variant-v3 .renewal-v3-account-menu .ui-icon { width: 16px; height: 16px; }
.renewal-page.layout-variant-v3 .renewal-v3-account-menu-divider { display: block; height: 1px; margin: 6px 8px; background: #eeecf2; }
.renewal-page.layout-variant-v3 .renewal-v3-account-logout button { justify-content: space-between; color: #777985; }

.renewal-page.layout-variant-v3 .renewal-v3-footer { margin-top: 48px; padding: 37px 0 21px; border: 0; border-top: 1px solid #e9e9ed; background: #f7f7f9; }
.renewal-page.layout-variant-v3 .renewal-v3-footer-inner { padding-inline: 28px; }
.renewal-page.layout-variant-v3 .renewal-v3-footer-top { display: grid; grid-template-columns: minmax(230px,1fr) minmax(300px,.9fr) minmax(270px,.75fr); gap: clamp(38px,6vw,86px); align-items: start; padding-bottom: 25px; border-bottom: 1px solid #e1e1e6; }
.renewal-page.layout-variant-v3 .renewal-v3-footer-logo { color: #22232a; font-size: 25px; font-weight: 900; letter-spacing: -.055em; }
.renewal-page.layout-variant-v3 .renewal-v3-footer-brand > p { margin-top: 13px; color: #7a7d87; font-size: 14px; line-height: 1.65; white-space: pre-line; }
.renewal-page.layout-variant-v3 .renewal-v3-footer-nav { display: grid; grid-template-columns: repeat(2,minmax(110px,1fr)); gap: 28px; }
.renewal-page.layout-variant-v3 .renewal-v3-footer-nav > div { display: grid; align-content: start; gap: 9px; }
.renewal-page.layout-variant-v3 .renewal-v3-footer-nav strong { margin-bottom: 3px; color: #30313a; font-size: 14px; font-weight: 850; }
.renewal-page.layout-variant-v3 .renewal-v3-footer-nav a { width: fit-content; color: #7b7e88; font-size: 14px; font-weight: 600; transition: color .2s ease; }
.renewal-page.layout-variant-v3 .renewal-v3-footer-nav a:hover { color: #624edb; }
.renewal-page.layout-variant-v3 .renewal-v3-footer-cs { display: grid; grid-template-columns: minmax(0,1fr); justify-self: end; min-width: 270px; color: #22232a; }
.renewal-page.layout-variant-v3 .renewal-v3-footer-cs .footer-cs-label { grid-column: 1; color: #898c96; font-size: 13px; font-weight: 750; white-space: nowrap; }
.renewal-page.layout-variant-v3 .renewal-v3-footer-cs .footer-cs-phone { grid-column: 1; margin-top: 7px; color: #22232a; font-size: 25px; font-weight: 900; letter-spacing: -.02em; white-space: nowrap; }
.renewal-page.layout-variant-v3 .renewal-v3-footer-cs .footer-cs-time { grid-column: 1; margin-top: 7px; color: #898c96; font-size: 12px; white-space: nowrap; }
.renewal-page.layout-variant-v3 .renewal-v3-compact-talk { display: inline-flex; grid-column: 1; align-items: center; justify-self: start; min-height: 40px; gap: 7px; margin-top: 13px; padding: 0 12px; border: 1px solid #dfdfe4; border-radius: 999px; background: #fff; color: #34353d; font-size: 13px; font-weight: 800; white-space: nowrap; transition: border-color .2s ease,transform .2s ease; }
.renewal-page.layout-variant-v3 .renewal-v3-compact-talk:hover { border-color: #cfc9ee; transform: translateY(-1px); }
.renewal-page.layout-variant-v3 .renewal-v3-compact-talk .footer-kakao-icon { width: 23px; height: 23px; font-size: 7px; }
.renewal-page.layout-variant-v3 .renewal-v3-compact-talk > span:last-child { color: #6a55e5; font-size: 14px; }
.renewal-page.layout-variant-v3 .renewal-v3-footer-business { padding: 15px 0 13px; border-bottom: 1px solid #e4e4e8; }
.renewal-page.layout-variant-v3 .renewal-v3-footer-info { display: flex; flex-wrap: wrap; gap: 5px 18px; margin: 0; color: #8c8f99; font-size: 12px; line-height: 1.45; }
.renewal-page.layout-variant-v3 .renewal-v3-footer-info div { gap: 0 5px; }
.renewal-page.layout-variant-v3 .renewal-v3-footer-info dt { color: #656873; font-weight: 750; }
.renewal-page.layout-variant-v3 .renewal-v3-footer-info dt::after { content: ""; }
.renewal-page.layout-variant-v3 .renewal-v3-footer-bottom { padding-top: 14px; color: #9a9ca5; font-size: 12px; }
.renewal-page.layout-variant-v3 .renewal-v3-footer-policy { gap: 18px; color: #777a84; font-size: 12px; }
.renewal-page.layout-variant-v3 .renewal-v3-footer-policy a:last-child { color: #3e4049; font-weight: 800; }

@media (max-width: 1024px) {
  .renewal-page.layout-variant-v3 .renewal-v3-service-status { display: none; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-top { grid-template-columns: repeat(2,1fr); }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-cs { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 768px) {
  .renewal-page.layout-variant-v3[data-auth-state="logged-in"] .renewal-v3-account { display: none; }
  .renewal-page.layout-variant-v3 .renewal-v3-header, .renewal-page.layout-variant-v3 .renewal-v3-header-inner { min-height: 62px; }
  .renewal-page.layout-variant-v3 .renewal-v3-header-inner { padding-inline: 16px; }
  .renewal-page.layout-variant-v3 .renewal-v3-logo > span { font-size: 22px; }
  .renewal-page.layout-variant-v3 .renewal-v3-logo > i { width: 6px; height: 6px; margin-top: 10px; }
  .renewal-page.layout-variant-v3 .renewal-v3-header-inner > .mobile-header-actions .mobile-header-action, .renewal-page.layout-variant-v3 .renewal-v3-header-inner > .icon-btn.mobile-menu { width: 40px; min-width: 40px; height: 40px; border: 1px solid #ececf0; border-radius: 50%; background: #fff; }
  .renewal-page.layout-variant-v3 .renewal-v3-header-inner > .gnb { top: 62px; border-top: 1px solid #ececf0; border-radius: 0 0 18px 18px; background: rgba(255,255,255,.99); box-shadow: 0 18px 34px rgba(29,29,42,.1); }
  .renewal-page.layout-variant-v3 .renewal-v3-footer { margin-top: 32px; padding: 26px 0 15px; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-inner { padding-inline: 16px; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-top { grid-template-columns: minmax(120px,.8fr) minmax(0,1.2fr); gap: 22px 20px; padding-bottom: 20px; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-brand { grid-column: 1; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-logo { font-size: 24px; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-brand > p { margin-top: 10px; font-size: 12px; line-height: 1.55; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-nav { grid-column: 2; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-nav > div { gap: 7px; min-width: 0; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-nav strong, .renewal-page.layout-variant-v3 .renewal-v3-footer-nav a { font-size: 12px; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-cs { grid-column: 1 / -1; justify-self: stretch; min-width: 0; padding: 14px 15px; border: 1px solid #e6e4ed; border-radius: 17px; background: rgba(255,255,255,.8); }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-cs .footer-cs-phone { margin-top: 4px; font-size: 22px; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-cs .footer-cs-time { margin-top: 4px; font-size: 12px; }
  .renewal-page.layout-variant-v3 .renewal-v3-compact-talk { margin-top: 11px; font-size: 12px; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-business { padding: 14px 0 13px; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-info { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 16px; font-size: 11px; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-info > div { min-width: 0; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-info > div:last-child { grid-column: 1 / -1; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-info dd { overflow-wrap: anywhere; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-bottom { align-items: center; flex-direction: row; justify-content: space-between; gap: 12px; padding-top: 13px; font-size: 11px; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-policy { flex: 0 0 auto; gap: 12px; font-size: 11px; }
}
@media (max-width: 420px) {
  .renewal-page.layout-variant-v3 .renewal-v3-footer-top { grid-template-columns: minmax(105px,.78fr) minmax(0,1.22fr); gap: 20px 16px; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-nav { gap: 12px; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-bottom { align-items: flex-start; flex-direction: column; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-bottom > p { white-space: normal; }
}
@media (max-width: 340px) {
  .renewal-page.layout-variant-v3 .renewal-v3-footer-top { grid-template-columns: 1fr; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-brand, .renewal-page.layout-variant-v3 .renewal-v3-footer-nav { grid-column: 1; }
  .renewal-page.layout-variant-v3 .renewal-v3-footer-bottom { align-items: flex-start; flex-direction: column; }
}

@keyframes renewal-v3-cart-bounce {
  0% { transform: translateX(0) rotate(0); }
  35% { transform: translateX(2px) rotate(-8deg); }
  68% { transform: translateX(-1px) rotate(5deg); }
  100% { transform: translateX(0) rotate(0); }
}

@keyframes renewal-v3-user-wave {
  0% { transform: rotate(0) scale(1); }
  30% { transform: rotate(-8deg) scale(1.06); }
  62% { transform: rotate(5deg) scale(1.04); }
  100% { transform: rotate(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .renewal-page.layout-variant-v3 .renewal-v3-header *, .renewal-page.layout-variant-v3 .renewal-v3-footer * { transition-duration: .01ms !important; }
  .renewal-page.layout-variant-v3 .renewal-v3-cart .ui-icon,
  .renewal-page.layout-variant-v3 .renewal-v3-account .ui-icon { animation: none !important; }
}

/* Mobile quick navigation shared by the home, product list, and customer center. */
.mobile-fixed-footer {
  display: none;
}

@media (max-width: 768px) {
  body.has-mobile-quick-nav {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .mobile-fixed-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1200;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    min-height: calc(76px + env(safe-area-inset-bottom));
    margin: 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid rgba(226, 224, 235, .9);
    border-radius: 30px 30px 0 0;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -14px 38px rgba(34, 35, 52, .095);
    backdrop-filter: blur(20px) saturate(1.25);
    -webkit-backdrop-filter: blur(20px) saturate(1.25);
  }

  .mobile-fixed-footer::before {
    position: absolute;
    top: 0;
    right: 30px;
    left: 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(117, 96, 232, .2), transparent);
    content: "";
    pointer-events: none;
  }

  .mobile-fixed-footer__item {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 60px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border-radius: 20px;
    color: #858895;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }

  .mobile-fixed-footer__item:active {
    transform: scale(.96);
  }

  .mobile-fixed-footer__item[aria-current="page"] {
    background: transparent;
    box-shadow: none;
    color: #604be0;
    font-size: 11px;
    font-weight: 850;
  }

  .mobile-fixed-footer__icon {
    position: relative;
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 11px;
    transition: color .2s ease, transform .2s ease;
  }

  .mobile-fixed-footer__item[aria-current="page"] .mobile-fixed-footer__icon {
    width: 27px;
    height: 27px;
    background: transparent;
    transform: translateY(-1px);
  }

  .mobile-fixed-footer__item[aria-current="page"] .mobile-fixed-footer__icon svg {
    stroke-width: 2.1;
  }

  .mobile-fixed-footer__item:nth-child(1)[aria-current="page"] svg path,
  .mobile-fixed-footer__item:nth-child(2)[aria-current="page"] svg rect {
    fill: currentColor;
    stroke: currentColor;
  }

  .mobile-fixed-footer__item:nth-child(3)[aria-current="page"] svg circle {
    fill: currentColor;
  }

  .mobile-fixed-footer__item:nth-child(4)[aria-current="page"] svg path:first-child {
    fill: currentColor;
    stroke: currentColor;
  }

  .mobile-fixed-footer__item:nth-child(4)[aria-current="page"] svg path:last-child {
    stroke: #fff;
  }

  .mobile-fixed-footer__icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .mobile-fixed-footer__badge {
    position: absolute;
    top: -5px;
    right: -7px;
    display: grid;
    min-width: 18px;
    height: 18px;
    padding-inline: 4px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #705cf1;
    box-shadow: 0 4px 9px rgba(105, 82, 224, .28);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
  }

  @media (hover: hover) {
    .mobile-fixed-footer__item:not([aria-current="page"]):hover {
      background: #f7f7fa;
      color: #525561;
    }
  }
}

@media (max-width: 360px) {
  .mobile-fixed-footer {
    right: 0;
    left: 0;
    width: 100%;
    padding-inline: 8px;
  }

  .mobile-fixed-footer__item {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-fixed-footer__item {
    transition: none;
  }
}