/*
 * JC H&E 公司官网 · 设计 token v1.0（2026-10-29 · 小设）
 * 标志 M3「桥」＋颜色 3 墨金（用户 07:19Z 选定）。来源 design\brand_v10_20261029_src\tokens_v10_final.css。
 * 对比度（WCAG 2.x）：深色模式背景 #0B1422、区块 #111C2D；数字写在每行后面。
 * 网站不加载任何外部字体；标志里的文字已转成路径。
 */

:root {
  /* ---- 品牌色（固定，不随深浅模式变化） ---- */
  --jche-ink: #0F1B2D;          /* 墨：首屏背景、标志文字、按钮 */
  --jche-shu: #A57C1B;          /* 金：小标签前的方块、细线等少量点缀（变量名沿用） */

  /* ---- 语义色 · 浅色模式（默认） ---- */
  --color-bg: #FFFFFF;
  --color-surface: #F4F6F9;     /* 区块底色、招聘横幅 */
  --color-surface-2: #E9EDF2;
  --color-text: #172131;        /* 16.2:1 on bg */
  --color-text-muted: #556173;  /* 6.3:1 on bg / 5.8:1 on surface */
  --color-border: #DCE1E8;      /* 分隔线（装饰） */
  --color-border-strong: #8A95A5; /* 输入框、需要识别的 UI 边框 3.0:1 */
  --color-accent: #0F1B2D;      /* 按钮底色；白字 17.3:1 */
  --color-accent-hover: #26364F;/* 白字 12.2:1 */
  --color-on-accent: #FFFFFF;
  --color-accent-text: #8A6A16; /* 金色文字（标签、STEP）白底 5.1 / 区块 4.7 */
  --color-link: #172131;        /* 链接 = 正文色 + 下划线 */
  --color-link-hover: #8A6A16;
  --color-focus: #0F1B2D;       /* 键盘焦点框 2px */

  /* ---- 首屏（深色，两种模式都用） ---- */
  --hero-bg: #0F1B2D;
  --hero-text: #FFFFFF;         /* 17.3:1 */
  --hero-text-muted: #B7C1CF;   /* 9.5:1 */
  --hero-line: rgba(255, 255, 255, 0.07);       /* 方眼细线 */
  --hero-line-strong: rgba(255, 255, 255, 0.16);
  --hero-focus: #FFFFFF;

  /* ---- 字体（系统字体，按语言分开，避免中日字形混用） ---- */
  --font-latin: "Segoe UI", "Helvetica Neue", Arial, "Roboto";
  --font-ja: var(--font-latin), "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", Meiryo, "Noto Sans JP", sans-serif;
  --font-zh-hans: var(--font-latin), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-zh-hant: var(--font-latin), "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --font-en: var(--font-latin), sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* ---- 字号（手机 → 电脑自动放大） ---- */
  --fs-hero: clamp(2rem, 1.25rem + 3.4vw, 3.75rem);   /* 32 → 60px */
  --fs-h1: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);   /* 28 → 40px，子页面标题 */
  --fs-h2: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);  /* 22 → 30px */
  --fs-h3: 1.125rem;                                  /* 18px */
  --fs-body: 1rem;                                    /* 16px */
  --fs-small: 0.875rem;                               /* 14px */
  --fs-label: 0.75rem;                                /* 12px，英文小标签，字距 0.12em */
  --fs-fact: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);  /* 事实栏数字 */
  --lh-tight: 1.3;
  --lh-body: 1.85;                                    /* 日文正文行距 */
  --fw-regular: 400;
  --fw-medium: 500;   /* Windows 游ゴシック 太细问题：正文不低于 400，标题 700 */
  --fw-bold: 700;

  /* ---- 间距、圆角、版心 ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --radius: 6px;          /* 与印章外框圆角呼应；按钮、卡片统一 */
  --radius-pill: 999px;
  --container: 1120px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --grid-size: 40px;      /* 首屏方眼格 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0B1422;
    --color-surface: #111C2D;
    --color-surface-2: #18253A;
    --color-text: #E6EBF2;        /* 15.4:1 */
    --color-text-muted: #A2AEBE;  /* 8.2:1 / 7.6:1 */
    --color-border: #233149;
    --color-border-strong: #5B6B84; /* 3.4:1 */
    --jche-shu: #D9B45A;          /* 亮金：深底上的点缀 9.3:1 */
    --color-accent: #E6EBF2;      /* 浅色按钮，墨字 14.4；与背景 15.4 */
    --color-accent-hover: #FFFFFF;/* 墨字 17.3 */
    --color-on-accent: #0F1B2D;
    --color-accent-text: #D9B45A; /* 背景 9.3 / 区块 8.7 */
    --color-link: #E6EBF2;
    --color-link-hover: #D9B45A;
    --color-focus: #D9B45A;
    --hero-bg: #070E19;
    --hero-text-muted: #A9B4C4;
    color-scheme: dark;
  }
}

