/*
 * article.css — Shared article styles for KickstartKorean
 *
 * Seoul Cafe palette:
 *   Primary: #6AADCF (Korean Sky)
 *   Accent:  #E0846B (Grapefruit coral)
 *   BG:      #FBF8F1 (Warm Ivory)
 *   Text:    #2C2420 (warm near-black)
 *   Brown:   #9B7B5B (Hazelnut)
 *
 * All styles are scoped to .article-wrap or .page to avoid
 * affecting the navbar and other site-wide components.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Nunito:wght@400;500;600;700;800&family=Gaegu:wght@400;700&family=Noto+Sans+KR:wght@400;500;700&display=swap');

/* ── Body background ──────────────────────────────────── */
body { background: #FBF8F1; }

/* ── Layout ───────────────────────────────────────────── */
.article-wrap,
.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  line-height: 1.85;
  color: #2C2420;
}
@media (min-width: 768px) {
  .article-wrap, .page { padding: 72px 40px 80px; }
}

/* ── Header ───────────────────────────────────────────── */
.article-wrap .article-meta,
.article-wrap .meta,
.page .article-meta,
.page .meta {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6AADCF;
  margin-bottom: 1.25rem;
}

.article-wrap h1,
.page h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
  color: #2C2420;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.article-wrap .article-deck,
.article-wrap .subtitle,
.page .article-deck,
.page .subtitle {
  font-size: 1.1rem;
  color: #6b5e54;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  font-weight: 300;
}

.article-wrap .byline,
.page .byline {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: #9B7B5B;
  border-top: 1px solid #e8dfd4;
  border-bottom: 1px solid #e8dfd4;
  padding: 12px 0;
  margin-bottom: 3rem;
}

/* ── Body text ────────────────────────────────────────── */
.article-wrap h2,
.page h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.35rem;
  font-weight: 400;
  color: #6AADCF;
  margin: 3rem 0 1rem;
  line-height: 1.3;
}

.article-wrap h3,
.page h3 {
  font-family: 'Nunito', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #2C2420;
  margin: 2rem 0 0.75rem;
}

