/* =========================================================
   TOEIC Business Training — Shared Brand System
   biz-toeic990.com  /  warm cream × brown × camel
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root {
  /* ---- core palette (sampled from IG slides) ---- */
  --paper:        #faf3e4;   /* page background, warm ivory */
  --paper-2:      #f5ead2;   /* darker cream band */
  --card:         #fffdf8;   /* card surface */
  --ink:          #5f3a1f;   /* deepest brown — display headings */
  --ink-2:        #7a4e2c;   /* secondary brown */
  --brown:        #8a5a30;   /* brand brown (buttons) */
  --camel:        #c79a63;   /* camel / tan accent, logo letters */
  --camel-soft:   #d9b888;
  --peach:        #f6d9b0;   /* highlight marker */
  --peach-2:      #fbe9d2;
  --body:         #5b4a3a;   /* body text on paper */
  --muted:        #9b8a76;   /* muted warm gray */
  --line:         #e7d8bd;   /* hairlines on paper */

  /* ---- pedagogical role colors (SVOCM) ---- */
  --role-s:       #3f74a6;   /* 主語 Subject — calm blue */
  --role-s-bg:    #e6eef6;
  --role-v:       #b5572f;   /* 動詞 Verb — terracotta */
  --role-v-bg:    #f6e3d8;
  --role-o:       #4a9d5b;   /* 目的語 Object — green */
  --role-o-bg:    #e4f1e6;
  --role-c:       #c2922f;   /* 補語 Complement — amber */
  --role-c-bg:    #f6ecd2;
  --role-m:       #9a8576;   /* 修飾 Modifier — warm gray */
  --role-m-bg:    #ece4da;

  /* ---- feedback ---- */
  --correct:      #3f9d57;
  --correct-bg:   #e6f4e8;
  --correct-line: #bfe2c6;
  --wrong:        #c0524a;
  --wrong-bg:     #fbe9e7;
  --wrong-line:   #f1cfca;

  /* ---- type ---- */
  --jp: 'Zen Kaku Gothic New', system-ui, sans-serif;
  --en: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* ---- shape ---- */
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-pill: 999px;
  --shadow:    0 18px 44px -28px rgba(95,58,31,.42);
  --shadow-sm: 0 8px 22px -16px rgba(95,58,31,.40);
  --maxw: 1080px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--jp);
  color: var(--body);
  background: var(--paper);
  line-height: 1.7;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- brand atoms ---------- */

.brand-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--camel);
  font-family: var(--en);
  font-size: clamp(11px, 1.4vw, 14px);
}
.brand-eyebrow .bk { font-size: 1.15em; line-height: 1; }

/* highlight marker behind key terms */
.mark {
  background: linear-gradient(transparent 58%, var(--peach) 58%, var(--peach) 92%, transparent 92%);
  padding: 0 .06em;
}
.mark-full {
  background: var(--peach);
  border-radius: 5px;
  padding: .04em .28em;
}

/* vertical accent bar + quote (IG subtext style) */
.accent-quote {
  border-left: 5px solid var(--camel);
  padding-left: 1em;
  color: var(--ink-2);
  font-weight: 500;
}

/* primary button — brown pill holding a white pill (IG CTA) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  font-family: var(--jp);
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary {
  background: var(--brown);
  color: #fff;
  padding: .95em 2.2em;
  border-radius: var(--r-pill);
  font-size: clamp(16px, 2vw, 19px);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(95,58,31,.5); }
.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  padding: .85em 1.8em;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--camel-soft);
  font-size: clamp(15px, 1.8vw, 17px);
}
.btn-ghost:hover { background: var(--peach-2); }

/* card */
.card {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

/* role chip (SVOCM) */
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-family: var(--en);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .04em;
  padding: .16em .6em;
  border-radius: var(--r-pill);
  line-height: 1.4;
}