:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #304541;
  background: #fffdf9;
  --ink: #304541;
  --muted: #77847f;
  --line: rgba(48, 69, 65, .14);
  --primary: #00a5ae;
  --primary-strong: #0d7476;
  --surface: #fff;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; min-width: 320px; background: #fffdf9; }
a { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 3px solid rgba(21, 153, 154, .28); outline-offset: 4px; }
.login-page { position: relative; min-height: 100dvh; overflow: hidden; }
.background-grid { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #fffdf9; }
.login-layout { display: grid; min-height: 100dvh; grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr); }
.brand-panel, .auth-panel { position: relative; display: flex; flex-direction: column; }
.brand-panel { justify-content: space-between; overflow: hidden; background: #fffdf9; padding: 42px clamp(28px, 7vw, 120px) 30px; }
.auth-panel { align-items: center; justify-content: center; background: #fffdf9; padding: 36px 28px; }
.auth-panel::before { position: absolute; inset: 0; pointer-events: none; background: transparent; content: ""; }
.brand-leaves { position: absolute; z-index: 0; top: 0; left: 0; width: min(100%, 680px); height: auto; pointer-events: none; }
.brand-visual { position: relative; z-index: 1; display: grid; width: min(590px, 100%); height: min(53vw, 390px); min-height: 300px; margin: auto 0; place-items: center; }
.kotoriba-logo { display: block; width: min(360px, 76%); max-width: 100%; height: auto; }
.login-card { width: min(340px, 100%); padding: 18px 0; text-align: center; }
.login-card h1 { margin: 0 0 30px; color: var(--ink); font-size: 25px; font-weight: 650; letter-spacing: -.04em; }
.primary-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; border: 1px solid #d2d9de; border-radius: 3px; background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(39, 49, 58, .05); font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.primary-button:hover { border-color: #aebdc5; background: #fafcfc; box-shadow: 0 3px 8px rgba(39, 49, 58, .08); }
.chatwork-icon { display: grid; width: 25px; height: 25px; place-items: center; }
.chatwork-icon img { display: block; width: 25px; height: 25px; }
@media (max-width: 760px) {
  .login-page { display: block; }
  .login-layout { display: flex; min-height: 100dvh; flex-direction: column; }
  .brand-panel { min-height: 0; align-items: center; justify-content: flex-start; border-right: 0; padding: 0 24px 28px; }
  .brand-leaves { position: relative; top: auto; left: auto; width: calc(100% + 48px); max-width: 582.894px; margin: 0 -24px 18px; }
  .brand-visual { width: min(320px, 100%); height: auto; min-height: 0; margin: 0 auto; }
  .kotoriba-logo { width: min(280px, 100%); }
  .auth-panel { min-height: 300px; padding: 34px 20px 46px; }
  .login-card { width: min(340px, 100%); }
}
@media (prefers-reduced-motion: reduce) { .primary-button { transition: none; } }