.article-wrap p,
.page p { margin-bottom: 1.5rem; color: #3d3530; }

.article-wrap .kr,
.page .kr { font-family: 'Noto Sans KR', sans-serif; font-size: 1.05em; }

.article-wrap strong,
.page strong { font-weight: 700; }

.article-wrap em,
.page em { font-style: italic; }

.article-wrap a,
.page a { color: #6AADCF; }

.article-wrap ul,
.article-wrap ol,
.page ul,
.page ol { padding-left: 1.5rem; margin-bottom: 1.5rem; }

.article-wrap li,
.page li { margin-bottom: 0.5rem; color: #3d3530; }

/* ── Lead paragraph ───────────────────────────────────── */
.article-wrap .lead,
.page .lead {
  font-size: 1.15rem;
  line-height: 1.85;
  color: #2C2420;
  font-weight: 300;
}

/* ── Blockquote ───────────────────────────────────────── */
.article-wrap blockquote,
.page blockquote {
  border-left: 4px solid #6AADCF;
  margin: 2.5rem 0;
  padding: 1.25rem 1.75rem;
  background: #f0f7fb;
  font-style: italic;
  color: #444;
  font-size: 1rem;
  line-height: 1.8;
  border-radius: 0 8px 8px 0;
}
.article-wrap blockquote cite,
.page blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #9B7B5B;
  font-weight: 600;
}

/* ── Pull quote ───────────────────────────────────────── */
.article-wrap .pull-quote,
.page .pull-quote {
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 300;
  color: #E0846B;
  line-height: 1.55;
  text-align: center;
  border-top: 2px solid #E0846B;
  border-bottom: 2px solid #E0846B;
  padding: 1.75rem 1.5rem;
  margin: 3rem 0;
}

/* ── Section divider ──────────────────────────────────── */
.article-wrap .section-divider,
.page .section-divider {
  text-align: center;
  color: #ccc;
  font-size: 1.2rem;
  letter-spacing: 0.4em;
  margin: 3rem 0;
}

/* ── Info box (blue) ──────────────────────────────────── */
.info-box {
  background: #f0f7fb;
  border: 1px solid #b8dae8;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.info-box .info-label {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4a90a8;
  margin-bottom: 0.4rem;
}
.info-box p { margin: 0; font-size: 0.9rem; color: #2C2420; }

/* ── Tip box (amber) ─────────────────────────────────── */
.tip-box {
  background: #fef9ec;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.tip-box .tip-label {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #92400e;
  margin-bottom: 0.4rem;
}
.tip-box p { margin: 0; font-size: 0.9rem; color: #78350f; }

/* ── Mistake box (red) ────────────────────────────────── */
.mistake-box {
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  border: 1px solid #fecaca;
  background: #fff5f5;
}
.mistake-box--right {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.mistake-box--right .mistake-box__body {
  background: #f8fff9;
  border-left: 4px solid #16a34a;
}
.mistake-box--wrong .mistake-box__body {
  background: #fff8f8;
  border-left: 4px solid #dc2626;
}
.mistake-box .mistake-label {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #991b1b;
  margin-bottom: 0.5rem;
}
.mistake-box .wrong-line { color: #dc2626; font-family: 'Noto Sans KR', sans-serif; font-size: 1.05rem; margin-bottom: 0.25rem; }
.mistake-box .right-line { color: #166534; font-family: 'Noto Sans KR', sans-serif; font-size: 1.05rem; margin-bottom: 0.25rem; }
.mistake-box .note { font-size: 0.875rem; color: #6b5e54; margin-top: 0.5rem; line-height: 1.6; }

/* ── Table ────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin: 2rem 0; -webkit-overflow-scrolling: touch; }
.word-table,
table.article-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Nunito', sans-serif;
  font-size: 0.875rem;
}
.word-table th,
table.article-table th {
  background: #6AADCF;
  color: white;
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 0.8rem;
}
.word-table td,
table.article-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #e8dfd4;
  vertical-align: top;
  color: #374151;
}
.word-table tr:nth-child(even) td,
table.article-table tr:nth-child(even) td { background: #faf7f0; }
.word-table tr:last-child td,
table.article-table tr:last-child td { border-bottom: none; }
.word-table .kr-cell { font-family: 'Noto Sans KR', sans-serif; font-size: 1.05rem; font-weight: 700; white-space: nowrap; }

/* ── Example rows ─────────────────────────────────────── */
.ex-rows { margin: 1.25rem 0; border: 1px solid #e8dfd4; border-radius: 8px; overflow: hidden; }
.ex-row { display: flex; gap: 1.25rem; align-items: baseline; padding: 0.7rem 1rem; border-bottom: 1px solid #e8dfd4; font-size: 0.9rem; background: #fff; }
.ex-row:last-child { border-bottom: none; }
.ex-row:nth-child(even) { background: #faf7f0; }
.ex-row .ex-kr { font-family: 'Noto Sans KR', sans-serif; min-width: 200px; color: #2C2420; }
.ex-row .ex-en { color: #6b5e54; font-style: italic; }

/* ── Compare block ────────────────────────────────────── */
.compare-block { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #e8dfd4; border-radius: 10px; overflow: hidden; margin: 1.5rem 0; }
.compare-block__col { background: #fff; padding: 1rem 1.25rem; }
.compare-block__head { font-family: 'Nunito', sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #9B7B5B; margin-bottom: 0.5rem; }
.compare-block__kr { font-family: 'Noto Sans KR', sans-serif; display: block; color: #2C2420; font-size: 1.05rem; line-height: 1.7; }
.compare-block__en { display: block; color: #9B7B5B; font-size: 0.85rem; }

/* ── Quiz ─────────────────────────────────────────────── */
.quiz { background: #faf7f0; border: 1px solid #e8dfd4; border-radius: 14px; padding: 2rem 1.75rem; margin: 3rem 0; }
.quiz__title { font-family: 'Nunito', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #6AADCF; margin-bottom: 0.5rem; }
.quiz__heading { font-family: 'Nunito', sans-serif; font-size: 1.3rem; font-weight: 800; color: #2C2420; margin-bottom: 0.4rem; }
.quiz__sub { font-family: 'Nunito', sans-serif; font-size: 0.875rem; color: #9B7B5B; margin-bottom: 1.75rem; line-height: 1.6; }
.quiz-question { border-bottom: 1px solid #e8dfd4; padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
.quiz-question:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.quiz-question__q { font-family: 'Nunito', sans-serif; font-size: 0.95rem; font-weight: 600; color: #2C2420; margin-bottom: 0.5rem; line-height: 1.5; }
.quiz-question__kr { font-family: 'Noto Sans KR', sans-serif; font-size: 1rem; color: #374151; margin-bottom: 0.6rem; line-height: 1.8; }
.article-wrap details summary,
.page details summary { font-family: 'Nunito', sans-serif; font-size: 0.85rem; font-weight: 600; color: #6AADCF; cursor: pointer; list-style: none; margin-top: 0.5rem; }
.article-wrap details summary::-webkit-details-marker,
.page details summary::-webkit-details-marker { display: none; }
.article-wrap details summary::before,
.page details summary::before { content: '+ '; }
.article-wrap details[open] summary::before,
.page details[open] summary::before { content: '- '; }
.answer { font-family: 'Nunito', sans-serif; font-size: 0.88rem; color: #374151; line-height: 1.7; margin-top: 0.5rem; padding: 0.75rem; background: #fff; border-radius: 6px; }

/* ── CTA card ─────────────────────────────────────────── */
.article-cta {
  margin-top: 3rem;
  padding: 2rem;
  background: #f0f7fb;
  border: 1.5px solid #b8dae8;
  border-radius: 12px;
  text-align: center;
}
.article-cta h3 {
  font-family: 'Nunito', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6AADCF;
  margin: 0 0 0.5rem;
}
.article-cta p {
  font-family: 'Nunito', sans-serif;
  font-size: 0.875rem;
  color: #6b5e54;
  line-height: 1.7;
  margin: 0 0 1.25rem;
}

/* ── Keep Reading ─────────────────────────────────────── */
.keep-reading {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e8dfd4;
}
.keep-reading h3 {
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9B7B5B;
  margin-bottom: 1rem;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 600px) {
  .compare-block { grid-template-columns: 1fr; }
  .ex-row { flex-direction: column; gap: 0.25rem; }
  .ex-row .ex-kr { min-width: auto; }
  .article-wrap, .page { padding: 2rem 1.25rem 4rem; }
}