:lang(ja) { font-family: var(--font-ja); }
:lang(zh-Hans) { font-family: var(--font-zh-hans); }
:lang(zh-Hant) { font-family: var(--font-zh-hant); }
:lang(en) { font-family: var(--font-en); }

/* jchehub.com site rules. Colours, type sizes and spacing come from the
   designer's tokens.css (served first in the same file); component rules
   follow the brand guide v0.1 and mockups (design\brand_20261029\).
   System fonts only, no external requests, no JavaScript. */

:root {
  /* open items, preview build only */
  --todo-bg: #fff1a8;
  --todo-text: #4d3800;
}
@media (prefers-color-scheme: dark) {
  :root { --todo-bg: #5a4700; --todo-text: #fff3c4; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  overflow-wrap: anywhere;
}
img, svg { max-width: 100%; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { word-break: auto-phrase; }
h1, h2, h3 { line-height: var(--lh-tight); margin: 0 0 var(--space-4); font-weight: var(--fw-bold); text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--space-4); }
a { color: var(--color-link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--color-link-hover); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
.site-header :focus-visible, .hero :focus-visible, .page-head :focus-visible, .site-footer :focus-visible { outline-color: var(--hero-focus); }
#main:focus { outline: none; }
small { font-size: var(--fs-small); }

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--space-2); top: -100px; z-index: 10;
  background: var(--color-bg); color: var(--color-text); padding: var(--space-2) var(--space-3); border-radius: var(--radius);
}
.skip:focus { top: var(--space-2); }

/* ---------- preview-only markers */
.preview-bar {
  margin: 0; padding: 6px var(--gutter); text-align: center; font-size: var(--fs-small);
  background: var(--todo-bg); color: var(--todo-text);
}
mark.todo { background: var(--todo-bg); color: var(--todo-text); outline: 1px dashed currentColor; outline-offset: 1px; padding: 0 2px; }
.photo-ph {
  margin: var(--space-5) 0 0; aspect-ratio: 16 / 9; max-width: 560px; display: grid; place-items: center;
  border: 2px dashed var(--color-border-strong); border-radius: var(--radius); padding: var(--space-4);
  color: var(--color-text-muted); text-align: center; font-size: var(--fs-small);
}

