/* Generated by tools/wordpress-dev/build-theme-assets.ps1. */
/*
Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
https://github.com/orioncactus/pretendard

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/
/* [0] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.0.woff2) format('woff2-variations');
	unicode-range: U+f9ca-fa0b, U+ff03-ff05, U+ff07, U+ff0a-ff0b, U+ff0d-ff19, U+ff1b, U+ff1d, U+ff20-ff5b, U+ff5d, U+ffe0-ffe3, U+ffe5-ffe6;
}

/* [1] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.1.woff2) format('woff2-variations');
	unicode-range: U+d723-d728, U+d72a-d733, U+d735-d748, U+d74a-d74f, U+d752-d753, U+d755-d757, U+d75a-d75f, U+d762-d764, U+d766-d768, U+d76a-d76b, U+d76d-d76f, U+d771-d787, U+d789-d78b, U+d78d-d78f, U+d791-d797, U+d79a, U+d79c, U+d79e-d7a3, U+f900-f909, U+f90b-f92e;
}

/* [2] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.2.woff2) format('woff2-variations');
	unicode-range: U+d679-d68b, U+d68e-d69e, U+d6a0, U+d6a2-d6a7, U+d6a9-d6c3, U+d6c6-d6c7, U+d6c9-d6cb, U+d6cd-d6d3, U+d6d5-d6d6, U+d6d8-d6e3, U+d6e5-d6e7, U+d6e9-d6fb, U+d6fd-d717, U+d719-d71f, U+d721-d722;
}

/* [3] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.3.woff2) format('woff2-variations');
	unicode-range: U+d5bc-d5c7, U+d5ca-d5cb, U+d5cd-d5cf, U+d5d1-d5d7, U+d5d9-d5da, U+d5dc, U+d5de-d5e3, U+d5e6-d5e7, U+d5e9-d5eb, U+d5ed-d5f6, U+d5f8, U+d5fa-d5ff, U+d602-d603, U+d605-d607, U+d609-d60f, U+d612-d613, U+d616-d61b, U+d61d-d637, U+d63a-d63b, U+d63d-d63f, U+d641-d647, U+d64a-d64c, U+d64e-d653, U+d656-d657, U+d659-d65b, U+d65d-d666, U+d668, U+d66a-d678;
}

/* [4] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.4.woff2) format('woff2-variations');
	unicode-range: U+d507, U+d509-d50b, U+d50d-d513, U+d515-d53b, U+d53e-d53f, U+d541-d543, U+d545-d54c, U+d54e, U+d550, U+d552-d557, U+d55a-d55b, U+d55d-d55f, U+d561-d564, U+d566-d567, U+d56a, U+d56c, U+d56e-d573, U+d576-d577, U+d579-d583, U+d585-d586, U+d58a-d5a4, U+d5a6-d5bb;
}

/* [5] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.5.woff2) format('woff2-variations');
	unicode-range: U+d464-d477, U+d47a-d47b, U+d47d-d47f, U+d481-d487, U+d489-d48a, U+d48c, U+d48e-d4e7, U+d4e9-d503, U+d505-d506;
}

/* [6] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.6.woff2) format('woff2-variations');
	unicode-range: U+d3bf-d3c7, U+d3ca-d3cf, U+d3d1-d3eb, U+d3ee-d3ef, U+d3f1-d3f3, U+d3f5-d3fb, U+d3fd-d400, U+d402-d45b, U+d45d-d463;
}

/* [7] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.7.woff2) format('woff2-variations');
	unicode-range: U+d2ff, U+d302-d304, U+d306-d30b, U+d30f, U+d311-d313, U+d315-d31b, U+d31e, U+d322-d324, U+d326-d327, U+d32a-d32b, U+d32d-d32f, U+d331-d337, U+d339-d33c, U+d33e-d37b, U+d37e-d37f, U+d381-d383, U+d385-d38b, U+d38e-d390, U+d392-d397, U+d39a-d39b, U+d39d-d39f, U+d3a1-d3a7, U+d3a9-d3aa, U+d3ac, U+d3ae-d3b3, U+d3b5-d3b7, U+d3b9-d3bb, U+d3bd-d3be;
}

/* [8] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.8.woff2) format('woff2-variations');
	unicode-range: U+d257-d27f, U+d281-d29b, U+d29d-d29f, U+d2a1-d2ab, U+d2ad-d2b7, U+d2ba-d2bb, U+d2bd-d2bf, U+d2c1-d2c7, U+d2c9-d2ef, U+d2f2-d2f3, U+d2f5-d2f7, U+d2f9-d2fe;
}

/* [9] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.9.woff2) format('woff2-variations');
	unicode-range: U+d1b4, U+d1b6-d1f3, U+d1f5-d22b, U+d22e-d22f, U+d231-d233, U+d235-d23b, U+d23d-d240, U+d242-d256;
}

/* [10] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.10.woff2) format('woff2-variations');
	unicode-range: U+d105-d12f, U+d132-d133, U+d135-d137, U+d139-d13f, U+d141-d142, U+d144, U+d146-d14b, U+d14e-d14f, U+d151-d153, U+d155-d15b, U+d15e-d187, U+d189-d19f, U+d1a2-d1a3, U+d1a5-d1a7, U+d1a9-d1af, U+d1b2-d1b3;
}

/* [11] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.11.woff2) format('woff2-variations');
	unicode-range: U+d04b-d04f, U+d051-d057, U+d059-d06b, U+d06d-d06f, U+d071-d073, U+d075-d07b, U+d07e-d0a3, U+d0a6-d0a7, U+d0a9-d0ab, U+d0ad-d0b3, U+d0b6, U+d0b8, U+d0ba-d0bf, U+d0c2-d0c3, U+d0c5-d0c7, U+d0c9-d0cf, U+d0d2, U+d0d6-d0db, U+d0de-d0df, U+d0e1-d0e3, U+d0e5-d0eb, U+d0ee-d0f0, U+d0f2-d104;
}

/* [12] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.12.woff2) format('woff2-variations');
	unicode-range: U+cfa2-cfc3, U+cfc5-cfdf, U+cfe2-cfe3, U+cfe5-cfe7, U+cfe9-cff4, U+cff6-cffb, U+cffd-cfff, U+d001-d003, U+d005-d017, U+d019-d033, U+d036-d037, U+d039-d03b, U+d03d-d04a;
}

/* [13] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.13.woff2) format('woff2-variations');
	unicode-range: U+cef0-cef3, U+cef6, U+cef9-ceff, U+cf01-cf03, U+cf05-cf07, U+cf09-cf0f, U+cf11-cf12, U+cf14-cf1b, U+cf1d-cf1f, U+cf21-cf2f, U+cf31-cf53, U+cf56-cf57, U+cf59-cf5b, U+cf5d-cf63, U+cf66, U+cf68, U+cf6a-cf6f, U+cf71-cf84, U+cf86-cf8b, U+cf8d-cfa1;
}

/* [14] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.14.woff2) format('woff2-variations');
	unicode-range: U+ce3c-ce57, U+ce5a-ce5b, U+ce5d-ce5f, U+ce61-ce67, U+ce6a, U+ce6c, U+ce6e-ce73, U+ce76-ce77, U+ce79-ce7b, U+ce7d-ce83, U+ce85-ce88, U+ce8a-ce8f, U+ce91-ce93, U+ce95-ce97, U+ce99-ce9f, U+cea2, U+cea4-ceab, U+cead-cee3, U+cee6-cee7, U+cee9-ceeb, U+ceed-ceef;
}

/* [15] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.15.woff2) format('woff2-variations');
	unicode-range: U+cd92-cd93, U+cd96-cd97, U+cd99-cd9b, U+cd9d-cda3, U+cda6-cda8, U+cdaa-cdaf, U+cdb1-cdc3, U+cdc5-cdcb, U+cdcd-cde7, U+cde9-ce03, U+ce05-ce1f, U+ce22-ce34, U+ce36-ce3b;
}

/* [16] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.16.woff2) format('woff2-variations');
	unicode-range: U+ccef-cd07, U+cd0a-cd0b, U+cd0d-cd1a, U+cd1c, U+cd1e-cd2b, U+cd2d-cd5b, U+cd5d-cd77, U+cd79-cd91;
}

/* [17] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.17.woff2) format('woff2-variations');
	unicode-range: U+cc3f-cc43, U+cc46-cc47, U+cc49-cc4b, U+cc4d-cc53, U+cc55-cc58, U+cc5a-cc5f, U+cc61-cc97, U+cc9a-cc9b, U+cc9d-cc9f, U+cca1-cca7, U+ccaa, U+ccac, U+ccae-ccb3, U+ccb6-ccb7, U+ccb9-ccbb, U+ccbd-cccf, U+ccd1-cce3, U+cce5-ccee;
}

/* [18] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.18.woff2) format('woff2-variations');
	unicode-range: U+cb91-cbd3, U+cbd5-cbe3, U+cbe5-cc0b, U+cc0e-cc0f, U+cc11-cc13, U+cc15-cc1b, U+cc1d-cc20, U+cc23-cc27, U+cc2a-cc2b, U+cc2d, U+cc2f, U+cc31-cc37, U+cc3a, U+cc3c;
}

/* [19] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.19.woff2) format('woff2-variations');
	unicode-range: U+caf4-cb47, U+cb4a-cb90;
}

/* [20] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.20.woff2) format('woff2-variations');
	unicode-range: U+ca4a-ca4b, U+ca4e-ca4f, U+ca51-ca53, U+ca55-ca5b, U+ca5d-ca60, U+ca62-ca83, U+ca85-cabb, U+cabe-cabf, U+cac1-cac3, U+cac5-cacb, U+cacd-cad0, U+cad2, U+cad4-cad8, U+cada-caf3;
}

/* [21] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.21.woff2) format('woff2-variations');
	unicode-range: U+c996-c997, U+c99a-c99c, U+c99e-c9bf, U+c9c2-c9c3, U+c9c5-c9c7, U+c9c9-c9cf, U+c9d2, U+c9d4, U+c9d7-c9d8, U+c9db, U+c9de-c9df, U+c9e1-c9e3, U+c9e5-c9e6, U+c9e8-c9eb, U+c9ee-c9f0, U+c9f2-c9f7, U+c9f9-ca0b, U+ca0d-ca28, U+ca2a-ca49;
}

/* [22] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.22.woff2) format('woff2-variations');
	unicode-range: U+c8e9-c8f4, U+c8f6-c8fb, U+c8fe-c8ff, U+c901-c903, U+c905-c90b, U+c90e-c910, U+c912-c917, U+c919-c92b, U+c92d-c94f, U+c951-c953, U+c955-c96b, U+c96d-c973, U+c975-c987, U+c98a-c98b, U+c98d-c98f, U+c991-c995;
}

/* [23] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.23.woff2) format('woff2-variations');
	unicode-range: U+c841-c84b, U+c84d-c86f, U+c872-c873, U+c875-c877, U+c879-c87f, U+c882-c884, U+c887-c88a, U+c88d-c8c3, U+c8c5-c8df, U+c8e1-c8e8;
}

/* [24] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.24.woff2) format('woff2-variations');
	unicode-range: U+c779-c77b, U+c77e-c782, U+c786, U+c78b, U+c78d, U+c78f, U+c792-c793, U+c795, U+c797, U+c799-c79f, U+c7a2, U+c7a7-c7ab, U+c7ae-c7bb, U+c7bd-c7c0, U+c7c2-c7c7, U+c7c9-c7dc, U+c7de-c7ff, U+c802-c803, U+c805-c807, U+c809, U+c80b-c80f, U+c812, U+c814, U+c817-c81b, U+c81e-c81f, U+c821-c823, U+c825-c82e, U+c830-c837, U+c839-c83b, U+c83d-c840;
}

/* [25] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.25.woff2) format('woff2-variations');
	unicode-range: U+c6bb-c6bf, U+c6c2, U+c6c4, U+c6c6-c6cb, U+c6ce-c6cf, U+c6d1-c6d3, U+c6d5-c6db, U+c6dd-c6df, U+c6e1-c6e7, U+c6e9-c6eb, U+c6ed-c6ef, U+c6f1-c6f8, U+c6fa-c703, U+c705-c707, U+c709-c70b, U+c70d-c716, U+c718, U+c71a-c71f, U+c722-c723, U+c725-c727, U+c729-c734, U+c736-c73b, U+c73e-c73f, U+c741-c743, U+c745-c74b, U+c74e-c750, U+c752-c757, U+c759-c773, U+c776-c777;
}

/* [26] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.26.woff2) format('woff2-variations');
	unicode-range: U+c5f5-c5fb, U+c5fe, U+c602-c605, U+c607, U+c609-c60f, U+c611-c61a, U+c61c-c623, U+c626-c627, U+c629-c62b, U+c62d, U+c62f-c632, U+c636, U+c638, U+c63a-c63f, U+c642-c643, U+c645-c647, U+c649-c652, U+c656-c65b, U+c65d-c65f, U+c661-c663, U+c665-c677, U+c679-c67b, U+c67d-c693, U+c696-c697, U+c699-c69b, U+c69d-c6a3, U+c6a6, U+c6a8, U+c6aa-c6af, U+c6b2-c6b3, U+c6b5-c6b7, U+c6b9-c6ba;
}

/* [27] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.27.woff2) format('woff2-variations');
	unicode-range: U+c517-c527, U+c52a-c52b, U+c52d-c52f, U+c531-c538, U+c53a, U+c53c, U+c53e-c543, U+c546-c547, U+c54b, U+c54d-c552, U+c556, U+c55a-c55b, U+c55d, U+c55f, U+c562-c563, U+c565-c567, U+c569-c56f, U+c572, U+c574, U+c576-c57b, U+c57e-c57f, U+c581-c583, U+c585-c586, U+c588-c58b, U+c58e, U+c590, U+c592-c596, U+c599-c5b3, U+c5b6-c5b7, U+c5ba, U+c5be-c5c3, U+c5ca-c5cb, U+c5cd, U+c5cf, U+c5d2-c5d3, U+c5d5-c5d7, U+c5d9-c5df, U+c5e1-c5e2, U+c5e4, U+c5e6-c5eb, U+c5ef, U+c5f1-c5f3;
}

/* [28] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.28.woff2) format('woff2-variations');
	unicode-range: U+c475-c4ef, U+c4f2-c4f3, U+c4f5-c4f7, U+c4f9-c4ff, U+c502-c50b, U+c50d-c516;
}

/* [29] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.29.woff2) format('woff2-variations');
	unicode-range: U+c3d0-c3d7, U+c3da-c3db, U+c3dd-c3de, U+c3e1-c3ec, U+c3ee-c3f3, U+c3f5-c42b, U+c42d-c463, U+c466-c474;
}

/* [30] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.30.woff2) format('woff2-variations');
	unicode-range: U+c32b-c367, U+c36a-c36b, U+c36d-c36f, U+c371-c377, U+c37a-c37b, U+c37e-c383, U+c385-c387, U+c389-c3cf;
}

/* [31] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.31.woff2) format('woff2-variations');
	unicode-range: U+c26a-c26b, U+c26d-c26f, U+c271-c273, U+c275-c27b, U+c27e-c287, U+c289-c28f, U+c291-c297, U+c299-c29a, U+c29c-c2a3, U+c2a5-c2a7, U+c2a9-c2ab, U+c2ad-c2b3, U+c2b6, U+c2b8, U+c2ba-c2bb, U+c2bd-c2db, U+c2de-c2df, U+c2e1-c2e2, U+c2e5-c2ea, U+c2ee, U+c2f0, U+c2f2-c2f5, U+c2f7, U+c2fa-c2fb, U+c2fd-c2ff, U+c301-c307, U+c309-c30c, U+c30e-c312, U+c315-c323, U+c325-c328, U+c32a;
}

/* [32] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.32.woff2) format('woff2-variations');
	unicode-range: U+c1bc-c1c3, U+c1c5-c1df, U+c1e1-c1fb, U+c1fd-c203, U+c205-c20c, U+c20e, U+c210-c217, U+c21a-c21b, U+c21d-c21e, U+c221-c227, U+c229-c22a, U+c22c, U+c22e, U+c230, U+c233-c24f, U+c251-c257, U+c259-c269;
}

/* [33] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.33.woff2) format('woff2-variations');
	unicode-range: U+c101-c11b, U+c11f, U+c121-c123, U+c125-c12b, U+c12e, U+c132-c137, U+c13a-c13b, U+c13d-c13f, U+c141-c147, U+c14a, U+c14c-c153, U+c155-c157, U+c159-c15b, U+c15d-c166, U+c169-c16f, U+c171-c177, U+c179-c18b, U+c18e-c18f, U+c191-c193, U+c195-c19b, U+c19d-c19e, U+c1a0, U+c1a2-c1a4, U+c1a6-c1bb;
}

/* [34] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.34.woff2) format('woff2-variations');
	unicode-range: U+c049-c057, U+c059-c05b, U+c05d-c05f, U+c061-c067, U+c069-c08f, U+c091-c0ab, U+c0ae-c0af, U+c0b1-c0b3, U+c0b5, U+c0b7-c0bb, U+c0be, U+c0c2-c0c7, U+c0ca-c0cb, U+c0cd-c0cf, U+c0d1-c0d7, U+c0d9-c0da, U+c0dc, U+c0de-c0e3, U+c0e5-c0eb, U+c0ed-c0f3, U+c0f6, U+c0f8, U+c0fa-c0ff;
}

/* [35] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.35.woff2) format('woff2-variations');
	unicode-range: U+bfa7-bfaf, U+bfb1-bfc4, U+bfc6-bfcb, U+bfce-bfcf, U+bfd1-bfd3, U+bfd5-bfdb, U+bfdd-c048;
}

/* [36] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.36.woff2) format('woff2-variations');
	unicode-range: U+bf07, U+bf09-bf3f, U+bf41-bf4f, U+bf52-bf54, U+bf56-bfa6;
}

/* [37] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.37.woff2) format('woff2-variations');
	unicode-range: U+be56, U+be58, U+be5c-be5f, U+be62-be63, U+be65-be67, U+be69-be74, U+be76-be7b, U+be7e-be7f, U+be81-be8e, U+be90, U+be92-bea7, U+bea9-becf, U+bed2-bed3, U+bed5-bed6, U+bed9-bee3, U+bee6-bf06;
}

/* [38] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.38.woff2) format('woff2-variations');
	unicode-range: U+bdb0-bdd3, U+bdd5-bdef, U+bdf1-be0b, U+be0d-be0f, U+be11-be13, U+be15-be43, U+be46-be47, U+be49-be4b, U+be4d-be53;
}

/* [39] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.39.woff2) format('woff2-variations');
	unicode-range: U+bd03, U+bd06, U+bd08, U+bd0a-bd0f, U+bd11-bd22, U+bd25-bd47, U+bd49-bd58, U+bd5a-bd7f, U+bd82-bd83, U+bd85-bd87, U+bd8a-bd8f, U+bd91-bd92, U+bd94, U+bd96-bd98, U+bd9a-bdaf;
}

/* [40] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.40.woff2) format('woff2-variations');
	unicode-range: U+bc4e-bc83, U+bc86-bc87, U+bc89-bc8b, U+bc8d-bc93, U+bc96, U+bc98, U+bc9b-bc9f, U+bca2-bca3, U+bca5-bca7, U+bca9-bcb2, U+bcb4-bcbb, U+bcbe-bcbf, U+bcc1-bcc3, U+bcc5-bccc, U+bcce-bcd0, U+bcd2-bcd4, U+bcd6-bcf3, U+bcf7, U+bcf9-bcfb, U+bcfd-bd02;
}

/* [41] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.41.woff2) format('woff2-variations');
	unicode-range: U+bb90-bba3, U+bba5-bbab, U+bbad-bbbf, U+bbc1-bbf7, U+bbfa-bbfb, U+bbfd-bbfe, U+bc01-bc07, U+bc09-bc0a, U+bc0e, U+bc10, U+bc12-bc13, U+bc17, U+bc19-bc1a, U+bc1e, U+bc20-bc23, U+bc26, U+bc28, U+bc2a-bc2c, U+bc2e-bc2f, U+bc32-bc33, U+bc35-bc37, U+bc39-bc3f, U+bc41-bc42, U+bc44, U+bc46-bc48, U+bc4a-bc4d;
}

/* [42] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.42.woff2) format('woff2-variations');
	unicode-range: U+bae6-bafb, U+bafd-bb17, U+bb19-bb33, U+bb37, U+bb39-bb3a, U+bb3d-bb43, U+bb45-bb46, U+bb48, U+bb4a-bb4f, U+bb51-bb53, U+bb55-bb57, U+bb59-bb62, U+bb64-bb8f;
}

/* [43] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.43.woff2) format('woff2-variations');
	unicode-range: U+ba30-ba37, U+ba3a-ba3b, U+ba3d-ba3f, U+ba41-ba47, U+ba49-ba4a, U+ba4c, U+ba4e-ba53, U+ba56-ba57, U+ba59-ba5b, U+ba5d-ba63, U+ba65-ba66, U+ba68-ba6f, U+ba71-ba73, U+ba75-ba77, U+ba79-ba84, U+ba86, U+ba88-baa7, U+baaa, U+baad-baaf, U+bab1-bab7, U+baba, U+babc, U+babe-bae5;
}

/* [44] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.44.woff2) format('woff2-variations');
	unicode-range: U+b96e-b973, U+b976-b977, U+b979-b97b, U+b97d-b983, U+b986, U+b988, U+b98a-b98d, U+b98f-b9ab, U+b9ae-b9af, U+b9b1-b9b3, U+b9b5-b9bb, U+b9be, U+b9c0, U+b9c2-b9c7, U+b9ca-b9cb, U+b9cd, U+b9d2-b9d7, U+b9da, U+b9dc, U+b9df-b9e0, U+b9e2, U+b9e6-b9e7, U+b9e9-b9f3, U+b9f6, U+b9f8, U+b9fb-ba2f;
}

/* [45] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.45.woff2) format('woff2-variations');
	unicode-range: U+b8bf-b8cb, U+b8cd-b8e0, U+b8e2-b8e7, U+b8ea-b8eb, U+b8ed-b8ef, U+b8f1-b8f7, U+b8fa, U+b8fc, U+b8fe-b903, U+b905-b917, U+b919-b91f, U+b921-b93b, U+b93d-b957, U+b95a-b95b, U+b95d-b95f, U+b961-b967, U+b969-b96c;
}

/* [46] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.46.woff2) format('woff2-variations');
	unicode-range: U+b80d-b80f, U+b811-b817, U+b81a, U+b81c-b823, U+b826-b827, U+b829-b82b, U+b82d-b833, U+b836, U+b83a-b83f, U+b841-b85b, U+b85e-b85f, U+b861-b863, U+b865-b86b, U+b86e, U+b870, U+b872-b8af, U+b8b1-b8be;
}

/* [47] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.47.woff2) format('woff2-variations');
	unicode-range: U+b74d-b75f, U+b761-b763, U+b765-b774, U+b776-b77b, U+b77e-b77f, U+b781-b783, U+b785-b78b, U+b78e, U+b792-b796, U+b79a-b79b, U+b79d-b7a7, U+b7aa, U+b7ae-b7b3, U+b7b6-b7c8, U+b7ca-b7eb, U+b7ee-b7ef, U+b7f1-b7f3, U+b7f5-b7fb, U+b7fe, U+b802-b806, U+b80a-b80b;
}

/* [48] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.48.woff2) format('woff2-variations');
	unicode-range: U+b6a7-b6aa, U+b6ac-b6b0, U+b6b2-b6ef, U+b6f1-b727, U+b72a-b72b, U+b72d-b72e, U+b731-b737, U+b739-b73a, U+b73c-b743, U+b745-b74c;
}

/* [49] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.49.woff2) format('woff2-variations');
	unicode-range: U+b605-b60f, U+b612-b617, U+b619-b624, U+b626-b69b, U+b69e-b6a3, U+b6a5-b6a6;
}

/* [50] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.50.woff2) format('woff2-variations');
	unicode-range: U+b55f, U+b562-b583, U+b585-b59f, U+b5a2-b5a3, U+b5a5-b5a7, U+b5a9-b5b2, U+b5b5-b5ba, U+b5bd-b604;
}

/* [51] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.51.woff2) format('woff2-variations');
	unicode-range: U+b4a5-b4b6, U+b4b8-b4bf, U+b4c1-b4c7, U+b4c9-b4db, U+b4de-b4df, U+b4e1-b4e2, U+b4e5-b4eb, U+b4ee, U+b4f0, U+b4f2-b513, U+b516-b517, U+b519-b51a, U+b51d-b523, U+b526, U+b528, U+b52b-b52f, U+b532-b533, U+b535-b537, U+b539-b53f, U+b541-b544, U+b546-b54b, U+b54d-b54f, U+b551-b55b, U+b55d-b55e;
}

/* [52] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.52.woff2) format('woff2-variations');
	unicode-range: U+b3f8-b3fb, U+b3fd-b40f, U+b411-b417, U+b419-b41b, U+b41d-b41f, U+b421-b427, U+b42a-b42b, U+b42d-b44f, U+b452-b453, U+b455-b457, U+b459-b45f, U+b462-b464, U+b466-b46b, U+b46d-b47f, U+b481-b4a3;
}

/* [53] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.53.woff2) format('woff2-variations');
	unicode-range: U+b342-b353, U+b356-b357, U+b359-b35b, U+b35d-b35e, U+b360-b363, U+b366, U+b368, U+b36a-b36d, U+b36f, U+b372-b373, U+b375-b377, U+b379-b37f, U+b381-b382, U+b384, U+b386-b38b, U+b38d-b3c3, U+b3c6-b3c7, U+b3c9-b3ca, U+b3cd-b3d3, U+b3d6, U+b3d8, U+b3da-b3f7;
}

/* [54] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.54.woff2) format('woff2-variations');
	unicode-range: U+b27c-b283, U+b285-b28f, U+b292-b293, U+b295-b297, U+b29a-b29f, U+b2a1-b2a4, U+b2a7-b2a9, U+b2ab, U+b2ad-b2c7, U+b2ca-b2cb, U+b2cd-b2cf, U+b2d1-b2d7, U+b2da, U+b2dc, U+b2de-b2e3, U+b2e7, U+b2e9-b2ea, U+b2ef-b2f3, U+b2f6, U+b2f8, U+b2fa-b2fb, U+b2fd-b2fe, U+b302-b303, U+b305-b307, U+b309-b30f, U+b312, U+b316-b31b, U+b31d-b341;
}

/* [55] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.55.woff2) format('woff2-variations');
	unicode-range: U+b1d6-b1e7, U+b1e9-b1fc, U+b1fe-b203, U+b206-b207, U+b209-b20b, U+b20d-b213, U+b216-b21f, U+b221-b257, U+b259-b273, U+b275-b27b;
}

/* [56] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.56.woff2) format('woff2-variations');
	unicode-range: U+b120-b122, U+b126-b127, U+b129-b12b, U+b12d-b133, U+b136, U+b138, U+b13a-b13f, U+b142-b143, U+b145-b14f, U+b151-b153, U+b156-b157, U+b159-b177, U+b17a-b17b, U+b17d-b17f, U+b181-b187, U+b189-b18c, U+b18e-b191, U+b195-b1a7, U+b1a9-b1cb, U+b1cd-b1d5;
}

/* [57] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.57.woff2) format('woff2-variations');
	unicode-range: U+b05f-b07b, U+b07e-b07f, U+b081-b083, U+b085-b08b, U+b08d-b097, U+b09b, U+b09d-b09f, U+b0a2-b0a7, U+b0aa, U+b0b0, U+b0b2, U+b0b6-b0b7, U+b0b9-b0bb, U+b0bd-b0c3, U+b0c6-b0c7, U+b0ca-b0cf, U+b0d1-b0df, U+b0e1-b0e4, U+b0e6-b107, U+b10a-b10b, U+b10d-b10f, U+b111-b112, U+b114-b117, U+b119-b11a, U+b11c-b11f;
}

/* [58] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.58.woff2) format('woff2-variations');
	unicode-range: U+afac-afb7, U+afba-afbb, U+afbd-afbf, U+afc1-afc6, U+afca-afcc, U+afce-afd3, U+afd5-afe7, U+afe9-afef, U+aff1-b00b, U+b00d-b00f, U+b011-b013, U+b015-b01b, U+b01d-b027, U+b029-b043, U+b045-b047, U+b049, U+b04b, U+b04d-b052, U+b055-b056, U+b058-b05c, U+b05e;
}

/* [59] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.59.woff2) format('woff2-variations');
	unicode-range: U+af03-af07, U+af09-af2b, U+af2e-af33, U+af35-af3b, U+af3e-af40, U+af44-af47, U+af4a-af5c, U+af5e-af63, U+af65-af7f, U+af81-afab;
}

/* [60] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.60.woff2) format('woff2-variations');
	unicode-range: U+ae56-ae5b, U+ae5e-ae60, U+ae62-ae64, U+ae66-ae67, U+ae69-ae6b, U+ae6d-ae83, U+ae85-aebb, U+aebf, U+aec1-aec3, U+aec5-aecb, U+aece, U+aed0, U+aed2-aed7, U+aed9-aef3, U+aef5-af02;
}

/* [61] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.61.woff2) format('woff2-variations');
	unicode-range: U+ad9c-ada3, U+ada5-adbf, U+adc1-adc3, U+adc5-adc7, U+adc9-add2, U+add4-addb, U+addd-addf, U+ade1-ade3, U+ade5-adf7, U+adfa-adfb, U+adfd-adff, U+ae02-ae07, U+ae0a, U+ae0c, U+ae0e-ae13, U+ae15-ae2f, U+ae31-ae33, U+ae35-ae37, U+ae39-ae3f, U+ae42, U+ae44, U+ae46-ae49, U+ae4b, U+ae4f, U+ae51-ae53, U+ae55;
}

/* [62] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.62.woff2) format('woff2-variations');
	unicode-range: U+ace2-ace3, U+ace5-ace6, U+ace9-acef, U+acf2, U+acf4, U+acf7-acfb, U+acfe-acff, U+ad01-ad03, U+ad05-ad0b, U+ad0d-ad10, U+ad12-ad1b, U+ad1d-ad33, U+ad35-ad48, U+ad4a-ad4f, U+ad51-ad6b, U+ad6e-ad6f, U+ad71-ad72, U+ad77-ad7c, U+ad7e, U+ad80, U+ad82-ad87, U+ad89-ad8b, U+ad8d-ad8f, U+ad91-ad9b;
}

/* [63] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.63.woff2) format('woff2-variations');
	unicode-range: U+ac25-ac2c, U+ac2e, U+ac30, U+ac32-ac37, U+ac39-ac3f, U+ac41-ac4c, U+ac4e-ac6f, U+ac72-ac73, U+ac75-ac76, U+ac79-ac7f, U+ac82, U+ac84-ac88, U+ac8a-ac8b, U+ac8d-ac8f, U+ac91-ac93, U+ac95-ac9b, U+ac9d-ac9e, U+aca1-aca7, U+acab, U+acad-acaf, U+acb1-acb7, U+acba-acbb, U+acbe-acc0, U+acc2-acc3, U+acc5-acdf;
}

/* [64] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.64.woff2) format('woff2-variations');
	unicode-range: U+99df, U+99ed, U+99f1, U+99ff, U+9a01, U+9a08, U+9a0e-9a0f, U+9a19, U+9a2b, U+9a30, U+9a36-9a37, U+9a40, U+9a43, U+9a45, U+9a4d, U+9a55, U+9a57, U+9a5a-9a5b, U+9a5f, U+9a62, U+9a65, U+9a69-9a6a, U+9aa8, U+9ab8, U+9ad3, U+9ae5, U+9aee, U+9b1a, U+9b27, U+9b2a, U+9b31, U+9b3c, U+9b41-9b45, U+9b4f, U+9b54, U+9b5a, U+9b6f, U+9b8e, U+9b91, U+9b9f, U+9bab, U+9bae, U+9bc9, U+9bd6, U+9be4, U+9be8, U+9c0d, U+9c10, U+9c12, U+9c15, U+9c25, U+9c32, U+9c3b, U+9c47, U+9c49, U+9c57, U+9ce5, U+9ce7, U+9ce9, U+9cf3-9cf4, U+9cf6, U+9d09, U+9d1b, U+9d26, U+9d28, U+9d3b, U+9d51, U+9d5d, U+9d60-9d61, U+9d6c, U+9d72, U+9da9, U+9daf, U+9db4, U+9dc4, U+9dd7, U+9df2, U+9df8-9dfa, U+9e1a, U+9e1e, U+9e75, U+9e79, U+9e7d, U+9e7f, U+9e92-9e93, U+9e97, U+9e9d, U+9e9f, U+9ea5, U+9eb4-9eb5, U+9ebb, U+9ebe, U+9ec3, U+9ecd-9ece, U+9ed4, U+9ed8, U+9edb-9edc, U+9ede, U+9ee8, U+9ef4, U+9f07-9f08, U+9f0e, U+9f13, U+9f20, U+9f3b, U+9f4a-9f4b, U+9f4e, U+9f52, U+9f5f, U+9f61, U+9f67, U+9f6a, U+9f6c, U+9f77, U+9f8d, U+9f90, U+9f95, U+9f9c, U+ac02-ac03, U+ac05-ac06, U+ac09-ac0f, U+ac17-ac18, U+ac1b, U+ac1e-ac1f, U+ac21-ac23;
}

/* [65] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.65.woff2) format('woff2-variations');
	unicode-range: U+338c-339c, U+339f-33a0, U+33a2-33cb, U+33cf-33d0, U+33d3, U+33d6, U+33d8, U+33db-33dd, U+4e01, U+4e03, U+4e07-4e08, U+4e11, U+4e14-4e15, U+4e18-4e19, U+4e1e, U+4e32, U+4e38-4e39, U+4e42-4e43, U+4e45, U+4e4d-4e4f, U+4e56, U+4e58-4e59, U+4e5d-4e5e, U+4e6b, U+4e6d, U+4e73, U+4e76-4e77, U+4e7e, U+4e82, U+4e86, U+4e88, U+4e8e, U+4e90-4e92, U+4e94-4e95, U+4e98, U+4e9b, U+4e9e, U+4ea1-4ea2, U+4ea4-4ea6, U+4ea8, U+4eab, U+4ead-4eae, U+4eb6, U+4ec0-4ec1, U+4ec4, U+4ec7, U+4ecb, U+4ecd, U+4ed4-4ed5, U+4ed7-4ed9, U+4edd, U+4edf, U+4ee4, U+4ef0, U+4ef2, U+4ef6-4ef7, U+4efb, U+4f01, U+4f09, U+4f0b, U+4f0d-4f11, U+4f2f, U+4f34, U+4f36, U+4f38, U+4f3a, U+4f3c-4f3d;
}

/* [66] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.66.woff2) format('woff2-variations');
	unicode-range: U+3136, U+3138, U+313a-3140, U+3143-3144, U+3150, U+3152, U+3154-3156, U+3158-315b, U+315d-315f, U+3162, U+3164-318c, U+318e, U+3200-321b, U+3231, U+3239, U+3251-325a, U+3260-327b, U+327e-327f, U+328a-3290, U+3294, U+329e, U+32a5, U+3380-3384, U+3388-338b;
}

/* [67] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.67.woff2) format('woff2-variations');
	unicode-range: U+2f7d, U+2f7f-2f8b, U+2f8e-2f90, U+2f92-2f97, U+2f99-2fa0, U+2fa2-2fa3, U+2fa5-2fa9, U+2fac-2fb1, U+2fb3-2fbc, U+2fc1-2fca, U+2fcd-2fd4, U+3003, U+3012-3019, U+301c, U+301e-3020, U+3036, U+3041, U+3043, U+3045, U+3047, U+3049, U+304e, U+3050, U+3052, U+3056, U+305a, U+305c, U+305e, U+3062, U+3065, U+306c, U+3070-307d, U+3080, U+3085, U+3087, U+308e, U+3090-3091, U+30a1, U+30a5, U+30a9, U+30ae, U+30b1-30b2, U+30b4, U+30b6, U+30bc-30be, U+30c2, U+30c5, U+30cc, U+30d2, U+30d4, U+30d8-30dd, U+30e4, U+30e6, U+30e8, U+30ee, U+30f0-30f2, U+30f4-30f6, U+3133, U+3135;
}

/* [68] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.68.woff2) format('woff2-variations');
	unicode-range: U+2541-254b, U+25a4-25a9, U+25b1, U+25b5, U+25b9, U+25bf, U+25c1, U+25c3, U+25c9-25ca, U+25cc, U+25ce, U+25d0-25d1, U+25e6, U+25ef, U+260f, U+261d, U+261f, U+262f, U+2660, U+2664, U+2667-2669, U+266d, U+266f, U+2716, U+271a, U+273d, U+2756, U+2776-277f, U+278a-2793, U+2963, U+2965, U+2ac5-2ac6, U+2acb-2acc, U+2f00, U+2f04, U+2f06, U+2f08, U+2f0a-2f0b, U+2f11-2f12, U+2f14, U+2f17-2f18, U+2f1c-2f1d, U+2f1f-2f20, U+2f23-2f26, U+2f28-2f29, U+2f2b, U+2f2d, U+2f2f-2f32, U+2f38, U+2f3c-2f40, U+2f42-2f4c, U+2f4f-2f52, U+2f54-2f58, U+2f5a-2f66, U+2f69-2f70, U+2f72-2f76, U+2f78, U+2f7a-2f7c;
}

/* [69] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.69.woff2) format('woff2-variations');
	unicode-range: U+2479-2487, U+249c-24d1, U+24d3-24d7, U+24d9-24e9, U+24eb-24f4, U+2500-2501, U+2503, U+250c-2513, U+2515-2516, U+2518-2540;
}

/* [70] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.70.woff2) format('woff2-variations');
	unicode-range: U+215b-215e, U+2162-2169, U+2170-2179, U+2195-2199, U+21b0-21b4, U+21bc, U+21c0, U+21c4-21c5, U+21cd, U+21cf-21d4, U+21e0-21e3, U+21e6-21e9, U+2200, U+2202-2203, U+2206-2209, U+220b-220c, U+220f, U+2211, U+2213, U+221a, U+221d-2220, U+2222, U+2225-2227, U+2229-222c, U+222e, U+2234-2237, U+223d, U+2243, U+2245, U+2248, U+2250-2253, U+225a, U+2260-2262, U+2264-2267, U+226a-226b, U+226e-2273, U+2276-2277, U+2279-227b, U+2280-2287, U+228a-228b, U+2295-2297, U+22a3-22a5, U+22bb-22bc, U+22ce-22cf, U+22da-22db, U+22ee-22ef, U+2306, U+2312, U+2314, U+2467-2478;
}

/* [71] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.71.woff2) format('woff2-variations');
	unicode-range: U+81-82, U+84, U+a2-a5, U+a7-a8, U+aa, U+ac, U+b1-b3, U+b6, U+b8-ba, U+bc-be, U+c0, U+c2, U+c6-cb, U+ce-d0, U+d4, U+d8-d9, U+db-dc, U+de-df, U+e6, U+eb, U+ee-f0, U+f4, U+f7-f9, U+fb, U+fe-ff, U+111, U+126-127, U+132-133, U+138, U+13f-142, U+149-14b, U+152-153, U+166-167, U+2bc, U+2c7, U+2d0, U+2d8-2d9, U+2db-2dd, U+391-394, U+396-3a1, U+3a3-3a9, U+3b2-3b6, U+3b8, U+3bc, U+3be-3c1, U+3c3-3c9, U+2010, U+2015-2016, U+2018-2019, U+201b, U+201f-2021, U+2025, U+2030, U+2033-2036, U+203c, U+203e, U+2042, U+2074, U+207a-207f, U+2081-2084, U+2109, U+2113, U+2116, U+2121, U+2126, U+212b, U+2153-2154;
}

/* [72] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.72.woff2) format('woff2-variations');
	unicode-range: U+e8, U+2da, U+2160, U+2194, U+3054, U+3058, U+306d, U+3086, U+308d, U+30ac, U+30bb, U+30c4, U+30cd-30ce, U+30e2, U+3132, U+3146, U+3149, U+339d, U+4e3b, U+4f0a, U+4fdd, U+4fe1, U+5409, U+540c, U+5834, U+592a-592b, U+5b9a, U+5dde, U+5e0c, U+5e73, U+5f0f, U+60f3, U+653f, U+661f, U+662f, U+667a, U+683c, U+6b4c, U+6c11, U+767c, U+76ee, U+76f4, U+77f3, U+79d1, U+7a7a, U+7b2c, U+7d22, U+8207, U+8a00, U+8a71, U+9280, U+9580, U+958b, U+96c6, U+9762, U+98df, U+9ed1, U+ac2d, U+adc8, U+add3, U+af48, U+b014, U+b134-b135, U+b158, U+b2aa, U+b35f, U+b6a4, U+b9cf, U+bb63, U+bd23, U+be91, U+c29b, U+c3f4, U+c42c, U+c55c, U+c573, U+c58f, U+c78c, U+c7dd, U+c8f5, U+cad1, U+cc48, U+cf10, U+cf20, U+d03c, U+d07d, U+d2a0, U+d30e, U+d38d, U+d3a8, U+d3c8, U+d5e5, U+d5f9, U+d6e4, U+f90a, U+ff02, U+ff1c;
}

/* [73] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.73.woff2) format('woff2-variations');
	unicode-range: U+3b1, U+2466, U+25a1, U+25a3, U+261c, U+3008-3009, U+305b, U+305d, U+3069, U+30a7, U+30ba, U+30cf, U+30ef, U+3151, U+3157, U+4e4b, U+4e5f, U+4e8c, U+4eca, U+4ed6, U+4f5b, U+50cf, U+5149, U+5165, U+5171, U+5229, U+529b, U+5316, U+539f, U+53f2, U+571f, U+5728, U+58eb, U+591c, U+5b78, U+5c11, U+5c55, U+5ddd, U+5e02, U+5fb7, U+60c5, U+610f, U+611f, U+6625, U+66f8, U+6797, U+679c, U+682a, U+6d2a, U+706b, U+7406, U+767b, U+76f8, U+77e5, U+7acb, U+898b, U+8a69, U+8def, U+8fd1, U+901a, U+90e8, U+91cd, U+975e, U+ae14, U+ae6c, U+aec0, U+afc7, U+afc9, U+b01c, U+b028, U+b308, U+b311, U+b314, U+b31c, U+b524, U+b560, U+b764, U+b920, U+b9e3, U+bd48, U+be7d, U+c0db, U+c231, U+c270, U+c2e3, U+c37d, U+c3ed, U+c530, U+c6a5, U+c6dc, U+c7a4, U+c954, U+c974, U+d000, U+d565, U+d667, U+d6c5, U+d79d, U+ff1e;
}

/* [74] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.74.woff2) format('woff2-variations');
	unicode-range: U+131, U+2032, U+2465, U+2642, U+3048, U+3051, U+3083-3084, U+308f, U+30c0, U+30d1, U+30d3, U+30d6, U+30df, U+30e7, U+3153, U+4e16, U+4e8b, U+4ee5, U+5206, U+52a0, U+52d5, U+53e4, U+53ef, U+54c1, U+57ce, U+597d, U+5b8c, U+5ea6, U+5f8c, U+5f97, U+6210, U+6240, U+624b, U+6728, U+6bd4, U+7236, U+7269, U+7279, U+738b, U+7528, U+7530, U+767e, U+798f, U+8005, U+8a18, U+90fd, U+91cc, U+9577, U+9593, U+98a8, U+ac20, U+acf6, U+ad90, U+af5d, U+af80, U+afcd, U+aff0, U+b0a1, U+b0b5, U+b1fd, U+b2fc, U+b380, U+b51b, U+b584, U+b5b3, U+b8fd, U+b93c, U+b9f4, U+bb44, U+bc08, U+bc27, U+bc49, U+be55, U+be64, U+bfb0, U+bfc5, U+c178, U+c21f, U+c314, U+c4f1, U+c58d, U+c664, U+c698, U+c6a7, U+c6c1, U+c9ed, U+cac0, U+cacc, U+cad9, U+ccb5, U+cdcc, U+d0e4, U+d143, U+d320, U+d330, U+d54d, U+ff06, U+ff1f, U+ff5e;
}

/* [75] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.75.woff2) format('woff2-variations');
	unicode-range: U+b4, U+20a9, U+20ac, U+2190, U+24d8, U+2502, U+2514, U+2592, U+25c7-25c8, U+2663, U+3060, U+3064, U+3081, U+3088, U+30a3, U+30a6, U+30aa, U+30b5, U+30c7, U+30ca-30cb, U+30d0, U+30e3, U+30e5, U+339e, U+4e09, U+4eac, U+4f5c, U+5167-5168, U+516c, U+51fa, U+5408, U+540d, U+591a, U+5b57, U+6211, U+65b9, U+660e, U+6642, U+6700, U+6b63, U+6e2f, U+7063, U+7532, U+793e, U+81ea, U+8272, U+82b1, U+897f, U+8eca, U+91ce, U+ac38, U+ad76, U+ae84, U+aecc, U+b07d, U+b0b1, U+b215, U+b2a0, U+b310, U+b3d7, U+b52a, U+b618, U+b775, U+b797, U+bcd5, U+bd59, U+be80, U+bea8, U+bed1, U+bee4-bee5, U+c060, U+c2ef, U+c329, U+c3dc, U+c597, U+c5bd, U+c5e5, U+c69c, U+c9d6, U+ca29, U+ca5c, U+ca84, U+cc39, U+cc3b, U+ce89, U+cee5, U+cf65, U+cf85, U+d058, U+d145, U+d22d, U+d325, U+d37d, U+d3ad, U+d769, U+ff0c;
}

/* [76] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.76.woff2) format('woff2-variations');
	unicode-range: U+2161, U+2228, U+2299, U+2464, U+2517, U+2640, U+3042, U+304a, U+3053, U+3061, U+307f, U+3082, U+308c, U+3092, U+30a8, U+30ab, U+30ad, U+30b0, U+30b3, U+30b7, U+30c1, U+30c6, U+30c9, U+30d5, U+30d7, U+30de, U+30e0-30e1, U+30ec-30ed, U+4e0b, U+4e0d, U+4ee3, U+53f0, U+548c, U+5b89, U+5bb6, U+5c0f, U+611b, U+6771, U+6aa2, U+6bcd, U+6c34, U+6cd5, U+6d77, U+767d, U+795e, U+8ecd, U+9999, U+9ad8, U+ac07, U+ac1a, U+ac40, U+ad0c, U+ad88, U+ada4, U+ae01, U+ae65, U+aebd, U+aec4, U+afe8, U+b139, U+b205, U+b383, U+b38c, U+b42c, U+b461, U+b55c, U+b78f, U+b8fb, U+b9f7, U+bafc, U+bc99, U+bed8, U+bfcd, U+c0bf, U+c0f9, U+c167, U+c204, U+c20f, U+c22f, U+c258, U+c298, U+c2bc, U+c388, U+c501, U+c50c, U+c5b9, U+c5ce, U+c641, U+c648, U+c73d, U+ca50, U+ca61, U+cc4c, U+ceac, U+d0d4, U+d5f7, U+d6d7, U+ff1a;
}

/* [77] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.77.woff2) format('woff2-variations');
	unicode-range: U+2103, U+2463, U+25c6, U+25cb, U+266c, U+3001, U+300a, U+3046, U+304c-304d, U+304f, U+3055, U+3059, U+3063, U+3066-3068, U+306f, U+3089, U+30b8, U+30bf, U+314f, U+4e0a, U+570b, U+5730, U+5916, U+5929, U+5c71, U+5e74, U+5fc3, U+601d, U+6027, U+63d0, U+6709, U+6734, U+751f, U+7684, U+82f1, U+9053, U+91d1, U+97f3, U+ac2f, U+ac4d, U+adc4, U+ade4, U+ae41, U+ae4d-ae4e, U+aed1, U+afb9, U+b0e0, U+b299, U+b365, U+b46c, U+b480, U+b4c8, U+b7b4, U+b819, U+b918, U+baab, U+bab9, U+be8f, U+bed7, U+c0ec, U+c19f, U+c1a5, U+c3d9, U+c464, U+c53d, U+c553, U+c570, U+c5cc, U+c633, U+c6a4, U+c7a3, U+c7a6, U+c886, U+c9d9-c9da, U+c9ec, U+ca0c, U+cc21, U+cd1b, U+cd78, U+cdc4, U+cef8, U+cfe4, U+d0a5, U+d0b5, U+d0ec, U+d15d, U+d188, U+d23c, U+d2ac, U+d729, U+d79b, U+ff01, U+ff08-ff09, U+ff5c;
}

/* [78] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.78.woff2) format('woff2-variations');
	unicode-range: U+2039-203a, U+223c, U+25b3, U+25b7, U+25bd, U+25cf, U+266a, U+3002, U+300b, U+304b, U+3057, U+305f, U+306a-306b, U+307e, U+308a-308b, U+3093, U+30a2, U+30af, U+30b9, U+30c3, U+30c8, U+30e9-30eb, U+33a1, U+4e00, U+524d, U+5357, U+5b50, U+7121, U+884c, U+9751, U+ac94, U+aebe, U+aecd, U+af08, U+af41, U+af49, U+b010, U+b053, U+b109, U+b11b, U+b128, U+b154, U+b291, U+b2e6, U+b301, U+b385, U+b525, U+b5b4, U+b729, U+b72f, U+b738, U+b7ff, U+b837, U+b975, U+ba67, U+bb47, U+bc1f, U+bd90, U+bfd4, U+c27c, U+c324, U+c379, U+c3e0, U+c465, U+c53b, U+c58c, U+c610, U+c653, U+c6cd, U+c813, U+c82f, U+c999, U+c9e0, U+cac4, U+cad3, U+cbd4, U+cc10, U+cc22, U+ccb8, U+ccbc, U+cda5, U+ce84, U+cea3, U+cf67, U+cfe1, U+d241, U+d30d, U+d31c, U+d391, U+d401, U+d479, U+d5c9, U+d5db, U+d649, U+d6d4;
}

/* [79] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.79.woff2) format('woff2-variations');
	unicode-range: U+b0, U+e9, U+2193, U+2462, U+260e, U+261e, U+300e-300f, U+3044, U+30a4, U+30fb-30fc, U+314d, U+5973, U+6545, U+6708, U+7537, U+ac89, U+ac9c, U+acc1, U+ad04, U+ad75, U+ad7d, U+ae45, U+ae61, U+af42, U+b0ab, U+b0af, U+b0b3, U+b12c, U+b194, U+b1a8, U+b220, U+b258, U+b284, U+b2ff, U+b315, U+b371, U+b3d4-b3d5, U+b460, U+b527, U+b534, U+b810, U+b818, U+b98e, U+ba55, U+bbac, U+bc0b, U+bc40, U+bca1, U+bccd, U+bd93, U+be54, U+be5a, U+bf08, U+bf50, U+bf55, U+bfdc, U+c0c0, U+c0d0, U+c0f4, U+c100, U+c11e, U+c170, U+c20d, U+c274, U+c290, U+c308, U+c369, U+c539, U+c587, U+c5ff, U+c6ec, U+c70c, U+c7ad, U+c7c8, U+c83c, U+c881, U+cb48, U+cc60, U+ce69, U+ce6b, U+ce75, U+cf04, U+cf08, U+cf55, U+cf70, U+cffc, U+d0b7, U+d1a8, U+d2c8, U+d384, U+d47c, U+d48b, U+d5dd, U+d5e8, U+d720, U+d759, U+f981;
}

/* [80] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.80.woff2) format('woff2-variations');
	unicode-range: U+e0, U+e2, U+395, U+3b7, U+3ba, U+2460-2461, U+25a0, U+3010-3011, U+306e, U+30f3, U+314a, U+314c, U+5927, U+65b0, U+7e41, U+97d3, U+9ad4, U+ad49, U+ae0b, U+ae0d, U+ae43, U+ae5d, U+aecf, U+af3c, U+af64, U+afd4, U+b080, U+b084, U+b0c5, U+b10c, U+b1e8, U+b2ac, U+b36e, U+b451, U+b515, U+b540, U+b561, U+b6ab, U+b6b1, U+b72c, U+b730, U+b744, U+b800, U+b8ec, U+b8f0, U+b904, U+b968, U+b96d, U+b987, U+b9d9, U+bb36, U+bb49, U+bc2d, U+bc43, U+bcf6, U+bd89, U+be57, U+be61, U+bed4, U+c090, U+c130, U+c148, U+c19c, U+c2f9, U+c36c, U+c37c, U+c384, U+c3df, U+c575, U+c584, U+c660, U+c719, U+c816, U+ca4d, U+ca54, U+cabc, U+cb49, U+cc14, U+cff5, U+d004, U+d038, U+d0b4, U+d0d3, U+d0e0, U+d0ed, U+d131, U+d1b0, U+d31f, U+d33d, U+d3a0, U+d3ab, U+d514, U+d584, U+d6a1, U+d6cc, U+d749, U+d760, U+d799;
}

/* [81] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.81.woff2) format('woff2-variations');
	unicode-range: U+24, U+60, U+3b9, U+3bb, U+3bd, U+2191, U+2606, U+300c-300d, U+3131, U+3134, U+3139, U+3141-3142, U+3148, U+3161, U+3163, U+321c, U+4eba, U+5317, U+ac31, U+ac77, U+ac9f, U+acb9, U+acf0-acf1, U+acfd, U+ad73, U+af3d, U+b00c, U+b04a, U+b057, U+b0c4, U+b188, U+b1cc, U+b214, U+b2db, U+b2ee, U+b304, U+b4ed, U+b518, U+b5bc, U+b625, U+b69c-b69d, U+b7ac, U+b801, U+b86c, U+b959, U+b95c, U+b985, U+ba48, U+bb58, U+bc0c, U+bc38, U+bc85, U+bc9a, U+bf40, U+c068, U+c0bd, U+c0cc, U+c12f, U+c149, U+c1e0, U+c22b, U+c22d, U+c250, U+c2fc, U+c300, U+c313, U+c370, U+c3d8, U+c557, U+c580, U+c5e3, U+c62e, U+c634, U+c6f0, U+c74d, U+c783, U+c78e, U+c796, U+c7bc, U+c92c, U+ca4c, U+cc1c, U+cc54, U+cc59, U+ce04, U+cf30, U+cfc4, U+d140, U+d321, U+d38c, U+d399, U+d54f, U+d587, U+d5d0, U+d6e8, U+d770;
}

/* [82] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.82.woff2) format('woff2-variations');
	unicode-range: U+d7, U+ea, U+fc, U+2192, U+25bc, U+3000, U+3137, U+3145, U+315c, U+7f8e, U+ac13, U+ac71, U+ac90, U+acb8, U+ace7, U+ad7f, U+ae50, U+aef4, U+af34, U+afbc, U+b048, U+b09a, U+b0ad, U+b0bc, U+b113, U+b125, U+b141, U+b20c, U+b2d9, U+b2ed, U+b367, U+b369, U+b374, U+b3cb, U+b4ec, U+b611, U+b760, U+b81b, U+b834, U+b8b0, U+b8e1, U+b989, U+b9d1, U+b9e1, U+b9fa, U+ba4d, U+ba78, U+bb35, U+bb54, U+bbf9, U+bc11, U+bcb3, U+bd05, U+bd95, U+bdd4, U+be10, U+bed0, U+bf51, U+c0d8, U+c232, U+c2b7, U+c2eb, U+c378, U+c500, U+c52c, U+c549, U+c568, U+c598, U+c5c9, U+c61b, U+c639, U+c67c, U+c717, U+c78a, U+c80a, U+c90c-c90d, U+c950, U+c9e7, U+cbe4, U+cca9, U+cce4, U+cdb0, U+ce78, U+ce94, U+ce98, U+cf8c, U+d018, U+d034, U+d0f1, U+d1b1, U+d280, U+d2f8, U+d338, U+d380, U+d3b4, U+d610, U+d69f, U+d6fc, U+d758;
}

/* [83] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.83.woff2) format('woff2-variations');
	unicode-range: U+e7, U+2022, U+203b, U+25c0, U+2605, U+2661, U+3147, U+318d, U+672c, U+8a9e, U+acaa, U+acbc, U+ad1c, U+ae4a, U+ae5c, U+b044, U+b054, U+b0c8-b0c9, U+b2a6, U+b2d0, U+b35c, U+b364, U+b428, U+b454, U+b465, U+b4b7, U+b4e3, U+b51c, U+b5a1, U+b784, U+b790, U+b7ab, U+b7f4, U+b82c, U+b835, U+b8e9, U+b8f8, U+b9d8, U+b9f9, U+ba5c, U+ba64, U+babd, U+bb18, U+bb3b, U+bbff, U+bc0d, U+bc45, U+bc97, U+bcbc, U+be45, U+be75, U+be7c, U+bfcc, U+c0b6, U+c0f7, U+c14b, U+c2b4, U+c30d, U+c4f8, U+c5bb, U+c5d1, U+c5e0, U+c5ee, U+c5fd, U+c606, U+c6c5, U+c6e0, U+c708, U+c81d, U+c820, U+c824, U+c878, U+c918, U+c96c, U+c9e4, U+c9f1, U+cc2e, U+cd09, U+cea1, U+cef5, U+cef7, U+cf64, U+cf69, U+cfe8, U+d035, U+d0ac, U+d230, U+d234, U+d2f4, U+d31d, U+d575, U+d578, U+d608, U+d614, U+d718, U+d751, U+d761, U+d78c, U+d790;
}

/* [84] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.84.woff2) format('woff2-variations');
	unicode-range: U+2665, U+3160, U+4e2d, U+6587, U+65e5, U+ac12, U+ac14, U+ac16, U+ac81, U+ad34, U+ade0, U+ae54, U+aebc, U+af2c, U+afc0, U+afc8, U+b04c, U+b08c, U+b099, U+b0a9, U+b0ac, U+b0ae, U+b0b8, U+b123, U+b179, U+b2e5, U+b2f7, U+b4c0, U+b531, U+b538, U+b545, U+b550, U+b5a8, U+b6f0, U+b728, U+b73b, U+b7ad, U+b7ed, U+b809, U+b864, U+b86d, U+b871, U+b9bf, U+b9f5, U+ba40, U+ba4b, U+ba58, U+ba87, U+baac, U+bbc0, U+bc16, U+bc34, U+bd07, U+bd99, U+be59, U+bfd0, U+c058, U+c0e4, U+c0f5, U+c12d, U+c139, U+c228, U+c529, U+c5c7, U+c635, U+c637, U+c735, U+c77d, U+c787, U+c789, U+c8c4, U+c989, U+c98c, U+c9d0, U+c9d3, U+cc0c, U+cc99, U+cd0c, U+cd2c, U+cd98, U+cda4, U+ce59, U+ce60, U+ce6d, U+cea0, U+d0d0-d0d1, U+d0d5, U+d14d, U+d1a4, U+d29c, U+d2f1, U+d301, U+d39c, U+d3bc, U+d4e8, U+d540, U+d5ec, U+d640, U+d750;
}

/* [85] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.85.woff2) format('woff2-variations');
	unicode-range: U+5e, U+25b2, U+25b6, U+314e, U+ac24, U+ace1, U+ace4, U+ae68, U+af2d, U+b0d0, U+b0e5, U+b150, U+b155, U+b193, U+b2c9, U+b2dd, U+b3c8, U+b3fc, U+b410, U+b458, U+b4dd, U+b5a0, U+b5a4, U+b5bb, U+b7b5, U+b838, U+b840, U+b86f, U+b8f9, U+b960, U+b9e5, U+bab8, U+bb50, U+bc1d, U+bc24-bc25, U+bca8, U+bcbd, U+bd04, U+bd10, U+bd24, U+be48, U+be5b, U+be68, U+c05c, U+c12c, U+c140, U+c15c, U+c168, U+c194, U+c219, U+c27d, U+c2a8, U+c2f1, U+c2f8, U+c368, U+c554-c555, U+c559, U+c564, U+c5d8, U+c5fc, U+c625, U+c65c, U+c6b1, U+c728, U+c794, U+c84c, U+c88c, U+c8e0, U+c8fd, U+c998, U+c9dd, U+cc0d, U+cc30, U+ceec, U+cf13, U+cf1c, U+cf5c, U+d050, U+d07c, U+d0a8, U+d134, U+d138, U+d154, U+d1f4, U+d2bc, U+d329, U+d32c, U+d3d0, U+d3f4, U+d3fc, U+d56b, U+d5cc, U+d600-d601, U+d639, U+d6c8, U+d754, U+d765;
}

/* [86] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.86.woff2) format('woff2-variations');
	unicode-range: U+3c-3d, U+2026, U+24d2, U+314b, U+ac11, U+acf3, U+ad74, U+ad81, U+adf9, U+ae34, U+af43, U+afb8, U+b05d, U+b07c, U+b110, U+b118, U+b17c, U+b180, U+b18d, U+b192, U+b2cc, U+b355, U+b378, U+b4a4, U+b4ef, U+b78d, U+b799, U+b7a9, U+b7fd, U+b807, U+b80c, U+b839, U+b9b4, U+b9db, U+ba3c, U+bab0, U+bba4, U+bc94, U+be4c, U+c154, U+c1c4, U+c26c, U+c2ac, U+c2ed, U+c4f4, U+c55e, U+c561, U+c571, U+c5b5, U+c5c4, U+c654-c655, U+c695, U+c6e8, U+c6f9, U+c724, U+c751, U+c775, U+c7a0, U+c7c1, U+c874, U+c880, U+c9d5, U+c9f8, U+cabd, U+cc29, U+cc2c, U+cca8, U+ccab, U+ccd0, U+ce21, U+ce35, U+ce7c, U+ce90, U+cee8, U+cef4, U+cfe0, U+d070, U+d0b9, U+d0c1, U+d0c4, U+d0c8, U+d15c, U+d1a1, U+d2c0, U+d300, U+d314, U+d3ed, U+d478, U+d480, U+d48d, U+d508, U+d53d, U+d5e4, U+d611, U+d61c, U+d68d, U+d6a8, U+d798;
}

/* [87] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.87.woff2) format('woff2-variations');
	unicode-range: U+23, U+25, U+5f, U+a9, U+ac08, U+ac78, U+aca8, U+acac, U+ace8, U+ad70, U+adc0, U+addc, U+b137, U+b140, U+b208, U+b290, U+b2f5, U+b3c5, U+b3cc, U+b420, U+b429, U+b529, U+b530, U+b77d, U+b79c, U+b7a8, U+b7c9, U+b7f0, U+b7fc, U+b828, U+b860, U+b9ad, U+b9c1, U+b9c9, U+b9dd-b9de, U+b9e8, U+ba38-ba39, U+babb, U+bc00, U+bc8c, U+bca0, U+bca4, U+bcd1, U+bcfc, U+bd09, U+bdf0, U+be60, U+c0ad, U+c0b4, U+c0bc, U+c190, U+c1fc, U+c220, U+c288, U+c2b9, U+c2f6, U+c528, U+c545, U+c558, U+c5bc, U+c5d4, U+c600, U+c644, U+c6c0, U+c6c3, U+c721, U+c798, U+c7a1, U+c811, U+c838, U+c871, U+c904, U+c990, U+c9dc, U+cc38, U+cc44, U+cca0, U+cd1d, U+cd95, U+cda9, U+ce5c, U+cf00, U+cf58, U+d150, U+d22c, U+d305, U+d328, U+d37c, U+d3f0, U+d551, U+d5a5, U+d5c8, U+d5d8, U+d63c, U+d64d, U+d669, U+d734, U+d76c;
}

/* [88] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.88.woff2) format('woff2-variations');
	unicode-range: U+26, U+2b, U+3e, U+40, U+7e, U+ac01, U+ac19, U+ac1d, U+aca0, U+aca9, U+acb0, U+ad8c, U+ae09, U+ae38, U+ae40, U+aed8, U+b09c, U+b0a0, U+b108, U+b204, U+b298, U+b2d8, U+b2eb-b2ec, U+b2f4, U+b313, U+b358, U+b450, U+b4e0, U+b54c, U+b610, U+b780, U+b78c, U+b791, U+b8e8, U+b958, U+b974, U+b984, U+b9b0, U+b9bc-b9bd, U+b9ce, U+ba70, U+bbfc, U+bc0f, U+bc15, U+bc1b, U+bc31, U+bc95, U+bcc0, U+bcc4, U+bd81, U+bd88, U+c0c8, U+c11d, U+c13c, U+c158, U+c18d, U+c1a1, U+c21c, U+c4f0, U+c54a, U+c560, U+c5b8, U+c5c8, U+c5f4, U+c628, U+c62c, U+c678, U+c6cc, U+c808, U+c810, U+c885, U+c88b, U+c900, U+c988, U+c99d, U+c9c8, U+cc3d-cc3e, U+cc45, U+cd08, U+ce20, U+cee4, U+d074, U+d0a4, U+d0dd, U+d2b9, U+d3b8, U+d3c9, U+d488, U+d544, U+d559, U+d56d, U+d588, U+d615, U+d648, U+d655, U+d658, U+d65c;
}

/* [89] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.89.woff2) format('woff2-variations');
	unicode-range: U+d, U+7c, U+ac10, U+ac15, U+ac74, U+ac80, U+ac83, U+acc4, U+ad11, U+ad50, U+ad6d, U+adfc, U+ae00, U+ae08, U+ae4c, U+b0a8, U+b124, U+b144, U+b178, U+b274, U+b2a5, U+b2e8, U+b2f9, U+b354, U+b370, U+b418, U+b41c, U+b4f1, U+b514, U+b798, U+b808, U+b824-b825, U+b8cc, U+b978, U+b9d0, U+b9e4, U+baa9, U+bb3c, U+bc18, U+bc1c, U+bc30, U+bc84, U+bcf5, U+bcf8, U+bd84, U+be0c, U+be14, U+c0b0, U+c0c9, U+c0dd, U+c124, U+c2dd, U+c2e4, U+c2ec, U+c54c, U+c57c-c57d, U+c591, U+c5c5-c5c6, U+c5ed, U+c608, U+c640, U+c6b8, U+c6d4, U+c784, U+c7ac, U+c800-c801, U+c9c1, U+c9d1, U+cc28, U+cc98, U+cc9c, U+ccad, U+cd5c, U+cd94, U+cd9c, U+cde8, U+ce68, U+cf54, U+d0dc, U+d14c, U+d1a0, U+d1b5, U+d2f0, U+d30c, U+d310, U+d398, U+d45c, U+d50c, U+d53c, U+d560, U+d568, U+d589, U+d604, U+d6c4, U+d788;
}

/* [90] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.90.woff2) format('woff2-variations');
	unicode-range: U+ac04, U+ac1c, U+ac70, U+ac8c, U+acbd, U+acf5, U+acfc, U+ad00, U+ad6c, U+adf8, U+b098, U+b0b4, U+b294, U+b2c8, U+b300, U+b3c4, U+b3d9, U+b4dc, U+b4e4, U+b77c, U+b7ec, U+b85d, U+b97c, U+b9c8, U+b9cc, U+ba54, U+ba74, U+ba85, U+baa8, U+bb34, U+bb38, U+bbf8, U+bc14, U+bc29, U+bc88, U+bcf4, U+bd80, U+be44, U+c0c1, U+c11c, U+c120, U+c131, U+c138, U+c18c, U+c218, U+c2b5, U+c2e0, U+c544, U+c548, U+c5b4, U+c5d0, U+c5ec, U+c5f0, U+c601, U+c624, U+c694, U+c6a9, U+c6b0, U+c6b4, U+c6d0, U+c704, U+c720, U+c73c, U+c740, U+c744, U+c74c, U+c758, U+c77c, U+c785, U+c788, U+c790-c791, U+c7a5, U+c804, U+c815, U+c81c, U+c870, U+c8fc, U+c911, U+c9c4, U+ccb4, U+ce58, U+ce74, U+d06c, U+d0c0, U+d130, U+d2b8, U+d3ec, U+d504, U+d55c, U+d569, U+d574, U+d638, U+d654, U+d68c;
}

/* [91] */
@font-face {
	font-family: 'Pretendard Variable';
	font-style: normal;
	font-display: optional;
	font-weight: 45 920;
	src: url(../vendor/pretendard/v1.3.9/woff2-dynamic-subset/PretendardVariable.subset.91.woff2) format('woff2-variations');
	unicode-range: U+20-22, U+27-2a, U+2c-39, U+3a-3b, U+3f, U+41-4e, U+4f-5d, U+61-7b, U+7d, U+a0-a1, U+ab, U+ad-ae, U+b7, U+bb, U+bf, U+2013-2014, U+201c-201d, U+2122, U+ac00, U+ace0, U+ae30, U+b2e4, U+b85c, U+b9ac, U+c0ac, U+c2a4, U+c2dc, U+c774, U+c778, U+c9c0, U+d558;
}

