/* 폰트 자체 호스팅.
원래는 jsdelivr(Pretendard)와 Google Fonts(IBM Plex Mono)에서 받아 썼습니다.
외부에 두면 (1) 그쪽이 죽으면 글꼴이 깨지고 (2) 방문자 IP가 제3자에게 가며
(3) 자사 진단 항목인 '외부 리소스 수'에서 스스로 감점됩니다.
Pretendard v1.3.9 동적 서브셋 92개 — 한글은 필요한 구간만 내려받습니다.
본문·제목 전부 Pretendard 입니다. 92개가 한글 영역을 통째로 덮으므로
글자가 서브셋 밖으로 새는 일이 없습니다.
Gothic A1(175개, 2.5MB)은 이전 본문 글꼴이었습니다. 지금 사이트로
바꾸면서 본문을 Pretendard 하나로 모았고, 쓰지 않는 175개를 배포본에서 뺐습니다.
원본 파일은 src/assets/fonts/gothic-a1-v18/ 에 그대로 있습니다 —
되살리려면 tools/font-subset/pick.mjs 를 다시 도십시오.
IBM Plex Mono v20 은 latin·latin-ext 만 씁니다. 이 글꼴은 숫자와 라틴 라벨에만
쓰이고 한글은 Pretendard 로 넘어가므로 키릴·베트남어 서브셋이 필요 없습니다.
IBMPlexMono-*-latin.woff2 세 개는 원본에서 한 군데를 고쳤습니다. 이 글꼴의 '0' 은
가운데에 점이 박힌 모양(윤곽선 3개 — 바깥·안쪽·점)이라 "0원", "22개" 같은 큰 숫자에서
점이 그대로 보입니다. 점을 끄는 OpenType 기능('zero')이 서브셋에 들어 있지 않아
CSS 로는 없앨 수 없어, zero·zero.numr·zero.dnom 세 글자에서 점 윤곽선만 지웠습니다.
폭(600)과 나머지 글자는 건드리지 않았으므로 등폭은 그대로입니다.
글꼴을 새로 받으면 점이 되살아납니다 — tools/font-zero/strip-zero-dot.py 를 다시 돌리십시오.
(IBM Plex 는 OFL 이며 예약 글꼴 이름이 없어 수정·재배포가 허용됩니다.)
빌드가 이 파일을 site.css 앞에 붙여 하나로 내보냅니다.
파일명에 버전이 들어 있어 immutable 캐시와 함께 써도 안전합니다. */
/* IBM Plex Mono 400 / latin-ext */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/ibm-plex-mono-v20/IBMPlexMono-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 400 / latin */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/ibm-plex-mono-v20/IBMPlexMono-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 500 / latin-ext */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fonts/ibm-plex-mono-v20/IBMPlexMono-500-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 500 / latin */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fonts/ibm-plex-mono-v20/IBMPlexMono-500-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 600 / latin-ext */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(fonts/ibm-plex-mono-v20/IBMPlexMono-600-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 600 / latin */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(fonts/ibm-plex-mono-v20/IBMPlexMono-600-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/**
* Minified by jsDelivr using clean-css v5.3.3.
* Original file: /gh/orioncactus/pretendard@1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css
*
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
*/
@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/PretendardVariable.subset.19.woff2) format('woff2-variations');unicode-range:U+caf4-cb47,U+cb4a-cb90}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/PretendardVariable.subset.36.woff2) format('woff2-variations');unicode-range:U+bf07,U+bf09-bf3f,U+bf41-bf4f,U+bf52-bf54,U+bf56-bfa6}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}@font-face{font-family:'Pretendard Variable';font-style:normal;font-display:swap;font-weight:45 920;src:url(fonts/pretendard-v1.3.9/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}
/*# sourceMappingURL=/sm/49af798104dba87a942919357f383e653ce9152ba9bdc9bbfa8ba846a1b04235.map */
/* ─────────────────────────────────────────────────────────────
Gothic A1 v18 (OFL) 은 이전 본문·제목 글꼴이었습니다.
요양 사이트로 옮기면서 본문을 Pretendard 하나로 모았고, 여기 있던
@font-face 175개를 걷어냈습니다 — 배포본에서 2.5MB 가 빠집니다.
원본 495개 파일은 src/assets/fonts/gothic-a1-v18/ 에 그대로 있으므로,
되살리려면 tools/font-subset/pick.mjs 를 다시 돌리면 됩니다.
Pretendard 동적 서브셋 92개는 한글 영역을 통째로 덮습니다 —
서브셋 밖으로 새는 글자가 없어 따로 골라내는 단계가 필요 없습니다.
───────────────────────────────────────────────────────────── */
/* 브릿지 마케팅 — "계기판" 디자인 시스템.
그라데이션·글래스모피즘·이모지·패럴랙스를 쓰지 않습니다.
본문은 Pretendard, 숫자와 라틴 라벨은 IBM Plex Mono 로 갈라 놓는 것이 이 시스템의 핵심입니다.
면은 종이(#FBFAF7)와 흰색 두 층, 강조는 깊은 초록 하나, 주의는 흙빛 하나.
여백을 넓게 가져가고 그림자 대신 1px 보더로 구획합니다.
모서리는 8px 이하 — 12px 이상은 유아 시설처럼 읽힙니다.
어르신 얼굴 사진으로 감정을 자극하지 않습니다. 사진은 공간 위주입니다.
다크모드에 대응하지 않습니다.
설계 원본은 인라인 style 속성으로 짜여 있지만 여기서는 클래스로 옮깁니다.
인라인 style 속성을 쓰지 마십시오 — CSP 가 style-src 'self' 라서 브라우저가 차단합니다.
(자바스크립트의 el.style.x = y 는 CSSOM 이라 차단되지 않습니다.)
/demo/ 예시 시안 4벌은 이 시스템을 쓰지 않습니다 — 다른 회사의 사이트처럼
보여야 하는 자리라 글꼴(Pretendard)과 팔레트를 따로 둡니다. 파일 아래쪽
'예시 시안' 구역을 v2 로 끌어오지 마십시오. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
/* ── 팔레트 ────────────────────────────────────────────────
밝되 채도가 낮고 여백이 넓은 방향. 파스텔을 쓰지 않습니다 —
주야간보호센터 사이트가 유아 시설처럼 보이면 보호자가 기관으로 읽지 않습니다.
면은 종이(#FBFAF7)와 흰색 두 층, 강조는 깊은 초록 하나, 주의는 흙빛 하나.
색을 더 늘리지 마십시오. 상태를 색으로 나누기 시작하면 표가 신호등이 됩니다. */
/* 글자 */
--ink:#1C1F23;
--ink2:#3a424b;
--mut:#5E6672; /* 잔글씨·메타·눈금 라벨 — 종이 위 5.9:1 */
--mut-strong:#5E6672; /* 표 머리글·지표 라벨 */
--mut2:#5E6672; /* 카드 부제·보조 문단 */
/* 선 — 그림자를 쓰지 않고 1px 보더로만 구획합니다. */
--line:#E2DED6;
--line2:#EDEAE4;
--line3:#E2DED6;
--edge:#D6D1C7; /* 폼 입력 테두리 */
--sep:#C8C2B6; /* 브레드크럼 슬래시 */
--sep2:#B8B2A5; /* 라벨 사이 가운뎃점 */
/* 면 */
--bg:#FBFAF7; /* 종이 */
--soft:#F3F1EC; /* 한 단 눕힌 면 — .sec.alt, 히어로 띠, 푸터 */
--soft2:#F7F5F1; /* 표 안에서 한 행만 눕히는 자리 */
--ph:#EDEAE4; /* 사진 자리 · 배점 막대 바탕 */
/* 강조 면 — 예전 팔레트의 '어두운 면'이 있던 자리입니다.
이름을 --dark 로 둔 것은 이 면 위에 흰 글자가 얹힌다는 규칙이 그대로여서입니다.
값만 잉크블랙에서 깊은 초록으로 옮겼습니다(흰 글자 대비 5.9:1). */
--dark:#2F6F5E;
--dark2:#27594C; /* 강조 면 안의 입력칸 */
--dline:#3F8270;
--dline2:#4A8E7B;
--dline3:#5F9C8B;
/* 푸터는 강조 면이 아니라 종이 한 단 아래입니다 — 고지 문구가 길어서
초록 바탕에 얹으면 페이지 아래쪽이 통째로 색면이 됩니다. */
--foot:#F3F1EC;
--foot-line:#E2DED6;
/* 강조 면 위의 글자 */
--on-dark:#D6E7E0;
--on-dark2:#B2CFC4;
--on-dark3:#FFFFFF;
--on-dark4:#5E6672; /* 헤더 메뉴 — 헤더는 밝은 면입니다 */
/* 강조 */
--accent:#2F6F5E;
--accent-h:#255A4C;
--accent-soft:#E7F0EC;
--accent2:#9BCBBA; /* 강조 면 위의 강조 */
--accent3:#BBD8CE; /* 링크 밑줄 */
--warn:#B4632B; /* 미흡 — 붉은 경고를 쓰지 않습니다 */
--warn-soft:#F5EBE1;
--ok:#2F6F5E;
/* 판정 색은 둘뿐입니다. 양호는 강조색, 미흡은 주의색.
다섯 단계로 나눠 색을 늘리면 결과 화면이 신호등이 되고,
'고칠 것을 알려 주는 표'가 '점수를 매기는 표'로 읽힙니다. */
--ok2:#2F6F5E;
--mid:#B4632B;
--low:#B4632B;
--bad:#B4632B;
/* 치수 */
--wrap:1120px;
--pad:32px;
/* 세로 간격 눈금. 섹션 안의 블록은 이 셋 중 하나를 씁니다. */
--gap-s:16px; /* 붙여 두는 것 — 보조 문단, 버튼 줄, 콜아웃 */
--gap:24px; /* 기본 블록 간격 — 표, 카드, 목록, 단계, 문답 */
--gap-l:36px; /* 섹션 안에서 화제가 바뀔 때 */
--sec-y:84px; /* 섹션 상하 여백 — 여백을 넓게 가져갑니다 */
--card-pad:24px;/* 카드 안쪽 여백 */
/* 모서리는 8px 이하로만 씁니다. 12px 이상은 유아용으로 읽힙니다. */
--r-lg:8px;
--r:8px;
--r-s:6px;
--r-xs:4px;
/* 글꼴 두 종. 본문·제목은 Pretendard, 숫자와 라틴 라벨은 IBM Plex Mono.
세 번째 글꼴을 추가하지 마십시오. */
--sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
/* 타입 스케일. 새 크기를 즉석에서 만들지 마십시오. */
--fs-h1:42px; /* 홈 히어로 */
--fs-h1s:36px; /* 하위 페이지 히어로 */
--fs-h2:28px;
--fs-h3:20px; /* 단계·분류 제목 */
--fs-h4:17px; /* 카드 제목 */
--fs-body:17px;
--fs-sub:15.5px;
--fs-sub2:15px;
--fs-note:13px;
--fs-micro:12.5px;
/* 스탯 숫자 — 등폭으로 자릿수를 맞춥니다. */
--fs-kpi:40px;
/* 행간·자간. 제목은 붙이고 본문은 풉니다. */
--lh-h1:1.28;
--lh-h2:1.34;
--lh-head:1.4;
--lh-body:1.75;
--lh-sub:1.7;
--lh-note:1.7;
--lh-label:1.35; /* 라벨·버튼 — 본문 행간이 상자를 부풀리는 자리 */
--ls-base:-.012em;
--ls-h1:-.032em;
--ls-h2:-.028em;
--ls-head:-.024em;
--ls-sum:-.02em;
/* 한 줄 최대 길이. 한글은 30em 을 넘으면 다음 줄 첫 글자를 놓칩니다. */
--measure:30em;
--measure-l:46em; /* 섹션 리드 문단 — 전폭 표·카드 위에 얹히는 자리 */
--measure-w:46em; /* 표 뒤 보충 문단 */
--measure-n:62em; /* 각주 */
--measure-h:16em;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
font-family:var(--sans);
font-size:var(--fs-body);
/* 본문 행간이 기본값입니다. 제목(1.32~1.4)과 라벨(1.35)은 아래에서 되돌립니다 —
그 둘까지 1.75 로 두면 제목 상자 안에 죽은 여백이 생겨 72px 섹션 여백과의
대비가 뭉개집니다. 라벨 목록은 '라벨·컨트롤 행간' 규칙 한 곳에 모아 두었습니다. */
line-height:var(--lh-body);
letter-spacing:var(--ls-base);
color:var(--ink);
background:var(--bg);
/* 한글 줄바꿈 3종 세트. 단어(어절) 중간에서 끊지 않고, 끊을 수 없는 긴 URL 만
강제로 접으며, 마지막 줄에 한두 글자만 남는 고아 줄을 브라우저가 피하게 합니다. */
word-break:keep-all;
overflow-wrap:break-word;
text-wrap:pretty;
-webkit-font-smoothing:antialiased;
}
/* 상속이 닿지 않는 요소(폼 컨트롤·표·SVG 밖 텍스트)까지 같은 규칙을 겁니다. */
p,li,dd,dt,td,th,summary,label,figcaption,blockquote,
input,select,textarea,button{word-break:keep-all;overflow-wrap:break-word}
textarea,input,select,button{font-family:inherit;letter-spacing:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px}
/* 화면에는 없고 보조기기와 크롤러에는 있는 텍스트. 링크 목적 보충에만 씁니다.
숨긴 '링크'가 아니라 숨긴 '설명'입니다 — 링크 자체는 화면에 보입니다. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.nw{font-size:.9em;opacity:.8;margin-left:2px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;color:var(--ink);padding:10px 16px;border-radius:4px}
/* 키보드 포커스는 반드시 보여야 합니다. 테두리 색만 바꾸는 방식은 WCAG 2.4.11 의
두께·대비 요건을 채우지 못합니다. 마우스 사용자에게는 :focus-visible 이 뜨지 않습니다. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
/* 강조 면(초록) 위에서는 초록 테두리가 보이지 않습니다.
머리와 발은 밝은 면이라 여기서 뺐습니다 — 기본 테두리가 그대로 보입니다. */
.cta :focus-visible,.hero-card :focus-visible,
.contact-card :focus-visible,.total :focus-visible{outline-color:#fff}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-h)}
/* 제목은 좌측 정렬·짧은 행·붙은 자간. 굵기는 800 입니다 — v2 설계가 제목을
본문(400)에서 두 단계 떼어 놓는 방식으로 위계를 냅니다.
text-wrap:balance 는 줄 길이를 고르게 맞추려고
을 무시하는 쪽으로
움직여 고아 줄을 만듭니다 — pretty 로 둡니다. */
h1,h2,h3,h4{font-weight:800;text-align:left;text-wrap:pretty;color:var(--ink);
line-height:var(--lh-head);letter-spacing:var(--ls-head);max-width:none}
/* 폭을 묶는 것은 h1 하나입니다. h2 아래로는 컨테이너 폭을 그대로 씁니다 —
설계의 h2 는 한 줄에 앉는 것이 전제라 16em 으로 조이면 두 줄로 접힙니다. */
h1{font-size:var(--fs-h1s);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);max-width:var(--measure-h)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4);font-weight:700}
/* 홈 히어로만 44px 입니다. 나머지 페이지의 h1 은 40px. */
.home-h1{font-size:var(--fs-h1)}
/* 본문 한 줄은 30em 을 넘지 않습니다. 컨테이너 폭이 1120px 라도 글줄은 여기서 끊깁니다. */
p,li,dd,figcaption,blockquote{max-width:var(--measure)}
/* 라벨·컨트롤 행간 — 본문 1.8 이 상자를 부풀리는 자리만 되돌립니다. */
.nav a,.nav-cta,.brand-name,.kicker,.eyebrow,.badge,.tag,.lat,.btn,.crumb,
.chips a,.pills span,.related a,.qtag,.gain,.foot-h,thead th,.th-amt,
.yes,.no,.part,.sub-in,.stat span,.split .lb,.split .vl,.split .hd,
.metric .lb,.metric .vl span,.plan .sub,.plan .per,.plan .tier,.dial .u,
.area .an,.area .as,.qi-no,.qi-ty,.qg-meta,.qg-sum-t .lb,.qg-sum-t .vl,
.compare .pair,.compare a,.total .eq,.basis > div.h,.cells .t,.deliver .t,
.terms .t,.fixes .t,.steps .w,.steps .t,.sibs .nm,.sibs .no,.sibs .here,
.ba-cell .lb,label.fl,.qg-doc-h b,.scorebox .surl,.rows .go,.rows .dt,
.res-h,.plan-h,.check-inline,.consent > summary,.demo-flag-tag
{line-height:var(--lh-label)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
/* 자간을 벌려도 되는 곳 — 라틴 대문자·숫자 전용입니다.
한글에 트래킹을 걸면 음절이 흩어져 단어 경계가 무너집니다.
한글이 섞일 수 있는 라벨에는 절대 쓰지 마십시오. */
.lat{letter-spacing:.14em;text-transform:uppercase}
/* ── 헤더 ───────────────────────────── */
/* 로고 그림을 쓰지 않습니다 — v2 설계의 머리는 글자 하나입니다. */
/* 머리는 종이 위에 얹힌 밝은 띠입니다. 색면으로 누르지 않고 1px 밑선으로만 끊습니다. */
.top{background:var(--bg);color:var(--ink);position:sticky;top:0;z-index:40;
border-bottom:1px solid var(--line)}
.top-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);height:64px;
display:flex;align-items:center;justify-content:space-between;gap:32px}
.brand{display:flex;align-items:center;color:var(--ink);flex-shrink:0}
.brand:hover{color:var(--ink)}
.brand-name{font-weight:800;font-size:17px;letter-spacing:var(--ls-head);white-space:nowrap}
.nav{display:flex;align-items:center;gap:6px}
.nav a{font-size:14.5px;font-weight:500;color:var(--on-dark4);padding:8px 14px;
border-radius:6px;white-space:nowrap}
.nav a:hover{color:var(--ink);background:var(--soft)}
/* 지금 어느 장에 있는지만 알려 줍니다. 색면을 깔지 않고 글자색과 굵기로만 냅니다. */
.nav a.on{color:var(--accent);font-weight:700}
.nav-cta{margin-left:10px;background:var(--accent);color:#fff !important;font-weight:700;
font-size:14.5px;padding:9px 18px;border-radius:var(--r-s);white-space:nowrap}
.nav-cta:hover{background:var(--accent-h);color:#fff !important}
/* 햄버거 여닫이 체크박스. 넓은 화면에서는 짝이 되는 .navbtn 이 보이지 않으므로
display:none 으로 탭 순서에서도 빼 둡니다. 그렇지 않으면 키보드 사용자가
화면에 없는 컨트롤에 멈춥니다. */
.navtoggle{display:none}
.navbtn{display:none}
.navtoggle:focus-visible + .navbtn{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:800px){
.navtoggle{display:block;position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.navbtn{display:flex;flex-direction:column;justify-content:center;gap:4px;margin-left:auto;
width:38px;height:38px;padding:9px;cursor:pointer;border:1px solid var(--edge);border-radius:var(--r-xs)}
.navbtn span{display:block;height:2px;background:var(--ink);border-radius:1px}
.nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--bg);
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
flex-direction:column;align-items:stretch;
padding:8px 24px 16px;gap:0;margin-left:0}
.navtoggle:checked ~ .nav{display:flex}
.nav a{padding:12px 6px;border-bottom:1px solid var(--line2)}
.top-end{gap:12px}
.nav-cta{padding:8px 13px;font-size:var(--fs-note)}
}
/* .nav-cta 는 햄버거 컨테이너(.nav) 안에 있습니다. 여기서 display:none 을 주면
헤더에도 햄버거 안에도 '개선 요청'이 사라집니다 — 390px 기기 대부분이 해당됐습니다. */
@media(max-width:520px){
.top-in{gap:12px}
.nav .nav-cta{display:block;width:100%;text-align:center;margin-top:8px;padding:12px 16px}
}
/* ── 히어로 (연한 계기판 띠) ─────────── */
/* 설계 v2 는 브레드크럼을 히어로 '안'에 넣습니다 — 띠 위에 얹지 않습니다.
그래서 .crumb 는 .hero-in 과 같은 좌우 여백을 쓰되 자기 폭 계산을 하지 않고,
히어로 안쪽 위 여백(56px)을 자기 padding-top 으로 냅니다. */
.hero{background:var(--soft);border-bottom:1px solid var(--line)}
.crumb{max-width:var(--wrap);margin:0 auto;padding:56px var(--pad) 0;
display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:normal;
font-size:var(--fs-note);color:var(--mut)}
/* 브레드크럼: 각 조각은 안 끊고, 마지막 현재 페이지 이름만 줄바꿈을 허용합니다.
제목이 긴 글에서 통째로 nowrap 이면 좁은 화면을 뚫고 나갑니다. */
.crumb a{color:var(--mut);white-space:nowrap}
.crumb a:hover{color:var(--ink2)}
.crumb [aria-current]{white-space:normal;color:var(--ink2)}
.crumb i{font-style:normal;color:var(--sep)}
/* 브레드크럼이 있으면 히어로 위 여백은 브레드크럼이 이미 냈습니다(56px).
그 아래 28px 만 띄우고 시작합니다. */
.hero-in{max-width:var(--wrap);margin:0 auto;padding:64px var(--pad) 72px}
.crumb + .hero-in{padding-top:28px;padding-bottom:64px}
/* 무료 진단 히어로만 아래를 72 로 엽니다 — 이 페이지의 히어로가 곧 본론입니다. */
.crumb + .hero-in.wide{padding-bottom:72px}
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:64px;align-items:start}
.hero-split.wide{grid-template-columns:minmax(0,1fr) 380px}
/* 히어로 머리 라벨 — "경기·인천 · 독립 운영 · 주야간보호센터 전담".
설계에서 이 줄은 모노가 아니라 본문 글꼴 굵은 13px 입니다. */
.kicker{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
font-size:var(--fs-note);font-weight:600;color:var(--accent);margin-bottom:20px}
.kicker i{font-style:normal;color:var(--sep2)}
.kicker span{white-space:nowrap}
.lede{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink2);margin-top:20px;max-width:var(--measure)}
.hero-split .lede{margin-top:20px}
.lede b,.lede strong{color:var(--ink);font-weight:700}
.h1row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.h1row h1,.h1row h2{margin:0}
.h1row .cnt{font-size:14px;color:var(--mut);white-space:nowrap;font-weight:400;letter-spacing:var(--ls-base)}
/* 지표 스트립 — 히어로의 숫자 세 칸.
위쪽 한 줄만 잉크색으로 긋고 아래는 열지 않습니다. 칸 사이는 연한 세로선.
숫자는 등폭(tabular-nums)이라 자릿수가 달라도 세로줄이 맞습니다. */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px;
border-top:1px solid var(--ink)}
.stat{padding:18px 24px 0}
.stat + .stat{border-left:1px solid var(--line)}
.stat:first-child{padding-left:0}
.stat:last-child{padding-right:0}
.stat b{display:flex;align-items:baseline;gap:3px;font-family:var(--mono);font-size:var(--fs-kpi);
font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:normal;
font-variant-numeric:tabular-nums;white-space:nowrap}
.stat b small,.stat b .pre{font-family:var(--sans);font-size:var(--fs-sub2);color:var(--mut-strong);
font-weight:400;letter-spacing:var(--ls-base);line-height:normal}
/* 직계 자식만 라벨입니다 — `>` 를 빼면 큰 숫자를 감싼 span 까지 13px 로 줄어듭니다. */
.stat > span{display:block;font-size:var(--fs-note);color:var(--mut-strong);margin-top:4px;
line-height:normal}
/* 하위 페이지의 스트립은 두 눈금 작습니다. */
.hero-split.wide .stat b,.stats.sm .stat b{font-size:32px}
/* 히어로 우측 카드 */
.hero-card{background:var(--dark);border-radius:var(--r-lg);padding:26px;color:#fff}
.hero-card h2{font-size:19px;font-weight:700;color:#fff;margin-bottom:8px;max-width:none;
letter-spacing:var(--ls-head);line-height:normal}
.hero-card > p{font-size:14px;color:var(--on-dark);line-height:var(--lh-sub);margin-bottom:20px;max-width:none}
.hero-side{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--card-pad)}
.hero-side .eyebrow{margin-bottom:14px}
/* 형제 목록 (서비스 5종 네비) */
.sibs{display:flex;flex-direction:column}
.sibs a{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line2);color:var(--ink2)}
.sibs a:last-child{border-bottom:0}
.sibs a:hover{text-decoration:none;color:var(--ink)}
.sibs .no{font-family:var(--mono);font-size:var(--fs-note);color:var(--mut);font-weight:600}
.sibs .nm{font-size:var(--fs-sub)}
.sibs a.on .no{color:var(--accent)}
.sibs a.on .nm{font-weight:700;color:var(--ink)}
.sibs .here{margin-left:auto;font-size:var(--fs-note);color:var(--accent)}
/* ── 섹션 ───────────────────────────── */
/* 설계 v2 는 경계선을 섹션 '위'에 긋습니다. 히어로가 이미 아래쪽 선을 냈으므로
히어로 바로 다음 섹션만 선을 빼야 두 줄이 겹치지 않습니다. */
.sec{border-top:1px solid var(--line3)}
.hero + .sec,main > .sec:first-child{border-top:0}
.sec.alt{background:var(--soft)}
/* 진단 결과가 아직 없는 동안에는 섹션째로 접습니다. check.js 가 내용을 채우면
:empty 가 풀리며 저절로 나타납니다. */
.sec:has(#ck-res:empty){display:none}
/* 섹션 머리 번호 — "01 — 관찰". 유일하게 자간을 벌리는 자리입니다. */
.eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;
line-height:normal;color:var(--mut);margin-bottom:14px;max-width:none}
/* 섹션 안의 형제 간격은 margin 이 아니라 gap 으로 냅니다.
자식마다 margin-top 을 얹으면 값이 흩어지고 첫 자식에 죽은 여백이 생깁니다.
.mt / .mt-s / .mt-l 은 이 gap 을 기준으로 한 '차이값'으로 바뀌었습니다. */
/* 세로 리듬은 flex gap 이 아니라 margin 으로 냅니다.
설계가 그렇게 짜여 있고(머리번호 14 · 제목 16 · 리드 뒤 32 · 그다음 24),
컴포넌트마다 자기 margin-top 을 들고 있어서 gap 과 겹치면 값이 두 번 더해집니다.
인접 형제 margin 은 서로 상쇄(큰 쪽만 남음)되므로 이 모델이 설계와 정확히 같습니다. */
.sec-in{max-width:var(--wrap);margin:0 auto;padding:var(--sec-y) var(--pad)}
.sec-in > *{margin-top:0}
.sec-in > * + *{margin-top:var(--gap)}
/* 머리번호 → 제목 14, 제목 → 리드 16. 뒤 요소의 margin-top 을 0 으로 눌러야
상쇄에서 큰 쪽(24)이 이기지 않습니다. */
.sec-in > .eyebrow{margin-bottom:14px}
.sec-in > .eyebrow + *{margin-top:0}
.sec-in > h2,.sec-in > .sec-h{margin-bottom:16px}
.sec-in > h2 + *,.sec-in > .sec-h + *{margin-top:0}
/* 리드 문단 없이 제목 바로 뒤에 표·격자가 오는 섹션은 제목 아래를 32 로 엽니다
(설계의 '비용은 얼마입니까'·'결과 화면에 무엇이 나옵니까'가 이 모양입니다). */
.sec-in > h2:not(:has(+ p)),.sec-in > .sec-h:not(:has(+ p)){margin-bottom:32px}
/* 리드 문단 뒤는 32 — 여기서 머리와 본문이 갈립니다. */
.sec-in > h2 + p,.sec-in > .sec-h + p{margin-bottom:32px}
/* 리드 문단은 기본 글줄(30em)보다 넓게 씁니다 — 전폭 표·카드 위에 얹히는 자리라
30em 이면 오른쪽이 절반 가까이 비어 한쪽으로 쏠려 보입니다.
17px 기준 46em 이면 한 줄 46자 남짓으로 읽는 데 무리가 없습니다. */
.sec-in > h2 + p,.sec-in > .sec-h + p,.sec-in > .eyebrow + h2 + p,.sec-head .lead-p{
max-width:var(--measure-l)}
/* 머리를 통째로 묶은 변형(오른쪽 단서가 붙는 자리)도 같은 32 를 냅니다. */
.sec-in > .sec-head{margin-bottom:32px}
.sec-in > .sec-head + *{margin-top:0}
/* 선택자 전체를 :where() 로 감싸 가중치를 (0,0,0) 으로 낮춥니다.
`.sec :where(p)` 은 .sec 의 무게가 그대로 남아 (0,1,0) 이 되고, 그러면 뒤에
오는 .eyebrow · .note · .after 같은 클래스 한 개짜리 규칙과 비겨서
'나중에 쓴 쪽'이 이깁니다 — 파일 순서에 리듬이 걸리는 상태였습니다.
폭은 기본 p 규칙이 이미 30em 을 주므로 여기서 다시 잡지 않습니다. */
:where(.sec) :where(p){color:var(--ink2);line-height:var(--lh-body)}
.sec-in > h2 + p{font-size:var(--fs-body)}
/* 이어지는 문단은 한 덩어리로 붙입니다 (24px 에서 16px 로). */
.sec-in > p + p{margin-top:var(--gap-s)}
.sec p b,.sec p strong{color:var(--ink);font-weight:700}
.sec-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sec-h h2{margin:0}
/* sub 는 '금액 + 조건' 두 조각이라 감싼 span 을 투명하게 만들어
두 조각이 각각 .sec-h 의 flex 항목이 되게 합니다. 직계 자식만 골라야
안쪽의 .amt-in·.cnd 까지 display:contents 가 되어 붙어 버리지 않습니다. */
.sec-h > span{display:contents}
/* 제목 옆에 금액과 조건을 나란히 답니다 — "2단계 · 기반 구축 480만원 1회 6~8주". */
.amt-in{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--accent);white-space:nowrap}
.cnd{font-size:14px;color:var(--mut);white-space:nowrap}
/* 표 안에서 '무료'만 강조색 굵은 글씨로 세웁니다. */
.free-in{font-size:16px;font-weight:800;color:var(--accent);white-space:nowrap}
/* 머리 오른쪽 끝에 단서를 다는 변형 — 홈 '04 — 시안'.
밑선을 맞춰야 하므로 flex-end 로 붙입니다. */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.sec-head > div{min-width:0}
.sec-head .eyebrow{margin-bottom:14px}
.sec-head h2{margin-bottom:16px}
.sec-head .lead-p{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink2)}
.sec-aside{font-size:var(--fs-note);color:var(--mut) !important;padding-bottom:4px;
white-space:nowrap;max-width:none}
/* 리드 문단이 머리 밖에 있을 때(대부분)의 폭·색은 .sec :where(p) 가 이미 잡습니다. */
.lead-p{max-width:var(--measure)}
/* 사례 페이지의 해설 산문. 코드 블록과 문단이 섞여 한 덩어리로 읽히는 자리라
리드 문단(30em)보다 넓게 씁니다 — 30em 이면 오른쪽이 절반 가까이 빕니다. */
.prose p,.prose li{max-width:46em}
.prose > * + *{margin-top:var(--gap-s)}
.prose pre.code{max-width:46em}
/* 표 뒤에 한 문단 덧붙이는 자리 — 본문보다 한 톤 낮고 조금 더 넓습니다. */
.after{font-size:var(--fs-sub);color:var(--mut2) !important;line-height:var(--lh-body);
max-width:var(--measure-w)}
/* 지표 스트립에서 한 숫자만 강조할 때 (진단 비용 0원). */
.stat b .ac{color:var(--accent)}
/* 원인 표의 '결과' 열 — 잃는 것을 적는 칸이라 색을 하나 씁니다. */
.lost{color:var(--accent)}
/* 요금 표의 금액 칸. */
/* 금액 칸은 표의 본문 행간(1.7)을 따르지 않습니다 — 두 줄짜리 숫자 칸이
행 전체를 15px 씩 밀어 올립니다. */
td .free{display:block;font-size:18px;font-weight:800;line-height:normal;
color:var(--accent);white-space:nowrap}
td .amt{display:block;font-family:var(--mono);font-size:18px;font-weight:600;line-height:normal;
color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
td .per{display:block;font-size:var(--fs-micro);line-height:normal;color:var(--mut);
white-space:nowrap;margin-top:2px}
.mt{margin-top:var(--gap)}
.mt-s{margin-top:var(--gap-s)}
.mt-l{margin-top:var(--gap-l)}
/* `.sec-in > * + *` 가 (0,1,1) 이라 클래스 하나(0,1,0)로는 못 이깁니다. */
.sec-in > .mt{margin-top:var(--gap)}
.sec-in > .mt-s{margin-top:var(--gap-s)}
.sec-in > .mt-l{margin-top:var(--gap-l)}
ul,ol{padding-left:1.15em;color:var(--ink2)}
li{margin-bottom:7px;line-height:var(--lh-body)}
li::marker{color:var(--mut)}
ul.check{list-style:none;padding-left:0;display:flex;flex-direction:column;gap:9px}
ul.check li{position:relative;padding-left:22px;margin:0;font-size:var(--fs-sub);color:var(--ink2)}
ul.check li::before{content:"";position:absolute;left:4px;top:.4em;width:5px;height:9px;
border:2px solid var(--accent);border-top:0;border-left:0;transform:rotate(45deg)}
ul.plain{list-style:none;padding-left:0}
/* ── 표 ─────────────────────────────── */
/* 실제 을 씁니다. 진단 엔진이 표의 존재를 채점하고, AI 인용에도 표가 유리합니다. */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-top:var(--gap)}
/* table-layout:fixed — 모든 행이 같은 열 폭을 씁니다. auto 로 두면 내용 길이에 따라
열이 밀려 행마다 눈금이 어긋납니다(격자로 짤 때 grid-template-columns 를 행이 아니라
컨테이너에 두는 것과 같은 이유입니다). 표 마크업 자체는 그대로 둡니다 —
진단 엔진이 의 존재를 채점하고 AI 도 표를 우선 인용합니다. */
table{width:100%;border-collapse:collapse;table-layout:fixed;
font-size:var(--fs-sub);min-width:560px}
/* 열 폭 자체는 html.mjs 의 table() 이 로 계산해 넣습니다.
fixed 는 폭을 안 주면 열을 똑같이 나눠, 금액 한 칸이 설명 한 칸과 같은 폭을
가져갑니다. 손으로 쓴 에는 col 이 없으므로 첫 열만 잡아 둡니다. */
table:not(:has(col)) th:first-child{width:26%}
/* 머리글은 라벨처럼 보이게 작게·굵게 두되 모노는 쓰지 않습니다.
모노 글꼴에 한글 글리프가 없어 "무엇을 봅니까" 같은 머리글의 자간이 벌어집니다. */
/* 열 폭을 로 못 박은 뒤로는 머리글이 한 줄을 고집하면 칸을 넘칩니다.
keep-all 이 어절은 지켜 주므로 줄바꿈만 허용합니다. */
thead th{background:var(--soft);font-size:var(--fs-note);letter-spacing:var(--ls-base);
font-weight:600;color:var(--mut-strong);text-align:left;padding:12px 20px;
border-bottom:1px solid var(--line);line-height:normal}
tbody th,tbody td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line2);
line-height:var(--lh-sub)}
/* 한 줄짜리 라벨·숫자만 들어가는 표(등급표·배점표·검색 기록)는 행간을 풀지
않습니다. 1.7 을 걸면 한 줄인 칸까지 6px 씩 부풀어 표가 길어집니다. */
.tw.tight tbody th,.tw.tight tbody td{line-height:normal}
/* 칸의 위아래 여백. 설계가 표마다 달리 씁니다 — 등급표처럼 배지 한 칸짜리는
좁게(14), 문장이 두 줄 들어가는 표는 넓게(18). */
.tw.p14 tbody th,.tw.p14 tbody td{padding:14px 20px}
.tw.p15 tbody th,.tw.p15 tbody td{padding:15px 20px}
.tw.p18 tbody th,.tw.p18 tbody td{padding:18px 20px}
/* 표도 같은 이유로 폭을 묶지 않습니다. 클래스는 남겨 두되 값은 비웁니다 —
특정 표만 좁혀야 할 일이 생기면 여기에 값을 넣으면 됩니다. */
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
/* 첫 열은 행의 이름표라 굵기를 한 단계 더 올립니다(설계 700). */
tbody th{font-weight:700;font-size:var(--fs-sub);color:var(--ink)}
/* 표 안에서 결론에 해당하는 행 하나만 눕히는 자리(합계·강조행). */
tbody tr.hi{background:var(--soft2)}
/* 비교표의 열 머리에 금액을 함께 넣습니다(요금 3단계). */
.th-amt{display:block;font-family:var(--mono);font-size:var(--fs-sub);font-weight:600;
letter-spacing:var(--ls-base);color:var(--ink);margin-top:8px;
font-variant-numeric:tabular-nums;white-space:nowrap}
/* 표 안에서 항목에 붙는 짧은 단서와, 해당 없음 표시. */
.sub-in{font-weight:400;color:var(--mut);white-space:nowrap}
/* 표 안에서 한 줄 경고를 덧붙일 때. 배점표의 '대부분 0점' 같은 대목입니다. */
.warn-in{display:block;margin-top:6px;font-size:14.5px;color:var(--accent);font-weight:700}
h3 .sub-in{white-space:normal;font-size:var(--fs-sub)}
.off{color:var(--mut)}
tbody td{color:var(--ink2)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
/* 표의 숫자·금액은 우측 정렬. 자릿수가 세로로 맞아야 크기를 눈으로 비교할 수 있습니다.
라벨(첫 열)은 좌측 정렬 그대로 둡니다. */
td.num,th.num{text-align:right}
/* 열 전체를 오른쪽으로 붙이는 자리(비교표의 스탠다드·프리미엄).
금액 칸만 오른쪽으로 가면 같은 열의 '월 4편' 같은 칸과 세로줄이 어긋납니다. */
th.ar,td.ar{text-align:right}
tbody th{text-align:left}
.yes{color:var(--ok);font-weight:600;font-family:var(--mono);font-size:var(--fs-note);white-space:nowrap}
.no{color:var(--bad);font-weight:600;font-family:var(--mono);font-size:var(--fs-note);white-space:nowrap}
.part{color:var(--mid);font-weight:600;font-family:var(--mono);font-size:var(--fs-note);white-space:nowrap}
/* ── 격자·카드 ──────────────────────── */
.grid{display:grid;gap:var(--gap-s);margin-top:var(--gap)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{border:1px solid var(--line);border-radius:var(--r);padding:var(--card-pad);background:#fff}
.card h3,.card h4{font-size:var(--fs-h4);font-weight:700;letter-spacing:var(--ls-base);
line-height:var(--lh-head);max-width:none}
.card p{font-size:var(--fs-sub2);color:var(--ink2);line-height:var(--lh-body);margin-top:8px;max-width:none}
a.card{color:inherit;display:block;transition:border-color .15s}
a.card:hover{border-color:var(--accent3);color:inherit}
a.card .more{display:block;font-size:var(--fs-sub);color:var(--accent);font-weight:600;margin-top:12px}
/* 카드 머리에 붙는 작은 번호·기간 라벨 (01 · 당일 · 3~4일). */
.card .no{display:block;font-family:var(--mono);font-size:12px;color:var(--mut);margin-bottom:10px}
.card .when{display:block;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent);margin-bottom:10px}
.grid.w900{max-width:900px}
.grid.w820{max-width:820px}
/* 배점 묶음 머리 — 표 위에 한 줄. */
.grp{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px;line-height:normal}
.grp-n{font-size:19px;font-weight:800;letter-spacing:var(--ls-head);color:var(--ink)}
.grp-p{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--accent);white-space:nowrap}
.grp-d{font-size:var(--fs-sub2);color:var(--mut2)}
/* 묶음 머리 앞에는 화제가 바뀌는 만큼의 여백을 둡니다. */
.sec-in > .grp{margin-top:var(--gap-l)}
.sec-in > .grp + *{margin-top:0}
/* 이음매 없는 격자 — 등급표·질문 유형표 */
.cells{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
border-radius:6px;overflow:hidden;margin-top:var(--gap)}
.cells.c5{grid-template-columns:repeat(5,1fr)}
.cells > div{background:#fff;padding:24px}
.cells .t{font-size:var(--fs-sub);font-weight:700}
.cells .d{font-size:var(--fs-note);color:var(--mut);line-height:var(--lh-body);margin-top:5px}
.cells .r{font-family:var(--mono);font-size:var(--fs-note);color:var(--mut);margin-top:12px}
.cells .v{font-size:var(--fs-sub);color:var(--ink2);line-height:var(--lh-body);margin-top:6px}
/* ── 배점 막대 ──────────────────────── */
.track i.alarm{background:var(--bad)}
.bar-row .it2{font-size:var(--fs-note);color:var(--mut);margin-top:7px;line-height:var(--lh-body)}
.bar-row.hi .it2{color:var(--ink2)}
.bar-row .warn{font-family:var(--mono);font-size:var(--fs-note);color:var(--bad);font-weight:600;margin-top:7px}
/* ── 배지 ───────────────────────────── */
.badge{display:inline-block;min-width:26px;text-align:center;font-family:var(--mono);
font-size:var(--fs-note);font-weight:600;padding:3px 9px;border-radius:var(--r-xs);
background:var(--mut);color:#fff;white-space:nowrap}
/* 등급표의 한 글자 배지는 min-width 가 폭을 잡으므로 좌우 여백을 뺍니다 —
'A' 한 자에 9px 씩 붙으면 다섯 칸이 제각각으로 보입니다. */
.tw .badge{padding:3px 0}
/* 점수까지 함께 적는 배지("30점 · F")는 폭을 글자에 맡깁니다. */
.badge.w{min-width:0;padding:3px 8px;font-size:var(--fs-micro)}
.badge.a{background:var(--ok)}
.badge.b{background:var(--accent)}
.badge.c{background:var(--mid)}
.badge.d{background:var(--low)}
.badge.f{background:var(--bad)}
.tag{display:inline-block;font-family:var(--mono);font-size:var(--fs-note);font-weight:600;
letter-spacing:.04em;padding:3px 9px;border-radius:var(--r-xs);background:var(--dark);color:#fff}
.eyebrow.on{color:var(--accent)}
/* ── 강조 블록 ──────────────────────── */
.quote{border-left:3px solid var(--accent);padding:4px 0 4px 22px}
.quote p{font-size:var(--fs-h3);line-height:var(--lh-head);color:var(--ink);font-weight:600;
letter-spacing:var(--ls-head);max-width:var(--measure-h)}
/* 테두리·바탕이 보이는 상자는 컨테이너 폭을 그대로 씁니다.
옆의 표가 끝까지 가는데 상자만 820 에서 멈추면 오른쪽이 비어 실수처럼 보입니다.
안쪽 글줄만 읽기 눈금(56em)에서 끊습니다 — 폭과 글줄 길이는 다른 문제입니다. */
.callout{background:var(--soft);border-radius:var(--r);padding:24px 26px;
margin-top:var(--gap);max-width:none}
/* 연회색 섹션 위에서는 같은 회색을 겹칠 수 없으니 흰 상자에 테두리를 둡니다. */
.sec.alt .callout{background:#fff;border:1px solid var(--line);padding:22px 24px}
.callout-t{font-size:16px;font-weight:700;color:var(--ink) !important;margin-bottom:8px;max-width:none}
.callout p{font-size:var(--fs-sub);line-height:var(--lh-body);margin:0;max-width:56em}
.note{font-size:var(--fs-note);color:var(--mut) !important;line-height:var(--lh-note);
max-width:var(--measure-n);margin-top:16px}
.sec-in > .note:first-child{margin-top:0;margin-bottom:6px}
/* 대비 줄 (16 → 87) */
.compare{display:flex;align-items:center;gap:24px;margin-top:var(--gap);padding:var(--card-pad);
background:#fff;border:1px solid var(--line);border-radius:6px;flex-wrap:wrap}
.compare .pair{display:flex;align-items:baseline;gap:12px;font-family:var(--mono);font-weight:600}
.compare .pair b{font-size:var(--fs-h2);letter-spacing:var(--ls-head)}
.compare .pair b.lo{color:var(--bad)}
.compare .pair b.hi{color:var(--ok)}
.compare .pair i{width:20px;height:1.5px;background:#c0c6ce;margin-bottom:10px}
.compare p{flex:1;min-width:280px;font-size:var(--fs-sub);color:var(--ink2);line-height:var(--lh-body);
margin:0;max-width:var(--measure)}
.compare a{font-size:var(--fs-sub);font-weight:600;white-space:nowrap}
/* 요약 카드 셋 (서비스 히어로의 1·2·3단계 금액판) */
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.metric{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;
line-height:normal}
.metric .lb{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:var(--fs-note);
font-weight:600;color:var(--mut-strong);margin-bottom:14px;max-width:none}
.metric .lb i{font-style:normal;color:var(--sep)}
.metric .vl{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.metric .vl b{font-family:var(--mono);font-size:28px;font-weight:600;letter-spacing:var(--ls-head);
color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;line-height:normal}
/* '무료'는 숫자가 아니라 낱말이라 본문 글꼴에 강조색으로 둡니다. */
.metric .vl b.free{font-family:var(--sans);font-weight:800;letter-spacing:var(--ls-h2);color:var(--accent)}
.metric .vl span{font-size:14px;color:var(--mut);white-space:nowrap}
.sec.alt .metric,.hero .metric{background:#fff}
/* ── 전후 비교 ──────────────────────── */
.ba{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff}
.ba > h3{padding:16px 24px 0}
.ba-row{display:grid;grid-template-columns:1fr 1px 1fr;margin-top:10px}
.ba-cell{padding:4px 24px 20px}
.ba-cell.to{background:var(--soft)}
.ba-div{background:var(--line)}
.ba-cell .lb{font-family:var(--mono);font-size:var(--fs-note);letter-spacing:.04em;font-weight:600;
color:var(--mut);margin-bottom:6px}
.ba-cell.to .lb{color:var(--accent)}
.ba-cell p{font-size:var(--fs-sub);color:var(--ink2);line-height:var(--lh-body);margin:0;max-width:none}
/* ── 진행 순서 ──────────────────────── */
/* 설계 v2 의 3단계는 세로 타임라인이 아니라 가로 3칸입니다.
위쪽 한 줄만 잉크색으로 긋고, 칸 사이는 연한 세로선으로 나눕니다.
지표 스트립(.stats)과 같은 문법이라 두 블록이 한 눈금 위에 섭니다. */
.steps{list-style:none;padding:0;margin-top:var(--gap);display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
/* li 는 기본 규칙에서 30em 으로 묶여 있습니다. 3칸일 때는 격자가 폭을 정해
드러나지 않지만, 1단으로 내려가면 칸이 30em 에서 멈춰 버립니다. */
.steps li{margin:0;padding:24px 32px 0;display:flex;flex-direction:column;gap:12px;
max-width:none;line-height:normal}
.steps li:first-child{padding-left:0}
.steps li:last-child{padding-right:0}
.steps li + li{border-left:1px solid var(--line)}
.steps .hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;line-height:normal}
.steps .w{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--accent);white-space:nowrap}
.steps .mt-w{font-size:var(--fs-note);color:var(--mut);white-space:nowrap}
.steps .t{display:block;font-size:var(--fs-h3);font-weight:800;letter-spacing:var(--ls-head);
line-height:normal;color:var(--ink)}
.steps .d{display:block;font-size:var(--fs-sub);color:var(--ink2);line-height:var(--lh-body);max-width:none}
/* 받으시는 것 — 목록 카드 */
.deliver{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-top:var(--gap);overflow:hidden}
.deliver > div{padding:16px 20px;border-bottom:1px solid var(--line2)}
.deliver > div:last-child{border-bottom:0}
.deliver .t{font-size:var(--fs-sub);font-weight:700}
.deliver .d{font-size:var(--fs-sub2);color:var(--ink2);line-height:var(--lh-sub);margin-top:3px}
/* ── 요금 카드 ──────────────────────── */
.plans{display:grid;gap:var(--gap-s);margin-top:var(--gap)}
.plans.lead{grid-template-columns:1.1fr 1fr}
.plans.two{grid-template-columns:1fr 1fr}
.plan{border:1px solid var(--line);border-radius:8px;padding:var(--card-pad);background:var(--soft);
display:flex;flex-direction:column}
.plan.hi{border:1.5px solid var(--dark);background:#fff}
.sec.alt .plan{background:#fff}
.sec.alt .plan.hi{background:#fff}
.plan-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.plan h3{margin-top:16px}
.plan h4{margin-top:8px}
.plan .sub{font-size:var(--fs-sub);color:var(--mut);margin-top:5px}
.plan .amt{font-family:var(--mono);font-size:var(--fs-h1);font-weight:600;letter-spacing:var(--ls-head);white-space:nowrap;
line-height:1;margin-top:18px}
.plan .amt.sm{font-size:var(--fs-h2);letter-spacing:var(--ls-head);margin-top:16px}
.plan .amt small{font-size:var(--fs-body);color:var(--mut);letter-spacing:0;font-weight:600}
.plan .amt.sm small{font-size:var(--fs-sub)}
.plan .per{font-size:var(--fs-note);color:var(--mut);margin-top:7px}
/* 1단계 카드는 무상 안에서도 기계가 하는 몫과 사람이 하는 몫을 나눠 적습니다.
.tier 가 그 경계 머리말입니다. */
.plan .tier{font-size:var(--fs-note);font-weight:600;color:var(--ink);margin-top:22px;
padding-top:14px;border-top:1px solid var(--line)}
.plan .tier:first-of-type{border-top:0;padding-top:0}
.plan .tier + ul{margin-top:10px}
.plan ul{margin-top:22px;flex:1}
.plan .tier + ul{flex:0}
.plan ul.check li{font-size:var(--fs-sub)}
/* 카드 폭이 좁아 괄호 보충 설명은 줄바꿈을 허용합니다. */
.plan .sub-in{white-space:normal}
.plan ul.plain{margin-top:18px;display:flex;flex-direction:column;gap:7px;
font-size:var(--fs-sub);color:var(--ink2)}
.plan ul.plain li{margin:0}
.plan .btn{margin-top:24px;display:block}
.plan.muted ul.check li::before{border-color:var(--mut)}
/* 근거 표 (요금) */
.basis{border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:var(--gap);background:#fff}
.basis > div{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;padding:14px 24px;
border-bottom:1px solid var(--line2);font-size:var(--fs-sub);color:var(--ink2);align-items:baseline}
.basis > div.h{background:var(--soft2);font-family:var(--mono);font-size:var(--fs-note);letter-spacing:.02em;
font-weight:600;color:var(--mut)}
.basis > div.sum{border-bottom:0;background:var(--soft);font-weight:700;color:var(--ink)}
.basis > div.c3{grid-template-columns:1.1fr 1.5fr .8fr}
.basis .r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.total{display:flex;align-items:center;gap:24px;margin-top:var(--gap-s);padding:var(--card-pad);
background:var(--dark);color:#fff;border-radius:6px;flex-wrap:wrap}
.total .eq{display:flex;align-items:baseline;gap:12px;font-family:var(--mono);font-weight:600;
font-size:var(--fs-h2);letter-spacing:var(--ls-head);white-space:nowrap}
.total .eq small{font-size:var(--fs-sub);color:var(--on-dark);font-weight:400}
.total p{flex:1;min-width:300px;font-size:var(--fs-sub);color:var(--on-dark) !important;line-height:var(--lh-body);
margin:0;max-width:none}
.total p b{color:#fff}
/* ── 목록 행 ────────────────────────── */
.rows{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--gap-s);margin-top:var(--gap)}
.rows li{margin:0}
.rows a{display:grid;grid-template-columns:130px 1fr 130px;gap:24px;align-items:center;
border:1px solid var(--line);border-radius:8px;padding:24px 28px;color:var(--ink);background:#fff}
.rows a:hover{text-decoration:none;border-color:var(--ink)}
.rows .dt{font-family:var(--mono);font-size:var(--fs-note);color:var(--mut);margin-top:9px;display:block}
.rows h3{max-width:none}
.rows .ds{font-size:var(--fs-sub);color:var(--ink2);margin-top:6px;line-height:var(--lh-body)}
.rows .go{font-size:var(--fs-sub);font-weight:600;color:var(--accent);text-align:right}
.rows .pair{display:flex;align-items:baseline;gap:7px;font-family:var(--mono);font-weight:600}
.rows .pair b{font-size:var(--fs-h3)}
.rows .pair b.lo{color:var(--bad)}
.rows .pair b.hi{color:var(--ok)}
.rows .pair i{width:14px;height:1.5px;background:#c0c6ce;margin-bottom:6px}
/* 용어사전 격자 */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--gap)}
.chips a{font-size:var(--fs-sub);padding:8px 16px;border:1px solid var(--edge);border-radius:20px;
background:#fff;color:var(--ink2)}
.chips a:hover{border-color:var(--ink);color:var(--ink);text-decoration:none}
.chips a.on{border:1.5px solid var(--dark);background:var(--dark);color:#fff;font-weight:600}
.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;margin-top:var(--gap);
border-top:1px solid var(--line)}
.terms a{display:block;padding:15px 2px;border-bottom:1px solid var(--line2);color:var(--ink)}
.terms a:hover{text-decoration:none;color:var(--accent)}
.terms .t{font-size:var(--fs-sub);font-weight:700}
.terms .d{display:block;font-size:var(--fs-note);color:var(--mut);margin-top:2px;line-height:var(--lh-body)}
.related{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--gap)}
.related li{margin:0}
.related a{font-size:var(--fs-note);padding:6px 13px;border:1px solid var(--edge);border-radius:20px;
color:var(--ink2);background:#fff}
.related a:hover{border-color:var(--ink);color:var(--ink);text-decoration:none}
/* ── FAQ ────────────────────────────── */
/* 설계 v2 의 문답은 상자가 아니라 줄입니다 — 테두리도 배경도 없고,
위쪽 한 줄과 항목 사이 옅은 선만 남습니다. 여닫이 표시는 모노 ▾ 하나. */
.faq{border-top:1px solid var(--line);margin-top:var(--gap)}
.faq details{border-bottom:1px solid var(--line2)}
.faq details:last-child{border-bottom:0}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
padding:20px 0;cursor:pointer;list-style:none;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover h3{color:var(--accent)}
.faq summary h3{font-size:var(--fs-h4);font-weight:700;color:var(--ink);
letter-spacing:var(--ls-sum);line-height:normal;max-width:none}
.faq summary::after{content:"▾";flex:none;font-family:var(--mono);font-size:var(--fs-note);
color:var(--mut);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq .fa{padding:0 0 22px;color:var(--ink2);font-size:var(--fs-sub);line-height:1.8;
max-width:36em;text-wrap:pretty}
.faq .fa p{margin-bottom:16px;max-width:36em;font-size:var(--fs-sub);line-height:1.8}
.faq .fa ul,.faq .fa ol{margin-bottom:16px}
.faq .fa > *:last-child{margin-bottom:0}
/* ── 버튼 ───────────────────────────── */
.btn{display:inline-block;padding:13px 24px;border-radius:var(--r-s);font-weight:700;font-size:var(--fs-sub);
border:0;font-family:inherit;cursor:pointer;text-align:center;white-space:nowrap;
letter-spacing:var(--ls-base);line-height:normal}
.btn-solid{background:var(--dark);color:#fff}
.btn-solid:hover{background:#2a323b;color:#fff}
.btn-invert{background:#fff;color:var(--dark)}
.btn-invert:hover{background:var(--line);color:var(--dark)}
.btn-ghost{border:1px solid var(--dline3);color:#fff;background:transparent;font-weight:600}
.btn-ghost:hover{border-color:#6f7c88;color:#fff}
.btn-line{border:1px solid var(--edge);background:#fff;color:var(--dark)}
.btn-line:hover{border-color:var(--ink);color:var(--dark)}
.btn-sm{padding:10px 18px;font-size:var(--fs-sub);font-weight:600}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* 본문 안에서 다음 장으로 넘기는 한 줄 링크 — "자세히 →".
버튼이 아니라 밑줄 한 겹입니다. */
.go-more{display:inline-block;font-size:var(--fs-sub);font-weight:600;
border-bottom:1px solid var(--accent3);padding-bottom:2px}
.go-more:hover{border-bottom-color:var(--accent-h)}
/* ── CTA 띠 ─────────────────────────── */
.cta{background:var(--dark);color:#fff}
.cta-in{max-width:var(--wrap);margin:0 auto;padding:64px var(--pad);
display:flex;align-items:flex-end;justify-content:space-between;gap:48px;flex-wrap:wrap}
.cta-t{flex:1;min-width:340px}
.cta h2{color:#fff;margin-bottom:14px}
.cta p{font-size:16px;color:var(--on-dark);line-height:var(--lh-body);max-width:32em}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
/* ── 폼 ─────────────────────────────── */
label.fl{display:block;font-size:13.5px;font-weight:600;color:var(--ink2);margin-bottom:7px;line-height:1.45}
label .hint{font-size:13.5px;color:var(--mut);font-weight:400;margin-left:6px}
input[type=text],input[type=email],input[type=tel],input[type=url],select{
width:100%;height:46px;padding:0 14px;border:1px solid var(--edge);border-radius:var(--r-s);
font-size:var(--fs-sub2);font-family:inherit;color:var(--ink);background:#fff}
textarea{width:100%;padding:12px 14px;border:1px solid var(--edge);border-radius:var(--r-s);
font-size:var(--fs-sub2);font-family:inherit;color:var(--ink);background:#fff;
min-height:132px;resize:vertical;line-height:var(--lh-sub)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
input.mono,select.mono{font-family:var(--mono);font-size:14.5px}
.req{color:var(--low)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.form-split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
.aside-col{display:flex;flex-direction:column;gap:16px}
/* 홈페이지 주소 칸만 연회색 상자에 넣어 둡니다 — 이 한 칸이 상담 전 채점을 엽니다. */
.hilite{margin-top:20px;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--soft)}
.sec.alt .hilite{background:#fff}
.hilite p{font-size:var(--fs-note);color:var(--mut);line-height:var(--lh-note);margin-top:10px}
.consent{margin-top:20px;border:1px solid var(--line);border-radius:6px;background:var(--soft)}
.sec.alt .consent{background:#fff}
.consent > summary{padding:15px 20px;cursor:pointer;list-style:none;font-size:var(--fs-sub);
font-weight:700;display:flex;align-items:center;gap:10px}
.consent > summary::-webkit-details-marker{display:none}
.consent .open-h{margin-left:auto;font-size:var(--fs-note);color:var(--mut);font-weight:400}
/* 펼친 뒤에도 '열기'로 남아 있으면 상태와 라벨이 어긋납니다. */
.consent .open-h::after{content:"열기"}
.consent[open] .open-h::after{content:"닫기"}
.consent-b{padding:0 20px 18px}
.consent-g{display:grid;grid-template-columns:6em 1fr;gap:8px 14px;font-size:var(--fs-sub);color:var(--ink2);
padding-top:6px;border-top:1px solid var(--line)}
.consent-g b{color:var(--ink)}
.check-inline{display:flex;align-items:flex-start;gap:10px;margin-top:20px;font-size:14.5px;
line-height:var(--lh-sub);color:var(--ink2);cursor:pointer}
.check-inline input{width:17px;height:17px;margin-top:2px;flex-shrink:0;accent-color:var(--accent);cursor:pointer}
.contact-card{background:var(--dark);color:#fff;border-radius:var(--r);padding:var(--card-pad);
line-height:normal}
.contact-card .lb{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--accent2);
font-weight:400;line-height:normal;margin-bottom:12px;max-width:none}
.contact-card .mail-lg{display:block;font-family:var(--mono);font-size:var(--fs-sub2);font-weight:400;
word-break:break-all;letter-spacing:0;line-height:normal;color:#fff;margin-bottom:8px}
.contact-card .mail-lg:hover{color:var(--accent2)}
.contact-card .hrs{font-size:14px;color:var(--on-dark);line-height:var(--lh-sub);max-width:none}
.contact-card .mail{display:block;font-size:var(--fs-sub);color:var(--on-dark3);margin-top:14px;
padding-top:14px;border-top:1px solid var(--dline);word-break:break-all}
.side-card{border:1px solid var(--line);border-radius:var(--r);padding:var(--card-pad);background:#fff;
line-height:normal}
.side-card.soft{background:var(--soft)}
.side-card h3{max-width:none;font-size:16px;font-weight:700;letter-spacing:var(--ls-base)}
.side-card p{font-size:14.5px;color:var(--ink2);line-height:var(--lh-sub);margin-top:8px;max-width:none}
.side-card .go-more{margin-top:16px}
.side-card .btn{display:block;margin-top:16px}
.pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.pills span{font-size:13.5px;color:var(--ink2);padding:6px 12px;border-radius:100px;
background:var(--soft);white-space:nowrap}
.sec.alt .pills span{background:#fff}
#apply-msg:empty{display:none}
.err{background:#fdf1f0;border:1px solid #f3c9c4;color:var(--bad);padding:14px 17px;
border-radius:5px;font-size:var(--fs-sub);margin-bottom:16px}
.ok-msg{background:#f0f8f3;border:1px solid #bfe0cd;color:var(--ok);padding:14px 17px;
border-radius:5px;font-size:var(--fs-sub);margin-bottom:16px}
.mt-form{margin-top:22px}
/* ── 진단 위젯 ──────────────────────── */
/* 설계 v2 는 주소칸과 버튼을 나란히 두지 않고 위아래로 쌓습니다.
카드 폭이 360px 이라 나란히 두면 주소칸이 버튼에 밀려 찌부러집니다. */
.checkrow{display:flex;flex-direction:column;gap:8px}
.checkrow input{width:100%;height:46px;font-family:var(--mono);font-size:14.5px;
background:var(--dark2);color:#fff;border:1px solid var(--dline2);border-radius:var(--r-s)}
.checkrow input:focus{border-color:var(--accent2)}
.checkrow input::placeholder{color:var(--on-dark2)}
.checkrow .btn{height:46px;padding:0;font-size:var(--fs-sub);line-height:46px}
/* 설계 2a — 대기 상태에서도 진행 4단계가 보입니다. 진단 중에는 check.js 가
7단계로 바꿔 끼우고, 끝나면 다시 4단계 안내로 되돌립니다.
대기 상태의 표시는 점이 아니라 01~04 번호입니다(설계 v2). */
#ck-steps{list-style:none;padding:18px 0 0;margin:20px 0 0;border-top:1px solid var(--dline);
display:flex;flex-direction:column;gap:10px;line-height:normal}
/* display:flex 가 hidden 속성을 이깁니다 — /check/ 에서 4단계를 감출 때 필요합니다. */
#ck-steps[hidden]{display:none}
#ck-steps li{display:flex;align-items:baseline;gap:10px;font-size:14px;
color:var(--on-dark);margin:0;line-height:normal}
#ck-steps li .no{font-family:var(--mono);font-size:12px;color:var(--on-dark2);flex-shrink:0}
#ck-steps li:first-child{color:var(--on-dark3)}
#ck-steps li:first-child .no{color:var(--accent2)}
#ck-steps li.on{color:#fff;font-weight:600}
#ck-steps li.on .no{color:var(--accent2)}
#ck-steps li.done .no{color:var(--ok)}
#ck-err:not(:empty){margin-top:16px}
#ck-err .err{margin:0}
/* 결과로 스크롤할 때 64px 고정 헤더가 등급 카드 위쪽을 덮지 않도록 여백을 둡니다. */
#ck-res{scroll-margin-top:80px}
#ck-res:not(:empty){margin-top:34px}
.scorebox{display:flex;gap:34px;align-items:center;padding:30px;background:var(--soft);
border:1px solid var(--line);border-radius:8px;flex-wrap:wrap}
.dial{position:relative;width:130px;height:130px;flex-shrink:0}
.dial svg{transform:rotate(-90deg)}
.dial .n{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dial .v{font-family:var(--mono);font-size:var(--fs-h1);font-weight:600;letter-spacing:var(--ls-head);line-height:1;white-space:nowrap}
.dial .u{font-size:var(--fs-note);color:var(--mut);margin-top:2px}
.scorebox .info{flex:1;min-width:240px}
.scorebox .verdict{font-size:var(--fs-h3);font-weight:700;letter-spacing:var(--ls-head);margin:8px 0 4px;color:var(--ink)}
.scorebox .surl{font-family:var(--mono);font-size:var(--fs-note);color:var(--mut);word-break:break-all}
.split{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.split .half{flex:1;min-width:150px;background:#fff;border:1px solid var(--line);
border-radius:6px;padding:12px 15px}
.split .lb{font-size:var(--fs-note);color:var(--mut)}
.split .vl{font-family:var(--mono);font-size:var(--fs-h3);font-weight:600;white-space:nowrap}
.split .vl small{font-size:var(--fs-note);color:var(--mut);font-weight:400}
.bar{height:5px;background:var(--line);border-radius:3px;margin-top:8px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px}
.fixes{border:1.5px solid var(--ink);border-radius:6px;overflow:hidden;margin-top:var(--gap)}
.fixes .fx{display:flex;gap:15px;padding:15px 22px;border-bottom:1px solid var(--line2);align-items:flex-start}
.fixes .fx:last-child{border-bottom:0}
.gain{flex-shrink:0;font-family:var(--mono);background:var(--dark);color:#fff;font-size:var(--fs-note);
font-weight:600;padding:3px 9px;border-radius:3px;white-space:nowrap}
.fixes .t{font-weight:700;font-size:var(--fs-sub)}
.fixes .m{font-size:var(--fs-sub);color:var(--ink2);line-height:var(--lh-body)}
.fixes .a{font-size:var(--fs-note);color:var(--mut);margin-top:2px}
.area{border:1px solid var(--line);border-radius:6px;margin-bottom:9px;overflow:hidden;background:#fff}
.area > summary{display:flex;justify-content:space-between;align-items:center;padding:15px 22px;
cursor:pointer;list-style:none;gap:12px}
.area > summary::-webkit-details-marker{display:none}
.area > summary:hover{background:var(--soft)}
.area .an{font-weight:700;font-size:var(--fs-sub)}
.area .an em{font-style:normal;font-size:var(--fs-note);color:var(--mut);
margin-left:8px;border:1px solid var(--line);padding:1px 6px;border-radius:3px}
.area .as{font-family:var(--mono);font-size:var(--fs-sub);font-weight:600;white-space:nowrap}
.area .as small{color:var(--mut);font-weight:400}
.area .ab{border-top:1px solid var(--line);background:var(--soft)}
.it{display:flex;gap:11px;padding:12px 22px;border-bottom:1px solid var(--line);font-size:var(--fs-sub)}
.it:last-child{border-bottom:0}
.it .mk{flex-shrink:0;width:16px;font-weight:700;text-align:center}
.it .mk.pass{color:var(--ok)}
.it .mk.partial{color:var(--mid)}
.it .mk.fail{color:var(--bad)}
.it .inm{font-weight:600;flex:0 0 320px;min-width:0}
.it .iv{color:var(--ink2);flex:1;min-width:160px}
.it .ifix{display:block;color:var(--mut);font-size:var(--fs-note)}
.it .ip{font-family:var(--mono);color:var(--mut);font-size:var(--fs-note);flex-shrink:0}
.res-h{margin:32px 0 0}
/* 진단 결과 — 쉬운 설명 계열.
점수만으로는 무슨 상태인지 알 수 없어, 항목마다 "이게 무엇이고 / 그래서 무슨 일이 생기고 /
무엇을 하면 되는지" 3단으로 풉니다. 문안은 check.js 의 EXPLAIN 에 있습니다. */
.res-s{font-size:var(--fs-sub);color:var(--mut);line-height:var(--lh-body);margin:8px 0 0}
.split .hd{font-size:var(--fs-note);color:var(--mut);line-height:var(--lh-body);margin-top:8px}
.plain{border:1.5px solid var(--ink);border-radius:6px;padding:22px 24px;margin-top:22px;background:#fff}
.plain h3{margin:0 0 16px}
.plain .pl-lead{font-size:var(--fs-sub);line-height:var(--lh-body);color:var(--ink);margin:0}
.plain .pl-dl{display:grid;grid-template-columns:auto 1fr;gap:0 16px;margin:14px 0 0;
font-size:var(--fs-sub);line-height:var(--lh-body)}
.plain .pl-dl dt{color:var(--mut);font-size:var(--fs-note);font-weight:600;white-space:nowrap;
padding:11px 0 0;border-top:1px solid var(--line2)}
.plain .pl-dl dd{color:var(--ink2);margin:0;padding:11px 0 0;border-top:1px solid var(--line2)}
.plain .lost{color:var(--bad)}
.fixes{margin-top:14px}
.fixes .fxb{flex:1;min-width:0}
.fixes .t{font-weight:700;font-size:var(--fs-sub);display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.fixes .t .a{font-size:var(--fs-note);font-weight:500;color:var(--mut);
border:1px solid var(--line);border-radius:3px;padding:1px 6px;margin:0}
.fixes .fw{font-size:var(--fs-note);color:var(--mut);line-height:var(--lh-body);
margin:5px 0 0;max-width:var(--measure-n)}
.steps3{margin:10px 0 0;display:grid;grid-template-columns:auto 1fr;gap:5px 12px;
font-size:var(--fs-sub);line-height:var(--lh-body)}
.steps3 dt{font-size:var(--fs-note);color:var(--mut);font-weight:600;white-space:nowrap;padding-top:1px}
.steps3 dd{margin:0;color:var(--ink2);max-width:none}
.steps3 dt:last-of-type{color:var(--ink)}
.steps3 dd:last-of-type{color:var(--ink)}
.area .ad{font-size:var(--fs-note);color:var(--mut);line-height:var(--lh-body);margin:0;padding:13px 22px;
border-bottom:1px solid var(--line);background:#fff;max-width:none}
.it .iw{display:block;color:var(--mut);font-size:var(--fs-note);line-height:var(--lh-body);margin-top:4px}
.it .iy{display:block;color:var(--ink2);font-size:var(--fs-note);line-height:var(--lh-body);margin-top:4px}
.it .ifix{margin-top:4px;line-height:var(--lh-body)}
.cta-inline{border-radius:8px;margin-top:34px;overflow:hidden}
.cta-inline .cta-in{padding:32px}
/* ── 질문 생성기 ────────────────────── */
.qgen{background:#fff;border:1px solid var(--line);border-radius:8px;padding:var(--card-pad);margin-top:var(--gap-l)}
.qg-row{display:grid;grid-template-columns:1.3fr 1fr .8fr auto;gap:14px;align-items:end}
.qg-row .btn{padding:13px 24px;font-size:var(--fs-sub)}
.qg-hint{font-size:var(--fs-note);color:var(--mut);margin-top:14px;line-height:var(--lh-body)}
#qg-err:not(:empty){margin-top:14px}
#qg-err .err{margin:0}
.qg-sum{display:flex;align-items:center;gap:30px;padding:24px 28px;background:var(--soft);
border:1px solid var(--line);border-radius:8px;flex-wrap:wrap}
.sec.alt .qg-sum{background:#fff}
.qg-sum-l{flex:1;min-width:280px}
.qg-sum-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.qg-sum-t .lb{font-size:var(--fs-sub);color:var(--ink2)}
.qg-sum-t .vl{font-family:var(--mono);font-size:var(--fs-h3);font-weight:600;letter-spacing:var(--ls-head);white-space:nowrap}
.qg-sum-t .vl small{font-size:var(--fs-sub);color:var(--mut);font-weight:400}
.qg-sum .bar{height:6px;border-radius:3px;background:var(--line);margin-top:12px}
.qg-left{font-size:var(--fs-note);color:var(--mut) !important;margin-top:9px}
.qg-meta{font-family:var(--mono);font-size:var(--fs-note);color:var(--mut) !important;margin-bottom:12px}
.qg-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px;margin-top:22px}
.qi{border:1px solid var(--line);border-radius:6px;padding:var(--card-pad);background:#fff;margin:0}
.qi-h{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.qi-no{font-family:var(--mono);font-size:var(--fs-note);font-weight:600;color:var(--mut)}
.qi-ty{font-family:var(--mono);font-size:var(--fs-note);font-weight:600;letter-spacing:.6px;color:var(--accent)}
.qtag{font-size:var(--fs-note);color:var(--mut);border:1px solid var(--line);border-radius:3px;
padding:1px 7px;white-space:nowrap}
.qi-q{font-size:var(--fs-body);font-weight:700;line-height:var(--lh-head);color:var(--ink);max-width:var(--measure)}
.qi-e{font-size:var(--fs-sub);color:var(--ink2);line-height:var(--lh-body);margin-top:6px;max-width:none}
.qi-pick{display:flex;margin-top:13px;flex-wrap:wrap}
.qi-r{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.qi-b{padding:7px 15px;font-size:var(--fs-note);font-weight:600;color:var(--ink2);background:#fff;
border:1px solid var(--line);cursor:pointer;margin-left:-1px;position:relative}
.qi-b:first-of-type{margin-left:0;border-radius:5px 0 0 5px}
.qi-b:last-of-type{border-radius:0 5px 5px 0}
.qi-b:hover{background:var(--soft)}
.qi-r:focus-visible + .qi-b{outline:2px solid var(--accent);outline-offset:-2px;z-index:2}
.qi-r:checked + .qi-b{color:#fff;z-index:1}
.qi-r[value=y]:checked + .qi-b{background:var(--ok);border-color:var(--ok)}
.qi-r[value=p]:checked + .qi-b{background:var(--mid);border-color:var(--mid)}
.qi-r[value=n]:checked + .qi-b{background:var(--bad);border-color:var(--bad)}
.qg-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.qg-copybox{width:100%;min-height:160px;margin-top:12px;font-family:var(--mono);
font-size:var(--fs-note);line-height:var(--lh-body)}
.qg-verdict{border:1.5px solid var(--ink);border-radius:8px;padding:22px 26px;margin-top:28px;background:#fff}
.qg-verdict .verdict{font-size:var(--fs-h3);font-weight:700;letter-spacing:var(--ls-head);color:var(--ink) !important;
margin:10px 0 6px}
.qg-verdict p{max-width:none}
.qg-docs{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.qg-doc{border:1px solid var(--line);border-radius:6px;padding:18px 22px;background:#fff}
.qg-doc-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.qg-doc-h b{font-size:var(--fs-sub)}
.qg-doc p{font-size:var(--fs-note);color:var(--ink2) !important;margin:0 0 10px;max-width:none}
.qg-doc ul{font-size:var(--fs-sub);margin:0;padding-left:1.15em}
.qg-doc li{margin-bottom:4px}
.qg-doc-t{font-size:var(--fs-note);color:var(--mut) !important;margin:11px 0 0 !important;
padding-top:10px;border-top:1px solid var(--line2)}
.qg-more{display:flex;align-items:center;justify-content:center;padding:16px;
border:1px dashed var(--edge);border-radius:6px;font-family:var(--mono);
font-size:var(--fs-note);color:var(--mut)}
#qg-verdict h3{margin:32px 0 0}
/* ── 푸터 ───────────────────────────── */
/* 헤더(#101418)보다 한 단계 더 어둡습니다 — 페이지의 바닥이라는 뜻입니다. */
.foot{background:var(--foot);color:var(--ink);border-top:1px solid var(--line)}
.foot-in{max-width:var(--wrap);margin:0 auto;padding:56px var(--pad) 48px}
/* 푸터 4열. 시각적 비중은 낮게 — 헤더보다 조용해야 합니다.
자료실 열이 여기 있는 이유는 링크 신호 회복입니다(내부 링크 0인 페이지 방지).
회사 열은 주소·메일이 들어가 두 칸을 씁니다. */
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.foot-col{display:flex;flex-direction:column;gap:9px;min-width:0;line-height:normal}
.foot-co{grid-column:span 2}
.foot-h{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--mut);
margin:0 0 14px;letter-spacing:.1em;line-height:normal;max-width:none}
.foot-col a{font-size:14.5px;color:var(--ink2);text-decoration:none;width:fit-content}
.foot-col a:hover{color:var(--accent)}
.foot-co p{font-size:14.5px;color:var(--ink2);margin:0;line-height:1.9;max-width:none}
.foot-co a{display:inline;font-size:14.5px}
@media(max-width:700px){
.foot-cols{grid-template-columns:1fr;gap:28px}
.foot-co{grid-column:auto}
}
/* 법정 고지. 길지만 접지 않습니다 — 접어 두면 읽지 않아도 되는 것으로 보입니다. */
.foot-legal{font-size:12.5px;color:var(--mut);line-height:1.8;margin:24px 0 0;
max-width:60em;border-top:1px solid var(--foot-line);padding-top:20px}
.foot-legal a{color:var(--ink2)}
.foot-legal + .foot-legal{border-top:0;padding-top:0;margin-top:10px}
/* ── 반응형 ─────────────────────────── */
/* 1040px — 2단이 좁아지기 시작하는 폭입니다. 여기서 1단으로 내리고
우측 사이드 카드(진단 위젯·문의 카드·형제 목록)는 본문 아래로 보냅니다.
같은 폭에서 4칸 카드와 3칸 카드는 2칸으로, 지표 스트립과 3단계는
세로 구분선을 버리고 가로선으로 갈아탑니다. */
@media(max-width:1040px){
.hero-split,.hero-split.wide,.form-split,.bars{grid-template-columns:minmax(0,1fr);gap:40px}
.hero-split > .hero-card,.hero-split > .hero-side,.faq-side{max-width:520px}
.g2,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3,.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat{padding:16px 20px 16px 0;border-left:0;border-bottom:1px solid var(--line)}
.stat + .stat{border-left:0}
.steps{grid-template-columns:minmax(0,1fr)}
.steps li{padding:22px 0;border-left:0;border-bottom:1px solid var(--line)}
.steps li + li{border-left:0}
.steps li:last-child{border-bottom:0}
.terms{grid-template-columns:repeat(2,1fr)}
.cells.c5{grid-template-columns:repeat(3,1fr)}
.plans.lead{grid-template-columns:1fr}
.qg-row{grid-template-columns:1fr 1fr;gap:var(--gap-s)}
.qg-row .btn{grid-column:1/-1}
/* 1단이 되면 사이드 카드는 본문 뒤로 내려갑니다. 마크업 순서는 그대로 두고
grid 의 order 로만 옮깁니다 — 읽는 순서(본문 먼저)는 두 폭에서 같습니다. */
.hero-split > .hero-card,.hero-split > .hero-side,
.form-split > .aside-col{order:2}
/* 열 폭이 함께 좁아지는 구간입니다. 칸 좌우 여백을 20 에서 16 으로 줄여
금액처럼 줄바꿈 없는 칸이 넘치지 않게 자리를 내줍니다. */
thead th,tbody th,tbody td{padding:14px 16px}
}
/* 800px — 내비가 햄버거로 바뀌는 폭과 같습니다.
제목 두 단계를 내리고, 표는 가로 스크롤 대신 행 단위 카드로 접습니다. */
@media(max-width:800px){
:root{
--pad:20px;
--fs-h1:32px;
--fs-h1s:32px;
--fs-h2:25px;
}
.consent-g{line-height:var(--lh-label)}
.hero-in{padding:40px var(--pad) 48px}
.crumb{padding-top:36px}
.crumb + .hero-in{padding-top:24px;padding-bottom:48px}
.cta-in{padding:48px var(--pad)}
.g2,.g3,.g4,.metrics,.plans.two,.form-grid,.cells.c5,.terms{grid-template-columns:minmax(0,1fr)}
.rows a{grid-template-columns:1fr;gap:var(--gap-s);padding:24px}
.rows .go{text-align:left}
.ba-row{grid-template-columns:1fr}
.ba-div{height:1px}
.basis > div,.basis > div.c3{grid-template-columns:1fr;gap:4px}
.basis .r{text-align:left}
.qg-row{grid-template-columns:1fr}
.scorebox{gap:24px;padding:24px}
.it{flex-wrap:wrap}
.it .inm{flex:0 0 auto}
/* min-width:0 만 풀면 flex-wrap 이 동작하지 않아 문구 칸이 12px 로 찌부러집니다.
좁은 화면에서는 문구와 버튼을 위아래로 쌓습니다. */
.cta-in{flex-direction:column;align-items:flex-start;gap:24px}
.cta-t{min-width:0}
.plain{padding:24px 16px}
.plain .pl-dl{grid-template-columns:1fr;gap:0}
.plain .pl-dl dd{border-top:0;padding-top:2px}
.steps3{grid-template-columns:1fr;gap:2px}
.steps3 dt{padding-top:8px}
.area .ad{padding:16px}
/* ── 표 → 세로 쌓기
좁은 화면에서 가로 스크롤 표는 읽히지 않습니다. 화면 밖 열이 있다는 것을
알아채지 못하기 때문입니다. 설계 v2 는 표의 테두리는 그대로 두고 한 행
안의 칸만 세로로 쌓습니다 — 행을 각각 카드로 떼어내지 않습니다.
마크업은 그대로 입니다 — display 만 바꿉니다.
thead 는 화면에서 감추되 DOM 에는 남깁니다(화면낭독기·크롤러가 읽습니다). */
table{display:block;min-width:0;table-layout:auto;font-size:var(--fs-sub)}
table thead{position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%)}
table tbody{display:block}
table tbody tr{display:block;padding:14px 18px;border-bottom:1px solid var(--line2)}
table tbody tr:last-child{border-bottom:0}
table tbody th,table tbody td{display:block;width:auto;border-bottom:0;
padding:2px 0;text-align:left}
table tbody td.num,table tbody td:has(.amt),table tbody td:has(.free){text-align:left}
.tw.p14 tbody tr,.tw.p15 tbody tr,.tw.p18 tbody tr{padding:14px 18px}
.tw.p14 tbody th,.tw.p14 tbody td,
.tw.p15 tbody th,.tw.p15 tbody td,
.tw.p18 tbody th,.tw.p18 tbody td{padding:2px 0}
}
/* 640px 이하 — 지표 스트립은 한 칸씩 세로로 */
@media(max-width:640px){
.stats{grid-template-columns:minmax(0,1fr)}
.stat:last-child{border-bottom:0}
}
/* 각주 크기(13px)로 쓰는 잔글씨는 행간을 조금 더 풉니다 — 작을수록 줄을 놓칩니다. */
.note,.foot-legal,.foot-co p,.res-s,.qg-hint,.qg-left,.area .ad,.fixes .fw,
.it .iw,.it .iy,.it .ifix,.terms .d,.cells .d,.qg-doc-t,.hilite p,
.contact-card .hrs,.fig figcaption,.plan .per,.bar-row .it2
{line-height:var(--lh-note)}
/* ── 줄바꿈 금지 ────────────────────────
내비 링크, 표의 금액, "3쪽 · 진단 84점" 같은 메타 텍스트는 한 줄로 둡니다.
중간에서 끊기면 두 조각이 서로 다른 값처럼 읽힙니다. */
.nav a,.nav-cta,.crumb a,.crumb i,.badge,.tag,.gain,.qtag,.btn,
.num,.mono,.th-amt,.yes,.no,.part,.sub-in,.basis .r,
.rows .dt,.rows .go,.qg-meta,.qi-no,.qi-ty,.area .as,.split .vl,
.stat b,.plan .amt,.total .eq,.metric .vl b,.dial .v,.compare a,
.steps .w,.sibs .no,.sibs .here,.ba-cell .lb,.foot-h
{white-space:nowrap}
/* 카드 폭이 좁은 자리에서는 풀어 줍니다 — 넘치는 것이 더 나쁩니다. */
.plan .sub-in,h3 .sub-in,.card .num,.qi .mono{white-space:normal}
/* ── 인쇄 ───────────────────────────── */
@media print{
.top,.foot,.cta,.crumb,.navbtn,.qg-form,.qg-tools,.qg-copybox,.cta-inline{display:none}
.qi-r:not(:checked) + .qi-b{display:none}
.qi-r:checked + .qi-b{margin-left:0;border-radius:5px;
-webkit-print-color-adjust:exact;print-color-adjust:exact}
.qi,.qg-sum,.card,.plan{break-inside:avoid}
body{font-size:11pt}
.hero,.sec{border:0;background:#fff}
.sec-in,.hero-in{padding:12pt 0}
a{color:#000;text-decoration:none}
}
/* ═══════════════════════════════════════════════════════════════
요양 사이트에서 더한 것들
═══════════════════════════════════════════════════════════════ */
/* 아직 채우지 못한 자리. 눈에 띄어야 배포 전에 걸립니다 —
조용한 회색으로 두면 그대로 나갑니다. */
.todo{background:var(--warn-soft);color:var(--warn);border:1px dashed var(--warn);
border-radius:var(--r-xs);padding:1px 7px;font-size:.92em;font-weight:600;
font-family:var(--mono);white-space:nowrap}
/* 출처 한 줄. 숫자 아래에 붙습니다. */
.src{font-size:var(--fs-micro);color:var(--mut);line-height:var(--lh-note);
margin-top:8px;max-width:var(--measure-n)}
/* 블로그를 긍정하는 자리. 초록 연한 면에 얹어 '주의'가 아니라 '전제'로 읽히게 합니다.
주의색(흙빛)을 쓰지 마십시오 — 블로그를 문제로 지목하는 화면이 됩니다. */
.keep{background:var(--accent-soft);border:1px solid #CFE0D8;border-radius:var(--r);
padding:22px 24px;margin-top:var(--gap)}
.keep .keep-t{font-weight:700;color:var(--accent-h);font-size:var(--fs-h4);
line-height:var(--lh-head);letter-spacing:var(--ls-head);margin-bottom:8px;max-width:none}
.keep p{color:var(--ink2);max-width:var(--measure-l)}
.keep p + p{margin-top:10px}
/* 약정 없음 — 경쟁사 다수가 12개월 약정을 겁니다. 값보다 이쪽이 결정 요인입니다. */
.nolock{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
font-size:var(--fs-micro);font-weight:600;letter-spacing:.02em;line-height:var(--lh-label);
color:var(--accent-h);background:var(--accent-soft);border:1px solid #BFD6CB;
border-radius:var(--r-xs);padding:3px 9px;white-space:nowrap}
.nolock-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:var(--gap-s)}
/* 유예 안내 — 값 아래 두 줄. */
.grace{margin-top:var(--gap);border-left:3px solid var(--accent);padding:2px 0 2px 18px}
.grace p{color:var(--ink2);max-width:var(--measure-w)}
.grace p + p{margin-top:12px}
/* ── 현황 진단 폼 ─────────────────────
22개 문항을 서버에 보내지 않습니다. 화면에 그려진 것을 그대로 읽어 계산합니다. */
.ck-form{margin-top:var(--gap);max-width:860px}
/* 22개를 1120px 폭에 늘어놓으면 문항과 배점 사이가 벌어져 한 줄로 읽히지 않습니다.
폼만 한 단 좁혀 둡니다 — 결과(.ck-out)는 전폭을 그대로 씁니다. */
.ck-id{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
@media(max-width:640px){.ck-id{grid-template-columns:minmax(0,1fr)}}
.ck-grp{margin-top:var(--gap-l)}
.ck-grp > .grp{margin-bottom:0}
.ck-list{list-style:none;padding:0;margin:0;border:1px solid var(--line);
border-radius:var(--r);background:#fff;overflow:hidden}
.ck-list > li{border-top:1px solid var(--line2);padding:20px 24px}
.ck-list > li:first-child{border-top:0}
.ck-q{display:flex;gap:14px;align-items:baseline}
.ck-no{font-family:var(--mono);font-size:var(--fs-note);color:var(--mut);flex:none;
line-height:var(--lh-label)}
.ck-qt{font-weight:600;color:var(--ink);max-width:var(--measure-l);line-height:var(--lh-head)}
.ck-pt{margin-left:auto;flex:none;font-family:var(--mono);font-size:var(--fs-micro);
color:var(--mut);line-height:var(--lh-label)}
.ck-why{font-size:var(--fs-sub2);color:var(--mut2);margin-top:8px;padding-left:32px;
max-width:var(--measure-l);line-height:var(--lh-sub)}
.ck-opts{display:flex;gap:8px;margin-top:14px;padding-left:32px;flex-wrap:wrap}
.ck-opts label{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
border:1px solid var(--edge);border-radius:var(--r-s);padding:7px 14px;
font-size:var(--fs-sub2);color:var(--ink2);line-height:var(--lh-label);background:#fff}
.ck-opts label:hover{border-color:var(--accent);color:var(--accent-h)}
.ck-opts input{accent-color:var(--accent);margin:0}
.ck-opts input:checked + span{font-weight:700;color:var(--accent-h)}
@media(max-width:640px){
.ck-why,.ck-opts{padding-left:0}
.ck-pt{margin-left:0}
.ck-q{flex-wrap:wrap}
}
/* 확인 문항 — 채점하지 않고 뒤 문항의 해당 여부만 가릅니다.
번호 대신 '확인' 이라고 적고 면을 눕혀 채점 문항과 구분합니다. */
.ck-list > li.ck-gate{background:var(--accent-soft)}
.ck-gate .ck-no{color:var(--accent-h);font-weight:700}
.ck-gate .ck-qt{color:var(--accent-h)}
/* 조건에서 빠진 문항 — 감점이 아니라 해당 없음입니다.
숨기지 않고 눕혀 두어 무엇이 왜 빠졌는지 보이게 합니다. */
.ck-list > li.ck-na{background:var(--soft)}
.ck-na .ck-qt,.ck-na .ck-why,.ck-na .ck-pt{color:var(--mut)}
.ck-na .ck-qt{font-weight:400}
.ck-na .ck-opts label{opacity:.5;cursor:default;border-color:var(--line)}
.ck-na .ck-opts label:hover{border-color:var(--line);color:var(--ink2)}
.ck-na .ck-pt::after{content:" · 해당 없음";color:var(--mut)}
/* 결과 — 총점 한 덩이와 영역 막대. 붉은 경고 아이콘을 쓰지 않습니다. */
.ck-out{margin-top:var(--gap-l);max-width:860px}
.ck-out[hidden]{display:none}
.ck-total{display:flex;flex-wrap:wrap;align-items:center;gap:28px;
background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:28px 30px}
.ck-total b{font-family:var(--mono);font-variant-numeric:tabular-nums;
font-size:var(--fs-kpi);font-weight:700;color:var(--ink);line-height:1.1;letter-spacing:-.02em}
.ck-total b small{font-size:18px;color:var(--mut);font-weight:400;margin-left:2px}
.ck-total .ck-for{flex:1;min-width:240px;font-size:var(--fs-sub);color:var(--ink2);
line-height:var(--lh-sub);max-width:none;margin:0}
.ck-bars{list-style:none;padding:0;margin:var(--gap) 0 0;display:flex;flex-direction:column;gap:14px}
.ck-bars li{display:grid;grid-template-columns:132px minmax(0,1fr) 62px;gap:14px;align-items:center}
.ck-bars .bn{font-size:var(--fs-sub2);color:var(--ink2);line-height:var(--lh-label);max-width:none;margin:0}
.ck-bars .bt{height:8px;border-radius:4px;background:var(--ph);overflow:hidden}
.ck-bars .bf{display:block;height:100%;border-radius:4px;background:var(--accent)}
.ck-bars li.lo .bf{background:var(--warn)}
.ck-bars .bv{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-note);
color:var(--mut);text-align:right;line-height:var(--lh-label);max-width:none;margin:0}
@media(max-width:640px){.ck-bars li{grid-template-columns:100px minmax(0,1fr) 54px;gap:10px}}
.ck-fix{list-style:none;padding:0;margin:var(--gap) 0 0;counter-reset:ckfix}
.ck-fix li{counter-increment:ckfix;border:1px solid var(--line);border-left:3px solid var(--warn);
border-radius:var(--r-s);background:#fff;padding:18px 22px;max-width:none}
.ck-fix li + li{margin-top:12px}
.ck-fix .t{font-weight:700;color:var(--ink);max-width:none;line-height:var(--lh-head)}
.ck-fix .t::before{content:counter(ckfix) ". ";font-family:var(--mono);color:var(--warn)}
.ck-fix .d{font-size:var(--fs-sub2);color:var(--mut2);margin-top:6px;max-width:var(--measure-l);
line-height:var(--lh-sub)}
.ck-nojs{border:1px solid var(--line);border-radius:var(--r);background:var(--soft);
padding:18px 22px;margin-top:var(--gap);font-size:var(--fs-sub2);color:var(--mut2)}
/* 처리 단계 — 히어로 진단 블록 안. */
.ck-steps{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px}
.ck-steps li{display:flex;align-items:baseline;gap:7px;font-size:var(--fs-note);
color:var(--on-dark);margin:0;max-width:none;line-height:var(--lh-label)}
.ck-steps li .no{font-family:var(--mono);color:var(--accent2)}
/* 요양원 접수 안내 — 페이지 맨 아래 한 줄. 섹션으로 키우지 마십시오. */
.aside-line{border-top:1px solid var(--line);margin-top:var(--gap-l);padding-top:18px;
font-size:var(--fs-sub2);color:var(--mut);max-width:var(--measure-w);line-height:var(--lh-sub)}
/* 히어로 진단 카드의 머리 — 카드 안에서 h2 를 쓰면 페이지의 제목 위계가 흐트러집니다. */
.hc-t{font-size:19px;font-weight:700;color:#fff;margin-bottom:8px;max-width:none;
line-height:var(--lh-head);letter-spacing:var(--ls-head)}
/* 번호 붙은 설명 목록 — 영역 소개처럼 순서가 뜻을 갖는 자리. */
.rows-simple{margin-top:var(--gap);padding-left:1.25em;display:flex;flex-direction:column;gap:14px}
.rows-simple li{max-width:var(--measure-l);color:var(--ink2)}
.rows-simple li b{color:var(--ink)}
/* 근거·유의 사항 목록 — 표 아래에 붙는 잔글씨 목록. */
.notes{margin-top:var(--gap-s);padding-left:1.15em;display:flex;flex-direction:column;gap:8px}
.notes li{font-size:var(--fs-sub2);color:var(--mut2);line-height:var(--lh-sub);
max-width:var(--measure-w)}
/* ── 자료실 문서 ─────────────────────
법령·고시를 옮긴 문서라 "언제 기준인가" 가 제목만큼 중요합니다.
확인일자를 본문 맨 위에 눈에 띄게 둡니다. */
.stamp{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;max-width:var(--measure-n);
margin-bottom:var(--gap-s);padding:10px 14px;border:1px solid var(--line);border-left:3px solid var(--accent);
border-radius:var(--r-s);background:#fff;font-size:var(--fs-sub2);line-height:var(--lh-label)}
.stamp b{color:var(--accent-h);font-family:var(--mono);font-size:var(--fs-note);letter-spacing:.02em}
.stamp span{color:var(--mut)}
/* 출처 — 문서 끝. 조문 번호까지 적는 자리라 잔글씨로 두되 접지 않습니다. */
.doc-src{border-top:1px solid var(--line);padding-top:20px;margin-top:var(--gap-l)}
.doc-src-h{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--mut);
margin-bottom:10px;line-height:normal;max-width:none}
.doc-src ul{padding-left:1.1em;display:flex;flex-direction:column;gap:7px}
.doc-src li{font-size:var(--fs-sub2);color:var(--ink2);line-height:var(--lh-sub);max-width:var(--measure-n)}
/* 자문 아님 고지 — 법령을 옮긴 문서에는 반드시 답니다. */
.doc-note{font-size:var(--fs-note);color:var(--mut);line-height:var(--lh-note);
margin-top:var(--gap);max-width:var(--measure-n)}
/* 문서 끝의 진단 링크 한 줄. 이 자리를 두 줄로 늘리지 마십시오 —
자료실 문서는 영업 문서가 아닙니다. */
.doc-go{margin-top:var(--gap);font-size:var(--fs-sub);max-width:none}
.doc-go a{border-bottom:1px solid var(--accent3);padding-bottom:2px}
/* 문서 목록 */
.doclist{list-style:none;padding:0;margin:var(--gap) 0 0;border:1px solid var(--line);
border-radius:var(--r);background:#fff;overflow:hidden}
.doclist li + li{border-top:1px solid var(--line2)}
.doclist a{display:block;padding:22px 24px;color:inherit}
.doclist a:hover{background:var(--soft);color:inherit}
.doclist .dl-t{display:block;font-weight:700;font-size:var(--fs-h4);color:var(--ink);
line-height:var(--lh-head);letter-spacing:var(--ls-head)}
.doclist a:hover .dl-t{color:var(--accent-h)}
.doclist .dl-d{display:block;font-size:var(--fs-sub2);color:var(--mut2);margin-top:7px;
line-height:var(--lh-sub);max-width:var(--measure-l)}
.doclist .dl-m{display:block;font-family:var(--mono);font-size:var(--fs-micro);color:var(--mut);
margin-top:10px;line-height:var(--lh-label)}
/* 원문 한 줄 인용 — 조문을 그대로 옮기는 자리. */
.quote-line{margin-top:var(--gap-s);padding:14px 18px;background:var(--soft);
border-left:3px solid var(--sep);border-radius:var(--r-s);
color:var(--ink2);max-width:var(--measure-w);line-height:var(--lh-sub)}
/* 예시 문안 — 그대로 베껴 쓰라고 두는 상자가 아니라 형식을 보이는 상자입니다. */
.sample{margin-top:var(--gap);border:1px dashed var(--edge);border-radius:var(--r);
background:#fff;padding:22px 24px}
.sample-h{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--mut);
margin-bottom:12px;line-height:normal;max-width:none}
.sample p{max-width:var(--measure-w)}
.sample p + p{margin-top:10px}
/* 시안 목록 카드의 '예시' 꼬리표 */
.demo-tag{display:inline-block;font-family:var(--mono);font-size:var(--fs-micro);
letter-spacing:.06em;color:var(--warn);background:var(--warn-soft);
border:1px solid #E4CDB6;border-radius:var(--r-xs);padding:2px 8px;
line-height:var(--lh-label);margin-bottom:12px}
/* ═══════════════════════════════════════════════════════════════
그림 — 도면과 그래프 (인라인 SVG)
SVG 안에서도 style 속성을 쓰지 않습니다. 좌표만 속성으로 넣고
색·굵기는 전부 여기서 지정합니다. CSP 의 style-src 때문입니다.
═══════════════════════════════════════════════════════════════ */
.fig{margin-top:var(--gap);border:1px solid var(--line);border-radius:6px;
background:#fff;padding:18px 20px 14px;overflow:hidden}
.fig svg{display:block;width:100%;height:auto}
.fig figcaption{margin-top:16px;padding-top:16px;border-top:1px solid var(--line2);
font-size:var(--fs-note);color:var(--mut);line-height:var(--lh-note);max-width:var(--measure)}
.sec.alt .fig,.dm-sec.alt .fig{background:#fff}
/* ── 도면 */
.dwg{background:#fcfdfe}
.dwg svg{font-family:var(--mono)}
.d-sec{fill:url(#hatch);stroke:none}
.d-sec2{fill:url(#hatch2);stroke:none}
.d-out{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.d-nofill{fill:none}
.d-hatch{stroke:#b9c4d1;stroke-width:1}
.d-hatch2{stroke:#c9cfd8;stroke-width:1}
.d-ext{stroke:var(--mut);stroke-width:.6}
.d-dim{stroke:var(--accent);stroke-width:.9;fill:none}
.d-ar{fill:var(--accent);stroke:none}
.d-cl{stroke:var(--low);stroke-width:.8;stroke-dasharray:14 3 2 3}
.d-lead{stroke:var(--mut);stroke-width:.7}
.d-dot{fill:var(--accent);stroke:none}
.d-t{font-size:11px;fill:var(--ink2);letter-spacing:-.2px}
.d-hole{fill:#fff;stroke:var(--ink);stroke-width:1.2}
.d-cav{fill:#dbe6f2;stroke:var(--accent);stroke-width:1}
.d-cool{fill:#fff;stroke:var(--accent2);stroke-width:1.4}
.d-pin{fill:#c8cfd8;stroke:var(--ink2);stroke-width:.8}
/* 표면처리 단면 — 층별 색 */
.d-l1{fill:#eef3f8}
.d-l2{fill:#4a5a6d}
.d-l3{fill:#8fa2b6}
.d-l4{fill:#dfe4ea}
/* 표제란 */
.d-tb{fill:#fff;stroke:var(--ink);stroke-width:1.1}
.d-tbl{stroke:var(--edge);stroke-width:.7}
.d-tk{font-size:9.5px;fill:var(--mut)}
.d-tv{font-size:10.5px;fill:var(--ink);font-weight:600}
/* ── 그래프 */
.cht svg{font-family:var(--mono)}
.cht-gauge{max-width:260px;padding:14px 16px 8px}
.c-track{fill:none;stroke:var(--line);stroke-width:13;stroke-linecap:round}
.c-fill{fill:none;stroke-width:13;stroke-linecap:round}
.c-fill.g-a{stroke:var(--ok)}
.c-fill.g-b{stroke:var(--accent2)}
.c-fill.g-c{stroke:var(--mid)}
.c-fill.g-f{stroke:var(--bad)}
.c-tick{stroke:var(--edge);stroke-width:1}
.c-num{font-size:38px;font-weight:600;fill:var(--ink)}
.c-num.g-a{fill:var(--ok)}
.c-num.g-f{fill:var(--bad)}
.c-lb{font-size:11px;fill:var(--mut)}
.c-rl{font-size:13px;fill:var(--ink2);font-family:var(--sans)}
.c-rt{fill:var(--line2)}
.c-rb{fill:var(--accent2)}
.c-rb.b-ok{fill:var(--ok)}
.c-rb.b-part{fill:var(--mid)}
.c-rb.b-no{fill:#c3ccd6}
.c-rn{font-size:14px;font-weight:600;fill:var(--ink)}
.c-rn.b-ok{fill:var(--ok)}
.c-rn.b-no{fill:var(--mut)}
.c-rn.b-part{fill:var(--mid)}
.c-rm{font-size:11px;fill:var(--mut);font-weight:400}
.c-lg{font-size:11px;fill:var(--mut)}
/* 공정 흐름 */
.f-box{fill:#fff;stroke:var(--edge);stroke-width:1}
.f-no{font-size:10px;fill:var(--accent2);font-weight:600}
.f-t{font-size:13px;fill:var(--ink);font-weight:600;font-family:var(--sans)}
.f-d{font-size:11px;fill:var(--mut)}
/* ═══════════════════════════════════════════════════════════════
예시 시안 (/demo/) — 다른 회사의 사이트처럼 보여야 합니다.
자사 팔레트(네이비)를 쓰지 않고, 넷을 서로 다른 색과 배치로 둡니다.
같은 틀에 글자만 바꾼 네 벌이면 보여 드리는 의미가 없습니다.
═══════════════════════════════════════════════════════════════ */
.demo-body{
/* 예시 시안 4벌은 v2 글꼴을 쓰지 않습니다 — 다른 회사의 사이트처럼 보여야
하는 자리라 본문 글꼴을 Pretendard 로 되돌립니다. 자사 사이트가 Gothic A1
로 바뀌어도 이 넷은 그대로여야 "우리 것과 다른 회사 것"이 구분됩니다. */
--sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
font-family:var(--sans);
/* 이 넷이 참조하는 전역 토큰도 v1 값으로 되돌립니다. 이렇게 묶어 두지 않으면
자사 사이트 팔레트를 고칠 때마다 예시 시안이 같이 흔들립니다.
여기 없는 이름은 이 구역에서 쓰지 않는 토큰입니다 —
새 토큰을 쓰기 시작하면 그 값도 이 목록에 함께 적어 두십시오. */
--ink:#111418;
--ink2:#3c4450;
--mut:#697383;
--mut-strong:#5a6472;
--mut2:#6b7280;
--line:#e0e5ea;
--line2:#eef1f4;
--line3:#e6eaee;
--edge:#d5d9de;
--soft:#f7f9fb;
--soft2:#f2f5f8;
--dark:#0e1116;
--dark2:#171b21;
--dline:#23282f;
--dline2:#2c333d;
--dline3:#3a424e;
--on-dark:#a8b2c0;
--on-dark2:#7b8493;
--on-dark3:#d5dae1;
--accent:#16375e;
--accent2:#5e8fc4;
--accent3:#8fb3d9;
--ok:#1f7a4d;
--mid:#9e6713;
--low:#b5591a;
--bad:#c0392b;
--wrap:1160px;
--pad:32px;
--gap-s:16px;
--gap:24px;
--gap-l:40px;
--sec-y:88px;
--card-pad:26px;
--fs-h1:48px;
--fs-h2:32px;
--fs-h3:22px;
--fs-body:17px;
--fs-sub:15.5px;
--fs-note:13px;
--lh-head:1.3;
--lh-body:1.8;
--lh-note:1.85;
--lh-label:1.35;
--ls-base:-.01em;
--ls-head:-.03em;
--measure:30em;
--measure-h:16em;
letter-spacing:var(--ls-base);
--dm:#1c2126; /* 헤더·푸터 바탕 */
--dm-ac:#b8431f; /* 강조 — 흰 배경에서 4.5:1 이상이어야 합니다 */
--dm-soft:#f6f4f2;
}
/* 예시 시안이 함께 쓰는 공용 컴포넌트(제목·표·문답·지표 스트립·버튼)도
v1 모양으로 되돌립니다. v2 는 제목 굵기 800·표 모서리 10px·문답 무테두리로
갔지만, 이 넷은 "우리가 만들기 전의 보통 회사 사이트"가 아니라
"우리가 만들어 준 사이트"의 표본이라 원래 모양을 유지해야 합니다. */
.demo-body h1,.demo-body h2,.demo-body h3,.demo-body h4{font-weight:700;
line-height:1.3;letter-spacing:-.03em;max-width:var(--measure-h)}
.demo-body h1{font-size:48px}
.demo-body h2{font-size:32px;line-height:1.3;letter-spacing:-.03em}
.demo-body h3{font-size:22px}
.demo-body h4{font-size:17px}
.demo-body .tw{border-radius:6px}
.demo-body thead th{background:var(--soft2);color:var(--mut-strong);padding:16px 24px;
line-height:var(--lh-label);letter-spacing:var(--ls-base)}
.demo-body tbody th,.demo-body tbody td{padding:16px 24px;line-height:1.8}
.demo-body tbody th{font-weight:600}
.demo-body .faq{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff}
.demo-body .faq summary{display:block;padding:16px 46px 16px 24px;position:relative}
.demo-body .faq summary h3{display:inline;font-size:22px;letter-spacing:-.03em;
line-height:var(--lh-head)}
.demo-body .faq summary::after{content:"";position:absolute;right:24px;top:23px;
width:8px;height:8px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);
transform:rotate(45deg)}
.demo-body .faq details[open] summary::after{transform:rotate(-135deg);top:27px}
.demo-body .faq .fa{padding:0 24px 18px;max-width:none}
.demo-body .faq .fa p{margin-bottom:10px;font-size:15.5px;max-width:none}
.demo-body .faq .fa > *:last-child{margin-bottom:0}
.demo-body .note{line-height:1.85;max-width:30em}
/* 지표 스트립은 v2 에서 격자로 바뀌었습니다. 예시 시안의 히어로 지표판은
가로 flex 를 전제로 짜여 있어(칸마다 border-right) 그대로 되돌립니다. */
.demo-body .stats{display:flex;flex-wrap:wrap;margin-top:32px;
border-top:1px solid #dbe1e8;border-bottom:1px solid #dbe1e8}
.demo-body .stat{flex:1;padding:16px 20px;border-right:1px solid #dbe1e8;border-left:0}
.demo-body .stat:first-child{padding-left:0}
.demo-body .stat:last-child{border-right:0}
.demo-body .stat b{display:block;font-size:32px;font-weight:600;letter-spacing:-.03em;line-height:1}
.demo-body .stat b small{font-family:var(--mono);font-size:15.5px;font-weight:600;color:var(--mut)}
.demo-body .stat span{margin-top:5px;color:var(--mut);line-height:var(--lh-label)}
.demo-body .note{line-height:var(--lh-body)}
.demo-body .btn{padding:14px 26px;border-radius:5px;line-height:var(--lh-label)}
.demo-body .btn-ghost{border-width:1.5px;font-weight:700}
/* 예시 시안의 문의 폼도 v1 치수를 씁니다 — 칸 높이가 바뀌면 폼 전체가 밀립니다. */
.demo-body input[type=text],.demo-body input[type=email],.demo-body input[type=tel],
.demo-body input[type=url],.demo-body select{
height:auto;padding:12px 14px;border:1.5px solid var(--line);border-radius:5px;
font-size:var(--fs-sub);line-height:var(--lh-body)}
.demo-body textarea{padding:12px 14px;border:1.5px solid var(--line);border-radius:5px;
font-size:var(--fs-sub);min-height:112px;line-height:var(--lh-body)}
.demo-body label.fl{font-size:var(--fs-note);font-weight:700;color:var(--ink);margin-bottom:6px}
/* 예시 회사의 폼 칸은 그 회사의 규격입니다 — 위의 .demo-body 규칙이
.dm-field input (0,1,1) 보다 무거워 값을 덮으므로 여기서 되돌립니다. */
.demo-body .dm-field input,.demo-body .dm-field select,.demo-body .dm-field textarea{
height:auto;font-size:14px;background:var(--soft);border:1px solid var(--line);
border-radius:5px;padding:10px 12px;min-height:0}
.demo-body .dm-field textarea{resize:none;line-height:1.6;min-height:112px}
/* 회사마다 다른 강조색. 넷 다 흰 배경 대비 4.5:1 을 넘습니다. */
.dm-01{--dm:#1c2126;--dm-ac:#b8431f;--dm-soft:#f7f4f2}
/* 요양 시안 두 벌. 자사 사이트(초록)와 겹치지 않게 두되, 요양 시설이 흔히 쓰는
파스텔로 가지 않습니다 — 보호자가 기관으로 읽어야 하는 화면입니다. */
.dm-05{--dm:#25302c;--dm-ac:#3d6b52;--dm-soft:#f2f5f2}
.dm-06{--dm:#232b33;--dm-ac:#3b5f7d;--dm-soft:#f1f4f7}
.dm-02{--dm:#151d29;--dm-ac:#1b4f8f;--dm-soft:#f1f4f8}
.dm-03{--dm:#132420;--dm-ac:#1a6b4f;--dm-soft:#eff5f2}
.dm-04{--dm:#231d15;--dm-ac:#8a5410;--dm-soft:#f7f4ee}
/* 예시 고지 띠 — 가장 위, 가장 먼저 읽히는 자리 */
.demo-flag{background:#2b2118;border-bottom:2px solid var(--dm-ac)}
.demo-flag-in{max-width:var(--wrap);margin:0 auto;padding:11px var(--pad);
display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.demo-flag-tag{flex:none;background:var(--dm-ac);color:#fff;font-family:var(--mono);
font-size:11px;font-weight:600;letter-spacing:.5px;padding:4px 9px;border-radius:3px}
.demo-flag p{flex:1;min-width:260px;font-size:13px;color:#e8ddd6;line-height:1.6}
.demo-flag p b{color:#fff;font-weight:600}
.demo-flag a{flex:none;font-size:13px;color:#f0c4b2;border-bottom:1px solid #8a6a5c;
padding-bottom:1px;text-decoration:none}
.demo-flag a:hover{color:#fff;border-color:#fff}
/* 예시 회사 헤더 */
.dm-top{background:var(--dm)}
/* 배너와 데모 헤더를 한 덩어리로 고정합니다. 따로 두면 배너 높이가 줄바꿈에 따라
달라져 top 오프셋이 깨집니다. 어느 깊이에서든 '사례 목록으로'가 보여야 합니다 —
예시는 4쪽짜리라 두세 번 클릭하면 돌아올 길이 없어집니다. */
.dm-sticky{position:sticky;top:0;z-index:30}
.demo-flag-back{flex:none;white-space:nowrap;font-weight:600}
.dm-top-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px;flex-wrap:wrap}
.dm-brand{display:flex;align-items:center;gap:11px;text-decoration:none;padding:12px 0}
.dm-mark{width:32px;height:32px;flex:none;background:var(--dm-ac);color:#fff;
font-family:var(--mono);font-size:13px;font-weight:600;
display:flex;align-items:center;justify-content:center;border-radius:3px}
.dm-names b{display:block;color:#fff;font-size:17px;letter-spacing:-.5px;line-height:1.2}
.dm-names small{display:block;color:#98a2ac;font-size:11.5px;margin-top:2px}
.dm-nav{display:flex;gap:2px;flex-wrap:wrap;align-items:center;padding-bottom:6px}
.dm-nav a{color:#c3ccd4;font-size:13.5px;text-decoration:none;padding:8px 11px;border-radius:4px}
.dm-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.dm-nav a.on{color:#fff;font-weight:600;background:rgba(255,255,255,.1)}
.dm-nav .dm-nav-cta{background:var(--dm-ac);color:#fff;font-weight:700;margin-left:8px;padding:9px 15px}
.dm-nav .dm-nav-cta:hover{filter:brightness(1.15);background:var(--dm-ac)}
/* ══════════════════════════════ 예시 시안 히어로
넷이 뼈대를 공유하고 "서명 레이어"(.dm-cine-sig) 하나로 갈립니다.
blueprint A정밀공업 도면 격자 + 모서리 지시선
cinema B정밀금형 굵은 격자 + 유리 지표판
spectrum C표면처리 피막 색상 띠
facet D판금 사선 절곡면 + 접힘선
회사 색은 body 의 --dm / --dm-ac / --dm-soft 에서 옵니다. */
/* ── 공통 뼈대 */
.dm-cine{position:relative;background:var(--dm);
min-height:clamp(520px,76vh,760px);display:flex;align-items:flex-end;
overflow:hidden;isolation:isolate}
.dm-cine-bg{position:absolute;inset:0;overflow:hidden}
.dm-cine-img{width:100%;height:100%;object-fit:cover;display:block;
transform:scale(1.06);transform-origin:56% 45%}
/* 회사 색을 한 겹. soft-light 라 사진의 명암은 남고 색만 갈립니다. */
.dm-cine-wash{position:absolute;inset:0;mix-blend-mode:soft-light}
/* 글자가 앉을 아래쪽을 어둡게. 사진 전체를 반투명하게 덮으면 사진이 사라집니다. */
.dm-cine-bg::after{content:"";position:absolute;inset:0;z-index:3;
background:linear-gradient(178deg,rgba(9,12,17,.42) 0%,rgba(9,12,17,.38) 32%,rgba(9,12,17,.93) 100%)}
.dm-cine-sig{position:absolute;inset:0;z-index:4;pointer-events:none}
.dm-cine-in{position:relative;z-index:6;max-width:var(--wrap);margin:0 auto;
width:100%;padding:0 var(--pad) 168px}
.dm-cine .dm-kicker{color:#fff;opacity:.82;letter-spacing:.04em;
text-transform:uppercase;font-size:12.5px}
.dm-cine h1{color:#fff;font-size:clamp(46px,7.4vw,96px);
letter-spacing:-3.4px;line-height:1.04;margin-top:14px;
text-shadow:0 2px 40px rgba(0,0,0,.45)}
.dm-cine .dm-tag{color:#fff;font-size:clamp(17px,2vw,23px);
margin-top:18px;letter-spacing:-.5px;opacity:.95}
.dm-cine .dm-lede{color:#d3dae2;max-width:38em;margin-top:18px}
/* 지표판이 사진 아래쪽에 걸칩니다. 겹침이 깊이를 만듭니다. */
.dm-cine-stats{position:absolute;z-index:7;left:50%;transform:translateX(-50%);
bottom:-1px;width:min(100%,var(--wrap));padding:0 var(--pad)}
.dm-cine-stats .stats{margin-top:0;border:0;
background:rgba(18,23,31,.62);-webkit-backdrop-filter:blur(14px) saturate(1.4);
backdrop-filter:blur(14px) saturate(1.4);
border-top:3px solid var(--dm-ac);
box-shadow:0 -1px 0 rgba(255,255,255,.10),0 22px 50px -24px rgba(0,0,0,.75)}
.dm-cine-stats .stat{border-right-color:rgba(255,255,255,.13);padding:20px 24px}
.dm-cine-stats .stat:first-child{padding-left:24px}
.dm-cine .dm-cine-stats .stat b{color:#fff;font-size:34px}
.dm-cine .dm-cine-stats .stat b small{color:#c8d0d9}
.dm-cine .dm-cine-stats .stat span{color:#9fa9b4}
/* ── 01 blueprint : 도면 격자 + 모서리 지시선 (A정밀공업 · 정밀가공) */
.dm-cine-blueprint .dm-cine-img{filter:saturate(.26) contrast(1.18) brightness(.80)}
.dm-cine-blueprint .dm-cine-wash{opacity:.92;
background:linear-gradient(118deg,var(--dm-ac) 0%,transparent 60%)}
/* 잘게 뜬 모눈 — 도면지 위에 얹힌 느낌.
격자와 지시선은 층을 나눕니다. 한 요소에 opacity 와 mask 를 걸면
그 안의 ::before/::after 까지 같이 흐려져 지시선이 사라집니다. */
.dm-cine-blueprint .dm-cine-bg::before{content:"";position:absolute;inset:0;z-index:1;
background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px),
linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
background-size:140px 140px,140px 140px,28px 28px,28px 28px;
-webkit-mask-image:linear-gradient(196deg,#000 0%,transparent 66%);
mask-image:linear-gradient(196deg,#000 0%,transparent 66%)}
/* 모서리 지시선 — 도면 프레임의 코너 마크 */
.dm-cine-blueprint .dm-cine-sig{z-index:2}
.dm-cine-blueprint .dm-cine-sig::before,
.dm-cine-blueprint .dm-cine-sig::after{content:"";position:absolute;
width:58px;height:58px;border:2px solid rgba(255,255,255,.62)}
.dm-cine-blueprint .dm-cine-sig::before{top:32px;left:32px;border-right:0;border-bottom:0}
.dm-cine-blueprint .dm-cine-sig::after{top:32px;right:32px;border-left:0;border-bottom:0}
/* 태그라인을 치수 지시선처럼 — 앞뒤로 가는 선 */
.dm-cine-blueprint .dm-tag{display:flex;align-items:center;gap:14px;
font-family:var(--mono);letter-spacing:-.2px}
.dm-cine-blueprint .dm-tag::before{content:"";flex:none;width:38px;height:1px;
background:rgba(255,255,255,.75);box-shadow:0 -3px 0 -2px rgba(255,255,255,.75),0 3px 0 -2px rgba(255,255,255,.75)}
/* ── 02 cinema : 굵은 격자 + 유리 지표판 (B정밀금형 · 금형/양산) */
.dm-cine-cinema .dm-cine-img{filter:saturate(.35) contrast(1.12) brightness(.86)}
.dm-cine-cinema .dm-cine-wash{opacity:.90;
background:linear-gradient(150deg,var(--dm-ac) 0%,transparent 58%)}
.dm-cine-cinema .dm-cine-sig{opacity:.16;
background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
background-size:64px 64px;
-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 62%);
mask-image:linear-gradient(180deg,#000 0%,transparent 62%)}
/* ── 03 spectrum : 피막 색상 띠 (C표면처리 · 아노다이징)
이 업종은 색 자체가 상품입니다. 실제 아노다이징 표준색 계열을 띠로 깝니다. */
.dm-cine-spectrum .dm-cine-img{filter:saturate(.30) contrast(1.14) brightness(.78)}
.dm-cine-spectrum .dm-cine-wash{opacity:.88;
background:linear-gradient(196deg,var(--dm-ac) 0%,transparent 62%)}
/* 지표판 윗선이 곧 색 견본입니다 — 이 업종은 색 자체가 상품입니다.
무광블랙 · 클리어 · 골드 · 레드 · 블루 · 그린 여섯 칸. */
.dm-cine-spectrum .dm-cine-stats .stats{border-top:0;
box-shadow:0 -1px 0 rgba(255,255,255,.10),0 22px 50px -24px rgba(0,0,0,.75)}
.dm-cine-spectrum .dm-cine-stats{padding-top:0}
.dm-cine-spectrum .dm-cine-stats::before{content:"";display:block;
height:12px;margin:0 var(--pad);
background:linear-gradient(90deg,
#17191b 0 16.66%, #cfd3d6 16.66% 33.32%, #b8892f 33.32% 49.98%,
#8f2f2c 49.98% 66.64%, #24476e 66.64% 83.3%, #2c6146 83.3% 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
/* ── 04 facet : 사선 절곡면 + 접힘선 (D판금 · 판금/구조물)
판을 접어 세운 단면처럼 글자 판을 사선으로 자릅니다. */
.dm-cine-facet .dm-cine-img{filter:saturate(.32) contrast(1.12) brightness(.80)}
.dm-cine-facet .dm-cine-wash{opacity:.86;
background:linear-gradient(210deg,var(--dm-ac) 0%,transparent 56%)}
/* 글자 판 — 판을 접어 세운 단면처럼 사선으로 자릅니다.
판은 화면 왼쪽 끝까지 물려야 합니다. 안쪽 폭(--wrap)에 맞추면 사진 위에
네모 상자가 떠 있는 것처럼 보입니다. calc(50% - 50vw) 가 화면 끝입니다. */
.dm-cine-facet .dm-cine-in{isolation:isolate}
.dm-cine-facet .dm-cine-in::before,
.dm-cine-facet .dm-cine-in::after{content:"";position:absolute;
top:0;bottom:0;left:calc(50% - 50vw);right:-14%}
/* 접힘선 — 판보다 2px 크게 깔아 사선 모서리만 밝게 남깁니다. */
.dm-cine-facet .dm-cine-in::after{z-index:-2;background:var(--dm-ac);
-webkit-clip-path:polygon(0 0,calc(72% + 2px) 0,calc(58% + 2px) 100%,0 100%);
clip-path:polygon(0 0,calc(72% + 2px) 0,calc(58% + 2px) 100%,0 100%)}
.dm-cine-facet .dm-cine-in::before{z-index:-1;
background:linear-gradient(104deg,rgba(12,15,20,.92) 0 54%,rgba(12,15,20,.70) 76%,rgba(12,15,20,.30) 92%);
-webkit-clip-path:polygon(0 0,72% 0,58% 100%,0 100%);
clip-path:polygon(0 0,72% 0,58% 100%,0 100%)}
.dm-cine-facet .dm-cine-sig{background:none}
.dm-cine-facet .dm-lede{max-width:32em}
/* ── 좁은 화면
사선·색 띠는 좁아지면 글자를 침범합니다. 뼈대만 남기고 서명은 접습니다. */
@media (max-width:820px){
.dm-cine{min-height:clamp(460px,68vh,600px)}
.dm-cine-in{padding-bottom:196px}
.dm-cine-stats .stat{min-width:33%;padding:14px 16px}
.dm-cine-stats .stat:first-child{padding-left:16px}
.dm-cine .dm-cine-stats .stat b{font-size:26px}
.dm-cine-blueprint .dm-cine-sig::before,
.dm-cine-blueprint .dm-cine-sig::after{width:32px;height:32px;top:20px}
.dm-cine-blueprint .dm-cine-sig::before{left:20px}
.dm-cine-blueprint .dm-cine-sig::after{right:20px}
.dm-cine-facet .dm-cine-in::before,
.dm-cine-facet .dm-cine-in::after{right:calc(50% - 50vw)}
.dm-cine-facet .dm-cine-in::before{
-webkit-clip-path:polygon(0 0,100% 0,88% 100%,0 100%);
clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}
.dm-cine-facet .dm-cine-in::after{
-webkit-clip-path:polygon(0 0,100% 0,calc(88% + 2px) 100%,0 100%);
clip-path:polygon(0 0,100% 0,calc(88% + 2px) 100%,0 100%)}
}
/* ── 움직임
예시 시안이 "정적이고 다 비슷하다"는 인상을 주던 부분입니다.
자바스크립트 없이 CSS 만 씁니다 — 스크립트로 그리면 채점에서 잃습니다.
전부 prefers-reduced-motion 에서 꺼집니다. */
@media (prefers-reduced-motion:no-preference){
/* 사진이 아주 천천히 밀려 들어옵니다. 멈춰 있지 않다는 신호만 주는 정도. */
.dm-cine-img{animation:dmKen 26s ease-in-out infinite alternate}
@keyframes dmKen{
from{transform:scale(1.05) translate3d(0,0,0)}
to{transform:scale(1.14) translate3d(-1.2%,-1.4%,0)}
}
/* 첫 화면 글자가 차례로 올라옵니다. */
.dm-cine-in>*{animation:dmRise .72s cubic-bezier(.22,.68,.28,1) both}
.dm-cine-in>.dm-kicker{animation-delay:.06s}
.dm-cine-in>h1{animation-delay:.14s}
.dm-cine-in>.dm-tag{animation-delay:.24s}
.dm-cine-in>.dm-lede{animation-delay:.32s}
@keyframes dmRise{
from{opacity:0;transform:translateY(18px)}
to{opacity:1;transform:translateY(0)}
}
/* 지표판은 가운데 정렬이 transform 에 걸려 있어 별도 keyframes 를 씁니다. */
.dm-cine-stats{animation:dmRiseX .8s cubic-bezier(.22,.68,.28,1) .42s both}
@keyframes dmRiseX{
from{opacity:0;transform:translateX(-50%) translateY(22px)}
to{opacity:1;transform:translateX(-50%) translateY(0)}
}
/* 카드는 눌러 볼 수 있다는 것이 손끝에 먼저 와야 합니다. */
.dm-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.dm-card:hover{transform:translateY(-3px);
box-shadow:0 14px 32px -18px rgba(12,18,28,.55);border-color:var(--dm-ac)}
.dm-nav-cta{transition:transform .18s ease,filter .18s ease}
.dm-nav-cta:hover{transform:translateY(-1px)}
}
/* 히어로 공통 글자 */
.dm-kicker{font-family:var(--mono);font-size:12px;color:var(--dm-ac);
letter-spacing:.3px;font-weight:600}
.dm-tag{font-family:var(--mono);font-size:17px;color:var(--ink2);margin-top:12px;letter-spacing:-.4px}
.dm-lede{font-size:var(--fs-sub);color:var(--ink2);line-height:var(--lh-body);margin-top:16px;max-width:var(--measure)}
.dm-stats{border-color:#ddd6cf}
.dm-stats .stat{border-right-color:#ddd6cf}
.dm-stats .stat b{color:var(--dm-ac)}
/* ── 하위 페이지 머리 */
/* 요양 시안의 첫 화면. 아래쪽의 영화적 히어로(.dm-cine)를 쓰지 않습니다 —
보호자가 보는 화면이라 큰 사진과 큰 글자로 분위기를 만들 자리가 아닙니다.
이름·형태·한 문단, 그다음 바로 표로 들어갑니다. */
.dm-hero{background:var(--dm-soft);border-bottom:1px solid var(--line3)}
.dm-hero-in{max-width:var(--wrap);margin:0 auto;padding:52px var(--pad) 44px}
.dm-hero h1{font-size:clamp(30px,4vw,42px);letter-spacing:-1.2px;line-height:1.2;margin-top:10px}
.dm-hero .dm-tag{margin-top:10px}
.dm-hero .dm-lede{margin-top:16px;max-width:var(--measure-l)}
/* 평가등급 표준 표기 — 평가연도·급여종류·등급 셋을 한 줄로. */
.dm-grade{font-family:var(--mono);font-size:var(--fs-sub);color:var(--ink);
background:#fff;border:1px solid var(--line);border-left:3px solid var(--dm-ac);
border-radius:var(--r-s);padding:14px 18px;max-width:none;line-height:var(--lh-sub)}
/* 상담 절차 — 번호·제목·설명 세 칸. */
.dm-steps{list-style:none;padding:0;margin:var(--gap) 0 0;display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);
border-radius:var(--r);background:#fff;overflow:hidden}
.dm-steps li{padding:22px 24px;border-left:1px solid var(--line2);max-width:none}
.dm-steps li:first-child{border-left:0}
.dm-steps .w{display:block;font-family:var(--mono);font-size:var(--fs-note);color:var(--dm-ac);
line-height:var(--lh-label)}
.dm-steps .t{display:block;font-weight:700;color:var(--ink);margin-top:8px;line-height:var(--lh-head)}
.dm-steps .d{display:block;font-size:var(--fs-sub2);color:var(--mut2);margin-top:8px;
line-height:var(--lh-sub)}
@media(max-width:860px){
.dm-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.dm-steps li:nth-child(3){border-left:0}
.dm-steps li:nth-child(n+3){border-top:1px solid var(--line2)}
}
@media(max-width:520px){
.dm-steps{grid-template-columns:minmax(0,1fr)}
.dm-steps li{border-left:0}
.dm-steps li + li{border-top:1px solid var(--line2)}
}
/* 푸터의 블로그 자리. 시안이 블로그를 대체하지 않는다는 것을 화면에서 보이는 곳입니다. */
.dm-foot-blog{margin-top:22px;padding:16px 18px;border:1px dashed var(--dline3);
border-radius:var(--r-s);font-size:var(--fs-sub2);color:#fff;max-width:none;
line-height:var(--lh-sub)}
.dm-foot-blog span{display:block;margin-top:6px;font-size:var(--fs-note);color:#a9b4bd}
/* 주소 자리 — 링크가 아니라 '여기에 들어갑니다' 라는 표시입니다. */
.dm-blog-off{display:inline-block !important;margin:0 0 0 8px !important;padding:2px 8px;
border:1px dashed #6a757e;border-radius:var(--r-xs);font-size:var(--fs-micro) !important;
color:#a9b4bd !important;line-height:var(--lh-label)}
.dm-sub-hero{background:var(--dm-soft);border-bottom:1px solid #dfe4ea}
.dm-sub-hero-in{max-width:var(--wrap);margin:0 auto;padding:34px var(--pad) 30px}
.dm-crumb{font-family:var(--mono);font-size:12px;color:var(--mut)}
.dm-crumb a{color:var(--dm-ac)}
.dm-crumb i{font-style:normal;padding:0 6px;color:var(--edge)}
.dm-sub-hero h1{font-size:34px;letter-spacing:-1.2px;margin-top:10px;line-height:1.15}
.dm-sub-hero .dm-lede{margin-top:12px}
.dm-sub-photo{height:260px;overflow:hidden;border-top:1px solid #dfe4ea}
.dm-sub-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* ── 예시 회사 본문 */
.dm-sec{border-bottom:1px solid var(--line3)}
.dm-sec.alt{background:var(--soft)}
.dm-sec-in{max-width:var(--wrap);margin:0 auto;padding:44px var(--pad)}
.dm-sec h2{font-size:25px;letter-spacing:-.9px}
.dm-sec h2::after{content:"";display:block;width:34px;height:3px;
background:var(--dm-ac);margin-top:13px}
.dm-sec :where(p){color:var(--ink2);line-height:var(--lh-body);max-width:var(--measure)}
.dm-sec-in > h2 + p{margin-top:var(--gap-s)}
.dm-sec-in > p + p{margin-top:var(--gap-s)}
.dm-sec .faq{margin-top:6px}
/* 하위 문서 페이지는 h2 가 여러 개 이어지므로 앞에 여백을 줍니다 */
.dm-doc > h2{margin-top:var(--gap-l)}
.dm-doc > h2:first-child{margin-top:0}
.dm-doc > h2 + p{margin-top:var(--gap-s)}
/* ── 하위 페이지 카드 */
.dm-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:var(--gap)}
.dm-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;
background:#fff;padding:22px 22px 20px;text-decoration:none;
transition:border-color .12s,box-shadow .12s}
.dm-card:hover{border-color:var(--edge);box-shadow:0 2px 14px rgba(16,24,40,.07)}
.dm-card-h{font-size:17px;font-weight:700;letter-spacing:-.4px;color:var(--ink)}
.dm-card-d{font-size:14px;color:var(--ink2);line-height:1.7;margin-top:9px;flex:1}
.dm-card-go{display:block;margin-top:16px;font-size:13.5px;font-weight:600;color:var(--dm-ac)}
.dm-card.is-cta{background:var(--dm);border-color:var(--dm)}
.dm-card.is-cta .dm-card-h{color:#fff}
.dm-card.is-cta .dm-card-d{color:var(--on-dark)}
.dm-card.is-cta .dm-card-go{color:#fff}
/* ── 문의 폼 (예시라 잠겨 있습니다) */
.dm-formwrap{margin-top:var(--gap);border:1px solid var(--line);border-radius:8px;
background:#fff;overflow:hidden}
.dm-form-off{background:#fdf6ec;border-bottom:1px solid #f0e2cc;color:#7a5a22 !important;
font-size:13px;padding:11px 20px;line-height:1.6}
.dm-form fieldset{border:0;padding:24px 22px;display:grid;
grid-template-columns:1fr 1fr;gap:16px 18px}
.dm-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.dm-field.wide{grid-column:1 / -1}
.dm-field label{font-size:13.5px;font-weight:600;color:var(--ink);
display:flex;align-items:center;gap:7px}
.dm-field label em{font-style:normal;font-family:var(--mono);font-size:10.5px;
color:var(--mut);border:1px solid var(--line);border-radius:3px;padding:1px 5px}
.dm-field label em.req{color:var(--dm-ac);border-color:currentColor}
.dm-field input,.dm-field select,.dm-field textarea{
font:inherit;font-size:14px;color:var(--ink);background:var(--soft);
border:1px solid var(--line);border-radius:5px;padding:10px 12px;width:100%}
.dm-field textarea{resize:none;line-height:1.6}
.dm-file{border:1px dashed var(--edge);border-radius:5px;background:var(--soft);
padding:14px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dm-file span{font-size:13.5px;font-weight:600;color:var(--ink2);
border:1px solid var(--edge);background:#fff;border-radius:4px;padding:6px 12px}
.dm-file i{font-style:normal;font-size:12px;color:var(--mut)}
.dm-form-foot{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;
gap:16px;flex-wrap:wrap;padding-top:6px;border-top:1px solid var(--line2);margin-top:2px}
.dm-check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink2)}
.dm-form-foot .btn{background:var(--dm-ac);color:#fff;padding:12px 24px;font-size:15px}
.dm-form fieldset[disabled]{opacity:.72}
.dm-form fieldset[disabled] .btn{cursor:not-allowed}
/* ── 예시 회사 푸터 */
.dm-foot{background:var(--dm);padding:34px 0}
.dm-foot-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.dm-foot-top{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.dm-foot-nm{color:#fff;font-size:17px;font-weight:700;letter-spacing:-.4px}
.dm-foot-d{color:#98a2ac;font-size:13px;margin-top:6px;font-family:var(--mono)}
.dm-foot-nav{display:flex;gap:0 18px;flex-wrap:wrap}
.dm-foot-nav a{font-size:13px;color:#98a2ac}
.dm-foot-nav a:hover{color:#fff}
.dm-foot-x{color:#6d7780;font-size:12.5px;margin-top:20px;line-height:1.7;
padding-top:16px;border-top:1px solid rgba(255,255,255,.1);max-width:52em}
.dm-credit{color:#5d666e;font-size:11.5px;margin-top:10px;font-family:var(--mono)}
.dm-credit a{color:#79838c}
.dm-credit a:hover{color:#c3ccd4}
/* ── 해설 띠 — 예시를 벗어나 우리 목소리로 돌아오는 구역 */
.dm-ex-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.dm-sec .dm-ex-cta .btn{background:var(--dm);color:#fff}
.dm-sec .dm-ex-cta .btn-ghost{background:transparent;color:var(--ink);border-color:var(--edge)}
.dm-sec .dm-ex-cta .btn-ghost:hover{border-color:var(--ink);background:transparent}
/* ══════════════════════════════ 예시 시안 본문 리듬
히어로만 다르고 아래가 같으면 스크롤을 내리는 순간 네 곳이 같아 보입니다.
순서는 demo.mjs 의 ORDER 가, 결은 여기가 정합니다. */
/* ── blueprint (A정밀공업) : 제목에 도면 번호, 눈금 구분선 */
.dm-v-blueprint .dm-sec-in{counter-increment:dmsec}
.dm-v-blueprint .dm-sec-in>h2{position:relative;padding-top:26px}
.dm-v-blueprint .dm-sec-in>h2::before{content:"— " counter(dmsec,decimal-leading-zero);
position:absolute;top:0;left:0;font-family:var(--mono);font-size:11.5px;
letter-spacing:2px;color:var(--dm-ac);font-weight:600}
.dm-v-blueprint main{counter-reset:dmsec}
.dm-v-blueprint .dm-sec+.dm-sec{border-top:1px solid var(--line)}
.dm-v-blueprint .dm-sec.alt{background:#f7f5f1}
/* 도면을 본문 한가운데 세웁니다 — 이 회사의 상품이 곧 치수입니다. */
.dm-dwg-sec .dm-dwg-stage{margin-top:22px;padding:26px;background:#fff;
border:1px solid var(--line);border-radius:10px;overflow-x:auto;
background-image:linear-gradient(rgba(17,20,24,.045) 1px,transparent 1px),
linear-gradient(90deg,rgba(17,20,24,.045) 1px,transparent 1px);
background-size:22px 22px}
.dm-dwg-sec .dm-dwg-stage svg{display:block;margin:0 auto;max-width:100%;height:auto}
/* ── cinema (B정밀금형) : 첫 섹션을 어둡게 뒤집어 대비를 만듭니다 */
.dm-v-cinema .dm-sec.alt{background:var(--dm)}
.dm-v-cinema .dm-sec.alt h2{color:#fff}
.dm-v-cinema .dm-sec.alt p{color:#c4ccd5}
.dm-v-cinema .dm-sec.alt .dm-card{background:rgba(255,255,255,.04);
border-color:rgba(255,255,255,.14)}
.dm-v-cinema .dm-sec.alt .dm-card-h{color:#fff}
.dm-v-cinema .dm-sec.alt .dm-card-d{color:#aab3bd}
.dm-v-cinema .dm-sec.alt .dm-card:hover{background:rgba(255,255,255,.08);
border-color:var(--dm-ac)}
.dm-v-cinema .dm-sec.alt .dm-card.is-cta{background:var(--dm-ac);border-color:var(--dm-ac)}
.dm-v-cinema .dm-sec.alt .faq details{border-color:rgba(255,255,255,.14)}
/* ── spectrum (C표면처리) : 색 견본이 섹션 구분자 */
.dm-v-spectrum .dm-sec+.dm-sec{position:relative}
.dm-v-spectrum .dm-sec+.dm-sec::before{content:"";position:absolute;top:0;left:0;right:0;
height:5px;
background:linear-gradient(90deg,
#17191b 0 16.66%, #cfd3d6 16.66% 33.32%, #b8892f 33.32% 49.98%,
#8f2f2c 49.98% 66.64%, #24476e 66.64% 83.3%, #2c6146 83.3% 100%)}
.dm-v-spectrum .dm-sec-in>h2{padding-bottom:12px;border-bottom:2px solid var(--dm-ac);
display:inline-block}
.dm-v-spectrum .dm-sec.alt{background:#eef5f1}
/* ── facet (D판금) : 섹션 경계가 사선 — 판을 접어 세운 결 */
.dm-v-facet .dm-sec.alt{position:relative;background:transparent;padding-top:0}
.dm-v-facet .dm-sec.alt::before{content:"";position:absolute;inset:0;z-index:-1;
background:var(--dm-soft);
-webkit-clip-path:polygon(0 42px,100% 0,100% 100%,0 100%);
clip-path:polygon(0 42px,100% 0,100% 100%,0 100%)}
.dm-v-facet .dm-sec.alt .dm-sec-in{padding-top:74px}
.dm-v-facet .dm-card{border-radius:0;
-webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
.dm-v-facet .dm-sec-in>h2{border-left:4px solid var(--dm-ac);padding-left:14px}
@media (max-width:820px){
.dm-v-facet .dm-sec.alt::before{
-webkit-clip-path:polygon(0 22px,100% 0,100% 100%,0 100%);
clip-path:polygon(0 22px,100% 0,100% 100%,0 100%)}
.dm-v-facet .dm-sec.alt .dm-sec-in{padding-top:52px}
}
/* ── 짧은 FAQ (페이지 하단)
페이지에서 FAQ 블록을 걷어내면 FAQPage 구조화 데이터 5점이 함께 날아갑니다.
화면에 없는 FAQ 를 스키마로만 내보내는 것은 구글 지침 위반이라 같이 뺐었습니다.
그래서 "본문을 밀어내지 않을 만큼 작은" 형태로 되돌립니다 —
전부 접혀 있고, 제목도 한 줄입니다. 접혀 있어도 DOM 에 있으니 AI 는 읽습니다. */
.faq-mini-more{font-size:var(--fs-sub)}
/* ── 진단 위젯 : 완료 상태 · 오류 · 결과 도구 */
/* sticky 헤더(64px)가 결과 제목을 가립니다. */
#ck-res{scroll-margin-top:84px}
#ck-res:focus{outline:none}
/* 완료 줄. 이 줄 자체가 결과로 가는 버튼입니다 —
진단이 끝났는데 패널이 처음 화면으로 돌아가면 실패한 줄 압니다. */
.ck-done-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;
width:100%;margin-top:16px;padding:16px;cursor:pointer;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
border-radius:6px;color:#fff;font:inherit;font-size:var(--fs-sub);text-align:left;
transition:background .16s ease,border-color .16s ease}
.ck-done-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.ck-done-t b{font-size:var(--fs-body)}
.ck-done-go{color:var(--on-dark2);font-size:var(--fs-note);white-space:nowrap}
/* 오류는 입력창 바로 아래에. 색만으로 구분하지 않고 문구를 함께 둡니다. */
#ck-err{margin-top:8px}
#ck-err:empty{margin-top:0}
.checkrow input.bad{border-color:#e0736a;box-shadow:0 0 0 2px rgba(224,115,106,.22)}
.err-why{margin-top:8px;font-size:var(--fs-note);color:var(--on-dark2);line-height:var(--lh-note)}
.btn.err-cta{margin-top:16px}
.rdr{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:3px;
background:var(--soft2);color:var(--mut-strong);font-size:var(--fs-note);font-family:inherit}
/* 결과 저장·공유 */
.ck-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--gap)}
/* 개선 항목에서 용어 정의로 바로 건너뜁니다 — "그게 뭔데"에서 막히지 않게. */
.fx-term{white-space:nowrap;font-size:var(--fs-note)}
/* 신청 폼 : 필드별 오류 */
.field-err{margin:8px 0 0;font-size:var(--fs-note);color:#b3261e;font-weight:500}
input.bad,textarea.bad,select.bad{border-color:#b3261e}
/* ── 인쇄 : 결과만 남깁니다.
배경색 인쇄에 기대지 않습니다 — 대부분의 브라우저가 기본으로 끕니다.
점수는 숫자와 테두리로도 읽혀야 합니다. */
@media print{
.top,.foot,.cta,.hero-card,.crumb,.skip,.ck-tools,.demo-flag,.dm-sticky{display:none !important}
.sec,.sec.alt{background:#fff !important;padding:0 !important}
body{background:#fff !important;color:#000 !important;font-size:11pt}
#ck-res{page-break-before:avoid}
#ck-res::before{content:"브릿지 마케팅 · AI 노출 진단 결과";
display:block;font-weight:700;font-size:13pt;margin-bottom:4pt}
.scorebox{border:1px solid #000 !important;background:#fff !important}
.scorebox .surl{font-size:9.5pt;color:#000 !important}
.dial svg{max-width:150px}
.bar{border:1px solid #666}
.bar i{background:#000 !important}
.badge{border:1px solid #000;background:#fff !important;color:#000 !important}
a[href]::after{content:""}
.faq details,.fold{border-color:#999 !important}
details{display:block}
details>summary{display:none}
.fa,.fold-in{display:block !important;padding:0 0 8pt !important}
h2,h3{page-break-after:avoid}
table{page-break-inside:auto}
tr{page-break-inside:avoid}
}
/* ── 문답 2단 (설계 v2)
왼쪽에 분류 이름을 sticky 로 세워 두고 오른쪽에 문답을 쌓습니다.
분류마다 섹션을 새로 열면 72px 여백이 다섯 번 들어가 페이지가 두 배가 됩니다. */
.faq-grp{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start}
.sec-in > .faq-grp + .faq-grp{margin-top:56px}
/* 분류 이름은 따라 내려오지 않습니다 — 스크롤 중에 왼쪽 글자가 계속 움직이면
오른쪽 문답을 읽는 데 방해가 됩니다. 자기 묶음 머리에 그대로 서 있습니다. */
.faq-side{position:static}
.faq-no{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;
line-height:normal;color:var(--mut);margin-bottom:10px;max-width:none}
.faq-side h2{font-size:var(--fs-h3);font-weight:800;letter-spacing:var(--ls-head);
line-height:normal;margin:0}
.faq-grp .faq{margin-top:0}
@media(max-width:1040px){
.faq-grp{grid-template-columns:minmax(0,1fr);gap:16px}
.faq-side{position:static}
}
/* 실측 기록 카드의 머리 — 등급 배지와 측정일. */
.case-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.case-top .dt{font-family:var(--mono);font-size:12px;color:var(--mut);white-space:nowrap}
.card .case-top + h3{font-size:18px;font-weight:800;letter-spacing:var(--ls-head);
line-height:var(--lh-head);margin-bottom:10px}
.card .case-top + h3 + p{margin-top:0;margin-bottom:16px}
/* 지표 스트립에서 분모를 작게 다는 자리 ("84 / 100"). */
.stat b .of{font-family:var(--sans);font-size:var(--fs-sub2);color:var(--mut-strong);
font-weight:400;letter-spacing:var(--ls-base)}
/* ── 점수판 ─────────────────────────── */
/* 왼쪽 총점 한 덩이, 오른쪽 영역별 막대. 설계 v2 는 계기 그림을 쓰지 않습니다. */
.score-split{display:grid;grid-template-columns:280px minmax(0,1fr);gap:32px;align-items:start;
margin-top:var(--gap)}
.score-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;
text-align:center;line-height:normal}
.sc-v{font-family:var(--mono);font-size:56px;font-weight:600;color:var(--ink);line-height:1;
font-variant-numeric:tabular-nums;letter-spacing:var(--ls-head);max-width:none}
.sc-u{font-size:var(--fs-note);color:var(--mut) !important;margin-top:8px;max-width:none}
.sc-bar{display:block;margin-top:18px;height:6px;border-radius:3px;background:var(--ph);overflow:hidden}
.sc-bar i{display:block;height:6px;background:var(--accent)}
.score-rows{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px 24px;
list-style:none;margin:0}
.sr-row{display:flex;align-items:center;gap:16px;padding:11px 0;border-bottom:1px solid var(--line2);
margin:0;max-width:none}
.sr-row:last-child{border-bottom:0}
.sr-n{flex:0 0 130px;font-size:14.5px;color:var(--ink2);line-height:normal}
.sr-t{flex:1;height:6px;border-radius:3px;background:var(--ph);overflow:hidden}
.sr-t i{display:block;height:6px;background:var(--accent)}
.sr-v{flex:0 0 62px;text-align:right;font-family:var(--mono);font-size:13.5px;color:var(--ink2);
font-variant-numeric:tabular-nums;white-space:nowrap;line-height:normal}
/* 막대 색 셋 — 만점·부분·미달. */
.sc-bar i.b-ok,.sr-t i.b-ok{background:var(--ok)}
.sc-bar i.b-part,.sr-t i.b-part{background:var(--accent)}
.sc-bar i.b-low,.sr-t i.b-low{background:var(--mid)}
@media(max-width:1040px){
.score-split{grid-template-columns:minmax(0,1fr);gap:16px}
.score-card{max-width:280px}
}
/* 막대 길이는 클래스로 냅니다 — CSP 의 style-src 'self' 가 인라인 style 을 막습니다. */
.w0{width:0%}.w1{width:1%}.w2{width:2%}.w3{width:3%}.w4{width:4%}.w5{width:5%}.w6{width:6%}.w7{width:7%}.w8{width:8%}.w9{width:9%}
.w10{width:10%}.w11{width:11%}.w12{width:12%}.w13{width:13%}.w14{width:14%}.w15{width:15%}.w16{width:16%}.w17{width:17%}.w18{width:18%}.w19{width:19%}
.w20{width:20%}.w21{width:21%}.w22{width:22%}.w23{width:23%}.w24{width:24%}.w25{width:25%}.w26{width:26%}.w27{width:27%}.w28{width:28%}.w29{width:29%}
.w30{width:30%}.w31{width:31%}.w32{width:32%}.w33{width:33%}.w34{width:34%}.w35{width:35%}.w36{width:36%}.w37{width:37%}.w38{width:38%}.w39{width:39%}
.w40{width:40%}.w41{width:41%}.w42{width:42%}.w43{width:43%}.w44{width:44%}.w45{width:45%}.w46{width:46%}.w47{width:47%}.w48{width:48%}.w49{width:49%}
.w50{width:50%}.w51{width:51%}.w52{width:52%}.w53{width:53%}.w54{width:54%}.w55{width:55%}.w56{width:56%}.w57{width:57%}.w58{width:58%}.w59{width:59%}
.w60{width:60%}.w61{width:61%}.w62{width:62%}.w63{width:63%}.w64{width:64%}.w65{width:65%}.w66{width:66%}.w67{width:67%}.w68{width:68%}.w69{width:69%}
.w70{width:70%}.w71{width:71%}.w72{width:72%}.w73{width:73%}.w74{width:74%}.w75{width:75%}.w76{width:76%}.w77{width:77%}.w78{width:78%}.w79{width:79%}
.w80{width:80%}.w81{width:81%}.w82{width:82%}.w83{width:83%}.w84{width:84%}.w85{width:85%}.w86{width:86%}.w87{width:87%}.w88{width:88%}.w89{width:89%}
.w90{width:90%}.w91{width:91%}.w92{width:92%}.w93{width:93%}.w94{width:94%}.w95{width:95%}.w96{width:96%}.w97{width:97%}.w98{width:98%}.w99{width:99%}
.w100{width:100%}
/* ── 문답 딥링크 */
/* sticky 헤더가 가리지 않게. 섹션·묶음·항목 모두에 줍니다. */
.sec[id],.faq-grp[id]{scroll-margin-top:84px}
.faq details[id]{scroll-margin-top:84px}
/* #id 로 들어오면 자바스크립트 없이 펼칩니다. */
.faq details:target > summary h3{color:var(--accent)}
.faq details:target>summary~.fa{display:block}
.faq details:target>summary{color:var(--accent)}
/* ── 접이식 (근거 표 등) */
.fold{border:1px solid var(--line);border-radius:8px;background:#fff;margin-top:var(--gap)}
.fold>summary{list-style:none;cursor:pointer;padding:16px;
display:flex;align-items:center;gap:8px;font-weight:600;font-size:var(--fs-sub);
line-height:var(--lh-label);color:var(--ink)}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:"";flex:none;width:9px;height:9px;
border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);
transform:rotate(-45deg);margin-left:2px;transition:transform .18s ease}
.fold[open]>summary::before{transform:rotate(45deg)}
.fold>summary:hover{color:var(--accent)}
.fold-in{padding:0 16px 16px}
.fold-in .tw{margin-top:0}
.fold-in .note{margin-top:16px}
.sec.alt .fold{background:#fff}
/* ── 예시 시안 카드 (홈 '04 — 시안' · 실제 사례 목록)
카드 '안'은 자사 팔레트입니다 — 예시 시안 자체의 색(--dm-ac)을 여기 끌어오지
않습니다. 이 카드는 우리 사이트의 물건이고, 클릭한 뒤가 남의 회사 사이트입니다. */
.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:var(--gap)}
/* 카드 안에는 문장이 없습니다 — 이름·수치·라벨뿐이라 본문 행간(1.75)을 걸면
줄마다 죽은 여백이 붙습니다. 설계도 카드 안에서는 행간을 지정하지 않습니다. */
/* 이 넷은 "열어 볼 수 있는 물건"이라 다른 카드보다 또렷해야 합니다.
테두리를 연회색이 아니라 잉크색으로 둡니다. */
.demo-card{display:block;border:1px solid var(--ink);border-radius:var(--r-lg);background:#fff;
color:inherit;text-decoration:none;overflow:hidden;transition:border-color .15s;
line-height:normal}
.demo-card:hover{border-color:var(--accent);color:inherit}
.demo-card-img{height:180px;overflow:hidden;background:var(--ph)}
.demo-grid.compact .demo-card-img{height:170px}
.demo-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.demo-card-body{padding:22px}
/* 홈 변형 — 번호와 이름을 한 줄에 놓고 쪽수·점수를 오른쪽 끝에 답니다. */
.demo-card-top{display:flex;align-items:baseline;justify-content:space-between;
gap:16px;margin-bottom:6px}
.demo-card-nm{display:flex;align-items:baseline;gap:9px;min-width:0}
.demo-card-no{font-family:var(--mono);font-size:12px;color:var(--mut);flex:none}
.demo-card-top b{font-size:18px;font-weight:800;letter-spacing:var(--ls-head);color:var(--ink);line-height:normal}
.demo-card-top small{font-family:var(--mono);font-size:11.5px;color:var(--mut);
white-space:nowrap;flex:none}
/* 사례 목록 변형 — 업종 줄이 먼저 오고 이름은 그 아래 한 단계 큽니다. */
.demo-card-body .ind{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
font-size:var(--fs-micro);color:var(--mut);line-height:normal;margin-bottom:8px}
.demo-card-body .ind i{font-style:normal;color:var(--sep)}
.demo-card-body h3{font-size:19px;font-weight:800;letter-spacing:var(--ls-head);
color:var(--ink);max-width:none;margin-bottom:6px}
.demo-card-body .tagline{font-size:var(--fs-sub2);color:var(--mut2);line-height:normal;
margin-bottom:18px;max-width:none}
.demo-card-spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
border-top:1px solid var(--line2);padding-top:16px;list-style:none;padding-left:0;margin:0}
.demo-card-spec li{margin:0;max-width:none;line-height:normal}
.demo-card-spec b{display:block;font-family:var(--mono);font-size:16px;font-weight:500;
line-height:normal;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.demo-card-spec b small{font-family:var(--mono);font-size:16px;font-weight:500}
.demo-card-spec span{display:block;font-size:var(--fs-micro);line-height:normal;
color:var(--mut);margin-top:2px}
.demo-card-go{display:flex;align-items:center;justify-content:space-between;gap:16px;
margin-top:16px;padding-top:14px;border-top:1px solid var(--line2)}
.demo-card-go .more{font-size:14.5px;color:var(--accent);font-weight:600}
.demo-card:hover .demo-card-go .more{color:var(--accent-h)}
.demo-card-go .sc{font-family:var(--mono);font-size:11.5px;color:var(--mut);
line-height:normal;text-align:right;white-space:nowrap}
.demo-card-go .sc b{color:var(--mut);font-size:11.5px;font-weight:500}
@media (max-width:900px){
.dm-hero-overlay{min-height:340px}
.dm-hero-overlay h1{font-size:34px;letter-spacing:-1.2px}
.dm-hero-split .dm-hero-in{grid-template-columns:1fr;gap:0;padding-bottom:0}
.dm-hero-split .dm-hero-t{padding:40px 0 32px}
.dm-hero-split .dm-hero-p{margin:0 calc(var(--pad) * -1)}
.dm-hero-split .dm-hero-p img{min-height:240px;height:240px}
.dm-hero-split h1,.dm-hero-band h1,.dm-hero-aside h1{font-size:32px;letter-spacing:-1.1px}
.dm-band{height:200px}
.dm-hero-aside{grid-template-columns:1fr}
.dm-hero-aside .dm-aside-t{padding:40px var(--pad) 32px;max-width:none}
.dm-aside-p img{min-height:230px;height:230px}
.dm-cards{grid-template-columns:1fr}
.dm-form fieldset{grid-template-columns:1fr}
.dm-sub-photo{height:190px}
.dm-top-in{min-height:0;padding-top:8px}
.dm-nav{width:100%;overflow-x:auto;flex-wrap:nowrap}
.dm-nav a{white-space:nowrap}
.dm-nav .dm-nav-cta{margin-left:4px}
.demo-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
.dm-ex-score{grid-template-columns:1fr;gap:20px}
.dm-ex-score .cht-gauge{max-width:220px}
}
/* ── 상단 메뉴 4개 구조 ──────────────────
'개선 요청'이 .top-end 의 별도 버튼에서 메뉴의 마지막 항목으로 들어왔습니다.
메뉴가 오른쪽 끝까지 밀리도록 margin-left 를 auto 로 돌립니다. */
.nav{margin-left:auto}
.nav .nav-cta{margin-left:10px}
.nav .nav-cta.on{background:#e8ecf1}
@media(max-width:800px){
/* 접힌 메뉴 안에서는 버튼이 아니라 다른 항목과 같은 줄로 보여야 합니다. */
.nav{margin-left:0}
.nav .nav-cta{background:transparent;color:#fff !important;font-weight:600;
padding:12px 6px;border-radius:0;margin-left:0;border-bottom:1px solid var(--line2)}
.nav .nav-cta:hover{background:rgba(255,255,255,.06)}
}
/* 520px 이하에서 .nav-cta 를 숨기던 규칙을 되돌립니다 —
지금은 메뉴 항목이라 숨기면 '개선 요청'으로 가는 길이 사라집니다. */
@media(max-width:520px){.nav .nav-cta{display:block}}
/* ── 푸터의 자료 링크 줄 ──────────────────
메뉴에서 내린 페이지들의 유일한 내부 진입 경로입니다. 지우지 마십시오.
링크가 하나도 없으면 고아 페이지가 되어 크롤러가 재방문을 멈춥니다. */
.foot-nav{display:flex;gap:0 16px;flex-wrap:wrap;width:100%;
padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.foot-nav a{font-size:var(--fs-note);color:var(--mut);padding:4px 0;white-space:nowrap}
.foot-nav a:hover{color:#fff}
/* ── 게이지 + 막대를 나란히 ── */
.score-split{display:grid;grid-template-columns:232px 1fr;gap:32px;align-items:center;
margin-top:var(--gap)}
.score-split .fig{margin-top:0}
@media(max-width:820px){
.score-split{grid-template-columns:1fr;gap:16px}
.score-split .cht-gauge{max-width:210px}
}
/* ── 코드 블록 — 사례 페이지에서 실제 HTML 을 그대로 보여 줄 때 씁니다.
화면에 원문을 띄우는 것이 설명 열 줄보다 빠릅니다. */
pre.code{margin-top:var(--gap);background:var(--dark);border-radius:6px;
padding:var(--card-pad);overflow-x:auto}
pre.code code{font-family:var(--mono);font-size:var(--fs-note);line-height:var(--lh-note);
color:#cbd5e1;white-space:pre;display:block}
.sec p code,.dm-sec p code{font-family:var(--mono);font-size:var(--fs-note);
background:var(--soft2);border:1px solid var(--line2);border-radius:3px;padding:1px 5px}
/* 좁은 화면에서 지표 숫자가 단위와 갈라져 줄이 어긋나는 것을 막습니다. */
@media (max-width:520px){
.dm-stats .stat{padding:12px 10px}
.dm-stats .stat b{font-size:20px;white-space:nowrap}
.dm-stats .stat b small{font-size:12px}
.dm-stats .stat span{font-size:11px}
}