/* [R4] 2026-10-13 WANSTAR 1차: 헤더 + 히어로(B안 "명함의 별") + 섹션 골격
 * [R7] 2026-10-13 5페이지 구조: 페이지 머리, 요약 2단, 서비스 상세, 하단 고정 바, 간격 토큰.
 * 폭 전환은 두 값만 쓴다(빌드가 검사): 960px = 헤더 햄버거·하단 바·히어로·2단 전환(맨 아래 한 블록), 560px = 버튼 가로 배치.
 */

/* ---------- 글꼴: Pretendard 셀프 호스팅 두 묶음 서브셋 (tools/subset-fonts.py로 생성, OFL: fonts/OFL.txt) ----------
 * [R28] 2026-10-18 사이트 묶음(a, 사이트에 쓰인 글자만) + 나머지 묶음(b, 입력란 등에서 a에 없는 글자를 칠 때만 받음). font-display: swap 유지, preload 없음. */
/* [fonts:start] tools/subset-fonts.py가 만든다(직접 고치지 말 것). 굵기마다 나머지 묶음(b) → 중간 묶음(c) → 사이트 묶음(a) 순서 */
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Regular.rest.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20-7E, U+A0-148, U+14A-1C3, U+1C5-31E, U+321-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3E1, U+3F0-49D, U+4A0-4FF, U+52F, U+E3F, U+1D43, U+1D47-1D49, U+1D4D, U+1D4F-1D50, U+1D52, U+1D56-1D58, U+1D5B, U+1D62-1D65, U+1D9C, U+1DA0, U+1DBB, U+1DBF-1DF5, U+1DFC-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-200D, U+2010-2027, U+202F-2060, U+2070-2071, U+2074-208E, U+2090-209C, U+20A0-20BF, U+20DB-20DE, U+20E8, U+20F0, U+2100-2101, U+2103, U+2105-2106, U+2109, U+2113, U+2116-2117, U+211E-2123, U+2126, U+212A-212B, U+212E, U+2132, U+213B, U+214D, U+214F, U+2153, U+215A-2188, U+2190-2199, U+21A9-21AA, U+21B0-21B1, U+21B3-21B5, U+21BA-21BB, U+21D0, U+21D2, U+21D4, U+21DE-21DF, U+21E4-21E5, U+21E7, U+21EA, U+2202, U+2205-2206, U+220F, U+2211-2212, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+226A-226B, U+22EF, U+2303, U+2305, U+2318, U+2325-2327, U+2329-232B, U+2380, U+2387, U+238B, U+23CE-23CF, U+2423, U+2460-2473, U+24B6-24CF, U+24EA-24F4, U+24FF, U+25A0-25A2, U+25AA, U+25B2-25B3, U+25B6-25B7, U+25BA-25BD, U+25C0-25C1, U+25C4-25C7, U+25CA-25CB, U+25CF, U+25E6, U+25EF, U+2600, U+2605-2606, U+263C, U+2661, U+2665, U+266A, U+26A0, U+2713, U+2717, U+2756, U+2776-2789, U+27EF, U+27F5-27FA, U+2985-2986, U+2B06, U+2B12-2B13, U+2B1C, U+2C7C, U+2C7F, U+2DFF, U+2E18, U+3000-3003, U+3008-3011, U+3014-301F, U+3041-3094, U+3099-309E, U+30A1-30FE, U+3131-3164, U+318D, U+321C, U+3380-3384, U+3388-33CA, U+33CF-33D0, U+33D3, U+33D6, U+33D8, U+33DB-33DD, U+A69F, U+A7FF, U+A92E, U+AC00-D7A3, U+E000, U+E002-E05E, U+E06A-E080, U+E093-E096, U+E0A5-E0E6, U+E0F3-E11C, U+E11E-E12A, U+E131-E147, U+E14E-E164, U+EE01-EE05, U+F000-F057, U+F6C3, U+FE20-FE2D, U+FEFF, U+FF01-FF60, U+FFA1-FFBE, U+FFC2-FFC7, U+FFCA-FFCF, U+FFD2-FFD7, U+FFDA-FFDC, U+FFE0-FFE1, U+FFE5-FFE6, U+1F10B, U+1F12F-1F149, U+1F150-1F16B, U+1F170-1F189, U+1F850, U+1F852, U+F0000-F0002;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Regular.common.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+AC00-D7A3;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Regular.site.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20-7E, U+A9, U+AE, U+B0-B1, U+B7, U+D7, U+F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026-2027, U+203B, U+2103, U+2122, U+2190-2193, U+2460-2469, U+25A0-25A1, U+25B2-25B3, U+25CB, U+25CF, U+2605-2606, U+3001-3002, U+3008-3011, U+AC00-AC01, U+AC04, U+AC08, U+AC12, U+AC19, U+AC1C-AC1D, U+AC70, U+AC74, U+AC80, U+AC83, U+AC8C, U+ACA0, U+ACA8, U+ACAC, U+ACB0, U+ACBC-ACBD, U+ACC4, U+ACE0, U+ACE8, U+ACF3, U+ACF5, U+ACFC, U+AD00, U+AD11, U+AD1C, U+AD6C-AD6D, U+AD81, U+AD8C, U+ADF8, U+ADFC, U+AE08, U+AE30, U+AE34, U+AE38, U+AE43, U+AE4C, U+AED8, U+AFB8, U+AFBC, U+B00C, U+B01C, U+B04A, U+B04C, U+B05D, U+B098, U+B09C, U+B0A0, U+B0A8, U+B0AC, U+B0B4, U+B0BC, U+B0C4, U+B108, U+B110, U+B123-B124, U+B137, U+B144, U+B178, U+B192-B193, U+B204, U+B20C, U+B274, U+B294, U+B2A5, U+B2C8, U+B2E4, U+B2E8, U+B2EB-B2EC, U+B2F4-B2F5, U+B2F9, U+B300, U+B354, U+B370, U+B3C4, U+B3CC, U+B3D9, U+B418, U+B41C, U+B420, U+B428-B429, U+B450, U+B4A4, U+B4DC, U+B4E0, U+B4E4, U+B4ED, U+B4F1, U+B514, U+B530, U+B54C, U+B5A4, U+B5BB, U+B610, U+B6F0, U+B77C-B77D, U+B780, U+B78C, U+B798, U+B79C, U+B7A8, U+B7AB, U+B7B5, U+B7C9, U+B7EC, U+B7F0, U+B807-B808, U+B824-B825, U+B828, U+B838, U+B840, U+B85C-B85D, U+B86D, U+B8CC, U+B8E8, U+B958, U+B974, U+B978, U+B97C, U+B984, U+B9AC, U+B9B4, U+B9BC-B9BD, U+B9C1, U+B9C8-B9C9, U+B9CC, U+B9CE, U+B9DD-B9DE, U+B9E4, U+B9FA, U+BA38, U+BA3C, U+BA54, U+BA70, U+BA74, U+BA85, U+BAA8-BAA9, U+BABB, U+BB34, U+BB38, U+BB3C, U+BBF8, U+BBFC, U+BC00, U+BC0F, U+BC14, U+BC18, U+BC1B-BC1C, U+BC29, U+BC84, U+BC88, U+BC94-BC95, U+BCC0, U+BCC4, U+BCF4-BCF5, U+BCF8, U+BCFC, U+BD80-BD81, U+BD84, U+BD88, U+BDF0, U+BE0C, U+BE14, U+BE44, U+BE60, U+BE7C, U+BE80, U+BE8D, U+BE90, U+C0AC-C0AD, U+C0B0, U+C0B4, U+C0C1, U+C0C8-C0C9, U+C0DD, U+C0E4, U+C11C-C11D, U+C120, U+C124, U+C12D, U+C131, U+C138, U+C13C, U+C154, U+C158, U+C18C-C18D, U+C1A1, U+C1C4, U+C1FC, U+C20F, U+C218, U+C21C, U+C26C, U+C288, U+C2A4, U+C2B5, U+C2B7, U+C2DC-C2DD, U+C2E0, U+C2E4, U+C2EC-C2ED, U+C2F6, U+C464, U+C4F0, U+C544-C545, U+C548, U+C54A, U+C54C, U+C554, U+C558, U+C55E, U+C57C-C57D, U+C591, U+C5B4, U+C5B8, U+C5C5-C5C6, U+C5C8, U+C5D0, U+C5EC-C5ED, U+C5F0, U+C5F4, U+C601, U+C606, U+C608, U+C624, U+C62C, U+C62E, U+C640, U+C644, U+C678, U+C694, U+C6A9, U+C6B0, U+C6B4, U+C6C1, U+C6CC, U+C6D0, U+C6D4, U+C6F9, U+C704, U+C720, U+C724, U+C728, U+C73C, U+C740, U+C744, U+C74C, U+C758, U+C774-C775, U+C778, U+C77C, U+C784-C785, U+C788, U+C790-C791, U+C7A0, U+C7A5, U+C7AC, U+C7C1, U+C800-C801, U+C804, U+C808, U+C810-C811, U+C815, U+C81C-C81D, U+C838, U+C870, U+C885, U+C8FC, U+C900, U+C904, U+C911, U+C988-C989, U+C990, U+C99D, U+C9C0-C9C1, U+C9C4, U+C9C8, U+C9D1, U+C9D5, U+C9E7, U+CC28, U+CC2E, U+CC30, U+CC38, U+CC3D-CC3E, U+CC44-CC45, U+CC57, U+CC98, U+CCA0, U+CCA8, U+CCAB, U+CCAD, U+CCB4, U+CD08, U+CD2C, U+CD5C, U+CD94, U+CD9C, U+CDA4, U+CDB0, U+CDE8, U+CE20, U+CE35, U+CE58, U+CE5C, U+CE68, U+CE6D, U+CE74, U+CE78, U+CEA0, U+CEF7, U+CF00, U+CF1C, U+CF54, U+CF58, U+CFE0, U+D06C, U+D0A4, U+D0C0-D0C1, U+D0D0, U+D0D5, U+D0DC-D0DD, U+D130, U+D14C, U+D150, U+D1A0-D1A1, U+D1B5, U+D2B8-D2B9, U+D2BC, U+D2F0-D2F1, U+D300, U+D305, U+D30C, U+D314, U+D328, U+D398, U+D3B4, U+D3B8, U+D3EC, U+D3F0, U+D3FC, U+D45C, U+D488, U+D504, U+D508, U+D50C, U+D53C, U+D544, U+D551, U+D558, U+D55C, U+D560, U+D568-D569, U+D56D, U+D574-D575, U+D588-D589, U+D5A5, U+D5D8, U+D601, U+D604, U+D611, U+D615, U+D638, U+D648, U+D64D, U+D654-D655, U+D65C, U+D669, U+D68C-D68D, U+D6A8, U+D6C4, U+D734, U+D76C, U+D788, U+FF01, U+FF05-FF06, U+FF08-FF09, U+FF0C, U+FF1A-FF1B, U+FF1F, U+FF3B, U+FF3D, U+FF5E;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-SemiBold.rest.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20-7E, U+A0-148, U+14A-1C3, U+1C5-31E, U+321-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3E1, U+3F0-49D, U+4A0-4FF, U+52F, U+E3F, U+1D43, U+1D47-1D49, U+1D4D, U+1D4F-1D50, U+1D52, U+1D56-1D58, U+1D5B, U+1D62-1D65, U+1D9C, U+1DA0, U+1DBB, U+1DBF-1DF5, U+1DFC-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-200D, U+2010-2027, U+202F-2060, U+2070-2071, U+2074-208E, U+2090-209C, U+20A0-20BF, U+20DB-20DE, U+20E8, U+20F0, U+2100-2101, U+2103, U+2105-2106, U+2109, U+2113, U+2116-2117, U+211E-2123, U+2126, U+212A-212B, U+212E, U+2132, U+213B, U+214D, U+214F, U+2153, U+215A-2188, U+2190-2199, U+21A9-21AA, U+21B0-21B1, U+21B3-21B5, U+21BA-21BB, U+21D0, U+21D2, U+21D4, U+21DE-21DF, U+21E4-21E5, U+21E7, U+21EA, U+2202, U+2205-2206, U+220F, U+2211-2212, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+226A-226B, U+22EF, U+2303, U+2305, U+2318, U+2325-2327, U+2329-232B, U+2380, U+2387, U+238B, U+23CE-23CF, U+2423, U+2460-2473, U+24B6-24CF, U+24EA-24F4, U+24FF, U+25A0-25A2, U+25AA, U+25B2-25B3, U+25B6-25B7, U+25BA-25BD, U+25C0-25C1, U+25C4-25C7, U+25CA-25CB, U+25CF, U+25E6, U+25EF, U+2600, U+2605-2606, U+263C, U+2661, U+2665, U+266A, U+26A0, U+2713, U+2717, U+2756, U+2776-2789, U+27EF, U+27F5-27FA, U+2985-2986, U+2B06, U+2B12-2B13, U+2B1C, U+2C7C, U+2C7F, U+2DFF, U+2E18, U+3000-3003, U+3008-3011, U+3014-301F, U+3041-3094, U+3099-309E, U+30A1-30FE, U+3131-3164, U+318D, U+321C, U+3380-3384, U+3388-33CA, U+33CF-33D0, U+33D3, U+33D6, U+33D8, U+33DB-33DD, U+A69F, U+A7FF, U+A92E, U+AC00-D7A3, U+E000, U+E002-E05E, U+E06A-E080, U+E093-E096, U+E0A5-E0E6, U+E0F3-E11C, U+E11E-E12A, U+E131-E147, U+E14E-E164, U+EE01-EE05, U+F000-F057, U+F6C3, U+FE20-FE2D, U+FEFF, U+FF01-FF60, U+FFA1-FFBE, U+FFC2-FFC7, U+FFCA-FFCF, U+FFD2-FFD7, U+FFDA-FFDC, U+FFE0-FFE1, U+FFE5-FFE6, U+1F10B, U+1F12F-1F149, U+1F150-1F16B, U+1F170-1F189, U+1F850, U+1F852, U+F0000-F0002;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-SemiBold.common.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+AC00-D7A3;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-SemiBold.site.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20-7E, U+A9, U+AE, U+B0-B1, U+B7, U+D7, U+F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026-2027, U+203B, U+2103, U+2122, U+2190-2193, U+2460-2469, U+25A0-25A1, U+25B2-25B3, U+25CB, U+25CF, U+2605-2606, U+3001-3002, U+3008-3011, U+AC00-AC01, U+AC04, U+AC08, U+AC12, U+AC19, U+AC1C-AC1D, U+AC70, U+AC74, U+AC80, U+AC83, U+AC8C, U+ACA0, U+ACA8, U+ACAC, U+ACB0, U+ACBC-ACBD, U+ACC4, U+ACE0, U+ACE8, U+ACF3, U+ACF5, U+ACFC, U+AD00, U+AD11, U+AD1C, U+AD6C-AD6D, U+AD81, U+AD8C, U+ADF8, U+ADFC, U+AE08, U+AE30, U+AE34, U+AE38, U+AE43, U+AE4C, U+AED8, U+AFB8, U+AFBC, U+B00C, U+B01C, U+B04A, U+B04C, U+B05D, U+B098, U+B09C, U+B0A0, U+B0A8, U+B0AC, U+B0B4, U+B0BC, U+B0C4, U+B108, U+B110, U+B123-B124, U+B137, U+B144, U+B178, U+B192-B193, U+B204, U+B20C, U+B274, U+B294, U+B2A5, U+B2C8, U+B2E4, U+B2E8, U+B2EB-B2EC, U+B2F4-B2F5, U+B2F9, U+B300, U+B354, U+B370, U+B3C4, U+B3CC, U+B3D9, U+B418, U+B41C, U+B420, U+B428-B429, U+B450, U+B4A4, U+B4DC, U+B4E0, U+B4E4, U+B4ED, U+B4F1, U+B514, U+B530, U+B54C, U+B5A4, U+B5BB, U+B610, U+B6F0, U+B77C-B77D, U+B780, U+B78C, U+B798, U+B79C, U+B7A8, U+B7AB, U+B7B5, U+B7C9, U+B7EC, U+B7F0, U+B807-B808, U+B824-B825, U+B828, U+B838, U+B840, U+B85C-B85D, U+B86D, U+B8CC, U+B8E8, U+B958, U+B974, U+B978, U+B97C, U+B984, U+B9AC, U+B9B4, U+B9BC-B9BD, U+B9C1, U+B9C8-B9C9, U+B9CC, U+B9CE, U+B9DD-B9DE, U+B9E4, U+B9FA, U+BA38, U+BA3C, U+BA54, U+BA70, U+BA74, U+BA85, U+BAA8-BAA9, U+BABB, U+BB34, U+BB38, U+BB3C, U+BBF8, U+BBFC, U+BC00, U+BC0F, U+BC14, U+BC18, U+BC1B-BC1C, U+BC29, U+BC84, U+BC88, U+BC94-BC95, U+BCC0, U+BCC4, U+BCF4-BCF5, U+BCF8, U+BCFC, U+BD80-BD81, U+BD84, U+BD88, U+BDF0, U+BE0C, U+BE14, U+BE44, U+BE60, U+BE7C, U+BE80, U+BE8D, U+BE90, U+C0AC-C0AD, U+C0B0, U+C0B4, U+C0C1, U+C0C8-C0C9, U+C0DD, U+C0E4, U+C11C-C11D, U+C120, U+C124, U+C12D, U+C131, U+C138, U+C13C, U+C154, U+C158, U+C18C-C18D, U+C1A1, U+C1C4, U+C1FC, U+C20F, U+C218, U+C21C, U+C26C, U+C288, U+C2A4, U+C2B5, U+C2B7, U+C2DC-C2DD, U+C2E0, U+C2E4, U+C2EC-C2ED, U+C2F6, U+C464, U+C4F0, U+C544-C545, U+C548, U+C54A, U+C54C, U+C554, U+C558, U+C55E, U+C57C-C57D, U+C591, U+C5B4, U+C5B8, U+C5C5-C5C6, U+C5C8, U+C5D0, U+C5EC-C5ED, U+C5F0, U+C5F4, U+C601, U+C606, U+C608, U+C624, U+C62C, U+C62E, U+C640, U+C644, U+C678, U+C694, U+C6A9, U+C6B0, U+C6B4, U+C6C1, U+C6CC, U+C6D0, U+C6D4, U+C6F9, U+C704, U+C720, U+C724, U+C728, U+C73C, U+C740, U+C744, U+C74C, U+C758, U+C774-C775, U+C778, U+C77C, U+C784-C785, U+C788, U+C790-C791, U+C7A0, U+C7A5, U+C7AC, U+C7C1, U+C800-C801, U+C804, U+C808, U+C810-C811, U+C815, U+C81C-C81D, U+C838, U+C870, U+C885, U+C8FC, U+C900, U+C904, U+C911, U+C988-C989, U+C990, U+C99D, U+C9C0-C9C1, U+C9C4, U+C9C8, U+C9D1, U+C9D5, U+C9E7, U+CC28, U+CC2E, U+CC30, U+CC38, U+CC3D-CC3E, U+CC44-CC45, U+CC57, U+CC98, U+CCA0, U+CCA8, U+CCAB, U+CCAD, U+CCB4, U+CD08, U+CD2C, U+CD5C, U+CD94, U+CD9C, U+CDA4, U+CDB0, U+CDE8, U+CE20, U+CE35, U+CE58, U+CE5C, U+CE68, U+CE6D, U+CE74, U+CE78, U+CEA0, U+CEF7, U+CF00, U+CF1C, U+CF54, U+CF58, U+CFE0, U+D06C, U+D0A4, U+D0C0-D0C1, U+D0D0, U+D0D5, U+D0DC-D0DD, U+D130, U+D14C, U+D150, U+D1A0-D1A1, U+D1B5, U+D2B8-D2B9, U+D2BC, U+D2F0-D2F1, U+D300, U+D305, U+D30C, U+D314, U+D328, U+D398, U+D3B4, U+D3B8, U+D3EC, U+D3F0, U+D3FC, U+D45C, U+D488, U+D504, U+D508, U+D50C, U+D53C, U+D544, U+D551, U+D558, U+D55C, U+D560, U+D568-D569, U+D56D, U+D574-D575, U+D588-D589, U+D5A5, U+D5D8, U+D601, U+D604, U+D611, U+D615, U+D638, U+D648, U+D64D, U+D654-D655, U+D65C, U+D669, U+D68C-D68D, U+D6A8, U+D6C4, U+D734, U+D76C, U+D788, U+FF01, U+FF05-FF06, U+FF08-FF09, U+FF0C, U+FF1A-FF1B, U+FF1F, U+FF3B, U+FF3D, U+FF5E;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Bold.rest.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20-7E, U+A0-148, U+14A-1C3, U+1C5-31E, U+321-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3E1, U+3F0-49D, U+4A0-4FF, U+52F, U+E3F, U+1D43, U+1D47-1D49, U+1D4D, U+1D4F-1D50, U+1D52, U+1D56-1D58, U+1D5B, U+1D62-1D65, U+1D9C, U+1DA0, U+1DBB, U+1DBF-1DF5, U+1DFC-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-200D, U+2010-2027, U+202F-2060, U+2070-2071, U+2074-208E, U+2090-209C, U+20A0-20BF, U+20DB-20DE, U+20E8, U+20F0, U+2100-2101, U+2103, U+2105-2106, U+2109, U+2113, U+2116-2117, U+211E-2123, U+2126, U+212A-212B, U+212E, U+2132, U+213B, U+214D, U+214F, U+2153, U+215A-2188, U+2190-2199, U+21A9-21AA, U+21B0-21B1, U+21B3-21B5, U+21BA-21BB, U+21D0, U+21D2, U+21D4, U+21DE-21DF, U+21E4-21E5, U+21E7, U+21EA, U+2202, U+2205-2206, U+220F, U+2211-2212, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+226A-226B, U+22EF, U+2303, U+2305, U+2318, U+2325-2327, U+2329-232B, U+2380, U+2387, U+238B, U+23CE-23CF, U+2423, U+2460-2473, U+24B6-24CF, U+24EA-24F4, U+24FF, U+25A0-25A2, U+25AA, U+25B2-25B3, U+25B6-25B7, U+25BA-25BD, U+25C0-25C1, U+25C4-25C7, U+25CA-25CB, U+25CF, U+25E6, U+25EF, U+2600, U+2605-2606, U+263C, U+2661, U+2665, U+266A, U+26A0, U+2713, U+2717, U+2756, U+2776-2789, U+27EF, U+27F5-27FA, U+2985-2986, U+2B06, U+2B12-2B13, U+2B1C, U+2C7C, U+2C7F, U+2DFF, U+2E18, U+3000-3003, U+3008-3011, U+3014-301F, U+3041-3094, U+3099-309E, U+30A1-30FE, U+3131-3164, U+318D, U+321C, U+3380-3384, U+3388-33CA, U+33CF-33D0, U+33D3, U+33D6, U+33D8, U+33DB-33DD, U+A69F, U+A7FF, U+A92E, U+AC00-D7A3, U+E000, U+E002-E05E, U+E06A-E080, U+E093-E096, U+E0A5-E0E6, U+E0F3-E11C, U+E11E-E12A, U+E131-E147, U+E14E-E164, U+EE01-EE05, U+F000-F057, U+F6C3, U+FE20-FE2D, U+FEFF, U+FF01-FF60, U+FFA1-FFBE, U+FFC2-FFC7, U+FFCA-FFCF, U+FFD2-FFD7, U+FFDA-FFDC, U+FFE0-FFE1, U+FFE5-FFE6, U+1F10B, U+1F12F-1F149, U+1F150-1F16B, U+1F170-1F189, U+1F850, U+1F852, U+F0000-F0002;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Bold.common.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+AC00-D7A3;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Bold.site.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20-7E, U+A9, U+AE, U+B0-B1, U+B7, U+D7, U+F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026-2027, U+203B, U+2103, U+2122, U+2190-2193, U+2460-2469, U+25A0-25A1, U+25B2-25B3, U+25CB, U+25CF, U+2605-2606, U+3001-3002, U+3008-3011, U+AC00-AC01, U+AC04, U+AC08, U+AC12, U+AC19, U+AC1C-AC1D, U+AC70, U+AC74, U+AC80, U+AC83, U+AC8C, U+ACA0, U+ACA8, U+ACAC, U+ACB0, U+ACBC-ACBD, U+ACC4, U+ACE0, U+ACE8, U+ACF3, U+ACF5, U+ACFC, U+AD00, U+AD11, U+AD1C, U+AD6C-AD6D, U+AD81, U+AD8C, U+ADF8, U+ADFC, U+AE08, U+AE30, U+AE34, U+AE38, U+AE43, U+AE4C, U+AED8, U+AFB8, U+AFBC, U+B00C, U+B01C, U+B04A, U+B04C, U+B05D, U+B098, U+B09C, U+B0A0, U+B0A8, U+B0AC, U+B0B4, U+B0BC, U+B0C4, U+B108, U+B110, U+B123-B124, U+B137, U+B144, U+B178, U+B192-B193, U+B204, U+B20C, U+B274, U+B294, U+B2A5, U+B2C8, U+B2E4, U+B2E8, U+B2EB-B2EC, U+B2F4-B2F5, U+B2F9, U+B300, U+B354, U+B370, U+B3C4, U+B3CC, U+B3D9, U+B418, U+B41C, U+B420, U+B428-B429, U+B450, U+B4A4, U+B4DC, U+B4E0, U+B4E4, U+B4ED, U+B4F1, U+B514, U+B530, U+B54C, U+B5A4, U+B5BB, U+B610, U+B6F0, U+B77C-B77D, U+B780, U+B78C, U+B798, U+B79C, U+B7A8, U+B7AB, U+B7B5, U+B7C9, U+B7EC, U+B7F0, U+B807-B808, U+B824-B825, U+B828, U+B838, U+B840, U+B85C-B85D, U+B86D, U+B8CC, U+B8E8, U+B958, U+B974, U+B978, U+B97C, U+B984, U+B9AC, U+B9B4, U+B9BC-B9BD, U+B9C1, U+B9C8-B9C9, U+B9CC, U+B9CE, U+B9DD-B9DE, U+B9E4, U+B9FA, U+BA38, U+BA3C, U+BA54, U+BA70, U+BA74, U+BA85, U+BAA8-BAA9, U+BABB, U+BB34, U+BB38, U+BB3C, U+BBF8, U+BBFC, U+BC00, U+BC0F, U+BC14, U+BC18, U+BC1B-BC1C, U+BC29, U+BC84, U+BC88, U+BC94-BC95, U+BCC0, U+BCC4, U+BCF4-BCF5, U+BCF8, U+BCFC, U+BD80-BD81, U+BD84, U+BD88, U+BDF0, U+BE0C, U+BE14, U+BE44, U+BE60, U+BE7C, U+BE80, U+BE8D, U+BE90, U+C0AC-C0AD, U+C0B0, U+C0B4, U+C0C1, U+C0C8-C0C9, U+C0DD, U+C0E4, U+C11C-C11D, U+C120, U+C124, U+C12D, U+C131, U+C138, U+C13C, U+C154, U+C158, U+C18C-C18D, U+C1A1, U+C1C4, U+C1FC, U+C20F, U+C218, U+C21C, U+C26C, U+C288, U+C2A4, U+C2B5, U+C2B7, U+C2DC-C2DD, U+C2E0, U+C2E4, U+C2EC-C2ED, U+C2F6, U+C464, U+C4F0, U+C544-C545, U+C548, U+C54A, U+C54C, U+C554, U+C558, U+C55E, U+C57C-C57D, U+C591, U+C5B4, U+C5B8, U+C5C5-C5C6, U+C5C8, U+C5D0, U+C5EC-C5ED, U+C5F0, U+C5F4, U+C601, U+C606, U+C608, U+C624, U+C62C, U+C62E, U+C640, U+C644, U+C678, U+C694, U+C6A9, U+C6B0, U+C6B4, U+C6C1, U+C6CC, U+C6D0, U+C6D4, U+C6F9, U+C704, U+C720, U+C724, U+C728, U+C73C, U+C740, U+C744, U+C74C, U+C758, U+C774-C775, U+C778, U+C77C, U+C784-C785, U+C788, U+C790-C791, U+C7A0, U+C7A5, U+C7AC, U+C7C1, U+C800-C801, U+C804, U+C808, U+C810-C811, U+C815, U+C81C-C81D, U+C838, U+C870, U+C885, U+C8FC, U+C900, U+C904, U+C911, U+C988-C989, U+C990, U+C99D, U+C9C0-C9C1, U+C9C4, U+C9C8, U+C9D1, U+C9D5, U+C9E7, U+CC28, U+CC2E, U+CC30, U+CC38, U+CC3D-CC3E, U+CC44-CC45, U+CC57, U+CC98, U+CCA0, U+CCA8, U+CCAB, U+CCAD, U+CCB4, U+CD08, U+CD2C, U+CD5C, U+CD94, U+CD9C, U+CDA4, U+CDB0, U+CDE8, U+CE20, U+CE35, U+CE58, U+CE5C, U+CE68, U+CE6D, U+CE74, U+CE78, U+CEA0, U+CEF7, U+CF00, U+CF1C, U+CF54, U+CF58, U+CFE0, U+D06C, U+D0A4, U+D0C0-D0C1, U+D0D0, U+D0D5, U+D0DC-D0DD, U+D130, U+D14C, U+D150, U+D1A0-D1A1, U+D1B5, U+D2B8-D2B9, U+D2BC, U+D2F0-D2F1, U+D300, U+D305, U+D30C, U+D314, U+D328, U+D398, U+D3B4, U+D3B8, U+D3EC, U+D3F0, U+D3FC, U+D45C, U+D488, U+D504, U+D508, U+D50C, U+D53C, U+D544, U+D551, U+D558, U+D55C, U+D560, U+D568-D569, U+D56D, U+D574-D575, U+D588-D589, U+D5A5, U+D5D8, U+D601, U+D604, U+D611, U+D615, U+D638, U+D648, U+D64D, U+D654-D655, U+D65C, U+D669, U+D68C-D68D, U+D6A8, U+D6C4, U+D734, U+D76C, U+D788, U+FF01, U+FF05-FF06, U+FF08-FF09, U+FF0C, U+FF1A-FF1B, U+FF1F, U+FF3B, U+FF3D, U+FF5E;
}
/* [fonts:end] */

