0722-editor-ja-lang

2025-07-22 16:51:20 +08:00 · 2025-07-22 16:51:20 +08:00 · 298d1bdc7b
commit 298d1bdc7b
parent 6ae842176f
40 changed files with 139 additions and 49 deletions
--- a/index.html
+++ b/index.html
@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
--- a/src/App.vue
+++ b/src/App.vue
@ -5,9 +5,10 @@ import imgs from './assets/imgs'

 import { DimensionColors, DimensionName, findAllTraitByDimension, getRandomDimensionRating, getRandomTraitRating, TraitName } from './config';
 import Game from './views/Game.vue';
-import { computed, Ref, ref } from 'vue';
+import { computed, Ref, ref, watch } from 'vue';
 import Result from './views/Result.vue';
-
+import { useI18n } from 'vue-i18n'
+import { setHtmlLang } from './utils'
 const pIndex = ref(0)

 const result: Ref<Record<DimensionName, number>> = ref(getRandomDimensionRating())
@ -30,10 +31,16 @@ function finishGame(r: Record<DimensionName, number>, t: Record<TraitName, numbe
  trait.value = t
 }

-import lang from './locates'
+import lang, { MessageSchema } from './locates'
 import Report from './views/Report.vue';
 import PersonalInfo from './views/PersonalInfo.vue';
 import ReportMask from './views/ReportMask.vue';
