/* 오로시 소개 웹사이트 — A안 "차분한 달빛" 색 토큰. 밤 단일 테마(3차, 2026-10-08). 값은 app/src/theme/palette.ts의 nightPalette를 기준으로 하고, OS 밝기 설정(prefers-color-scheme)을 따르지 않는다(color-scheme: dark 선언). 보조 글자 한 토큰만 긴 글 읽기 대비를 위해 밝혔다(아래 주석). 외부 글꼴·CDN을 쓰지 않는다 — 브랜드 글꼴(Cormorant Garamond·Gowun Batang)은 /assets/fonts/에 자체 호스팅한 OFL woff2만 쓴다(같은 출처, 외부 요청 아님). */ /* ── 자체 호스팅 글꼴: 영문 Cormorant Garamond Medium(500), 한글 Gowun Batang Regular(400) ── 실제로 쓰는 문자만 커버하도록 @fontsource 패키지에서 필요한 조각만 골라 복사했다 (scripts/build-site.mjs 주석 참고). unicode-range는 각 패키지 CSS의 값을 그대로 옮겼다. */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Gowun Batang'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/gowun-batang-109-400-normal.woff2') format('woff2'); unicode-range: U+24, U+60, U+3B9, U+3BB, U+3BD, U+2191, U+2606, U+300C-300D, U+3131, U+3134, U+3139, U+3141-3142, U+3148, U+3161, U+3163, U+321C, U+4EBA, U+5317, U+AC31, U+AC77, U+AC9F, U+ACB9, U+ACF0-ACF1, U+ACFD, U+AD73, U+AF3D, U+B00C, U+B04A, U+B057, U+B0C4, U+B188, U+B1CC, U+B214, U+B2DB, U+B2EE, U+B304, U+B4ED, U+B518, U+B5BC, U+B625, U+B69C-B69D, U+B7AC, U+B801, U+B86C, U+B959, U+B95C, U+B985, U+BA48, U+BB58, U+BC0C, U+BC38, U+BC85, U+BC9A, U+BF40, U+C068, U+C0BD, U+C0CC, U+C12F, U+C149, U+C1E0, U+C22B, U+C22D, U+C250, U+C2FC, U+C300, U+C313, U+C370, U+C3D8, U+C557, U+C580, U+C5E3, U+C62E, U+C634, U+C6F0, U+C74D, U+C783, U+C78E, U+C796, U+C7BC, U+C92C, U+CA4C, U+CC1C, U+CC54, U+CC59, U+CE04, U+CF30, U+CFC4, U+D140, U+D321, U+D38C, U+D399, U+D54F, U+D587, U+D5D0, U+D6E8, U+D770; } @font-face { font-family: 'Gowun Batang'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/gowun-batang-110-400-normal.woff2') format('woff2'); unicode-range: U+D7, U+EA, U+FC, U+2192, U+25BC, U+3000, U+3137, U+3145, U+315C, U+7F8E, U+AC13, U+AC71, U+AC90, U+ACB8, U+ACE7, U+AD7F, U+AE50, U+AEF4, U+AF34, U+AFBC, U+B048, U+B09A, U+B0AD, U+B0BC, U+B113, U+B125, U+B141, U+B20C, U+B2D9, U+B2ED, U+B367, U+B369, U+B374, U+B3CB, U+B4EC, U+B611, U+B760, U+B81B, U+B834, U+B8B0, U+B8E1, U+B989, U+B9D1, U+B9E1, U+B9FA, U+BA4D, U+BA78, U+BB35, U+BB54, U+BBF9, U+BC11, U+BCB3, U+BD05, U+BD95, U+BDD4, U+BE10, U+BED0, U+BF51, U+C0D8, U+C232, U+C2B7, U+C2EB, U+C378, U+C500, U+C52C, U+C549, U+C568, U+C598, U+C5C9, U+C61B, U+C639, U+C67C, U+C717, U+C78A, U+C80A, U+C90C-C90D, U+C950, U+C9E7, U+CBE4, U+CCA9, U+CCE4, U+CDB0, U+CE78, U+CE94, U+CE98, U+CF8C, U+D018, U+D034, U+D0F1, U+D1B1, U+D280, U+D2F8, U+D338, U+D380, U+D3B4, U+D610, U+D69F, U+D6FC, U+D758; } @font-face { font-family: 'Gowun Batang'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/gowun-batang-111-400-normal.woff2') format('woff2'); unicode-range: U+E7, U+2022, U+203B, U+25C0, U+2605, U+2661, U+3147, U+318D, U+672C, U+8A9E, U+ACAA, U+ACBC, U+AD1C, U+AE4A, U+AE5C, U+B044, U+B054, U+B0C8-B0C9, U+B2A6, U+B2D0, U+B35C, U+B364, U+B428, U+B454, U+B465, U+B4B7, U+B4E3, U+B51C, U+B5A1, U+B784, U+B790, U+B7AB, U+B7F4, U+B82C, U+B835, U+B8E9, U+B8F8, U+B9D8, U+B9F9, U+BA5C, U+BA64, U+BABD, U+BB18, U+BB3B, U+BBFF, U+BC0D, U+BC45, U+BC97, U+BCBC, U+BE45, U+BE75, U+BE7C, U+BFCC, U+C0B6, U+C0F7, U+C14B, U+C2B4, U+C30D, U+C4F8, U+C5BB, U+C5D1, U+C5E0, U+C5EE, U+C5FD, U+C606, U+C6C5, U+C6E0, U+C708, U+C81D, U+C820, U+C824, U+C878, U+C918, U+C96C, U+C9E4, U+C9F1, U+CC2E, U+CD09, U+CEA1, U+CEF5, U+CEF7, U+CF64, U+CF69, U+CFE8, U+D035, U+D0AC, U+D230, U+D234, U+D2F4, U+D31D, U+D575, U+D578, U+D608, U+D614, U+D718, U+D751, U+D761, U+D78C, U+D790; } @font-face { font-family: 'Gowun Batang'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/gowun-batang-112-400-normal.woff2') format('woff2'); unicode-range: U+2665, U+3160, U+4E2D, U+6587, U+65E5, U+AC12, U+AC14, U+AC16, U+AC81, U+AD34, U+ADE0, U+AE54, U+AEBC, U+AF2C, U+AFC0, U+AFC8, U+B04C, U+B08C, U+B099, U+B0A9, U+B0AC, U+B0AE, U+B0B8, U+B123, U+B179, U+B2E5, U+B2F7, U+B4C0, U+B531, U+B538, U+B545, U+B550, U+B5A8, U+B6F0, U+B728, U+B73B, U+B7AD, U+B7ED, U+B809, U+B864, U+B86D, U+B871, U+B9BF, U+B9F5, U+BA40, U+BA4B, U+BA58, U+BA87, U+BAAC, U+BBC0, U+BC16, U+BC34, U+BD07, U+BD99, U+BE59, U+BFD0, U+C058, U+C0E4, U+C0F5, U+C12D, U+C139, U+C228, U+C529, U+C5C7, U+C635, U+C637, U+C735, U+C77D, U+C787, U+C789, U+C8C4, U+C989, U+C98C, U+C9D0, U+C9D3, U+CC0C, U+CC99, U+CD0C, U+CD2C, U+CD98, U+CDA4, U+CE59, U+CE60, U+CE6D, U+CEA0, U+D0D0-D0D1, U+D0D5, U+D14D, U+D1A4, U+D29C, U+D2F1, U+D301, U+D39C, U+D3BC, U+D4E8, U+D540, U+D5EC, U+D640, U+D750; } @font-face { font-family: 'Gowun Batang'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/gowun-batang-113-400-normal.woff2') format('woff2'); unicode-range: U+5E, U+25B2, U+25B6, U+314E, U+AC24, U+ACE1, U+ACE4, U+AE68, U+AF2D, U+B0D0, U+B0E5, U+B150, U+B155, U+B193, U+B2C9, U+B2DD, U+B3C8, U+B3FC, U+B410, U+B458, U+B4DD, U+B5A0, U+B5A4, U+B5BB, U+B7B5, U+B838, U+B840, U+B86F, U+B8F9, U+B960, U+B9E5, U+BAB8, U+BB50, U+BC1D, U+BC24-BC25, U+BCA8, U+BCBD, U+BD04, U+BD10, U+BD24, U+BE48, U+BE5B, U+BE68, U+C05C, U+C12C, U+C140, U+C15C, U+C168, U+C194, U+C219, U+C27D, U+C2A8, U+C2F1, U+C2F8, U+C368, U+C554-C555, U+C559, U+C564, U+C5D8, U+C5FC, U+C625, U+C65C, U+C6B1, U+C728, U+C794, U+C84C, U+C88C, U+C8E0, U+C8FD, U+C998, U+C9DD, U+CC0D, U+CC30, U+CEEC, U+CF13, U+CF1C, U+CF5C, U+D050, U+D07C, U+D0A8, U+D134, U+D138, U+D154, U+D1F4, U+D2BC, U+D329, U+D32C, U+D3D0, U+D3F4, U+D3FC, U+D56B, U+D5CC, U+D600-D601, U+D639, U+D6C8, U+D754, U+D765; } @font-face { font-family: 'Gowun Batang'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/gowun-batang-114-400-normal.woff2') format('woff2'); unicode-range: U+3C-3D, U+2026, U+24D2, U+314B, U+AC11, U+ACF3, U+AD74, U+AD81, U+ADF9, U+AE34, U+AF43, U+AFB8, U+B05D, U+B07C, U+B110, U+B118, U+B17C, U+B180, U+B18D, U+B192, U+B2CC, U+B355, U+B378, U+B4A4, U+B4EF, U+B78D, U+B799, U+B7A9, U+B7FD, U+B807, U+B80C, U+B839, U+B9B4, U+B9DB, U+BA3C, U+BAB0, U+BBA4, U+BC94, U+BE4C, U+C154, U+C1C4, U+C26C, U+C2AC, U+C2ED, U+C4F4, U+C55E, U+C561, U+C571, U+C5B5, U+C5C4, U+C654-C655, U+C695, U+C6E8, U+C6F9, U+C724, U+C751, U+C775, U+C7A0, U+C7C1, U+C874, U+C880, U+C9D5, U+C9F8, U+CABD, U+CC29, U+CC2C, U+CCA8, U+CCAB, U+CCD0, U+CE21, U+CE35, U+CE7C, U+CE90, U+CEE8, U+CEF4, U+CFE0, U+D070, U+D0B9, U+D0C1, U+D0C4, U+D0C8, U+D15C, U+D1A1, U+D2C0, U+D300, U+D314, U+D3ED, U+D478, U+D480, U+D48D, U+D508, U+D53D, U+D5E4, U+D611, U+D61C, U+D68D, U+D6A8, U+D798; } @font-face { font-family: 'Gowun Batang'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/gowun-batang-115-400-normal.woff2') format('woff2'); unicode-range: U+23, U+25, U+5F, U+A9, U+AC08, U+AC78, U+ACA8, U+ACAC, U+ACE8, U+AD70, U+ADC0, U+ADDC, U+B137, U+B140, U+B208, U+B290, U+B2F5, U+B3C5, U+B3CC, U+B420, U+B429, U+B529, U+B530, U+B77D, U+B79C, U+B7A8, U+B7C9, U+B7F0, U+B7FC, U+B828, U+B860, U+B9AD, U+B9C1, U+B9C9, U+B9DD-B9DE, U+B9E8, U+BA38-BA39, U+BABB, U+BC00, U+BC8C, U+BCA0, U+BCA4, U+BCD1, U+BCFC, U+BD09, U+BDF0, U+BE60, U+C0AD, U+C0B4, U+C0BC, U+C190, U+C1FC, U+C220, U+C288, U+C2B9, U+C2F6, U+C528, U+C545, U+C558, U+C5BC, U+C5D4, U+C600, U+C644, U+C6C0, U+C6C3, U+C721, U+C798, U+C7A1, U+C811, U+C838, U+C871, U+C904, U+C990, U+C9DC, U+CC38, U+CC44, U+CCA0, U+CD1D, U+CD95, U+CDA9, U+CE5C, U+CF00, U+CF58, U+D150, U+D22C, U+D305, U+D328, U+D37C, U+D3F0, U+D551, U+D5A5, U+D5C8, U+D5D8, U+D63C, U+D64D, U+D669, U+D734, U+D76C; } @font-face { font-family: 'Gowun Batang'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/gowun-batang-116-400-normal.woff2') format('woff2'); unicode-range: U+26, U+2B, U+3E, U+40, U+7E, U+AC01, U+AC19, U+AC1D, U+ACA0, U+ACA9, U+ACB0, U+AD8C, U+AE09, U+AE38, U+AE40, U+AED8, U+B09C, U+B0A0, U+B108, U+B204, U+B298, U+B2D8, U+B2EB-B2EC, U+B2F4, U+B313, U+B358, U+B450, U+B4E0, U+B54C, U+B610, U+B780, U+B78C, U+B791, U+B8E8, U+B958, U+B974, U+B984, U+B9B0, U+B9BC-B9BD, U+B9CE, U+BA70, U+BBFC, U+BC0F, U+BC15, U+BC1B, U+BC31, U+BC95, U+BCC0, U+BCC4, U+BD81, U+BD88, U+C0C8, U+C11D, U+C13C, U+C158, U+C18D, U+C1A1, U+C21C, U+C4F0, U+C54A, U+C560, U+C5B8, U+C5C8, U+C5F4, U+C628, U+C62C, U+C678, U+C6CC, U+C808, U+C810, U+C885, U+C88B, U+C900, U+C988, U+C99D, U+C9C8, U+CC3D-CC3E, U+CC45, U+CD08, U+CE20, U+CEE4, U+D074, U+D0A4, U+D0DD, U+D2B9, U+D3B8, U+D3C9, U+D488, U+D544, U+D559, U+D56D, U+D588, U+D615, U+D648, U+D655, U+D658, U+D65C; } @font-face { font-family: 'Gowun Batang'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/gowun-batang-117-400-normal.woff2') format('woff2'); unicode-range: U+D, U+48, U+7C, U+AC10, U+AC15, U+AC74, U+AC80, U+AC83, U+ACC4, U+AD11, U+AD50, U+AD6D, U+ADFC, U+AE00, U+AE08, U+AE4C, U+B0A8, U+B124, U+B144, U+B178, U+B274, U+B2A5, U+B2E8, U+B2F9, U+B354, U+B370, U+B418, U+B41C, U+B4F1, U+B514, U+B798, U+B808, U+B824-B825, U+B8CC, U+B978, U+B9D0, U+B9E4, U+BAA9, U+BB3C, U+BC18, U+BC1C, U+BC30, U+BC84, U+BCF5, U+BCF8, U+BD84, U+BE0C, U+BE14, U+C0B0, U+C0C9, U+C0DD, U+C124, U+C2DD, U+C2E4, U+C2EC, U+C54C, U+C57C-C57D, U+C591, U+C5C5-C5C6, U+C5ED, U+C608, U+C640, U+C6B8, U+C6D4, U+C784, U+C7AC, U+C800-C801, U+C9C1, U+C9D1, U+CC28, U+CC98, U+CC9C, U+CCAD, U+CD5C, U+CD94, U+CD9C, U+CDE8, U+CE68, U+CF54, U+D0DC, U+D14C, U+D1A0, U+D1B5, U+D2F0, U+D30C, U+D310, U+D398, U+D45C, U+D50C, U+D53C, U+D560, U+D568, U+D589, U+D604, U+D6C4, U+D788; } @font-face { font-family: 'Gowun Batang'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/gowun-batang-118-400-normal.woff2') format('woff2'); unicode-range: U+39, U+49, U+4D-4E, U+A0, U+AC04, U+AC1C, U+AC70, U+AC8C, U+ACBD, U+ACF5, U+ACFC, U+AD00, U+AD6C, U+ADF8, U+B098, U+B0B4, U+B294, U+B2C8, U+B300, U+B3C4, U+B3D9, U+B4DC, U+B4E4, U+B77C, U+B7EC, U+B85D, U+B97C, U+B9C8, U+B9CC, U+BA54, U+BA74, U+BA85, U+BAA8, U+BB34, U+BB38, U+BBF8, U+BC14, U+BC29, U+BC88, U+BCF4, U+BD80, U+BE44, U+C0C1, U+C11C, U+C120, U+C131, U+C138, U+C18C, U+C218, U+C2B5, U+C2E0, U+C544, U+C548, U+C5B4, U+C5D0, U+C5EC, U+C5F0, U+C601, U+C624, U+C694, U+C6A9, U+C6B0, U+C6B4, U+C6D0, U+C704, U+C720, U+C73C, U+C740, U+C744, U+C74C, U+C758, U+C77C, U+C785, U+C788, U+C790-C791, U+C7A5, U+C804, U+C815, U+C81C, U+C870, U+C8FC, U+C911, U+C9C4, U+CCB4, U+CE58, U+CE74, U+D06C, U+D0C0, U+D130, U+D2B8, U+D3EC, U+D504, U+D55C, U+D569, U+D574, U+D638, U+D654, U+D68C; } @font-face { font-family: 'Gowun Batang'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/gowun-batang-119-400-normal.woff2') format('woff2'); unicode-range: U+20-22, U+27-2A, U+2C-38, U+3A-3B, U+3F, U+41-47, U+4A-4C, U+4F-5D, U+61-7B, U+7D, U+A1, U+AB, U+AE, U+B7, U+BB, U+BF, U+2013-2014, U+201C-201D, U+2122, U+AC00, U+ACE0, U+AE30, U+B2E4, U+B85C, U+B9AC, U+C0AC, U+C2A4, U+C2DC, U+C774, U+C778, U+C9C0, U+D558; } /* 3차 3회차(2026-10-08): '기록 후 한마디' 48줄(명조 카드 제목)에 쓰이는 글자 '볍뤄렷곁갚'을 덮는 조각 4개 추가. */ @font-face { font-family: 'Gowun Batang'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/gowun-batang-104-400-normal.woff2') format('woff2'); unicode-range: U+2161, U+2228, U+2299, U+2464, U+2517, U+2640, U+3042, U+304a, U+3053, U+3061, U+307f, U+3082, U+308c, U+3092, U+30a8, U+30ab, U+30ad, U+30b0, U+30b3, U+30b7, U+30c1, U+30c6, U+30c9, U+30d5, U+30d7, U+30de, U+30e0-30e1, U+30ec-30ed, U+4e0b, U+4e0d, U+4ee3, U+53f0, U+548c, U+5b89, U+5bb6, U+5c0f, U+611b, U+6771, U+6aa2, U+6bcd, U+6c34, U+6cd5, U+6d77, U+767d, U+795e, U+8ecd, U+9999, U+9ad8, U+ac07, U+ac1a, U+ac40, U+ad0c, U+ad88, U+ada4, U+ae01, U+ae65, U+aebd, U+aec4, U+afe8, U+b139, U+b205, U+b383, U+b38c, U+b42c, U+b461, U+b55c, U+b78f, U+b8fb, U+b9f7, U+bafc, U+bc99, U+bed8, U+bfcd, U+c0bf, U+c0f9, U+c167, U+c204, U+c20f, U+c22f, U+c258, U+c298, U+c2bc, U+c388, U+c501, U+c50c, U+c5b9, U+c5ce, U+c641, U+c648, U+c73d, U+ca50, U+ca61, U+cc4c, U+ceac, U+d0d4, U+d5f7, U+d6d7, U+ff1a; } @font-face { font-family: 'Gowun Batang'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/gowun-batang-106-400-normal.woff2') format('woff2'); unicode-range: U+2039-203a, U+223c, U+25b3, U+25b7, U+25bd, U+25cf, U+266a, U+3002, U+300b, U+304b, U+3057, U+305f, U+306a-306b, U+307e, U+308a-308b, U+3093, U+30a2, U+30af, U+30b9, U+30c3, U+30c8, U+30e9-30eb, U+33a1, U+4e00, U+524d, U+5357, U+5b50, U+7121, U+884c, U+9751, U+ac94, U+aebe, U+aecd, U+af08, U+af41, U+af49, U+b010, U+b053, U+b109, U+b11b, U+b128, U+b154, U+b291, U+b2e6, U+b301, U+b385, U+b525, U+b5b4, U+b729, U+b72f, U+b738, U+b7ff, U+b837, U+b975, U+ba67, U+bb47, U+bc1f, U+bd90, U+bfd4, U+c27c, U+c324, U+c379, U+c3e0, U+c465, U+c53b, U+c58c, U+c610, U+c653, U+c6cd, U+c813, U+c82f, U+c999, U+c9e0, U+cac4, U+cad3, U+cbd4, U+cc10, U+cc22, U+ccb8, U+ccbc, U+cda5, U+ce84, U+cea3, U+cf67, U+cfe1, U+d241, U+d30d, U+d31c, U+d391, U+d401, U+d479, U+d5c9, U+d5db, U+d649, U+d6d4; } @font-face { font-family: 'Gowun Batang'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/gowun-batang-107-400-normal.woff2') format('woff2'); unicode-range: U+b0, U+e9, U+2193, U+2462, U+260e, U+261e, U+300e-300f, U+3044, U+30a4, U+30fb-30fc, U+314d, U+5973, U+6545, U+6708, U+7537, U+ac89, U+ac9c, U+acc1, U+ad04, U+ad75, U+ad7d, U+ae45, U+ae61, U+af42, U+b0ab, U+b0af, U+b0b3, U+b12c, U+b194, U+b1a8, U+b220, U+b258, U+b284, U+b2ff, U+b315, U+b371, U+b3d4-b3d5, U+b460, U+b527, U+b534, U+b810, U+b818, U+b98e, U+ba55, U+bbac, U+bc0b, U+bc40, U+bca1, U+bccd, U+bd93, U+be54, U+be5a, U+bf08, U+bf50, U+bf55, U+bfdc, U+c0c0, U+c0d0, U+c0f4, U+c100, U+c11e, U+c170, U+c20d, U+c274, U+c290, U+c308, U+c369, U+c539, U+c587, U+c5ff, U+c6ec, U+c70c, U+c7ad, U+c7c8, U+c83c, U+c881, U+cb48, U+cc60, U+ce69, U+ce6b, U+ce75, U+cf04, U+cf08, U+cf55, U+cf70, U+cffc, U+d0b7, U+d1a8, U+d2c8, U+d384, U+d47c, U+d48b, U+d5dd, U+d5e8, U+d720, U+d759, U+f981; } @font-face { font-family: 'Gowun Batang'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/gowun-batang-108-400-normal.woff2') format('woff2'); unicode-range: U+e0, U+e2, U+395, U+3b7, U+3ba, U+2460-2461, U+25a0, U+3010-3011, U+306e, U+30f3, U+314a, U+314c, U+5927, U+65b0, U+7e41, U+97d3, U+9ad4, U+ad49, U+ae0b, U+ae0d, U+ae43, U+ae5d, U+aecf, U+af3c, U+af64, U+afd4, U+b080, U+b084, U+b0c5, U+b10c, U+b1e8, U+b2ac, U+b36e, U+b451, U+b515, U+b540, U+b561, U+b6ab, U+b6b1, U+b72c, U+b730, U+b744, U+b800, U+b8ec, U+b8f0, U+b904, U+b968, U+b96d, U+b987, U+b9d9, U+bb36, U+bb49, U+bc2d, U+bc43, U+bcf6, U+bd89, U+be57, U+be61, U+bed4, U+c090, U+c130, U+c148, U+c19c, U+c2f9, U+c36c, U+c37c, U+c384, U+c3df, U+c575, U+c584, U+c660, U+c719, U+c816, U+ca4d, U+ca54, U+cabc, U+cb49, U+cc14, U+cff5, U+d004, U+d038, U+d0b4, U+d0d3, U+d0e0, U+d0ed, U+d131, U+d1b0, U+d31f, U+d33d, U+d3a0, U+d3ab, U+d514, U+d584, U+d6a1, U+d6cc, U+d749, U+d760, U+d799; } :root { /* 항상 밤. 표면 깊이 3단: 가장 깊은 밤(--color-bg) → 카드(--color-surface) → 강조(--color-surface-2). 대비는 WCAG 명도 대비(본문 글자 #ececff 기준)이며 scripts/build-site.test.mjs가 7:1·4.5:1을 단언한다. */ color-scheme: dark; --color-bg: #292966; /* nightPalette.background — 본문 11.2:1 */ --color-surface: #34347a; /* nightPalette.surface — 본문 9.4:1 */ --color-surface-2: #3e3e8e; /* 강조 표면(칩 hover·표 머리글) — 본문 7.9:1 */ --color-text: #ececff; /* nightPalette.text — 순백이 아닌 달빛 */ --color-accent: #ccccff; /* nightPalette.accentText — bg 8.5:1 · 카드 7.1:1 */ --color-subtle: #b8b8dc; /* 보조 글자 — bg 6.8:1 · 카드 5.7:1. nightPalette.subtleText(#a3a3cc)는 카드 위 4.5:1이라 긴 글(FAQ·처리방침·바닥글)을 위해 한 단계 밝혔다 */ --color-border: #45457f; /* nightPalette.border — 카드 테두리 */ --color-line: rgba(204, 204, 255, 0.14); /* 은은한 경계선(머리글·바닥글·절 구분) */ --card-shadow: rgba(5, 5, 30, 0.6); --glow-edge: rgba(204, 204, 255, 0.9); --icon-tile: #1e1e4f; /* 마무리 밤 띠로 들어가는 지평선 색(본문 밤에서 바로 깊어진다) */ --horizon-1: #262661; --horizon-2: #222259; /* 밤하늘 고정 색(히어로·이야기 무대·감정 체험 하늘·마무리 띠). 값은 nightPalette(#292966 · #1E1E4F · #ECECFF · #CCCCFF)를 기준으로 더 깊은 단계만 더했다. */ --night-0: #0b0b28; --night-1: #14143d; --night-2: #1e1e4f; /* nightPalette.tabBarBackground */ --night-3: #292966; /* nightPalette.background */ --moon: #ececff; /* nightPalette.text */ --moon-2: #ccccff; /* nightPalette.accentText */ --night-soft: #c4c4ec; /* 밤하늘 위 보조 글자(인사가 놓이는 위·가운데 하늘에서 6:1 이상) */ --night-line: rgba(204, 204, 255, 0.2); /* 시스템 폴백만(처리방침처럼 내용을 미리 알 수 없는 글에 쓴다 — 자체 호스팅 글꼴은 실제로 쓰는 글자만 넣었으므로 임의의 긴 글에는 적용하지 않는다) */ --font-serif-system: 'AppleMyungjo', 'Nanum Myeongjo', Batang, BatangChe, serif; /* 자체 호스팅 브랜드 글꼴(영문 Cormorant Garamond Medium · 한글 Gowun Batang Regular) 우선, 이후 시스템 폴백. 한 문자열 안에 한글·영문이 섞여도 글자마다 맞는 쪽을 쓴다. */ --font-serif: 'Cormorant Garamond', 'Gowun Batang', var(--font-serif-system); --font-sans: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', Roboto, sans-serif; --max-width: 720px; --wide: 1160px; --gutter: max(20px, 5vw); --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { /* 큰 달무리·글로우가 가로 스크롤을 만들지 않게 한다(clip은 sticky를 깨지 않는다) */ overflow-x: clip; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* 한국어는 어절 단위로 줄을 바꾼다(단어 중간에서 끊기지 않게) */ :lang(ko) { word-break: keep-all; overflow-wrap: break-word; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); line-height: 1.7; font-size: 17px; -webkit-text-size-adjust: 100%; position: relative; overflow-x: clip; } img { max-width: 100%; display: block; } /* ── 본문 뒤 성긴 밤하늘(모든 페이지): 히어로부터 바닥까지 한 하늘로 이어 보이게 한다. 읽는 구간이므로 별을 성기게·흐리게 두고 반짝임 같은 움직임은 없다. 화면에 고정돼 글만 지나간다. z-index -1: 바탕색(body) 위, 모든 글·카드 아래. ── */ .sky-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; } .sky-backdrop .star-field { opacity: 0.6; } a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 0.18em; } a:hover { opacity: 0.85; } :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; } h1, h2, h3, .serif { font-family: var(--font-serif); /* Cormorant Garamond 기본 숫자는 높낮이가 다른 old-style(01이 "o ı"처럼 보임) — 가지런한 숫자로 */ font-variant-numeric: lining-nums; font-weight: 500; /* Cormorant Garamond Medium. Gowun Batang은 400만 번들했으므로 브라우저가 자동으로 400으로 맞춘다(짝 weight 없을 때의 표준 매칭) */ } h1, h2, h3 { line-height: 1.35; color: var(--color-text); } h1 { font-size: clamp(1.75rem, 5vw, 2.4rem); margin: 0 0 0.5em; } h2 { font-size: clamp(1.2rem, 3.5vw, 1.5rem); margin: 1.5em 0 0.6em; } h3 { font-size: clamp(1.05rem, 3vw, 1.2rem); margin: 1.2em 0 0.5em; } p { margin: 0 0 1em; max-width: 36em; } ul, ol { padding-left: 1.4em; max-width: 36em; } li { margin-bottom: 0.4em; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-surface); color: var(--color-text); padding: 0.6em 1em; z-index: 30; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; top: 0; } /* ── 언어 안내 배너(ko 페이지 전용, JS가 조건에 맞을 때만 보여준다) ── */ .lang-banner { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 0.6rem 1rem; font-size: 0.92rem; text-align: center; } .lang-banner[hidden] { display: none; } .lang-banner a { font-weight: 600; } .lang-banner-close { appearance: none; background: transparent; border: 1px solid var(--color-border); color: var(--color-subtle); border-radius: 999px; width: 1.75rem; height: 1.75rem; line-height: 1; cursor: pointer; font-size: 1rem; } .lang-banner-close:hover { color: var(--color-text); } .site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem var(--gutter); border-bottom: 1px solid var(--color-line); } .brand { display: inline-flex; align-items: center; } .brand-mark { height: 36px; width: auto; } .site-nav { display: flex; gap: 1.1rem; flex-wrap: wrap; } .site-nav a { text-decoration: none; font-weight: 600; } .site-nav a[aria-current='page'] { text-decoration: underline; } main { max-width: var(--max-width); margin: 0 auto; padding: 2rem var(--gutter) 4rem; position: relative; } .site-footer { border-top: 1px solid var(--color-line); padding: 1.5rem var(--gutter) 2rem; color: var(--color-subtle); font-size: 0.9rem; } .site-footer p { margin: 0.25em 0; max-width: none; } .site-footer a { color: var(--color-subtle); } .lang-switch { margin-top: 0.5em; } /* ════════════════════════════════════════════════════════════════════════ 소개(홈) 페이지 — 밤하늘 히어로 → 스크롤 이야기 → 감정 체험 → 기능 → 기기 안 → 약속 → 마무리 밤 띠. 페이지 전체가 하나의 밤하늘이다: 히어로·무대·체험 하늘·마무리 띠는 깊은 밤, 읽는 구간은 성긴 별 위의 본문 밤. ════════════════════════════════════════════════════════════════════════ */ .page-home main { max-width: none; padding: 0; } /* 홈에서는 머리글이 밤하늘 히어로 위에 투명하게 겹친다(top:auto라 언어 배너 바로 아래에 붙는다). */ .page-home .site-header { position: absolute; left: 0; right: 0; z-index: 20; border-bottom-color: rgba(204, 204, 255, 0.12); } .page-home .site-nav a { color: var(--moon); } .page-home .site-header :focus-visible, .page-home .lang-banner :focus-visible, .hero :focus-visible, .closing :focus-visible, .page-home .site-footer :focus-visible { outline-color: var(--moon-2); } .page-home .lang-banner { background: var(--night-0); color: var(--moon); border-bottom-color: rgba(204, 204, 255, 0.14); } .page-home .lang-banner a { color: var(--moon-2); } .page-home .lang-banner-close { border-color: rgba(204, 204, 255, 0.3); color: var(--night-soft); } .section-head { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); } .section-title { font-size: clamp(1.85rem, 4.2vw, 2.9rem); line-height: 1.28; letter-spacing: 0.02em; margin: 0 0 0.5em; } :lang(en) .section-title { letter-spacing: -0.005em; } /* Cormorant Garamond는 x높이가 작아 같은 크기의 한글 제목보다 작아 보인다 — 영어 제목만 조금 키운다 */ :root:lang(en) { --en-scale: 1.12; } /* ── 1) 히어로: 항상 밤 ── */ .hero { /* 기본(스크립트 없음) = 밤 하늘. 방문 시각 5구간은 아래 .sky-* 클래스가 색조만 살짝 바꾼다. */ --sky-top: #0a0a26; --sky-mid: #17174a; --sky-low: #232358; --sky-glow: rgba(204, 204, 255, 0.1); --sky-glow-at: 78% 105%; --fade-h: clamp(110px, 18svh, 200px); --header-space: 92px; position: relative; isolation: isolate; overflow: clip; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-space) + 3svh) 0 calc(var(--fade-h) + 2svh); color: var(--moon); background: radial-gradient(120% 70% at var(--sky-glow-at), var(--sky-glow), transparent 62%), linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 50%, var(--sky-low) 100%); } /* 시간대 5구간(app/src/i18n/today.ts 기준) — 같은 남보라 밤 안에서 색조만 바꾼다. */ .hero.sky-dawn { --sky-top: #060a24; --sky-mid: #111d50; --sky-low: #1b3168; --sky-glow: rgba(130, 175, 255, 0.16); --sky-glow-at: 30% 108%; } .hero.sky-morning { --sky-top: #0e163e; --sky-mid: #1c2c69; --sky-low: #243670; --sky-glow: rgba(170, 200, 255, 0.16); --sky-glow-at: 22% 110%; } .hero.sky-day { --sky-top: #13134a; --sky-mid: #23246b; --sky-low: #303175; --sky-glow: rgba(204, 204, 255, 0.14); --sky-glow-at: 50% 112%; } .hero.sky-evening { --sky-top: #110d34; --sky-mid: #271b5a; --sky-low: #3d2a66; --sky-glow: rgba(232, 150, 205, 0.2); --sky-glow-at: 18% 108%; } .hero.sky-night { --sky-top: #08081f; --sky-mid: #14143f; --sky-low: #21215a; --sky-glow: rgba(204, 204, 255, 0.09); --sky-glow-at: 80% 105%; } /* 히어로(밤) → 본문(OS 테마) 경계를 부드러운 그라데이션으로 잇는다 */ .hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--fade-h); background: linear-gradient(180deg, transparent 0%, var(--color-bg) 100%); z-index: 1; pointer-events: none; } .hero-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .star-field { position: absolute; inset: 0; width: 100%; height: 100%; fill: #f4f4ff; } .star-field .tw { opacity: var(--o); animation: twinkle var(--t) ease-in-out var(--d) infinite; } @keyframes twinkle { 0%, 100% { opacity: var(--o); } 50% { opacity: 0.08; } } /* 달빛 커서 글로우 — 히어로 안에서만(포인터 위치를 site.js가 transform으로 옮긴다) */ .hero-glow { position: absolute; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; background: radial-gradient( circle, rgba(204, 204, 255, 0.17) 0%, rgba(204, 204, 255, 0.06) 35%, transparent 64% ); opacity: 0; transition: opacity 0.6s ease; pointer-events: none; z-index: 1; will-change: transform; } .hero-glow.is-on { opacity: 1; } .hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); } .hero-copy > * { max-width: 34rem; } .eyebrow { display: inline-flex; align-items: center; gap: 0.75em; color: var(--moon-2); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.22em; margin: 0 0 1.4em; } :lang(en) .eyebrow { text-transform: uppercase; letter-spacing: 0.18em; } .eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.7; } .time-greeting { white-space: pre-line; font-family: var(--font-serif); color: var(--night-soft); font-size: 1.12rem; line-height: 1.75; letter-spacing: 0.02em; margin: 0 0 0.9em; } .hero-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(3.6rem, 10.5vw, 7.6rem); line-height: 1.04; letter-spacing: 0.1em; color: #f6f6ff; margin: 0.05em 0 0.32em; text-shadow: 0 0 48px rgba(204, 204, 255, 0.28); } :lang(en) .hero-title { font-weight: 500; letter-spacing: -0.01em; } .hero .lead { font-size: clamp(1.06rem, 1.6vw, 1.2rem); line-height: 1.8; color: #e4e4fa; margin: 0 0 1.8em; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.6rem; } .store-badge { display: inline-flex; align-items: center; gap: 0.6em; margin: 0; padding: 0.55em 1.15em; border: 1px solid rgba(204, 204, 255, 0.36); border-radius: 999px; background: rgba(204, 204, 255, 0.07); font-size: 0.92rem; color: var(--moon); } .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--moon-2); box-shadow: 0 0 10px 2px rgba(204, 204, 255, 0.6); flex: none; } .hero-more { display: inline-flex; align-items: center; gap: 0.45em; color: var(--moon); font-weight: 600; font-size: 0.98rem; text-decoration: none; padding: 0.4em 0.1em; border-bottom: 1px solid rgba(204, 204, 255, 0.45); } .hero-more:hover { opacity: 1; border-bottom-color: var(--moon); } .hero-more-arrow { display: inline-block; animation: nudge 2.4s ease-in-out infinite; } @keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* 큰 달 — 브랜드 심볼. 바깥(스크롤 시차) → 가운데(포인터 시차) → 안(첫 등장) 세 겹 */ .hero-moon { justify-self: center; width: clamp(220px, 42vmin, 460px); aspect-ratio: 1; position: relative; animation: moon-rise 1.6s var(--ease-out) both; } .hero-moon-scroll, .hero-moon-tilt { width: 100%; height: 100%; } .hero-moon-tilt { position: relative; transition: transform 0.9s var(--ease-out); } .brand-moon { position: relative; display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 28px rgba(204, 204, 255, 0.35)); } .moon-halo { position: absolute; inset: -58%; border-radius: 50%; background: radial-gradient( circle at 54% 54%, rgba(204, 204, 255, 0.3) 0%, rgba(204, 204, 255, 0.13) 22%, rgba(204, 204, 255, 0.05) 40%, transparent 62% ); animation: halo-breathe 7s ease-in-out infinite; pointer-events: none; } @keyframes halo-breathe { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.06); opacity: 1; } } @keyframes moon-rise { from { opacity: 0; transform: translateY(26px) scale(0.96); } } /* 첫 화면 글 차례로 등장(시간 기반, 한 번) */ .hero-copy > * { animation: rise-in 0.9s var(--ease-out) both; } .hero-copy > :nth-child(2) { animation-delay: 0.08s; } .hero-copy > :nth-child(3) { animation-delay: 0.16s; } .hero-copy > :nth-child(4) { animation-delay: 0.26s; } .hero-copy > :nth-child(5) { animation-delay: 0.36s; } @keyframes rise-in { from { opacity: 0; transform: translateY(18px); } } /* 화면 밖이면 장식 애니메이션을 멈춘다(site.js가 .is-paused를 붙인다) */ .is-paused .tw, .is-paused .moon-halo, .is-paused .hero-more-arrow { animation-play-state: paused; } /* ── 2) 스크롤 이야기: 달이 고정된 채 4단계 글이 차례로 ── */ .story { /* 단계 글 블록(.story-step-inner)이 화면을 지나는 구간(cover) 중 어디서 점이 켜질지 */ --rs: 30%; --re: 40%; --spread: 10%; position: relative; padding-top: clamp(72px, 12vh, 136px); } .story .section-head { text-align: center; } .story-body { max-width: var(--wide); /* 고정 무대(100svh 가운데 정렬) 위의 빈 공간만큼 제목 쪽으로 당긴다 */ margin: -10svh auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); } .story-stage-wrap { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; justify-content: center; } .story-stage { width: min(100%, 76svh, 560px); aspect-ratio: 1; border-radius: 36px; overflow: hidden; background: radial-gradient(circle at 50% 46%, #26265f 0%, #1a1a4c 42%, #0d0d2e 100%); box-shadow: 0 34px 80px -36px var(--card-shadow), inset 0 0 0 1px rgba(204, 204, 255, 0.1); } .story-stage-svg { display: block; width: 100%; height: 100%; } .stage-bg-stars { fill: #e6e6ff; } .stage-slots { fill: rgba(204, 204, 255, 0.2); } .stage-line { fill: none; stroke: rgba(204, 204, 255, 0.34); stroke-width: 0.9; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; } .moon-shadow { fill: #1c1c50; } .moon-rim { fill: none; stroke: rgba(204, 204, 255, 0.28); stroke-width: 1; } .ph { transform: translate(var(--px), var(--py)); } .sd { fill: #f4f4ff; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 3px rgba(204, 204, 255, 0.9)); } .sd-ring { fill: none; stroke: var(--moon-2); stroke-width: 1.1; opacity: 0.8; transform-box: fill-box; transform-origin: center; } .story-steps { list-style: none; margin: 0; padding: 16svh 0 34svh; max-width: none; } .story-step { min-height: 76svh; display: flex; align-items: center; margin: 0; } .story-step-inner { max-width: 30rem; } .story-num { display: block; font-size: 1.05rem; letter-spacing: 0.14em; color: var(--color-accent); margin-bottom: 0.9rem; } .story-step h3 { font-size: calc(clamp(1.55rem, 2.9vw, 2.15rem) * var(--en-scale, 1)); line-height: 1.38; letter-spacing: 0.01em; margin: 0 0 0.7em; } .story-step p { font-size: 1.07rem; line-height: 1.85; margin: 0; } /* ── 3) 감정 체험 ── */ .demo { padding: clamp(48px, 8vh, 96px) var(--gutter) clamp(72px, 12vh, 136px); } .emotion-demo { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); border-radius: 32px; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 30px 70px -44px var(--card-shadow); } .demo-copy { padding: clamp(28px, 4.6vw, 64px); } .demo-copy h2 { font-size: calc(clamp(1.7rem, 3.4vw, 2.4rem) * var(--en-scale, 1)); letter-spacing: 0.02em; margin: 0 0 0.55em; } .demo-copy > p { font-size: 1.05rem; margin-bottom: 1.6em; } .emotion-chip-row { display: flex; flex-wrap: wrap; gap: 0.65rem; margin: 0; } .emotion-chip { appearance: none; font: inherit; font-size: 1rem; min-height: 46px; padding: 0.55em 1.25em; border-radius: 999px; /* 기본: 카드(#34347a)보다 깊은 밤 바탕 + 달빛 테두리 → 어두운 배경에서도 칩 윤곽이 분명하다 */ border: 1px solid rgba(204, 204, 255, 0.34); background: var(--color-bg); color: var(--color-text); cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, translate 0.25s var(--ease-out); } /* hover: 한 단계 밝은 표면 + 달빛 테두리 */ .emotion-chip:hover { translate: 0 -2px; background: var(--color-surface-2); border-color: var(--color-accent); box-shadow: 0 8px 22px -14px var(--glow-edge); } /* 눌림: 더 깊은 밤으로 가라앉는다 */ .emotion-chip:active { translate: 0 0; background: var(--night-2); } /* 키보드 포커스: 칩과 같은 색 테두리와 겹치지 않도록 바깥에 밝은 고리 */ .emotion-chip:focus-visible { outline: 3px solid var(--moon); outline-offset: 3px; } /* 마지막으로 고른 칩: 달빛으로 채우고 글자는 깊은 밤(#1e1e4f, 10:1). 같은 칩을 여러 번 골라도 된다 */ .emotion-chip.is-latest { background: var(--color-accent); color: var(--night-2); border-color: var(--color-accent); box-shadow: 0 0 0 4px rgba(204, 204, 255, 0.22); } .emotion-chip.is-latest:hover { background: #dcdcff; border-color: #dcdcff; } .emotion-chip.is-latest:active { background: #bcbcf2; } .demo-copy .demo-note { margin: 1.3em 0 0; font-size: 0.86rem; line-height: 1.6; color: var(--color-subtle); } .demo-sky { position: relative; /* 자리 7개(위쪽 절반)와 1장째 카드(아래: 머리글·두 줄 한마디·질문 도움, 영어가 가장 김)가 겹치지 않는 최소 높이 */ min-height: 500px; background: radial-gradient(90% 70% at 72% 30%, rgba(204, 204, 255, 0.14), transparent 60%), linear-gradient(180deg, #14143d 0%, #1e1e4f 60%, #292966 100%); color: var(--moon); } .demo-sky-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .demo-stars { fill: #e6e6ff; } /* 빈 자리 7개(점선 고리): 점이 들어오면 사라진다 */ .demo-slot { fill: none; stroke: rgba(204, 204, 255, 0.42); stroke-width: 1; stroke-dasharray: 3 3; transition: opacity 0.4s ease; } .demo-link { stroke: rgba(204, 204, 255, 0.55); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; } .demo-ring { fill: none; stroke: var(--moon-2); stroke-width: 1.1; opacity: 0.85; transform-box: fill-box; transform-origin: center; } .demo-dot-core, .demo-dot-glow { transform-box: fill-box; transform-origin: center; } .demo-dot-core { fill: #f6f6ff; } .demo-dot-glow { fill: rgba(204, 204, 255, 0.26); } /* JS가 있으면(.is-live) 빈 하늘에서 시작: 점·선·고리는 .is-on일 때만 보인다. 기본 상태(JS 없음)는 완성된 별자리 — 글은 어차피 다 읽히고, 체험만 생략된다. */ .demo-sky.is-live .demo-dot, .demo-sky.is-live .demo-ring { opacity: 0; } .demo-sky.is-live .demo-link { stroke-dashoffset: 1; } .demo-sky.is-live .demo-dot.is-on { opacity: 1; } .demo-sky.is-live .demo-ring.is-on { opacity: 0.85; animation: ring-on 0.9s var(--ease-out) both; } .demo-sky.is-live .demo-link.is-on { stroke-dashoffset: 0; transition: stroke-dashoffset 0.5s ease 0.05s; } .demo-sky.is-live .demo-slot.is-on, .demo-sky:not(.is-live) .demo-slot { /* 점이 들어온 자리, 그리고 JS 없이 완성 별자리를 보일 때는 빈 자리 점선을 숨긴다 */ opacity: 0; } .demo-dot.just-landed .demo-dot-core { animation: today-pop 0.5s var(--ease-out); } .demo-dot.just-landed .demo-dot-glow { animation: today-ring 0.9s ease-out; } @keyframes today-pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } } @keyframes today-ring { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(1); opacity: 1; } } /* 칩에서 하늘로 날아가는 점(site.js가 만들고 Web Animations API로 transform만 움직인다) */ .fly-dot { position: fixed; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #f6f6ff; box-shadow: 0 0 0 2px rgba(92, 92, 153, 0.55), 0 0 18px 6px rgba(204, 204, 255, 0.6); pointer-events: none; z-index: 40; will-change: transform, opacity; } .emotion-result { position: absolute; left: 16px; right: 16px; bottom: 16px; } .emotion-card { display: flex; align-items: flex-start; gap: 0.9rem; padding: 1rem 1.1rem; border-radius: 18px; background: rgba(11, 11, 40, 0.82); border: 1px solid rgba(204, 204, 255, 0.24); color: var(--moon); } .emotion-card[hidden], .emotion-card-prompts[hidden], .emotion-reset[hidden], .emotion-dictionary { display: none; } /* 점이 도착할 때마다 카드가 다시 살짝 떠오른다(site.js가 .is-renew를 다시 붙인다) */ .emotion-card.is-renew { animation: card-in 0.45s var(--ease-out) both; } @keyframes card-in { from { opacity: 0; transform: translateY(10px); } } .emotion-card p { max-width: none; } .emotion-card-feeling { margin: 0; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; color: var(--moon-2); } .emotion-card-feeling:empty { display: none; } /* "기록 후 한마디" 머리글: 앱에서 실제로 보이는 한마디라는 표시 */ .emotion-card-kicker { margin: 0.55em 0 0; font-size: 0.74rem; letter-spacing: 0.06em; color: var(--moon-2); } .emotion-card-title { font-size: calc(1.15rem * var(--en-scale, 1)); line-height: 1.5; margin: 0.1em 0 0; color: #f6f6ff; } .emotion-card-body { margin: 0.3em 0 0; font-size: 0.92rem; line-height: 1.65; color: var(--night-soft); } /* 1장째: 앱의 "질문 도움" 세 가지 — 답하지 않아도 되는 보조 질문임을 보여 준다 */ .emotion-card-prompts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.45rem; margin: 0.75em 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--night-soft); } .emotion-prompts-label { letter-spacing: 0.04em; margin-right: 0.15rem; } .emotion-prompt { padding: 0.18em 0.7em; border: 1px solid rgba(204, 204, 255, 0.34); border-radius: 999px; color: var(--moon); } .emotion-prompts-hint { flex-basis: 100%; } /* 7장째: 새 별자리를 시작하는 버튼(어두운 유리 카드 위 보조 버튼) */ .emotion-reset { appearance: none; font: inherit; font-size: 0.88rem; margin-top: 0.8rem; padding: 0.45em 1.05em; border-radius: 999px; border: 1px solid rgba(204, 204, 255, 0.5); background: transparent; color: var(--moon); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .emotion-reset:hover { background: rgba(204, 204, 255, 0.14); border-color: var(--moon-2); } .emotion-reset:active { background: rgba(204, 204, 255, 0.24); } .emotion-reset:focus-visible { outline: 3px solid var(--moon); outline-offset: 3px; } .emotion-mark { flex: none; width: 30px; height: 30px; margin-top: 0.15rem; display: inline-block; } .emotion-mark svg { width: 100%; height: 100%; fill: var(--moon-2); } /* ── 4) 나머지 기능: 카드 그리드 ── */ .features { padding: clamp(24px, 4vh, 48px) 0 clamp(72px, 12vh, 136px); } .features .section-head { margin-bottom: clamp(20px, 3vh, 36px); } .feature-grid { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); } .feature-card { position: relative; padding: 30px 28px 32px; border-radius: 26px; background: var(--color-surface); border: 1px solid var(--color-border); transition: translate 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); } /* 테두리에 비치는 달빛 — 포인터 위치(--mx/--my, site.js)를 따라 테두리만 밝아진다 */ .feature-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: radial-gradient( 280px circle at var(--mx, 50%) var(--my, 0%), var(--glow-edge), transparent 68% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .feature-card:hover { translate: 0 -6px; box-shadow: 0 26px 50px -30px var(--card-shadow); } .feature-card:hover::before { opacity: 1; } .feature-card h3 { font-size: calc(clamp(1.2rem, 2vw, 1.35rem) * var(--en-scale, 1)); line-height: 1.45; margin: 1.1em 0 0.55em; } .feature-card p { margin: 0; color: var(--color-text); } .feature-icon { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: var(--icon-tile); color: var(--moon-2); box-shadow: inset 0 0 0 1px rgba(204, 204, 255, 0.14); } .phase-icon { width: 38px; height: 38px; } .phase-rim { fill: none; stroke: currentColor; stroke-opacity: 0.35; stroke-width: 1.2; } .phase-lit { fill: currentColor; } /* ── 5) 기록은 기기 안에 ── */ .device { padding: clamp(40px, 6vh, 72px) var(--gutter) clamp(72px, 12vh, 136px); } .device-inner { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 6vw, 88px); align-items: center; } .device-figure { color: var(--color-accent); } .device-art { display: block; width: min(100%, 340px); margin: 0 auto; } .device-orbit { fill: none; stroke: currentColor; stroke-opacity: 0.25; stroke-width: 1; stroke-dasharray: 2 6; } .device-orbit--inner { stroke-opacity: 0.18; stroke-dasharray: none; } .device-body { fill: var(--color-surface); stroke: currentColor; stroke-width: 1.6; } .device-detail { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-opacity: 0.5; } .device-moon { fill: currentColor; } .device-line { fill: none; stroke: currentColor; stroke-opacity: 0.45; stroke-width: 1; } .device-dot { fill: currentColor; } .device-copy p { font-size: 1.07rem; line-height: 1.85; } /* ── 오로시의 약속(항목 3개) ── */ .promises { padding: 0 var(--gutter) clamp(72px, 12vh, 136px); } .promises .section-head { text-align: center; margin-bottom: clamp(20px, 3vh, 36px); } .promise-list { list-style: none; max-width: 1060px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); } .promise { margin: 0; padding: clamp(26px, 3.2vw, 36px) clamp(22px, 2.6vw, 30px); border-radius: 26px; background: var(--color-surface); border: 1px solid var(--color-border); } .promise h3 { font-size: calc(clamp(1.25rem, 2.2vw, 1.5rem) * var(--en-scale, 1)); line-height: 1.4; margin: 0 0 0.55em; } .promise p { margin: 0; max-width: none; color: var(--color-text); } /* ── 6) 마무리 밤 띠 + 바닥 ── */ .closing { position: relative; isolation: isolate; overflow: clip; padding: clamp(150px, 24vh, 240px) var(--gutter) clamp(64px, 10vh, 104px); text-align: center; color: var(--moon); background: linear-gradient( 180deg, var(--color-bg) 0%, var(--horizon-1) 9%, var(--horizon-2) 17%, #1e1e4f 30%, #13133a 70%, var(--night-0) 100% ); } .closing-sky { position: absolute; inset: 26% 0 0; z-index: 0; pointer-events: none; } .closing-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } .closing-moon { position: relative; width: clamp(104px, 18vmin, 150px); aspect-ratio: 1; margin-bottom: 1.6rem; } .closing-title { font-size: clamp(2.4rem, 6vw, 3.6rem); letter-spacing: 0.1em; font-weight: 400; color: #f6f6ff; margin: 0 0 0.8em; } :lang(en) .closing-title { font-weight: 500; letter-spacing: -0.01em; } .closing .store-badge { margin-bottom: 1.6rem; } .closing p { max-width: none; } .closing-contact { margin: 0 0 0.4em; color: var(--night-soft); } .closing-link { margin: 0; } .closing a { color: var(--moon); } .closing .disclaimer { position: relative; z-index: 1; max-width: 44em; margin: clamp(44px, 8vh, 80px) auto 0; text-align: center; color: var(--night-soft); font-size: 0.9rem; line-height: 1.7; } .page-home .site-footer { background: var(--night-0); border-top-color: rgba(204, 204, 255, 0.12); color: var(--night-soft); } .page-home .site-footer a { color: var(--moon-2); } /* ════════════════════════════════════════════════════════════════════════ 스크롤 연동 연출 — CSS scroll-driven animations 우선. - 기본(스크립트·지원 없음) 상태는 "완성 화면": 점 50개·보름달·모든 글이 보인다. - 지원 브라우저: 아래 @supports 안의 규칙이 단계별 점·달 위상·글 등장을 스크롤에 묶는다. - 미지원 브라우저: site.js가 html.motion-fallback·.story--js를 붙이고 IntersectionObserver로 같은 단계를 클래스로 켠다(아래 "대체" 절). - prefers-reduced-motion: 둘 다 쓰지 않고 완성 화면 그대로. ════════════════════════════════════════════════════════════════════════ */ @keyframes ph-move { from { transform: translate(0, 0); } to { transform: translate(var(--px), var(--py)); } } @keyframes sd-on { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } } @keyframes ring-on { from { opacity: 0; transform: scale(2.2); } to { opacity: 0.8; transform: scale(1); } } @keyframes line-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes reveal-in { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } } @keyframes drift-down { to { transform: translateY(14%); } } @keyframes copy-out { to { transform: translateY(-48px); } } @supports (animation-timeline: view()) and (timeline-scope: --a) { @media (prefers-reduced-motion: no-preference) { :root:not(.motion-fallback) .story { timeline-scope: --s1, --s2, --s3, --s4; } :root:not(.motion-fallback) .story-step[data-step='1'] .story-step-inner { view-timeline-name: --s1; } :root:not(.motion-fallback) .story-step[data-step='2'] .story-step-inner { view-timeline-name: --s2; } :root:not(.motion-fallback) .story-step[data-step='3'] .story-step-inner { view-timeline-name: --s3; } :root:not(.motion-fallback) .story-step[data-step='4'] .story-step-inner { view-timeline-name: --s4; } /* 달 위상: 그림자 원을 감싼 네 겹이 단계마다 한 겹씩 밀려난다 */ :root:not(.motion-fallback) .ph { animation: ph-move linear both; animation-range: cover var(--rs) cover var(--re); } :root:not(.motion-fallback) .ph1 { animation-timeline: --s1; } :root:not(.motion-fallback) .ph2 { animation-timeline: --s2; } :root:not(.motion-fallback) .ph3 { animation-timeline: --s3; } :root:not(.motion-fallback) .ph4 { animation-timeline: --s4; } /* 점: 단계마다 그 단계 묶음이 차례로(--k) 켜진다 */ :root:not(.motion-fallback) .sd { animation: sd-on linear both; animation-range: cover calc(var(--rs) + var(--k) * var(--spread)) cover calc(var(--rs) + 4% + var(--k) * var(--spread)); } :root:not(.motion-fallback) .sd-ring { animation: ring-on linear both; animation-range: cover calc(var(--rs) + 3% + var(--k) * var(--spread)) cover calc(var(--re) + var(--k) * var(--spread)); } :root:not(.motion-fallback) .sd-g1 > * { animation-timeline: --s1; } :root:not(.motion-fallback) .sd-g2 > * { animation-timeline: --s2; } :root:not(.motion-fallback) .sd-g3 > * { animation-timeline: --s3; } :root:not(.motion-fallback) .sd-g4 > * { animation-timeline: --s4; } :root:not(.motion-fallback) .stage-line { animation: line-draw linear both; animation-timeline: --s4; animation-range: cover var(--rs) cover calc(var(--re) + var(--spread)); } /* 글·카드가 화면에 들어오며 부드럽게 나타난다 */ :root:not(.motion-fallback) .reveal { animation: reveal-in linear both; animation-timeline: view(); /* 길이 기준: 키 큰 카드도 위쪽 220px가 들어오면 다 보인다(읽는 동안 흐리지 않게) */ animation-range: entry calc(var(--i, 0) * 48px) entry calc(220px + var(--i, 0) * 48px); } /* 히어로: 화면을 벗어날 때 달은 천천히 내려가고 글은 조금 더 빨리 올라간다(시차, 투명도는 그대로) */ :root:not(.motion-fallback) .hero-moon-scroll { animation: drift-down linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; } :root:not(.motion-fallback) .hero-copy { animation: copy-out linear both; animation-timeline: view(); animation-range: exit 15% exit 85%; } } } /* ── 대체: scroll-driven animations 미지원 브라우저(site.js가 클래스를 붙일 때만) ── */ /* 페이지를 연 뒤 reduced-motion을 켜도 완성 상태로 돌아가도록 no-preference 안에만 둔다. */ @media (prefers-reduced-motion: no-preference) { .motion-fallback .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.8s ease, transform 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); } .motion-fallback .reveal.is-visible { opacity: 1; transform: none; } .story--js .ph { transform: translate(0, 0); transition: transform 1s var(--ease-out); } .story--js.is-s1 .ph1, .story--js.is-s2 .ph2, .story--js.is-s3 .ph3, .story--js.is-s4 .ph4 { transform: translate(var(--px), var(--py)); } .story--js .sd, .story--js .sd-ring { opacity: 0; transform: scale(0.2); transition: opacity 0.5s ease, transform 0.6s var(--ease-out); transition-delay: calc(var(--k) * 900ms); } .story--js .sd-ring { transform: scale(2.2); } .story--js.is-s1 .sd-g1 .sd, .story--js.is-s2 .sd-g2 .sd, .story--js.is-s3 .sd-g3 .sd, .story--js.is-s4 .sd-g4 .sd { opacity: 1; transform: none; } .story--js.is-s3 .sd-g3 .sd-ring, .story--js.is-s4 .sd-g4 .sd-ring { opacity: 0.8; transform: none; } .story--js .stage-line { stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s ease 0.3s; } .story--js.is-s4 .stage-line { stroke-dashoffset: 0; } } /* ── 지원·FAQ ── */ .page-intro { padding-bottom: 0.5rem; } .page-intro p { font-size: 1.05rem; } .faq details { border: 1px solid var(--color-border); border-radius: 14px; padding: 0.95rem 1.2rem; margin-bottom: 0.85rem; background: var(--color-surface); transition: border-color 0.2s ease, background 0.2s ease; } .faq details[open] { border-color: rgba(204, 204, 255, 0.42); } .faq summary { cursor: pointer; font-weight: 500; font-family: var(--font-serif); font-size: 1.12rem; line-height: 1.5; color: var(--color-text); } .faq summary:hover { color: var(--color-accent); } .faq summary::marker { color: var(--color-accent); } .faq details p { margin-top: 0.85em; margin-bottom: 0; max-width: none; line-height: 1.8; } /* ── 개인정보처리방침(마크다운 변환 결과·영어 placeholder 공통) ── 원문을 빌드 시점에 알 수 없으므로(특히 아직 없는 영어본) 시스템 폴백 글꼴만 쓴다. */ .privacy-doc { overflow-wrap: break-word; line-height: 1.8; } .privacy-doc h1 { margin-bottom: 0.7em; } .privacy-doc h2 { margin: 2.2em 0 0.7em; padding-top: 1.1em; border-top: 1px solid var(--color-line); } .privacy-doc h3 { margin: 1.7em 0 0.55em; } .privacy-doc h4, .privacy-doc h5, .privacy-doc h6 { margin: 1.4em 0 0.5em; } .privacy-doc ul, .privacy-doc ol { margin: 0 0 1.2em; } .privacy-doc li { margin-bottom: 0.45em; } .privacy-doc li::marker { color: var(--color-accent); } .privacy-doc h1, .privacy-doc h2, .privacy-doc h3, .privacy-doc h4, .privacy-doc h5, .privacy-doc h6 { font-family: var(--font-serif-system); } .privacy-doc p, .privacy-doc ul, .privacy-doc ol { max-width: none; } .table-scroll { overflow-x: auto; max-width: 100%; margin: 1em 0 1.5em; } .privacy-doc table { border-collapse: collapse; min-width: 100%; font-size: 0.95rem; line-height: 1.6; } .privacy-doc th, .privacy-doc td { border: 1px solid var(--color-border); padding: 0.6em 0.75em; text-align: left; vertical-align: top; } .privacy-doc th { background: var(--color-surface-2); font-weight: 600; } .privacy-doc tbody tr:nth-child(even) td { background: rgba(204, 204, 255, 0.04); } .privacy-placeholder { padding: 1rem 1.1rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); } .sample-banner { background: var(--color-surface); border: 2px solid var(--color-accent); color: var(--color-text); font-size: 1.1rem; padding: 1rem 1.25rem; border-radius: 10px; margin-bottom: 1.5rem; } /* ════════════════════ 반응형 ════════════════════ */ @media (max-width: 960px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .hero { --header-space: 116px; justify-content: flex-start; } .hero-inner { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 8px; } .hero-moon { order: -1; width: clamp(160px, 44vmin, 280px); margin-bottom: 12px; } .hero-copy > * { margin-left: auto; margin-right: auto; } .hero-actions { justify-content: center; } /* 모바일: 무대는 위쪽에 고정, 글은 그 아래로 지나간다(불투명 배경이라 겹쳐 보이지 않는다) */ .story { --rs: 8%; --re: 17%; --spread: 9%; } .story-body { display: block; margin-top: 0; padding: 0; } .story-stage-wrap { z-index: 3; height: auto; padding: 10px var(--gutter) 0; background: var(--color-bg); } .story-stage-wrap::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 28px; background: linear-gradient(180deg, var(--color-bg), transparent); pointer-events: none; } .story-stage { width: 100%; height: 38svh; aspect-ratio: auto; border-radius: 26px; box-shadow: 0 18px 40px -30px var(--card-shadow), inset 0 0 0 1px rgba(204, 204, 255, 0.1); } .story-steps { padding: 2svh var(--gutter) 24svh; } .story-step { min-height: 62svh; align-items: flex-start; padding-top: 9svh; } .emotion-demo { grid-template-columns: minmax(0, 1fr); } .demo-sky { /* 자리 7개 + 1장째 카드(감정별 한 줄·장수별 한 줄·질문 도움, 영어는 더 김)가 겹치지 않는 높이 */ min-height: 520px; } .device-inner { grid-template-columns: minmax(0, 1fr); } .device-art { width: min(70%, 260px); } .promise-list { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .feature-grid { grid-template-columns: minmax(0, 1fr); } .emotion-chip { font-size: 0.98rem; padding: 0.5em 1.05em; } } @media (max-width: 480px) { .site-header { padding: 1rem; } main { padding-top: 1.5rem; } .page-home main { padding-top: 0; } } /* ── 모든 움직임 끄기: 정적 완성 화면 ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } .hero-glow, .fly-dot { display: none; } }