/* ---------- 색·간격 토큰 ----------
 * 대비값은 흰 배경(#FFFFFF) 기준, WCAG 2.x 상대 휘도 공식으로 계산.
 * 로고 추출: WANSTAR_symbol의 푸른 면 픽셀 362개 중앙값 = #4C5E6C (6.72:1)
 * 포인트색은 같은 색상(H 206°)에서 채도를 0.17 → 0.30으로 올리고 명도를 0.34로 맞춘 값.
 */
:root {
  --paper: #ffffff;
  --ink: #1b232b;          /* 본문·제목 15.89:1 (AAA) */
  --ink-soft: #4f5f6c;     /* 보조 텍스트. [R21] 2026-10-14 #5b6b78(5.50:1)에서 한 단계 진하게: 흰 바탕 6.6:1, --band 위 6.2:1 (AA) */
  --accent: #3d5a71;       /* 주 버튼 배경·링크 7.24:1, 버튼 위 흰 글자도 7.24:1 (AA) */
  --accent-strong: #30475a;/* 주 버튼 hover 9.66:1 */
  --logo-slate: #4c5e6c;   /* 로고 추출 원색 6.72:1 (참고용) */
  --line: #d5dce2;         /* 구분선, 장식 전용 1.38:1 (텍스트에 쓰지 않음) */
  --orbit: #9aa8b4;        /* 궤도 선, 장식 전용 */
  --mark-dark: #2b3f50;
  --mark-light: #7d8f9e;

  --font-sans: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-zh: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;
  --header-h: 56px;

  /* [R17] 2026-10-14 컨트롤 변수 한 세트(버튼·입력칸·체크박스·상자). 모서리 6px 하나(알약 모양 금지). */
  --radius-control: 6px;
  --control-h: 52px;          /* 버튼·입력칸 높이 */
  --control-h-sm: 44px;       /* 작은 버튼·헤더 [상담하기]: 터치 대상 최소 44px */
  --control-border-w: 1px;    /* 테두리 버튼·입력칸 테두리. Chromium은 1.5px를 1px로 내려 그려서 브라우저마다 달라지므로 1px로 통일 */
  --ink-strong: #0e1318;      /* 보조 버튼 hover 글자·테두리. #eef2f5 위 16.58:1 */
  --tint: #eef2f5;            /* 보조 버튼 hover 옅은 배경 */
  --cases-bg: #faf9f6;        /* [R34] 2026-10-19 /cases/ 페이지 배경(아이보리). 링 아래 흐림 덮개도 이 값을 써서 배경과 경계가 생기지 않게 한다 */
  --band: #f5f7f9;            /* [R21] 2026-10-14 전체 폭 옅은 바탕(페이지당 최대 2개). 카드는 이 위에서 흰 바탕 + 1px 테두리 */
  --field-border: #83919e;    /* 입력칸 테두리 3.23:1 (비텍스트 3:1 기준) */
  --focus-ring: 2px solid var(--accent); /* focus-visible 외곽선, 간격 2px */
  --c-error: #b3261e;         /* 오류 글자·테두리 6.54:1 */
  --t-color: 160ms ease;      /* 색 전환 */
  --t-move: 160ms cubic-bezier(0.23, 1, 0.32, 1); /* 이동(누름·화살표) */
  color-scheme: light;        /* 삼성 인터넷 등 강제 다크 모드 대비(head의 meta와 함께) */

  /* [R7] 간격 토큰: 섹션은 선 없이 간격으로 나눈다 */
  --space-section: clamp(48px, 6.25vw, 80px); /* [R8] 데스크톱 80px, 360px에서 48px */
  --space-heading: clamp(24px, 3vw, 40px);
  --space-page-head: clamp(48px, 7vw, 96px);
  --bar-h: 72px;
  /* [R8] 선 위계: 목록·묶음의 윗선(강) / 항목 사이 구분선(약). 같은 위계는 이 두 값만 쓴다. */
  --rule-strong: 1px solid var(--ink);
  --rule-soft: 1px solid var(--line);
}

/* ---------- 기본 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* [R56] 2026-11-02 2-11i: 하단 고정 바가 있는 페이지(959px 이하)에서 Tab 포커스·scrollIntoView가 바 아래로 가려지지 않게. 스크롤 위치만 바꾸고 배치는 그대로. 960px 이상은 아래 960 블록에서 0 */
  scroll-padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
/* [R8] 한국어 제목·본문 단어 단위 줄바꿈(body에서 상속, 제목·목록에 명시) */
h1, h2, h3, p, li, dt, dd { word-break: keep-all; }
.nowrap { white-space: nowrap; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; }

:lang(zh-Hans) { font-family: var(--font-zh); }

::selection { background: #d5dce2; color: var(--ink); }
/* [R17] 키보드 초점만 표시(마우스 클릭에는 :focus-visible이 걸리지 않음) */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 16px; top: -48px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-control);
}
.skip-link:focus { top: 8px; }

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

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  padding: 0 28px;
  border-radius: var(--radius-control);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* [R17] 색과 transform만 전환 */
  transition: background-color var(--t-color), color var(--t-color), border-color var(--t-color), transform var(--t-move);
}
.btn--primary {
  background: var(--accent);
  color: #fff;
  border: var(--control-border-w) solid var(--accent);
}
.btn--secondary {
  background: var(--paper);
  color: var(--ink);
  border: var(--control-border-w) solid var(--ink);
}
.btn:active, .nav-cta:active { transform: translateY(1px); }

.more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em; /* [R17] 글자와 화살표 사이 한 칸 */
  min-height: 44px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  transition: color var(--t-color);
}
.more-link__arrow { display: inline-block; text-decoration: none; transition: transform var(--t-move); }

/* [R17] hover는 마우스가 있는 기기에서만(휴대폰에서 탭 후 hover 색이 남지 않게)
   [R19] 2026-10-14 (pointer: fine)을 더해 펜·하이브리드 기기에서 hover가 남지 않게 한다. */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); } /* 흰 글자 9.66:1 */
  .btn--secondary:hover, .nav-cta:hover { color: var(--ink-strong); border-color: var(--ink-strong); background: var(--tint); }
  .more-link:hover { color: var(--accent-strong); } /* 9.66:1 */
  .more-link:hover .more-link__arrow { transform: translateX(3px); }
  /* [R19] 푸터·동의 링크는 이미 밑줄이 있어 hover 때 밑줄을 2px로 굵게 하고 색을 진하게 한다. */
  .site-footer a:hover { color: var(--ink-strong); text-decoration-thickness: 2px; } /* 흰 배경 18.6:1 */
  .consent-link:hover { color: var(--accent-strong); text-decoration-thickness: 2px; } /* 9.66:1 */
}