/* ---------- header (dark in both colour schemes) */
.site-header { background: var(--hero-bg); color: var(--hero-text); border-bottom: 1px solid var(--hero-line); }
.head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); min-height: 72px; padding-block: var(--space-3); }
.brand { display: inline-flex; align-items: center; color: var(--hero-text); text-decoration: none; margin-right: auto; }
.brand .logo { display: block; height: 36px; width: auto; }
.main-nav ul, .footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.main-nav ul { gap: 0 var(--space-5); font-size: var(--fs-small); }
.main-nav a { display: inline-block; padding-block: var(--space-2); color: var(--hero-text-muted); text-decoration: none; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--hero-text); }
.main-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--jche-shu); }
/* language menu: globe + current language; the list drops down under it */
.langs { position: relative; font-size: var(--fs-small); }
.langs summary {
  display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--space-3);
  border: 1px solid var(--hero-line-strong); border-radius: var(--radius); color: var(--hero-text);
  cursor: pointer; list-style: none; white-space: nowrap;
}
.langs summary::-webkit-details-marker { display: none; }
.langs summary:hover, .langs details[open] summary { border-color: var(--hero-text-muted); }
.langs .globe, .langs .chev { flex: none; }
.langs .chev { color: var(--hero-text-muted); }
.langs details[open] .chev { transform: rotate(180deg); }
.langs ul {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 100%;
  list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px;
  background: var(--hero-bg); border: 1px solid var(--hero-line-strong); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
/* the current language is ticked; the others line up with its name */
.langs ul a, .langs ul span { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + 16px + var(--space-2)); border-radius: 4px; white-space: nowrap; color: var(--hero-text-muted); text-decoration: none; }
.langs ul a:hover { background: var(--hero-line-strong); color: var(--hero-text); }
.langs ul span[aria-current] { padding-left: var(--space-3); color: var(--hero-text); font-weight: var(--fw-bold); }
.langs .check { flex: none; color: #D9B45A; }
@media (max-width: 860px) {
  .brand .logo { height: 30px; }
  .main-nav { order: 3; flex-basis: 100%; border-top: 1px solid var(--hero-line); }
  .main-nav ul { gap: 0 var(--space-4); }
}
/* Phones: the five menu items stay on one line (the Japanese menu is about 22 em wide),
   so the text follows the screen width and the space left over goes between the items. */
@media (max-width: 480px) {
  .main-nav ul { justify-content: space-between; gap: 0 var(--space-1); font-size: clamp(0.75rem, 3.5vw, 0.875rem); }
}

/* ---------- sections */
.sec { padding-block: var(--space-8); }
@media (min-width: 861px) { .sec { padding-block: var(--space-9); } }
.sec + .sec { border-top: 1px solid var(--color-border); }
.sec > .wrap > p, .sec > .wrap > .list, .sec > .wrap > dl, .sec > .wrap > h3 { max-width: 46em; }
.sec > .wrap > h2 { margin-bottom: var(--space-6); }

.label {
  font-size: var(--fs-label); letter-spacing: 0.14em; font-weight: var(--fw-bold); color: var(--color-accent-text);
  display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3);
}
.label::before { content: ""; width: 8px; height: 8px; background: var(--jche-shu); border-radius: 1px; }
.label[lang="en"], .label [lang="en"] { font-family: var(--font-en); text-transform: uppercase; }
.page-head .label { color: var(--hero-text-muted); }
.hero-place {
  font-family: var(--font-en); font-size: var(--fs-label); letter-spacing: 0.16em; color: var(--hero-text-muted);
  display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-5);
}
.hero-place::before { content: ""; width: 32px; height: 1px; background: var(--jche-shu); }

/* hero and page heads: deep ink gradient; the home hero adds a star field
   and the logo in points of light (designer's hero v1.2) */
