/* 소개 · 소식 · 소식 상세 (design 03 Website, columns 09–11) */

/* decorative pattern layers sit under the content */
.ab-arch, .ab-dots, .nw-pat, .ab-people-bg { position: absolute; pointer-events: none; }
.ab-story > .in, .ab-name > .in, .ab-people > .in, .nw-band > .in, .nw-has-pat > .in { position: relative; z-index: 1; }

/* ---------- 소개 ---------- */
.ab-band { background: var(--mauve); color: var(--paper); }
.ab-band .in { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.ab-h1 { --h: calc(var(--col) * 2 + 16px); }
.ab-intro { font: 600 28px/40px var(--sans); color: var(--paper); }

.ab-story { --pt: 112px; --pb: 112px; overflow: hidden; }
.ab-arch { left: 0; right: 0; height: 48px; background: url(../img/patterns/about-arch-tile-d.svg) 0 0 / 160px 48px repeat-x; }
.ab-arch-top { top: 0; }
.ab-arch-bot { bottom: 0; }
.ab-story-grid { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); column-gap: 16px; align-items: center; }
.ab-ill { grid-column: 1 / span 6; }
.ab-ill img { width: 100%; height: auto; }
.ab-story-tx { grid-column: 8 / span 6; display: flex; flex-direction: column; gap: 24px; }
.ab-story-tx p { font: 400 18px/31px var(--sans); color: var(--paper); }

.ab-name { overflow: hidden; }
.ab-dots-tl { top: 0; left: 0; width: 240px; height: 200px; background: url(../img/patterns/about-name-tl-d.svg) 0 0 / 240px 200px no-repeat; }
.ab-dots-br { bottom: 0; right: 0; width: 240px; height: 200px; background: url(../img/patterns/about-name-br-d.svg) 0 0 / 240px 200px no-repeat; }
.ab-name-grid { display: flex; justify-content: center; align-items: center; gap: 80px; }
.ab-name-tx { width: 480px; max-width: 100%; display: flex; flex-direction: column; gap: 20px; }
.ab-name-lede { font: 400 20px/32px var(--sans); }
.ab-name-sub { font: 400 17px/28px var(--sans); color: var(--grey); }