:root {
    --prime-color-ink: #222222;
    --prime-color-charcoal: #3d3d3d;
    --prime-color-muted: #686b72;
    --prime-color-accent: #d72d3b;
    --prime-color-accent-bright: #eb3b4b;
    --prime-color-mint: #35d0ba;
    --prime-color-surface: #f5f5f5;
    --prime-color-border: #dedfe2;
    --prime-color-footer: #21242d;
    --prime-content-width: 760px;
    /* 본문과 상단 메뉴의 가로폭은 같다(기존 사이트의 .w_custom 과 동일한 1420px). */
    --prime-wide-width: 1420px;
    --prime-header-width: 1420px;
    /* 화면이 좁아졌을 때 좌우로 두는 여백. 상단 메뉴가 쓰는 값과 같게 맞춘다. */
    --prime-gutter: 1rem;
    --prime-radius: 0.625rem;
    --prime-shadow: 0 1rem 3rem rgb(20 23 31 / 10%);

    /* ───── 글꼴 두 갈래 (2026-08-18 고객 승인) ─────
       브랜드가 드러나는 자리(제목·버튼)만 Pretendard 를 쓰고, 본문은 기기 글꼴을 쓴다.
       왜 나눴나 — 실측에서 전체 Pretendard 75점 / 제목만 86점 / 웹폰트 없음 98점이었다.
       한글은 쓰는 글자가 많을수록 받는 조각이 늘어나서, 본문이 조각 수를 키우는 주범이다
       (15조각 394KB → 9조각 240KB). 자세한 표는 CLAUDE.md 의 「글꼴이 23점을 먹고 있다」.
       ⚠️ 본문에 Pretendard 를 다시 쓰려면 그 점수를 다시 내주는 것이라 고객 확인이 필요하다. */
    --prime-font-brand: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --prime-font-body: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", "맑은 고딕", system-ui, Roboto, sans-serif;
}

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

