@charset "UTF-8";
/* =========================================================
   토스 리디자인 시안 — page-newsroom.css (newsroom.html 전용)
   style.css → sub.css 다음에 불러온다. 토큰·컴포넌트는 그대로 쓰고 그림·배치만 더한다.

   1. 히어로 그림: 겹쳐 놓은 기사 카드
   2. 주요 소식 그림: 단계가 줄어든 미니 송금 화면 (CSS 도형)
   3. 최신 소식 카드: '자세히 보기' 표시
   4. 공식 채널 링크 · 소식 받아보기 배치
   5. 반응형 · 감속 모션
   ========================================================= */

/* ---------- 1. 히어로 그림 ---------- */
.news-art > * { grid-area: 1 / 1; }
.news-art__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 200px;
  height: 236px;
  padding: 28px 24px;
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 24px 48px rgba(0, 40, 120, .22);
  transform: rotate(-6deg);
}
.news-art__card--back {
  background: rgba(255, 255, 255, .3);
  box-shadow: none;
  transform: translate(40px, -22px) rotate(8deg);
}
.news-art__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 8px;
  border-radius: 16px;
  background: var(--blue-50);
  color: var(--blue-500);
}
.news-art__icon .ico { width: 30px; height: 30px; }
.news-art__line { display: block; height: 10px; border-radius: 5px; background: var(--grey-200); }
.news-art__line--title { width: 82%; height: 14px; border-radius: 7px; background: var(--grey-800); }
.news-art__line--short { width: 56%; }
.news-art__spark { justify-self: end; align-self: start; margin: 52px 56px 0 0; color: #fff; }
.news-art__spark .ico { width: 44px; height: 44px; stroke-width: 1.8; }

/* ---------- 2. 주요 소식 그림 ---------- */
/* 점선 칸 2개(줄어든 단계) + 흰 화면 1개(남은 확인). 크기는 em 하나로 조절 */
.nf-art {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.4em;
  font-size: 10px;
}
.nf-art__step {
  width: 4.4em;
  height: 4.4em;
  border: 2px dashed rgba(255, 255, 255, .6);
  border-radius: 1.4em;
}
.nf-art__step + .nf-art__step { opacity: .7; }
.nf-art__screen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1em;
  width: 16.8em;
  height: 21em;
  padding: 2em 1.6em 1.6em;
  border-radius: 2.6em;
  background: #fff;
  box-shadow: 0 2.4em 4.8em rgba(0, 40, 120, .25);
  transform: rotate(-4deg);
}
.nf-art__avatar { width: 3.6em; height: 3.6em; border-radius: 50%; background: var(--blue-50); }
.nf-art__bar { display: block; width: 58%; height: .9em; border-radius: .45em; background: var(--grey-200); }
.nf-art__bar--lg { width: 82%; height: 1.8em; border-radius: .6em; background: var(--grey-800); }
.nf-art__btn {
  display: grid;
  place-items: center;
  width: 100%;
  height: 3.6em;
  margin-top: auto;
  border-radius: 1em;
  background: var(--blue-500);
  color: #fff;
}
.s-card__thumb .nf-art__btn .ico { width: 1.8em; height: 1.8em; stroke-width: 2.2; }

/* ---------- 3. 최신 소식 카드 ---------- */
.news-grid .s-card { height: 100%; }
.news-card__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 18px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--blue-700);
}
.news-card__more .ico { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.s-card--link:hover .news-card__more .ico,
.s-card--link:focus-within .news-card__more .ico { transform: translateX(4px); }

/* ---------- 4. 공식 채널 링크 · 소식 받아보기 ---------- */
.news-links { margin-top: 72px; }
.news-links > .sub-h3 { margin-bottom: 16px; }

.news-sub {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
  gap: 64px;
}
.news-sub__head { margin-bottom: 0; }

/* ---------- 5. 반응형 ---------- */
@media (max-width: 1023px) {
  .news-art__card { gap: 8px; width: 132px; height: 156px; padding: 18px 16px; border-radius: 22px; box-shadow: 0 14px 28px rgba(0, 40, 120, .22); }
  .news-art__card--back { transform: translate(26px, -14px) rotate(8deg); }
  .news-art__icon { width: 34px; height: 34px; margin-bottom: 4px; border-radius: 11px; }
  .news-art__icon .ico { width: 20px; height: 20px; }
  .news-art__line { height: 7px; }
  .news-art__line--title { height: 10px; }
  .news-art__spark { margin: 30px 34px 0 0; }
  .news-art__spark .ico { width: 30px; height: 30px; }

  .nf-art { font-size: 8px; }

  .news-links { margin-top: 56px; }
  .news-sub { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 767px) {
  .nf-art { font-size: 7px; }
  .news-links { margin-top: 48px; }
  .news-sub { gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .s-card--link:hover .news-card__more .ico,
  .s-card--link:focus-within .news-card__more .ico { transform: none; }
}