/* G lockup: 16 pieces glide home, then the exact lockup fades in (timeline in about-news.js) */
.ab-g { flex: none; width: 175.409px; height: 320px; }
.ab-g.is-anim { cursor: pointer; border-radius: 8px; }
.ab-g.is-anim:focus-visible { outline: 2px solid var(--deep); outline-offset: 8px; }
.ab-g-stage { position: relative; width: 175.409px; height: 320px; transform-origin: 0 0; }
.ab-g-pieces { position: absolute; inset: 0; display: none; }
.ab-p { position: absolute; display: block; max-width: none; }
.ab-g-final { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.ab-g.is-anim .ab-g-pieces { display: block; }

.ab-people { overflow: hidden; }
.ab-people-bg { top: 0; right: 0; width: 700px; height: 466.67px; object-fit: cover; opacity: .18; max-width: none; }
.ab-people .in { display: flex; flex-direction: column; gap: 32px; }
.ab-people-head { display: flex; flex-direction: column; gap: 24px; }
.ab-people-head p { font: 400 18px/30px var(--sans); }
.ab-roles { display: flex; gap: 16px; }
.ab-roles > div { flex: 1 1 0; min-width: 0; min-height: 106px; background: var(--white); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.ab-roles dt { font: 600 14px/20px var(--sans); color: var(--grey); }
.ab-roles dd { font: 500 20px/30px var(--sans); margin: 0; }
.ab-pact { font: 400 14px/22px var(--sans); color: var(--grey); }

.ab-vcard { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; height: 480px; padding: 40px; border-radius: 24px; overflow: hidden; color: var(--white); text-decoration: none; isolation: isolate; }
.ab-vcard img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: -2; }
.ab-vcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .08) 50%, rgba(0, 0, 0, .8) 100%); }
.ab-vtx { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ab-vt { font: 600 36px/46px var(--sans); }
.ab-va { font: 400 18px/28px var(--sans); }
.ab-vbtn { flex: none; }
.ab-vcard:hover .ab-vbtn .lbl { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 소식 ---------- */
.nw-band { overflow: hidden; }
.nw-pat-band { right: 0; bottom: 0; width: 420px; height: 406px; background: url(../img/patterns/news-band-d.svg) 0 0 / 420px 406px no-repeat; }
.nw-has-pat { overflow: hidden; }
.nw-pat-nt { right: 0; bottom: 0; width: 420px; height: 207px; background: url(../img/patterns/notice-title-d.svg) 0 0 / 420px 207px no-repeat; }
.nw-pat-nb { right: 0; top: 0; width: 420px; height: 372px; background: url(../img/patterns/notice-body-d.svg) 0 0 / 420px 372px no-repeat; }

@media (max-width: 899px) {
  .ab-band .in { gap: 16px; }
  .ab-h1 { --h: 96px; }
  .ab-intro { font: 600 20px/30px var(--sans); }

  .ab-story { --mpt: 48px; --mpb: 48px; }
  .ab-arch { height: 24px; background-image: url(../img/patterns/about-arch-tile-m.svg); background-size: 104px 24px; }
  .ab-story-grid { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  .ab-ill { max-width: 350px; }
  .ab-ill img { margin: -14.3px 0 -17.3px; }
  .ab-story-tx { gap: 16px; }
  .ab-story-tx p { font: 400 16px/27px var(--sans); }

  .ab-dots-tl { width: 88px; height: 24px; background-image: url(../img/patterns/about-name-tl-m.svg); background-size: 88px 24px; }
  .ab-dots-br { width: 88px; height: 110px; background-image: url(../img/patterns/about-name-br-m.svg); background-size: 88px 110px; }
  .ab-name-grid { flex-direction: column; align-items: stretch; gap: 28px; }
  .ab-name-tx { width: auto; gap: 14px; }
  .ab-name-lede { font: 400 17px/28px var(--sans); }
  .ab-name-sub { font: 400 15px/25px var(--sans); }
  .ab-g { align-self: center; width: 137.038px; height: 250px; }
  .ab-g-stage { transform: scale(.78125); }

  .ab-people-bg { left: 0; right: auto; width: 100%; height: 260px; opacity: .13; }
  .ab-people .in { gap: 16px; }
  .ab-people-head { gap: 16px; }
  .ab-people-head p { font: 400 16px/27px var(--sans); }
  .ab-roles { flex-direction: column; }
  .ab-roles > div { flex: none; min-height: 0; }
  .ab-roles dd { font: 500 17px/26px var(--sans); }
  .ab-pact { font: 400 13px/21px var(--sans); }

  .ab-vcard { flex-direction: column; align-items: flex-start; justify-content: flex-end; height: 400px; padding: 24px; border-radius: 20px; }
  .ab-vt { font: 600 26px/36px var(--sans); }
  .ab-va { font: 400 15px/23px var(--sans); }

  .nw-h1 { --h: 96px; }
  .nw-band .ptitle { gap: 16px; }
  .nw-lede { font: 400 17px/28px var(--sans); }
  .nw-pat-band { top: 0; bottom: auto; width: 150px; height: 120px; background-image: url(../img/patterns/news-band-m.svg); background-size: 150px 120px; }
  .nw-pat-nt { top: 0; bottom: auto; width: 120px; height: 100px; background-image: url(../img/patterns/notice-title-m.svg); background-size: 120px 100px; }
  .nw-pat-nb { top: auto; bottom: 0; width: 72px; height: 40px; background-image: url(../img/patterns/notice-body-m.svg); background-size: 72px 40px; }
}

/* 고정 공지 (작가 모집): always first, pin icon on the thumbnail corner */
.nthumb { position: relative; }
.nthumb .npin { position: absolute; top: 12px; right: 12px; --s: 24px; color: var(--deep); }