/* ⛔ 여기에 `scroll-behavior: smooth` 를 두지 말 것 (2026-08-21 고객 지적으로 걷어냈다).
   CSS 의 이 설정은 **누가 왜 스크롤하는지를 구분하지 못한다.** 그래서 글을 보고
   뒤로가기로 목록에 돌아올 때 브라우저가 원래 위치를 복원하는 것까지 애니메이션이 되어,
   화면이 주르륵 흘러 내려간 뒤에야 제자리에 섰다(PC·모바일 공통 증상).

   지금은 **사람이 같은 페이지 안 링크를 누른 순간에만** navigation.js 가 잠깐 켰다 끈다.
   뒤로가기 복원 때는 꺼져 있으므로 즉시 제자리로 돌아온다. */

body {
    margin: 0;
    color: var(--prime-color-ink);
    background: #ffffff;
    font-family: var(--prime-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    overflow-wrap: break-word;
}

/* 브랜드 글꼴을 쓰는 자리. 여기를 늘리면 받는 글꼴 조각도 함께 늘어난다 —
   글자 수가 아니라 **쓰이는 글자의 가짓수**가 비용이다. */
h1,
h2,
h3,
h4,
h5,
h6,
.button,
.prime-hero__eyebrow,
.prime-main-performance__peaks span,
.prime-gauge span {
    font-family: var(--prime-font-brand);
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: inherit;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.layout-wide,
.layout-content {
    width: min(100% - var(--prime-gutter) * 2, var(--prime-wide-width));
    margin-inline: auto;
}

.layout-header {
    width: min(100%, var(--prime-header-width));
    margin-inline: auto;
}

.layout-content {
    max-width: var(--prime-content-width);
}

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

.screen-reader-text:focus {
    position: fixed;
    z-index: 100000;
    top: 0.75rem;
    left: 0.75rem;
    width: auto;
    height: auto;
    padding: 0.75rem 1rem;
    clip: auto;
    color: #ffffff;
    background: var(--prime-color-ink);
}

.site-header {
    position: sticky;
    z-index: 1000;
    top: 0;
    width: 100%;
    background: #ffffff;
}

body.admin-bar .site-header {
    top: 32px;
}

.site-header__brand-row {
    position: relative;
    display: flex;
    min-height: 4.25rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* 전화·견적문의는 **모든 화면에서 보인다**(고객 요청 2026-08-22 3차 ①).
   좁은 화면에서는 알약을 접어 아이콘 두 개로 줄이고, 메뉴 버튼 왼쪽에 붙는다. */
.site-header__actions {
    display: flex;
}

.site-branding {
    /* 로고는 왼쪽, 전화·연필·메뉴 버튼은 오른쪽에 붙는다.
       margin 으로 밀어 두면 오른쪽 묶음이 몇 개든 배치가 흔들리지 않는다. */
    min-width: 0;
    margin-right: auto;
}

/* ───── 머리말 오른쪽: 전화 알약 + 견적 문의 (고객 요청 2026-08-22) ─────
   designart.co.kr 의 `.link_tel`·`.contact_us` 를 이 테마의 규칙으로 옮긴 것이다.
   아이콘 두 개 모두 강조색 #d72d3b 이고, 그림 파일이 아니라 HTML 안의 SVG 라
   **새로 받는 파일이 0개**다. */
.site-header__actions {
    align-items: center;
    gap: 0.75rem;
}

.site-header__tel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 10.625rem;
    padding: 0.5rem 1rem;
    /* 2026-08-22 고객 요청으로 **빨간 알약이 기본**이 됐다(예전에는 마우스를 올려야
       빨개졌다). 전화번호가 눈에 띄어야 한다는 판단이라 홍보용 강조로 쓴다.
       ⚠️ 좁은 화면에서는 알약을 걷고 아이콘만 남긴다(아래 max-width 블록). */
    border: 1px solid var(--prime-color-accent);
    border-radius: 6.25rem;
    color: #ffffff;
    background: var(--prime-color-accent);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    /* 연필과 같은 움직임을 준다(고객 요청 2026-08-22). 두 아이콘이 나란히 있으므로
       하나만 반응하면 고장난 것처럼 보인다. */
    transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
    white-space: nowrap;
}

.site-header__tel svg {
    /* 마크업의 16px 은 알약 안에서 너무 작아 보였다(고객 지적 2026-08-22).
       글자(17px)보다 조금 크게 잡아 아이콘이 먼저 눈에 들어오게 한다. */
    width: 1.375rem;
    height: 1.375rem;
    flex: none;
    color: #ffffff;
    transition: color 0.2s;
}

/* 기본이 이미 빨강이므로 마우스를 올리면 **한 단계 밝은 빨강**으로 반응한다.
   반응이 아예 없으면 누를 수 있는 곳인지 알기 어렵다. */
.site-header__tel:hover {
    border-color: var(--prime-color-accent-bright);
    background: var(--prime-color-accent-bright);
    transform: translateY(-0.125rem);
}

/* 연필 아이콘 하나. 글자는 지우지 않고 눈에서만 감춘다(마크업의 .screen-reader-text) —
   화면낭독기는 그대로 「견적 문의」로 읽는다. */
.site-header__quote {
    display: inline-grid;
    /* 전화 알약과 같은 높이(실측 47px)로 맞춘다(고객 요청 2026-08-22). */
    width: 2.9375rem;
    height: 2.9375rem;
    color: var(--prime-color-accent);
    place-items: center;
    text-decoration: none;
    transition: transform 0.2s, color 0.2s;
}

/* 아이콘 그림. 고객이 준 pen.png 를 무손실 WebP(1,082 B)로 바꿔 **마스크**로 쓴다.
   ⭐ 마스크라서 색은 `currentcolor` 가 정한다 — 마우스오버 때 밝은 빨강으로 바뀌는
      동작이 그림 파일을 바꾸지 않고도 그대로 유지된다.
   ⚠️ 원본이 67x67 라 47px 로 그리면 1.4배쯤 된다. 더 크게 쓸 일이 생기면
      더 큰 원본을 받아야 한다(늘리면 가장자리가 뭉개진다).
   📌 2026-08-24 고객 요청(3차 PC-1): 「전화 알약 높이에 딱 맞게」 →
      그림을 상자와 같은 47px 로 키웠다(42px 때는 안쪽에 여백이 남아 작아 보였다).
      같은 날 받은 새 pen.png 는 캔버스를 100% 채워(옛 파일은 97%) 이 크기에서 꽉 찬다. */
.site-header__quote::before {
    width: 2.9375rem;
    height: 2.9375rem;
    background: currentcolor;
    -webkit-mask: url("../images/header-quote.webp") no-repeat center / contain;
    mask: url("../images/header-quote.webp") no-repeat center / contain;
    content: "";
}

.site-header__quote:hover {
    color: var(--prime-color-accent-bright);
    transform: translateY(-0.125rem);
}

/* ── 좁은 화면: 알약을 걷고 아이콘 두 개로 (고객 요청 2026-08-22 3차 ①) ──
   ⚠️ 메뉴 버튼(검은 동그라미)의 모습은 그대로 둔다 — 고객이 「바꿀 필요 없다」고 했다.
   전화번호 글자는 지우지 않고 눈에서만 감춘다. 화면낭독기는 그대로 번호를 읽는다. */
@media (max-width: 47.9375rem) {
    /* 전화·연필·메뉴 세 개를 **여백 없이 붙여** 한 덩어리로 보이게 한다
       (고객 요청 2026-08-22: 「우측으로 딱 붙여서 컴팩트하게」).
       아이콘마다 안쪽 여백이 있어 붙여 놔도 글자끼리 닿지 않는다. */
    .site-header__actions {
        gap: 0;
    }

    /* 셋 다 같은 크기(2.75rem = 44px). 누를 수 있는 크기 기준(24px)을 넉넉히 넘긴다.
       ⛔ 넓은 화면의 **빨간 알약**(바탕·흰 글자·흰 아이콘)을 여기서 전부 되돌려야 한다.
          바탕만 지우면 흰 아이콘이 흰 바탕에 남아 사라진다(2026-08-22 에 실제로 겪었다). */
    .site-header__tel {
        width: 2.75rem;
        min-width: 0;
        height: 2.75rem;
        padding: 0;
        border: 0;
        color: var(--prime-color-accent);
        background: none;
    }

    .site-header__tel svg {
        color: currentcolor;
    }

    .site-header__tel span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    /* 📌 2026-08-24 고객 요청(3차 M-2): 「전화기 아이콘을 아래로 살짝 내려 주세요」.
       ⚠️ 상자 기준으로는 이미 맞아 있었다(실측 세로중심 전화기 33.0 / 글쓰기 33.5 /
          메뉴 33.5 — 차이 0.5px). 어긋나 보이는 것은 **글리프 크기 차이에서 오는 착시**다:
          전화기가 17px 로 가장 작아 아래쪽이 글쓰기(22px)보다 3px 짧게 끝난다.
          그래서 상자를 옮기지 않고 그림만 2px 내려 눈에 맞춘다. */
    .site-header__tel svg {
        width: 1.5rem;
        height: 1.5rem;
        transform: translateY(0.125rem);
    }

    /* 알약이 없으므로 눌렀을 때 빨간 바탕이 생기면 오히려 어색하다.
       ⛔ **svg 색까지 같이 되돌려야 한다.** 위 `.site-header__tel:hover svg { color: #fff }`
          는 알약(빨간 바탕)을 전제로 한 값이라, 바탕만 없애고 두면 **흰 아이콘이
          흰 바탕에 남아 사라진다**(2026-08-22 고객이 발견). */
    .site-header__tel:hover,
    .site-header__tel:hover svg {
        color: var(--prime-color-accent);
    }

    .site-header__tel:hover {
        background: none;
    }

    .site-header__quote {
        width: 2.75rem;
        height: 2.75rem;
    }

    .site-header__quote::before {
        width: 1.5rem;
        height: 1.5rem;
    }

    .site-header__brand-row {
        gap: 0;
    }
}

.site-logo-link,
.custom-logo-link {
    display: block;
}

.site-logo-link img,
.custom-logo {
    width: min(17rem, 70vw);
    height: auto;
}

/* 좁은 화면에서는 전화·연필·메뉴 버튼이 들어갈 자리를 로고에서 낸다
   (고객 요청 2026-08-22: 「로고를 줄여서라도」 · 아이콘 묶음은 오른쪽에 붙어야 한다).

   ⛔ **이 규칙은 반드시 위 기본 규칙 뒤에 둔다.** 미디어쿼리는 특이도를 올려 주지 않아,
      앞에 두면 같은 특이도의 기본값이 이겨 **조용히 무시된다**(2026-08-22 실제로 그랬다.
      로고가 남는 자리를 다 먹어 390px 에서 208px 이 됐고 아이콘 옆 여백이 없었다).

   360px 기준 = 여백 32 + 로고 187 + 아이콘 44·44 + 버튼 44 (사이 여백 0) = 351 < 360
   ⚠️ 이보다 키우면 좁은 기기에서 줄이 넘친다. 바꿀 때 360px 에서 다시 잰다. */
@media (max-width: 47.9375rem) {
    .site-logo-link img,
    .custom-logo {
        width: min(13.5rem, 54vw);
    }
}

.menu-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    /* 2026-08-22 고객 승인으로 **검은 동그라미를 걷어냈다.** 동그라미는 44px 을 쓰면서
       실제로 보이는 것은 선 세 개뿐이라 오른쪽 묶음이 헐거워 보였다.
       누를 수 있는 넓이(44px)는 그대로 두고 바탕만 없앤다 — 접근성 기준은 유지된다. */
    color: var(--prime-color-ink);
    background: transparent;
    cursor: pointer;
}

.menu-toggle:focus-visible,
.all-menu-toggle:focus-visible,
.all-menu-dialog__close:focus-visible,
.all-menu-dialog a:focus-visible,
.primary-navigation a:focus-visible,
.site-header__tel:focus-visible,
.site-header__quote:focus-visible,
.button:focus-visible {
    /* 키보드 초점 테두리는 **브랜드 강조색**을 쓴다(고객 지적 2026-08-22 — 민트색이
       테마와 겉돌았다). 테두리는 요소에서 3px 떨어져 흰 바탕 위에 그려지므로,
       빨간 버튼 둘레에 그려져도 흰 바탕과의 대비(4.6:1)로 또렷하게 보인다.
       ⚠️ `--prime-color-mint` 는 원형 그래프에서 계속 쓰이므로 변수는 그대로 둔다. */
    outline: 3px solid var(--prime-color-accent);
    outline-offset: 3px;
}

.menu-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
    display: block;
    width: 1.5rem;
    height: 2px;
    background: currentColor;
    content: "";
}

.menu-toggle__icon {
    position: relative;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
    position: absolute;
    left: 0;
}

.menu-toggle__icon::before {
    top: -0.4375rem;
}

.menu-toggle__icon::after {
    top: 0.4375rem;
}

.site-header__navigation-row {
    display: none;
    border-top: 1px solid var(--prime-color-border);
    background: #ffffff;
}

.site-header__navigation-inner {
    min-height: 4.375rem;
}

.primary-navigation {
    display: none;
}

.primary-navigation ul,
.site-footer ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.primary-navigation a {
    display: block;
    font-weight: 500;
    text-decoration: none;
}

.all-menu-toggle {
    position: relative;
    display: none;
    width: 4.5rem;
    height: 4.375rem;
    padding: 0;
    border: 0;
    color: #f5f5f5;
    background: var(--prime-color-charcoal);
    cursor: pointer;
}

.all-menu-toggle > span:not(.screen-reader-text) {
    position: absolute;
    left: 50%;
    width: 1.875rem;
    height: 2px;
    background: currentColor;
    transform: translateX(-50%);
}

.all-menu-toggle > span:nth-of-type(2) {
    top: 1.6875rem;
}

.all-menu-toggle > span:nth-of-type(3) {
    top: 2.15625rem;
}

.all-menu-toggle > span:nth-of-type(4) {
    top: 2.625rem;
}

body.all-menu-open {
    overflow: hidden;
}

.all-menu-layer[hidden] {
    display: none;
}

/* 서랍이 왼쪽에서 밀려 들어온다(기존 사이트와 같은 등장). 열림 상태를 JS 가 hidden 으로만
   관리하므로 클래스 없이 등장 애니메이션 하나로 처리한다. */
@keyframes prime-drawer-in {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: none;
    }
}

.all-menu-layer {
    position: fixed;
    z-index: 2100;
    inset: 0;
    display: grid;
    padding: 1.5rem;
    place-items: center;
}

.all-menu-layer__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 70%);
}

.all-menu-dialog {
    position: relative;
    z-index: 1;
    width: min(75rem, 100%);
    height: min(37.5rem, calc(100dvh - 3rem));
    padding: 1.875rem 2.5rem 2.5rem;
    overflow: hidden;
    border-radius: 0.625rem;
    background: #ffffff;
    box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 30%);
}

.all-menu-dialog__header {
    display: flex;
    min-height: 2.25rem;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.25rem;
}

.all-menu-dialog__header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.all-menu-dialog__close {
    position: relative;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* ✕ 두 줄. 색을 글자색에 맡겨 둔다 — 짙은 머리말 위에서는 흰색으로 바꿔야 하는데
   값을 박아 두면 보이지 않는다(2026-08-21 리디자인에서 실제로 안 보였다).
   기본 상속색이 #222222 이라 좁은 화면의 모습은 예전과 같다. */
.all-menu-dialog__close::before,
.all-menu-dialog__close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.875rem;
    height: 1px;
    background: currentcolor;
    content: "";
}

.all-menu-dialog__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.all-menu-dialog__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.all-menu-dialog__body {
    height: calc(100% - 3.5rem);
    padding-right: 1.25rem;
    overflow-y: auto;
    scrollbar-color: #cccccc #f5f5f5;
    scrollbar-width: thin;
}

/* ───── 전체카테고리 레이어 (2026-08-21 리디자인) ─────
   ⚠️ 아래 새 요소들은 **넓은 화면 전용**이다. 좁은 화면의 왼쪽 서랍은
      2026-08-18 에 고객 확인을 받은 모습이라 이번 작업의 대상이 아니다. */

.all-menu-dialog__brand,
.all-menu-dialog__foot {
    display: none;
}

.all-menu__list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2.5rem 1.25rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* 1단계 항목. 하위가 있으면 <summary>(펼치는 제목), 없으면 <a>(바로 이동)라
   두 가지가 섞이므로 같은 모양을 함께 준다. */
.all-menu__list > li > a,
.all-menu__list > li > details > summary {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    padding: 0.625rem;
    border-radius: 0.25rem;
    color: #333333;
    background: #f5f5f5;
    font-size: 0.9375rem;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    /* 칸이 좁아지면 「컨설팅 성공사례」가 「…성공사 / 례」처럼 낱글자로 잘린다.
       한글은 낱글자마다 줄을 바꿀 수 있어서 기본값이 그렇게 동작한다.
       띄어쓰기에서만 끊게 해 「컨설팅 / 성공사례」로 떨어지게 한다. */
    word-break: keep-all;
}

.all-menu__list > li > details > summary {
    cursor: pointer;
    list-style: none;
}

.all-menu__list > li > details > summary::-webkit-details-marker {
    display: none;
}

/* 열린 항목은 눌린 것과 같은 색으로 둔다 — 새 색을 만들지 않고 hover 값을 그대로 쓴다.
   좁은 화면에서 어느 것이 펼쳐졌는지 구분이 안 된다는 지적(2026-08-18)에 대한 조치다. */
.all-menu__list > li > a:focus-visible,
.all-menu__list > li > details > summary:focus-visible,
.all-menu__list > li > details[open] > summary,
.all-menu__list > .current-menu-item > a,
.all-menu__list > .current-menu-ancestor > a {
    color: #ffffff;
    background: var(--prime-color-accent);
}

/* ⛔ :hover 는 **마우스가 있는 기기에서만** 건다(고객 지적 2026-08-22 · 모바일 6쪽
   「FAQ 를 처음에 클릭하면 정상적으로 작동하지 않습니다」).
   손가락 화면에는 마우스오버가 없어서 브라우저가 첫 터치를 hover 로 흉내 낸다.
   그래서 첫 탭은 **색만 바뀌고 넘어가지 않고**, 두 번째 탭에서야 이동했다.
   하위메뉴가 있는 항목은 <summary> 라 첫 탭에 펼쳐지므로 표가 안 났고,
   하위가 없어 <a> 인 FAQ 에서만 「안 눌린다」로 드러났다 — PC-9 와 같은 뿌리다. */
@media (hover: hover) {
    .all-menu__list > li > a:hover,
    .all-menu__list > li > details > summary:hover {
        color: #ffffff;
        background: var(--prime-color-accent);
    }
}

/* 펼칠 수 있다는 표시. 이미지 없이 테두리 두 변으로 만든다. */
.all-menu__list > li > details > summary::after {
    width: 0.4375rem;
    height: 0.4375rem;
    margin-left: 0.5rem;
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    content: '';
    transform: translateY(-0.125rem) rotate(45deg);
    transition: transform 0.2s;
}

.all-menu__list > li > details[open] > summary::after {
    transform: translateY(0.0625rem) rotate(-135deg);
}

/* 펼쳐진 하위 목록은 살짝 들여쓰고 바탕을 깔아 어디에 속한 것인지 보이게 한다. */
.all-menu__list > li > details[open] > .sub-menu {
    padding: 1rem 0.75rem;
    border-radius: 0 0 0.25rem 0.25rem;
    background: var(--prime-color-surface);
}

/* ───── 넓은 화면: 전체카테고리 리디자인 (고객 승인 2026-08-21) ─────

   예전에는 회색 알약 7개가 6칸 격자에 안 맞아 「고객센터」가 혼자 다음 줄로 밀리고
   그 아래가 200px 가까이 비어 있었다. 칸을 7로 맞추고, 각 칸을 제목 + 하위목록을
   가진 세로 카드로 세운다.

   ⚠️ 처음 설계에는 제목 앞에 SVG 아이콘이 있었는데, 고객 요청(2026-08-22)으로
      감춘 뒤 한 번도 보인 적이 없어 2026-08-28 에 마크업까지 걷어냈다. */

/* ───── 전체메뉴 · 넓은 화면(1200px 이상) 공통 규칙 ─────

   여기 있는 것은 **드롭다운 전체메뉴가 실제로 쓰는 것만**이다.

   ⛔ 2026-08-27 이전에는 이 자리에 **가운데 팝업창(모달)** 한 벌이 통째로 있었다.
      2026-08-22 에 드롭다운으로 바꾸면서 「되돌릴 수 있게」 남겨 둔 것인데,
      되돌릴 계획이 없어진 뒤로는 **읽는 사람을 헷갈리게 하고 사고를 부르는 죽은 코드**가
      됐다(실제로 폴드폰 화면 폭에서 그 팝업이 되살아나 고객 눈에 띄었다).
      고객 확정에 따라 걷어냈다 — 7칸 격자·둥근 상자·짙은 머리말 띠·아이콘 원·
      아래 상담 띠(전화·이메일·버튼)가 여기서 사라졌다.

   ⚠️ 아래 규칙들은 **드롭다운이 덮어쓰지 않는 것들**이라 지우면 화면이 바뀐다.
      「드롭다운 블록에 없으니 필요 없겠지」로 지우지 말 것 — 기본값(미디어쿼리 밖)이
      좁은 화면 서랍에 맞춰져 있어서, 여기서 되돌려 주지 않으면 넓은 화면이 깨진다. */
@media (min-width: 75rem) {
    /* 넓은 화면에서는 하위 목록이 항상 펼쳐져 있다. 접는 표시(꺾쇠)도 필요 없고
       제목을 눌러 접을 일도 없다. */
    .all-menu__list > li > details::details-content {
        content-visibility: visible;
    }

    .all-menu__list > li > details > summary {
        cursor: default;
    }

    .all-menu__list > li > details > summary::after {
        display: none;
    }

    /* 기본값은 좁은 화면 서랍에 맞춰 `height: min(37.5rem, …)` 이다.
       넓은 화면 패널은 내용만큼 길어져야 하므로 여기서 풀어 준다.
       스크롤 막대는 감춘다 — 패널 안이 스크롤된다는 사실이 막대로 드러나면
       상자가 잘려 보인다(2026-08-21 고객 지적). */
    .all-menu-dialog {
        height: auto;
        scrollbar-width: none;
    }

    .all-menu-dialog::-webkit-scrollbar {
        display: none;
    }

    /* 본문은 스크롤을 맡지 않는다 — 스크롤은 패널 전체가 한다.
       기본값의 높이 계산·막대 자리 여백을 여기서 되돌린다. */
    .all-menu-dialog__body {
        height: auto;
        min-height: 0;
        padding-right: 0;
        overflow: visible;
    }

    /* 회색 알약(기본값)을 벗기고 글자만 남긴다. 색·모서리·전환은 드롭다운 블록이
       건드리지 않으므로 여기서 정한다. */
    .all-menu__list > li > a,
    .all-menu__list > li > details > summary {
        min-height: 0;
        border-radius: 0;
        color: var(--prime-color-ink);
        background: none;
        transition: color 0.2s, border-color 0.2s;
    }

    /* 마우스를 올렸을 때·현재 보고 있는 메뉴일 때 붉게. */
    .all-menu__list > li > a:hover,
    .all-menu__list > li > a:focus-visible,
    .all-menu__list > li > details > summary:hover,
    .all-menu__list > li > details > summary:focus-visible,
    .all-menu__list > li:hover > details > summary,
    .all-menu__list > .current-menu-item > a,
    .all-menu__list > .current-menu-ancestor > a {
        color: var(--prime-color-accent);
        background: none;
        border-bottom-color: var(--prime-color-accent);
    }
}

.all-menu__list .sub-menu {
    display: grid;
    gap: 0.625rem;
    padding: 1.125rem 0 0;
    margin: 0;
    list-style: none;
}

.all-menu__list .sub-menu a {
    color: #333333;
    font-size: 0.875rem;
    text-decoration: none;
    word-break: keep-all;
}

/* ⛔ 예전에는 마지막 줄이 `.all-menu__list .current-menu-item > a` 였다.
   그 선택자는 하위메뉴뿐 아니라 **1단계 항목까지** 잡는다. 1단계의 현재 항목은 위에서
   이미 「빨간 바탕 + 흰 글자」를 받는데, 여기가 뒤에 오면서 글자만 빨강으로 덮어써
   **빨간 바탕에 빨간 글자 = 빈 빨간 상자**가 됐다(고객 지적 2026-08-22 · 모바일 6쪽).
   원래 의도대로 하위메뉴 안으로 범위를 좁힌다. */
.all-menu__list .sub-menu a:hover,
.all-menu__list .sub-menu a:focus-visible,
.all-menu__list .sub-menu .current-menu-item > a {
    color: var(--prime-color-accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.site-main {
    min-height: 55vh;
}

.site-main.layout-content,
.site-main.layout-wide {
    padding-block: clamp(3rem, 8vw, 7rem);
}

.prime-hero {
    position: relative;
    display: grid;
    min-height: min(46.875rem, calc(100svh - 4.25rem));
    align-items: center;
    overflow: hidden;
    color: #ffffff;
    background: #16191e;
    isolation: isolate;
}

.prime-hero__media,
.prime-hero__media img,
.prime-hero__scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.prime-hero__media {
    z-index: -2;
}

.prime-hero__media img {
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.prime-hero__scrim {
    z-index: -1;
    background: linear-gradient(180deg, rgb(8 10 14 / 28%) 0%, rgb(8 10 14 / 58%) 100%);
}

.prime-hero__inner {
    padding-block: clamp(5rem, 13vw, 9rem);
}

.prime-hero__eyebrow {
    margin: 0 0 0.75rem;
    color: rgb(255 255 255 / 80%);
    font-size: clamp(1.25rem, 5vw, 2.5rem);
    font-weight: 300;
    letter-spacing: 0.06em;
}

.prime-hero h1 {
    margin: 0;
    font-size: clamp(3rem, 12vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 1;
}

.prime-hero h1 strong {
    color: var(--prime-color-accent);
    font-weight: inherit;
}

.prime-hero__lead {
    max-width: 43rem;
    padding-top: 1.5rem;
    margin: 1.5rem 0 0;
    border-top: 1px solid rgb(255 255 255 / 75%);
    color: rgb(255 255 255 / 84%);
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    font-weight: 300;
    line-height: 1.65;
}

.prime-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2.25rem;
}

.button {
    display: inline-flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    font-weight: 700;
    text-decoration: none;
}

.button--primary {
    color: #ffffff;
    background: var(--prime-color-accent);
}

.button--outline {
    border-color: rgb(255 255 255 / 70%);
    color: #ffffff;
    background: rgb(0 0 0 / 12%);
}

.page-header {
    padding-bottom: 1.75rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--prime-color-border);
}

.page-header h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.5rem);
    letter-spacing: -0.05em;
    line-height: 1.2;
}

.page-entry > .page-header {
    padding-bottom: 0;
    margin-bottom: clamp(3rem, 6vw, 4.75rem);
    border-bottom: 0;
    text-align: center;
}

.page-entry > .page-header h1 {
    color: #222222;
    font-size: clamp(2rem, 4vw, 2.625rem);
    font-weight: 500;
    letter-spacing: -0.04em;
}

.entry-meta {
    margin: 0 0 0.5rem;
    color: var(--prime-color-muted);
    font-size: 0.875rem;
}

.entry-content > * + * {
    margin-top: 1.25em;
}

.entry-content a {
    color: #b62432;
}

.prime-profile__visual {
    margin: 0 0 clamp(3.5rem, 8vw, 6.25rem);
    overflow: hidden;
    border-radius: var(--prime-radius);
}

.prime-profile__visual img {
    width: 100%;
    aspect-ratio: 4 / 1;
    object-fit: cover;
}

.prime-profile__sections {
    display: grid;
    gap: 1.875rem;
}

.prime-profile__section {
    display: grid;
    grid-template-columns: minmax(11rem, 17.5rem) minmax(0, 1fr);
}

.prime-profile__section h2,
.prime-profile__section ul {
    padding: clamp(1.75rem, 4vw, 3.125rem) clamp(1rem, 2.5vw, 1.875rem);
    margin: 0;
    border-top: 1px solid var(--prime-color-border);
}

.prime-profile__section h2 {
    padding-left: 0;
    border-color: var(--prime-color-accent);
    color: #333333;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.3;
}

.prime-profile__section ul {
    display: grid;
    gap: 0.75rem;
    padding-right: 0;
    list-style: none;
}

.prime-profile__section li {
    position: relative;
    padding-left: 0.9375rem;
    color: var(--prime-color-muted);
    font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
    letter-spacing: -0.02em;
    line-height: 1.55;
}

.prime-profile__section li::before {
    position: absolute;
    top: 0.72em;
    left: 0;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: var(--prime-color-charcoal);
    content: "";
}

.prime-mission {
    display: grid;
    grid-template-columns: minmax(0, 35.625rem) minmax(0, 1fr);
    gap: 3.75rem;
    align-items: stretch;
}

.prime-mission__visual {
    position: relative;
    min-height: 36.5rem;
    margin: 0;
    overflow: hidden;
    border-radius: 0.625rem;
}

.prime-mission__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.prime-mission__content {
    color: #333333;
    font-size: 1.125rem;
    letter-spacing: -0.03em;
    line-height: 1.7;
    word-break: keep-all;
}

.prime-mission__content p {
    margin: 0;
}

.prime-mission__content p + p {
    margin-top: 1.875rem;
}

.prime-mission__signature {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.625rem;
    margin-top: 1.875rem;
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.4;
}

.prime-mission__signature strong {
    font-size: 1.625rem;
    font-weight: 700;
}

@media (max-width: 52rem) {
    .prime-mission {
        grid-template-columns: 1fr;
        gap: 3.125rem;
    }

    .prime-mission__visual {
        min-height: 11.25rem;
        border-radius: 0.5rem;
    }

    .prime-mission__content {
        font-size: 0.875rem;
        line-height: 1.4;
    }

    .prime-mission__content p + p {
        margin-top: 1em;
    }

    .prime-mission__signature {
        margin-top: 1.25rem;
        font-size: 1rem;
    }

    .prime-mission__signature strong {
        font-size: 1.25rem;
    }
}

/* 스크롤 등장 효과 — 기존 사이트 AOS(fade-up · 500ms · ease-in-quart · 100px)와 같은 값이다.
   숨김 상태는 스크립트가 켜 준 has-reveal 아래에서만 적용되므로, 스크립트가 없거나
   실패하면 내용이 사라지지 않는다. */
.has-reveal [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 6.25rem, 0);
    transition:
        opacity 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53),
        transform 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

/* 기존 사이트는 메인의 섹션 제목에만 fade-right 를 썼다(왼쪽에서 들어온다).
   ⚠️ 방향은 반드시 왼쪽(-)이어야 한다. 오른쪽으로 밀면 그 순간 문서가 넓어져
   가로 스크롤이 생긴다 — 왼쪽으로 넘치는 것은 스크롤을 만들지 않는다. */
.has-reveal [data-reveal='right'] {
    transform: translate3d(-6.25rem, 0, 0);
}

.has-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: translateZ(0);
}

