/* Tool-Lifes — /major app layer.
 * Loaded on /major/* with job.css underneath. All new selectors use .mjr-* or
 * body.mjr-app scoped rules so they cannot collide with /sports or /job chrome.
 * Language tuning rides on html[lang=…] (set by the builder). */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Source+Sans+3:wght@400;600;700&display=swap");

.mjr-app {
  --mjr-disp: "Fraunces", "Source Han Serif K", "Noto Serif KR", "Noto Serif JP",
    "Noto Serif SC", Georgia, "Times New Roman", serif;
  --mjr-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Hiragino Sans", "Yu Gothic",
    "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --mjr-ink3: #3d4f66;
  --mjr-glow: color-mix(in srgb, var(--accent) 38%, transparent);
  --mjr-depth: 0 18px 48px -22px rgba(11, 18, 32, .45);
  --mjr-track: -.015em;
  --mjr-leading: 1.72;
  --mjr-prose-max: 54em;
  font-family: var(--mjr-sans);
  line-height: var(--mjr-leading);
}

/* —— Language-optimised type & rhythm —— */
html[lang="ko"] .mjr-app {
  --mjr-disp: "Fraunces", "Apple SD Gothic Neo", "Noto Serif KR", "Source Han Serif K", serif;
  --mjr-sans: "Apple SD Gothic Neo", "Noto Sans KR", "Source Sans 3", sans-serif;
  --mjr-track: -.02em;
  --mjr-leading: 1.82;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
html[lang="ja"] .mjr-app {
  --mjr-disp: "Fraunces", "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", serif;
  --mjr-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  --mjr-track: .01em;
  --mjr-leading: 1.9;
  line-break: strict;
}
html[lang="zh-Hans"] .mjr-app {
  --mjr-disp: "Fraunces", "Songti SC", "Noto Serif SC", "STSong", serif;
  --mjr-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Sans 3", sans-serif;
  --mjr-track: .02em;
  --mjr-leading: 1.88;
}
html[lang="ru"] .mjr-app {
  --mjr-track: -.005em;
  --mjr-leading: 1.78;
  font-size: 16.75px;
}
html[lang="de"] .mjr-app,
html[lang="es"] .mjr-app,
html[lang="fr"] .mjr-app,
html[lang="pt-BR"] .mjr-app,
html[lang="en"] .mjr-app {
  --mjr-track: -.02em;
}

.mjr-app h1,
.mjr-app h2,
.mjr-app .jhero h1,
.mjr-app .hero h1 {
  font-family: var(--mjr-disp);
  letter-spacing: var(--mjr-track);
  font-optical-sizing: auto;
}
.mjr-app .section-intro,
.mjr-app .lede { max-width: var(--mjr-prose-max); }
html[lang="ko"] .mjr-app .lede,
html[lang="ja"] .mjr-app .lede,
html[lang="zh-Hans"] .mjr-app .lede { font-size: 1.02rem; }

/* —— Atmosphere / 3D stage behind heroes —— */
.mjr-app .hero,
.mjr-app .jhero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform-style: preserve-3d;
}
.mjr-stage {
  position: absolute; inset: -8% -4%; z-index: 0; pointer-events: none;
  perspective: 900px; transform-style: preserve-3d;
}
.mjr-mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 20%, var(--mjr-glow), transparent 70%),
    radial-gradient(ellipse 40% 40% at 15% 80%, color-mix(in srgb, var(--accent2) 35%, transparent), transparent 65%),
    repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,.03) 22px 23px);
  opacity: .85;
  transform: translateZ(-80px) scale(1.12);
}
.mjr-orb {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.55), var(--accent) 45%, transparent 72%);
  filter: blur(1px);
  box-shadow: 0 0 40px var(--mjr-glow);
  will-change: transform;
}
.mjr-o1 { width: 180px; height: 180px; top: 8%; right: 12%; opacity: .45; }
.mjr-o2 { width: 110px; height: 110px; bottom: 12%; left: 8%; opacity: .35;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.4), var(--accent2) 50%, transparent 70%); }
.mjr-o3 { width: 64px; height: 64px; top: 42%; left: 42%; opacity: .28; }
.mjr-ring {
  position: absolute; top: 18%; right: 22%; width: 220px; height: 220px;
  border: 1.5px solid rgba(255,255,255,.18); border-radius: 50%;
  border-top-color: color-mix(in srgb, var(--accent) 70%, #fff);
  border-left-color: transparent;
  transform: rotateX(62deg) rotateZ(-18deg);
  box-shadow: inset 0 0 24px rgba(255,255,255,.08);
  will-change: transform;
}
.mjr-app .hero > .wrap,
.mjr-app .jhero .jhero-grid { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .mjr-o1 { animation: mjr-drift 14s ease-in-out infinite alternate; }
  .mjr-o2 { animation: mjr-drift 18s ease-in-out infinite alternate-reverse; }
  .mjr-o3 { animation: mjr-drift 11s ease-in-out infinite alternate; }
  .mjr-ring { animation: mjr-spin 28s linear infinite; }
}
@keyframes mjr-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(18px, -22px, 40px) scale(1.06); }
}
@keyframes mjr-spin {
  from { transform: rotateX(62deg) rotateZ(0deg); }
  to { transform: rotateX(62deg) rotateZ(360deg); }
}

