/* ============================================================
   public/article.css
   GATE Public Article
============================================================ */

/* ============================================================
   RESET / BASE
============================================================ */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans KR",
    sans-serif;

  background:
    #f7f8fa;

  color:
    #1f2937;

  line-height: 1.75;

  -webkit-font-smoothing:
    antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}


/* ============================================================
   HEADER
============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;

  background:
    rgba(
      255,
      255,
      255,
      0.96
    );

  border-bottom:
    1px solid #e5e7eb;

  backdrop-filter:
    blur(12px);
}

.site-header-inner {
  width:
    min(
      1120px,
      calc(
        100% - 40px
      )
    );

  min-height: 68px;

  margin:
    0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;
}


/* ============================================================
   BRAND
============================================================ */

.site-brand {
  display:
    inline-flex;

  align-items:
    baseline;

  gap:
    8px;

  white-space:
    nowrap;
}

.site-brand-main {
  font-size:
    1.45rem;

  font-weight:
    800;

  letter-spacing:
    -0.04em;

  color:
    #111827;
}

.site-brand-sub {
  font-size:
    0.78rem;

  font-weight:
    600;

  color:
    #6b7280;

  letter-spacing:
    0.02em;
}


/* ============================================================
   NAVIGATION
============================================================ */

.site-nav {
  display:
    flex;

  align-items:
    center;

  gap:
    24px;

  font-size:
    0.92rem;

  font-weight:
    600;

  color:
    #4b5563;
}

.site-nav a {
  transition:
    color 0.2s ease;
}

.site-nav a:hover {
  color:
    #111827;
}


/* ============================================================
   PAGE
============================================================ */

.article-page {
  width:
    min(
      100%,
      1180px
    );

  margin:
    0 auto;

  padding:
    52px 24px 80px;
}


/* ============================================================
   ARTICLE CONTAINER
============================================================ */

.article-container {
  width:
    min(
      100%,
      860px
    );

  margin:
    0 auto;

  padding:
    58px 64px;

  background:
    #ffffff;

  border:
    1px solid #e7e9ee;

  border-radius:
    18px;

  box-shadow:
    0 16px 45px
    rgba(
      15,
      23,
      42,
      0.055
    );
}


/* ============================================================
   ARTICLE HEADER
============================================================ */

.article-header {
  margin-bottom:
    32px;
}

.article-category {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    30px;

  padding:
    5px 11px;

  margin-bottom:
    18px;

  border-radius:
    999px;

  background:
    #eef5ff;

  color:
    #315b8a;

  font-size:
    0.77rem;

  font-weight:
    700;

  letter-spacing:
    0.03em;
}

.article-title {
  margin:
    0;

  font-size:
    clamp(
      2rem,
      4.5vw,
      3.15rem
    );

  line-height:
    1.22;

  letter-spacing:
    -0.045em;

  font-weight:
    800;

  color:
    #111827;

  word-break:
    keep-all;
}

.article-summary {
  margin:
    20px 0 0;

  max-width:
    720px;

  color:
    #596273;

  font-size:
    1.08rem;

  line-height:
    1.8;

  word-break:
    keep-all;
}

.article-meta {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    8px 18px;

  margin-top:
    22px;

  color:
    #8a93a2;

  font-size:
    0.84rem;
}

.article-date + .article-date::before {
  content:
    "•";

  margin-right:
    18px;

  color:
    #c1c6ce;
}


/* ============================================================
   DIVIDER
============================================================ */

.article-divider {
  height:
    1px;

  margin:
    34px 0 42px;

  background:
    #eceef2;
}


/* ============================================================
   ARTICLE CONTENT
============================================================ */

.article-content {
  color:
    #252b36;

  font-size:
    1.04rem;

  line-height:
    1.92;

  word-break:
    keep-all;

  overflow-wrap:
    break-word;
}

.article-content > *:first-child {
  margin-top:
    0;
}

.article-content > *:last-child {
  margin-bottom:
    0;
}

.article-content p {
  margin:
    0 0 1.6em;
}

.article-content h2 {
  margin:
    2.4em 0 0.8em;

  font-size:
    1.56rem;

  line-height:
    1.4;

  letter-spacing:
    -0.03em;

  font-weight:
    760;

  color:
    #171c25;
}

.article-content h3 {
  margin:
    2em 0 0.7em;

  font-size:
    1.25rem;

  line-height:
    1.45;

  letter-spacing:
    -0.02em;

  font-weight:
    730;

  color:
    #242b36;
}

.article-content strong {
  color:
    #151a22;

  font-weight:
    720;
}

.article-content em {
  color:
    #515b6a;
}

.article-content ul,
.article-content ol {
  margin:
    1.2em 0 1.8em;

  padding-left:
    1.45em;
}