@media (prefers-reduced-motion: reduce) {
    .has-reveal [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.prime-process__tabs {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.875rem;
    margin-bottom: 3.125rem;
}

.prime-process.is-enhanced .prime-process__tabs {
    display: flex;
}

.prime-process__tab {
    padding: 0 1.5625rem;
    border: 1px solid var(--prime-color-border);
    border-radius: 1.5625rem;
    color: #888888;
    background: transparent;
    cursor: pointer;
    font-size: 1.125rem;
    letter-spacing: -0.03em;
    line-height: 3.125rem;
    transition: all 0.3s;
}

.prime-process__tab:hover,
.prime-process__tab.is-active {
    border-color: #333333;
    color: #ffffff;
    background: #333333;
}

.prime-process__panel[hidden] {
    display: none;
}

.prime-process__panel + .prime-process__panel {
    margin-top: 5rem;
}

.prime-process.is-enhanced .prime-process__panel + .prime-process__panel {
    margin-top: 0;
}

.prime-process__panel-title {
    margin: 0;
    color: #333333;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.3;
    word-break: keep-all;
}

.prime-process__steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0;
    margin: 1.875rem 0 0;
    gap: 3.75rem 3.125rem;
    list-style: none;
}

.prime-process__steps li {
    position: relative;
    display: grid;
    width: 12.5rem;
    height: 12.5rem;
    align-content: center;
    padding: 0 1rem;
    border: 1px solid var(--prime-color-border);
    border-radius: 50%;
    color: #333333;
    text-align: center;
    word-break: keep-all;
}

.prime-process__steps li::before {
    position: absolute;
    top: 50%;
    left: -1.875rem;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 9px solid #333333;
    margin-top: -2.5px;
    content: '';
}

.prime-process__steps li:first-child::before {
    display: none;
}

.prime-process__steps strong {
    display: block;
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: -0.03em;
}

.prime-process__steps span {
    display: block;
    margin-top: 0.625rem;
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.4;
}

.prime-process__steps li:last-child {
    border-color: var(--prime-color-accent);
    color: #ffffff;
    background: var(--prime-color-accent);
}

/* 10단계는 레거시와 같이 두 줄로 접고 아랫줄을 오른쪽에서 왼쪽으로 읽는다. */
.prime-process__steps--ten {
    display: grid;
    grid-template-columns: repeat(5, 12.5rem);
    justify-content: space-between;
    gap: 3.75rem 0;
}

.prime-process__steps--ten li {
    justify-self: center;
}

/* 두 번째 줄은 명시적으로 2행에 둔다. 열만 지정하면 자동 배치가 행을 새로 만든다. */
.prime-process__steps--ten li:nth-child(n+6) {
    grid-row: 2;
}

.prime-process__steps--ten li:nth-child(6) {
    grid-column: 5;
}

.prime-process__steps--ten li:nth-child(7) {
    grid-column: 4;
}

.prime-process__steps--ten li:nth-child(8) {
    grid-column: 3;
}

.prime-process__steps--ten li:nth-child(9) {
    grid-column: 2;
}

.prime-process__steps--ten li:nth-child(10) {
    grid-column: 1;
}

.prime-process__steps--ten li:nth-child(6)::before {
    top: -1.875rem;
    right: 50%;
    left: auto;
    margin-top: 0;
    margin-right: -5px;
    border-top: 9px solid #333333;
    border-right: 5px solid transparent;
    border-bottom: 0;
    border-left: 5px solid transparent;
}

.prime-process__steps--ten li:nth-child(n+7)::before {
    right: -1.875rem;
    left: auto;
    border-right: 9px solid #333333;
    border-left: 0;
}

.prime-process__steps--three {
    justify-content: flex-end;
}

.prime-process__steps--five {
    display: grid;
    grid-template-columns: repeat(5, 12.5rem);
    justify-content: space-between;
    gap: 3.75rem 0;
}

.prime-process__steps--five li {
    justify-self: center;
}

.prime-process__summary {
    display: grid;
    grid-template-columns: minmax(0, 19.0625rem) minmax(0, 1fr);
    align-items: center;
}

.prime-process__summary:has(.prime-process__steps--ten) {
    grid-template-columns: 1fr;
}

.prime-process__summary:has(.prime-process__steps--ten) .prime-process__steps {
    margin-top: 1.875rem;
}

.prime-process__summary:has(.prime-process__steps--three) .prime-process__steps {
    margin-top: 0;
}

.prime-process__stages {
    margin-top: 6.25rem;
}

.prime-process__stage + .prime-process__stage {
    margin-top: 5rem;
}

.prime-process__stage {
    display: grid;
    grid-template-columns: minmax(0, 19.0625rem) minmax(0, 1fr);
}

.prime-process__stage-title {
    padding-top: 0.9375rem;
    margin: 0;
    font-weight: 500;
    word-break: keep-all;
}

.prime-process__stage-title strong {
    display: block;
    color: #333333;
    font-size: 1.625rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.6;
}

.prime-process__stage-title span {
    display: block;
    margin-top: 0.8125rem;
    color: #666666;
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.03em;
}

.prime-process__stage-title em {
    display: block;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.6;
}

/* 위에 단계 원이 없는 페이지(통계분석 기법)는 레거시와 같이 70px 만 띄운다. */
.prime-process__stages--flat {
    margin-top: 4.375rem;
}

.prime-process__items {
    padding: 0;
    margin: 0;
    border-top: 2px solid #333333;
    list-style: none;
}

.prime-process__items > li > p,
.prime-process__items summary {
    display: block;
    padding: 0.9375rem 1.25rem;
    margin: 0;
    border-bottom: 1px solid var(--prime-color-border);
    color: #333333;
    font-size: 1.1875rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.5;
    word-break: keep-all;
}

.prime-process__items summary {
    position: relative;
    padding-right: 3.125rem;
    cursor: pointer;
    list-style: none;
}

.prime-process__items summary::-webkit-details-marker {
    display: none;
}

.prime-process__items summary::after {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 0.625rem;
    height: 0.625rem;
    border-right: 1px solid #aaaaaa;
    border-bottom: 1px solid #aaaaaa;
    content: '';
    transform: rotate(45deg);
    transition: all 0.3s;
}

.prime-process__items details[open] summary::after {
    top: 1.5625rem;
    border-color: var(--prime-color-accent);
    transform: rotate(-135deg);
}

.prime-process__items details > ul {
    padding: 1.5625rem 2.5rem;
    margin: 0;
    border-bottom: 1px solid var(--prime-color-border);
    background: var(--prime-color-surface);
    list-style: none;
}

.prime-process__items details > ul > li {
    position: relative;
    padding-left: 0.9375rem;
    color: #666666;
    font-size: 1rem;
    letter-spacing: -0.02em;
    line-height: 1.5;
    word-break: keep-all;
}

.prime-process__items details > ul > li + li {
    margin-top: 0.625rem;
}

.prime-process__items details > ul > li::before {
    position: absolute;
    top: 0.5625rem;
    left: 0;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: #333333;
    content: '';
}

@media (max-width: 64rem) {
    .prime-process__steps--ten,
    .prime-process__steps--five {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem 1.5rem;
    }

    .prime-process__steps--ten li:nth-child(n) {
        grid-row: auto;
        grid-column: auto;
    }

    /* 좁은 화면에서는 칸을 채운다. 가운데 정렬로 두면 글자 길이만큼 줄어 계단처럼 보인다. */
    .prime-process__steps li {
        justify-self: stretch;
    }
}

@media (max-width: 52rem) {
    .prime-process__tabs {
        gap: 0.9375rem;
        margin-bottom: 1.875rem;
    }

    .prime-process__tab {
        padding: 0 0.9375rem;
        border-radius: 1.25rem;
        font-size: 0.9375rem;
        line-height: 2.5rem;
    }

    .prime-process__panel-title {
        font-size: 1.4375rem;
        text-align: center;
    }

    .prime-process__summary,
    .prime-process__summary:has(.prime-process__steps--ten),
    .prime-process__stage {
        grid-template-columns: 1fr;
    }

    .prime-process__steps,
    .prime-process__steps--five,
    .prime-process__summary:has(.prime-process__steps--three) .prime-process__steps,
    .prime-process__summary:has(.prime-process__steps--ten) .prime-process__steps {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 1rem;
        gap: 2rem;
    }

    .prime-process__steps li {
        width: auto;
        height: auto;
        padding: 0.9375rem 0.625rem;
        border-radius: 1.875rem;
        justify-self: stretch;
    }

    .prime-process__steps li::before {
        top: -1.125rem;
        right: auto;
        left: 50%;
        margin-top: 0;
        margin-left: -4px;
        border-top: 9px solid #333333;
        border-right: 5px solid transparent;
        border-bottom: 0;
        border-left: 5px solid transparent;
    }

    .prime-process__steps--ten {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem 1rem;
    }

    .prime-process__steps--ten li::before {
        display: none;
    }

    .prime-process__steps strong {
        font-size: 1.25rem;
    }

    .prime-process__steps span {
        margin-top: 0.5rem;
        font-size: 0.875rem;
    }

    .prime-process__stages {
        margin-top: 2.5rem;
    }

    .prime-process__stage + .prime-process__stage {
        margin-top: 2.5rem;
    }

    .prime-process__stage-title {
        padding-top: 0;
        padding-bottom: 0.75rem;
    }

    .prime-process__stage-title strong {
        font-size: 1.3125rem;
    }

    .prime-process__stage-title span {
        margin-top: 0.25rem;
        font-size: 0.9375rem;
    }

    .prime-process__items > li > p,
    .prime-process__items summary {
        padding: 0.75rem 0.625rem;
        font-size: 0.9375rem;
        font-weight: 400;
        line-height: 1.4;
    }

    .prime-process__items summary {
        padding-right: 2.25rem;
    }

    .prime-process__items summary::after {
        top: 1rem;
        right: 0.8125rem;
        width: 0.5rem;
        height: 0.5rem;
    }

    .prime-process__items details[open] summary::after {
        top: 1.3125rem;
    }

    .prime-process__items details > ul {
        padding: 0.9375rem 1.25rem;
    }

    .prime-process__items details > ul > li {
        font-size: 0.875rem;
    }
}

@media (max-width: 30rem) {
    .prime-process__tabs {
        gap: 0.3125rem;
    }

    .prime-process__tab {
        padding: 0 0.59375rem;
        font-size: 0.8125rem;
    }
}

/* ───── 메인: 상담안내 ───── */

.front-page-content {
    margin: 0;
}

.prime-main-intro {
    display: grid;
    width: min(100% - var(--prime-gutter) * 2, var(--prime-wide-width));
    grid-template-columns: minmax(0, 27.5rem) minmax(0, 1fr) minmax(0, 17rem);
    align-items: center;
    padding: 2.5rem 0;
    margin-inline: auto;
    border-bottom: 1px solid var(--prime-color-border);
}

.prime-main-intro__contact {
    display: flex;
    align-items: center;
    gap: 2.375rem;
}

.prime-main-intro__badge {
    display: grid;
    width: 6rem;
    height: 6rem;
    flex: 0 0 auto;
    place-content: center;
    margin: 0;
    border-radius: 50%;
    color: #ffffff;
    background: var(--prime-color-accent);
    font-size: 1.125rem;
    font-weight: 600;
}

.prime-main-intro__lines dl {
    display: flex;
    margin: 0;
    color: #888888;
    font-size: 0.875rem;
}

.prime-main-intro__lines dl + dl {
    margin-top: 0.3125rem;
}

.prime-main-intro__lines dt {
    width: 4.6875rem;
    flex: 0 0 auto;
}

.prime-main-intro__lines dd {
    margin: 0;
    color: #333333;
}

.prime-main-intro__lines a {
    color: inherit;
    text-decoration: none;
}

.prime-main-intro__lines .prime-main-intro__phone {
    display: block;
    margin-bottom: 0.375rem;
}

.prime-main-intro__phone dt {
    width: auto;
    color: #333333;
    font-weight: 500;
}

.prime-main-intro__phone dd {
    margin-top: 0.25rem;
    color: #111111;
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.prime-main-quick {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    list-style: none;
}

.prime-main-quick li {
    position: relative;
    width: 100%;
    padding: 0 0.75rem;
    text-align: center;
}

.prime-main-quick li::before,
.prime-main-quick li:last-child::after {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 68%;
    background: var(--prime-color-border);
    content: "";
    transform: translateY(-50%);
}

.prime-main-quick li:last-child::after {
    right: 0;
    left: auto;
}

.prime-main-quick a {
    display: grid;
    justify-items: center;
    gap: 1.125rem;
    color: #333333;
    text-decoration: none;
}

.prime-main-quick img {
    width: auto;
    height: 3.375rem;
    object-fit: contain;
    transition: transform 0.3s;
}

.prime-main-quick a:hover img {
    transform: translateY(-0.25rem);
}

.prime-main-quick span {
    font-size: 1.0625rem;
    font-weight: 500;
    white-space: nowrap;
}

.prime-main-intro__hours {
    padding-left: 2.5rem;
    color: #888888;
    font-size: 0.875rem;
}

.prime-main-intro__hours h3 {
    margin: 0 0 0.5rem;
    color: #333333;
    font-size: 0.875rem;
    font-weight: 500;
}

.prime-main-intro__hours dl {
    display: flex;
    margin: 0 0 0.3125rem;
}

.prime-main-intro__hours dt {
    width: 3.75rem;
    flex: 0 0 auto;
}

.prime-main-intro__hours dd {
    margin: 0;
    color: #333333;
}

.prime-main-intro__hours p {
    margin: 0;
}

/* ───── 메인: 선택하는 이유 ───── */

.prime-main-reason {
    display: grid;
    width: min(100% - var(--prime-gutter) * 2, var(--prime-wide-width));
    grid-template-columns: minmax(0, 21.875rem) minmax(0, 1fr);
    padding: 6.1875rem 0;
    margin-inline: auto;
}

.prime-main-reason__title h2 {
    margin: 0;
    color: #111111;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.5;
    word-break: keep-all;
}

.prime-main-reason__title strong {
    display: block;
    color: var(--prime-color-accent);
    font-weight: 600;
}

.prime-main-reason__list {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.prime-main-reason__list > li {
    /* ⚠️ min-width:0 이 없으면 이 칸은 원 그래프의 고정 폭(17.5rem)보다 좁아지지 못한다.
       flex 항목의 기본 최소 크기가 min-content 이기 때문이다. 그래서 원 3개(840px)와
       제목 칸(350px)의 합이 본문 폭 1200px 을 5px 넘겨, **설계 폭에서도** 화면이
       옆으로 밀렸다(2026-08-19 실측: 1200px 에서 5px, 1100px 에서 106px). */
    width: 100%;
    min-width: 0;
}

/* 원형 그래프. 채움 비율은 본문의 data-gauge 값을 스크립트가 변수로 옮긴다.
   폭이 좁아지면 높이도 같이 줄어야 원이 유지되므로 높이는 aspect-ratio 로 따라가게 둔다
   (고정 높이로 두면 좁은 화면에서 타원이 된다). */
.prime-gauge {
    position: relative;
    display: inline-grid;
    width: 17.5rem;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
    place-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: conic-gradient(#3d3d3d 0% var(--prime-gauge, 97%), #ffffff var(--prime-gauge, 97%));
}

.prime-gauge::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62%;
    height: 62%;
    border: 1px solid #666666;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1.875rem 1.875rem rgb(0 0 0 / 30%);
    content: "";
    transform: translate(-50%, -50%);
}

.prime-gauge span {
    position: relative;
    z-index: 1;
    color: #111111;
    font-size: 1.875rem;
    font-weight: 500;
}

.prime-gauge strong {
    font-size: 3.125rem;
    font-weight: 700;
}

.prime-main-reason__item--mint .prime-gauge {
    background: conic-gradient(var(--prime-color-mint) 0% var(--prime-gauge, 98%), #ffffff var(--prime-gauge, 98%));
}

.prime-main-reason__item--mint dt {
    color: var(--prime-color-mint);
}

.prime-main-reason__item--red .prime-gauge {
    background: conic-gradient(var(--prime-color-accent) 0% var(--prime-gauge, 75%), #ffffff var(--prime-gauge, 75%));
}

.prime-main-reason__item--red dt {
    color: var(--prime-color-accent);
}

.prime-main-reason__list dl {
    margin: 2.25rem 0 0;
}

.prime-main-reason__list dt {
    color: #333333;
    font-size: 1.5rem;
    font-weight: 600;
}

.prime-main-reason__list dd {
    margin: 0.875rem 0 0;
    color: #888888;
    font-size: 1rem;
    word-break: keep-all;
}

/* ───── 메인: 체계적인 컨설팅 지원 ───── */

.prime-main-support {
    padding: 6.5rem 0 4.1875rem;
    background: var(--prime-color-accent) url("../images/main-support-bg.webp") no-repeat center / cover;
}

.prime-main-support__inner {
    width: min(100% - var(--prime-gutter) * 2, var(--prime-wide-width));
    margin-inline: auto;
    color: #ffffff;
}

.prime-main-support__eyebrow {
    margin: 0;
    font-size: 2rem;
    font-weight: 300;
}

.prime-main-support__title h2 {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.5;
    word-break: keep-all;
}

.prime-main-support__title strong {
    font-weight: 600;
}

.prime-main-support__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5rem;
    margin-top: 3.1875rem;
}

.prime-main-support__col dl + dl {
    margin-top: 1.0625rem;
}

/* 두 단 사이의 세로 구분선 — 기존 사이트와 같은 위치(가운데에서 20px 왼쪽). */
.prime-main-support__grid::before {
    position: absolute;
    top: 0;
    bottom: -1.4375rem;
    left: calc(50% - 1.25rem);
    width: 1px;
    background: rgb(255 255 255 / 40%);
    content: "";
}

.prime-main-support__grid dl {
    display: flex;
    margin: 0;
}

.prime-main-support__grid dt {
    flex: 0 0 8.125rem;
    font-size: 1.375rem;
    font-weight: 600;
}

.prime-main-support__grid dd {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0.1875rem;
    margin: 0;
    color: rgb(255 255 255 / 80%);
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.35;
}

.prime-main-support__grid ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.prime-main-support__grid li {
    word-break: keep-all;
}

.prime-main-support__grid li + li {
    margin-top: 0.4375rem;
}

/* ───── 메인: 컨설팅 성공사례 ───── */

.prime-main-board {
    width: min(100% - var(--prime-gutter) * 2, var(--prime-wide-width));
    margin: 5rem auto 0;
}

.prime-main-board__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.prime-main-board__head h2 {
    margin: 0;
    color: #111111;
    font-size: 2.5rem;
    font-weight: 300;
}

.prime-main-board__head strong {
    color: var(--prime-color-accent);
    font-weight: 600;
}

/* 메인 목록 제목의 뱃지 — 「AI와 논문작성」의 HOT · 「컨설팅 성공사례」의 COOL
   (고객 요청 2026-08-26 · 둘 다 제목 오른쪽 위 13시 방향).

   ⛔ `display: inline-block` 을 **반드시 함께 준다.** 이 테마는 83행에서 모든 그림을
      `img { display: block }` 으로 두고 있어, 그냥 두면 뱃지가 제 줄을 차지해
      **제목 아래로 떨어진다**(2026-08-26 화면으로 확인하고 고쳤다).
   ⭐ 위치를 좌표(absolute)로 잡지 않았다. `vertical-align: top` 은 글줄 상자의 **맨 위**에
      맞추므로, 제목 글자 크기가 화면 폭에 따라 달라져도(2.5rem ↔ 1.75rem) 뱃지가 저절로
      제목 윗선을 따라간다. 좌표로 박으면 폭마다 다시 맞춰야 한다.
   ⚠️ 폭만 정하고 높이는 건드리지 않는다 — 원본 비율은 전역 `img { height: auto }` 가
      지켜 준다. HTML 의 width·height 로 자리를 미리 잡아 두므로 그림이 늦게 와도
      제목이 밀리지 않는다(CLS 0 유지).
   ⚠️ 뱃지를 더 늘릴 때는 **아래 공통 규칙에 선택자만 더하고 폭만 따로 준다.**
      HOT 은 세로로 긴 불꽃(52x66), COOL 은 가로로 긴 글자(100x48) 라 폭이 서로 다르다 —
      같은 폭을 주면 한쪽이 지나치게 커 보인다. */
.prime-main-board__hot,
.prime-main-board__cool {
    display: inline-block;
    margin-left: 0.375rem;
    vertical-align: top;
}

.prime-main-board__hot {
    width: 1.625rem;
}

.prime-main-board__cool {
    width: 3.125rem;
}

.prime-main-board__more {
    display: inline-flex;
    height: 2.5rem;
    align-items: center;
    padding: 0 1.25rem;
    border: 1px solid var(--prime-color-border);
    border-radius: 1.25rem;
    color: #666666;
    background: #ffffff;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
}

.prime-main-board__more:hover {
    border-color: #333333;
    color: #ffffff;
    background: #333333;
}

.prime-main-board__box {
    padding: 1.875rem;
    margin-top: 1.25rem;
    border: 1px solid var(--prime-color-border);
    border-radius: 0.625rem;
    background: var(--prime-color-surface);
}

.prime-case-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
    margin: 0;
    column-gap: 3.75rem;
    list-style: none;
    /* 왼쪽·오른쪽 칸을 가르는 세로선(고객 요청 2026-08-21).
       두 칸이 같은 폭이라 상자의 정중앙이 곧 칸 사이 여백의 한가운데다.
       칸마다 border 를 주면 한쪽으로 치우치므로 배경 그림으로 1px 선을 그린다 —
       요소를 늘리지 않아 마크업도 그대로다. */
    background-image: linear-gradient(#e6e6e6, #e6e6e6);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1px 100%;
}

.prime-case-list li {
    /* 줄 사이 구분선을 없앴다(고객 요청 2026-08-21). 선이 빠진 만큼 줄 간격도
       더 좁힐 수 있어 아래 padding 을 함께 줄였다 — 4줄이던 상자 높이를 넘지 않는다. */
    border-bottom: 0;
}

.prime-case-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9375rem;
    /* 4줄(8건) -> 5줄(10건) 로 늘리면서 줄 사이를 좁혔다(고객 요청 2026-08-21).
       구분선을 없앤 뒤 한 번 더 좁혔다. 한 줄이 늘어도 상자 높이는 예전과 비슷하다. */
    padding: 0.3125rem 0;
    color: #333333;
    text-decoration: none;
}

.prime-case-list__title {
    /* flex 자식은 기본이 min-width:auto 라 글자 길이보다 작아지지 않는다.
       그래서 아래 말줄임이 동작하지 않고 줄이 통째로 밀려 나가 가로 스크롤이 생겼다
       (412px 화면에서 문서 폭이 779px 이 되던 원인). 0 으로 낮춰야 말줄임이 걸린다. */
    min-width: 0;
    overflow: hidden;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prime-case-list a:hover .prime-case-list__title {
    color: var(--prime-color-accent);
}

.prime-case-list__date {
    flex: 0 0 auto;
    color: #666666;
    font-size: 1rem;
}

.prime-case-list__empty {
    margin: 0;
    color: #888888;
    text-align: center;
}

/* ───── 메인: 프라임이 특별한 이유 ───── */

.prime-main-special {
    padding: 5.4375rem 0 6.875rem;
}

.prime-main-special__inner {
    width: min(100% - var(--prime-gutter) * 2, var(--prime-wide-width));
    margin-inline: auto;
}

.prime-main-special__title h2 {
    margin: 0;
    color: #111111;
    font-size: 2.5rem;
    font-weight: 300;
}

.prime-main-special__title strong {
    color: var(--prime-color-accent);
    font-weight: 600;
}

.prime-main-special__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    padding: 0;
    margin: 1.75rem 0 0;
    list-style: none;
}

.prime-main-special__list > li {
    padding: 2rem 1.75rem 2.5rem;
    border: 1px solid var(--prime-color-border);
    border-radius: 0.625rem;
    background: #ffffff;
    transition: all 0.4s;
}

.prime-main-special__list > li:hover {
    border-color: var(--prime-color-charcoal);
    background: var(--prime-color-charcoal);
}

.prime-main-special__list img {
    height: 3.75rem;
    width: auto;
    margin-bottom: 1.5rem;
    object-fit: contain;
}

.prime-main-special__list h3 {
    min-height: 6.25rem;
    margin: 0 0 1.25rem;
    color: #111111;
    font-size: 1.625rem;
    font-weight: 400;
    line-height: 1.3;
    word-break: keep-all;
}

.prime-main-special__list h3 strong {
    font-weight: 600;
}

.prime-main-special__list p {
    margin: 0;
    color: #888888;
    font-size: 1rem;
    line-height: 1.62;
    word-break: keep-all;
}

.prime-main-special__list > li:hover h3,
.prime-main-special__list > li:hover p {
    color: #ffffff;
}

/* ───── 메인: 와이드 배너 ───── */

.prime-main-banner {
    background: #3d3d3d url("../images/main-wide-banner.webp") no-repeat center / cover;
}

/* 좁은 화면에는 기존 사이트의 **모바일 전용 배너**(750×1300 세로형)를 쓴다.
   재구축 때 이 이미지가 빠져 데스크톱용 1920×940 이 양쪽에 쓰이고 있었는데,
   세로로 긴 자리를 가로 이미지로 덮느라 가로의 일부만 확대돼 보였고 전송량도 컸다.
   ⚠️ 배경 이미지라 srcset 을 쓸 수 없어 미디어 쿼리로 갈라야 한다.
   히어로가 쓰는 것과 같은 경계값(47.99rem)을 그대로 따른다. */
@media (max-width: 47.99rem) {
    .prime-main-banner {
        background-image: url("../images/main-wide-banner-mobile.webp");
    }
}

.prime-main-banner__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0;
    margin: 0;
    list-style: none;
}

.prime-main-banner__list > li {
    position: relative;
    display: grid;
    min-height: 34rem;
    align-content: center;
    padding: 2.5rem 1.25rem;
    color: #ffffff;
    text-align: center;
    transition: background 0.4s;
}

.prime-main-banner__list > li + li {
    border-left: 1px solid rgb(255 255 255 / 40%);
}

.prime-main-banner__list > li:hover,
.prime-main-banner__list > li:focus-within {
    background: rgb(0 0 0 / 70%);
}

.prime-main-banner__list h3 {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.27;
    word-break: keep-all;
}

.prime-main-banner__list h3 span {
    display: block;
    margin-top: 0.4375rem;
    color: rgb(255 255 255 / 70%);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
}

/* 제목 자체가 여닫는 자리다(<summary>). 기본 삼각형 표식은 지운다 —
   기존 사이트에는 없던 모양이고, 제목 줄이 가운데 정렬이라 표식이 있으면 축이 틀어진다. */
.prime-main-banner__list summary {
    cursor: pointer;
    list-style: none;
}

.prime-main-banner__list summary::-webkit-details-marker {
    display: none;
}

/* 마우스가 있는 환경에서는 예전 그대로 — 닫혀 있어도 내용을 렌더해 두고 hover 로 펼친다.
   이 의사요소를 모르는 브라우저에서는 눌러서 펼치는 방식으로 자연스럽게 내려앉는다
   (내용에 닿지 못하는 상태가 되지는 않는다). */
@media (hover: hover) {
    .prime-main-banner__list details::details-content {
        content-visibility: visible;
    }
}

/* 자세한 설명은 마우스를 올리거나 · 키보드 초점이 들어오거나 · 눌러서 폈을 때 보인다. */
.prime-main-banner__list details > ul {
    display: grid;
    max-width: 20rem;
    padding: 0;
    margin: 0 auto;
    gap: 0.75rem;
    list-style: none;
    opacity: 0;
    text-align: left;
    transition: opacity 0.4s, max-height 0.4s;
    max-height: 0;
    overflow: hidden;
}

.prime-main-banner__list > li:hover details > ul,
.prime-main-banner__list > li:focus-within details > ul,
.prime-main-banner__list details[open] > ul {
    max-height: 20rem;
    margin-top: 2.875rem;
    opacity: 1;
}

.prime-main-banner__list details > ul li {
    position: relative;
    padding-left: 0.5rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.62;
    word-break: keep-all;
}

.prime-main-banner__list details > ul li::before {
    position: absolute;
    left: 0;
    content: "·";
}

/* ───── 메인: 컨설팅 분야와 주요 키워드 ───── */

.prime-main-keyword {
    width: min(100% - var(--prime-gutter) * 2, var(--prime-wide-width));
    padding: 6.125rem 0 7rem;
    margin-inline: auto;
}

.prime-main-keyword__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.prime-main-keyword__head h2 {
    margin: 0;
    color: #111111;
    font-size: 2.5rem;
    font-weight: 300;
}

.prime-main-keyword__head strong {
    color: var(--prime-color-accent);
    font-weight: 600;
}

.prime-main-keyword__more {
    color: #666666;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
}

.prime-main-keyword__more::after {
    margin-left: 0.375rem;
    content: "→";
}

.prime-main-keyword__more:hover {
    color: var(--prime-color-accent);
}

.prime-main-keyword__tools {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* 화살표는 스크립트가 동작할 때만 보인다(hidden 을 스크립트가 뗀다). */
.prime-main-keyword__arrows {
    display: flex;
    gap: 0.5rem;
}

.prime-main-keyword__arrows[hidden] {
    display: none;
}

.prime-main-keyword__arrow {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--prime-color-border);
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, opacity 0.2s;
}

.prime-main-keyword__arrow::before {
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline: auto;
    border-top: 1px solid #666666;
    border-left: 1px solid #666666;
    transform: translateX(0.125rem) rotate(-45deg);
    content: "";
}

.prime-main-keyword__arrow--next::before {
    transform: translateX(-0.125rem) rotate(135deg);
}

/* 2026-08-21 에 오른쪽 화살표를 처음부터 빨갛게 두었으나 2026-08-22 고객 요청으로
   되돌렸다 — **색이 없는 것이 기본값**이다. 마우스를 올렸을 때만 강조된다. */

.prime-main-keyword__arrow:hover:not(:disabled) {
    border-color: var(--prime-color-accent);
    background: var(--prime-color-accent);
}

.prime-main-keyword__arrow:hover:not(:disabled)::before {
    border-color: #ffffff;
}

.prime-main-keyword__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

/* 카드 한 줄. 브라우저 기본 가로 스크롤을 쓰므로 라이브러리가 없다. */
.prime-main-keyword__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3.75rem) / 4);
    /* 위 칸(사진)과 아래 칸(주요실적)을 카드마다 같은 높이로 맞추기 위한 두 줄. */
    grid-template-rows: auto auto;
    gap: 1.25rem;
    /* 카드가 떠오를 때의 그림자가 잘리지 않도록 위아래 여유를 둔다. */
    padding: 0.75rem 0 2rem;
    margin: 1.75rem 0 -1rem;
    list-style: none;
    overflow-x: auto;
    /* overflow-x 를 auto 로 두면 세로도 auto 가 되어 스크롤바가 생긴다. */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.prime-main-keyword__list::-webkit-scrollbar {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .prime-main-keyword__list {
        scroll-behavior: auto;
    }
}

.prime-main-keyword__list > li {
    position: relative;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    overflow: hidden;
    border: 1px solid var(--prime-color-border);
    border-radius: 0.5rem;
    transition: box-shadow 0.3s, transform 0.3s;
}

/* 사진 칸의 높이를 카드마다 같게 맞춘다. 목록이 정한 두 줄 높이를 카드가 그대로 쓴다.
   지원하지 않는 브라우저에서는 위의 세로 배치가 그대로 남아 예전처럼 보인다. */
@supports (grid-template-rows: subgrid) {
    .prime-main-keyword__list > li {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
    }
}

.prime-main-keyword__list > li:hover,
.prime-main-keyword__list > li:focus-within {
    box-shadow: 0 1rem 2rem rgb(0 0 0 / 12%);
    transform: translateY(-0.25rem);
}

/* 카드 전체를 누를 수 있게 덮는 링크. 글자는 화면 낭독기만 읽는다. */
.prime-main-keyword__link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.prime-main-keyword__cover {
    position: relative;
    padding: 2.5rem 1.875rem 1.5rem;
    color: #ffffff;
}

.prime-main-keyword__cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prime-main-keyword__cover::after {
    position: absolute;
    inset: 0;
    background: rgb(17 17 17 / 55%);
    content: "";
}

.prime-main-keyword__cover > * {
    position: relative;
    z-index: 1;
}

.prime-main-keyword__cover h3 {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    word-break: keep-all;
}

.prime-main-keyword__cover p,
.prime-main-keyword__detail p {
    margin: 0 0 0.75rem;
    font-size: 1.0625rem;
    font-weight: 500;
}

.prime-main-keyword__detail {
    flex: 1 1 auto;
    padding: 1.5rem 1.875rem 2rem;
    background: #ffffff;
}

.prime-main-keyword__detail p {
    color: #333333;
}

.prime-main-keyword__cover ul,
.prime-main-keyword__detail ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.prime-main-keyword__cover li,
.prime-main-keyword__detail li {
    position: relative;
    padding-left: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.6;
    word-break: keep-all;
}

.prime-main-keyword__detail li {
    color: #888888;
}

.prime-main-keyword__cover li::before,
.prime-main-keyword__detail li::before {
    position: absolute;
    left: 0;
    content: "·";
}

/* ───── 메인: 컨설팅 실적 ───── */

.prime-main-performance {
    width: min(100% - var(--prime-gutter) * 2, var(--prime-wide-width));
    padding-bottom: 5.8125rem;
    margin-inline: auto;
}

/* 📌 2026-08-24 고객 요청(3차 PC-6): 「간격을 Y 로」.
   Y = 「컨설팅 분야와 주요 키워드」 제목 글자 끝 ~ 카드 위 = **56px**(실측).
   여기는 제목과 첫 동그라미가 **9px** 밖에 안 떨어져 사실상 붙어 있었다.
   ⚠️ 아래 여백이 2.5rem(40px) 인데도 붙어 보인 이유: 차트의 동그라미가 차트 상자
      **위로 31px 넘쳐 나온다**(꼭짓점 장식이라 상자 밖에 그려진다).
      그래서 「여백을 56px 로」가 아니라 **56 + 31 = 87px(5.4375rem)** 이 필요하다.
   ⚠️ 동그라미 크기는 화면 폭에 연동되므로(--prime-peak-unit) 아주 넓거나 좁은 창에서는
      넘침이 조금 달라진다. 1920px 기준으로 맞춘 값이다.
   ⚠️ 좁은 화면은 아래 미디어쿼리에서 1.5rem 으로 따로 정한다 — 이번 요청은 PC 만이다. */
.prime-main-performance__head h2 {
    margin: 0 0 5.4375rem;
    color: #111111;
    font-size: 2.5rem;
    font-weight: 300;
}

.prime-main-performance__head strong {
    color: var(--prime-color-accent);
    font-weight: 600;
}

/* 기존 사이트와 같은 형태다. 겹친 삼각형 다섯 개 + 바닥의 원형 점 + 흰 퍼센트,
   그리고 오른쪽 위 범례. 값은 기존 높이 비율(420/402/376/252/126px)을 그대로 쓴다. */
.prime-main-performance__chart {
    position: relative;
    margin-top: 2.5rem;
}

.prime-main-performance__peaks {
    /* ⚠️ 삼각형 5개의 합은 항상 `기준단위 × 8.484` 다(폭 2단위씩 5개, 겹침 -0.379단위 4번).
       고정값 7.75rem 이면 합이 1,052px 라 **833~1050px 화면에서 옆으로 밀려났다**
       (2026-08-19 실측: 833px 에서 110px, 1024px 에서 14px).
       그래서 기준 한 단위를 화면 폭에 연동하고 폭·높이·겹침·원·글자를 전부 여기서
       파생시킨다. 비율은 기존 값 그대로다(높이 420/402/376/252/126px).
       11.2vw 는 본문 여백(양쪽 1rem)까지 감안해 잡은 값이고, 1,107px 보다 넓은 화면에서는
       min() 이 7.75rem 에서 잘라 주므로 **예전과 완전히 같은 크기**가 된다. */
    --prime-peak-unit: min(7.75rem, 11.2vw);

    position: relative;
    display: flex;
    height: calc(var(--prime-peak-unit) * 26.25 / 7.75);
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    margin: 0;
    border-bottom: 3px solid #a6a8aa;
    list-style: none;
}