/* The base colour is the gradient's lightest stop, so contrast is checked against the worst case. */
.hero, .page-head { background: #13223B radial-gradient(120% 90% at 72% 40%, #13223B 0%, #0B1424 55%, #070D18 100%); color: var(--hero-text); position: relative; overflow: hidden; border-top: 0 !important; }
.hero .field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero .field-tw { animation: jche-tw 6s ease-in-out infinite alternate; }
@keyframes jche-tw { from { opacity: 1; } to { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .hero .field-tw { animation: none; } }
.hero > .wrap, .page-head > .wrap { position: relative; }
.hero > .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center; gap: var(--space-7); }
.hero h1 { font-size: var(--fs-hero); letter-spacing: 0.02em; margin-bottom: var(--space-5); }
.hero h1 .phrase { display: inline-block; text-wrap: balance; }
/* The English headline is longer: smaller type, each sentence evenly on two lines. */
:lang(en) .hero h1 { font-size: clamp(1.75rem, 0.9rem + 2.6vw, 3.25rem); }
/* The longer Chinese phrase (10 characters) still fits one line on 360px phones. */
:lang(zh) .hero h1 { font-size: min(var(--fs-hero), 8.6vw); }
.nw { white-space: nowrap; }
.hero .lead { color: var(--hero-text-muted); max-width: 34em; text-wrap: balance; }
.hero .lead .phrase { display: inline-block; }
:lang(ja) .hero .lead { word-break: auto-phrase; }
.motif { justify-self: end; width: min(100%, 420px); height: auto; aspect-ratio: 1; overflow: visible; }
.page-head { padding-block: var(--space-8); }
.page-head h1 { margin-bottom: var(--space-4); }
.page-head p { color: var(--hero-text-muted); max-width: 40em; }
.page-head p:last-child { margin-bottom: 0; }
.page-head a:not(.btn) { color: var(--hero-text); }
.page-head + .sec { border-top: 0; }
@media (max-width: 860px) {
  .hero > .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .motif { order: -1; justify-self: center; width: 180px; margin: -28px 0 -8px; }
}

/* three key points along the bottom of the hero */
.hero-points { grid-column: 1 / -1; list-style: none; margin: var(--space-6) 0 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--hero-line-strong); display: grid; gap: var(--space-4) var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15em), 1fr)); }
.hero-points li { display: flex; flex-direction: column; gap: var(--space-1); color: var(--hero-text-muted); font-size: var(--fs-small); text-wrap: balance; }
:lang(ja) .hero-points li { word-break: auto-phrase; }
.hero-points .phrase { display: inline-block; }
.hero-points .k { color: #D9B45A; font-weight: var(--fw-bold); font-size: var(--fs-label); letter-spacing: 0.06em; }
.facts-lead { color: var(--color-text-muted); margin: calc(-1 * var(--space-3)) 0 var(--space-6); }

/* buttons: 48px high, 6px corners like the seal */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-2) var(--space-5); border-radius: var(--radius);
  font-weight: var(--fw-bold); line-height: 1.3; text-decoration: none; border: 1px solid transparent;
}
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
/* The hero is dark in both modes: its main button is white with ink text. */
.hero .btn-primary { background: #FFFFFF; color: var(--jche-ink); }
.hero .btn-primary:hover { background: #E6EBF2; color: var(--jche-ink); }
.btn-secondary { border-color: var(--color-border-strong); color: var(--color-text); }
.btn-secondary:hover { border-color: var(--color-text); color: var(--color-text); }
.btn-ghost, .page-head .btn-secondary { border-color: var(--hero-line-strong); color: var(--hero-text); }
.btn-ghost:hover, .page-head .btn-secondary:hover { border-color: var(--hero-text); color: var(--hero-text); }
.ext { margin-left: 2px; font-size: 0.85em; }
@media (max-width: 860px) { .hero .actions .btn { flex: 1 1 100%; } }

/* pillars (home), values (company), services (business): top rule, no numbers */
.pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.pillar { border-top: 2px solid var(--color-text); padding-top: var(--space-5); }
.pillar .eyebrow { display: block; font-size: var(--fs-small); color: var(--color-text-muted); font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
.pillar .en { display: block; font-family: var(--font-en); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.pillar h3 { margin-bottom: var(--space-3); }
.pillar p { color: var(--color-text-muted); font-size: var(--fs-small); line-height: 1.9; margin: 0; }

/* facts you can check */
.facts { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--color-border); }
.facts .fact { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-2); padding: var(--space-6) var(--space-5); border-right: 1px solid var(--color-border); min-width: 0; }
.facts .fact:first-child { padding-left: 0; }
.facts .fact:last-child { border-right: 0; }
.facts dt { font-size: var(--fs-small); color: var(--color-text-muted); }
.facts dd { margin: 0; }
.sec > .wrap > dl.facts { max-width: none; }
.facts .big { display: block; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); font-weight: var(--fw-bold); line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.facts .note { display: block; font-size: var(--fs-small); color: var(--color-text-muted); margin-top: var(--space-1); }
.registry { font-size: var(--fs-small); color: var(--color-text-muted); margin: var(--space-4) 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.registry strong { color: var(--color-text); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.registry a { color: var(--color-text-muted); }
@media (max-width: 860px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts .fact { padding: var(--space-5) var(--space-4) var(--space-5) 0; border-right: 0; border-bottom: 1px solid var(--color-border); }
  .facts .fact:nth-child(2n) { padding-left: var(--space-4); padding-right: 0; border-left: 1px solid var(--color-border); }
  .facts .fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Very narrow phones: shrink the big figures with the column so "Tennoji-ku," still fits (about 6.3 em wide). */
@supports (width: 1cqi) {
  @media (max-width: 860px) {
    .facts { container-type: inline-size; }
    .facts .big { font-size: min(clamp(1.375rem, 1.1rem + 1.2vw, 2rem), calc((50cqi - 17px) / 6.3)); }
  }
}

/* product */
.product, .pillars-sec { background: var(--color-surface); }
.product-card h2 { font-size: var(--fs-h2); }
.product-card p { max-width: 40em; color: var(--color-text-muted); }
.product-detail h2 { margin-bottom: var(--space-2); }
.tagline { font-size: 1.125rem; font-weight: var(--fw-bold); }
.product-detail h3 { margin-top: var(--space-7); }
/* "looking ahead": one statement set off by a gold rule, its label in small gold type */
.ahead { margin: var(--space-6) 0 0; padding: var(--space-1) 0 var(--space-1) var(--space-5); border-left: 3px solid var(--jche-shu); max-width: 40em; }
.ahead-label { margin: 0 0 var(--space-2); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: 0.06em; color: var(--color-accent-text); }
.ahead-text { margin: 0; font-size: 1.25rem; font-weight: var(--fw-bold); line-height: 1.6; text-wrap: balance; }
:lang(ja) .ahead-text { word-break: auto-phrase; }
.ahead-text .phrase { display: inline-block; }
.fineprint { font-size: var(--fs-small); color: var(--color-text-muted); margin-top: var(--space-6); }

/* careers banner */
.careers-band { border: 1px solid var(--color-border); border-left: 4px solid var(--jche-shu); border-radius: var(--radius); padding: var(--space-6); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: center; }
.careers-band h2 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.careers-band p { color: var(--color-text-muted); font-size: var(--fs-small); margin: 0; }
.careers-band .actions { margin: 0; }
@media (max-width: 860px) { .careers-band { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); } .careers-band .btn { width: 100%; } }

/* open position card: careers page, home careers section */
.job-card { border: 1px solid var(--color-border); border-left: 4px solid var(--jche-shu); border-radius: var(--radius); padding: var(--space-6); background: var(--color-bg); max-width: 56em; }
.job-card h3 { font-size: var(--fs-h2); margin: 0; }
.job-facts { margin: var(--space-5) 0 0; display: grid; gap: var(--space-4) var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12em), 1fr)); }
.job-facts dt { font-size: var(--fs-label); color: var(--color-text-muted); }
.job-facts dd { margin: 0; font-weight: var(--fw-bold); }
.job-card .catch { margin: var(--space-5) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--color-border); color: var(--color-text-muted); }
.careers-sec .job-card { margin-top: var(--space-6); }
.openings { background: var(--color-surface); }
@media (max-width: 860px) { .job-card { padding: var(--space-5); } .job-card .btn { width: 100%; } }