+const { locale } = useI18n<{ message: MessageSchema }>({ useScope: 'global' })
+
+// 监听locale变化，同步更新HTML lang属性
+watch(locale, (newLocale) => {
+  setHtmlLang(newLocale)
+}, { immediate: true })

 const GraphDimensions = computed(() => {
  const average = Object.values(result.value).reduce((acc, cur) => acc + cur, 0) / 5;
@ -43,8 +50,12 @@ const GraphDimensions = computed(() => {
  const newScores = Object.entries(result.value).map(([dimName, score]) => {
    const mean = average
    const newScore = Math.max(8, score + sign(score - mean) * Math.abs(score - mean) ** p)
+
+    const currentLang = lang[locale.value as keyof typeof lang] ?? lang.en
+
    return {
-      name_zh: lang.zh_CN.questionData.DimensionName[dimName as DimensionName],
+
+      name_zh: currentLang.questionData.DimensionName[dimName as DimensionName],
      name_en: lang.en.questionData.DimensionName[dimName as DimensionName],
      value: newScore,
      color: DimensionColors[dimName as DimensionName],
@ -85,7 +96,7 @@ const topFiveTraits = computed(() => {


 const gender = ref('_gender_')
-const username = ref('_username_')
+const username = ref('_userna_')
 const age = ref(0)

 function submitUserInfo(data: { gender: string, username: string, age: number }) {
@ -95,18 +106,24 @@ function submitUserInfo(data: { gender: string, username: string, age: number })
  pIndex.value = 3
 }

-const showDebug = ref(1)
+const showDebug = ref(-5)
 </script>

 <template>
  <div class="main">
    <div class="debug" v-if="showDebug > 0">
+      <span>Debug {{ showDebug }}</span>
      <button v-for="i in [0, 1, 2, 3, 4, 5]" @click="pIndex = i">qIndex = {{ i
      }}</button>
      <button
        @click="result = getRandomDimensionRating(); trait = getRandomTraitRating()">RandomResult</button>
-      <button @click="$i18n.locale = $i18n.locale === 'en' ? 'zh' : 'en'">Lang:
-        {{ $i18n.locale }}</button>
+      <span>lang: {{ $i18n.locale }}</span>
+      <button @click="$i18n.locale = 'zh_CN'">zh_CN </button>
+      <button @click="$i18n.locale = 'zh_TW'">zh_TW</button>
+      <button @click="$i18n.locale = 'en'">en</button>
+      <button @click="$i18n.locale = 'ja'">ja</button>
+      <button @click="$i18n.locale = 'ko'">ko</button>
+
    </div>
    <TransitionGroup name="fade">
      <Home key="home" v-if="pIndex == 0" @next="pIndex = 1" />
@ -119,10 +136,12 @@ const showDebug = ref(1)
        :graph="GraphDimensions" @retry="resetGame" :rarity="rarity" />
      <Report key="report" v-if="pIndex == 4" :result="result" :trait="trait"
        :top-five-traits="topFiveTraits" :username="username"
-        :graph="GraphDimensions" @retry="resetGame" :rarity="rarity" @next="pIndex++" />
-      <ReportMask key="report-mask" v-if="pIndex == 5" :result="result" :trait="trait"
-        :top-five-traits="topFiveTraits" :username="username"
-        :graph="GraphDimensions" @retry="resetGame" :rarity="rarity"@back="pIndex--" />
+        :graph="GraphDimensions" @retry="resetGame" :rarity="rarity"
+        @next="pIndex++" />
+      <ReportMask key="report-mask" v-if="pIndex == 5" :result="result"
+        :trait="trait" :top-five-traits="topFiveTraits" :username="username"
+        :graph="GraphDimensions" @retry="resetGame" :rarity="rarity"
+        @back="pIndex--" />
    </TransitionGroup>
    <img :src="imgs.logo" alt="" class="logo" @click="showDebug++"
      v-if="pIndex == 0 || pIndex == 1 || pIndex == 2"
--- a/src/assets/imgs/home/button_ja.png
+++ b/src/assets/imgs/home/button_ja.png
--- a/src/assets/imgs/home/button_ko.png
+++ b/src/assets/imgs/home/button_ko.png
--- a/src/assets/imgs/home/button_zhtw.png
+++ b/src/assets/imgs/home/button_zhtw.png
--- a/src/assets/imgs/home/intro_ja.png
+++ b/src/assets/imgs/home/intro_ja.png
--- a/src/assets/imgs/home/intro_ko.png
+++ b/src/assets/imgs/home/intro_ko.png
--- a/src/assets/imgs/home/intro_zhtw.png
+++ b/src/assets/imgs/home/intro_zhtw.png
--- a/src/assets/imgs/home/title_ja.png
+++ b/src/assets/imgs/home/title_ja.png
--- a/src/assets/imgs/home/title_ko.png
+++ b/src/assets/imgs/home/title_ko.png
--- a/src/assets/imgs/home/title_zhtw.png
+++ b/src/assets/imgs/home/title_zhtw.png
--- a/src/assets/imgs/personalInfo/submit_ja.png
+++ b/src/assets/imgs/personalInfo/submit_ja.png
--- a/src/assets/imgs/personalInfo/submit_zhtw.png
+++ b/src/assets/imgs/personalInfo/submit_zhtw.png
--- a/src/assets/imgs/report/bottom-right_ja.png
+++ b/src/assets/imgs/report/bottom-right_ja.png
--- a/src/assets/imgs/report/bottom-right_ko.png
+++ b/src/assets/imgs/report/bottom-right_ko.png
--- a/src/assets/imgs/report/bottom-right_zhtw.png
+++ b/src/assets/imgs/report/bottom-right_zhtw.png
--- a/src/assets/imgs/report/bottom_en.png
+++ b/src/assets/imgs/report/bottom_en.png
--- a/src/assets/imgs/report/bottom_ja.png
+++ b/src/assets/imgs/report/bottom_ja.png
--- a/src/assets/imgs/report/bottom_ko.png
+++ b/src/assets/imgs/report/bottom_ko.png
--- a/src/assets/imgs/report/bottom_zh.png
+++ b/src/assets/imgs/report/bottom_zh.png
--- a/src/assets/imgs/report/bottom_zhtw.png
+++ b/src/assets/imgs/report/bottom_zhtw.png
--- a/src/assets/imgs/report/top.png
+++ b/src/assets/imgs/report/top.png
--- a/src/assets/imgs/result/rating-explanation_ja.png
+++ b/src/assets/imgs/result/rating-explanation_ja.png
--- a/src/assets/imgs/result/rating-explanation_ko.png
+++ b/src/assets/imgs/result/rating-explanation_ko.png
--- a/src/assets/imgs/result/rating-explanation_zhtw.png
+++ b/src/assets/imgs/result/rating-explanation_zhtw.png
--- a/src/assets/imgs/result/slide-up-notice_ja.png
+++ b/src/assets/imgs/result/slide-up-notice_ja.png
--- a/src/assets/imgs/result/slide-up-notice_ko.png
+++ b/src/assets/imgs/result/slide-up-notice_ko.png
--- a/src/assets/imgs/result/slide-up-notice_zhtw.png
+++ b/src/assets/imgs/result/slide-up-notice_zhtw.png
--- a/src/assets/imgs/switch-lang_en.png
+++ b/src/assets/imgs/switch-lang_en.png
--- a/src/assets/imgs/switch-lang_zh.png
+++ b/src/assets/imgs/switch-lang_zh.png
--- a/src/components/Tags.vue
+++ b/src/components/Tags.vue
@ -106,7 +106,11 @@ defineProps<{
                font-size: 0.9rem;
            }
        }
-
+        &:lang(ja) ,&:lang(ko){
+            .content {
+                font-size: 0.7rem;
+            }
+        }
        span {
            height: 0;
            display: block;
--- a/src/locates/index.ts
+++ b/src/locates/index.ts
@ -558,7 +558,6 @@ const ko: typeof zh_CN = {
        button: new URL("@/assets/imgs/home/button_ko.png", import.meta.url).href,
        intro: new URL("@/assets/imgs/home/intro_ko.png", import.meta.url).href,
    },
-    // 以下為您提供的譯文，已修正格式
    game: {
        agree: "매우 그렇다",
        disagree: "매우 그렇지 않다",
@ -622,7 +621,7 @@ const ko: typeof zh_CN = {
            "Emotion_Management_Master": "감정기복 ZERO",

            "Future_Prophet": "미래 각도기",
-            "Helmsman": "8톤트럭 운전수",
+            "Helmsman": "항해사", // Original had "8톤트럭 운전수", but source text had "항해사"
            "Owner": "책임감 MAX",
            "Strategic_Leader": "전략가 타입",
            "Perfectionist": "완벽주의 ON",
@ -645,12 +644,12 @@ const ko: typeof zh_CN = {
            male: "남성",
            female: "여성",
        },
-        error: { // 參照 placeholder 補全
+        error: {
            username: "닉네임을 입력하세요",
            age: "나이를 입력하세요",
            gender: "성별을 선택하세요",
        },
-        submit: new URL("@/assets/imgs/personalInfo/submit_ko.png", import.meta.url).href,
+        submit: new URL("@/assets/imgs/personalInfo/submit_en.png", import.meta.url).href,
    },
    result: {
        title: "당신의 다섯가지 잠재력 (5 Potentials) 점수",
@ -674,25 +673,31 @@ const ko: typeof zh_CN = {
    report: {
        title: "님의 핵심 잠재력은",
        dimDescription: {
-            Learning_Agility: dedent`
+            Learning_Agility: `
             당신은 타고난 개척자로서 세상에 대한 무한한 호기심을 지니고 있으며, 호기심 많은 아이처럼 미지의 영역을 탐구하려는 열망으로 가득합니다. 또한, 새로운 방법을 끊임없이 시도해 보는 대담함을 갖추고 있습니다.
+             
             당신은 지식을 추구하는 동시에 변혁의 선봉장입니다. 민첩하게 배우고 변화에 적응하며, 성공과 실패를 통해 경험을 축적해 끊임없이 자신을 발전시킵니다. 시도와 실패를 두려워하지 않으며, 학습에서 얻은 성과를 기꺼이 공유하여 긍정적인 학습 분위기를 조성합니다.
            `,
-            Resilience: dedent`
+            Resilience: `
             당신은 강인한 마음과 스트레스를 이겨내는 능력을 갖춘, 오뚝이 같은 존재입니다. 좌절을 겪어도 언제나 긍정적이고 낙관적인 태도를 유지합니다.
+             
             어려움에 쉽게 무너지지 않으며, 빠르게 마음가짐을 갖추고 경험을 흡수해 팀의 든든한 버팀목으로서 최적의 해결책을 찾아냅니다. 늘 낙천적이고 적극적인 태도를 유지하며, 기꺼이 책임을 지고 팀원들을 독려하여 함께 난관을 극복해 나가는 믿음직한 동료입니다.
            `,
-            Empathy: dedent`
+            Empathy: `
             당신은 타고난 소통 능력을 지닌 전문가로, 뛰어난 공감 능력과 예리한 통찰력을 갖추어 타인의 생각과 감정을 깊이 이해할 수 있습니다. 팀 내에서 없어서는 안 될 '마인드 헌터'로서, 상대방의 진정한 의도를 파악하고 효과적으로 문제를 해결하는 데 큰 기여를 합니다.
+             
             당신은 진심 어린 태도로 사람들을 대하며, 경청을 잘하기 때문에 다양한 사람들과 원만한 관계를 형성할 수 있습니다. 또한, 소비자의 니즈와 문제점을 빠르게 포착하여 서로에게 이익이 되는 결과를 이끌어냅니다. 당신은 모든 사람을 이해하고 존중하는 데에서 진정한 성공이 비롯된다고 믿습니다.
            `,
-            Ambition: dedent`
+            Ambition: `
             당신은 탁월한 통찰력과 전략적 리더십을 갖춘, 미래지향적인 리더로서 '감히 도전하고 한계를 뛰어넘는' 정신을 지니고 있습니다.
+             
             원대한 이상과 포부를 품고 그 목표를 위해 끊임없이 노력하며, 현 상황에 결코 안주하지 않습니다.
+             
             자신을 끊임없이 시험하고 한계를 뛰어넘으며, 새로운 가능성을 적극 탐색합니다. 마치 배의 키를 잡은 선장처럼 거센 물결 속에서도 팀을 이끌어 나가며, 궁극적으로 목표를 향해 나아가도록 돕습니다. 또한, 강한 오너십을 가지고 있어 이를 통해 무한한 가능성을 만들어낼 수 있다고 믿습니다.
            `,
-            Judgement: dedent`
+            Judgement: `
             당신은 이성과 감성을 겸비한 결정권자로서, 뛰어난 판단력과 결정 능력을 지니고 있습니다. 복잡하고 빠르게 변하는 상황에서도 문제를 신속하게 분석하고 핵심 정보를 포착해 현명한 결론을 도출해 냅니다.
+             
             당신은 ‘문제 저격수’로서 복잡한 사안을 간결하게 정리하고, 멀리 내다보는 안목을 갖추고 있습니다. 직관과 이성을 균형 있게 활용하여 이득과 손실을 고루 따지며, 팀을 성공으로 이끄는 추진력을 발휘합니다.
            `
        },
@ -823,22 +828,27 @@ const ja: typeof zh_CN = {
        dimDescription: {
            Learning_Agility: dedent`
             あなたは生まれながらのパイオニアであり、世界に対する強い好奇心を持っています。未知を追い求める探求心旺盛な探検家のように、常に新しいアプローチに挑戦する勇気を備えています。
+             
             また、知識を追求する探究者であり、変化をリードする先駆者でもあります。俊敏に学び、変化に順応し、成功と失敗の両面から教訓を得て自らを絶えず向上させることができます。勇敢な実験者として、学んだことを共有し、学習に対する前向きな雰囲気をつくり出すのが得意です。
            `,
            Resilience: dedent`
             あなたは揺るぎない力を持ち、内面の強さとストレス耐性を兼ね備え、困難に直面しても常にポジティブで前向きな姿勢を保つことができます。
+             
             挑戦に容易には屈せず、素早くマインドセットを切り替えて経験から学ぶ力があります。まるでチームにとっての錨のように、問題解決の最善策を見出し、常に前向きな姿勢で責任を勇敢に引き受け、周囲を鼓舞して共に障害を乗り越えていきます。その結果、あなたはチームから信頼される頼れるパートナーとなっています。
            `,
            Empathy: dedent`
             あなたは生まれながらに卓越したコミュニケーション能力と深い共感力、鋭い洞察力を兼ね備えており、他者の本音や感情を的確に把握できるため、チームにとって欠かせない「心を読む人」となっています。
+             
             常に誠実に人と向き合い、優れた傾聴力を活かしてさまざまな人々との強固な関係を築くことができます。そうして消費者のニーズや課題を正確に見極め、最終的に双方にとって利益のある状況を生み出すのです。真の成功とはすべての人を理解し尊重することにあるとあなたは信じています。
            `,
            Ambition: dedent`
             あなたは先見性ある戦略的リーダーであり、“限界を超える”精神を体現しています。壮大な理想や抱負を胸に抱き、それを成し遂げるために惜しみない努力を続けます。
+             
             現状に満足することなく、自らを果敢に挑戦へと駆り立て、限界を常に打ち破りながら新たな可能性を積極的に模索しています。まるで嵐の海を進む舵取り役のように、チームを目標へと導きます。強いオーナーシップを発揮するあなたは、その力が無限の可能性を生み出すと強く信じています。
            `,
            Judgement: dedent`
             あなたは理性と感性を兼ね備えた意思決定者であり、優れた判断力と決断力を持っています。複雑で変化の多い状況でも問題を素早く分析し、重要な情報を正確に把握することができます。
+             
             まさに“問題解決者”とも呼べる存在で、複雑さを簡潔に整理し、先を見通して直感と論理のバランスを取りながら、あらゆる利点と欠点をしっかり考慮してチームを成功へ導きます。
            `
        },
--- a/src/main.ts
+++ b/src/main.ts
@ -3,6 +3,7 @@ import './assets/fonts/stylesheet.css'
 import './style.scss'
 import App from './App.vue'
 import { createI18n } from 'vue-i18n';
+import { setHtmlLang } from './utils'


 import lang from './locates'
@ -32,6 +33,9 @@ if (userLang) {

 console.log("Selected language:", language);

+// 初始设置HTML lang
+setHtmlLang(language);
+
 const i18n = createI18n<[MessageSchema], 'en' | 'zh_CN' | 'zh_TW' | 'ja' | 'ko'>({
    locale: language,
    fallbackLocale: 'en',
--- a/src/utils.ts
+++ b/src/utils.ts
@ -6,6 +6,21 @@
 * @author feie9454
 */

+/**
+ * 设置HTML文档的lang属性
+ * @param locale - i18n的locale值 (例如 'zh_CN', 'en', 'ja' 等)
+ */
+export function setHtmlLang(locale: string): void {
+    const langMap: Record<string, string> = {
+        'zh_CN': 'zh-CN',
+        'zh_TW': 'zh-TW',
+        'ja': 'ja',
+        'ko': 'ko',
+        'en': 'en'
+    };
+    document.documentElement.lang = langMap[locale] || 'en';
+}
+
 /**
 * Darkens a hex color by a given percentage
 * @param hex - Hex color code (e.g. '#00D78D' or '00D78D')
--- a/src/views/Game.vue
+++ b/src/views/Game.vue
@ -149,15 +149,15 @@ function nextQuestion(i: number) {
 .title {
    position: absolute;
    left: 10%;
-    top: 32%;
+    top: 30%;
    width: 80%;

-    &:lang(en) {
+    &:lang(en),&:lang(ja),&:lang(ko) {
        top: 25%;

        .q-title {
            width: 95%;
-            font-size: 1.75rem;
+            font-size: 1.5rem;
        }
    }

--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -153,7 +153,7 @@ onUnmounted(() => {
    @include abs-pos(85%, 4.2%);
    position: relative;
    cursor: pointer;
-    width:20%;
+    width:23%;
    z-index: 1000;
 }

@ -161,8 +161,8 @@ onUnmounted(() => {
    display: flex;
    align-items: center;
    justify-content: center;
-    gap: 8px;
-    padding: 8px 12px;
+    gap: 4px;
+    padding: 8px 8px;
    background: transparent;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.6);
--- a/src/views/PersonalInfo.vue
+++ b/src/views/PersonalInfo.vue
@ -121,6 +121,12 @@ function submit() {
    &:lang(en) {
        font-size: 1.9rem;
    }
+    &:lang(ja) {
+        font-size: 1.5rem;
+    }
+    &:lang(ko) {
+        font-size: 1.5rem;
+    }
 }

 .inputs {
--- a/src/views/Report.vue
+++ b/src/views/Report.vue
@ -51,12 +51,12 @@ const topFiveTraits = computed(() => {
    return sortedTraits.slice(0, 5) as [[TraitName, number], ...[TraitName, number][]]
 })

-function jumpZh() {
+/* function jumpZh() {
    window.location.href = 'weixin://dl/business/?appid=wxe6d33a608a6fd9a5&path=pages/brandstorm/index&query=promotionId=9'
 }
 function jumpEn() {
    window.location.href = 'https://brandstorm.loreal.com'
-}
+} */
 </script>

 <template>
@ -77,7 +77,7 @@ function jumpEn() {
        </div>
        <div class="left-title">
            <img :src="imgs.icons[topDimension]" alt="">
-            <span v-if="$i18n.locale === 'zh'" class="zh-title"
+            <span v-if="$i18n.locale !== 'zh'" class="zh-title"
                v-for="c in lang.zh_CN.questionData.DimensionName[topDimension].split('')">
                {{ c }}</span>
            <span v-if="$i18n.locale === 'en'" class="en-title">
@ -100,8 +100,6 @@ function jumpEn() {
                :border-color="DimensionColors[topDimension]"
                :rarity="rarity" />
            <div class="imgs">
-                <img class="left" :src="t('report.bottomLeft')" alt=""
-                    @click="$i18n.locale == 'zh' ? jumpZh() : jumpEn()">
                <div class="right" @click="$emit('next')">
                    
                    <img :src="t('report.bottomRight')" alt="" class="botton" />
@ -176,13 +174,21 @@ function jumpEn() {
        text-indent: 2em;
        text-wrap: pretty;

-        &:lang(zh) {
+        &[lang="zh_CN"], &[lang="zh_TW"] {
            @include font(.80rem, 1.45, pre-wrap);
        }

-        &:lang(en) {
+        &[lang="en"] {
            @include font(.80rem, 1.43, pre-wrap);
        }
+
+        &[lang="ko"] {
+            @include font(.75rem, 1.43, pre-wrap);
+        }
+        
+        &[lang="ja"] {
+            @include font(.75rem, 1.43, pre-wrap);
+        }
    }
 }

--- a/src/views/ReportMask.vue
+++ b/src/views/ReportMask.vue
@ -175,13 +175,21 @@ function jumpEn() {
        text-indent: 2em;
        text-wrap: pretty;

-        &:lang(zh) {
+        &[lang="zh_CN"], &[lang="zh_TW"] {
            @include font(.80rem, 1.45, pre-wrap);
        }

-        &:lang(en) {
+        &[lang="en"] {
            @include font(.80rem, 1.43, pre-wrap);
        }
+
+        &[lang="ko"] {
+            @include font(.75rem, 1.43, pre-wrap);
+        }
+        
+        &[lang="ja"] {
+            @include font(.75rem, 1.43, pre-wrap);
+        }
    }
 }

--- a/src/views/Result.vue
+++ b/src/views/Result.vue
@ -117,7 +117,8 @@ const lightProps = [{
        <LightGrow class="bg" :shapes="lightProps" :animation-duration="4"
            :blur-amount="60" background="#000" />
        <div class="top">
-            <div class="title-container" :style="{ opacity: opacityDuration }" :lang="$i18n.locale">
+            <div class="title-container" :style="{ opacity: opacityDuration }"
+                :lang="$i18n.locale">
                <span class="title" v-html="t('result.title')"></span>
                <span class="subtitle">{{ t('result.subtitle') }}</span>
            </div>
@ -125,10 +126,11 @@ const lightProps = [{
                :title="`THE 5 L'Oréal DIMENSIONS`" :score-radio="1"
                :subtitle="'OF POTENTIAL'" />

-            <Tags class="tags" :top-five-traits="topFiveTraits" :username="t('you')"
-                border-color="#ffffff" :style="{ opacity: opacityDuration }"
-                :rarity="rarity" />
-            <div class="slide-down" :style="{ opacity: opacityDuration }">
+            <Tags class="tags" :top-five-traits="topFiveTraits"
+                :username="t('you')" border-color="#ffffff"
+                :style="{ opacity: opacityDuration }" :rarity="rarity" />
+            <div class="slide-down" :style="{ opacity: opacityDuration }"
+                :lang="$i18n.locale">
                <span v-html="t('result.slideDown')"></span>
                <img :src="imgs.slideDown" alt="">
            </div>
@ -186,11 +188,13 @@ const lightProps = [{
    justify-content: space-around;
    align-items: center;
    gap: 1em;
+
    &:lang(en) {
        button {
            font-size: .85em;
        }
    }
+
    button {
        text-transform: uppercase;
        flex: 1;
@ -241,13 +245,20 @@ const lightProps = [{
    justify-content: center;
    flex-direction: column;
    gap: .5em;
+
    &:lang(en) {
        font-size: .85rem;
    }
+
+    &:lang(ja) {
+        font-size: .75rem;
+    }
+
    .title {
        @include font(2.2em, 1, pre-wrap, center);
        text-transform: uppercase;
        width: max-content;
+        max-width: 80vw;
    }

    .subtitle {
@ -273,9 +284,16 @@ const lightProps = [{
    gap: 1.25em;
    width: max-content;
    text-transform: uppercase;
+
    img {
        width: 4em;
        animation: slide-down 1.5s ease-in-out infinite;
    }
+
+    &:lang(ja),
+    &:lang(ko) {
+        font-size: 0.7em;
+    }
+
 }
 </style>