.prime-main-performance__peaks::before,
.prime-main-performance__peaks::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 3px;
    height: 1.25rem;
    background: #a6a8aa;
    content: '';
}

.prime-main-performance__peaks::after {
    right: 0;
    left: auto;
}

.prime-main-performance__peaks > li {
    position: relative;
    width: 0;
    height: 0;
    border-right: var(--prime-peak-unit) solid transparent;
    border-bottom: 0 solid;
    border-left: var(--prime-peak-unit) solid transparent;
    transition: border-bottom-width 1.6s ease-out;
}

.prime-main-performance__peaks > li + li {
    margin-left: calc(var(--prime-peak-unit) * -2.9375 / 7.75);
}

/* 바닥의 원형 점 */
.prime-main-performance__peaks > li::before {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    content: '';
    transform: translateX(-50%);
    transition: all 1.2s ease-out;
}

.prime-main-performance__chart.is-shown .prime-main-performance__peaks > li::before {
    width: calc(var(--prime-peak-unit) * 2.75 / 7.75);
    height: calc(var(--prime-peak-unit) * 2.75 / 7.75);
}

/* 퍼센트는 삼각형 안쪽에 놓인다. 기준 위치는 기존 사이트 값(-279/-282/-274/-190/-105px)이다. */
.prime-main-performance__peaks span {
    position: absolute;
    bottom: calc(var(--prime-peak-label) * -1);
    left: 50%;
    color: #ffffff;
    /* 글자도 삼각형과 같은 비율로 줄여야 좁아진 삼각형 밖으로 삐져나가지 않는다.
       넓은 화면에서는 1.625rem 그대로다. */
    font-size: calc(var(--prime-peak-unit) * 1.625 / 7.75);
    font-weight: 700;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 0.6s 0.9s;
    white-space: nowrap;
}

.prime-main-performance__chart.is-shown .prime-main-performance__peaks span,
.prime-main-performance__chart:not(.is-ready) .prime-main-performance__peaks span {
    opacity: 1;
}

.prime-main-performance__legend {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}

.prime-main-performance__legend li {
    position: relative;
    padding-left: 1.625rem;
    color: #333333;
    font-size: 1rem;
}

.prime-main-performance__legend li + li {
    margin-top: 1.0625rem;
}

.prime-main-performance__legend li::before {
    position: absolute;
    top: 0.3125rem;
    left: 0;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    content: '';
}

.prime-main-performance__legend strong {
    font-weight: 700;
}

/* 항목별 색과 높이. 높이·라벨 위치는 기준단위(7.75rem)에 대한 비율이고,
   넓은 화면에서는 예전 고정값과 같은 수가 나온다(26.25 / 25.125 / 23.5 / 15.75 / 7.875rem). */
.prime-peak--1 { --prime-peak-color: rgb(219 66 78 / 90%); --prime-peak-height: calc(var(--prime-peak-unit) * 26.25 / 7.75); --prime-peak-label: calc(var(--prime-peak-unit) * 17.4375 / 7.75); }
.prime-peak--2 { --prime-peak-color: rgb(255 150 0 / 90%); --prime-peak-height: calc(var(--prime-peak-unit) * 25.125 / 7.75); --prime-peak-label: calc(var(--prime-peak-unit) * 17.625 / 7.75); }
.prime-peak--3 { --prime-peak-color: rgb(95 178 178 / 90%); --prime-peak-height: calc(var(--prime-peak-unit) * 23.5 / 7.75); --prime-peak-label: calc(var(--prime-peak-unit) * 17.125 / 7.75); }
.prime-peak--4 { --prime-peak-color: rgb(255 204 0 / 90%); --prime-peak-height: calc(var(--prime-peak-unit) * 15.75 / 7.75); --prime-peak-label: calc(var(--prime-peak-unit) * 11.875 / 7.75); }
.prime-peak--5 { --prime-peak-color: rgb(208 209 211 / 90%); --prime-peak-height: calc(var(--prime-peak-unit) * 7.875 / 7.75); --prime-peak-label: calc(var(--prime-peak-unit) * 6.5625 / 7.75); }

.prime-main-performance__peaks > li {
    border-bottom-color: var(--prime-peak-color);
}

.prime-main-performance__peaks > li::before,
.prime-main-performance__legend li::before {
    background: var(--prime-peak-color);
}

.prime-main-performance__legend strong {
    color: var(--prime-peak-color);
}

.prime-main-performance__chart.is-shown .prime-main-performance__peaks > li {
    border-bottom-width: var(--prime-peak-height);
}

/* 스크립트가 없으면 처음부터 완성된 그래프를 보여 준다. */
.prime-main-performance__chart:not(.is-ready) .prime-main-performance__peaks > li {
    border-bottom-width: var(--prime-peak-height);
}

.prime-main-performance__chart:not(.is-ready) .prime-main-performance__peaks > li::before {
    width: calc(var(--prime-peak-unit) * 2.75 / 7.75);
    height: calc(var(--prime-peak-unit) * 2.75 / 7.75);
}
/* ───── 메인: 문의 CTA ───── */

/* 상담신청 띠. 예전 사이트처럼 빨간 띠로 두어 바로 아래 검은 푸터와 갈라 보이게 한다
   (고객 요청 2026-08-21 — 그전에는 푸터와 같은 검정이라 두 영역이 한 덩어리로 보였다). */
.prime-main-cta {
    background: var(--prime-color-accent);
}

.prime-main-cta__inner {
    display: grid;
    width: min(100% - var(--prime-gutter) * 2, var(--prime-wide-width));
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: center;
    gap: 2.5rem;
    /* 위아래 여백 변경 이력: 3.75rem -> 1.5 -> 1 -> 0.625(2026-08-21 「띠를 낮게」)
       -> 1.5rem(2026-08-22 「상하 패딩을 좀 넣어 달라」)
       -> 2.5rem(2026-08-24 3차 PC-5 「이들 height 를 모두 H 로」).
       ⭐ H = 푸터 QUICK 목록 아래 여백(.site-footer__main 의 아래 패딩) = 2.5rem.
          띠 위·띠 아래·푸터 위 세 곳을 그 값으로 통일했다.
       ⚠️ 더 줄일 때는 여백이 아니라 전화번호 글자 크기(2.25rem)가 띠 높이를 정한다는 점에 유의.
       ⚠️ 좁은 화면은 아래쪽 미디어쿼리에서 따로 정한다(모바일은 3차 M-3 에서 M 으로 통일). */
    padding: 2.5rem 0;
    margin-inline: auto;
    color: #ffffff;
}

.prime-main-cta__contact h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.prime-main-cta__phone {
    /* 전화번호 위아래 여백도 함께 줄인다(2026-08-21 재요청). */
    margin: 0.125rem 0 0.4375rem;
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

/* 검은 바탕일 때는 전화번호만 빨갛게 띄웠지만, 바탕이 빨개졌으므로 흰색으로 바꾼다. */
.prime-main-cta__phone a {
    color: #ffffff;
    text-decoration: none;
}

.prime-main-cta__contact dl {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    /* 평일·토요일 두 줄이 붙도록 줄간격을 좁힌다(2026-08-21 재요청). */
    line-height: 1.4;
    /* 회색(#aaaaaa)은 빨간 바탕에서 대비가 모자란다. 흰색을 옅게 쓴다. */
    color: rgb(255 255 255 / 85%);
    font-size: 0.875rem;
}

.prime-main-cta__contact dt {
    width: 3.75rem;
    flex: 0 0 auto;
}

.prime-main-cta__contact dd {
    margin: 0;
}

.prime-main-cta__action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.prime-main-cta__action p {
    width: 100%;
    margin: 0;
    color: #ffffff;
    text-align: right;
    word-break: keep-all;
}

.prime-main-cta__action .button--outline {
    border-color: rgb(255 255 255 / 60%);
    color: #ffffff;
}

/* 「상담신청 하기」는 원래 빨간 버튼이라 빨간 바탕에서 사라진다.
   예전 사이트처럼 어두운 버튼으로 바꿔 두 버튼이 나란히 보이게 한다. */
.prime-main-cta__action .button--primary {
    color: #ffffff;
    background: var(--prime-color-charcoal);
}

.prime-main-cta__action .button--primary:hover {
    background: var(--prime-color-ink);
}

@media (max-width: 64rem) {
    /* 태블릿: 한 화면에 3장. */
    .prime-main-keyword__list {
        grid-auto-columns: calc((100% - 2.5rem) / 3);
    }

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

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

    .prime-main-banner__list > li:nth-child(3) {
        border-left: 0;
    }

    .prime-main-intro,
    .prime-main-reason {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .prime-main-intro__hours {
        padding-left: 0;
    }

    .prime-main-reason__list {
        flex-wrap: wrap;
        gap: 2.5rem;
    }

    .prime-main-reason__list > li {
        width: calc(50% - 1.25rem);
    }
}

@media (max-width: 52rem) {
    .prime-main-intro__contact {
        gap: 1.25rem;
    }

    .prime-main-intro__badge {
        width: 4.5rem;
        height: 4.5rem;
        font-size: 1rem;
    }

    .prime-main-intro__phone dd {
        font-size: 1.75rem;
    }

    .prime-main-quick {
        flex-wrap: wrap;
        gap: 1.5rem 0;
    }

    .prime-main-quick li {
        width: 33.333%;
        padding: 0 0.5rem;
    }

    .prime-main-quick li::before,
    .prime-main-quick li:last-child::after {
        display: none;
    }

    .prime-main-quick a {
        gap: 0.625rem;
    }

    .prime-main-quick img {
        height: 2.5rem;
    }

    .prime-main-quick span {
        font-size: 0.9375rem;
    }

    .prime-main-reason {
        padding: 3.125rem 0;
    }

    .prime-main-reason__title h2,
    .prime-main-support__title h2 {
        font-size: 1.75rem;
        text-align: center;
    }

    .prime-main-support__eyebrow {
        font-size: 1.25rem;
        text-align: center;
    }

    .prime-main-reason__list > li {
        width: 100%;
    }

    .prime-gauge {
        width: 12.5rem;
    }

    .prime-gauge span {
        font-size: 1.25rem;
    }

    .prime-gauge strong {
        font-size: 2.25rem;
    }

    .prime-main-reason__list dt {
        font-size: 1.25rem;
    }

    .prime-main-support {
        padding: 3.125rem 0;
    }

    .prime-main-support__grid {
        grid-template-columns: 1fr;
        gap: 1.3125rem;
        margin-top: 2.5rem;
    }

    .prime-main-support__grid::before {
        display: none;
    }

    .prime-main-support__grid dl {
        display: block;
    }

    .prime-main-support__col dl + dl {
        margin-top: 1.3125rem;
    }

    .prime-main-support__grid dt {
        font-size: 1.125rem;
        font-weight: 500;
    }

    .prime-main-support__grid dd {
        padding-top: 0.75rem;
        padding-left: 0.3125rem;
        font-size: 0.9375rem;
        line-height: 1.6667;
    }

    /* 항목 사이가 히어로 문단보다 넓어 보인다는 지적(고객 요청 2026-08-22 · 모바일 3쪽).
       한 줄 높이는 이미 거의 같다(여기 15px x 1.6667 = 25px · 히어로 16px x 1.65 = 26.4px).
       벌어져 보이던 것은 줄높이가 아니라 항목마다 덧붙던 7px 여백이었다 — 그것만 걷어낸다.
       넓은 화면은 두 칸으로 나뉘어 사정이 다르므로 그대로 둔다. */
    .prime-main-support__grid li + li {
        margin-top: 0;
    }

    .prime-main-board {
        margin-top: 3.125rem;
    }

    .prime-main-board__head h2,
    .prime-main-special__title h2 {
        font-size: 1.75rem;
    }

    /* 제목이 2.5rem -> 1.75rem 으로 작아지는 만큼 뱃지도 같은 비율(0.7배)로 줄인다. */
    .prime-main-board__hot {
        width: 1.125rem;
    }

    .prime-main-board__cool {
        width: 2.1875rem;
    }

    .prime-main-board__box {
        padding: 1.25rem;
    }

    .prime-case-list {
        /* 그냥 1fr 로 두면 칸이 내용(말줄임 없는 제목)보다 작아지지 못해 화면을 밀어낸다.
           데스크톱 규칙은 처음부터 minmax(0, 1fr) 인데 이 override 에서만 빠져 있었다. */
        grid-template-columns: minmax(0, 1fr);
        /* 한 칸짜리 목록이라 칸 사이 세로선은 지운다. */
        background-image: none;
    }

    /* 좁은 화면에서는 최신 7건까지 보여 준다(고객 요청 2026-08-22).
       ⚠️ 목록은 이미 받아 온 데이터라 건수를 바꿔도 추가 요청·전송량이 생기지 않는다.
       바탕글은 PC 를 위해 이미 10건을 부르고 있고 여기서 감추기만 한다. */
    .prime-case-list li:nth-child(n + 8) {
        display: none;
    }

    /* 밑줄 제거는 2026-08-21 부터 데스크톱·모바일 공통 기본값이 되어 여기서 덮어쓰지 않는다.
       모바일은 세로 여백만 조금 더 넉넉히 둔다(손가락으로 누르는 화면이라). */

    /* 줄간격을 히어로 문단과 같게(고객 요청 2026-08-22 · 모바일 4쪽).
       한 줄 = 16.2px x 1.65 = 26.7px 로 히어로(16px x 1.65 = 26.4px)와 사실상 같다.
       ⚠️ 위아래 여백을 0 으로 두어도 한 줄이 26.7px 이라 누를 수 있는 크기 24px 을 넘는다
          — 접근성 target-size 는 그대로 통과한다(푸터 QUICK 과 같은 이유로 신경 쓴 값). */
    /* 회색 상자 높이는 그대로 두고 줄간격만 균등하게 넓힌다(고객 요청 2026-08-22).
         8줄일 때 = 16.2px x 1.65        = 26.7px x 8 = 213.8px
         7줄일 때 = 26.7px + 1.92px x 2  = 30.6px x 7 = 214.0px
       0.2px 차이라 상자 높이는 눈으로 구분되지 않는다. */
    .prime-case-list a {
        padding: 0.12rem 0;
        line-height: 1.65;
    }

    /* 글자 크기를 0.9 배로(고객 요청 2026-08-22 · 「10 이라 치면 9 로」).
       1.125rem x 0.9 = 1.0125rem · 1rem x 0.9 = 0.9rem. */
    .prime-case-list__title {
        font-size: 1.0125rem;
    }

    .prime-case-list__date {
        font-size: 0.9rem;
    }

    /* 「More to Click」을 ＋ 하나로. 새 모양을 만들지 않고 기존 버튼을 그대로 쓴다 —
       이미 height 2.5rem · border-radius 1.25rem 이라 폭만 맞추면 정확한 원이 된다.
       글자는 지우지 않고 크기만 0 으로 둔다(스크린리더는 그대로 읽는다). */
    .prime-main-board__more {
        position: relative;
        width: 2.5rem;
        justify-content: center;
        padding: 0;
        font-size: 0;
    }

    /* ＋ 를 글꼴 글자가 아니라 **선 두 개로 그린다.**
       글자 '+' 는 글꼴마다 무게중심이 달라 원 정중앙에 오지 않는다 — 원을 200px 로
       키우고 정중앙에 기준선을 그어 재 보니 지름의 8.5%(실제 40px 버튼에서 약 3.4px)
       만큼 **아래로** 치우쳐 있었다(고객 지적 2026-08-22).
       선으로 그리면 글꼴과 무관하게 정확히 가운데다 — 이 테마가 서랍 꺾쇠·닫기 ✕ 에서
       이미 쓰는 방식이라 새로 받는 파일도 0개다. 색은 `currentcolor` 라 마우스오버에서
       흰색으로 바뀌는 동작도 그대로 따라온다. */
    .prime-main-board__more::before,
    .prime-main-board__more::after {
        position: absolute;
        top: 50%;
        left: 50%;
        background: currentcolor;
        content: '';
        transform: translate(-50%, -50%);
    }

    .prime-main-board__more::before {
        width: 0.8125rem;
        height: 2px;
    }

    .prime-main-board__more::after {
        width: 2px;
        height: 0.8125rem;
    }

    .prime-main-special {
        padding: 3.125rem 0;
    }

    .prime-main-special__list {
        grid-template-columns: 1fr;
    }

    /* 아이콘도 글자와 같은 비율로 줄인다(고객 요청). 제목이 1.625 → 1.3125rem 이므로
       아이콘도 3.75 → 3rem. 기존 규칙에서 높이만 덮어쓴다. */
    .prime-main-special__list img {
        height: 3rem;
    }

    .prime-main-special__list h3 {
        min-height: 0;
        font-size: 1.3125rem;
    }

    /* 좁은 화면에는 마우스가 없다. 설명을 항상 보여 준다. */
    .prime-main-banner__list {
        grid-template-columns: 1fr;
    }

    .prime-main-banner__list > li {
        min-height: 0;
        padding: 2rem 1.25rem;
    }

    .prime-main-banner__list > li + li {
        border-top: 1px solid rgb(255 255 255 / 40%);
        border-left: 0;
    }

    .prime-main-banner__list h3 {
        font-size: 1.5rem;
    }

    .prime-main-banner__list h3 span {
        font-size: 1rem;
    }

    /* 좁은 화면에서도 제목만 보이고 제목을 누르면 펼쳐진다(기존 사이트와 같은 동작).
       예전에는 여기서 항상 펼쳐 두었는데("좁은 화면에는 마우스가 없다"), 그 때문에
       배너 한 구간이 화면 몇 개 분량으로 늘어나 기존 사이트와 크게 달라져 있었다.
       펼쳤을 때의 간격만 좁은 화면에 맞게 줄인다. */
    .prime-main-banner__list > li:hover details > ul,
    .prime-main-banner__list > li:focus-within details > ul,
    .prime-main-banner__list details[open] > ul {
        margin-top: 1.25rem;
    }

    .prime-main-keyword {
        padding: 3.125rem 0;
    }

    .prime-main-keyword__head h2,
    .prime-main-performance__head h2 {
        font-size: 1.75rem;
    }

    /* 작은 태블릿: 2장. */
    .prime-main-keyword__list {
        grid-auto-columns: calc((100% - 1.25rem) / 2);
        margin-top: 1.25rem;
    }

    .prime-main-performance__head h2 {
        margin-bottom: 1.5rem;
    }

    /* 좁은 화면에서는 삼각형을 줄이고 범례를 그래프 아래로 내린다.
       ⚠️ 크기를 고정값으로 두면 삼각형 5개의 합이 화면 폭과 무관하게 항상 440px 이라
       360px 기종에서 40px 이 화면 밖으로 나가 가로 스크롤이 생겼다(2026-08-18 실측).
       그래서 기준 한 단위(--prime-peak-unit)를 화면 폭에 연동하고, 폭·높이·겹침·원을
       전부 그 단위에서 파생시킨다. 비율은 기존 값 그대로다.
       넓은 화면에서는 min() 이 3.25rem 에서 잘라 주므로 예전 크기와 같다. */
    .prime-main-performance__peaks {
        --prime-peak-unit: min(3.25rem, 10.8vw);
        height: calc(var(--prime-peak-unit) * 4.038);
    }

    .prime-main-performance__peaks > li {
        border-right-width: var(--prime-peak-unit);
        border-left-width: var(--prime-peak-unit);
    }

    .prime-main-performance__peaks > li + li {
        margin-left: calc(var(--prime-peak-unit) * -0.3846);
    }

    .prime-main-performance__peaks span {
        /* bottom 은 덮어쓰지 않는다. 기본 규칙의 `-(라벨 위치)` 가 퍼센트를 삼각형 안쪽에
           놓아 주는데, 예전에는 여기서 -1.25rem 로 덮어써 꼭짓점 바로 아래(폭이 거의 없는
           뾰족한 끝)에 걸리는 바람에 모바일에서만 숫자가 안 보였다.
           라벨 위치도 이제 --prime-peak-unit 에 비례하므로 데스크톱과 같은 비율로 들어간다. */
        /* 글자만은 비례로 줄이지 않는다 — 좁은 기종에서 10px 아래로 내려가 읽기 어려워진다. */
        font-size: 0.875rem;
    }

    .prime-peak--1 { --prime-peak-height: calc(var(--prime-peak-unit) * 4.038);  --prime-peak-label: calc(var(--prime-peak-unit) * 2.692); }
    .prime-peak--2 { --prime-peak-height: calc(var(--prime-peak-unit) * 3.846);  --prime-peak-label: calc(var(--prime-peak-unit) * 2.712); }
    .prime-peak--3 { --prime-peak-height: calc(var(--prime-peak-unit) * 3.615);  --prime-peak-label: calc(var(--prime-peak-unit) * 2.635); }
    .prime-peak--4 { --prime-peak-height: calc(var(--prime-peak-unit) * 2.423);  --prime-peak-label: calc(var(--prime-peak-unit) * 1.827); }
    .prime-peak--5 { --prime-peak-height: calc(var(--prime-peak-unit) * 1.2115); --prime-peak-label: calc(var(--prime-peak-unit) * 1.0); }

    .prime-main-performance__chart.is-shown .prime-main-performance__peaks > li::before,
    .prime-main-performance__chart:not(.is-ready) .prime-main-performance__peaks > li::before {
        width: calc(var(--prime-peak-unit) * 0.4615);
        height: calc(var(--prime-peak-unit) * 0.4615);
    }

    .prime-main-performance__legend {
        position: static;
        margin-top: 2.5rem;
    }

    /* 📌 2026-08-24 고객 요청(3차 M-3): 「3개의 height 값을 모두 M 으로」.
       M = 푸터 QUICK 목록 아래 여백(.site-footer__main 의 아래 패딩) = 2.5rem.
       ⭐ 푸터 위쪽은 좁은 화면 전용 지정이 없어 기본값(2.5rem)을 그대로 물려받는다 —
          여기서는 빨간 띠의 위·아래만 맞추면 세 곳이 모두 M 이 된다. */
    .prime-main-cta__inner {
        grid-template-columns: 1fr;
        padding: 2.5rem 0;
    }

    .prime-main-cta__action,
    .prime-main-cta__action p {
        justify-content: flex-start;
        text-align: left;
    }
}

/* 📌 2026-08-24 고객 요청(3차 PC-8): 「타이틀과 아래 정보 사이 공백을 designart 처럼 줄여 달라」.
   실측: 우리 89px vs designart 37px -> 52px(3.25rem) 당긴다.

   ⛔ 공백의 출처는 `.page-entry > .page-header` 의 아래 여백(1420px 화면에서 76px)인데,
      그 규칙은 **모든 페이지가 함께 쓴다.** 거기를 고치면 회사소개·이용약관 등
      상관없는 화면까지 바뀐다(계약 범위 밖) -> **이 화면의 상자만 위로 당긴다.**
   ⚠️ 페이지 번호(`page-id-26`)로 좁히지 않은 이유: 그 번호는 **서버마다 다를 수 있다.**
      `.prime-inquiry-page` 는 이 화면에만 있는 상자라 어디서든 안전하다.
   ⛔ **값이 화면 폭마다 다르다.** 위 여백이 `clamp(3rem, 6vw, 4.75rem)` 이라
      1420px 에서는 76px, 390px 에서는 48px 이다. 넓은 화면에 맞춘 -52px 를 그대로
      두면 좁은 화면에서는 **더 당겨져 제목과 연락처가 붙는다**(2026-08-24 고객 지적).
      그래서 좁은 화면 값을 먼저 두고 넓은 화면에서 덮어쓴다. */
.prime-inquiry-page {
    margin-top: -1rem;
}

@media (min-width: 48rem) {
    .prime-inquiry-page {
        margin-top: -3.25rem;
    }
}

/* 📌 2026-08-24 고객 요청(3차 PC-8): 「타이틀 아래 설명을 designart 처럼 간결하게」.
   긴 안내 문장 대신 **빠른문의 : 전화 │ 대표메일 : 메일** 두 항목만 가운데로 둔다.
   ⚠️ 문구 자체는 글 내용(DB)에 있다 — `docs/migrations/2026-08-24_…` 참고. */
.prime-inquiry-page__lead {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 2.5rem;
    color: #666666;
    font-size: 1.0625rem;
    /* 줄 사이 여백은 0 이다 — 좁은 화면에서 두 줄로 접힐 때 designart 처럼 붙여 둔다.
       (예전 0.25rem 일 때 두 줄 사이가 designart 보다 넓었다, 2026-08-24 고객 지적) */
    gap: 0 1.75rem;
    line-height: 1.7;
    text-align: center;
    word-break: keep-all;
}

/* 두 항목 사이의 옅은 세로 줄. 글자가 아니라 선이라 화면낭독기가 읽지 않는다.
   ⚠️ 줄바꿈으로 두 항목이 위아래로 놓이면 선이 어색하므로 그때는 감춘다. */
.prime-inquiry-page__lead > span + span {
    position: relative;
}

@media (min-width: 30rem) {
    .prime-inquiry-page__lead > span + span::before {
        position: absolute;
        top: 0.25em;
        bottom: 0.25em;
        left: -0.875rem;
        border-left: 1px solid var(--prime-color-border);
        content: "";
    }
}

.prime-inquiry__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.875rem;
}

.prime-inquiry__field {
    margin: 0;
}

.prime-inquiry__field--wide {
    grid-column: 1 / -1;
}

/* 📌 2026-08-24 고객 요청(3차 PC-8): 「항목 이름을 designart 처럼 굵게」. 500 -> 700. */
.prime-inquiry__field label {
    display: block;
    margin-bottom: 0.5rem;
    color: #333333;
    font-size: 1rem;
    font-weight: 700;
}

/* 필수 표시 — 「필수」 글자에서 **별표 하나**로 바꿨다(2026-08-24 고객 요청, designart 와 같은 모양).
   ⚠️ 별표는 `aria-hidden` 이라 화면낭독기가 읽지 않는다. 대신 칸마다 `required` 가 붙어 있어
      「필수 항목」이라고 그대로 안내된다 — 표시를 바꿨을 뿐 정보가 사라지지 않는다. */
.prime-inquiry__required {
    margin-left: 0.125rem;
    color: var(--prime-color-accent);
    font-size: 0.9375rem;
    font-weight: 700;
}

/* 📌 2026-08-24 고객 요청(3차 PC-8): 「입력란 테두리를 좀 더 진하게 (PC·모바일 모두)」.
   ⛔ 사이트 공용 변수(`--prime-color-border` = #dedfe2)는 **51곳**에서 쓰인다.
      거기를 바꾸면 표·구분선·카드까지 전부 진해진다(계약 범위 밖) ->
      **상담신청 폼 안에서만** 쓰는 변수를 따로 둔다.
   기준: designart 입력칸 테두리 실측 #cccccc. 우리 색조를 유지하면서 그만큼 진하게 잡았다. */
.prime-inquiry {
    --prime-inquiry-border: #c8cad0;
}

.prime-inquiry input[type="text"],
.prime-inquiry input[type="tel"],
.prime-inquiry input[type="email"],
.prime-inquiry select,
.prime-inquiry textarea {
    width: 100%;
    padding: 0.75rem 0.9375rem;
    border: 1px solid var(--prime-inquiry-border);
    border-radius: 0.25rem;
    color: #333333;
    background: #ffffff;
    font-size: 1rem;
}

.prime-inquiry textarea {
    line-height: 1.6;
    resize: vertical;
}

/* ── 상담신청 본문 폼 — designart 견적문의 레이아웃 (고객 요청 2026-08-24, 3차 PC-8) ──

   참고 사이트를 실제로 띄워 재고 맞춘 값이다
   (designart.co.kr/board/write_inquiry, 1420px 화면):
     입력칸 높이 45px · 줄 간격 21px · 라벨 칸 122px · 문의내용 99px

   ⭐ 문의내용 높이는 **99px 의 2.5배 = 248px**(고객이 「A x 2.5」로 지정한 그 값이다).

   ⚠️ 팝업(`.prime-inquiry--quick`)은 좁아서 예전 모양(라벨 감춤 · 한 칸 이메일)을
      그대로 쓴다. 그래서 이 블록은 전부 `:not(.prime-inquiry--quick)` 으로 좁혔다.
   ⚠️ 좁은 화면은 라벨을 위로 올린 예전 모양이 낫다 — 이 블록은 48rem 이상에서만 돈다
      (모바일 모습은 3차 M-5 에서 따로 정한다). */
@media (min-width: 48rem) {
    .prime-inquiry:not(.prime-inquiry--quick) .prime-inquiry__grid {
        gap: 1.3125rem 1.875rem;
    }

    /* 라벨을 칸 **왼쪽**에 둔다(designart 와 같은 가로 배치). */
    .prime-inquiry:not(.prime-inquiry--quick) .prime-inquiry__field {
        display: grid;
        grid-template-columns: 7.625rem minmax(0, 1fr);
        align-items: center;
    }

    .prime-inquiry:not(.prime-inquiry--quick) .prime-inquiry__field label {
        margin-bottom: 0;
    }

    /* 한 줄짜리 칸의 높이를 45px 로 못박는다(designart 실측값).
       ⛔ 안 박으면 **고르기 칸만 4px 낮아** 같은 줄의 왼쪽·오른쪽이 어긋난다
          (2026-08-24 실측: 고르기 48px vs 입력칸 52px). 브라우저가 select 와 input 의
          기본 높이를 다르게 계산하기 때문이라, 값을 직접 주는 것 말고는 맞출 방법이 없다.
       ⚠️ textarea 는 제외한다 — 위에서 따로 248px 을 준다. */
    /* ⚠️ 파일 고르기 칸은 제외한다 — 높이를 못박으면 브라우저가 그리는 「파일 선택」
          단추가 잘린다. 그 칸은 아래 `.prime-inquiry__file` 에서 따로 다룬다. */
    .prime-inquiry:not(.prime-inquiry--quick) .prime-inquiry__field input:not([type="file"]),
    .prime-inquiry:not(.prime-inquiry--quick) .prime-inquiry__field select {
        height: 2.8125rem;
        padding-block: 0;
    }

    /* 여러 줄 칸(문의내용)은 라벨을 위쪽에 맞춘다 — 가운데에 두면 칸이 커질수록 떠 보인다. */
    .prime-inquiry:not(.prime-inquiry--quick) .prime-inquiry__field--wide {
        align-items: start;
    }

    .prime-inquiry:not(.prime-inquiry--quick) .prime-inquiry__field--wide > label {
        padding-top: 0.75rem;
    }

    .prime-inquiry:not(.prime-inquiry--quick) .prime-inquiry__field--wide textarea {
        height: 15.5rem;
    }

}

/* ── 연락처 · 이메일 · 파일첨부 묶음 (3차 PC-8 · M-5) ─────────────────────────
   ⛔ 이 규칙들은 **넓은 화면 블록 밖**에 둔다. 예전에는 안에 있어서 휴대폰에서
      연락처 세 칸과 이메일 앞·뒤가 **세로로 쌓였다**(2026-08-24 고객 지적).
      designart 는 모바일에서도 이것들을 한 줄에 둔다.
   ⚠️ 이 묶음은 본문 폼에만 있는 마크업이라 팝업에는 영향이 없다. */

/* 연락처 세 칸 — [   ] - [   ] - [   ] */
.prime-inquiry__phone {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
}

.prime-inquiry__phone-dash {
    color: #999999;
    text-align: center;
}

/* 이메일 — 좁은 화면은 designart 처럼 **두 줄**이다:
   첫 줄 `앞자리 @ 뒷자리`, 둘째 줄에 고르기 칸을 전폭으로. */
.prime-inquiry__email {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
}

.prime-inquiry__email > select {
    grid-column: 1 / -1;
}

.prime-inquiry__email-at {
    color: #666666;
}

/* 파일첨부 — 좁은 화면은 위아래로 쌓는다(designart 모바일과 같은 순서:
   칸 → 안내 문구 → 메일 주소 복사). */
.prime-inquiry__file {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75rem;
}

/* 📌 2026-08-24: 파일 칸이 너무 좁아 **안내 문구까지 사이에 구멍**이 생겼다(고객 지적).
   ⛔ 바깥에 박스를 두르지 않았다 — designart 에도 그런 박스는 없고, 원인은 배치가
      아니라 **칸이 좁아서**였다. designart 처럼 테두리 있는 넓은 칸으로 만들면
      빈틈이 사라진다.
   ⚠️ 안쪽의 「파일 선택」 단추는 브라우저가 그리는 것이라 우리가 모양을 정할 수 없다.
      바깥 칸만 입력칸처럼 보이게 한다 — 자바스크립트를 쓰지 않으므로 스크립트가
      없어도 첨부가 그대로 된다. */
.prime-inquiry__file input[type="file"] {
    width: 100%;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--prime-inquiry-border);
    border-radius: 0.25rem;
    background: #ffffff;
    font-size: 0.875rem;
}

.prime-inquiry__file-note {
    color: #666666;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* 메일 주소 복사 단추. */
.prime-inquiry__copy {
    padding: 0 0.875rem;
    border: 1px solid var(--prime-inquiry-border);
    border-radius: 0.25rem;
    color: #333333;
    background: #ffffff;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 2.375rem;
    white-space: nowrap;
}

.prime-inquiry__copy:hover:not(:disabled) {
    border-color: var(--prime-color-accent);
    color: var(--prime-color-accent);
}

.prime-inquiry__copy:disabled {
    color: var(--prime-color-accent);
    cursor: default;
}

/* ── 넓은 화면에서만 달라지는 부분 ── */
@media (min-width: 48rem) {
    /* 이메일 고르기 칸이 같은 줄로 올라온다(네 칸 한 줄). */
    .prime-inquiry__email {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr);
    }

    .prime-inquiry__email > select {
        grid-column: auto;
    }

    /* 파일첨부는 한 줄로 눕는다 — 칸 · 안내 문구 · 복사 단추(오른쪽 끝). */
    .prime-inquiry__file {
        align-items: center;
        flex-direction: row;
        gap: 0.5rem 1rem;
    }

    .prime-inquiry__file input[type="file"] {
        width: auto;
        flex: 0 1 20rem;
    }

    .prime-inquiry__file-note {
        flex: 1 1 20rem;
    }

    .prime-inquiry__copy {
        margin-left: auto;
    }
}