/* ---------- 헤더 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: var(--rule-soft);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.12em;
}
.brand__mark { width: 24px; height: 24px; flex: none; }
.brand__logo { display: block; width: auto; height: 32px; } /* [R37] 가로형 로고: 960px 미만 32px("WANSTAR" 글자 약 9.7px), 960px 이상 40px(약 12.2px) */

/* [R7] JS가 없으면(html에 .js 없음) 햄버거를 숨기고 메뉴를 펼쳐 둔다. */
.site-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
.js .site-nav__toggle { display: inline-flex; }
.site-nav__toggle svg { width: 22px; height: 22px; }
.site-nav__toggle .icon-close { display: none; }
.site-nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.site-nav__toggle[aria-expanded="true"] .icon-close { display: block; }

.site-nav__menu {
  display: none;
  position: absolute;
  left: 0; right: 0;
  top: var(--header-h);
  padding: 8px var(--gutter) 24px;
  background: var(--paper);
  border-bottom: var(--rule-soft);
}
.site-nav__menu.is-open { display: block; }
html:not(.js) .site-header__inner { flex-wrap: wrap; height: auto; min-height: var(--header-h); padding-block: 12px; }
html:not(.js) .site-header { position: static; }
html:not(.js) .site-nav { width: 100%; }
html:not(.js) .site-nav__menu { display: block; position: static; padding: 8px 0 0; border: 0; }
.site-nav__list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: var(--rule-soft);
}
/* [R7] 현재 페이지 표시 */
.site-nav__list a[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}
.site-nav__cta { margin-top: 16px; width: 100%; justify-content: center; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h-sm); /* [R17] 40 → 44px */
  padding: 0 18px;
  border: var(--control-border-w) solid var(--ink);
  border-radius: var(--radius-control);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--t-color), color var(--t-color), border-color var(--t-color), transform var(--t-move);
}

/* ---------- 히어로 B안: 명함의 별 ---------- */
.hero {
  position: relative;
  overflow: hidden; /* 안전망. 넘침을 가리는 용도로 쓰지 않는다(360px scrollWidth로 검증). */
  overflow: clip;
}
.hero__inner {
  position: relative;
  padding-top: clamp(40px, 9vw, 120px);
  padding-bottom: clamp(48px, 9vw, 128px);
}
/* [R53] 2026-10-23 2-11f 959px 이하(별 버전): 별이 우측 상단(절대 위치)으로 가면서 히어로가 짧아져 서비스 구역 첫 사진(lazy 640w)이 첫 화면에 들어와
   LCP가 5.1초 사진이 됐다 → 히어로를 첫 화면 높이(헤더·하단 고정 바 제외)로 유지(A안, 사용자 승인: LCP 요소는 히어로 설명문으로 바뀜).
   min-height만 쓴다(내용이 더 길면 늘어남: 가로로 긴 화면·키 작은 화면). svh(주소창 변화로 높이가 바뀌지 않아 CLS 없음), 앞 줄 vh는 svh 미지원 대체값. dvh 쓰지 않음.
   2px = 헤더 아래 테두리 1px + 하단 바 위 테두리 1px. 960px 이상은 960 블록이 display·min-height·align-content·padding을 다시 정한다.
   [R53] 2-11f 후속(사용자 선택 A2, A1 세로 가운데를 대체): 별·제목·설명은 위, 버튼은 하단 바 위 20px. 글 묶음을 세로 flex로 늘리고 버튼 묶음을 margin-top: auto로 아래에 붙인다.
   버튼 위 최소 간격은 이전 margin-top 값(clamp 28~40px)을 padding-top으로 유지(내용이 길 때). */
:where(.hero:not(.hero--phone)) .hero__inner {
  display: grid;
  align-content: stretch; /* 글 묶음 줄을 히어로 높이까지 늘림 */
  min-height: calc(100vh - var(--header-h) - var(--bar-h) - 2px - env(safe-area-inset-bottom));
  min-height: calc(100svh - var(--header-h) - var(--bar-h) - 2px - env(safe-area-inset-bottom));
  padding-bottom: 20px;
}
.hero__text {
  position: relative;
  z-index: 2;
  max-width: 40rem;
}
.hero__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.32em;
  color: var(--ink);
}
.hero__brand span { margin-right: -0.32em; }
.hero__brand::after {
  content: "";
  width: 64px;
  height: 1px;
  background: var(--ink);
}
.hero__title {
  margin-top: clamp(20px, 3vw, 32px);
  font-size: clamp(1.875rem, 1.2rem + 3vw, 3.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.hero__lead {
  margin-top: clamp(16px, 2vw, 24px);
  max-width: 34rem;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  color: var(--ink-soft);
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: clamp(28px, 4vw, 40px);
}
/* [R53] 2-11f A2(위 .hero__inner 주석): 959px 이하 별 버전에서 글 묶음을 세로 flex로, 버튼 묶음을 아래(하단 바 위 20px)로. 기본 .hero__actions보다 뒤에 둬야 margin-top이 적용된다. */
:where(.hero:not(.hero--phone)) .hero__text { display: flex; flex-direction: column; }
:where(.hero:not(.hero--phone)) .hero__actions { margin-top: auto; padding-top: clamp(28px, 4vw, 40px); }
/* [R7] 960px 미만 배치는 2-11f에서 아래처럼 바뀜(버튼 아래 흐름 → 우측 상단 절대 위치). */
.hero__art {
  /* [R53] 2026-10-23 2-11f 959px 이하: 별을 히어로 우측 상단, 글 뒤에 오른쪽 40%가 잘리게(2-11e "버튼 아래 + 30% 잘림"을 대체).
     글(.hero__text, z-index 2)이 별보다 위에 그려진다(별은 z-index 없음). 위 끝 = 히어로 위(헤더 아래)에서 8px, 넘친 오른쪽은 .hero overflow clip이 잘라 가로 스크롤 0.
     크기·위치는 별 위 글자 픽셀 대비로 정했다(star-contrast.mjs: 제목 3:1, 설명·WANSTAR 4.5:1). 별 그림 칸의 38%가 제목색 대비 3:1 미달이라 글자가 별의 어두운 면에 걸리면 안 된다.
     560px 미만 140px: 요청 범위 200~260px × 잘림 30·40%는 360에서 모두 제목이 별 어두운 면에 걸려 미달(200/40 최저 1.01), 160px은 최저 3.03(여유 거의 없음),
     140px은 320~559 전 폭·위 0~16px·DPR 1·2에서 글자와 겹침 없음. 560~959px 260px: 560~959 전 폭에서 겹침 없음.
     960px 이상은 아래 960 블록이 top·right·width·margin·transform을 다시 정한다(2-11d와 같음). */
  position: absolute;
  /* [R4] multiply는 이 요소에 건다. img에 걸면 이 요소가 만든 쌓임 맥락 안에서만 섞여 흰 사각형이 궤도 선을 가린다. */
  mix-blend-mode: multiply;
  --hs-w: 140px;
  --hs-crop: .4;
  top: 8px;
  right: calc(var(--hs-w) * var(--hs-crop) * -1); /* 기준 = .hero__inner 패딩 상자 오른쪽 = 화면 오른쪽 끝 */
  width: var(--hs-w);
  pointer-events: none;
}
.hero__art img {
  width: 100%;
  height: auto;
}
/* [R9] 큰 호 선: 960px 미만에서는 숨긴다(가로 스크롤 0). */
.hero__orbit { display: none; }

/* [R49] 2026-10-22 2-11b 첫 화면 움직임(motion.heroIntro, 별 버전만). 페이지가 열릴 때 1회, 숫자는 motion.heroIntroSet → section style의 CSS 변수.
 * - 글: WANSTAR → 제목 → 설명 → 버튼 1 → 버튼 2 순서로 아래 --hi-shift에서 올라옴(--hi-dur, --hi-gap 간격).
 *   제목 마크업을 줄마다 나누지 않는다(줄바꿈이 화면 폭·글꼴 교체마다 달라짐). 지금 구조의 블록 하나하나를 "줄"로 쓴다.
 *   시작 투명도 --hi-from(0.86 이상, 빌드 검사): 가장 옅은 설명 #4f5f6c 흰 바탕 4.71:1, 주 버튼 흰 글자 5.1:1 → 움직이는 중에도 대비 통과, LCP 후보에서 빠지지 않음.
 * - 별: 투명도는 처음부터 1, 크기만 --hi-star-from → 1(글과 동시). .hero__art의 transform(960px 이상 translateY)과 겹치지 않게 개별 속성 scale을 쓴다.
 * - 광택: 별 모양 알파 마스크(star-mask-w536.webp) 안에서만 흰 그라데이션 띠가 대각선으로 1회 지나감. 그림자 아님.
 *   흰 바탕 위 흰 빛은 .hero__art의 multiply 뒤에도 흰색이라, 마스크 가장자리가 1px 번져도 바탕은 변하지 않는다.
 * - 모두 animation-fill-mode: backwards(끝난 뒤에는 원래 값 → 버튼 hover transform을 막지 않음). transform·opacity만, 크기·위치 계산 없음(CLS 0).
 *   버튼은 처음부터 클릭 가능(pointer-events 변경 없음). 시작 상태는 html.js(layout.html head) 아래에만 있다. 히어로 앞 인라인 스크립트는 LCP를 늦춰 쓰지 않는다.
 *   마스크가 아직 안 받아졌거나 실패하면 CSS 규칙상 마스크 층은 투명으로 처리돼 광택이 보이지 않는다(사각형 빛 없음). */
.hero__shine { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero[data-intro] :is(.hero__brand, .hero__title, .hero__lead, .hero__actions .btn) { animation: hi-rise var(--hi-dur) cubic-bezier(.2, .7, .2, 1) backwards; }
  .js .hero[data-intro] .hero__title { animation-delay: var(--hi-gap); }
  .js .hero[data-intro] .hero__lead { animation-delay: calc(var(--hi-gap) * 2); }
  .js .hero[data-intro] .hero__actions .btn:nth-child(1) { animation-delay: calc(var(--hi-gap) * 3); }
  .js .hero[data-intro] .hero__actions .btn:nth-child(2) { animation-delay: calc(var(--hi-gap) * 4); }
  .js .hero[data-intro] .hero__art { animation: hi-star var(--hi-star-dur) ease-out backwards; }
  .js .hero[data-intro] .hero__shine {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1072 / 942; /* 별 이미지와 같은 비율·위치 */
    overflow: hidden;
    pointer-events: none;
    -webkit-mask: url(/images/star-mask-w536.webp) 0 0 / 100% 100% no-repeat;
            mask: url(/images/star-mask-w536.webp) 0 0 / 100% 100% no-repeat; /* 마스크(허용) */
  }
  .js .hero[data-intro] .hero__shine::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / var(--hi-shine-alpha)) 50%, transparent 70%); /* 별 위 덮개(허용) */
    transform: translateX(-100%);
    animation: hi-shine var(--hi-shine-dur) ease-in-out var(--hi-shine-at) backwards;
  }
  /* shineRepeat: 애니메이션 이름을 바꿔 다시 재생(레이아웃 읽기 없음) */
  .js .hero[data-intro].hi-a .hero__shine::before { animation-name: hi-shine-a; animation-delay: 0s; }
  .js .hero[data-intro].hi-b .hero__shine::before { animation-name: hi-shine-b; animation-delay: 0s; }
}
@keyframes hi-rise { from { opacity: var(--hi-from); transform: translateY(var(--hi-shift)); } }
@keyframes hi-star { from { scale: var(--hi-star-from); } }
@keyframes hi-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes hi-shine-a { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes hi-shine-b { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* [R51] 2026-10-23 2-11d 장식 곡선 그리기(motion.heroIntroSet.curveDraw, 960px 이상에서만 보이는 .hero__orbit path). 위 시작점(M660 -20) → 아래 끝으로 1회.
 * stroke-dasharray·stroke-dashoffset만 쓴다(크기·위치 변화 없음, 그림자 없음). 대시 속성은 키프레임 안에만 둔다 → 끝나면(fill backwards) 원래 곡선과 픽셀 단위로 같다.
 * 길이 단위: 곡선은 viewBox 1440×760을 preserveAspectRatio="none"으로 늘리고 vector-effect="non-scaling-stroke"라 Edge는 대시를 "화면 길이(px)"로 그린다.
 *   pathLength="1"은 사용자 좌표 길이(1036)로 정규화돼 화면 길이(0.71~1.28배)와 어긋나 넓은 화면에서 중간에 멈춤(1920: 683/759px까지만, 시작 때 꼬리 보임) → 쓰지 않는다.
 *   화면 길이 근사 = 384.84px × (100vw/1440) + 645.59px × (히어로 높이/760), 히어로 높이 = min(100svh - 헤더, 760px)(960px 이상 측정값과 같음).
 *   폭 960~2560·높이 400~760에서 실제 길이 대비 −3.4~+0.7% → 4%를 더해 항상 실제보다 길게(끝까지 그려지고, 지정 시간의 약 95~99%에 다 그려짐). 간격 4000px는 어떤 화면 길이보다 길다. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero[data-intro][data-curve] .hero__orbit path {
    --hi-curve-len: calc(27.794vw + 0.88344 * min(100svh - var(--header-h), 760px));
    animation: hi-curve var(--hi-curve-dur) ease-in-out var(--hi-curve-delay) backwards;
  }
}
@keyframes hi-curve {
  from { stroke-dasharray: var(--hi-curve-len) 4000px; stroke-dashoffset: var(--hi-curve-len); }
  to { stroke-dasharray: var(--hi-curve-len) 4000px; stroke-dashoffset: 0; }
}

/* ---------- 페이지 머리(하위 페이지 h1) ---------- */
.page-head {
  padding-top: var(--space-page-head);
}
.page-head__title {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.page-head__lead {
  margin-top: 16px;
  max-width: 40rem;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  color: var(--ink-soft);
}

/* ---------- 섹션 ---------- */
.section { padding-block: var(--space-section); }
/* [R21] 2026-10-14 페이지 머리(h1) 아래 여백 축소: 최대 72px → 40px (--space-section은 그대로) */
.section--first { padding-top: clamp(24px, 3vw, 40px); }
.section--band { background: var(--band); }
/* [R21] 카드: 1px 테두리 + 흰 바탕(그림자·그라데이션 금지). 옅은 띠 위에서도 같은 모양 */
.summary-grid__item, .split--cards .split__item, .creator-facts, .contact-aside {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}
.section__title {
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* [R8] 하위 페이지(page-head가 있는 페이지)의 h2는 h1과 위계가 분명하도록 한 단계 작게 */
main:has(.page-head) .section__title { font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); }
.section__lead {
  margin-top: 16px;
  max-width: 44rem;
  color: var(--ink-soft);
}
.section__actions { margin-top: 32px; }

.prose { max-width: 44rem; }
.prose > * + * { margin-top: 16px; }
.prose p { color: var(--ink-soft); }
.prose .section__title { margin-bottom: var(--space-heading); }
.about-intro { display: grid; gap: var(--space-heading); }
/* [R40] 2026-10-20 회사 소개 로고(왼쪽 공백) + 제목을 본문 위로. 로고 바탕(약 #FDFDFC)과 흰 페이지의 경계는 multiply로 감춘다(히어로 별과 같은 방식).
 * 960px 미만(제안안): 제목 위 왼쪽 맞춤 144px. */
/* [R42] 2026-10-20 2-8c: 960 미만 가로 가운데·폭 min(240px, 70%). 960 이상은 아래 미디어 쿼리(왼쪽 칸 가운데, 글 묶음 기준 세로 가운데). */
.about-intro__logo { width: min(240px, 70%); justify-self: center; }
.about-intro__logo img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.about-intro__title { margin-bottom: var(--space-heading); }
/* [R44] 2026-10-20 2-9b: /about/ 960~1199px CLS(0.12~0.13) 원인 = 글꼴 교체 전 대체 글꼴(맑은 고딕)이 Pretendard보다 글자 폭이 약 16.6% 넓어
 * 제목이 2줄 → 1줄로 바뀌며 본문 전체(약 38px)와 세로 가운데 로고가 함께 움직임(about-cls.mjs, font-ratio.mjs).
 * 고친 방법: 이 구역에만 크기를 맞춘 대체 글꼴을 Pretendard 바로 뒤에 둔다(맑은 고딕을 폭 비율만큼 줄이고 세로 지표를 Pretendard 0.95/0.24에 맞춤. override 값은 size-adjust가 곱해지므로 0.95/0.858 등으로 나눈 값).
 * 맑은 고딕이 없는 기기(맥 등)는 이 글꼴이 건너뛰어지고 기존 순서(Apple SD Gothic Neo …) 그대로. 글꼴 파일을 내려받지 않는다(local()만). */
@font-face { font-family: "Pretendard Fallback"; src: local("Malgun Gothic"), local("MalgunGothic"); font-weight: 400; size-adjust: 85.8%; ascent-override: 110.7%; descent-override: 28%; line-gap-override: 0%; }
@font-face { font-family: "Pretendard Fallback"; src: local("Malgun Gothic Bold"), local("MalgunGothicBold"); font-weight: 700; size-adjust: 85.2%; ascent-override: 111.5%; descent-override: 28.2%; line-gap-override: 0%; }
.about-intro { font-family: "Pretendard", "Pretendard Fallback", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }

/* 큰 숫자 번호(01~05, STEP 01~04) */
.index-num {
  display: block;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.index-num--step { font-size: 0.875rem; letter-spacing: 0.08em; }

/* 메인 서비스 요약: 모바일 1단, PC 2단(960px 블록) */
.summary-grid {
  display: grid;
  gap: 12px; /* [R22] 960px 미만 카드 간격 12px */
  margin-top: var(--space-heading);
}
.summary-grid__item {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px; /* [R22] 960px 미만 안쪽 여백 18px, 960px 이상은 아래 블록에서 원래 값 */
}
.summary-grid__title { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); font-weight: 600; line-height: 1.45; }
.summary-grid__text { margin-top: 6px; color: var(--ink-soft); }
/* [R22] 2026-10-14 "서비스 자세히 보기"는 카드가 아니라 카드 묶음 아래 링크 */
.section__more { margin-top: 24px; }

/* 두 칸 블록(회사 소개·크리에이터 요약, CONTACT US, 협업 구조, 문의 안내) */
.split { display: grid; gap: 40px; }
.split--cards { gap: 12px; }
.split--cards .split__item { display: flex; flex-direction: column; align-items: flex-start; padding: 18px; }
.split--cards .split__item > :nth-last-child(2) { margin-bottom: 16px; }
.split--cards .split__item > :last-child { margin-top: auto; }
.section__title + .split, .section__lead + .split { margin-top: var(--space-heading); }
.split__title { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); font-weight: 700; line-height: 1.4; }
.split__sub { margin-left: 0; /* [R24] 제목에 " — "를 글자로 넣어 간격이 생김 */ font-size: 0.875rem; font-weight: 600; letter-spacing: 0.12em; color: var(--ink-soft); }
/* [R22] 2026-10-14 협력사 간체 명칭: 영문용 넓은 자간을 중국어에는 쓰지 않는다 */
.split__sub:lang(zh-Hans) { letter-spacing: 0.04em; }
.split__item p { margin-top: 12px; color: var(--ink-soft); }
.split__item .more-link, .split__item .btn { margin-top: 16px; }
.split__item .plain-list, .split__item .contact-list { margin-top: 16px; }
.split__lead { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 600; line-height: 1.45; color: var(--ink) !important; }
.partner-intro { margin-top: 32px; }

/* 서비스 상세: [R43] 2026-10-20 2-9a에서 옛 2×2 카드(.service-list·.service, [R22])를 지우고 아래 "서비스 페이지" 블록으로 바꿨다. */

/* 정보 목록(크리에이터 지원 안내) */
.fact-list { margin-top: var(--space-heading); border-top: var(--rule-strong); }
.fact-list__row { display: grid; gap: 8px; padding-block: 20px; border-bottom: var(--rule-soft); }
.fact-list dt { font-weight: 600; }
.fact-list dd { color: var(--ink-soft); }
.plain-list li { position: relative; padding-left: 18px; color: var(--ink-soft); }
.plain-list li + li { margin-top: 6px; }
.plain-list li::before { content: "–"; position: absolute; left: 0; top: 0; color: var(--ink); }

.contact-list li { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-block: 10px; border-bottom: var(--rule-soft); }
.contact-list__label { min-width: 4.5rem; font-weight: 600; }
.contact-list a { font-weight: 600; }

/* 페이지 끝 상담 블록 */
.cta { display: grid; gap: 20px; justify-items: start; }
.cta__title { font-size: clamp(1.375rem, 1.15rem + 1vw, 2rem); font-weight: 700; line-height: 1.35; }

/* ---------- 폼 [R11] ---------- */
.form { max-width: 44rem; margin-top: var(--space-heading); }
.form__guide { color: var(--ink-soft); }
.form__noscript { max-width: 44rem; margin-top: var(--space-heading); padding: 16px 20px; border: var(--rule-strong); border-radius: var(--radius-control); }
.form__noscript p + p { margin-top: 8px; }
.field { margin: 28px 0 0; padding: 0; border: 0; min-width: 0; }
.field__label { display: block; margin-bottom: 8px; font-weight: 600; }
.field__label--sub { margin-top: 16px; font-weight: 600; }
.field__req { font-weight: 400; color: var(--ink-soft); }
.field__opt { font-weight: 400; color: var(--ink-soft); }
.field__hint { margin: -2px 0 8px; font-size: 1rem; color: var(--ink-soft); } /* [R21] 15 → 16px */
.field__input {
  display: block;
  width: 100%;
  min-height: var(--control-h);
  padding: 12px 14px;
  font: inherit;
  font-size: 1.0625rem; /* 17px: iOS 입력 확대 방지(16px 이상) */
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: var(--control-border-w) solid var(--field-border);
  border-radius: var(--radius-control);
  transition: border-color var(--t-color);
}
.field__input::placeholder { color: #6b7884; } /* 4.52:1 */
/* [R17] 입력칸 초점: 테두리 색 + 공통 외곽선 */
.field__input:focus-visible { border-color: var(--accent); }
.field__input--area { min-height: 160px; resize: vertical; }
/* 선택 상자 화살표: 1px 삼각형 두 조각(장식 아님, 상태 표시) */
select.field__input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; cursor: pointer; }
.field__input[aria-invalid="true"] { border-color: var(--c-error); }
.field__error { margin-top: 8px; font-size: 0.9375rem; font-weight: 600; color: var(--c-error); }
.choice-list { display: grid; gap: 4px 24px; }
.choice { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.choice input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--accent); }
.choice--consent { align-items: center; min-height: var(--control-h-sm); } /* [R17] 동의 줄도 터치 높이 44px */