/* technology in practice (home): bordered cards with a line icon. Below 768px one per row,
   icon on the left; from 768px three in a row (four cards: 2x2, then one row from 1024px). */
.tech-sec > .wrap > h2 { margin-bottom: var(--space-3); }
.tech-lead { color: var(--color-text-muted); margin: 0 0 var(--space-6); text-wrap: balance; }
.tech-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
.tech-item { border: 1px solid var(--color-border); border-radius: 8px; padding: var(--space-4); display: grid; gap: var(--space-2); align-content: start; }
.tech-icon { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; background: var(--color-surface); color: var(--jche-shu); margin-bottom: var(--space-2); }
.tech-icon .ico { width: 24px; height: 24px; }
.tech-item h3 { font-size: 1rem; margin: 0; }
/* balance keeps Chinese lines from ending on one or two characters */
.tech-item p { margin: 0; color: var(--color-text-muted); font-size: var(--fs-small); line-height: 1.85; text-wrap: balance; }
/* Japanese breaks by phrase where the browser can; others wrap as usual. */
:lang(ja) .tech-item p, :lang(ja) .tech-lead, :lang(ja) .tech-sec .fineprint { word-break: auto-phrase; }
@media (max-width: 767px) {
  .tech-list { gap: var(--space-3); }
  .tech-item { grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--space-4); }
  .tech-icon { grid-row: span 2; margin-bottom: 0; }
}
@media (min-width: 768px) {
  .tech-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tech-list:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .tech-list:has(> li:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* news */
.news-list { list-style: none; margin: 0; padding: 0; max-width: 46em; border-top: 1px solid var(--color-border); }
.news-list li { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); }
.news-list time, .news-list .date { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .news-list li { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* key/value lists: company profile, job details, contact notes */
.kv { margin: 0; border-top: 2px solid var(--color-text); }
.kv > div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); }
.kv dt { font-weight: var(--fw-bold); font-size: var(--fs-small); }
.kv dd { margin: 0; }
.timeline dt { font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .kv > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }
.email { font-size: clamp(1.125rem, 1rem + 1vw, 1.5rem); font-weight: var(--fw-bold); }
.note { color: var(--color-text-muted); font-size: var(--fs-small); margin-top: var(--space-4); }

.list { padding-left: 1.2em; margin: 0 0 var(--space-4); }
.list li { margin: var(--space-1) 0; }

.channels { margin: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.channels > div { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-5); }
.channels dt { font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
.channels dd { margin: 0; }

/* careers */
.requirements, .faq { background: var(--color-surface); }
.req-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.req { background: var(--color-bg); border-radius: var(--radius); padding: var(--space-6); }
.req h3 { color: var(--color-accent-text); font-size: var(--fs-small); }
.req .list { margin-bottom: 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-5); counter-reset: step; }
.steps li { counter-increment: step; border-top: 2px solid var(--color-border); padding-top: var(--space-4); }
.steps li:first-child { border-top-color: var(--jche-shu); }
.steps li::before { content: "STEP " counter(step); display: block; font-size: var(--fs-label); letter-spacing: 0.14em; font-weight: var(--fw-bold); color: var(--color-accent-text); margin-bottom: var(--space-2); }
.steps strong { display: block; font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.steps p { font-size: var(--fs-small); color: var(--color-text-muted); margin: 0; }
.faq-list { max-width: 46em; border-top: 1px solid var(--color-border); }
.faq details { border-bottom: 1px solid var(--color-border); padding-block: var(--space-4); }
.faq summary { cursor: pointer; font-weight: var(--fw-bold); list-style: none; display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; color: var(--color-accent-text); }
.faq summary::after { content: "+"; color: var(--color-text-muted); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: var(--space-3) 0 0 2em; color: var(--color-text-muted); margin: 0; }

/* privacy */
.policy h1 { font-size: var(--fs-h1); }
.policy h2 { font-size: 1.2rem; margin-top: var(--space-7); margin-bottom: var(--space-3); }
.policy .wrap > * { max-width: 46em; }
.notice { border-left: 4px solid var(--jche-shu); padding: var(--space-2) var(--space-3); background: var(--color-surface); }
.effective { margin-top: var(--space-6); color: var(--color-text-muted); }

/* ---------- footer */
.site-footer { background: var(--hero-bg); color: var(--hero-text-muted); font-size: var(--fs-small); }
.site-footer > .wrap { padding-block: var(--space-8) var(--space-6); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-6) var(--space-8); }
.footer-logo { display: block; height: 48px; width: auto; margin-bottom: var(--space-5); }
.footer-links a { display: inline-block; padding-block: 4px; }
.legal-name { color: var(--hero-text); font-weight: var(--fw-bold); margin-bottom: var(--space-1); }
.site-footer address { font-style: normal; display: flex; flex-direction: column; line-height: 1.9; }
.site-footer a { color: var(--hero-text-muted); }
.site-footer a:hover { color: var(--hero-text); }
.footer-links { flex-direction: column; gap: var(--space-2); }
.copyright { grid-column: 1 / -1; border-top: 1px solid var(--hero-line-strong); padding-top: var(--space-5); margin: 0; letter-spacing: 0.06em; }
@media (max-width: 860px) {
  .site-footer > .wrap { grid-template-columns: minmax(0, 1fr); }
  .footer-nav .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  .site-header, .site-footer, .skip, .preview-bar, .motif, .field { display: none; }
  .hero, .page-head { background: none; color: #000; }
}
.pillar h3 .t { display: block; }
:lang(en) .pillar h3::first-letter, :lang(en) .pillar h3 .t::first-letter { text-transform: uppercase; }
:lang(ja) .facts .big, :lang(ja) .facts dt, :lang(ja) .facts .note { word-break: auto-phrase; }
.facts dt, .facts .note { text-wrap: pretty; }