.article-content li {
  margin:
    0.55em 0;

  padding-left:
    0.15em;
}

.article-content blockquote {
  margin:
    2em 0;

  padding:
    18px 22px;

  background:
    #f7f9fc;

  border-left:
    4px solid #d0d9e8;

  border-radius:
    0 10px 10px 0;

  color:
    #4e5968;

  font-size:
    0.98rem;
}

.article-content a {
  color:
    #275f9a;

  text-decoration:
    underline;

  text-decoration-thickness:
    1px;

  text-underline-offset:
    3px;
}


/* ============================================================
   TABLE SUPPORT
   향후 Article 본문에 table을 허용할 경우 대비
============================================================ */

.article-content table {
  width:
    100%;

  margin:
    2em 0;

  border-collapse:
    collapse;

  font-size:
    0.93rem;
}

.article-content th,
.article-content td {
  padding:
    12px 14px;

  border:
    1px solid #e3e6eb;

  vertical-align:
    top;
}

.article-content th {
  background:
    #f5f7fa;

  font-weight:
    700;
}


/* ============================================================
   AD AREA
============================================================ */

.article-ad-area {
  min-height:
    0;

  margin:
    44px 0;

  text-align:
    center;
}

.article-ad-area:not(:empty) {
  min-height:
    90px;

  padding:
    12px 0;

  border-top:
    1px solid #f0f1f4;

  border-bottom:
    1px solid #f0f1f4;
}


/* ============================================================
   ARTICLE FOOTER
============================================================ */

.article-footer {
  margin-top:
    46px;

  padding-top:
    30px;

  border-top:
    1px solid #eceef2;
}


/* ============================================================
   KEYWORDS
============================================================ */

.article-keywords {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-bottom:
    30px;
}

.article-keyword {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    30px;

  padding:
    5px 10px;

  border:
    1px solid #e2e6eb;

  border-radius:
    999px;

  background:
    #fafbfc;

  color:
    #677180;

  font-size:
    0.76rem;

  font-weight:
    600;
}

.article-keyword::before {
  content:
    "#";

  margin-right:
    2px;

  color:
    #9aa3af;
}


/* ============================================================
   SOURCE NOTE
============================================================ */

.article-source-note {
  padding:
    20px 22px;

  background:
    #f8fafc;

  border:
    1px solid #e8ecf1;

  border-radius:
    12px;

  color:
    #5d6674;
}

.article-source-note strong {
  display:
    block;

  margin-bottom:
    5px;

  color:
    #2b3440;

  font-size:
    0.92rem;
}

.article-source-note p {
  margin:
    0;

  font-size:
    0.86rem;

  line-height:
    1.65;
}


/* ============================================================
   RELATED ARTICLES
============================================================ */

.related-articles {
  margin-top:
    58px;

  padding-top:
    42px;

  border-top:
    1px solid #eceef2;
}

.section-heading {
  margin-bottom:
    22px;
}

.section-label {
  display:
    block;

  margin-bottom:
    6px;

  color:
    #8c96a4;

  font-size:
    0.7rem;

  font-weight:
    700;

  letter-spacing:
    0.12em;
}

.section-heading h2 {
  margin:
    0;

  color:
    #171c24;

  font-size:
    1.45rem;

  letter-spacing:
    -0.03em;
}

.related-articles-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    14px;
}

.related-article-card {
  display:
    block;

  padding:
    20px;

  border:
    1px solid #e5e8ed;

  border-radius:
    12px;

  background:
    #ffffff;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.related-article-card:hover {
  transform:
    translateY(-2px);

  border-color:
    #ced5df;

  box-shadow:
    0 10px 24px
    rgba(
      15,
      23,
      42,
      0.06
    );
}

.related-article-category {
  margin-bottom:
    9px;

  color:
    #6681a1;

  font-size:
    0.7rem;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    0.04em;
}

.related-article-card h3 {
  margin:
    0;

  color:
    #202631;

  font-size:
    1rem;

  line-height:
    1.5;

  letter-spacing:
    -0.02em;

  word-break:
    keep-all;
}

.related-article-card p {
  display:
    -webkit-box;

  margin:
    10px 0 0;

  overflow:
    hidden;

  color:
    #707987;

  font-size:
    0.82rem;

  line-height:
    1.55;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;
}


/* ============================================================
   LOADING
============================================================ */

.article-loading {
  width:
    min(
      100%,
      860px
    );

  min-height:
    460px;

  margin:
    0 auto;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    14px;

  color:
    #788190;

  font-size:
    0.9rem;
}

.loading-spinner {
  width:
    34px;

  height:
    34px;

  border:
    3px solid #e5e8ed;

  border-top-color:
    #637990;

  border-radius:
    50%;

  animation:
    article-spin
    0.8s
    linear
    infinite;
}

