/* Kaika Lab company home (/, /en/, /ko/). The Cloze Maker pages keep style.css. */

:root {
  color-scheme: light;
  --ink: #12365d;
  --ink-2: #244564;
  --muted: #58708a;
  --blue: #1684cf;
  --blue-soft: #e8f4fc;
  --line: #dce6ed;
  --paper: #fffdf9;
  --orange: #f0662e;
  --orange-soft: #fff0e8;
  --green: #109c8a;
  --green-soft: #e4f7f2;
  --purple: #7950c8;
  --purple-soft: #f1eaff;
  --pink: #e84862;
  --pink-soft: #fff0f2;
  --yellow: #d39a00;
  --yellow-soft: #fff6d9;
  --serif: "Noto Serif JP", "Noto Serif KR", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.8;
  letter-spacing: .02em;
  overflow-x: hidden;
}
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3, p { margin-top: 0; }
.wrap { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }

/* Header */
header.top {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 253, 249, .94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #eceff1;
}
.nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 600 30px/1 Georgia, "Times New Roman", serif; letter-spacing: .01em; }
.brand-mark { width: 34px; height: 34px; position: relative; flex: none; }
.brand-mark i { position: absolute; width: 15px; height: 24px; border-radius: 100% 100% 8px 100%; }
.brand-mark i:nth-child(1) { background: #f9c76b; left: 2px; top: 4px; transform: rotate(-34deg); }
.brand-mark i:nth-child(2) { background: #4da7e6; left: 14px; top: 1px; transform: rotate(20deg); }
.brand-mark i:nth-child(3) { background: #63c5ad; left: 9px; top: 12px; transform: rotate(55deg); opacity: .9; }
nav.menu { display: flex; align-items: center; gap: 32px; font-size: 15px; }
nav.menu a { text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; }
nav.menu a:hover, nav.menu a.current { border-color: var(--blue); }
nav.menu a:hover { color: var(--blue); }

/* Hero */
.hero { position: relative; overflow: hidden; background: #f7f6f1; }
.hero-photo {
  position: absolute; inset: 0 0 0 auto; width: 58%;
  background: url("/img/hero-desk.jpg") left center / cover no-repeat;
}
.hero-photo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #f7f6f1 0%, rgba(247, 246, 241, .55) 22%, rgba(247, 246, 241, 0) 48%);
}
.hero::before {
  content: ""; position: absolute; z-index: 1; width: 150px; height: 150px; border-radius: 50%;
  background: #b9e2f6; opacity: .75; left: -84px; top: -70px;
}
.hero-inner { position: relative; z-index: 2; min-height: 380px; display: flex; align-items: center; padding: 48px 0; }
.hero-copy { max-width: 560px; }
.eyebrow { color: var(--blue); font: 600 12px/1.6 Georgia, serif; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.34; letter-spacing: .04em; font-weight: 600; margin: 0 0 18px; }
.hero-copy .lede { font-size: 16px; line-height: 1.95; margin: 0 0 26px; color: var(--ink-2); }
.button {
  display: inline-flex; align-items: center; gap: 16px; padding: 11px 26px; border-radius: 999px;
  background: var(--blue); color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: .06em;
  box-shadow: 0 5px 14px rgba(22, 132, 207, .16); transition: transform .2s, box-shadow .2s;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(22, 132, 207, .25); }

/* Sections */
section.block { padding: 48px 0; }
.section-heading { display: flex; align-items: center; gap: 22px; margin-bottom: 26px; }
.section-heading h2 { font-size: 32px; font-weight: 600; line-height: 1.3; margin: 0; white-space: nowrap; }
.section-heading .rule { height: 1px; flex: 1; background: #b9d8e9; }
.section-heading .sub { color: var(--blue); font: 13px Georgia, serif; white-space: nowrap; }

/* Project cards */
.projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.project {
  --accent: var(--blue); --tint: var(--blue-soft);
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 22px 22px 18px; border: 1px solid #e8edf0; border-radius: 12px;
  background: rgba(255, 255, 255, .92); box-shadow: 0 4px 18px rgba(22, 54, 93, .04);
  transition: transform .2s, box-shadow .2s;
}
.project:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(22, 54, 93, .09); }
.project.orange { --accent: var(--orange); --tint: var(--orange-soft); }
.project.green { --accent: var(--green); --tint: var(--green-soft); }
.project.purple { --accent: var(--purple); --tint: var(--purple-soft); }
.project.blue { --accent: var(--blue); --tint: var(--blue-soft); }
.project.pink { --accent: var(--pink); --tint: var(--pink-soft); }
.project.yellow { --accent: var(--yellow); --tint: var(--yellow-soft); }
.project-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.project-icon { flex: 0 0 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--accent); }
.project-icon svg { width: 28px; height: 28px; }
.project-number { color: var(--accent); font: 30px/1 Georgia, serif; margin-bottom: 6px; }
.project h3 { font: 600 18px/1.35 Georgia, var(--serif); margin: 0 0 4px; }
.project .category { color: var(--accent); font-size: 12.5px; font-weight: 600; margin: 0; line-height: 1.6; }
.project .desc { font-size: 13.5px; line-height: 1.9; margin: 4px 0 16px; color: var(--ink-2); }
.project-link { color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600; margin-top: auto; }
.project-link:hover { text-decoration: underline; }
.project-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; font-weight: 600; }
.project-links a { color: var(--accent); text-decoration: none; }
.project-links a:hover { text-decoration: underline; }
.badge { display: inline-block; vertical-align: 3px; font: 600 10.5px/1.6 sans-serif; padding: 1px 8px; border-radius: 999px; background: #dff6f0; color: #087f70; margin-left: 6px; letter-spacing: 0; }

/* Media feature */
.media-feature {
  position: relative; display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 36px;
  padding: 34px 40px; border-radius: 14px; background: linear-gradient(115deg, #edf7fc, #f3f9fb 55%, #e8f4fb);
}
.media-feature h2 { font-size: 34px; font-weight: 600; line-height: 1.3; margin: 0 0 14px; }
.media-feature h2::after { content: ""; display: block; width: 40px; height: 2px; background: var(--blue); margin-top: 16px; }
.media-feature .desc { font-size: 14px; line-height: 1.95; max-width: 440px; color: var(--ink-2); margin-bottom: 22px; }
.media-photo { position: relative; padding: 16px 20px 16px 28px; }
.media-photo::before { content: ""; position: absolute; left: 0; bottom: 0; width: 120px; height: 110px; border-radius: 50% 50% 50% 40%; background: #b9dcf3; }
.media-photo::after { content: ""; position: absolute; right: 4px; bottom: 10px; width: 70px; height: 70px; border-radius: 50%; background: #fbd5dc; }
.media-photo img { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 292 / 216; object-fit: cover; border-radius: 12px; }
.round-label {
  position: absolute; z-index: 2; top: -18px; right: -10px; width: 112px; height: 112px; border-radius: 50%;
  display: grid; place-items: center; text-align: center; background: #ffe0d3; color: var(--ink);
  font: 400 21px/1.15 "Caveat", "Segoe Print", cursive; transform: rotate(8deg);
}

/* Company */
.company-layout { display: grid; grid-template-columns: 180px 1fr 220px; gap: 30px; align-items: start; }
.company-title h2 { font-size: 28px; font-weight: 600; line-height: 1.3; margin: 0; }
.company-title p { color: var(--blue); font: 14px Georgia, serif; margin: 4px 0 0; }
.company dl {
  margin: 0; padding: 0 30px; border-left: 1px solid #c8dce8; border-right: 1px solid #c8dce8;
  display: grid; grid-template-columns: 76px 1fr 76px 1fr; gap: 14px 18px; font-size: 13.5px;
}
.company dt { color: #6b8298; }
.company dd { margin: 0; }
.company dd a { color: var(--blue); text-decoration: none; }
.contact { font-size: 12px; color: #5d748a; line-height: 1.8; }
.contact a.outline {
  display: block; text-align: center; border: 1px solid var(--blue); color: var(--blue); border-radius: 999px;
  padding: 8px 12px; margin-bottom: 10px; text-decoration: none; font-size: 13px; font-weight: 600;
}
.contact a.outline:hover { background: var(--blue-soft); }

/* Footer */
footer.bottom { position: relative; overflow: hidden; padding: 30px 0 40px; font-size: 11.5px; color: #617b91; }
footer.bottom::before { content: ""; position: absolute; right: -60px; bottom: -70px; width: 260px; height: 150px; border-radius: 50%; background: #cfe6f6; transform: rotate(-12deg); }
footer.bottom::after { content: ""; position: absolute; right: -80px; bottom: -40px; width: 180px; height: 140px; border-radius: 50%; background: #fbe3a8; opacity: .8; }
.footer-inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.footer-inner a { color: #4f6a82; }
.footer-inner .trademark { flex-basis: 100%; color: #7a8fa3; font-size: 11px; }

@media (max-width: 860px) {
  .wrap { width: min(100% - 36px, 640px); }
  .nav { flex-wrap: wrap; padding: 12px 0; min-height: 0; gap: 8px 20px; }
  .brand { font-size: 25px; }
  nav.menu { gap: 18px; font-size: 13.5px; }
  .hero { display: flex; flex-direction: column; }
  .hero-photo { position: relative; order: 2; inset: auto; width: 100%; height: 260px; background-position: center 60%; }
  .hero-photo::before { background: linear-gradient(180deg, #f7f6f1 0%, rgba(247, 246, 241, 0) 35%); }
  .hero-inner { padding-bottom: 8px; }
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .media-feature { grid-template-columns: 1fr; gap: 22px; padding: 26px; }
  .company-layout { grid-template-columns: 1fr; gap: 18px; }
  .company dl { border: 0; padding: 0; }
}
@media (max-width: 540px) {
  .wrap { width: calc(100% - 32px); }
  nav.menu { width: 100%; justify-content: space-between; gap: 8px; }
  .hero-inner { min-height: 0; padding: 44px 0; }
  h1 { font-size: 32px; }
  .hero-copy .lede { font-size: 14.5px; }
  section.block { padding: 36px 0; }
  .section-heading { gap: 12px; }
  .section-heading h2 { font-size: 26px; }
  .projects { grid-template-columns: 1fr; }
  .media-feature { padding: 20px; }
  .media-feature h2 { font-size: 28px; }
  .round-label { width: 86px; height: 86px; font-size: 17px; right: -4px; }
  .company dl { grid-template-columns: 76px 1fr; }
}

/* Closing band on / and /en/. The company details moved to /about/ and /en/about/. */
.closing-band {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 36px;
  padding: 44px 48px; border-radius: 16px;
  background: linear-gradient(115deg, #fff4e3, #f3f9fb 52%, #e3f1fb);
}
.closing-band::before {
  content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%;
  background: #b9e2f6; opacity: .5; right: -70px; top: -90px;
}
.closing-band::after {
  content: ""; position: absolute; width: 140px; height: 140px; border-radius: 50%;
  background: #fbd5dc; opacity: .7; left: -60px; bottom: -80px;
}
.closing-copy, .closing-actions { position: relative; z-index: 1; }
.leaf-mark { position: relative; display: block; width: 72px; height: 72px; margin-bottom: 12px; }
.leaf-mark i { position: absolute; width: 30px; height: 48px; border-radius: 100% 100% 16px 100%; }
.leaf-mark i:nth-child(1) { background: #f9c76b; left: 4px; top: 8px; transform: rotate(-34deg); }
.leaf-mark i:nth-child(2) { background: #4da7e6; left: 28px; top: 2px; transform: rotate(20deg); }
.leaf-mark i:nth-child(3) { background: #63c5ad; left: 18px; top: 24px; transform: rotate(55deg); opacity: .9; }
.closing-copy h2 { font-size: 30px; font-weight: 600; line-height: 1.45; margin: 0 0 12px; word-break: auto-phrase; }
.closing-copy .desc { font-size: 14.5px; line-height: 1.95; color: var(--ink-2); margin: 0; }
.closing-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.closing-actions .button { justify-content: space-between; }
.button.ghost { background: #fff; color: var(--blue); border: 1px solid var(--blue); box-shadow: none; }
.button.ghost:hover { background: var(--blue-soft); box-shadow: none; }
.closing-mail { font-size: 12.5px; line-height: 1.8; color: #5d748a; margin: 4px 0 0; }
.closing-mail a { color: var(--blue); text-decoration: none; }
@media (max-width: 860px) {
  .closing-band { grid-template-columns: 1fr; gap: 24px; padding: 32px 28px; }
}
@media (max-width: 540px) {
  .closing-band { padding: 26px 20px; }
  .closing-band::after { width: 90px; height: 90px; left: -45px; bottom: -55px; }
  .closing-copy h2 { font-size: 24px; }
}