@charset "UTF-8";
/* =========================================================
   about.html 전용 스타일 (강남은?)
   - 공통 토큰·컴포넌트는 style.css / sub.css 그대로 사용
   ========================================================= */

/* ---------- 서브 히어로: 하트 창 사진 (데스크톱) ---------- */
@media (min-width: 1280px) {
  .about-hero__media { align-self: center; }
  .about-hero__media .heart { width: 300px; margin: 0 auto; }
}

/* ---------- 01. ABOUT 강남 ---------- */
.about-intro { display: grid; gap: 24px; }
.about-intro__big {
  font-size: 28px; font-weight: 800; letter-spacing: -.035em; line-height: 1.25;
}
.about-intro__big em { color: var(--blue); }
@media (min-width: 768px) { .about-intro__big { font-size: 40px; } }
@media (min-width: 1280px) {
  .about-intro { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 72px; align-items: start; }
  .about-intro__big { font-size: 48px; position: sticky; top: calc(var(--header-h) + var(--lnb-h) + 32px); }
}

/* 다섯 키워드 카드 (테마 타일과 같은 문법: 테두리 → 민트 hover) */
.kw-grid { display: grid; gap: 12px; }
.kw-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 22px 22px 56px; border-radius: 20px; background: #fff; border: 1px solid var(--line-strong);
  transition: background-color .2s, border-color .2s;
}
.kw-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kw-card__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--ink); color: var(--mint); }
.kw-card__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kw-card__num { font-size: 14px; font-weight: 800; color: var(--blue); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.kw-card__title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.kw-card__text { color: var(--gray); font-size: 15px; line-height: 1.6; }
.kw-card__go {
  position: absolute; right: 20px; bottom: 20px; width: 22px; height: 22px;
  fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s var(--ease), stroke .2s;
}
.kw-card:hover { background: var(--mint-soft); border-color: var(--ink); }
.kw-card:hover .kw-card__go { stroke: var(--blue); transform: translate(2px, -2px); }
.kw-card:focus-visible { outline-offset: 3px; }
@media (max-width: 767.98px) {
  /* 모바일: 아이콘 왼쪽 + 글 오른쪽의 가로형으로 줄여 스크롤 길이를 줄인다 */
  .kw-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: start; padding: 18px 52px 18px 18px; }
  .kw-card__top { grid-row: 1 / span 2; margin: 0; }
  .kw-card__num { display: none; }
  .kw-card__title { font-size: 18px; }
  .kw-card__go { top: 20px; bottom: auto; right: 18px; }
}
@media (min-width: 768px) {
  .kw-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .kw-grid > li { grid-column: span 2; }
  .kw-grid > li:nth-child(n + 4) { grid-column: span 3; }
}
@media (min-width: 1280px) {
  .kw-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kw-grid > li, .kw-grid > li:nth-child(n + 4) { grid-column: auto; }
  .kw-card { padding: 26px 24px 60px; }
}

/* ---------- 02. 강남의 동네 ---------- */
.area-card .card__media img { object-position: 50% 78%; }
@media (max-width: 767.98px) { .area-card .card__media { aspect-ratio: 2 / 1; } }
.area-card .art__word { font-size: clamp(28px, 7vw, 38px); }
.area-card .art__icon { width: 40px; height: 40px; }
.area-card__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 14px; }
.area-card__links a {
  position: relative; z-index: 3; /* 카드 전체 링크(제목 a::after) 위에서 눌리도록 */
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; background: var(--line); color: var(--ink); font-size: 14px; font-weight: 700;
  transition: background-color .2s;
}
.area-card__links a:hover { background: var(--mint); }
.area-card__links .ico { width: 1.05em; height: 1.05em; color: var(--blue); }

/* ---------- 03. 강남 마이스 관광특구 (블루 섹션) ---------- */
.mice-letters .feature__num { font-size: 64px; line-height: .9; }
.mice-letters .feature__title { margin-top: 18px; }
.sub-sec--blue .split__media { background: rgba(255, 255, 255, .12); }
.mice-links { margin-top: 24px; border-top-color: #fff; }
.mice-links a { border-bottom-color: rgba(255, 255, 255, .28); }
.mice-links .link-list__desc { color: #E6EAFF; }
.mice-links a:hover { color: var(--mint); }
.mice-tips .check-list a { color: var(--mint); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.mice-tips .check-list li { padding: 16px 18px 16px 52px; border-radius: var(--radius); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); }
.mice-tips .check-list li::before { left: 16px; top: calc(16px + .15em); }
.mice-tips .check-list li::after { left: 24px; top: calc(16px + .15em + 6px); }
@media (min-width: 768px) { .mice-tips .check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 04. Meet the Locals ---------- */
.about-locals__en { display: inline-flex; align-items: center; gap: 12px; }
.sub-sec--dark .locals__heart { color: var(--pink); }
.locals-note { margin-top: 36px; }
/* 메인 '인터뷰 보기'로 들어오면 해당 카드를 표시 */
.local-card:target .local-card__cover { outline: 3px solid var(--mint); outline-offset: 4px; }
.local-card:target .local-card__bar { transform: scaleY(1); }

/* ---------- 05. I LOVE GANGNAM 아이덴티티 ---------- */
.brand-mark { display: grid; place-items: center; background: var(--mint); color: var(--ink); }
.brand-mark::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(rgba(17, 17, 17, .08) 1.4px, transparent 2px) 0 0 / 18px 18px;
}
.brand-mark .wordmark { position: relative; z-index: 1; font-size: clamp(64px, 18vw, 120px); }
.brand-note { margin: -8px 0 24px; color: var(--gray); font-size: 15px; }

.swatches { display: grid; gap: 12px; }
.swatch {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 16px; align-items: center;
  padding: 14px; border-radius: 20px; border: 1px solid var(--line-strong); background: #fff;
}
.swatch__chip { grid-row: 1 / span 3; width: 72px; height: 72px; border-radius: 14px; }
.swatch__name { font-size: 18px; font-weight: 800; line-height: 1.3; }
.swatch__hex { color: var(--gray); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.swatch__role { font-size: 14px; line-height: 1.5; }
.swatch--ink .swatch__chip { background: var(--ink); }
.swatch--blue .swatch__chip { background: var(--blue); }
.swatch--mint .swatch__chip { background: var(--mint); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .08); }
.swatch--pink .swatch__chip { background: var(--pink); }
@media (min-width: 768px) { .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1280px) {
  .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .swatch { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 4px; padding: 16px 16px 22px; }
  .swatch__chip { grid-row: auto; width: 100%; height: 140px; margin-bottom: 12px; }
}