.prime-inquiry input:focus-visible,
.prime-inquiry select:focus-visible,
.prime-inquiry textarea:focus-visible {
    outline: 2px solid var(--prime-color-accent);
    outline-offset: 1px;
}

/* 자동 프로그램 감지용. 사람에게는 보이지 않지만 화면 낭독기에서도 건너뛴다. */
.prime-inquiry__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.prime-inquiry__errors {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--prime-color-accent);
    border-radius: 0.25rem;
    color: var(--prime-color-accent);
    background: #fdf2f3;
}

.prime-inquiry__errors p {
    margin: 0 0 0.5rem;
    font-weight: 700;
}

.prime-inquiry__errors ul {
    padding-left: 1.25rem;
    margin: 0;
}

.prime-inquiry__consent {
    padding: 1.5625rem 1.875rem;
    margin: 2.5rem 0 0;
    border: 1px solid var(--prime-color-border);
    border-radius: 0.5rem;
    color: #555555;
    background: var(--prime-color-surface);
}

/* 본문 폼의 동의 띠 — 체크줄과 「자세히보기」를 한 줄로 가운데에 둔다.
   ⚠️ 팝업은 좁아서 예전처럼 왼쪽 정렬 한 줄을 그대로 쓴다. */
.prime-inquiry:not(.prime-inquiry--quick) .prime-inquiry__consent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 1.125rem 1.25rem;
    border-color: transparent;
    gap: 0.5rem 1.25rem;
}


/* 📌 2026-08-24 고객 요청: 동의 영역을 **약식 한 줄**로(designart 와 같은 모양).
   예전에는 위에 항목 표가 있어 체크줄을 구분선으로 떼어 놓았는데, 표가 사라졌으므로
   구분선과 위 여백도 함께 걷어냈다. */
.prime-inquiry__consent-check {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: #333333;
    cursor: pointer;
    font-weight: 500;
}

/* 「자세히보기 >」 — 동의 문구 오른쪽에 옅게 둔다. */
.prime-inquiry__consent-more {
    color: #666666;
    font-size: 0.875rem;
    text-decoration: none;
}

.prime-inquiry__consent-more:hover,
.prime-inquiry__consent-more:focus-visible {
    color: var(--prime-color-accent);
    text-decoration: underline;
}

.prime-inquiry__consent-check input {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--prime-color-accent);
}

.prime-inquiry__challenge {
    margin-top: 1.5rem;
}

.prime-inquiry__submit {
    margin: 1.875rem 0 0;
    text-align: center;
}

.prime-inquiry__done {
    padding: 3.125rem 1.25rem;
    border: 1px solid var(--prime-color-border);
    border-radius: 0.625rem;
    background: var(--prime-color-surface);
    text-align: center;
    word-break: keep-all;
}

.prime-inquiry__done h2 {
    margin: 0 0 0.75rem;
    font-size: 1.5rem;
}

.prime-inquiry__done strong {
    color: var(--prime-color-accent);
}

@media (max-width: 52rem) {
    .prime-inquiry-page__lead {
        margin-bottom: 1.5rem;
        font-size: 0.9375rem;
    }

    .prime-inquiry__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .prime-inquiry__done {
        padding: 2rem 1rem;
    }
}

.prime-policy {
    color: #888888;
    font-size: 1rem;
    line-height: 1.6;
    word-break: keep-all;
}

.prime-policy p {
    margin: 0 0 1em;
}

.prime-policy h2 {
    margin: 3.125rem 0 1rem;
    color: #333333;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.4;
}

/* 조문은 묶음 제목(01 총칙 …) 아래 단계다. */
.prime-policy h3 {
    margin: 2rem 0 0.625rem;
    color: #333333;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.5;
}

.prime-policy > :first-child {
    margin-top: 0;
}

/* 번호가 본문에 이미 들어 있어 목록 표식은 쓰지 않는다. */
.prime-policy__toc,
.prime-policy__list {
    padding: 0;
    margin: 0 0 1em;
    list-style: none;
}

.prime-policy__toc li + li,
.prime-policy__list li + li {
    margin-top: 0.375rem;
}

.prime-policy__list li {
    position: relative;
    padding-left: 0.9375rem;
}

.prime-policy__list li::before {
    position: absolute;
    top: 0.5rem;
    left: 0;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: currentColor;
    content: '';
}

@media (max-width: 52rem) {
    .prime-policy {
        font-size: 0.875rem;
    }

    .prime-policy h2 {
        margin-top: 2.25rem;
        font-size: 1.1875rem;
    }

    .prime-policy h3 {
        margin-top: 1.5rem;
        font-size: 1rem;
    }
}

.prime-payment__group {
    display: grid;
    grid-template-columns: minmax(0, 16.25rem) minmax(0, 1fr);
}

.prime-payment__group + .prime-payment__group {
    margin-top: 5.625rem;
}

.prime-payment__title {
    padding-top: 1.125rem;
    margin: 0;
    color: #333333;
    font-size: 1.875rem;
    font-weight: 700;
    word-break: keep-all;
}

.prime-table {
    width: 100%;
    border-top: 2px solid #333333;
    border-collapse: collapse;
    table-layout: fixed;
}

.prime-table th,
.prime-table td {
    padding: 1.5625rem 1.875rem;
    border-right: 1px solid var(--prime-color-border);
    border-bottom: 1px solid var(--prime-color-border);
    color: #333333;
    font-size: 1.125rem;
    letter-spacing: -0.03em;
    line-height: 1.5;
    text-align: center;
    word-break: keep-all;
}

.prime-table th {
    width: 12.5rem;
    background: var(--prime-color-surface);
    font-weight: 400;
}

.prime-table td {
    text-align: left;
}

.prime-table th:last-child,
.prime-table td:last-child {
    border-right: 0;
}

.prime-table td p {
    margin: 0;
}

.prime-table td strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--prime-color-accent);
    font-weight: 400;
}

.prime-table td span {
    color: #666666;
}

.prime-table__list {
    padding: 0;
    margin: 0.625rem 0 0;
    list-style: none;
}

.prime-table__list li {
    position: relative;
    padding-left: 0.75rem;
    color: #666666;
    letter-spacing: -0.02em;
}

.prime-table__list li::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '-';
}

@media (max-width: 52rem) {
    .prime-payment__group {
        grid-template-columns: 1fr;
    }

    .prime-payment__group + .prime-payment__group {
        margin-top: 3.125rem;
    }

    .prime-payment__title {
        padding-top: 0;
        padding-bottom: 0.75rem;
        font-size: 1.3125rem;
    }

    .prime-table th,
    .prime-table td {
        padding: 1rem 0.625rem;
        font-size: 0.8125rem;
        line-height: 1.4;
    }

    .prime-table th {
        width: 6.25rem;
    }
}

.prime-area {
    display: grid;
    gap: 2.8125rem;
}

.prime-area__item {
    display: grid;
    grid-template-columns: minmax(0, 33.75rem) minmax(0, 1fr);
    gap: 3.75rem;
    align-items: start;
}

.prime-area__cover {
    position: relative;
    height: 20rem;
    overflow: hidden;
    border-radius: 0.625rem;
    background: #dddddd;
}

.prime-area__cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.prime-area__cover h2 {
    position: relative;
    display: grid;
    height: 100%;
    padding: 0 1.25rem;
    margin: 0;
    place-content: center;
    color: #ffffff;
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    text-align: center;
    word-break: keep-all;
}

.prime-area__detail dl {
    display: grid;
    grid-template-columns: minmax(0, 13.125rem) minmax(0, 1fr);
}

.prime-area__detail dl + dl {
    margin-top: 0.625rem;
}

.prime-area__detail dt,
.prime-area__detail dd {
    padding: 2.1875rem 0;
    border-top: 1px solid var(--prime-color-border);
}

.prime-area__detail dt {
    border-top-color: var(--prime-color-accent);
    color: #333333;
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.3;
    word-break: keep-all;
}

.prime-area__detail dd {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    margin: 0;
}

.prime-area__detail ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.prime-area__detail li {
    position: relative;
    padding-left: 0.9375rem;
    color: #666666;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
    line-height: 1.5;
    word-break: keep-all;
}

.prime-area__detail li + li {
    margin-top: 0.75rem;
}

.prime-area__detail li::before {
    position: absolute;
    top: 0.625rem;
    left: 0;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: #333333;
    content: '';
}