/* —— Major cards: deeper 3D plate —— */
.mjr-app .job-card,
.mjr-app a.card.mjr-card {
  position: relative;
  transform-style: preserve-3d;
  border: 1px solid color-mix(in srgb, var(--card-accent, var(--accent)) 22%, var(--line));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--card-accent, var(--accent)) 9%, #fff) 0%, #fff 48%),
    var(--surface);
  overflow: hidden;
}
.mjr-app .job-card::before,
.mjr-app a.card.mjr-card::before {
  content: ""; position: absolute; inset: -40% -20% auto auto; width: 140px; height: 140px;
  border-radius: 50%; background: radial-gradient(circle, var(--card-accent, var(--accent)), transparent 70%);
  opacity: .14; transform: translateZ(12px); pointer-events: none;
}
.mjr-app .job-card .icon,
.mjr-app a.card.mjr-card .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 12px;
  background: color-mix(in srgb, var(--card-accent, var(--accent)) 14%, #fff);
  box-shadow: 0 8px 18px -12px var(--card-accent, var(--accent));
  transform: translateZ(24px);
}
.mjr-app .job-card h3 { font-family: var(--mjr-disp); letter-spacing: var(--mjr-track); }
.mjr-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.42) 0%, transparent 42%, transparent 58%, rgba(255,255,255,.12) 100%);
  opacity: 0; mix-blend-mode: soft-light; transition: opacity .35s ease;
}
.mjr-app [data-tilt]:hover .mjr-glare { opacity: 1; }

/* —— Section teasers as extruded tiles —— */
.mjr-app .sec-card {
  transform-style: preserve-3d;
  border-left: 3px solid var(--accent);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}
.mjr-app .sec-card .sc-n {
  font-family: var(--mjr-disp); font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--accent) 70%, var(--muted));
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .mjr-app .sec-card:hover {
    transform: translateY(-6px) rotateX(4deg) rotateY(-3deg);
    box-shadow: var(--mjr-depth);
  }
}

/* —— Profile / score constellation —— */
.mjr-app .profile {
  display: grid; gap: 28px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  padding: 22px; border-radius: 18px;
  background:
    radial-gradient(600px 280px at 100% 0%, var(--mjr-glow), transparent 60%),
    linear-gradient(180deg, #fff, color-mix(in srgb, var(--accent) 4%, #fff));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform-style: preserve-3d;
}
@media (max-width: 800px) { .mjr-app .profile { grid-template-columns: 1fr; } }
.mjr-score-rail {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px;
}
.mjr-chip {
  position: relative; padding: 12px 12px 10px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line);
  transform: translateZ(16px);
  box-shadow: 0 10px 24px -18px rgba(15, 23, 42, .35);
}
.mjr-chip b {
  display: block; font-family: var(--mjr-disp); font-size: 1.45rem; line-height: 1;
  color: var(--accent); letter-spacing: var(--mjr-track);
}
.mjr-chip span { display: block; margin-top: 4px; font-size: .78rem; color: var(--muted); font-weight: 600; }