.consent-link { display: inline-block; margin: 8px 0 0 30px; color: var(--accent); }
/* [R47] 2026-10-22 2-11: 동의 안내 상자(1px 테두리, 그림자 없음). 글자색 --ink-soft는 흰 바탕 6.6:1 */
.consent-box { margin-bottom: 12px; padding: 14px 16px; border: var(--rule-soft); border-radius: var(--radius-control); font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); }
.consent-box__title { margin: 0 0 6px; font-weight: 700; color: var(--ink); }
.consent-box__list { margin: 0; padding-left: 1.1em; list-style: disc; }
.consent-box__note { margin: 8px 0 0; }
.consent-box a { color: var(--accent); }
.choice-list--row { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.form__notice--minor { margin-top: 20px; padding: 14px 16px; border: var(--rule-soft); border-radius: var(--radius-control); font-weight: 400; color: var(--ink-soft); }
.sns-list { display: grid; gap: 8px; }
.btn--small { min-height: var(--control-h-sm); margin-top: 12px; padding: 0 18px; font-size: 0.9375rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin-top: 16px; } /* [R16] interaction-only: 평소에는 높이 0, 확인이 필요할 때만 버튼 아래에 나타남 */
.form__notice { margin-top: 28px; font-weight: 600; }
.form__actions { margin-top: 28px; }
.form__preview-note { margin-top: 12px; color: var(--ink-soft); font-size: 0.9375rem; } /* [R41] 미리보기 빌드에서만 출력 */
.form__preview-note.is-active { color: #4a6278; font-weight: 600; } /* [R42] 제출하면 강조. 흰 바탕 6.35:1 */
.form__submit { width: 100%; } /* [R17] 560px 미만(360px 포함)은 가로 전체 폭 */
/* 제출 중("보내는 중…"): 흐리게 하지 않고 보조 글자색 배경으로 바꿔 흰 글자 대비 5.50:1 유지 */
.form__submit[disabled] { background: var(--ink-soft); border-color: var(--ink-soft); cursor: progress; transform: none; }
/* [2-12e 보완] 2026-11-09 접수 완료 화면: 폼 자리에 1px 테두리 상자. 체크 표시는 포인트색(흰 바탕 7.24:1), 그림자·그라데이션 없음. */
/* [2-12e 보완 2] 2026-11-09 사용자 요청: 사각형 테두리·배경 상자 제거. 상자 안쪽 여백이 사라진 만큼 위쪽 간격만 유지 */
.form-done { max-width: 44rem; margin-top: var(--space-heading); padding: 0; }
.form-done__mark { display: block; width: 48px; height: 48px; color: var(--accent); }
.form-done__title { margin-top: 16px; font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 700; line-height: 1.35; color: var(--ink); word-break: keep-all; }
.form-done__title:focus { outline: none; }
/* [2-12e 보완 3] 2026-11-09 사용자 요청: 완료 뒤 코드가 옮긴 초점(tabindex=-1, 화면 읽기용)의 사각형 테두리를 숨김. 누를 수 없는 제목이라 키보드 표시가 필요 없다. 버튼·링크·입력칸의 :focus-visible은 그대로 */
.form-done__title:focus-visible { outline: none; }
.form-done__text { margin-top: 12px; color: var(--ink-soft); word-break: keep-all; }
.form-done__note { margin-top: 8px; font-size: 0.9375rem; color: var(--ink-soft); }
.form-done__actions { margin-top: 28px; }
/* [2-12h] 2026-11-09 404 페이지: 메뉴와 같은 이동 목록(1px 선, 44px 이상) + [메인으로] */
.notfound__list { max-width: 28rem; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.notfound__list li { border-bottom: 1px solid var(--line); }
.notfound__list a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; color: var(--ink); font-weight: 600; text-decoration: none; }
.notfound__list a::after { content: "→"; color: var(--ink-soft); }
.notfound__list a:hover { color: var(--ink-strong); text-decoration: underline; text-underline-offset: 4px; }
.notfound__actions { margin-top: 32px; }
.bottom-bar.is-off { display: none; } /* 접수 완료 뒤 하단 바(크리에이터 지원하기)를 다시 띄우지 않는다 */
.form__status { margin-top: 20px; padding: 16px 20px; border: var(--control-border-w) solid var(--accent); border-radius: var(--radius-control); transition: opacity 150ms ease; }
/* [R19] 상태 메시지는 150ms 동안 opacity만 바뀐다. 내용은 처음부터 들어 있어 aria-live 알림은 늦어지지 않는다. */
.form__status.is-entering { opacity: 0; transition: none; }
.form__turnstile-error { margin-top: 8px; } /* [R19] 보안 확인 안내: 위젯 바로 아래 */
.form__status:focus { outline: none; }
.form__status.is-error { border-color: var(--c-error); }
.form__status p + p { margin-top: 8px; }
.form__status-contact { display: flex; flex-wrap: wrap; gap: 4px 16px; font-weight: 600; }

/* ---------- 마케팅 문의 배치 [R16] ---------- */
.contact-grid { display: grid; gap: var(--space-heading); }
.creator-grid { display: grid; gap: 40px; } /* [R21] 960px 미만은 안내 → 2항목 → 지원서 1단(기존 순서) */
.creator-facts .fact-list { margin-top: 0; border-top: 0; }
.creator-facts .fact-list__row:first-child { padding-top: 0; }
.creator-facts .fact-list__row:last-child { padding-bottom: 0; border-bottom: 0; }
.contact-aside, .creator-facts { padding: 20px 24px; border-color: var(--ink); } /* [R21] 직접 연락·지원 안내 상자: 같은 모양(진한 1px 테두리) */
.contact-aside .contact-list { margin-top: 8px; }
.contact-aside .contact-list li:last-child { border-bottom: 0; }
.contact-main .form, .contact-main .form__noscript { max-width: 640px; }

/* ---------- 개인정보처리방침 [R15] ---------- */
.policy { max-width: 48rem; }
.policy > p, .policy > ul, .policy > dl, .policy > .policy__table-wrap { margin-top: 12px; }
.policy > p, .policy li, .policy td { color: var(--ink-soft); }
.policy__title { margin-top: 40px; font-size: 1.125rem; font-weight: 700; line-height: 1.45; }
.policy__table-wrap { overflow-x: auto; }
.policy__table { width: 100%; border-collapse: collapse; border-top: var(--rule-strong); font-size: 0.9375rem; }
.policy__table th, .policy__table td { padding: 12px 12px 12px 0; text-align: left; vertical-align: top; border-bottom: var(--rule-soft); }
.policy__table thead th { font-weight: 600; white-space: nowrap; }
.policy__table tbody th { font-weight: 600; white-space: nowrap; }
mark.todo { padding: 0 2px; background: #fff3c4; color: #5c4400; } /* 확인 필요 표시 8.27:1 */

/* ---------- 푸터 ---------- */
.site-footer {
  padding-block: 48px 56px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.site-footer__brand {
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.site-footer__slogan { margin-top: 6px; }
.site-footer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 20px;
}
.site-footer__contact a { color: var(--ink); }
/* [2-12e 보완] 2026-11-09 누르는 영역만 44px로 넓힌다(보이는 글자·줄 간격은 그대로: 안쪽 여백 + 같은 크기 음수 바깥 여백) */
.site-footer__contact a, .site-footer__links a { display: inline-block; padding: 13px 4px; margin: -13px -4px; }
.site-footer__label { color: var(--ink-soft); }
.site-footer__links { margin-top: 16px; }
.site-footer__links a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---------- 모바일 하단 고정 바(959px 이하, 960px 블록에서 숨김) ---------- */
.has-bar { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
.bottom-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  gap: 8px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.bottom-bar .btn { min-height: var(--control-h); padding: 0 18px; }
.bottom-bar__main { flex: 1; }
.bottom-bar[hidden] { display: none; }

/* ---------- 폭 전환 ---------- */
@media (min-width: 560px) {
  .hero__art { --hs-w: 260px; } /* [R53] 2-11f 560~959px 별 폭 */
  .hero__actions { flex-direction: row; flex-wrap: wrap; }
  .choice-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__submit { width: auto; min-width: 200px; }
}

/* [R7] 960px: 헤더(햄버거 → 가로 메뉴), 하단 바(숨김), 히어로, 2단 배치를 이 블록 하나에서 바꾼다. */
@media (min-width: 960px) {
  :root { --header-h: 64px; }
  .brand__logo { height: 40px; }

  .js .site-nav__toggle { display: none; }
  html:not(.js) .site-nav { width: auto; }
  html:not(.js) .site-header__inner { flex-wrap: nowrap; height: var(--header-h); padding-block: 0; }
  .site-nav__menu,
  .site-nav__menu.is-open {
    display: flex;
    align-items: center;
    gap: 32px;
    position: static;
    padding: 0;
    border: 0;
  }
  .site-nav__list { display: flex; gap: 28px; }
  .site-nav__list a {
    min-height: 44px; /* [R19] 40 → 44px. 헤더 높이(64px)는 그대로 */
    font-size: 0.9375rem;
    border: 0;
  }
  @media (hover: hover) and (pointer: fine) { .site-nav__list a:hover { text-decoration: underline; } } /* [R19] hover 조건 통일 */
  .site-nav__cta { margin-top: 0; width: auto; }

  .bottom-bar, .bottom-bar[hidden] { display: none; }
  .has-bar { padding-bottom: 0; }
  html { scroll-padding-bottom: 0; } /* [R56] 2-11i: 하단 바가 없는 폭 */

  .hero__inner {
    min-height: min(calc(100svh - var(--header-h)), 760px);
    display: flex;
    align-items: center;
    align-content: normal; /* [R53] 2-11f 959px 이하 grid 배치 값을 되돌림(padding-bottom은 아래 줄이 다시 정함) */
    /* [R47] 2026-10-22 2-11: 낮은 화면(1280×600 등)에서 위·아래 여백이 커서 히어로가 화면보다 길어지고 별 아래가 69px 잘리던 문제.
       여백을 화면 높이(svh)로도 제한한다. 높이 쿼리 없이 처리(미디어 쿼리 폭은 560/960/1200만 쓴다). 높이가 충분한 화면은 min()이 9vw를 골라 이전과 같다. */
    padding-top: clamp(40px, min(9vw, 7svh), 120px);
    padding-bottom: clamp(48px, min(9vw, 7svh), 128px);
  }
  /* [R9] 2026-10-13 데스크톱 별 표현을 415e912 기준으로 복원(사용자 지시): 오른쪽 가장자리에 닿는 큰 별 + 큰 호 선.
     ⚠ CLAUDE.md "화면 끝에서 자르는 방식은 고객 승인 전까지 쓰지 않는다"와 다름 → 보고함. */
  .hero__text { max-width: 58%; display: block; } /* [R53] display: 959px 이하 세로 flex(A2)를 되돌림 */
  .hero__actions { margin-top: clamp(28px, 4vw, 40px); padding-top: 0; } /* [R53] 959px 이하 A2 버튼 아래 붙임을 되돌림(이전 값) */
  /* [R50] 2026-10-23 2-11c 별 기준을 컨테이너(최대 1280px) → 히어로 상자(화면 폭)로. 장식 곡선(.hero__orbit)은 히어로 전체 폭에 맞춰 늘어나는데
     별은 컨테이너 오른쪽 끝 기준이라, 1280px보다 넓으면 별이 곡선보다 왼쪽으로 가서 곡선이 별 가운데를 지났다(1920에서 별 폭의 50% 지점, 2-4부터 같음).
     .hero__art의 기준 상자만 바꾼다(right 값은 그대로): 1280px 이하는 컨테이너 = 화면 폭이라 위치가 이전과 같고, 넓은 화면도 별이 화면 오른쪽에서 170px 넘쳐 잘린다.
     히어로 높이 = .hero__inner 높이라 top: 50%도 같다. phone 변형은 손대지 않는다. */
  .hero:not(.hero--phone) .hero__inner { position: static; }
  .hero__art {
    position: absolute;
    top: 50%;
    right: calc(var(--gutter) * -1 - 130px);
    /* [R47] 2026-10-22 2-11: 별 높이가 화면(헤더 제외)보다 커지지 않게 폭도 높이로 제한(별 가로세로비 약 1:0.88). 충분히 높은 화면은 이전과 같다. */
    width: min(clamp(520px, 48vw, 640px), calc((100svh - var(--header-h) - 48px) * 1.13));
    margin: 0;
    transform: translateY(-46%);
  }
  .hero__orbit {
    display: block;
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } /* [R22] 3열 → 2×2(서비스 4개) */
  .summary-grid__item, .split--cards .split__item { padding: clamp(20px, 1.8vw, 24px); }
  .split { grid-template-columns: 1fr 1fr; gap: 64px; }
  .split--cards { gap: 20px; }
  .fact-list__row { grid-template-columns: 14rem 1fr; gap: 32px; }
  .creator-facts .fact-list__row { grid-template-columns: 1fr; gap: 4px; }
  .cta { grid-template-columns: 1fr auto; align-items: center; }
  .about-intro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  /* [R42] 폭 clamp(240px, 28vw, 360px): 1280에서 358px, 960~1199는 269~336px로 비례. 세로는 오른쪽 글 묶음(행 높이) 기준 가운데. */
  .about-intro__logo { width: min(100%, clamp(240px, 28vw, 360px)); align-self: center; }
  /* [R40] PC 본문 16px → 18px, 줄 간격 1.7(이전: 16px·1.7). 960px 미만은 그대로 */
  .about-intro .prose p { font-size: 1.125rem; line-height: 1.7; }
  .contact-grid { grid-template-columns: minmax(0, 640px) minmax(240px, 1fr); grid-template-areas: "main aside"; column-gap: 64px; align-items: start; }
  .contact-main { grid-area: main; }
  .contact-aside { grid-area: aside; position: sticky; top: calc(var(--header-h) + 24px); }
  /* [R21] 크리에이터: 왼쪽 안내 제목·설명 + 폼(최대 640px) / 오른쪽 2항목 상자(sticky, 두 칸에 걸침) */
  .creator-grid { grid-template-columns: minmax(0, 640px) minmax(240px, 1fr); grid-template-areas: "intro facts" "form facts"; column-gap: 64px; grid-template-rows: auto 1fr; align-items: start; }
  .creator-grid--people { grid-template-areas: "intro facts" "people facts" "form facts"; grid-template-rows: auto auto 1fr; } /* [R22] 크리에이터 소개가 있을 때만 한 줄 추가(없으면 빈 줄 간격이 생기지 않게) */
  .creator-people { grid-area: people; }
  .creator-intro { grid-area: intro; }
  .creator-form { grid-area: form; }
  .creator-facts { grid-area: facts; position: sticky; top: calc(var(--header-h) + 24px); }
}
/* ---------- 일하는 방식 (WHY, 차별점 통합) [R26] 2026-10-18 ----------
 * 젠스파크 시안(design/genspark-v4 wanstar-why-v4.css)을 규칙에 맞게 고쳐 이식. 검증된 수치(칸 간격 20px 이상, 04↔서명란 16px 이상,
 * 02 전환 시간, 구역 높이 = 화면 높이 + 4단계 × 60vh)는 그대로.
 * 시안에서 고친 것: 미디어 쿼리 767/959/1280 → 560/960/1200(모바일 우선으로 재구성), 시안 헤더 높이 76px 하드코딩 → var(--header-h),
 * 시안 토큰(--ivory/--navy/--slate/--ease)은 이 구역 안에서만 정의, 그림자 없음(시안에도 없음), 구역 바탕은 기본 배경.
 * 받침판 #E6EBF0는 종이 부품이라 "색 배경 구역 3곳"에 넣지 않는다.
 * 기본 HTML이 완성 상태(.static + 도장까지 찍힌 종이)이고, js/why.js가 정상 실행될 때만 .static을 떼어 움직임을 켠다. */
.wsp { --ease: cubic-bezier(.2, .7, .2, 1); --navy: #1C2430; --slate: #4A6278; padding-block: var(--space-section); }
.wsp-head { margin-bottom: var(--space-heading); }
.wsp-track { position: relative; }
.wsp-scene { display: block; }

/* 960px 미만(기본): 구역 제목 → 항목 01~04 → 받침판 위 종이 한 장. 고정(sticky) 없음, 진행 표시 숨김. */
.wsp-inner { width: 100%; display: flex; flex-direction: column; align-items: stretch; }
.wsp-side { order: 1; position: relative; min-width: 0; }
.wsp-list { list-style: none; display: block; }
.wsp-item { display: flex; flex-direction: column; justify-content: center; }
.wsp-item + .wsp-item { margin-top: 48px; }
.wsp-item.noanim, .wsp-item.noanim * { transition: none !important; animation: none !important; }
.wsp-side.live .wsp-item { opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.wsp-side.live .wsp-item.in { opacity: 1; transform: translateY(0); }
.wsp-n { display: block; font-size: 13px; font-weight: 300; letter-spacing: .24em; color: var(--slate); margin-bottom: 8px; }
.wsp-item h3 { font-size: 26px; line-height: 1.3; letter-spacing: -.03em; font-weight: 700; margin: 0 0 12px; color: #1C2430; }
.wsp-item p { font-size: 16px; line-height: 1.7; color: #44535F; }
/* 설명 아래 작은 꼬리표 */
.wsp-tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 18px; padding: 5px 12px;
  border: 1px solid #C9D1D9; border-radius: 999px; font-size: 13px; font-weight: 500; color: #4A6278; }
.wsp-tag i { width: 4px; height: 4px; border-radius: 50%; background: #4A6278; flex: none; }
.wsp-prog { display: none; }
.wsp-prog-n { font-size: 14px; font-weight: 500; letter-spacing: .12em; color: #4A6278; font-variant-numeric: tabular-nums; }
.wsp-dots { display: inline-flex; gap: 6px; }
.wsp-dots i { width: 6px; height: 6px; border-radius: 50%; background: #C9D1D9; transition: background .35s var(--ease); }
.wsp-dots i.on { background: #4A6278; }

.wsp-visual { order: 2; min-width: 0; display: block; margin: 48px 0 0; }
.wsp-board { position: relative; box-sizing: border-box; width: 100%; max-width: 400px; height: auto; margin: 0; display: block;
  padding: 20px 16px; border-radius: 16px; font-size: 12.5px; background: #E6EBF0; overflow: hidden; }
.wsp-bg { display: none; }
.wsp-paper { position: relative; width: calc(100% - 8px); max-width: 360px; height: auto; rotate: -.6deg; font-size: 12.5px; margin: 0 0 8px; }
.wsp-back { position: absolute; inset: 0; background: #DCE3EA; border: 0; border-radius: 2px; translate: 8px 8px; }
.wsp-sheet { position: relative; background: #fff; border: 1px solid #B7C1CB; border-radius: 2px;
  padding: 1.9em 1.6em 1.25em; display: flex; flex-direction: column; overflow: hidden; }
.wsp-clip { position: absolute; top: -1em; left: 50%; translate: -50% 0; width: 1.15em; height: 1.9em; z-index: 3; pointer-events: none; }
.wsp-clip svg { display: block; width: 100%; height: 100%; fill: none; stroke: url(#wspSilver); stroke-width: 3.2; stroke-linecap: round; }

.wsp-sheet-head { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5em; margin-bottom: var(--hmb, 1em); }
.wsp-h-c { display: inline-flex; align-items: center; gap: .4em; font-size: .72em; font-weight: 600; letter-spacing: .2em; color: var(--navy); white-space: nowrap; }
.wsp-star { width: 1.05em; height: 1.05em; fill: #4A6278; flex: none; }
.wsp-h-r { justify-self: end; font-size: max(10px, .6em); color: #5d6b78; white-space: nowrap; } /* [R27] 2026-10-18 [예시] 최소 10px(사용자 지시). 다른 종이 글자는 그대로 */

/* 종이 안 네 칸: 칸 사이 간격은 모두 같고 최소 20px, 04 칸 끝 ↔ 서명란 최소 16px */
.wsp-cells { flex: 0 0 auto; overflow: visible; display: flex; flex-direction: column; justify-content: flex-start; gap: 20px; }
/* [R30] 2026-10-18 지난 칸 흐림(0.7, [R31] 0.55에서 상향)은 칸 내용(.wsp-block: 칩·문장·검색줄·썸네일·회색 줄)에만. 칸 제목은 항상 불투명(대비 4.5:1 이상, Lighthouse 지적) */
.wsp-cell { flex: 0 0 auto; }
.wsp-block { opacity: 1; transition: opacity .45s var(--ease); }
.wsp-sheet.run .wsp-cell .wsp-block { opacity: .7; } /* [R31] 2026-10-19 .55 → .7(지난 칸 글자 대비 보강) */
.wsp-sheet.run .wsp-cell.on .wsp-block { opacity: 1; }
.wsp-sheet.run.done .wsp-cell .wsp-block { opacity: 1; }
.wsp-cell-t { display: block; font-size: .7em; font-weight: 600; letter-spacing: .16em; color: var(--ink-soft); margin-bottom: .4em; } /* [R30] #4A6278 → --ink-soft #4f5f6c(흰 종이 6.6:1) */
.wsp-block { position: relative; overflow: hidden; min-height: min(2.6em, 44px); }
.wsp-body { transition: opacity .25s var(--ease); }
.wsp-cell.pre .wsp-body { opacity: 0; }
/* 아직 안 채워진 칸: 연한 회색 줄 2~3개 (높이 8px, 둥근 끝, 서로 다른 길이) */
.wsp-lines { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--lgap, .2em); opacity: 0; transition: opacity .3s var(--ease); }
.wsp-lines i { display: block; height: min(8px, .5em); border-radius: 999px; background: #E6EAEE; width: var(--w, 70%); }
.wsp-cell.pre .wsp-lines { opacity: 1; }
.wsp-cell.noanim, .wsp-cell.noanim * { transition: none !important; animation: none !important; }

/* 01 조건 */
.wsp-slots { display: flex; flex-wrap: wrap; gap: .42em; }
.wsp-chip { display: inline-flex; align-items: center; gap: .42em; background: #1C2430; color: #fff; border-radius: 999px;
  padding: .44em .8em; font-size: .7em; font-weight: 600; line-height: 1.5; white-space: nowrap;
  transition: opacity .34s var(--ease) var(--d, 0s), transform .34s var(--ease) var(--d, 0s); }
.wsp-ck { width: .92em; height: .92em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity .26s var(--ease) calc(var(--d, 0s) + .22s); }
.wsp-cell.pre .wsp-chip { opacity: 0; transform: translateY(-.4em) scale(.92); }
.wsp-cell.pre .wsp-ck { opacity: 0; }

/* 02 핵심 메시지: 글자 요소 하나. 전환 중 위치·정렬·너비·크기는 그대로, 바뀌는 것은 투명도와 글자 내용뿐(높이는 두 문장 중 긴 쪽으로 고정) */
.wsp-cell[data-cell="2"] .wsp-body { transition: none; }
.wsp-msg { margin: 0; min-height: 1.5em; font-size: 1em; font-weight: 600; line-height: 1.5; color: var(--navy); letter-spacing: -.02em;
  text-align: left; word-break: keep-all; overflow-wrap: break-word; transition: opacity .4s var(--ease); }
.wsp-msg.out { opacity: 0; }
.wsp-msg.noanim, .wsp-msg.noanim .u::after { transition: none !important; }
.wsp-msg .u { position: relative; display: inline-block; }
.wsp-msg .u::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.02em; height: .1em; background: #4A6278; transform-origin: left; transform: scaleX(1); }
.wsp-msg.js .u::after { transform: scaleX(0); transition: transform .4s var(--ease); }
.wsp-msg.js.draw .u::after { transform: scaleX(1); }
.wsp-msg.js.draw .u:nth-of-type(2)::after { transition-delay: .08s; }
/* [R31] 2026-10-19 종이 안 중국어(02 문장·03 검색줄)만 굵기 500 + 중국어 글꼴 우선(Pretendard에 한자 없어 대체 글꼴이 굵게 보임). 크기·색 그대로 */
.wsp-msg:lang(zh-Hans), .wsp-search:lang(zh-Hans) .wsp-type { font-weight: 500; font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }

/* 03 참고 콘텐츠 */
.wsp-search { display: flex; align-items: center; gap: .4em; background: #F7F7F4; border: 1px solid #C9D1D9; border-radius: 999px; padding: .4em .8em; }
.wsp-mag { width: 1em; height: 1em; flex: none; fill: none; stroke: #4A6278; stroke-width: 1.5; stroke-linecap: round; }
.wsp-type { font-size: .76em; font-weight: 600; color: var(--navy); white-space: nowrap; clip-path: inset(0 0 0 0); transition: clip-path .64s steps(7, end) .05s; }
.wsp-cell.pre .wsp-type { clip-path: inset(0 100% 0 0); }
.wsp-caret { width: 1px; height: 1em; flex: none; background: #4A6278; animation: wspBlink 1.1s steps(1, end) infinite; transition: opacity .2s .72s; }
.wsp-cell.pre .wsp-caret { opacity: 0; }
@keyframes wspBlink { 50% { opacity: 0; } }
.wsp-thumbs { display: flex; gap: .6em; margin-top: .45em; padding-left: .1em; }
.wsp-thumb { position: relative; width: 2.1em; background: #fff; border: 1px solid #C9D1D9; border-radius: .25em; padding: .14em;
  rotate: var(--r, 0deg); transition: opacity .4s var(--ease) var(--d, 0s), translate .4s var(--ease) var(--d, 0s); }
.wsp-cell.pre .wsp-thumb { opacity: 0; translate: 0 .7em; }
.wsp-thumb-ph { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #eceae5; }
.wsp-thumb-ph img { width: 100%; height: 100%; object-fit: cover; }
.wsp-tclip { position: absolute; top: -.45em; left: 50%; translate: -50% 0; width: .55em; height: .9em; }
.wsp-tclip svg { display: block; width: 100%; height: 100%; fill: none; stroke: url(#wspSilver); stroke-width: 3.4; stroke-linecap: round; }
.wsp-bm { position: absolute; right: .18em; top: .18em; width: 1em; height: 1em; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); }
.wsp-bm svg { width: .64em; height: .64em; fill: none; stroke: #4A6278; stroke-width: 1.5; stroke-linejoin: round; transition: fill .3s var(--ease) .9s; }
.wsp-cell:not(.pre) .wsp-thumb:first-child .wsp-bm svg { fill: #4A6278; }

/* 04 진행 상황: 체크 3줄에 차례로 도장 */
.wsp-rows { display: flex; flex-direction: column; gap: .28em; }
.wsp-row { display: flex; align-items: center; gap: .42em; font-size: .82em; font-weight: 600; color: var(--navy); }
.wsp-box { position: relative; width: 1.05em; height: 1.05em; flex: none; border: 1px solid #C9D1D9; border-radius: .18em; }
.wsp-stamp { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 1.05em; height: 1.05em; fill: none; stroke: #4A6278;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-6deg);
  transition: opacity .26s var(--ease) var(--d, 0s), transform .26s var(--ease) var(--d, 0s); }
.wsp-cell.pre .wsp-stamp { opacity: 0; transform: scale(1.75) rotate(-18deg); }

/* 서명란 */
.wsp-sign { flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2em; margin-top: max(18px, 1em); }
.wsp-sign-l { flex: 1; min-width: 0; border-top: 1px solid #C9D1D9; padding-top: .6em; font-size: .62em; font-weight: 600; letter-spacing: .34em; color: #4A6278; white-space: nowrap; }
.wsp-seal { position: relative; flex: none; width: var(--seal, clamp(40px, 4.2em, 56px)); height: var(--seal, clamp(40px, 4.2em, 56px)); border-radius: 50%;
  border: 1px dashed #C9D1D9; display: grid; place-items: center; transition: border-color .3s var(--ease); }
.wsp-seal-star { width: 1.95em; height: 1.95em; fill: #4A6278; opacity: 0; transform: rotate(-8deg) scale(.55); }
.wsp-sheet.done .wsp-seal { border-style: solid; border-color: #4A6278; }
.wsp-sheet.done .wsp-seal-star { opacity: .85; transform: rotate(-8deg) scale(1); animation: wspSeal .38s var(--ease) both; }
.wsp-sheet.done.still .wsp-seal-star { animation: none; }
@keyframes wspSeal { 0% { opacity: 0; transform: rotate(-8deg) scale(.55); } 62% { opacity: .85; transform: rotate(-8deg) scale(1.12); } 100% { opacity: .85; transform: rotate(-8deg) scale(1); } }

/* 받침판 안 궤도선·별(motion.orbitSpin이 false면 .wsp-no-orbit) */
.wsp-orb { display: block; width: 100%; height: 100%; overflow: visible; }
.wsp-orb ellipse { fill: none; stroke: #B7C1CB; stroke-width: 1; }
.wsp-orb circle { fill: #B7C1CB; stroke: none; }
.wsp-spin { transform-origin: 260px 260px; animation: wspSpin 46s linear infinite; }
.wsp-spin.b { animation-duration: 68s; animation-direction: reverse; }
.wsp-spin.c { animation-duration: 56s; }
@keyframes wspSpin { to { transform: rotate(360deg); } }
.wsp-tw { position: absolute; width: .5em; height: .5em; fill: #B7C1CB; animation: wspTw 5.2s ease-in-out infinite; }
@keyframes wspTw { 50% { opacity: .28; transform: scale(.7); } }
.wsp.off .wsp-spin, .wsp.off .wsp-tw, .wsp.off .wsp-caret, .wsp.off .wsp-seal-star { animation-play-state: paused; }
.wsp.wsp-no-orbit .wsp-spin, .wsp.wsp-no-orbit .wsp-tw { animation: none; }

@media (min-width: 560px) {
  .wsp-board { max-width: 404px; padding: 20px 18px; border-radius: 18px; font-size: 13px; }
  .wsp-paper { font-size: 13px; }
}

/* 960px 이상: 고정(sticky) 장면. 화면 높이의 60%마다 다음 단계, 구역 높이 340vh(= 화면 높이 + 4단계 × 60%). */
@media (min-width: 960px) {
  .wsp { padding-bottom: 0; }
  .wsp-track { min-height: 340vh; }
  /* 시안은 고정 헤더 76px를 하드코딩했다. 여기서는 사이트 헤더 높이(+아래 선 1px)만큼 위를 비운다. */
  .wsp-scene { position: sticky; top: 0; height: 100vh; padding-top: calc(var(--header-h) + 1px); display: flex; align-items: center; }
  .wsp-scene > .container { width: 100%; }
  .wsp-inner { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: 48px; align-items: center;
    /* 왼쪽 열 폭 = .container 안쪽(최대 --max) − 열 간격 48 의 45% */
    --colw: calc((min(var(--max), 100vw) - 2 * var(--gutter) - 48px) * .45);
    /* 종이 높이 = 화면 높이 − 헤더(+1px) − 위아래 각 56px, 최대 640px */
    --ph: min(calc(100vh - var(--header-h) - 113px), 640px);
    --pw: min(calc(var(--ph) * .75), calc(var(--colw) - 40px));
    --padx: clamp(10px, calc((var(--colw) - var(--pw)) / 2), 40px);
    --bh: calc(var(--ph) * 1.026 + 48px);
    --fs: min(calc(var(--ph) / 26), calc(var(--pw) / 18)); }
  .wsp-visual { order: 0; display: flex; justify-content: center; margin: 0; }
  .wsp-board { width: 100%; max-width: none; height: var(--bh); font-size: var(--fs); border-radius: 24px;
    display: flex; align-items: center; justify-content: center; padding: 0 var(--padx); }
  .wsp-bg { display: block; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 150%; aspect-ratio: 1; pointer-events: none;
    -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
            mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
  .wsp-paper { width: var(--pw); max-width: none; height: var(--ph); rotate: -2deg; font-size: var(--fs); margin: 0; }
  .wsp-sheet { position: absolute; inset: 0; padding: var(--hpt, 1.9em) 1.7em 1.3em; }
  .wsp-clip { top: -1.05em; width: 1.2em; height: 2em; }
  .wsp-cells { flex: 1; min-height: 0; overflow: hidden; justify-content: space-between; gap: var(--cgap, 20px); }

  .wsp-side { order: 0; }
  .wsp-side.live .wsp-list { display: grid; }
  .wsp-side.live .wsp-item { grid-area: 1 / 1; margin-top: 0; pointer-events: none; opacity: 0; transform: translateY(24px);
    transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1); }
  .wsp-side.live .wsp-item.up { transform: translateY(-24px); }
  .wsp-side.live .wsp-item.on { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .wsp-n { font-size: 14px; margin-bottom: 12px; }
  .wsp-item h3 { font-size: 34px; margin-bottom: 16px; }
  .wsp-item p { font-size: 19px; max-width: 520px; }
  .wsp-tag { margin-top: 24px; }
  /* 항목 위 진행 표시 "01 / 04 ●●●●" */
  .wsp-prog { position: absolute; left: 0; bottom: 100%; margin-bottom: 26px; display: flex; align-items: center; gap: 14px; }
}
@media (min-width: 1200px) {
  .wsp-item h3 { font-size: 40px; }
}

/* 스크립트 실패 시 또는 data 설정으로 정지: 움직임 없는 완성 상태. HTML 기본값이 .static(완성본). 정상 실행되면 이 클래스를 뗀다. */
.wsp.static .wsp-track { min-height: 0; }
.wsp.static .wsp-scene { position: static; height: auto; padding: 0; display: block; }
.wsp.static .wsp-prog { display: none; }
.wsp.static .wsp-list { display: block; }
.wsp.static .wsp-item { opacity: 1 !important; transform: none !important; pointer-events: auto; }
.wsp.static .wsp-item + .wsp-item { margin-top: 48px; }
.wsp.static .wsp-cell .wsp-block { opacity: 1 !important; }
.wsp.static .wsp-cell .wsp-body { opacity: 1 !important; }
.wsp.static .wsp-cell .wsp-lines { opacity: 0 !important; }
.wsp.static .wsp-spin, .wsp.static .wsp-tw, .wsp.static .wsp-caret, .wsp.static .wsp-seal-star { animation: none !important; }
.wsp.static * { transition: none !important; }
@media (min-width: 960px) {
  .wsp.static .wsp-inner { display: block; }
  .wsp.static .wsp-visual { margin-bottom: 44px; }
  .wsp.static .wsp-board { max-width: 560px; margin: 0 auto; }
}

/* 움직임 줄이기: 고정 없이 일반 목록 + 완성본 종이 */
@media (prefers-reduced-motion: reduce) {
  .wsp-track { min-height: 0; }
  .wsp-scene { position: static; height: auto; padding: 0; display: block; }
  .wsp-prog { display: none; }
  .wsp-list { display: block; }
  .wsp-item { opacity: 1 !important; transform: none !important; pointer-events: auto; }
  .wsp-spin, .wsp-tw, .wsp-caret, .wsp-seal-star { animation: none !important; }
  .wsp * { transition: none !important; }
  .wsp-sheet.run .wsp-cell .wsp-block { opacity: 1 !important; }
  .wsp-msg .u::after { transform: scaleX(1) !important; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 960px) {
  .wsp-inner { display: block; }
  .wsp-visual { margin-bottom: 44px; }
  .wsp-board { max-width: 560px; margin: 0 auto; }
}

/* ---------- 메인 나머지 구역 [R32] 2026-10-19 ----------
 * 시안(design/genspark-v4 wanstar.css · wanstar-v2.css · wanstar-sections.css)의 서비스 노트 카드 · 숏폼 벽 · 프로세스 · 크리에이터 · 문의를 고쳐서 이식.
 * 고친 것: 미디어 쿼리 767/1024 → 560/960/1200(모바일 우선), 그림자 → 1px 테두리, 시안 토큰 → 사이트 토큰, 문구는 기존 확정 문구.
 * 색 배경 구역은 메인에 3곳(남색 숏폼 벽 · 청색 크리에이터 · 남색 문의). 나머지 구역은 기본 흰 바탕, 진행 절차만 아이보리(기본 배경 허용색). */
.sample-label { font-size: 0.75rem; line-height: 1; color: var(--ink-soft); } /* "예시 이미지" 6.6:1 */

/* 서비스 노트 카드(시안 svcA). 카드는 링크가 아니므로 hover 들림·확대 없음(눌러도 되는 것처럼 보이지 않게) */
.notes-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; }
/* [R33] 2026-10-19 560px 미만: 1열, 사진 16:10, 엇갈림 없음. 560px 이상은 2-5 그대로(2열·4:5·엇갈림, 1200px 이상 4열) */
.notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; margin-top: var(--space-heading); }
.note { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.note__ph { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #ebe8e2; }
.note__ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 서비스 카드 사진 보이는 위치(사진별). 사진을 실제 사진으로 바꾸면 이 값만 바꾼다. 클래스가 없는 사진(11·12)은 기본 가운데(50% 50%).
   [R55] 2026-10-24 2-11h 09(샤오홍슈 마케팅): 560px 미만 칸(16:10)은 원본 높이의 47%만 보여, 위쪽 맞춤(0)이면 담쟁이만 보이고 사진 찍는 사람이 잘렸다.
   → 50% 45%(원본 y 약 206~606: 머리·휴대폰·손이 가운데). 30·45·60% 비교 후 결정(design-shots/2-11h). 가방 글씨(원본 y 830 이후)는 계속 보이지 않음.
   560px 이상(4:5 칸, 원본 높이의 93%)은 이전 그대로 위쪽 맞춤(아래 560 블록). */
.note__ph > .note__img--top { object-position: 50% 45%; }
.note__ph > .note__img--c10 { object-position: 50% 60%; } /* 10(16:10): 위쪽 메뉴판(가격)이 잘리도록 아래쪽 맞춤 */
.note__body { padding: 16px 18px 20px; }
.note__n { display: block; font-size: 0.8125rem; letter-spacing: 0.2em; line-height: 1.4; color: var(--accent); font-variant-numeric: tabular-nums; } /* 7.24:1 */
.note__title { margin-top: 6px; font-size: 1.125rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; }
.note__text { margin-top: 8px; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); }
@media (min-width: 560px) {
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .note__ph > .note__img--top { object-position: 50% 0; } /* 09: 가방 글씨가 보이지 않게 위쪽 맞춤(시안 그대로). [R55] 2-11h 560px 이상만 */
  .note:nth-child(2n) { margin-top: 56px; }
  .note__ph { aspect-ratio: 4 / 5; }
  .note__ph > .note__img--c10 { inset: auto; left: -8%; top: -24.2%; width: 116.2%; height: auto; max-width: none; object-fit: fill; } /* 10: 메뉴판(가격)이 잘리는 시안 자르기 그대로 */
}
@media (min-width: 1200px) {
  .notes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .note:nth-child(2n) { margin-top: 72px; }
  .note__title { font-size: 1.1875rem; }
}

/* 숏폼 벽(시안 wall-sec). 색 배경 구역 1/3(남색). 사진 기둥은 장식이고, HTML 기본 배치(스크립트 없음·motion.wallFlow=false·움직임 줄이기)가 그대로 완성된 화면이다.
 * 시안 그림자 링(box-shadow 0 0 0 1px) → 1px 테두리. 덮개(.wall-shade) 그라데이션은 "사진 위 덮개"라 허용 범위(빌드 경고만). */
.wall-sec { position: relative; overflow: hidden; background: #1c2430; color: #fff; }
/* [R52] 2026-10-23 2-11e 560px 미만: 기둥 2개(150px) → 4개(폭 화면의 1/3.1, 360에서 116px)로 화면에 약 3줄. 2기둥은 기운 벽이 섹션 좌우를 다 못 덮어 바탕이 드러났다.
   사진은 같은 6장을 돌려 쓰므로 요청 수는 그대로. 560px 이상(220px·4개)과 기울기·흐름 움직임(sections.js wallFlow)은 그대로. */
.wall { position: absolute; left: 50%; top: 50%; width: 180%; height: 150%; translate: -50% -50%; rotate: -12deg; display: flex; justify-content: center; gap: 12px; }
.wall-col { flex: none; width: calc(100vw / 3.1); }
.wall-track { display: flex; flex-direction: column; gap: 12px; }
/* 기둥마다 시작 위치를 어긋나게(시안 off = c × 137 mod 300). 스크립트도 이 위치에서 시작한다. */
.wall-col:nth-child(2) .wall-track { transform: translate3d(0, -137px, 0); }
.wall-col:nth-child(3) .wall-track { transform: translate3d(0, -274px, 0); }
.wall-col:nth-child(4) .wall-track { transform: translate3d(0, -111px, 0); }
.wall-card { flex: none; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; border: 1px solid rgba(200, 207, 214, .42); background: #2a3442; }
.wall-card img { width: 100%; height: 100%; object-fit: cover; }
/* [R33] 사진은 load 뒤에 받는다(data-src). JS가 꺼져 있으면 빈 img를 숨겨 noscript 사진이 그 자리에 보이게 한다 */
html:not(.js) .wall-sec img[data-src] { display: none; }
.wall-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(28, 36, 48, .94) 0%, rgba(28, 36, 48, .6) 42%, rgba(28, 36, 48, .25) 70%, rgba(28, 36, 48, .7) 100%); }
/* [R52] 2-11e 959px 이하: 최소 높이 760px + 위아래 벌림(space-between) 때문에 제목과 영상 카드가 화면 한 개 높이만큼 떨어졌다 → 높이는 내용대로, 제목 아래 바로 카드(행 간격 = 제목→내용 토큰 --space-heading, 959px 이하에서 24px. 24·32·40px 비교 후 다른 구역과 같은 리듬으로 결정).
   열 간격 40px은 960px 이상 두 칸 배치용(그대로). 960 블록이 height·min-height·align-content·padding을 다시 정한다. */
.wall-front { position: relative; z-index: 2; display: grid; align-content: start; gap: var(--space-heading) 40px; padding-block: var(--space-section); pointer-events: none; }
.wall-front > * { pointer-events: auto; }
.wall-copy__ex { margin-bottom: 12px; font-size: 0.8125rem; line-height: 1.4; letter-spacing: 0.04em; color: #aab4bf; } /* [R40] [예시] 표시. 남색 위 7.9:1 */
.wall-copy__title { color: #fff; }
.wall-media { width: 100%; } /* [R52] 2-11e 959px 이하: 컨테이너 폭 그대로(좌우 여백 = 다른 구역과 같은 --gutter, 화면 가운데). 960px 이상은 아래에서 min(640px, 100%) */
.wall-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #0d1117; }
.wall-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* [R40] 2026-10-20 앞 사진 영상 표시(장식): 가운데 반투명 재생 아이콘(선 1.5px) + 모서리 "영상". 버튼·링크가 아니므로 클릭·커서 반응 없음.
 * 대비: 원 바탕 #0d1117 60% → 사진이 흰색이어도 바탕 약 rgb(110) 이상 어둡지 않음 → 흰 선 5.1:1 이상. "영상" 글자는 #0d1117 78% 바탕 위 흰 글자 9.6:1 이상(사진이 흰색일 때 최저). */
.wall-play, .wall-vtag { position: absolute; pointer-events: none; cursor: default; user-select: none; }
.wall-play { left: 50%; top: 50%; width: 56px; height: 56px; translate: -50% -50%; }
.wall-play svg { display: block; width: 100%; height: 100%; }
.wall-vtag { right: 12px; top: 12px; padding: 4px 8px; border-radius: 6px; background: rgba(13, 17, 23, .78); color: #fff; font-size: 0.75rem; font-weight: 600; line-height: 1.4; }
.wall-more { margin-top: 16px; }
.wall-more .more-link { color: #fff; } /* 남색 위 15:1 */
@media (hover: hover) and (pointer: fine) {
  .wall-more .more-link:hover { color: #fff; text-decoration-thickness: 2px; }
}
.wall-sample { position: absolute; right: var(--gutter); bottom: 20px; z-index: 3; color: #aab4bf; } /* 남색 위 7.9:1 */
@media (min-width: 560px) {
  .wall { gap: 22px; }
  .wall-col { width: 220px; }
  .wall-track { gap: 22px; }
  .wall-card { border-radius: 18px; }
}
@media (min-width: 960px) {
  .wall-sec { height: min(980px, max(760px, 100vh)); }
  .wall { width: 150%; height: 180%; }
  .wall-shade { background: radial-gradient(60% 55% at 62% 55%, rgba(28, 36, 48, .15), rgba(28, 36, 48, .55) 70%), linear-gradient(90deg, rgba(28, 36, 48, .95) 0%, rgba(28, 36, 48, .7) 34%, rgba(28, 36, 48, 0) 60%); }
  .wall-front { height: 100%; min-height: 0; grid-template-columns: .85fr 1.15fr; align-items: center; align-content: normal; padding-block: 0; row-gap: 40px; } /* [R52] 2-11e row-gap: 959px 이하에서 바꾼 행 간격을 이전 값(40px)으로 되돌려 PC 계산값까지 같게(한 줄 배치라 화면 영향 없음) */
  .wall-media { width: min(640px, 100%); justify-self: end; }
  .wall-play { width: 72px; height: 72px; }
  .wall-vtag { right: 16px; top: 16px; }
}

/* ---------- 서비스 페이지(/services/) [R43] 2026-10-20 2-9a ----------
 * 젠스파크 서비스 시안(design_handoff_wanstar_services/services.css)을 고쳐서 이식.
 * 시안과 다르게 한 것: 첫 화면 세 칸(글|별|목록) → 두 칸(글 | 목록), 별은 "서비스" 제목 오른쪽 위(PC 150px·960 미만 96px, 글자와 가로 16px),
 *   사진 좌우 이동·좌우 clip-path·패럴랙스 없음(모든 칸 아래→위 열림), 얇은 숫자(굵기 200·300)는 글꼴 파일이 없어 400으로 대체,
 *   헤더·푸터·하단 바·버튼은 사이트 공통, 시안 영문 라벨은 첫 화면 "Services"만 사용(목록 위 끝 기준선), 구역 경계선 대신 간격, 그림자 없음.
 * 색: 남색 #1c2430, 슬레이트 #4a6278(흰 6.35:1·아이보리 6.0:1), 아이보리 #faf9f6(기본 배경 허용색), 선 #c9d1d9.
 * 움직임(motion.servicesReveal): 숨김은 html.sv-motion 아래에만(services.html 인라인 스크립트), 전환은 html.sv-live(js/services.js 시작) 아래에만. */
.svh { padding-bottom: var(--space-page-head); background: #faf9f6; }
.svh__eyebrow { display: flex; align-items: center; gap: 10px; font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.28em; text-transform: uppercase; color: #4a6278; } /* 아이보리 위 6.0:1 */
.svh__eyebrow svg { flex: none; }
.svh__title { position: relative; width: fit-content; margin-top: 18px; font-size: 2.75rem; line-height: 1.1; letter-spacing: -0.04em; white-space: nowrap; }
/* 별: 제목 오른쪽 위에 붙인 장식. 흰 바탕은 multiply로 아이보리에 녹인다(이미지 수정 없음). 글자와 가로 16px(8px 이상) */
.svh__star { position: absolute; left: calc(100% + 16px); bottom: 45%; width: 96px; height: auto; max-width: none; mix-blend-mode: multiply; pointer-events: none; }
.svh__lead { max-width: 30em; } /* 시안 24em → 30em: 대체 글꼴(맑은 고딕)에서도 768·PC 한 줄(글꼴 교체 때 2줄→1줄 이동 CLS 방지) */
.svh__index { margin-top: 40px; }
.svh__index-title { font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.28em; color: #4a6278; }
.svh__list { margin-top: 12px; border-top: 1px solid #1c2430; }
.svh__row { border-bottom: 1px solid #c9d1d9; }
.svh__row a { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; gap: 8px; align-items: center; min-height: 56px; color: var(--ink); text-decoration: none; }
/* 마우스 올림·키보드 포커스: 구분선이 슬레이트로 왼쪽부터 채워지고 화살표가 2px 내려감 */
.svh__row a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #4a6278; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.svh__row a svg { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.svh__row a:focus-visible { outline: 1.5px solid #4a6278; outline-offset: 2px; border-radius: 2px; }
.svh__row a:focus-visible::after { transform: scaleX(1); }
.svh__row a:focus-visible svg { transform: translateY(2px); }
.svh__row a:focus-visible .svh__t { color: #4a6278; }
@media (hover: hover) and (pointer: fine) {
  .svh__row a:hover::after { transform: scaleX(1); }
  .svh__row a:hover svg { transform: translateY(2px); }
  .svh__row a:hover .svh__t { color: #4a6278; }
}
.svh__n { font-size: 0.8125rem; letter-spacing: 0.16em; color: #4a6278; font-variant-numeric: tabular-nums; } /* 시안 굵기 300 → 400(파일 없음) */
.svh__t { font-weight: 600; letter-spacing: -0.01em; transition: color .3s; }

.svc-sec { padding-bottom: var(--space-section); }
.sv { display: grid; gap: 24px; padding-block: 40px; border-bottom: 1px solid var(--line); }
.sv:last-child { border-bottom: 0; }
.sv:focus { outline: none; } /* 목록 링크로 옮긴 포커스(tabindex -1)는 표시하지 않는다(시안) */
.sv__ph { margin: 0; }
.sv__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: #ece9e3; }
.sv__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv--01 .sv__img img { object-position: 50% 34%; } /* 자르기 위치: 시안 값 */
.sv--02 .sv__img img { object-position: 50% 100%; }
.sv--03 .sv__img img { object-position: 50% 50%; }
.sv--04 .sv__img img { object-position: 50% 45%; }
.sv__ph figcaption { margin-top: 8px; }
.sv__n { display: block; font-size: 3.5rem; font-weight: 400; line-height: 1; letter-spacing: 0.02em; color: #4a6278; font-variant-numeric: tabular-nums; } /* 시안 굵기 200 → 400(파일 없음). 흰 위 6.35:1 */
.sv__title { margin-top: 14px; font-size: 1.625rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.03em; }
.sv__lead { margin-top: 14px; font-size: 1.03125rem; line-height: 1.75; }
.sv__ex { margin-top: 28px; padding-top: 20px; border-top: 1px dashed #c9d1d9; }
.ex-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid #c9d1d9; border-radius: 999px; background: #fff; font-size: 0.75rem; font-weight: 600; line-height: 1; letter-spacing: 0.02em; color: #4a6278; white-space: nowrap; }
.sv__ex dl { display: grid; gap: 16px; margin-top: 16px; }
.sv__ex dt { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: #4a6278; }
.sv__ex dd { margin-top: 4px; font-size: 0.9375rem; line-height: 1.75; color: var(--ink-soft); }

/* 문의 띠(서비스): 메인 .cband와 같은 바탕·궤도·흐림→선명. 960 미만 왼쪽 맞춤, 이상 가운데(시안) */
.cband--svc .cband__inner { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.ex-tag--dark { border-color: rgba(255, 255, 255, .4); background: transparent; color: #d5dce3; } /* 남색 위 11:1 */
.svc-cta__title { margin-top: 18px; font-size: 1.625rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.03em; }
.svc-cta__title .cband-fx { display: block; }
.svc-cta__act { display: block; max-width: 100%; margin-top: 36px; }

@media (min-width: 560px) {
  .svh__title { font-size: 3.5rem; }
  .sv__img { aspect-ratio: 16 / 10; }
  .sv__title { font-size: 1.75rem; }
  .svc-cta__title { font-size: 1.875rem; }
}
@media (min-width: 960px) {
  /* 첫 화면 두 칸: 두 칸을 늘여(stretch) 목록 위 끝 = "SERVICES" 줄 위 끝, 목록 아래 끝(마지막 줄 선) = 설명 마지막 줄 아래 끝 */
  .svh__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); column-gap: 32px; align-items: stretch; }
  .svh__copy { display: flex; flex-direction: column; }
  .svh__title { margin-bottom: 16px; font-size: 4.5rem; }
  .svh__star { width: 150px; }
  .svh__lead { margin-top: auto; }
  .svh__index { display: flex; flex-direction: column; margin-top: 0; margin-bottom: 0.35rem; } /* 아래 0.35rem(5.6px) = 설명 줄 높이(18px × 1.7)의 아래 반 여백: 목록 마지막 선을 줄 상자가 아니라 마지막 줄 글자 아래 끝에 맞춤(측정 5.6px) */
  .svh__list { display: flex; flex: 1; flex-direction: column; }
  .svh__row { display: flex; flex: 1; }
  .svh__row a { flex: 1; min-height: 44px; }

  .sv { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; padding-block: 72px; }
  .sv:nth-child(even) .sv__ph { order: 2; }
  .sv__img { aspect-ratio: 4 / 5; border-radius: 14px; }
  .sv__n { font-size: 4.5rem; }
  .sv__title { font-size: 2rem; }
  .sv__lead { font-size: 1.125rem; }
  .sv__ex dl { grid-template-columns: 1fr 1fr; gap: 28px; }

  .cband--svc .cband__inner { align-items: center; text-align: center; }
  .svc-cta__title { font-size: 2.5rem; }
  .svc-cta__act { margin-top: 44px; }
}
@media (min-width: 1200px) {
  .svh__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 48px; }
  .svh__title { font-size: 5.5rem; }
  .sv { gap: 96px; }
  .sv__n { font-size: 5.25rem; }
  .sv__title { font-size: 2.25rem; }
  .svc-cta__title { font-size: 2.75rem; }
}
/* 움직임(motion.servicesReveal). 1회 재생, transform·opacity·clip-path만(CLS 0). 사진은 모든 칸·모든 폭에서 아래→위로 열림, 좌우 이동 없음. */
@media (prefers-reduced-motion: no-preference) {
  .sv-motion .svh__row { opacity: 0; transform: translateY(8px); }
  .sv-live .svh__row { transition: opacity .5s cubic-bezier(.2, .7, .2, 1), transform .5s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
  .svh__row:nth-child(1) { --d: .1s; } .svh__row:nth-child(2) { --d: .18s; } .svh__row:nth-child(3) { --d: .26s; } .svh__row:nth-child(4) { --d: .34s; }
  .sv-motion .svh__index.is-in .svh__row { opacity: 1; transform: none; }
  .sv-motion .sv__ph { clip-path: inset(100% 0 0 0); }
  .sv-motion .sv__body > * { opacity: 0; transform: translateY(8px); }
  .sv-live .sv__ph { transition: clip-path 1s cubic-bezier(.16, 1, .3, 1); }
  .sv-live .sv__body > * { transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
  .sv__body > :nth-child(1) { --d: .12s; } .sv__body > :nth-child(2) { --d: .2s; } .sv__body > :nth-child(3) { --d: .28s; } .sv__body > :nth-child(4) { --d: .36s; }
  .sv-motion .sv.is-in .sv__ph { clip-path: inset(0); }
  .sv-motion .sv.is-in .sv__body > * { opacity: 1; transform: none; }
  .sv-live .svh__star { animation: svh-twinkle 7s ease-in-out infinite; } /* 별 반짝임(opacity 1 ↔ .82) */
  .cband.cband--svc.is-focus .cband-fx { transition-delay: var(--t, 0s); } /* 꼬리표 → 제목 1줄 → 2줄 → 버튼(0 / .1 / .5 / .85s, 시안 값) */
}
@keyframes svh-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }

/* 진행 절차(시안 process.v2). 바탕은 아이보리(시안과 같음, [R33]). 960px 미만: 세로 선 + 왼쪽 점(아이콘) / 960px 이상: 가로 선 + 위 점(아이콘) + 3D 이미지 4칸.
 * [R40] 2026-10-20 메인에서 /services/로 옮김(옛 .step-list 대체). "STEP 01~04"(.proc-n)를 모든 폭에서 보이게 하고, 960px 이상 점 안 번호는 아이콘으로 바꿈(번호 중복 방지).
 * HTML 기본값이 완성 상태(--p: 1, 네 점 .is-lit). 점 둘레의 시안 그림자 링(0 0 0 6px) → 1px 외곽선. 채움 선의 그라데이션은 "장식 선"(허용). */
.proc { padding-top: 0; background: #f2f2ec; } /* [R33] 2026-10-19 아이보리 바탕. [R43] 2026-10-20 2-9a: #faf9f6 → #f2f2ec(3D 이미지 19~22 가장자리 네 장 평균, 2-8c 측정). 색 배경 구역으로 센다. 위 여백 0: 연결 세로선이 구역 위 끝에서 시작 */
/* [R43] 위쪽 연결 세로선 + 별 점(시안 .bridge). 960 미만은 진행 절차 세로 선(.proc-line, left 21px)과 같은 x, 이상은 가운데(제목 가운데 정렬) */
.proc-bridge { display: block; position: relative; width: 1px; height: 72px; margin: 0 0 40px 21px; background: #c9d1d9; }
.proc-bridge i { position: absolute; left: -7px; bottom: -8px; width: 15px; height: 15px; background: #4a6278;
  clip-path: polygon(50% 0, 59% 35%, 85% 15%, 65% 41%, 100% 50%, 65% 59%, 85% 85%, 59% 65%, 50% 100%, 41% 65%, 15% 85%, 35% 59%, 0 50%, 35% 41%, 15% 15%, 41% 35%); }
.proc-objs { display: none; }
.proc-track { --p: 1; position: relative; margin-top: var(--space-heading); }
.proc-line { position: absolute; left: 21px; top: 0; bottom: 0; width: 1px; background: rgba(28, 36, 48, .1); }
.proc-line i { position: absolute; inset: 0; background: linear-gradient(180deg, #4a6278, #9aa4ae); transform-origin: top; transform: scaleY(var(--p)); }
.proc-steps { display: grid; gap: 36px; padding-left: 64px; }
.proc-step { position: relative; }
.proc-dot { position: absolute; left: -64px; top: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #f2f2ec; border: 1px solid rgba(142, 151, 159, .55); color: #4a6278; font-size: 0.75rem; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.proc-dot__ico { display: block; width: 22px; height: 22px; }
.proc-step.is-lit .proc-dot { background: #1c2430; border-color: #1c2430; color: #fff; outline: 1px solid rgba(74, 98, 120, .3); outline-offset: 5px; }
.proc-step.is-lit .proc-dot__ico { color: #c9d1d9; }
.proc-n { display: block; font-size: 0.75rem; letter-spacing: 0.2em; line-height: 1.4; color: #4a6278; font-variant-numeric: tabular-nums; } /* 6.35:1 */
.proc-step__title { margin-top: 6px; font-size: 1.25rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; }
.proc-step__text { margin-top: 8px; max-width: 22em; color: var(--ink-soft); }
.proc.is-live .proc-dot { transition: background .5s, border-color .5s, color .5s, outline-color .5s; }
@media (min-width: 960px) {
  .proc-bridge { height: 96px; margin: 0 auto 48px; }
  .proc .section__title { text-align: center; } /* [R43] 시안: PC 제목 가운데(연결선이 제목 위로 떨어짐) */
  .proc-objs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: var(--space-heading); }
  /* [R43] 2026-10-20 2-9a: 원형 마스크를 확대된 img(--s 1.12~1.18)에서 상자(.proc-obj)로 옮김. img에 걸면 원이 상자보다 커져 네 변에서 잘리며 네모 경계가 남았다
   * (1280×720 측정: 경계 안팎 차이 최대 6~11/255 → 1/255, 바깥 고리 0.90~1.00 평균 차이 5~16 → 0.1~3.5). 이미지 파일은 그대로. */
  .proc-obj { width: 200px; max-width: 100%; aspect-ratio: 1; margin-left: -22px; overflow: hidden;
    -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); } /* 마스크(허용) */
  .proc-obj img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transform: scale(var(--s, 1));
  } /* multiply는 시안대로 유지(상자 마스크 안에서는 바탕과 섞이지 않음: multiply를 끈 실험과 고리별 평균 차이 0.1/255 이하) */
  .proc-objs + .proc-track { margin-top: 8px; }
  .proc-line { left: 0; right: 0; top: 22px; bottom: auto; width: auto; height: 1px; }
  .proc-line i { background: linear-gradient(90deg, #4a6278, #9aa4ae); transform-origin: left; transform: scaleX(var(--p)); }
  .proc-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-left: 0; }
  .proc-dot { position: relative; left: auto; }
  .proc-n { margin-top: 24px; }
  .proc-step__title { font-size: 1.375rem; }
  .proc-step__text { max-width: 16em; }
}
/* 3D 이미지 움직임(motion.processFloat): 스크립트가 .is-float를 붙일 때만. 화면 밖이면 .is-off로 멈춘다. */
@media (prefers-reduced-motion: no-preference) {
  .proc.is-float .proc-obj { transition: opacity .9s cubic-bezier(.2, .7, .2, 1), translate 1.1s cubic-bezier(.2, .7, .2, 1); }
  .proc.is-float .proc-obj:nth-child(2) { transition-delay: .16s; }
  .proc.is-float .proc-obj:nth-child(3) { transition-delay: .32s; }
  .proc.is-float .proc-obj:nth-child(4) { transition-delay: .48s; }
  .proc.is-pre .proc-obj { opacity: 0; translate: 0 26px; } /* 전환(.is-float)보다 먼저 적용된다(process.js) */
  .proc.is-float .proc-obj img { animation: proc-bob 7s ease-in-out 1.2s infinite backwards; } /* backwards: 시작 전 3px 위치에서 대기(시작할 때 튀지 않게) */
  .proc.is-float .proc-obj:nth-child(2) img { animation-delay: 2.1s; }
  .proc.is-float .proc-obj:nth-child(3) img { animation-delay: 3s; }
  .proc.is-float .proc-obj:nth-child(4) img { animation-delay: 3.9s; }
  .proc.is-float.is-off .proc-obj img { animation-play-state: paused; }
}
@keyframes proc-bob { 0%, 100% { translate: 0 3px; } 50% { translate: 0 -3px; } }

/* 크리에이터 안내(시안 .creator). 색 배경 구역 2/3(청색 #4A6278: 흰 글자 6.35:1). 궤도선은 정지한 장식 */
.crt { position: relative; overflow: hidden; background: #4a6278; color: #fff; }
.crt__grid { display: grid; gap: 40px; align-items: center; }
.crt__photo { position: relative; max-width: 640px; }
.crt__orb { position: absolute; top: -14%; left: -10%; width: 120%; height: 128%; pointer-events: none; }
.crt__ph { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #33475a; }
.crt__ph img { width: 100%; height: 100%; object-fit: cover; }
.crt__sample { display: block; margin-top: 10px; color: #e3e8ed; } /* 청색 위 5.1:1 */
.crt__title { color: #fff; }
.crt__text { margin-top: 20px; max-width: 30em; color: #eef2f5; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); } /* 5.6:1 */
.crt .crt__link { margin-top: 24px; color: #fff; }
.crt :focus-visible, .wall-sec :focus-visible { outline-color: #fff; } /* 진한 바탕에서는 흰 초점 테두리 */
@media (hover: hover) and (pointer: fine) {
  .crt .crt__link:hover { color: #fff; text-decoration-thickness: 2px; }
}
@media (min-width: 960px) {
  .crt__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; }
}

/* 문의 띠(시안 .contact). 색 배경 구역 3/3(남색). 버튼 위계: 마케팅 상담 = 흰 채움(주), 크리에이터 지원 = 1px 테두리(보조).
 * 시안 은색 그라데이션 글자는 쓰지 않는다(기존 문구, 흰 글자). 궤도선은 장식. */
.cband { position: relative; overflow: hidden; padding-block: clamp(72px, 10vw, 140px); background: #1c2430; color: #fff; text-align: center; }
.cband__orbits { position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; translate: -50% -50%; opacity: .6; pointer-events: none; }
.cband__spin { transform-origin: 450px 450px; }
.cband__inner { position: relative; }
.cband__title { color: #fff; }
.cband__grid { display: grid; gap: 40px; margin-top: var(--space-heading); }
.cband__item { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cband__lead { max-width: 22em; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 600; line-height: 1.45; color: #dde4ea; } /* 남색 위 13:1 */
.cband__btn--main { background: #fff; color: #1c2430; border: var(--control-border-w) solid #fff; } /* 15.6:1 */
.cband__btn--sub { background: transparent; color: #fff; border: var(--control-border-w) solid #c9d1d9; } /* 테두리 11.4:1 */
.cband :focus-visible { outline-color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .cband__btn--main:hover { background: #dde4ea; border-color: #dde4ea; } /* 남색 글자 13:1 */
  .cband__btn--sub:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
}
@media (min-width: 960px) {
  .cband__grid { grid-template-columns: 1fr 1fr; gap: 64px; }
}
/* 움직임(스크립트가 켤 때만): 궤도 회전(.is-spin, 화면 밖이면 .is-off로 멈춤), 흐림→선명 등장(.is-pre → 제거 시 차례로 선명) */
@media (prefers-reduced-motion: no-preference) {
  .cband.is-spin .cband__spin { animation: cband-spin 90s linear infinite; }
  .cband.is-spin .cband__spin--rev { animation-duration: 140s; animation-direction: reverse; }
  .cband.is-spin.is-off .cband__spin { animation-play-state: paused; }
  .cband.is-focus .cband-fx { transition: opacity .9s cubic-bezier(.2, .7, .2, 1), filter .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
  .cband.is-focus .cband__item:nth-child(1) { transition-delay: .25s; }
  .cband.is-focus .cband__item:nth-child(2) { transition-delay: .45s; }
  .cband.is-pre .cband-fx { opacity: 0; filter: blur(14px); transform: translateY(14px) scale(1.01); } /* 전환(.is-focus)보다 먼저 적용된다(sections.js) */
}
@keyframes cband-spin { to { transform: rotate(360deg); } }

/* ---------- 콘텐츠 사례(/cases/) [2-12d] 2026-11-05 ----------
 * 0건 화면(cases.html) ↔ 목록(lib/render.mjs casesMain). 사진은 세로 4:5, 카드는 채우고 상세는 전체를 보인다. 그림자 없음, 구분은 1px 테두리.
 * 하단 고정 바는 모달이 열리면 숨긴다. */
.cases-top { padding: calc(var(--header-h) * .35) 0 8px; text-align: center; }
.cases-top__orn { display: flex; justify-content: center; margin-bottom: 8px; }
.cases-top__orn svg { display: block; width: 110px; height: 26px; }
.cases-top__title { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.875rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.035em; }
.cases-top__lead { max-width: 36rem; margin: 12px auto 0; font-size: 1rem; line-height: 1.6; color: var(--ink); word-break: keep-all; }
.pchip { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border: 1px solid rgba(74, 98, 120, .35); border-radius: 999px; background: #fff; font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.cs-list { padding-block: clamp(24px, 3vw, 40px) var(--space-section); }
.cs-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.cs-card { display: flex; flex-direction: column; width: 100%; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cs-card:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.cs-card__photo { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: #f2f2ec; }
.cs-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cs-status { display: inline-flex; align-items: center; width: fit-content; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: .8125rem; font-weight: 600; }
.cs-card__status { position: absolute; top: 10px; left: 10px; }
.cs-card__body { display: flex; flex: 1; flex-direction: column; padding-top: 14px; }
.cs-card__meta { color: var(--ink-soft); font-size: .875rem; }
.cs-card__title { margin-top: 4px; font-size: 1.1875rem; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; word-break: keep-all; }
.cs-card__desc { margin-top: 12px; color: var(--ink-soft); line-height: 1.6; word-break: keep-all; }
.cs-card__source { margin-top: 8px; color: var(--ink-soft); font-size: .8125rem; }
.cs-card__more { margin-top: auto; padding-top: 12px; color: var(--accent); font-size: .9375rem; font-weight: 600; }
/* [2-12d 보완] 2026-11-05 사례 1개 카드: 카드 전체가 아니라 사진과 글자 버튼이 상세를 연다 */
.cs-card--one { cursor: default; }
.cs-card--one .cs-card__photo { width: 100%; padding: 0; border: 0; color: inherit; font: inherit; cursor: pointer; }
.cs-card--one .cs-card__photo:focus-visible, .cs-card--one .cs-card__more:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.cs-card--one .cs-card__body { padding-top: 16px; }
.cs-card--one .cs-card__chips { justify-content: flex-start; margin: 0; } /* .cs-chips보다 뒤 규칙이 이기지 않게 범위를 좁힌다 */
.cs-card--one .cs-card__title { margin: 14px 0 0; font-size: 1.5rem; line-height: 1.35; }
.cs-card--one .cs-card__desc { margin: 16px 0 0; font-size: 1.0625rem; color: var(--ink); line-height: 1.7; }
.cs-card--one .cs-card__source { margin: 6px 0 0; font-size: .9375rem; }
.cs-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 20px; }
.cs-card--one .cs-card__more { min-height: 44px; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
.cs-sec { padding-block: clamp(20px, 2.5vw, 32px); text-align: center; }
.cs-narrow { max-width: 720px; }
.cs-steps { display: grid; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; text-align: left; }
.cs-steps li { display: grid; gap: 2px; padding-left: 16px; border-left: 1px solid var(--line); }
.cs-steps__no { color: var(--accent); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; }
.cs-steps strong { font-size: 1.125rem; word-break: keep-all; }
.cs-more { display: inline-block; margin-top: 16px; }
.cs-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.cs-band { margin-top: var(--space-section); }
.cs-band__title { margin-bottom: 32px; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); line-height: 1.35; word-break: keep-all; }
/* [creators] [2-12d 보완 B] 2026-11-05 함께하는 크리에이터. 사례보다 눈에 띄지 않게 960px 이상은 4칸(사진 약 200px), 그 아래는 줄 배치. 페이지로 옮길 때 이 블록을 그대로 쓴다. */
.cr-sec { padding-block: clamp(24px, 3vw, 40px) 0; }
.cr-sec .section__title { text-align: center; }
.cr-grid { display: grid; gap: 12px; margin: clamp(16px, 2vw, 24px) auto 0; padding: 0; list-style: none; max-width: 920px; }
.cr-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cr-card__photo { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; object-fit: cover; background: #f2f2ec; }
.cr-card__text { min-width: 0; }
.cr-card__name { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.cr-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.cr-card__intro { margin: 6px 0 0; color: var(--ink-soft); font-size: .9375rem; line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
/* [/creators] */
.cm { width: calc(100vw - 24px); max-width: 880px; max-height: calc(100dvh - 24px); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); }
.cm[open] { display: flex; flex-direction: column; }
.cm::backdrop { background: rgba(27, 35, 43, .6); }
html:has(.cm[open]) { overflow: hidden; }
html:has(.cm[open]) .bottom-bar { display: none; }
.cm__head { display: flex; flex: none; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); }
.cm__label { color: var(--ink-soft); font-size: .9375rem; }
.cm__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }
.cm__close:focus-visible, .cm__scroll:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.cm__scroll { flex: 1; min-height: 0; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.cm__frame { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: #f2f2ec; }
.cm__frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cm__thumbs { display: flex; gap: 8px; margin-top: 8px; }
.cm__thumb { width: 56px; aspect-ratio: 4 / 5; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #f2f2ec; cursor: pointer; }
.cm__thumb[aria-pressed="true"] { border: 2px solid var(--accent); }
.cm__thumb:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.cm__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm__text { padding-top: 16px; }
.cm__title { margin: 8px 0 0; font-size: 1.375rem; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; word-break: keep-all; }
.cm__meta { margin: 6px 0 0; color: var(--ink-soft); }
.cm__desc { margin: 12px 0 0; line-height: 1.7; word-break: keep-all; }
.cm__source { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .9375rem; }
.cm__foot { flex: none; padding: 12px 16px; border-top: 1px solid var(--line); background: #fff; }
.cm__foot .btn { width: 100%; }
.contact-list__qr img { display: block; width: 140px; height: 140px; }
@media (min-width: 560px) {
  .cases-top { padding: calc(clamp(78px, 10.5vh, 124px) - var(--header-h) + 30.2px) 0 8px; }
  .cases-top__orn { margin-bottom: 14px; }
  .cases-top__title { font-size: clamp(28px, 3.4vw, 46px); }
  .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* [2-12d 보완] 2026-11-05 사례 1개: 사진 칸 280px(요청 상한 360px 이하)로 카드 높이를 낮추고 글자를 키운다. 설명이 없어도 세로 가운데에 모인다 */
  .cs-grid--one { grid-template-columns: minmax(0, 1fr); max-width: 920px; margin-inline: auto; }
  .cs-card--one { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 40px; align-items: start; padding: 20px; }
  /* 설명 있음: 글 묶음이 사진 높이를 채우고 버튼이 사진 아래 끝에 맞는다. 설명 없음: A안(사진 220px, 4:5 유지) */
  .cs-card--one .cs-card__body { align-self: stretch; padding: 4px 12px 0 0; }
  .cs-card--one .cs-card__title { font-size: 2rem; }
  .cs-card--one .cs-card__desc { font-size: 1.1875rem; }
  .cs-card--one .cs-card__actions { margin-top: auto; padding-top: 20px; }
  .cs-card--nodesc { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 32px; align-items: center; }
  .cs-card--nodesc .cs-card__body { align-self: center; padding-top: 0; }
  .cs-card--nodesc .cs-card__actions { margin-top: 0; }
}
@media (min-width: 960px) {
  .cs-grid:not(.cs-grid--one) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cr-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
  .cr-card { flex: 0 0 218px; grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; } /* 소개가 없는 카드도 글이 사진 바로 아래에 붙는다 */
  .cm__scroll { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; padding: 24px; }
  .cm__text { padding-top: 0; }
  .cm__foot { padding-inline: 24px; }
}

/* ---------- 움직임 줄이기 ---------- */
/* ---------- 섹션 등장 효과 [R18] (시험용: 이 블록과 js/reveal.js를 지우면 되돌아감) ---------- */
.js .reveal { opacity: 0; transform: translateY(8px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity 300ms ease-out, transform 300ms cubic-bezier(0.23, 1, 0.32, 1); }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }
@media print { .js .reveal { opacity: 1 !important; transform: none !important; } }

/* [R17] 움직임 줄이기: 이동 효과(누름·화살표·애니메이션)는 끄고 색 변화는 유지한다. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .btn:active, .nav-cta:active { transform: none; }
  .more-link:hover .more-link__arrow { transform: none; }
  .form__status { transition: none; } /* [R19] 상태 메시지 즉시 표시 */
}

/* ---------- 문의·지원 페이지 제목 별 장식 [R44] 2026-10-20 2-9b ----------
 * /services/ 첫 화면과 같은 별 이미지(star-services-w160/w320)·같은 규칙(제목 오른쪽 위, multiply, alt=""·aria-hidden, width·height 기입, 지연 로딩 없음).
 * 크기 PC 150px·960 미만 96px, 글자와 가로 16px. 아래 끝 = 제목 줄 상자 아래 끝(설명과 세로 16px). 반짝임 없음(motion 키 없음).
 * 대체 글꼴로 제목이 잠깐 넓어져도 화면 밖으로 가로 스크롤이 생기지 않게 구역에서 가로만 자른다. */
.page-head--star { overflow-x: clip; padding-top: calc(var(--space-page-head) + 10px); } /* [R45] 2026-10-20 2-9c: 560 미만에서 별 위 끝과 헤더 사이 2px → 12px(위 여백 +10px) */
@media (min-width: 560px) { .page-head--star { padding-top: var(--space-page-head); } } /* 560 이상은 기존 그대로(768·1280 변화 없음) */
.page-head__title--star { position: relative; width: fit-content; font-family: "Pretendard", "Pretendard Fallback", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; } /* 글꼴 교체 때 제목 폭이 바뀌어 별이 옆으로 밀리지 않게 /about/과 같은 크기 맞춤 대체 글꼴 */
.ph-star { position: absolute; left: calc(100% + 16px); bottom: 0; width: 96px; height: auto; max-width: none; mix-blend-mode: multiply; pointer-events: none; }
@media (min-width: 960px) { .ph-star { width: 150px; } }

/* ---------- 회사 소개(/about/) [R44] 2026-10-20 2-9b ----------
 * 첫 구역 글 등장(motion.aboutReveal): 제목 → 본문 문단, 아래 8px → 0, 0.5초, 0.08초 간격, 1회. 로고는 움직이지 않음.
 * 시작 투명도 0.86: 움직이는 중에도 가장 옅은 본문 글자(#4f5f6c)가 흰 바탕 위 4.71:1(제목 #1b232b 10.2:1)로 대비 기준 4.5를 넘는다.
 * 숨김은 html.ab-motion 아래에만(about.html 인라인 스크립트), 전환은 html.ab-live(js/about.js 시작) 아래에만. */
@media (prefers-reduced-motion: no-preference) {
  .ab-motion .about-intro__title, .ab-motion .about-intro .prose p { opacity: .86; transform: translateY(8px); }
  .ab-live .about-intro__title, .ab-live .about-intro .prose p { transition: opacity .5s cubic-bezier(.2, .7, .2, 1), transform .5s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
  .about-intro .prose p:nth-child(1) { --d: .08s; } .about-intro .prose p:nth-child(2) { --d: .16s; } .about-intro .prose p:nth-child(3) { --d: .24s; }
  .about-intro .prose p:nth-child(4) { --d: .32s; } .about-intro .prose p:nth-child(5) { --d: .4s; }
  .ab-motion .about-sec.is-in .about-intro__title, .ab-motion .about-sec.is-in .about-intro .prose p { opacity: 1; transform: none; }
}

/* 협업 구조(.cs): 젠스파크 about 시안 collab.css를 고쳐서 이식. "한 장의 판을 둘로 나눈 모양"(한국 운영팀 | 중국 협력사, 가운데 이음선 위 별 표식).
 * 시안과 다르게 한 것: 구역 위 1px 선 없음(구역 경계는 간격), 위아래 여백은 사이트 공통 --space-section(시안 72~128px), 판 아래 선은 남색 → 옅은 선 #c9d1d9
 *   (CLAUDE.md "진한 선은 목록 위 한 줄만"), 좌우 여백·최대 폭은 사이트 .container, 글꼴은 사이트 글꼴(시안 font-family 없음),
 *   WANSTAR 굵기 300 → 400(글꼴 파일 없음), 중국어 협력사 이름 굵기 600 → 500 + 중국어 글꼴 직접 지정(Pretendard에 한자 없음),
 *   [예시 문구] 꼬리표는 사이트 .ex-tag(/services/와 같은 모양), 숨김 클래스 .cs.is-armed → html.ab-motion(motion.aboutReveal).
 * 색: 아이보리 #faf9f6(기본 배경 허용색, 색 배경 구역으로 세지 않음), 제목·이름·원문 설명 #1c2430(15.4:1), 리드·맡는 일 #44535f(7.6:1), 라벨·번호·아이콘 #4a6278(6.0:1). 그림자 없음. */
.cs { --cs-slate: #4a6278; --cs-navy: #1c2430; --cs-body: #44535f; --cs-line: #c9d1d9; --cs-ease: cubic-bezier(.2, .7, .2, 1); --cs-ease-out: cubic-bezier(.16, 1, .3, 1);
  position: relative; padding-block: var(--space-section); background: #faf9f6; color: var(--cs-navy); overflow-x: clip; overflow-wrap: break-word; }
.cs-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cs-slate); }
.cs-eyebrow svg { flex: none; }
.cs-title { margin-top: 14px; font-size: 1.875rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.03em; }
.cs-lead { margin-top: 16px; max-width: 34em; font-size: 1rem; line-height: 1.75; color: var(--cs-body); }
.cs-plate { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 44px; border-top: 1px solid var(--cs-navy); border-bottom: 1px solid var(--cs-line); }
.cs-side { position: relative; min-width: 0; padding: 36px 0 40px; }
/* 960 미만: 가로 이음선 위 별 표식(88px)이 위아래로 44px 나오므로 이음선 쪽 여백 64px(별과 글 사이 20px) */
.cs-kr { padding-bottom: 64px; }
.cs-cn { padding-top: 64px; border-top: 1px solid var(--cs-line); }
.cs-h { font-weight: 400; }
.cs-role { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.02em; color: var(--cs-slate); }
.cs-role svg { flex: none; }
/* h3 원문 "한국 운영팀 — WANSTAR"를 그대로 두고 역할과 이름만 줄을 나눠 보여 준다(화면 읽기 프로그램은 원문대로 읽음) */
.cs-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cs-name { display: block; margin-top: 14px; font-size: 1.875rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--cs-navy); }
.cs-kr .cs-name { font-weight: 400; letter-spacing: 0.2em; } /* 시안 굵기 300 → 400(글꼴 파일 없음) */
.cs-cn .cs-name { font-size: 1.625rem; font-weight: 500; letter-spacing: 0.02em; font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; } /* 시안 600 → 500. Pretendard에 한자가 없어 중국어 글꼴 직접 지정 */
.cs-desc { margin-top: 16px; max-width: 28em; font-size: 1rem; line-height: 1.75; color: var(--cs-navy); }
.cs-ex { margin-top: 28px; }
.cs-ex ul { margin-top: 12px; border-top: 1px dashed var(--cs-line); }
.cs-ex li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 52px; padding: 12px 0; border-bottom: 1px dashed var(--cs-line); font-size: 0.9375rem; line-height: 1.5; color: var(--cs-body); }
.cs-ex li b { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.16em; color: var(--cs-slate); }
/* 이음선 위의 별: 아이보리 원(88px)이 이음선을 끊고, 안쪽 56px 흰 원(1px 테두리) 위에 별 + 기운 궤도 */
.cs-hub { position: relative; z-index: 1; height: 0; }
.cs-hub span { position: absolute; top: -44px; left: 50%; display: grid; place-items: center; width: 88px; height: 88px; margin-left: -44px; border-radius: 50%; background: #faf9f6; }
.cs-hub span::before { content: ""; position: absolute; inset: 16px; border-radius: 50%; border: 1px solid var(--cs-line); background: #fff; }
.cs-hub svg { position: relative; display: block; }
.cs-orbit { position: absolute; left: 0; top: 0; width: 88px; height: 88px; opacity: .6; }
.cs-star { width: 24px; height: 24px; }

/* 협력사 소개(OUR PARTNER, partner.showIntro일 때만 출력. [R47] 2026-10-22 2-11 정식 공개) */
.partner-sec .partner-intro { margin-top: 0; }
.partner-intro .partner-intro__eyebrow { margin-top: 0; font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.28em; text-transform: uppercase; color: #4a6278; } /* 흰 바탕 6.35:1 */
.partner-intro .partner-intro__title { margin-top: 10px; margin-bottom: 0; }
.partner-intro .partner-intro__name { display: flex; flex-direction: column; gap: 4px; margin-top: 20px; color: var(--ink); }
.partner-intro__zh { font-size: 1.5rem; font-weight: 500; line-height: 1.3; letter-spacing: 0.02em; font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
.partner-intro__en { font-size: 0.9375rem; line-height: 1.5; letter-spacing: 0.04em; color: var(--ink-soft); }

@media (min-width: 560px) {
  .cs-title { font-size: 2.125rem; }
  .cs-name { font-size: 2.125rem; }
  .cs-cn .cs-name { font-size: 1.875rem; }
}
@media (min-width: 960px) {
  .cs-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: end; }
  .cs-eyebrow, .cs-title { grid-column: 1; }
  .cs-title { font-size: 2.5rem; }
  .cs-lead { grid-column: 2; grid-row: 1 / span 2; justify-self: start; margin-top: 0; font-size: 1.0625rem; }
  .cs-plate { grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr); margin-top: 56px; }
  .cs-side { padding: 56px 64px 60px; } /* 시안 960~1199 48px → 64px(1200 이상과 같음): 48px이면 가운데 별 표식(반지름 44px)과 글자 사이 5.6px뿐(2-9b 측정) */
  .cs-kr { padding-left: 0; }
  .cs-cn { padding-right: 0; border-top: 0; border-left: 1px solid var(--cs-line); }
  .cs-hub { width: 0; height: auto; }
  .cs-hub span { top: 50%; left: 0; margin: -44px 0 0 -44px; }
  .cs-name { font-size: 2.5rem; }
  .cs-cn .cs-name { font-size: 2.125rem; }
  .cs-desc { font-size: 1.0625rem; }
  .partner-sec .prose p:not([class]) { font-size: 1.125rem; line-height: 1.7; } /* 회사 소개 본문과 같은 PC 18px */
  .partner-intro__zh { font-size: 1.75rem; }
}
@media (min-width: 1200px) {
  .cs-side { padding: 64px 64px 68px; }
  .cs-kr { padding-left: 0; }
  .cs-cn { padding-right: 0; }
  .cs-name { font-size: 2.75rem; }
  .cs-cn .cs-name { font-size: 2.375rem; }
}
/* 협업 구조 등장(motion.aboutReveal, 시안 값 그대로, 1회). transform·opacity·clip-path만 */
@media (prefers-reduced-motion: no-preference) {
  .ab-motion .cs-head > * { opacity: 0; transform: translateY(16px); }
  .ab-live .cs-head > * { transition: opacity .7s var(--cs-ease), transform .7s var(--cs-ease); }
  .ab-live .cs-head > :nth-child(2) { transition-delay: .08s; }
  .ab-live .cs-head > :nth-child(3) { transition-delay: .16s; }
  .ab-motion .cs-side { opacity: 0; transform: translateY(20px); }
  .ab-live .cs-side { transition: opacity .8s var(--cs-ease), transform .9s var(--cs-ease-out); }
  .ab-live .cs-cn { transition-delay: .18s; }
  .ab-motion .cs-hub span { opacity: 0; transform: rotate(-45deg) scale(.6); }
  .ab-live .cs-hub span { transition: opacity .6s var(--cs-ease) .35s, transform 1s var(--cs-ease-out) .35s; }
  .ab-motion .cs-orbit { clip-path: inset(0 100% 0 0); }
  .ab-live .cs-orbit { transition: clip-path 1.4s var(--cs-ease-out) .55s; }
  .ab-motion .cs-ex li { opacity: 0; transform: translateY(8px); }
  .ab-live .cs-ex li { transition: opacity .5s var(--cs-ease), transform .5s var(--cs-ease); }
  .ab-live .cs-kr li:nth-child(1) { transition-delay: .45s; } .ab-live .cs-kr li:nth-child(2) { transition-delay: .53s; } .ab-live .cs-kr li:nth-child(3) { transition-delay: .61s; }
  .ab-live .cs-cn li:nth-child(1) { transition-delay: .63s; } .ab-live .cs-cn li:nth-child(2) { transition-delay: .71s; } .ab-live .cs-cn li:nth-child(3) { transition-delay: .79s; }
  .ab-motion .cs.is-in .cs-head > *, .ab-motion .cs.is-in .cs-side, .ab-motion .cs.is-in .cs-ex li, .ab-motion .cs.is-in .cs-hub span { opacity: 1; transform: none; }
  .ab-motion .cs.is-in .cs-orbit { clip-path: inset(0); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 960px) {
  .ab-motion .cs-kr { transform: translateX(-24px); } /* PC: 두 쪽이 바깥에서 가운데로 모인다(시안) */
  .ab-motion .cs-cn { transform: translateX(24px); }
  .ab-motion .cs.is-in .cs-side { transform: none; }
}

/* ---------- 자료 섹션 자리 [R21] 2026-10-14 ----------
 * site.config의 stats·clients.logos·media.photos·faq에 값이 있을 때만 HTML이 만들어진다. 흐르는 로고 띠·숫자 올라가는 효과 없음. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 16px; margin-top: var(--space-heading); }
.stat-grid li { display: grid; gap: 4px; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius-control); }
.stat-grid__value { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-grid__label { color: var(--ink-soft); }
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 16px; margin-top: var(--space-heading); }
.logo-grid li { display: flex; align-items: center; justify-content: center; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-control); }
.logo-grid img { width: auto; max-height: 48px; object-fit: contain; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 16px; margin-top: var(--space-heading); }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-control); }
.faq { margin-top: var(--space-heading); border-top: var(--rule-strong); }
.faq__item { border-bottom: var(--rule-soft); }
.faq__item summary { padding-block: 18px; font-weight: 600; cursor: pointer; }
.faq__item p { padding-bottom: 18px; color: var(--ink-soft); }