@media (max-width: 52rem) {
    .prime-area__item {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .prime-area__cover {
        height: 11.25rem;
        border-radius: 0.5rem;
    }

    .prime-area__cover h2 {
        font-size: 1.75rem;
    }

    .prime-area__detail dl {
        grid-template-columns: minmax(0, 6.25rem) minmax(0, 1fr);
    }

    .prime-area__detail dt,
    .prime-area__detail dd {
        padding: 1.25rem 0;
    }

    .prime-area__detail dt {
        font-size: 1.25rem;
    }

    .prime-area__detail dd {
        padding-right: 0;
        padding-left: 0.9375rem;
    }

    .prime-area__detail li {
        padding-left: 0.5rem;
        font-size: 0.8125rem;
        line-height: 1.4;
    }

    .prime-area__detail li + li {
        margin-top: 0.5625rem;
    }

    .prime-area__detail li::before {
        top: 0.4375rem;
        width: 0.1875rem;
        height: 0.1875rem;
    }
}

.prime-location__map {
    position: relative;
    height: 31.25rem;
    overflow: hidden;
    border: 1px solid #e1e1e1;
    border-radius: 0.625rem;
    background: #f5f5f5;
}

.prime-location__map-canvas {
    width: 100%;
    height: 100%;
}

.prime-location__map-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.prime-location__company {
    display: flex;
    align-items: center;
    margin-top: 2.5rem;
    justify-content: space-between;
}

/* 오시는 길 로고. 2026-08-26 에 두 번 바뀌었다 —
     ① 머리말 로고(prime-logo-header.webp 355x31, 심볼 포함)로 교체
     ② 고객이 전용 로고를 새로 주어 **prime-logo-location.webp** 로 교체(최종)
   ②는 심볼 없는 워드마크라 가로가 훨씬 길다(802x60 = 13.4:1). 그래서 크기 규칙도
   머리말 것을 쓰지 않고 **이 화면이 원래 쓰던 값**으로 되돌렸다 — 넓은 화면 401px 은
   맨 처음 로고(401x28)와 같은 폭이라 주소 줄과의 균형이 그대로 유지된다. */
.prime-location__address img {
    width: min(100%, 25.0625rem);
    height: auto;
}

.prime-location__address address {
    margin-top: 1.5625rem;
    color: #333333;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.5;
    white-space: nowrap;
}

.prime-location__contacts {
    display: flex;
    gap: 2.5rem;
    padding: 0;
    margin: 0;
}

.prime-location__contact {
    display: flex;
    align-items: center;
}

.prime-location__icon {
    display: grid;
    width: 5rem;
    height: 5rem;
    flex: 0 0 5rem;
    border-radius: 50%;
    place-items: center;
    background: #f5f5f5;
}

.prime-location__icon img {
    width: auto;
    max-width: 3rem;
    height: auto;
    max-height: 2.875rem;
}

.prime-location__contact-copy {
    padding-left: 1.875rem;
}

.prime-location__contact dt,
.prime-location__contact dd {
    margin: 0;
    font-weight: 500;
    letter-spacing: -0.03em;
}

.prime-location__contact dt {
    color: #111111;
    font-size: 1.25rem;
}

.prime-location__contact dd {
    margin-top: 0.625rem;
    color: #666666;
    font-size: 1.125rem;
}

.prime-location__contact a {
    color: inherit;
    text-decoration: none;
}

.prime-location__traffic {
    margin-top: 3.4375rem;
}

.prime-location__traffic ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.875rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.prime-location__traffic li {
    padding: 2.5rem 1.25rem;
    border: 1px solid #dddddd;
    border-radius: 0.625rem;
    text-align: center;
}

.prime-location__traffic .prime-location__icon {
    width: 6.25rem;
    height: 6.25rem;
    margin-inline: auto;
}

.prime-location__traffic h3 {
    margin: 0.9375rem 0 0;
    color: #111111;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.03em;
}

.prime-location__traffic p {
    margin: 0.625rem 0 0;
    color: #666666;
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.4;
    word-break: keep-all;
}

.prime-location__traffic p span {
    display: block;
}

@media (max-width: 52rem) {
    .prime-location__map {
        height: 15rem;
        border-radius: 0.5rem;
    }

    .prime-location__company {
        flex-wrap: wrap;
        margin-top: 2rem;
    }

    .prime-location__address,
    .prime-location__contacts {
        width: 100%;
    }

    /* 최종 로고가 다시 워드마크(심볼 없는 글자)라, 좁은 화면도 이 화면이 원래 쓰던
       **높이 기준**으로 되돌렸다. 가로로 긴 글자는 높이를 정해야 읽히는 크기가 일정하다
       (심볼이 붙어 세로가 길던 머리말 로고 때만 폭 기준이 맞았다). */
    .prime-location__address img {
        width: auto;
        max-width: 100%;
        height: 1.125rem;
    }

    .prime-location__address address {
        margin-top: 1rem;
        font-size: 0.9375rem;
        line-height: 1.4;
        white-space: normal;
    }

    .prime-location__contacts {
        margin-top: 1.875rem;
        justify-content: space-between;
    }

    .prime-location__icon {
        width: 4.375rem;
        height: 4.375rem;
        flex-basis: 4.375rem;
    }

    .prime-location__icon img {
        max-width: 2rem;
        max-height: 2rem;
    }

    .prime-location__contact-copy {
        padding-left: 0.625rem;
    }

    .prime-location__contact dt {
        font-size: 1rem;
    }

    .prime-location__contact dd {
        margin-top: 0.375rem;
        font-size: 0.8125rem;
    }

    .prime-location__traffic {
        margin-top: 2.875rem;
    }

    .prime-location__traffic ul {
        grid-template-columns: 1fr;
        gap: 0.9375rem;
    }

    .prime-location__traffic li {
        display: flex;
        align-items: center;
        padding: 1.5rem 0.9375rem;
        border-radius: 0.5rem;
        text-align: left;
    }

    .prime-location__traffic .prime-location__icon {
        width: 4.375rem;
        height: 4.375rem;
        flex-basis: 4.375rem;
        margin: 0;
    }

    .prime-location__traffic li > div {
        padding-left: 0.9375rem;
    }

    .prime-location__traffic h3 {
        margin: 0 0 0.5rem;
        font-size: 1rem;
    }

    .prime-location__traffic p {
        margin: 0;
        font-size: 0.8125rem;
    }
}

.subpage-frame {
    position: relative;
    z-index: 2;
}

.subpage-hero {
    position: relative;
    display: grid;
    height: 20rem;
    overflow: hidden;
    place-items: center;
    color: #ffffff;
    background: #333333;
}

.subpage-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.subpage-hero__inner {
    position: relative;
    z-index: 1;
    width: min(100% - var(--prime-gutter) * 2, var(--prime-wide-width));
    margin-inline: auto;
}

.subpage-hero h1,
.subpage-hero h2 {
    margin: 0;
    color: #ffffff;
    font-size: 3.125rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    text-align: center;
}

.subpage-breadcrumb {
    position: relative;
    z-index: 5;
    height: 3.4375rem;
    border-bottom: 1px solid #dddddd;
    background: #ffffff;
}

.subpage-breadcrumb__inner {
    display: flex;
    width: min(100% - var(--prime-gutter) * 2, var(--prime-wide-width));
    height: 100%;
    margin-inline: auto;
}

.subpage-breadcrumb__home {
    display: grid;
    width: 3.4375rem;
    flex: 0 0 3.4375rem;
    border-inline: 1px solid #dddddd;
    place-items: center;
    color: var(--prime-color-accent);
}

.subpage-breadcrumb__home:hover,
.subpage-breadcrumb__home:focus-visible {
    background: #f8f8f8;
}

.subpage-breadcrumb__menu {
    position: relative;
    width: 17.5rem;
    flex: 0 1 17.5rem;
}

.subpage-breadcrumb__menu summary {
    position: relative;
    display: flex;
    height: 3.4375rem;
    align-items: center;
    padding: 0 3rem 0 1.5625rem;
    border-right: 1px solid #dddddd;
    color: #666666;
    cursor: pointer;
    font-size: 1.125rem;
    letter-spacing: -0.03em;
    list-style: none;
}

.subpage-breadcrumb__menu summary::-webkit-details-marker {
    display: none;
}

.subpage-breadcrumb__menu summary::after {
    position: absolute;
    top: 1.1875rem;
    right: 1.5625rem;
    width: 0.625rem;
    height: 0.625rem;
    border: solid #aaaaaa;
    border-width: 1px 1px 0 0;
    content: "";
    transform: rotate(135deg);
}

.subpage-breadcrumb__menu[open] summary::after {
    top: 1.5625rem;
    transform: rotate(-45deg);
}

.subpage-breadcrumb__menu--current summary {
    color: var(--prime-color-accent);
    font-weight: 500;
}

.subpage-breadcrumb__menu--current summary::after {
    border-color: var(--prime-color-accent);
}

.subpage-breadcrumb__menu ul {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    padding: 0.9375rem 0;
    margin: 0;
    border: 1px solid #dddddd;
    border-top: 0;
    background: #ffffff;
    box-shadow: 0 0.75rem 2rem rgb(20 23 31 / 8%);
    list-style: none;
}

.subpage-breadcrumb__menu li {
    margin: 0;
}

.subpage-breadcrumb__menu a {
    display: block;
    padding: 0.46875rem 1.5625rem;
    color: #555555;
    font-size: 1rem;
    text-decoration: none;
}

.subpage-breadcrumb__menu a:hover,
.subpage-breadcrumb__menu a:focus-visible {
    color: var(--prime-color-accent);
    background: #f8f8f8;
}

.subpage-frame__decoration {
    position: absolute;
    z-index: 0;
    top: 100%;
    right: 0;
    width: 28.1875rem;
    height: 8.75rem;
    background: url("../images/subpage/sub-content-decoration.webp") no-repeat center / cover;
    pointer-events: none;
}

/* 목록 게시판에서는 아래로 늘어진 부분을 잘라 낸다(고객 요청 2026-08-21).
   그 부분이 모니터 폭에 따라 오른쪽 위의 보기 전환 버튼·검색을 덮었다.

   ⚠️ 새 이미지를 만들지 않았다. 그림은 451x140 인데 늘어진 쐐기는 아래 55px 뿐이다.
      그림을 상자 폭에 맞춰 그리고(100% auto) 상자 높이를 451:85 비율로 두면
      나머지가 그대로 잘린다. 요청 수도 바이트도 늘지 않는다.

   ⚠️ 클래스를 두 번 겹쳐 쓴 이유: 아래 반응형 규칙들이 이 규칙보다 뒤에 나오면서
      width·height 를 다시 정한다. 폭은 그대로 따르고 높이만 이기게 하려면
      순서가 아니라 우선순위로 눌러야 한다. */
.subpage-frame__decoration.subpage-frame__decoration--flat {
    height: auto;
    aspect-ratio: 451 / 85;
    background-position: top right;
    background-size: 100% auto;
}

.subpage-main {
    position: relative;
    z-index: 1;
}

.faq-archive {
    padding-block: clamp(2.5rem, 7vw, 6.25rem);
}

.notice-archive {
    padding-block: clamp(2.5rem, 7vw, 6.25rem);
}

.faq-search {
    display: grid;
    grid-template-columns: 10rem minmax(15rem, 20rem) 3.4375rem;
    justify-content: end;
    margin-bottom: 2.625rem;
}

.faq-search select,
.faq-search input,
.faq-search button {
    min-width: 0;
    height: 3.4375rem;
    border-radius: 0;
    font: inherit;
}

.faq-search select,
.faq-search input {
    border: 1px solid #dddddd;
    color: #666666;
    background-color: #ffffff;
    font-size: 1.125rem;
}

.faq-search select {
    padding: 0 1.125rem;
}

.faq-search input {
    padding: 0 1.0625rem;
    margin-left: 0.625rem;
}

.faq-search input::placeholder {
    color: #b3b3b3;
    opacity: 1;
}

.faq-search input::-webkit-search-cancel-button {
    display: none;
}

/* 초점 표시는 사이트 전체와 같은 민트색 외곽선으로 통일한다.
   예전에는 여기만 `outline: none` + 옅은 그림자(빨강 15%)라 초점이 어디 있는지
   알아보기 어려웠다(2026-08-19 키보드 검수에서 발견). 테두리 색 변화는 그대로 두어
   마우스 사용자가 보던 모습은 바뀌지 않는다. */
.faq-search input:focus,
.faq-search select:focus-visible {
    border-color: #777777;
}

.faq-search input:focus-visible,
.faq-search select:focus-visible {
    outline: 3px solid var(--prime-color-accent);
    outline-offset: 3px;
}

.faq-search button {
    position: relative;
    display: grid;
    border: 1px solid var(--prime-color-accent);
    place-items: center;
    color: #ffffff;
    background: var(--prime-color-accent);
    cursor: pointer;
}

.faq-search button:hover {
    background: var(--prime-color-accent-bright);
}

.faq-search button:focus-visible,
.faq-question:focus-visible {
    outline: 3px solid rgb(215 45 59 / 35%);
    outline-offset: 3px;
}

.faq-search button > span {
    position: relative;
    width: 1.375rem;
    height: 1.375rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

.faq-search button > span::after {
    position: absolute;
    right: -0.4rem;
    bottom: -0.25rem;
    width: 0.625rem;
    height: 2px;
    background: #ffffff;
    content: "";
    transform: rotate(48deg);
    transform-origin: left center;
}

.faq-box {
    width: 100%;
}

/* ── 분류별 묶음 (고객 요청 2026-08-22 — bizcard.kr/faq.php 처럼 한 화면에) ──
   상자 안쪽(질문 줄·펼침)은 예전 그대로다. 바깥에 분류 이름만 얹는다. */
/* ───── FAQ: 분류 바로가기 ─────
   분류가 6개라 아래쪽 분류는 스크롤을 한참 내려야 나온다. 맨 위에 분류를 늘어놓고
   누르면 그 자리로 보낸다(고객 요청 2026-08-22).

   ⛔ 여기까지 세 판을 만들었다(2026-08-22). ① 연회색 알약 → 「어느 사이트에나 있는 UI」,
      ② 검정 인덱스 바 → 다시 검토, ③ 지금의 **번호 격자**로 확정.
   ⭐ 번호(01~06)만 빨강, 이름은 검정. 칸은 흰 바탕에 1px 선으로만 나눈다 —
      선 색·글자 색 모두 사이트가 이미 쓰는 값이고 새 색은 없다.
   ⛔ 분류별 글 수는 **넣지 않는다**(고객 결정 2026-08-22). 숫자가 둘(번호·글 수) 있으면
      어느 쪽이 무엇인지 헷갈린다.
   ⛔ 「지금 보고 있는 분류」를 표시하는 기능도 넣지 않는다(고객 지적 2026-08-22).
      이 바는 화면에 붙어 있지 않아 스크롤로 분류가 바뀔 때는 이미 화면 밖이다 —
      즉 색이 바뀌어도 볼 사람이 없다. */
.faq-jump {
    margin-bottom: 2.25rem;
}

/* 칸 사이 1px 선은 배경색이 gap 으로 비쳐 보이는 방식이다. 칸마다 테두리를 주면
   맞닿는 자리가 2px 로 두꺼워진다. */
.faq-jump__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
    margin: 0;
    border: 1px solid var(--prime-color-border);
    background: var(--prime-color-border);
    gap: 1px;
    list-style: none;
}

.faq-jump__link {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.125rem;
    color: var(--prime-color-ink);
    background: #ffffff;
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
}

.faq-jump__num {
    flex: none;
    color: var(--prime-color-accent);
    font-size: 0.875rem;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.faq-jump__name {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.faq-jump__link:hover {
    background: var(--prime-color-surface);
}

/* 초점 테두리를 칸 안쪽에 그린다. 바깥쪽에 그리면 옆 칸을 덮는다. */
.faq-jump__link:focus-visible {
    outline: 3px solid var(--prime-color-accent);
    outline-offset: -3px;
}

/* 768px 아래에서는 세 칸이면 「연구설계·통계분석」 같은 이름이 부서진다. 두 칸으로. */
@media (max-width: 47.99rem) {
    .faq-jump__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* 머리말이 화면 위에 붙어 있어(sticky), 그냥 이동하면 분류 제목이 머리말 뒤로 숨는다.
   그만큼 미리 띄워 둔다. 값은 머리말 높이다 — 좁은 화면 4.25rem, 1200px 이상 5.4375+4.375rem. */
.faq-group {
    scroll-margin-top: 5.5rem;
}

/* 초점을 받기 위한 tabindex="-1" 이지 조작하는 요소가 아니다. 화면 전체에 테두리를
   두르면 오히려 고장난 것처럼 보인다 — 초점은 바로 다음 Tab 에서 첫 질문으로 넘어간다. */
.faq-group:focus {
    outline: none;
}

@media (min-width: 75rem) {
    .faq-group {
        scroll-margin-top: 11rem;
    }
}

.faq-group + .faq-group {
    margin-top: 2.5rem;
}

.faq-group__title {
    margin: 0 0 0.875rem;
    color: #222222;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.3;
}

@media (max-width: 40rem) {
    .faq-jump {
        margin-bottom: 1.75rem;
    }

    .faq-jump__link {
        gap: 0.5rem;
        padding: 0.875rem 0.75rem;
    }

    .faq-jump__name {
        font-size: 0.9375rem;
    }

    .faq-group + .faq-group {
        margin-top: 1.75rem;
    }

    .faq-group__title {
        font-size: 1.1875rem;
    }
}

.faq-list {
    padding: 0;
    margin: 0;
    border-top: 1px solid #333333;
    list-style: none;
}

.faq-item {
    margin: 0;
    border-bottom: 1px solid #dddddd;
}

.faq-question-heading {
    margin: 0;
    font: inherit;
}

.faq-question {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 4.3125rem;
    grid-template-columns: 2rem minmax(0, 1fr) 1rem;
    gap: 1.25rem;
    align-items: center;
    padding: 1.125rem 2.5rem;
    border: 0;
    color: #333333;
    background: #ffffff;
    cursor: pointer;
    text-align: left;
}

.faq-question__mark {
    display: grid;
    width: 2rem;
    height: 2rem;
    border: 1px solid #cccccc;
    border-radius: 50%;
    place-items: center;
    color: #ffffff;
    background: #cccccc;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
}

.faq-question__title {
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.55;
    word-break: keep-all;
}

.faq-question__arrow {
    width: 0.5rem;
    height: 0.5rem;
    justify-self: end;
    border: solid #888888;
    border-width: 2px 2px 0 0;
    transform: translateY(-25%) rotate(135deg);
}

.faq-question[aria-expanded="true"] .faq-question__mark {
    border-color: var(--prime-color-accent);
    background: var(--prime-color-accent);
}

.faq-question[aria-expanded="true"] {
    border-bottom: 1px solid #dddddd;
}

.faq-question[aria-expanded="true"] .faq-question__title {
    font-weight: 600;
}

.faq-question[aria-expanded="true"] .faq-question__arrow {
    border-color: #333333;
    transform: translateY(25%) rotate(-45deg);
}

.faq-answer {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.8125rem 2.5rem 1.3125rem;
    background: #f8f8f8;
}

.faq-answer[hidden] {
    display: none;
}

.faq-answer__mark {
    color: var(--prime-color-accent);
    font-size: 1.25rem;
    font-weight: 500;
    text-align: center;
}

.faq-answer__content {
    padding-top: 0.25rem;
    color: #333333;
    font-size: 1rem;
    letter-spacing: -0.025em;
    line-height: 1.8;
    word-break: keep-all;
}

.faq-answer__content > :first-child {
    margin-top: 0;
}

.faq-answer__content > :last-child {
    margin-bottom: 0;
}

.faq-answer__content p {
    margin-block: 0 1.25rem;
}

.faq-pagination {
    margin-top: 2.5rem;
}

.faq-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    justify-content: center;
}

.faq-pagination .page-numbers {
    display: grid;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #dddddd;
    place-items: center;
    color: #555555;
    background: #ffffff;
    text-decoration: none;
}

.faq-pagination .page-numbers.current {
    border-color: var(--prime-color-accent);
    color: #ffffff;
    background: var(--prime-color-accent);
}

.faq-empty {
    padding: 4rem 1rem;
    border-block: 1px solid #dddddd;
    text-align: center;
}

/* 가로 스크롤만 허용한다. overflow-x 만 지정하면 세로도 auto 로 계산돼
   내용이 조금만 넘쳐도 세로 스크롤바가 생긴다. */
.notice-board {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.notice-board__table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid #333333;
    table-layout: fixed;
    text-align: center;
}

.notice-board__col-number {
    width: 6.25rem;
}

.notice-board__col-attachment {
    width: 6.25rem;
}

.notice-board__col-author {
    width: 6.875rem;
}

.notice-board__col-date {
    width: 9.375rem;
}

.notice-board__col-views {
    width: 5.625rem;
}

.notice-board__table th,
.notice-board__table td {
    height: 4.375rem;
    padding: 0.3125rem 0.625rem;
    border-bottom: 1px solid #dddddd;
    vertical-align: middle;
}

.notice-board__table th {
    color: #333333;
    background: #f5f5f5;
    font-size: 1.125rem;
    font-weight: 500;
}

.notice-board__table td {
    color: #999999;
    font-size: 1.125rem;
}

.notice-board__number {
    color: #666666 !important;
}

/* `.notice-board__fixed-label`(붉은 「공지」 알약)은 2026-08-26 고객 요청으로 걷어냈다.
   공지사항 게시판은 전부가 공지라 뱃지가 같은 말을 반복하고 있었다.
   마크업이 사라졌으므로 규칙도 함께 지웠다 — 남겨 두면 다음 사람이 찾다가 헛수고한다. */

.notice-board__title {
    padding-inline: 1.25rem !important;
    text-align: left;
}

.notice-board__title > a {
    display: block;
    overflow: hidden;
    color: #333333;
    font-weight: 400;
    text-decoration: none;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.notice-board__title > a:hover,
.notice-board__title > a:focus-visible {
    color: var(--prime-color-accent);
}

.notice-board__attachment svg {
    display: block;
    margin-inline: auto;
    color: #777777;
}

.notice-board__mobile-meta {
    display: none;
}

.notice-board__empty {
    height: 10rem !important;
    color: #666666 !important;
    text-align: center;
}

.board-single {
    padding-block: clamp(2.5rem, 7vw, 6.25rem);
}

.board-single__page-header {
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
    text-align: center;
}

.board-single__page-header h1 {
    margin: 0;
    color: #222222;
    font-size: clamp(2.25rem, 4vw, 2.625rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.2;
}

.board-single__post-header {
    padding: 1.75rem 1.875rem;
    border-top: 2px solid #333333;
    border-bottom: 1px solid #dddddd;
    background: #f5f5f5;
}

.board-single__post-header h2 {
    margin: 0;
    color: #333333;
    font-size: 1.625rem;
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.5;
    word-break: keep-all;
}

.board-single__meta {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0.625rem 0 0;
}

.board-single__meta > div {
    display: flex;
    align-items: center;
    color: #888888;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
}

.board-single__meta > div + div {
    position: relative;
    padding-left: 1.875rem;
    margin-left: 1.875rem;
}

.board-single__meta > div + div::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 0.75rem;
    background: #dddddd;
    content: "";
    transform: translateY(-50%);
}

.board-single__meta dt,
.board-single__meta dd {
    margin: 0;
}

.board-single__meta dt {
    color: #555555;
}

.board-single__meta dd {
    margin-left: 0.4375rem;
}

.board-single__content {
    min-height: 25rem;
    padding: 1.875rem 1.875rem 5rem;
    border-bottom: 1px solid #dddddd;
    color: #666666;
    font-size: 1rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.board-single__content > :first-child {
    margin-top: 0;
}

.board-single__content > :last-child {
    margin-bottom: 0;
}

.board-single__actions {
    display: flex;
    margin-top: 3.125rem;
    justify-content: center;
}

.board-single__actions a {
    display: grid;
    width: 9.5625rem;
    min-height: 3.25rem;
    border-radius: 0.5rem;
    place-items: center;
    color: #ffffff;
    background: var(--prime-color-accent);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.board-single__actions a:hover,
.board-single__actions a:focus-visible {
    background: #bd1f2d;
}

@media (max-width: 40rem) {
    .prime-profile__visual img {
        min-height: 11.25rem;
        aspect-ratio: auto;
    }

    .prime-profile__section {
        grid-template-columns: 1fr;
    }

    .prime-profile__section h2 {
        padding: 1.5rem 0 0.75rem;
    }

    .prime-profile__section ul {
        padding: 0 0 1.5rem;
        border-top: 0;
    }

    .faq-search {
        grid-template-columns: minmax(0, 1fr) 2.75rem;
        margin-bottom: 1.875rem;
    }

    .faq-search select {
        grid-column: 1 / -1;
        height: 2.75rem;
        padding-inline: 0.75rem;
        font-size: 0.9375rem;
    }

    .faq-search input {
        height: 2.75rem;
        padding-inline: 0.75rem;
        margin: 0.625rem 0 0;
        font-size: 0.9375rem;
    }

    .faq-search button {
        width: 2.75rem;
        height: 2.75rem;
        margin-top: 0.625rem;
    }

    .faq-search button > span {
        width: 1.125rem;
        height: 1.125rem;
    }

    .faq-question {
        min-height: 3.1875rem;
        grid-template-columns: 1.625rem minmax(0, 1fr) 0.75rem;
        gap: 0.9375rem;
        padding: 0.75rem 0.9375rem;
    }

    .faq-question__mark {
        width: 1.625rem;
        height: 1.625rem;
        font-size: 0.8125rem;
    }

    .faq-question__title {
        font-size: 1rem;
    }

    .faq-question__arrow {
        width: 0.375rem;
        height: 0.375rem;
    }

    .faq-answer {
        grid-template-columns: 1.625rem minmax(0, 1fr);
        gap: 0.9375rem;
        padding: 0.9375rem;
    }

    .faq-answer__mark {
        font-size: 1.125rem;
    }

    .faq-answer__content {
        padding-top: 0.125rem;
        font-size: 0.875rem;
        line-height: 1.7;
    }

    .notice-board {
        overflow: visible;
    }

    .notice-board__table,
    .notice-board__table tbody,
    .notice-board__table tr,
    .notice-board__table td {
        display: block;
        width: 100%;
    }

    .notice-board__table {
        table-layout: auto;
    }

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

    .notice-board__table tr {
        position: relative;
        min-height: 5rem;
        padding: 1rem 0.75rem 1rem 3.75rem;
        border-bottom: 1px solid #dddddd;
    }

    .notice-board__table td {
        height: auto;
        padding: 0 !important;
        border: 0;
        text-align: left;
    }

    .notice-board__number {
        position: absolute;
        top: 50%;
        left: 0.5rem;
        width: 2.75rem !important;
        color: #777777 !important;
        font-size: 0.9375rem !important;
        text-align: center !important;
        transform: translateY(-50%);
    }

    .notice-board__title > a {
        font-size: 1rem;
        line-height: 1.5;
        white-space: normal;
        word-break: keep-all;
    }

    .notice-board__attachment,
    .notice-board__author,
    .notice-board__date,
    .notice-board__views {
        display: none !important;
    }

    .notice-board__mobile-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.875rem;
        margin-top: 0.375rem;
        color: #999999;
        font-size: 0.8125rem;
        line-height: 1.4;
    }

    .notice-board__empty {
        display: grid !important;
        min-height: 8rem;
        padding: 1rem !important;
        place-items: center;
        text-align: center !important;
    }

    .board-single__page-header {
        margin-bottom: 2.5rem;
    }

    .board-single__post-header {
        padding: 1.25rem 1rem;
    }

    .board-single__post-header h2 {
        font-size: 1.25rem;
    }

    .board-single__meta {
        gap: 0.25rem 0.875rem;
        margin-top: 0.5rem;
    }

    .board-single__meta > div {
        font-size: 0.875rem;
    }

    .board-single__meta > div + div {
        padding-left: 0;
        margin-left: 0;
    }

    .board-single__meta > div + div::before {
        display: none;
    }

    .board-single__content {
        min-height: 17.5rem;
        padding: 1.5rem 1rem 3.5rem;
        font-size: 0.9375rem;
    }

    /* 목록의 카드 사진과 글 화면의 대표 사진 폭이 서로 달라, 목록↔글을 오갈 때
       그림이 튀어 보인다는 지적(고객 2026-08-22 · 모바일 13쪽).
       390px 화면 실측: 목록 356px · 글 324px 로 **32px 차이**였고, 그 32px 은
       본문 상자의 좌우 여백(1rem × 2)이었다.
       → 사진만 그 여백 밖으로 빼내 카드 사진과 같은 폭·같은 위치에 놓는다.
       ⚠️ 글자는 여백 안에 그대로 둔다 — 본문까지 화면 끝에 붙이면 읽기가 나빠진다. */
    .board-single__content .prime-article__thumb {
        margin-inline: -1rem;
    }

    .board-single__actions {
        margin-top: 2.5rem;
    }
}

.site-footer {
    position: relative;
    z-index: 2;
    color: rgb(255 255 255 / 78%);
    background: var(--prime-color-footer);
}

.site-footer__main {
    display: grid;
    /* 2026-08-21 에 2.5 -> 1.75 -> 1.25rem 으로 좁혔던 것을 2026-08-22 고객 요청으로
       원래대로 되돌렸다 — 「너무 따닥붙어 보인다」.
       📌 2026-08-24 고객 요청(3차 PC-5): 위쪽 1.5rem 을 **아래쪽과 같은 2.5rem** 으로.
          고객이 지정한 H 가 바로 이 아래쪽 여백이다 — 띠 위·띠 아래·푸터 위를 여기에 맞췄다.
          이제 위아래가 같으므로 값을 하나로 적는다. 한쪽을 바꾸면 다른 쪽도 같이 본다. */
    gap: 2.5rem;
    padding-block: 2.5rem;
    border-bottom: 1px solid #4d5057;
}

.site-footer__logo {
    width: min(18rem, 80vw);
    height: auto;
}

/* 푸터와 모바일 메뉴 서랍이 같은 배치를 쓴다. 테두리 색만 배경에 맞춰 아래에서 나뉜다. */
.site-footer__social,
.all-menu-dialog__social {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

/* 푸터만 2026-08-21 이전 간격으로 되돌린다(고객 요청 2026-08-22).
   ⚠️ 모바일 서랍(.all-menu-dialog__social)은 8/22 에 고객이 확인한 모습이라 건드리지 않는다. */
.site-footer__social {
    margin-top: 1.5rem;
}

/* SNS 아이콘은 기존 사이트의 **모바일 서랍**에만 있던 것이다.
   넓은 화면의 전체메뉴는 손대지 않은 상태를 유지한다.
   ⚠️ 2026-08-27 — 서랍이 1199px 까지 넓어졌으므로 이 경계도 함께 옮긴다.
      안 옮기면 폴드폰 펼친 화면에서 서랍만 나오고 SNS 줄이 빠져 좁은 화면과 달라진다. */
@media (min-width: 75rem) {
    .all-menu-dialog__social {
        display: none;
    }
}

.all-menu-dialog__social a {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: 1px solid var(--prime-color-border);
    border-radius: 50%;
    transition: border-color 0.2s, background 0.2s;
}

.all-menu-dialog__social a:hover,
.all-menu-dialog__social a:focus-visible {
    border-color: var(--prime-color-charcoal);
}

.site-footer__social a {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 50%;
    transition: border-color 0.2s, background 0.2s;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
    border-color: #ffffff;
    background: rgb(255 255 255 / 10%);
}

.site-footer__social img {
    object-fit: contain;
}

.site-footer__information {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 예금주는 계좌번호 중간에서 줄이 끊기지 않도록 다음 줄에 둔다. */
.site-footer__bank-holder {
    display: block;
}

.site-footer__information h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.75rem;
    color: #ffffff;
    font-size: 0.9375rem;
    letter-spacing: 0.03em;
}

.site-footer__information h2::before {
    width: 1.75rem;
    height: 1px;
    background: #ffffff;
    content: "";
}

.site-footer__information p,
.site-footer__information li {
    margin: 0;
    color: rgb(255 255 255 / 76%);
    font-size: 0.875rem;
    font-weight: 300;
    /* 2026-08-21 에 1.65 -> 1.45 로 좁혔던 것을 2026-08-22 고객 요청으로 되돌렸다.
       ⚠️ QUICK 링크의 누를 수 있는 높이가 여기서 정해진다(14px x 1.65 = 23.1px 에
          아래 padding-block 이 더해진다). 접근성 `target-size` 기준 24px 을 넉넉히 넘는다. */
    line-height: 1.65;
}

.site-footer__information a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

/* 손가락으로 누르는 화면에서는 20px 높이의 링크가 서로 붙어 있어 옆 항목을 누르게 된다.
   글자 크기·색은 그대로 두고 **누를 수 있는 넓이만** 넓힌다.

   높이를 메인의 「컨설팅 성공사례」 목록과 같게 맞췄다(고객 요청 2026-08-22).
     성공사례 한 줄 = 16.2px x 1.65        = 26.7px
     QUICK 링크    = 14px x 1.65 + 4 x 2   = 31.1px

   ⚠️ **여기서 줄이지 않는다.** 접근성 `target-size` 기준이 24px 이고,
      그 항목 하나가 접근성 89 -> 100 을 만든 셋 중 하나다.
      2026-08-21 에 이 값을 좁히고 넓은 화면에서는 0 으로까지 덮었는데,
      2026-08-22 고객이 「너무 따닥붙어 보인다」고 해 둘 다 되돌렸다. */
.site-footer__information li a {
    display: inline-block;
    padding-block: 0.25rem;
}

/* 누를 수 있는 곳이라는 것이 마우스를 올렸을 때 드러나게 한다. */
.site-footer__information a:hover,
.site-footer__information a:focus-visible {
    /* 어두운 바탕이라 기본 강조색보다 한 단계 밝은 빨강을 쓴다. */
    color: var(--prime-color-accent-bright);
}

.site-footer__legal {
    padding-block: 1.25rem;
    color: #aeb0b5;
    font-size: 0.8125rem;
    font-weight: 300;
}

.site-footer__legal p {
    margin: 0;
}

.site-footer__legal p + p {
    margin-top: 0.5rem;
    /* 어두운 바탕(#21242d) 위에서 #85878c 는 대비 4.31 로 기준(4.5)에 못 미쳤다.
       채널당 7 만 밝혀 4.73 을 만든다 — 눈으로는 구분되지 않는 차이다. */
    color: #8c8e93;
}

.site-footer__legal span {
    display: inline;
}

.site-footer__legal span + span::before {
    display: inline-block;
    width: 1px;
    height: 0.65rem;
    margin-inline: 0.7rem;
    background: #666970;
    content: "";
}

.error-page {
    text-align: center;
}

.error-page__code {
    margin: 0;
    color: var(--prime-color-accent);
    font-size: clamp(4rem, 15vw, 9rem);
    font-weight: 700;
    line-height: 1;
}

@media (min-width: 48rem) {
    .prime-hero__inner {
        display: flex;
        align-items: flex-end;
        flex-direction: column;
        text-align: right;
    }

    .prime-hero__lead {
        margin-left: auto;
    }

    .prime-hero__actions {
        justify-content: flex-end;
    }

    .prime-hero__scrim {
        background: linear-gradient(90deg, rgb(8 10 14 / 18%) 0%, rgb(8 10 14 / 38%) 42%, rgb(8 10 14 / 70%) 100%);
    }

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

@media (min-width: 75rem) {
    .site-header__brand-row {
        min-height: 5.4375rem;
    }

    .site-logo-link img,
    .custom-logo {
        width: 22.1875rem;
    }

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

    .site-header__navigation-row {
        display: block;
    }

    .site-header__navigation-inner {
        display: grid;
        min-height: 4.375rem;
        grid-template-columns: 4.5rem minmax(0, 1fr);
        align-items: stretch;
    }

    .all-menu-toggle {
        display: block;
    }

    .primary-navigation {
        display: block;
        min-width: 0;
        padding: 0 3.4375rem 0 4.5625rem;
        overflow: visible;
    }

    .primary-navigation > .menu {
        display: flex;
        height: 100%;
        align-items: stretch;
        justify-content: space-between;
    }

    .primary-navigation > .menu > li {
        position: relative;
        display: flex;
        align-items: center;
    }

    .primary-navigation > .menu > li > a {
        padding: 1.25rem 0;
        border: 0;
        font-size: 1.125rem;
        font-weight: 400;
        white-space: nowrap;
    }

    .primary-navigation > .menu > li > a:hover,
    .primary-navigation > .menu > li > a:focus-visible,
    .primary-navigation > .menu > .current-menu-item > a,
    .primary-navigation > .menu > .current-menu-ancestor > a {
        color: var(--prime-color-accent);
    }

    /* 바탕이 흰색이라 흰 상자는 경계가 보이지 않는다(2026-08-18 지적).
       새 색을 만들지 않고 쓰던 면 색과 테두리 색으로 상자를 세운다. */
    .primary-navigation .sub-menu {
        display: none;
        position: absolute;
        z-index: 20;
        top: 100%;
        left: 50%;
        min-width: 10rem;
        padding: 0;
        transform: translateX(-50%);
        border: 1px solid var(--prime-color-border);
        border-radius: 0 0 0.25rem 0.25rem;
        border-top: 0;
        color: var(--prime-color-charcoal);
        background: var(--prime-color-surface);
        box-shadow: var(--prime-shadow);
    }

    .primary-navigation .sub-menu a {
        padding: 0.75rem 1rem;
        text-align: center;
        /* 항목 이름이 두 줄로 접히지 않게 한다. 상단 메뉴가 쓰는 것과 같은 방식이고,
           상자 폭은 가장 긴 항목(컨설팅 사례 인터뷰)에 맞춰 저절로 늘어난다. */
        white-space: nowrap;
    }

    .primary-navigation .sub-menu li + li {
        border-top: 1px solid var(--prime-color-border);
    }

    .primary-navigation .sub-menu a:hover,
    .primary-navigation .sub-menu a:focus-visible {
        color: #ffffff;
        background: var(--prime-color-accent);
    }

    .primary-navigation li:hover > .sub-menu,
    .primary-navigation li:focus-within > .sub-menu {
        display: block;
    }

    .site-footer__main {
        grid-template-columns: 15rem minmax(0, 1fr);
        align-items: start;
        gap: 4rem;
    }
}

@media (min-width: 75rem) and (max-width: 89.875rem) {
    /* 상단 메뉴가 좌우 15px 여백을 쓰는 구간 — 본문도 같은 값을 쓴다. */
    :root {
        --prime-gutter: 0.9375rem;
    }

    .site-header__brand-row,
    .site-header__navigation-inner {
        padding-inline: 0.9375rem;
    }

    .primary-navigation {
        padding-right: 2.5rem;
        padding-left: 3rem;
    }

    .primary-navigation > .menu > li > a {
        font-size: 1rem;
    }
}

/* 상단 메뉴가 1420px 를 그대로 쓰는 구간 — 본문도 여백 없이 같은 폭이 된다. */
@media (min-width: 89.9375rem) {
    :root {
        --prime-gutter: 0px;
    }
}

@media (max-width: 74.99rem) {
    .site-header__brand-row {
        padding-inline: 1rem;
    }

    .all-menu-dialog {
        padding: 1.75rem 2rem 2rem;
    }

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

    .subpage-hero {
        height: clamp(13rem, 28vw, 20rem);
    }

    .subpage-frame__decoration {
        width: 20rem;
        height: 6.25rem;
    }
}

@media (max-width: 48rem) {
    body.admin-bar .site-header {
        top: 46px;
    }

    .prime-hero__lead br {
        display: none;
    }

    /* ⛔ 예전에는 좁은 화면에서 `display: block` 으로 항목마다 줄을 끊었다.
       그 결과 오른쪽이 텅 빈 채 6줄이 됐다(고객 지적 2026-08-22).
       → 가로로 흘려 **남는 자리를 채운다.** 짧은 항목끼리는 한 줄에 나란히 서고,
         긴 「본사: …」는 스스로 한 줄을 차지한다.

       ⚠️ 구분선(|)은 켜지 않는다. 실제로 켜 봤더니 줄이 바뀌는 자리에서 선이 줄 맨 앞에
          홀로 남아 「| 본사: 서울특별시 …」처럼 어색해졌다. 항목마다 「회사명:」 같은
          이름표가 붙어 있어 선이 없어도 어디까지가 한 항목인지 알 수 있다. */
    .site-footer__legal p:first-of-type {
        display: flex;
        flex-wrap: wrap;
        column-gap: 0.9375rem;
        row-gap: 0.125rem;
    }

    .site-footer__legal span {
        display: inline-block;
    }

    .site-footer__legal span + span::before {
        display: none;
    }
}

/* ⭐ 2026-08-27 — 40rem(640px) 에서 74.99rem(1199px) 으로 넓혔다.
   드롭다운이 시작되는 1200px 바로 아래까지 **왼쪽 서랍이 맡는다.**
   이제 가운데 팝업창이 나오는 화면 폭은 존재하지 않는다.
   (아래쪽 서브페이지 규칙은 원래대로 640px 이하로 남겨 뒀다 — 별도 블록으로 갈랐다.) */
@media (max-width: 74.99rem) {
    /* 기존 사이트의 모바일 메뉴는 화면 가운데 상자가 아니라
       **왼쪽에서 밀려나오는 서랍**이었다(레거시 `#aside`). 배치만 바꿔 그 모양을 만든다 —
       상자·닫기 버튼·목록 스타일은 쓰던 것을 그대로 쓴다. */
    .all-menu-layer {
        padding: 0;
        place-items: stretch start;
    }

    .all-menu-dialog {
        width: min(20rem, 85vw);
        height: 100dvh;
        padding: 1.25rem 1rem 1.5rem;
        border-radius: 0;
    }

    @media (prefers-reduced-motion: no-preference) {
        .all-menu-dialog {
            animation: prime-drawer-in 0.28s ease-out;
        }
    }

    /* ───── 좁은 화면 서랍 리디자인 (고객 요청 2026-08-22 · 모바일 6쪽) ─────

       고객이 참고 화면을 함께 줬다 — 회색 알약을 없앤 **글자 목록**, 머리말은
       「전체카테고리」 글자 대신 **로고**, 펼침 표시는 줄 오른쪽 끝의 꺾쇠.
       ⚠️ 넓은 화면(2026-08-21 리디자인)은 건드리지 않는다. 아래는 전부 이 블록 안이다. */

    .all-menu-dialog__header {
        align-items: center;
        padding-bottom: 0.875rem;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid var(--prime-color-border);
    }

    /* 제목은 지우지 않고 **눈에만 안 보이게** 한다 — 이 상자의 이름을 이 제목에서
       가져오므로(aria-labelledby) 없애면 화면낭독기가 무슨 창인지 못 읽는다. */
    .all-menu-dialog__header h2 {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        border: 0;
        clip-path: inset(50%);
        overflow: hidden;
        white-space: nowrap;
    }

    .all-menu-dialog__brand {
        display: block;
        margin: 0;
        line-height: 0;
    }

    .all-menu-dialog__brand-logo {
        width: auto;
        height: 1.125rem;
    }

    /* 넓은 화면은 예전처럼 글자로 쓴다. 좁은 화면에서는 로고 그림이 그 자리를 맡는다. */
    .all-menu-dialog__brand-text {
        display: none;
    }

    .all-menu-dialog__body {
        padding-right: 0.5rem;
    }

    .all-menu__list {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* 회색 알약을 걷어내고 왼쪽 정렬 글자 줄로. 꺾쇠는 줄 오른쪽 끝으로 민다. */
    .all-menu__list > li > a,
    .all-menu__list > li > details > summary {
        min-height: 3rem;
        justify-content: flex-start;
        padding: 0.625rem 0.25rem;
        border-radius: 0;
        background: transparent;
        color: #222222;
        font-size: 1rem;
        font-weight: 500;
        text-align: left;
    }

    .all-menu__list > li > details > summary::after {
        margin-left: auto;
        border-width: 0 1.5px 1.5px 0;
        color: #999999;
    }

    /* 알약이 없어졌으므로 「지금 이 페이지」·「펼쳐진 항목」 표시도 바탕색이 아니라
       글자색으로 한다. 빨간 상자가 통째로 깔리면 참고 화면과 달라진다. */
    .all-menu__list > li > a:focus-visible,
    .all-menu__list > li > details > summary:focus-visible,
    .all-menu__list > li > details[open] > summary,
    .all-menu__list > .current-menu-item > a,
    .all-menu__list > .current-menu-ancestor > a {
        background: transparent;
        color: var(--prime-color-accent);
    }

    /* 펼쳐진 항목이 어디서 시작해 어디서 끝나는지 눈에 보이게 한다
       (고객 지적 2026-08-22 — 회색 알약을 걷어낸 뒤로 구분이 안 됐다).
       알약을 되살리지 않고 **펼쳐진 묶음 전체에만** 옅은 바탕을 깔아 표시한다. */
    .all-menu__list > li > details[open] {
        border-radius: 0.375rem;
        background: var(--prime-color-surface);
    }

    .all-menu__list > li > details[open] > summary {
        padding-inline: 0.75rem;
    }

    /* 하위 항목은 한 단계 더 들여쓰고 왼쪽에 선을 세워 상위에 딸린 것임을 보인다. */
    .all-menu__list > li > details[open] > .sub-menu {
        padding: 0 0.75rem 0.75rem;
        border-radius: 0;
        background: transparent;
    }

    .all-menu__list > li > details[open] > .sub-menu > li {
        padding-left: 0.75rem;
        border-left: 2px solid var(--prime-color-border);
    }

    /* SNS 아이콘 3개를 가운데로(고객 요청 2026-08-22 · 모바일 6쪽). */
    .all-menu-dialog__social {
        justify-content: center;
        margin-top: 1.5rem;
    }

}

@media (max-width: 40rem) {
    .subpage-hero {
        height: 11.25rem;
    }

    .subpage-hero h1,
    .subpage-hero h2 {
        font-size: 2.25rem;
    }

    .subpage-breadcrumb {
        height: 3.125rem;
    }

    .subpage-breadcrumb__inner {
        width: 100%;
    }

    .subpage-breadcrumb__home {
        width: 3.125rem;
        flex-basis: 3.125rem;
        border-left: 0;
    }

    .subpage-breadcrumb__menu {
        width: auto;
        min-width: 0;
        flex: 1 1 0;
    }

    .subpage-breadcrumb__menu summary {
        height: 3.125rem;
        padding: 0 2rem 0 0.875rem;
        overflow: hidden;
        font-size: 0.875rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .subpage-breadcrumb__menu summary::after {
        top: 1.0625rem;
        right: 0.875rem;
        width: 0.5rem;
        height: 0.5rem;
    }

    .subpage-breadcrumb__menu[open] summary::after {
        top: 1.375rem;
    }

    .subpage-breadcrumb__menu a {
        padding: 0.5rem 0.875rem;
        font-size: 0.875rem;
    }

    .subpage-frame__decoration {
        width: 12rem;
        height: 3.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* 휴대폰: 한 화면에 카드 1장이 꽉 차게(고객 요청 2026-08-18).
   원래는 83% 로 두어 다음 카드가 살짝 보이게 했는데(넘길 수 있다는 신호),
   좌우 화살표가 이미 같은 신호를 하고 있어 잘린 카드가 어중간해 보인다는 지적을 받았다. */
@media (max-width: 30rem) {
    .prime-main-keyword__list {
        grid-auto-columns: 100%;
    }

    .prime-main-keyword__tools {
        width: 100%;
        justify-content: space-between;
    }
}

/* ───── 게시물: 본문 서식 ─────
   글쓴이가 편집기에서 넣는 소제목·목록·인용문·이미지에 일관된 서식을 준다.
   공지사항 본문도 같은 규칙을 쓴다. */

.prime-prose {
    font-size: 1.0625rem;
    /* 본문 줄간격 축소(고객 요청 2026-08-21). 「지금을 10 이라 치면 8.5 로」 = 1.9 x 0.85 */
    line-height: 1.6;
    color: #333333;
    word-break: keep-all;
}

.prime-prose > * + * {
    margin-top: 1.4em;
}

.prime-prose h2 {
    padding-bottom: 0.5rem;
    margin: 2.4em 0 0.8em;
    border-bottom: 2px solid var(--prime-color-border);
    color: #111111;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
}

.prime-prose h3 {
    margin: 2em 0 0.6em;
    color: #111111;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.5;
}

.prime-prose h2:first-child,
.prime-prose h3:first-child {
    margin-top: 0;
}

.prime-prose ul,
.prime-prose ol {
    padding-left: 1.5em;
    margin: 0 0 1.4em;
}

.prime-prose li + li {
    margin-top: 0.4em;
}

.prime-prose blockquote {
    padding: 1rem 1.5rem;
    margin: 1.8em 0;
    border-left: 4px solid var(--prime-color-accent);
    border-radius: 0 var(--prime-radius) var(--prime-radius) 0;
    background: rgb(215 45 59 / 6%);
    color: #555555;
}

.prime-prose blockquote > * + * {
    margin-top: 0.75em;
}

.prime-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    border-radius: var(--prime-radius);
}

.prime-prose figcaption {
    margin-top: 0.75rem;
    color: var(--prime-color-muted);
    font-size: 0.9375rem;
    text-align: center;
}

.prime-prose a {
    color: #b62432;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.prime-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.prime-prose th,
.prime-prose td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--prime-color-border);
    text-align: left;
}

.prime-prose th {
    background: var(--prime-color-surface);
    font-weight: 600;
}

/* 표가 넓으면 화면이 아니라 표 안쪽이 옆으로 밀린다. */
.prime-prose .wp-block-table {
    overflow-x: auto;
}

/* ───── 게시물: 글 읽기 화면 ───── */

.prime-article__thumb {
    margin: 0 0 2.25rem;
    overflow: hidden;
    border-radius: var(--prime-radius);
}

.prime-article__thumb img {
    display: block;
    width: 100%;
    height: auto;
}

.prime-article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 2.5rem 0 0;
    list-style: none;
}

.prime-article__tags a {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--prime-color-border);
    border-radius: 1rem;
    color: var(--prime-color-muted);
    font-size: 0.875rem;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}

.prime-article__tags a:hover {
    border-color: var(--prime-color-accent);
    color: var(--prime-color-accent);
}

/* ───── 게시물: 목록 화면 ───── */

.prime-post-archive .page-header {
    display: grid;
    gap: 1.25rem;
}

.prime-post-search {
    display: flex;
    width: min(100%, 26rem);
    overflow: hidden;
    border: 1px solid var(--prime-color-border);
    border-radius: 2rem;
}

.prime-post-search:focus-within {
    border-color: var(--prime-color-accent);
}

.prime-post-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.75rem 1.25rem;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.9375rem;
}

.prime-post-search__input:focus-visible {
    outline: none;
}

.prime-post-search__submit {
    display: grid;
    width: 3rem;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--prime-color-muted);
    cursor: pointer;
}

.prime-post-search__submit:hover {
    color: var(--prime-color-accent);
}

.prime-post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.875rem;
}

.prime-post-card {
    overflow: hidden;
    border: 1px solid var(--prime-color-border);
    border-radius: var(--prime-radius);
    transition: box-shadow 0.3s, transform 0.3s;
}

.prime-post-card:hover {
    box-shadow: 0 1rem 2rem rgb(0 0 0 / 10%);
    transform: translateY(-0.25rem);
}

.prime-post-card__link {
    display: flex;
    height: 100%;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.prime-post-card__thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--prime-color-surface);
}

/* 이미지가 없는 글의 자리. 회색 구멍처럼 보이지 않게 옅은 브랜드색을 깐다. */
.prime-post-card__thumb--empty {
    background:
        linear-gradient(135deg, rgb(215 45 59 / 8%) 0%, rgb(215 45 59 / 0%) 55%),
        var(--prime-color-surface);
}

.prime-post-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.prime-post-card:hover .prime-post-card__thumb img {
    transform: scale(1.05);
}

.prime-post-card__body {
    display: grid;
    flex: 1 1 auto;
    align-content: start;
    gap: 0.625rem;
    padding: 1.5rem;
}

.prime-post-card__category {
    justify-self: start;
    color: var(--prime-color-accent);
    font-size: 0.8125rem;
    font-weight: 600;
}

.prime-post-card__title {
    display: block;
    color: #111111;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5;
    word-break: keep-all;
}

.prime-post-card__excerpt {
    display: block;
    color: var(--prime-color-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
    word-break: keep-all;
}

.prime-post-card__date {
    display: block;
    color: #999999;
    font-size: 0.8125rem;
}

.prime-search-highlight {
    padding: 0 0.125rem;
    background: rgb(215 45 59 / 14%);
    color: inherit;
    font-weight: 600;
}

.prime-post-grid__empty {
    padding: 4rem 0;
    color: var(--prime-color-muted);
    text-align: center;
}

.prime-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 3rem;
}

.prime-pagination .page-numbers {
    display: grid;
    min-width: 2.5rem;
    height: 2.5rem;
    padding-inline: 0.75rem;
    place-items: center;
    border: 1px solid var(--prime-color-border);
    border-radius: 0.25rem;
    color: #555555;
    font-size: 0.9375rem;
    text-decoration: none;
}

.prime-pagination a.page-numbers:hover,
.prime-pagination .page-numbers.current {
    border-color: var(--prime-color-accent);
    background: var(--prime-color-accent);
    color: #ffffff;
}

.prime-pagination .page-numbers.dots {
    border-color: transparent;
}

@media (max-width: 64rem) {
    .prime-post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40rem){
    .prime-post-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .prime-prose h2 {
        font-size: 1.3125rem;
    }

    .prime-prose h3 {
        font-size: 1.0625rem;
    }
}

/* 글 읽는 화면의 본문 폭. 목록·메인(1420px)보다 좁게 두어 읽기 편하게 한다. */
.prime-post-single {
    max-width: 1200px;
    margin-inline: auto;
}

/* 글 맨 위의 한줄요약. 검색·AI 가 먼저 읽는 문장이라 눈에 띄게 둔다. */
.prime-article__summary {
    padding: 1.25rem 1.5rem;
    margin: 0 0 2.25rem;
    border-left: 4px solid var(--prime-color-accent);
    border-radius: 0 var(--prime-radius) var(--prime-radius) 0;
    background: rgb(215 45 59 / 6%);
    color: #333333;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.7;
    word-break: keep-all;
}

/* ───── 게시판 목록: 검색·보기 도구 ───── */

.prime-board-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.75rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--prime-color-border);
}

.prime-board-search {
    display: flex;
    gap: 0.5rem;
}

.prime-board-search__type {
    min-width: 6.25rem;
    padding: 0 0.75rem;
    border: 1px solid var(--prime-color-border);
    border-radius: 0.25rem;
    background: #ffffff;
    color: #333333;
    font: inherit;
    font-size: 0.9375rem;
}

.prime-board-search__input {
    width: min(22rem, 50vw);
    padding: 0.75rem 1rem;
    border: 1px solid var(--prime-color-border);
    border-radius: 0.25rem;
    font: inherit;
    font-size: 0.9375rem;
}

.prime-board-search__type:focus-visible,
.prime-board-search__input:focus-visible {
    border-color: var(--prime-color-accent);
    outline: none;
}

.prime-board-search__submit {
    display: grid;
    width: 3.25rem;
    place-items: center;
    border: 0;
    border-radius: 0.25rem;
    background: var(--prime-color-accent);
    color: #ffffff;
    cursor: pointer;
}

.prime-board-views {
    display: flex;
    gap: 0.25rem;
}

.prime-board-views[hidden] {
    display: none;
}

.prime-board-views__button {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    padding: 0;
    border: 1px solid var(--prime-color-border);
    border-radius: 0.25rem;
    background: #ffffff;
    color: #999999;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.prime-board-views__button:hover {
    color: var(--prime-color-accent);
}

.prime-board-views__button[aria-pressed="true"] {
    border-color: var(--prime-color-charcoal);
    background: var(--prime-color-charcoal);
    color: #ffffff;
}

/* ───── 게시판 목록: 목록형 보기 ───── */

.prime-post-grid--list {
    grid-template-columns: 1fr;
    gap: 1rem;
}

.prime-post-grid--list .prime-post-card__link {
    flex-direction: row;
    align-items: stretch;
}

.prime-post-grid--list .prime-post-card__thumb {
    flex: 0 0 15rem;
    aspect-ratio: 16 / 10;
}

/* 분류·날짜를 감춘 목록(고객 요청 2026-08-21)은 글이 두 줄 짧아진다.
   그대로 두면 왼쪽 사진이 줄 높이를 혼자 정해 커 보이므로 함께 줄인다.
   15rem -> 11.25rem (사진 비율은 그대로라 높이도 같은 비율로 낮아진다). */
.prime-post-grid--list.prime-post-grid--compact .prime-post-card__thumb {
    flex: 0 0 11.25rem;
}

/* ⛔ 예전에는 여기에 `justify-content: center` 가 있었다. 세로 가운데 정렬을 노린 것으로
      보이지만 **본문은 flex 가 아니라 grid** 라(위 `.prime-post-card__body`),
      grid 에서 justify-content 는 **가로** 축이다. 게다가 값이 center 면 자동 칸이
      더 이상 늘어나지 않아 **글 내용만큼만** 넓어진다.
      -> 글이 칸을 다 채우는 카드는 티가 안 나지만, **요약이 한 줄에 들어갈 만큼 짧은
         카드는 글 덩어리가 통째로 가운데로 밀려** 제목이 들여쓰기된 것처럼 보였다
         (2026-08-24 고객 지적 3차 PC-7 — 「클릭을 하다 보면 간혹」의 정체가 이것이다.
          1920px 화면 `/thesis-tips/` 에서 61px 밀리는 것을 실측·재현했다).
      세로 가운데 정렬은 애초에 동작한 적이 없으므로(위 규칙의 `align-content: start` 가
      그대로 살아 있었다) 줄을 지우는 것으로 끝난다 — 다른 카드의 모습은 바뀌지 않는다. */
.prime-post-grid--list .prime-post-card__body {
    padding: 1.25rem 1.5rem;
}

.prime-post-grid--list .prime-post-card__title {
    font-size: 1.25rem;
}

@media (max-width: 40rem) {
    .prime-board-toolbar {
        gap: 0.75rem;
    }

    .prime-board-search {
        flex: 1 1 100%;
    }

    .prime-board-search__input {
        width: 100%;
    }

    /* 보기 전환 버튼을 오른쪽 끝으로(고객 요청 2026-08-22 · 모바일 11쪽).
       좁은 화면에서는 검색줄이 한 줄을 다 쓰므로 버튼이 다음 줄 **왼쪽**에 떨어졌다
       — 부모의 space-between 은 한 줄에 요소가 하나뿐이면 아무 일도 하지 않는다. */
    .prime-board-views {
        margin-left: auto;
    }

    /* ⛔ 예전에는 좁은 화면에서 목록형도 사진을 **위로** 올렸다(글이 눌린다는 이유).
       그 결과 목록형이 카드형과 똑같이 보여서, 버튼을 눌러도 화면이 그대로였다
       — 고객이 「이 버튼이 작동하지 않습니다」라고 본 것이 이것이다(모바일 11쪽).
       버튼·저장 기능은 처음부터 정상이었고 보이는 결과만 같았다.
       그래서 좁은 화면에서도 사진을 옆에 두되, 폭을 작게 잡아 글자리를 지킨다
       (390px 화면에서 사진 112px + 글 약 230px). */
    /* 📌 2026-08-24 고객 요청(3차 M-4): 「썸네일 크기를 제목 3줄일 때 기준으로 모두 고정」.
       ⛔ 원인: 가로만 `flex: 0 0 7rem` 으로 고정돼 있고 **세로는 자유**였다.
          카드가 `align-items: stretch` 라 사진이 **줄 높이만큼 늘어나서**,
          제목 줄 수가 곧 사진 높이가 됐다(실측: 2줄 74px · 3줄 98px · 4줄 122px).
          `aspect-ratio` 는 한쪽이 auto 일 때만 쓰이므로 여기서는 무시되고 있었다.
       세로를 3줄일 때 값(98px = 6.125rem)으로 **못박으면** stretch 가 적용되지 않는다.
       ⚠️ 고객이 「제목을 3줄 이상 넘기지 않겠다」고 했다. 4줄이 되면 사진 아래에
          빈자리가 생긴다 — 사진이 커지지 않는 것이 요청이므로 그것이 의도된 모습이다. */
    .prime-post-grid--list .prime-post-card__thumb,
    .prime-post-grid--list.prime-post-grid--compact .prime-post-card__thumb {
        flex: 0 0 7rem;
        height: 6.125rem;
    }

    .prime-post-grid--list .prime-post-card__body {
        padding: 0.75rem 0.875rem;
    }

    /* 📌 2026-08-24 고객 결정(3차 M-4 후속): 「제목을 3줄만 나오게 · 글자 크기 90%」.
       ⛔ 같은 날 고객 재요청으로 **글자 크기 90% 는 되돌렸다**(0.9rem → 1rem).
          3줄 제한만 남긴다. 사진 높이 98px 는 원래 1rem · 3줄을 재서 정한 값이라
          되돌린 쪽이 오히려 글자와 사진 높이가 잘 맞는다.
       사진 높이를 3줄 기준으로 못박은 뒤, 제목이 4줄인 카드만 사진 아래에 여백이
       남았다(24장 중 5장, 실측). 제목 자체를 3줄에서 끊어 **어떤 제목이 와도**
       카드 높이가 같아지게 한다.
       ⚠️ 화면에서만 끊긴다 — 검색엔진과 글 화면에는 제목이 그대로 남는다.
       ⚠️ 3줄 제한은 `-webkit-box` 방식이라 `display` 를 덮어써야 한다(기본은 block).
          이름에 -webkit- 이 붙었지만 표준으로 자리잡아 모든 최신 브라우저에서 동작한다.
          혹시 안 먹는 브라우저에서는 제목이 다 보일 뿐, 깨지지는 않는다. */
    .prime-post-grid--list .prime-post-card__title {
        display: -webkit-box;
        overflow: hidden;
        font-size: 1rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    /* 좁은 폭에서 요약까지 넣으면 줄이 넘쳐 한 줄이 사진보다 훨씬 길어진다.
       목록형은 제목으로 훑는 보기이므로 요약은 카드형에만 남긴다. */
    .prime-post-grid--list .prime-post-card__excerpt {
        display: none;
    }
}

/* ───── 글: 이 글의 순서(목차) ───── */

.prime-toc {
    padding: 1.5rem 1.75rem;
    margin-bottom: 2.5rem;
    border: 1px solid var(--prime-color-border);
    border-radius: var(--prime-radius);
    background: var(--prime-color-surface);
}

.prime-toc__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    border: 0;
    color: #111111;
    cursor: pointer;
    font-size: 1.0625rem;
    font-weight: 700;
    list-style: none;
}

.prime-toc__title::-webkit-details-marker {
    display: none;
}

/* 펼침 표시. 열면 아래를 향한다. */
.prime-toc__title::before {
    width: 0.5rem;
    height: 0.5rem;
    border-top: 2px solid var(--prime-color-accent);
    border-right: 2px solid var(--prime-color-accent);
    transform: rotate(45deg);
    transition: transform 0.2s;
    content: "";
}

.prime-toc[open] .prime-toc__title::before {
    transform: rotate(135deg);
}

.prime-toc__count {
    color: var(--prime-color-muted);
    font-size: 0.8125rem;
    font-weight: 400;
}

.prime-toc__list {
    padding-left: 1.25rem;
    margin: 0.875rem 0 0;
}

.prime-toc__item {
    margin-top: 0.375rem;
    color: var(--prime-color-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.prime-toc__children {
    padding-left: 1.125rem;
    margin: 0.25rem 0 0;
    list-style-type: circle;
}

.prime-toc__item--h3 {
    font-size: 0.875rem;
}

.prime-toc a {
    color: #444444;
    text-decoration: none;
}

.prime-toc a:hover {
    color: var(--prime-color-accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ───── 글: 자주 묻는 질문 ───── */

.prime-faq {
    margin-top: 3rem;
}

.prime-faq__title {
    padding: 0;
    margin: 0 0 1rem;
    border: 0;
    color: #111111;
    font-size: 1.375rem;
    font-weight: 700;
}

.prime-faq__list {
    display: grid;
    gap: 0.625rem;
}

.prime-faq__item {
    border: 1px solid var(--prime-color-border);
    border-radius: var(--prime-radius);
    background: #ffffff;
}

.prime-faq__item[open] {
    border-color: var(--prime-color-accent);
}

.prime-faq__question {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    color: #222222;
    cursor: pointer;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.5;
    list-style: none;
    word-break: keep-all;
}

.prime-faq__question::-webkit-details-marker {
    display: none;
}

.prime-faq__mark {
    flex: none;
    color: var(--prime-color-accent);
    font-weight: 700;
}

.prime-faq__answer {
    padding: 0 1.25rem 1.25rem 3rem;
    color: #555555;
    font-size: 1rem;
    line-height: 1.8;
    word-break: keep-all;
}

.prime-faq__answer > * + * {
    margin-top: 0.75em;
}

/* ───── 글: 같은 분류의 다른 글 ───── */

.prime-related {
    margin-top: 3rem;
}

.prime-related__title {
    margin: 0 0 1.25rem;
    color: #111111;
    font-size: 1.25rem;
    font-weight: 700;
}

.prime-related__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.prime-related__link {
    display: grid;
    height: 100%;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 1px solid var(--prime-color-border);
    border-radius: var(--prime-radius);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.prime-related__link:hover {
    border-color: var(--prime-color-accent);
    box-shadow: 0 0.75rem 1.5rem rgb(0 0 0 / 8%);
}

.prime-related__thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--prime-color-surface);
}

.prime-related__thumb--empty {
    background:
        linear-gradient(135deg, rgb(215 45 59 / 8%) 0%, rgb(215 45 59 / 0%) 55%),
        var(--prime-color-surface);
}

.prime-related__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prime-related__body {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    padding: 1rem 1.125rem 1.25rem;
}

.prime-related__name {
    display: block;
    color: #222222;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    word-break: keep-all;
}

.prime-related__date {
    display: block;
    color: #999999;
    font-size: 0.8125rem;
}

@media (max-width: 48rem) {
    .prime-related__list {
        grid-template-columns: 1fr;
    }

    .prime-faq__answer {
        padding-left: 1.25rem;
    }
}

/* ───── 빠른 메뉴: 하단 고정 바 · 빠른상담 · 맨 위로 ─────
   기존 사이트에도 있던 자리다(모바일 `.ft_fix` + `.btn_scroll_top`, PC `.quick_inq`).
   아이콘은 레거시 원본을 무손실 WebP 로 옮긴 것이고 크기도 원본 그대로다. */

.prime-quick-bar {
    position: fixed;
    z-index: 1800;
    right: 0;
    bottom: 0;
    left: 0;
    border-top: 1px solid var(--prime-color-border);
    background: #ffffff;
    box-shadow: 0 -0.25rem 1rem rgb(0 0 0 / 8%);
}

.prime-quick-bar ul {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    padding: 0;
    margin: 0;
    list-style: none;
}

.prime-quick-bar a {
    display: grid;
    padding: 0.5rem 0.25rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    color: var(--prime-color-charcoal);
    font-size: 0.75rem;
    gap: 0.25rem;
    justify-items: center;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.prime-quick-bar img {
    width: auto;
    height: 1.5rem;
}

.prime-quick-bar a:hover,
.prime-quick-bar a:focus-visible {
    color: var(--prime-color-accent);
}

/* 하단 바는 좁은 화면 전용이다(기존 사이트도 모바일 스킨에만 있었다). */
@media (min-width: 40.0625rem) {
    .prime-quick-bar {
        display: none;
    }
}

/* 바가 페이지 끝을 가리지 않도록 그만큼 자리를 비운다. */
@media (max-width: 40rem) {
    body {
        padding-bottom: 4.75rem;
    }

    /* 상담안내는 화면 안이 아니라 하단 고정 메뉴로 보여 준다(고객 요청).
       기존 사이트의 모바일 메인에도 이 구간은 본문에 없었다. */
    .prime-main-intro {
        display: none;
    }
}

.prime-floating {
    position: fixed;
    z-index: 1850;
    right: 0.75rem;
    bottom: 5.5rem;
    display: grid;
    gap: 0.5rem;
    justify-items: end;
}

@media (min-width: 40.0625rem) {
    .prime-floating {
        right: 1.25rem;
        bottom: 1.25rem;
    }
}

/* 알약 모양이 기본이고, 좁은 화면에서 글자를 감추면 그대로 동그라미가 된다.
   높이(3.25rem)와 반지름(1.625rem)이 같아 폭이 높이까지 줄면 원이 되기 때문이다. */
.prime-floating__btn {
    display: grid;
    grid-auto-flow: column;
    min-height: 3.25rem;
    padding: 0 1.125rem;
    border: 1px solid #ffffff;
    border-radius: 1.625rem;
    font-size: 0.875rem;
    font-weight: 700;
    gap: 0.5rem;
    line-height: 1.15;
    place-items: center;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s, background 0.2s;
}

.prime-floating__btn:hover,
.prime-floating__btn:focus-visible {
    transform: translateY(-0.125rem);
}

.prime-floating__icon {
    display: grid;
    place-items: center;
}

/* 빠른상담 — 오른쪽 고정 버튼은 이제 이것 하나다(2026-08-21). 브랜드 색을 준다. */
.prime-floating__btn--quick {
    color: #ffffff;
    background: var(--prime-color-accent);
    box-shadow: 0 0.25rem 0.75rem rgb(215 45 59 / 35%);
}

.prime-floating__btn--quick:hover {
    background: var(--prime-color-accent-bright);
}

/* 맨 위로는 페이지 위쪽에서는 쓸 일이 없다. 어느 정도 내려간 뒤에만 나타나게 한다
   (고객 요청 2026-08-21). 스크롤 이벤트를 듣지 않고 IntersectionObserver 로 처리하므로
   스크롤 중 자바스크립트가 도는 일이 없다 — 이 프로젝트의 TBT 0ms 를 지키기 위해서다.

   ⚠️ 숨기는 규칙은 스크립트가 켜 준 has-scrolltop 아래에서만 적용된다.
      스크립트가 없으면 예전처럼 항상 보인다(기능을 잃지 않는다). */
.prime-floating__sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    /* 이 높이만큼 내려가면 버튼이 나타난다. 화면 높이의 70% — 한 화면쯤 내린 시점이다. */
    height: 70vh;
    pointer-events: none;
    visibility: hidden;
}

.has-scrolltop .prime-floating__btn--top {
    opacity: 0;
    transition: opacity 0.25s, visibility 0.25s, transform 0.2s, background 0.2s;
    visibility: hidden;
}

.has-scrolltop .prime-floating__btn--top.is-visible {
    opacity: 1;
    visibility: visible;
}

/* 맨 위로 — 행동이 아니라 도구라서 어둡게 두어 빠른상담과 구분한다. */
.prime-floating__btn--top {
    color: #ffffff;
    background: var(--prime-color-ink);
    box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 25%);
}

/* 위 화살표. 이미지를 쓰지 않고 테두리 두 변을 돌려 만든다(요청 0건, 몇 바이트). */
.prime-floating__btn--top::before {
    width: 0.4375rem;
    height: 0.4375rem;
    border-top: 2px solid currentcolor;
    border-left: 2px solid currentcolor;
    content: '';
    transform: rotate(45deg) translate(0.0625rem, 0.0625rem);
}

.prime-floating__btn--top:hover {
    background: #000000;
}

/* ───── 넓은 화면: 빠른상담은 세로 탭, 맨 위로는 동그라미 (고객 요청 2026-08-21) ─────
   예전 사이트의 오른쪽 세로 탭 모습이다. 화면 세로 한가운데(5/10 지점)에 고정한다.
   📌 2026-08-24 고객 요청(3차 PC-2): 「처음 로딩할 때 상담문의와 빠른상담이 너무 붙는다」
      ⛔ 처음에는 위치 문제로 읽고 70% 로 내렸다가 되돌렸다. 진짜 뜻은 **위치가 아니라
         노출 시점**이었다 — 첫 화면에 히어로의 「상담 문의」 단추가 이미 있어 같은 말이
         겹친다는 것이다. 그래서 자리는 예전(50%) 그대로 두고,
         **맨 위로 단추와 같은 시점에 나타나도록** 아래에 감추기 규칙을 더했다. */
@media (min-width: 40.0625rem) {
    .prime-floating__btn--quick {
        /* 아래쪽 묶음에서 빠져나와 화면 오른쪽 한가운데에 따로 붙는다. */
        position: fixed;
        top: 50%;
        right: 0;
        /* 가로폭을 넓혔다(고객 요청 2026-08-22). 좌우 7px -> 15px 로 탭이 16px 넓어진다. */
        padding: 1.25rem 0.9375rem;
        /* 테두리는 기본 규칙의 흰 1px 을 그대로 쓴다 — 흰 바탕에서는 보이지 않고,
           상담신청 빨간 띠 위로 겹칠 때만 탭의 윤곽을 살려 준다(빨강 위 빨강 방지). */
        border-right: 0;
        border-radius: 0.375rem 0 0 0.375rem;
        /* 글자를 세로로 세운다. 이미지도 회전도 쓰지 않는다. */
        writing-mode: vertical-rl;
        letter-spacing: 0.05em;
        transform: translateY(-50%);
    }

    /* 세로 탭에는 글자만 둔다. */
    .prime-floating__btn--quick .prime-floating__icon {
        display: none;
    }

    /* 기본 hover 는 위로 뜨는 움직임인데, 여기서는 가운데 정렬을 유지한 채 왼쪽으로 나온다. */
    .prime-floating__btn--quick:hover,
    .prime-floating__btn--quick:focus-visible {
        transform: translateY(-50%) translateX(-0.125rem);
    }

    /* 📌 2026-08-24 고객 요청(3차 PC-2): 맨 위로 단추와 **같은 시점에** 나타난다.
       한 화면쯤 내려가 히어로의 「상담 문의」가 화면 밖으로 나간 뒤에 보인다.
       ⚠️ transform 은 건드리지 않는다 — 가운데 정렬(translateY(-50%))이 풀리면
          탭이 아래로 튄다. 보이고 감추는 것은 opacity·visibility 로만 한다.
       ⚠️ 스크립트가 없으면 has-scrolltop 이 안 붙어 예전처럼 항상 보인다(기능을 잃지 않는다). */
    .has-scrolltop .prime-floating__btn--quick {
        opacity: 0;
        transition: opacity 0.25s, visibility 0.25s, transform 0.2s, background 0.2s;
        visibility: hidden;
    }

    .has-scrolltop .prime-floating__btn--quick.is-visible {
        opacity: 1;
        visibility: visible;
    }

    /* 맨 위로 — 화살표 위, 글자 아래로 쌓은 검은 동그라미.
       테두리는 기본 규칙의 흰 1px 을 그대로 쓴다(고객 요청 2026-08-21).
       흰 바탕에서는 안 보이지만, 검은 푸터 위로 겹칠 때 버튼 윤곽을 살려 준다. */
    /* 📌 2026-08-24 고객 요청(3차 PC-3): 「동그라미를 사각형으로, TOP 글자는 삭제」.
       ⚠️ 좁은 화면의 동그라미는 그대로 둔다 — 고객이 모바일 화면을 따로 검토하면서
          이 단추는 문제 삼지 않았다(요청 범위 밖). */
    .prime-floating__btn--top {
        width: 3.25rem;
        padding: 0;
        /* 알약 반지름(1.625rem)을 걷어내 사각형으로. 모서리만 아주 살짝 둥글린다. */
        border-radius: 0.25rem;
        align-content: center;
    }

    /* 글자는 지우지 않고 눈에서만 감춘다 — 지우면 이름 없는 링크가 되어
       화면낭독기가 「링크」라고만 읽는다(접근성 100점이 깨진다). */
    .prime-floating__btn--top .prime-floating__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* 📌 화살표 위치 예외를 걷어냈다(2026-08-24, 3차 PC-3).
       예전에는 화살표 위·「TOP」 아래로 두 줄이라 화살표를 아래로 안 밀었다.
       이제 글자가 없어 화살표 하나만 남으므로, 좁은 화면과 같은 기본 규칙
       (`rotate(45deg) translate(...)`)으로 광학 중앙에 놓는다. */
}

/* 좁은 화면: 아이콘만 있는 동그라미로 줄인다(예전 그대로 — 이번 정리 대상이 아니다).
   글자는 지우지 않고 눈에서만 감춘다 — 화면낭독기는 그대로 읽는다. */
@media (max-width: 40rem) {
    .prime-floating__btn {
        width: 3.25rem;
        padding: 0;
    }

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

/* ───── 빠른상담 레이어 팝업 ─────
   기존 사이트의 `.quick_inq` 자리. 폼 자체는 상담신청과 같은 부품이라
   입력칸·버튼 스타일은 `.prime-inquiry` 것을 그대로 물려받는다. */

.prime-quick-dialog {
    width: min(28rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: 1.5rem;
    border: 0;
    border-radius: 0.625rem;
    margin: auto;
    box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 30%);
}

.prime-quick-dialog::backdrop {
    background: rgb(0 0 0 / 60%);
}

/* ───── 넓은 화면: 가운데 팝업이 아니라 오른쪽에서 밀려나오는 곁창 (고객 요청 2026-08-21)
   예전 사이트의 `.quick_inq` 가 이 모습이었다. 뒤 배경을 어둡게 하지 않아
   상담 창을 열어 둔 채로 페이지를 계속 볼 수 있다.

   <dialog> 를 그대로 쓴다 — 라이브러리도, 새로 받는 파일도 없다. 달라지는 것은
   ① 자리(오른쪽 가장자리) ② 미끄러지는 움직임 ③ 여는 방법(모달 -> 비모달)뿐이다.

   ⚠️ 닫혀 있을 때 `display: none` 대신 `visibility: hidden` 을 쓰는 이유:
      display 가 바뀌면 미끄러지는 움직임을 줄 수 없다. visibility 는 화면에서도
      키보드 이동 순서에서도 똑같이 빠지므로 접근성은 그대로다. */
@media (min-width: 40.0625rem) {
    .prime-quick-dialog {
        /* 작성자 규칙은 브라우저 기본(dialog:not([open]){display:none})보다 우선한다. */
        display: block;
        position: fixed;
        /* ⚠️ 비모달 <dialog> 는 최상위 레이어에 올라가지 않는다 — 그건 showModal() 일 때만이다.
           그래서 여기서는 쌓임 순서를 직접 정해 줘야 한다. 안 주면 게시판 리본·검색창 같은
           평범한 요소가 상담 창을 덮는다(2026-08-21 실제로 겪었다).
           고정 버튼(1850)보다 위, 전체메뉴 레이어(2100)보다 아래에 둔다. */
        z-index: 1900;
        top: 50%;
        right: 0;
        left: auto;
        max-height: min(calc(100dvh - 2rem), 44rem);
        margin: 0;
        border-radius: 0.625rem 0 0 0.625rem;
        opacity: 0;
        overflow-y: auto;
        transform: translate(100%, -50%);
        transition: transform 0.32s ease, opacity 0.32s ease, visibility 0.32s;
        visibility: hidden;
    }

    .prime-quick-dialog[open] {
        opacity: 1;
        transform: translate(0, -50%);
        visibility: visible;
    }

    /* 비모달이라 어두운 배경 자체가 그려지지 않지만, 규칙도 함께 지워 둔다. */
    .prime-quick-dialog::backdrop {
        background: none;
    }
}

@media (min-width: 40.0625rem) and (prefers-reduced-motion: reduce) {
    .prime-quick-dialog {
        transition: none;
    }
}

.prime-quick-dialog__head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.prime-quick-dialog__head h2 {
    margin: 0;
    color: var(--prime-color-ink);
    font-size: 1.375rem;
}

.prime-quick-dialog__head p {
    /* 한 줄로 들어가야 한다(고객 요청). 좁은 기종에서도 넘치지 않도록 글자 크기를
       화면 폭에 연동하고, 넘칠 때는 낱말 중간이 아니라 띄어쓰기에서 끊기게 한다. */
    margin: 0.375rem 0 0;
    color: var(--prime-color-muted);
    font-size: min(0.9375rem, 3.3vw);
    word-break: keep-all;
}

/* 닫기 버튼은 전체메뉴의 것과 같은 X 모양을 쓴다. */
.prime-quick-dialog__close {
    position: relative;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.prime-quick-dialog__close::before,
.prime-quick-dialog__close::after {
    position: absolute;
    top: 50%;
    left: 15%;
    width: 70%;
    height: 2px;
    background: var(--prime-color-charcoal);
    content: '';
}

.prime-quick-dialog__close::before {
    transform: rotate(45deg);
}

.prime-quick-dialog__close::after {
    transform: rotate(-45deg);
}

/* 팝업 안에서는 한 칸씩 세로로 쌓는다(좁으므로). */
.prime-inquiry--quick .prime-inquiry__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

.prime-inquiry--quick .prime-inquiry__consent {
    padding: 0.875rem 1rem;
    margin-top: 1rem;
}


/* 팝업은 기존 사이트처럼 옅은 회색 바탕에 흰 입력칸이다. */
.prime-quick-dialog {
    background: var(--prime-color-surface);
}

.prime-inquiry--quick .prime-inquiry__field input,
.prime-inquiry--quick .prime-inquiry__field select {
    background: #ffffff;
}

/* 동의는 한 줄로 줄인다. */
.prime-inquiry--quick .prime-inquiry__consent {
    padding: 0;
    border: 0;
    margin: 0.875rem 0 0;
    background: none;
}

.prime-inquiry--quick .prime-inquiry__consent-check {
    font-size: 0.875rem;
}

.prime-inquiry--quick .prime-inquiry__submit {
    margin-top: 0.875rem;
}

.prime-inquiry--quick .prime-inquiry__submit .button {
    width: 100%;
}

/* 폼 아래의 전화·카카오톡. 두 버튼은 같은 모양을 쓰고 색만 다르다. */
.prime-quick-dialog__contact {
    display: grid;
    margin-top: 0.75rem;
    gap: 0.5rem;
}

.prime-quick-dialog__call,
.prime-quick-dialog__kakao {
    display: flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    border-radius: 0.25rem;
    font-size: 1.0625rem;
    font-weight: 700;
    gap: 0.5rem;
    text-decoration: none;
}

.prime-quick-dialog__call {
    color: #ffffff;
    background: var(--prime-color-ink);
}

.prime-quick-dialog__call:hover {
    background: #000000;
}

.prime-quick-dialog__kakao {
    color: #3c1e1e;
    background: #fee500;
}

.prime-quick-dialog__kakao:hover {
    background: #f5dc00;
}


/* ═══ PC 전체메뉴 — 가운데 모달이 아니라 머리말 아래로 펼쳐지는 패널 ═══════════
   고객 요청 2026-08-22: designart.co.kr 의 햄버거 메뉴와 같은 형태로.
   그쪽은 화면을 덮는 상자가 아니라 머리말에 붙어 내려오는 **전체폭 흰 패널**이고,
   하위 항목이 각 메뉴 아래에 열로 늘어선다.

   ⛔ 2026-08-27 — **예전 팝업(2026-08-21 승인본)은 걷어냈다.** 고객이 드롭다운으로
      확정했고, 남겨 둔 팝업 CSS 가 폴드폰 화면 폭에서 되살아나 실제로 사고를 냈다.
      `inc/setup.php` 의 되돌리기 스위치(`ALL_MENU_STYLE`)도 함께 없앴다 —
      되돌릴 수단이 없는데 스위치만 남으면 다음 사람이 그것을 믿고 메뉴를 깨뜨린다.
      **되살려야 한다면 git 이력(커밋 bf67470 이전)에서 꺼내 온다.**

   ⚠️ 이 절은 **넓은 화면 전용**이다(1200px 이상 — `.all-menu-toggle` 이 보이는 구간).
      좁은 화면의 왼쪽 서랍은 2026-08-22 에 고객이 확인한 모습이라 손대지 않는다.
   ⚠️ 칸 구조·아이콘·제목은 2026-08-21 에 승인받은 것을 그대로 쓴다. 바뀌는 것은
      **담는 그릇**(모달 → 드롭다운)과 글자 정렬이다.
   ⚠️ 마크업과 자바스크립트는 그대로다 — 여는·닫는 동작, Escape, 초점 처리가 모두
      쓰던 것 그대로 동작한다. 새로 받는 파일도 0개다. */
@media (min-width: 75rem) {
    /* 메뉴가 열리면 주 메뉴 줄(햄버거 + 상단 메뉴)을 감춘다 — designart 와 같다.
       ⭐ 머리말이 그만큼 낮아지므로 패널이 위로 올라오고 쓸 수 있는 높이도 늘어난다.
          그래서 navigation.js 는 **이 클래스를 붙인 뒤에** 머리말 높이를 잰다. */
    body.all-menu-open.all-menu-style-dropdown .site-header__navigation-row {
        display: none;
    }

    /* ⛔ 뒤 화면의 스크롤을 풀어 두면 **패널이 아니라 뒤 페이지가 스크롤된다** —
          메뉴가 길어 아래쪽(고객센터)이 영영 안 보인다(2026-08-22 고객이 발견).
          그래서 잠금은 기본값(전역 `body.all-menu-open { overflow: hidden }`) 그대로 두고,
          **패널 자신에게 스크롤을 준다**(아래 `.all-menu-dialog`). */

    /* 열려 있는 동안에는 머리말이 오른쪽 고정 버튼(z-index 1850)보다 위에 와야 한다. */
    body.all-menu-open.all-menu-style-dropdown .site-header {
        z-index: 2100;
    }

    /* ⛔ 이 규칙은 `.all-menu-layer[hidden] { display: none }` 과 **특이도가 같다**
          (클래스 2개 vs 클래스1+속성1 = 둘 다 0,2,0). 이 절이 파일 뒤쪽에 있어
          그대로 두면 뒤에 오는 쪽이 이겨 **닫혀 있어야 할 메뉴가 첫 화면부터 펼쳐진다**
          (2026-08-22 실제로 그렇게 나갔다). 그래서 숨김을 여기서 한 번 더 못박는다.
          ⚠️ 아래 규칙에서 `display` 를 건드릴 때는 이 짝을 항상 같이 본다. */
    .all-menu-style-dropdown .all-menu-layer[hidden] {
        display: none;
    }

    .all-menu-style-dropdown .all-menu-layer {
        position: absolute;
        top: 100%;
        right: 0;
        bottom: auto;
        left: 0;
        display: block;
        padding: 0;
    }

    /* 바깥을 눌러 닫는 판. 어둡게 칠하지 않는다(designart 와 같다) —
       그래도 화면 전체를 덮고 있어 「바깥 클릭으로 닫기」는 그대로 동작한다. */
    .all-menu-style-dropdown .all-menu-layer__backdrop {
        position: fixed;
        inset: 0;
        background: transparent;
    }

    .all-menu-style-dropdown .all-menu-dialog {
        /* ⛔ **`display: block` 이어야 한다.** 위 40.0625rem 블록이 이 상자를
              `display: flex; flex-direction: column` 으로 두는데, 거기에 높이 제한을
              걸면 본문(`__body`)이 flex 규칙에 따라 **줄어들고**, 목록은 그 상자 밖으로
              흘러나와 아래 상담 띠 위에 겹쳐 그려진다(2026-08-22 고객이 발견 —
              화면 중간에 전화번호·이메일·버튼이 끼어 보였다).
              보통 흐름으로 두면 본문이 내용만큼 길어지고 상자 전체가 스크롤된다. */
        display: block;
        width: 100%;
        /* 머리말 아래로 남는 높이만큼만 쓰고, 넘치면 **패널 안에서** 스크롤한다.
           `--prime-header-h` 는 열 때 navigation.js 가 실제 머리말 높이로 채워 준다
           (관리자 막대가 있거나 머리말이 바뀌어도 따라간다).
           ⚠️ 스크립트가 없을 때를 위해 기본값 10rem 을 둔다 — 조금 짧아질 뿐 못 쓰게 되지 않는다. */
        max-height: calc(100dvh - var(--prime-header-h, 10rem));
        padding: 2.5rem 0 3rem;
        border-top: 1px solid var(--prime-color-border);
        border-radius: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: 0 0.375rem 0.6875rem -0.3125rem rgb(0 0 0 / 20%);
    }

    /* 패널은 화면 끝까지 하얗고, 안쪽 내용만 머리말과 같은 폭에 맞춘다. */
    .all-menu-style-dropdown .all-menu-dialog__header,
    .all-menu-style-dropdown .all-menu-dialog__body,
    .all-menu-style-dropdown .all-menu-dialog__foot {
        width: min(100%, var(--prime-header-width));
        margin-inline: auto;
    }

    /* 짙은 브랜드 띠는 드롭다운에 어울리지 않는다 — 닫기(✕)만 남긴다.
       제목은 지우지 않고 눈에만 안 보이게 한다: 이 상자의 이름을 그 제목에서
       가져오기 때문이다(aria-labelledby). */
    .all-menu-style-dropdown .all-menu-dialog__header {
        align-items: center;
        justify-content: flex-end;
        padding: 0;
        margin: 0 auto 1.5rem;
        border-radius: 0;
        background: none;
    }

    .all-menu-style-dropdown .all-menu-dialog__brand,
    .all-menu-style-dropdown .all-menu-dialog__header h2 {
        display: none;
    }

    .all-menu-style-dropdown .all-menu-dialog__close {
        color: #666666;
    }

    /* ── 본문: 세로로 쌓는다 (designart 와 같은 형태) ──
       한 줄에 큰 제목 하나, 그 아래에 하위 항목이 가로로 흐른다.
       ⚠️ 기본값(미디어쿼리 밖)이 6칸 격자라 여기서 블록 배치로 되돌린다. */
    .all-menu-style-dropdown .all-menu__list {
        display: block;
        grid-template-columns: none;
    }

    .all-menu-style-dropdown .all-menu__list > li {
        padding: 1.75rem 0;
        border-top: 1px solid var(--prime-color-border);
        border-left: 0;
    }

    .all-menu-style-dropdown .all-menu__list > li:first-child {
        padding-top: 0;
        border-top: 0;
    }

    /* ── 글자 크기를 **게시물 상세 화면과 통일**한다 (고객 요청 2026-08-22) ──
       고객이 기준으로 지목한 두 가지를 그대로 가져왔다.
         1단계 = 게시물 타이틀  `.board-single__page-header h1`
         하위  = 게시물 제목    `.board-single__post-header h2`
       ⚠️ **값을 베껴 적은 것이라 저쪽을 고치면 여기도 같이 고쳐야 한다.**
          변수로 묶지 않은 이유: 그 두 곳은 성격이 다른 화면이라, 한쪽만 바꾸고 싶을 때
          변수로 묶여 있으면 오히려 손대기 어려워진다.

       ⛔ **글자 크기만 맞춘 것이고 태그는 그대로 `<a>`·`<summary>` 다.**
          메뉴를 진짜 `<h1>` 으로 바꾸면 한 화면에 h1 이 여덟 개가 되어 제목 계층이
          무너진다 — 이 프로젝트의 2순위(검색·AI 노출)에서 지키기로 한 규칙이다. */
    .all-menu-style-dropdown .all-menu__list > li > a,
    .all-menu-style-dropdown .all-menu__list > li > details > summary {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        padding: 0;
        border-bottom: 0;
        /* = .board-single__page-header h1
           ⚠️ 글꼴도 같이 맞춰야 한다. 이 테마는 **h1~h6 에만** Pretendard 를 쓰는데
              메뉴 항목은 <a>·<summary> 라 기기 글꼴이 나와 「뭔가 다른」 글씨가 됐다
              (2026-08-22 고객 지적). 태그를 바꾸지 않고 글꼴만 지정한다. */
        font-family: var(--prime-font-brand);
        /* 📌 2026-08-24 고객 요청(3차 PC-4 → 같은 날 추가 요청): 원래 크기의 **80%**.
              두 번에 걸쳐 줄였다 — 100% → 90% → **80%**.
              기준은 언제나 **원래 값**이다(직전 90% 값의 80% 가 아니다).
              clamp 의 세 값을 모두 0.8 배 한다 — 최소·선호·최대를 함께 줄여야
              화면 폭이 바뀌어도 비율이 80% 로 유지된다.
              (원래 값: clamp(2.25rem, 4vw, 2.625rem) = 글 상세 h1 과 같은 크기.
               이제 h1 과 일부러 다르다 — 되돌릴 때는 위 원래 값으로.) */
        font-size: clamp(1.8rem, 3.2vw, 2.1rem);
        font-weight: 500;
        letter-spacing: -0.04em;
        line-height: 1.2;
        text-align: left;
    }

    /* 하위 — 제목 아래에서 가로로 흐르고, 넘치면 다음 줄로 접힌다. */
    .all-menu-style-dropdown .all-menu__list .sub-menu {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 2.5rem;
        padding-top: 0.75rem;
    }

    .all-menu-style-dropdown .all-menu__list .sub-menu a {
        padding: 0.25rem 0;
        /* 📌 2026-08-24 고객 요청(3차 PC-4 → 같은 날 추가 요청): 서브메뉴도 원래의 **80%**.
              원래 값 1.625rem(= .board-single__post-header h2) x 0.8 = 1.3rem.
              (100% → 90%(1.4625rem) → 80%(1.3rem) 순서로 줄였다.)
              여기도 이제 h2 와 일부러 다르다 — 되돌릴 때는 1.625rem 으로. */
        font-family: var(--prime-font-brand);
        font-size: 1.3rem;
        font-weight: 500;
        letter-spacing: -0.035em;
        line-height: 1.5;
        text-align: left;
    }

    /* 맨 아래 상담 띠(전화·이메일·「상담신청 바로가기」)는 이 형태에서 쓰지 않는다
       (고객 요청 2026-08-22). 머리말에 이미 전화 알약과 견적문의가 있어 같은 말이 겹친다.
       ⚠️ 마크업은 그대로 두고 **감추기만** 한다 — 좁은 화면 서랍이 같은 마크업을 쓰므로
          HTML 에서 빼면 그쪽이 함께 바뀐다. */
    .all-menu-style-dropdown .all-menu-dialog__foot {
        display: none;
    }
}

/* 1200~1438px 구간은 머리말이 좌우 15px 여백을 쓴다 — 패널 안쪽도 같은 값을 쓴다. */
@media (min-width: 75rem) and (max-width: 89.875rem) {
    .all-menu-style-dropdown .all-menu-dialog__header,
    .all-menu-style-dropdown .all-menu-dialog__body,
    .all-menu-style-dropdown .all-menu-dialog__foot {
        padding-inline: 0.9375rem;
    }
}