/* —— Voices: quote cards with depth —— */
.mjr-app .sayings .saying {
  position: relative;
  background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--accent) 5%, #fff));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.35rem 1.4rem 1.15rem;
  box-shadow: 0 14px 32px -24px rgba(15, 23, 42, .4);
  transform-style: preserve-3d;
}
.mjr-app .sayings .saying::before {
  content: "“"; position: absolute; top: .35rem; left: .7rem;
  font-family: var(--mjr-disp); font-size: 2.8rem; line-height: 1;
  color: color-mix(in srgb, var(--accent) 35%, transparent);
  transform: translateZ(8px);
}
.mjr-app .sayings .saying p { position: relative; padding-left: .35rem; }

/* —— Campus / community concept plates —— */
.mjr-app .concept,
.mjr-app .mjr-plate {
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 18px 20px;
  box-shadow: var(--lift, var(--shadow));
  border-top: 3px solid var(--accent);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.mjr-app .mjr-plate h3 { margin: 0 0 4px; font-size: 1.06rem; font-family: var(--mjr-disp); letter-spacing: var(--mjr-track); }
.mjr-app .mjr-plate .mj-why {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.mjr-app .mjr-plate p { margin: 0; font-size: .93rem; color: var(--ink2); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .mjr-app article.mjr-plate:hover,
  .mjr-app .concept:hover {
    transform: translateY(-4px) translateZ(0);
    box-shadow: 0 16px 36px -22px rgba(15, 23, 42, .35);
  }
}

/* —— Home field strip —— */
.mjr-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin-top: 28px; max-width: 720px;
}
.mjr-stat {
  padding: 14px 16px; border-radius: 14px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
}
.mjr-stat b {
  display: block; font-family: var(--mjr-disp); font-size: 1.65rem; line-height: 1;
  letter-spacing: var(--mjr-track); color: #fff;
}
.mjr-stat span {
  display: block; margin-top: 6px; font-size: .78rem; font-weight: 600;
  color: #c7d4e6; line-height: 1.3;
}
@media (max-width: 640px) {
  .mjr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mjr-field {
  position: relative; display: block; padding: 1.25rem 1.2rem 1.1rem;
  border-radius: 16px; overflow: hidden; color: inherit; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  transform-style: preserve-3d;
}
.mjr-field:hover { text-decoration: none; }
.mjr-field .mjr-field-glow {
  position: absolute; inset: auto -20% -40% auto; width: 160px; height: 160px;
  border-radius: 50%; opacity: .2;
  background: radial-gradient(circle, var(--card-accent, var(--accent)), transparent 70%);
  transform: translateZ(0);
}
.mjr-field h3 {
  position: relative; margin: .55rem 0 .35rem;
  font-family: var(--mjr-disp); letter-spacing: var(--mjr-track); font-size: 1.15rem;
}
.mjr-field .sub { position: relative; color: var(--muted); font-size: .92rem; margin: 0; }
.mjr-field .go { position: relative; margin: .8rem 0 0; font-weight: 700; color: var(--card-accent, var(--accent)); }

/* —— Sticky section progress (JS fills --mjr-p) —— */
.mjr-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60;
  pointer-events: none; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transform: scaleX(var(--mjr-p, 0));
  opacity: .9;
}

/* —— Magnetic pills —— */
.mjr-app .pill {
  transition: transform .25s ease, background .2s ease, border-color .2s ease;
  will-change: transform;
}

/* —— Values know cards —— */
.mjr-app .know {
  background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--accent) 4%, #fff) 100%);
}

/* —— Table credits —— */
.mjr-app .cred-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.mjr-app .cred-table th, .mjr-app .cred-table td {
  text-align: left; padding: .55rem .65rem; border-bottom: 1px solid var(--line);
}
.mjr-app .table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); background: #fff; }

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
  .mjr-o1, .mjr-o2, .mjr-o3, .mjr-ring { animation: none !important; }
  .mjr-progress { display: none; }
  .mjr-app .sec-card:hover,
  .mjr-app article.mjr-plate:hover,
  .mjr-app .concept:hover { transform: none; }
}