@keyframes article-spin {
  to {
    transform:
      rotate(360deg);
  }
}


/* ============================================================
   ERROR
============================================================ */

.article-error {
  width:
    min(
      100%,
      720px
    );

  margin:
    80px auto;

  padding:
    50px 30px;

  text-align:
    center;

  background:
    #ffffff;

  border:
    1px solid #e4e7ec;

  border-radius:
    16px;
}

.article-error h1 {
  margin:
    0 0 12px;

  color:
    #202631;

  font-size:
    1.7rem;

  letter-spacing:
    -0.03em;
}

.article-error p {
  max-width:
    520px;

  margin:
    0 auto;

  color:
    #727c89;

  font-size:
    0.94rem;
}

.article-back-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    42px;

  margin-top:
    24px;

  padding:
    9px 18px;

  border-radius:
    9px;

  background:
    #242b35;

  color:
    #ffffff;

  font-size:
    0.88rem;

  font-weight:
    650;

  transition:
    opacity 0.18s ease;
}

.article-back-button:hover {
  opacity:
    0.86;
}


/* ============================================================
   SITE FOOTER
============================================================ */

.site-footer {
  padding:
    42px 24px 48px;

  border-top:
    1px solid #e5e7eb;

  background:
    #ffffff;
}

.site-footer-inner {
  width:
    min(
      1120px,
      100%
    );

  margin:
    0 auto;

  text-align:
    center;

  color:
    #858e9c;

  font-size:
    0.8rem;

  line-height:
    1.7;
}

.footer-brand {
  margin-bottom:
    4px;

  color:
    #404854;

  font-size:
    0.9rem;

  font-weight:
    700;
}

.site-footer p {
  margin:
    2px 0;
}

.footer-copyright {
  margin-top:
    12px !important;

  color:
    #a0a7b2;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (
  max-width: 800px
) {
  .site-header-inner {
    width:
      calc(
        100% - 28px
      );

    min-height:
      62px;
  }

  .site-brand-sub {
    display:
      none;
  }

  .site-nav {
    gap:
      16px;

    font-size:
      0.84rem;
  }

  .article-page {
    padding:
      28px 14px 56px;
  }

  .article-container {
    padding:
      38px 28px;

    border-radius:
      14px;
  }

  .article-title {
    font-size:
      clamp(
        1.8rem,
        8vw,
        2.45rem
      );
  }

  .article-summary {
    font-size:
      1rem;
  }

  .article-content {
    font-size:
      1rem;

    line-height:
      1.85;
  }

  .related-articles-grid {
    grid-template-columns:
      1fr;
  }
}


@media (
  max-width: 520px
) {
  body {
    background:
      #ffffff;
  }

  .site-header {
    box-shadow:
      0 1px 0
      rgba(
        0,
        0,
        0,
        0.03
      );
  }

  .article-page {
    padding:
      22px 0 40px;
  }

  .article-container {
    padding:
      28px 20px 40px;

    border:
      none;

    border-radius:
      0;

    box-shadow:
      none;
  }

  .article-category {
    margin-bottom:
      14px;
  }

  .article-title {
    font-size:
      1.85rem;

    line-height:
      1.28;
  }

  .article-summary {
    margin-top:
      16px;

    font-size:
      0.96rem;

    line-height:
      1.72;
  }

  .article-meta {
    gap:
      5px 12px;

    font-size:
      0.75rem;
  }

  .article-date + .article-date::before {
    margin-right:
      12px;
  }

  .article-divider {
    margin:
      28px 0 34px;
  }

  .article-content {
    font-size:
      0.98rem;

    line-height:
      1.84;
  }

  .article-content h2 {
    font-size:
      1.35rem;
  }

  .article-content h3 {
    font-size:
      1.15rem;
  }

  .article-content blockquote {
    padding:
      15px 17px;
  }

  .article-ad-area {
    margin:
      34px 0;
  }

  .article-footer {
    margin-top:
      36px;
  }

  .related-articles {
    margin-top:
      44px;

    padding-top:
      34px;
  }

  .article-error {
    margin:
      40px 16px;

    padding:
      40px 22px;
  }

  .site-footer {
    padding:
      32px 20px 38px;
  }
}


/* ============================================================
   PRINT
============================================================ */

@media print {
  .site-header,
  .site-footer,
  .article-ad-area,
  .related-articles {
    display:
      none !important;
  }

  body {
    background:
      #ffffff;
  }

  .article-page {
    padding:
      0;
  }

  .article-container {
    width:
      100%;

    max-width:
      none;

    padding:
      0;

    border:
      none;

    box-shadow:
      none;
  }
}