/* ==========================================================================
   공통 스타일 — A안 「검수대장」
   값은 tokens.css 의 변수만 사용한다.
   ========================================================================== */

/* ===== 기본 ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-tight-5);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure { margin: 0; }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

img { display: block; max-width: 100%; }

::selection { background: var(--color-green); color: var(--color-on-green); }

:focus-visible {
  outline: var(--bw-2) solid var(--color-green);
  outline-offset: var(--space-2);
}

.lucide { stroke-width: var(--icon-stroke); }

body.is-modal-open { overflow: hidden; }

/* ===== 유틸 ===== */
.sr-only {
  position: absolute !important;
  width: var(--bw-1);
  height: var(--bw-1);
  padding: 0;
  margin: calc(var(--bw-1) * -1);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: var(--space-16);
  z-index: var(--z-skip);
  padding: var(--space-10) var(--space-16);
  background: var(--color-green);
  color: var(--color-on-green);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  transform: translateY(-120%);
  transition: transform var(--dur-fast) var(--ease-standard);
}

.skip-link:focus { transform: translateY(0); }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ===== 레이아웃 ===== */
.wrap {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ===== 헤더 ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-bg);
  border-bottom: var(--border-hairline);
}

.gnb {
  max-width: var(--layout-max);
  min-height: var(--gnb-height);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  width: max-content;
  flex: none;
  color: var(--color-ink);
  transition: color var(--dur-fast) var(--ease-standard);
}

.logo:hover { color: var(--color-green); }

.logo__mark { flex: none; color: var(--color-green); }

.logo__text { display: block; }

.logo__word {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.logo__sub {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-widest);
  color: var(--color-muted);
}

.nav {
  display: flex;
  align-items: center;
  flex: none;
}

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--gnb-height);
  padding: 0 var(--space-16);
  border-bottom: var(--bw-2) solid transparent;
  color: var(--color-ink-soft);
  font-size: var(--fs-base-plus);
  font-weight: var(--fw-medium);
  transition: color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.nav__link:hover {
  color: var(--color-green);
  background: var(--color-hover);
}

.nav__link[aria-current="page"] {
  color: var(--color-green);
  border-bottom-color: var(--color-green);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  border: var(--bw-1) solid transparent;
  border-radius: var(--radius-2);
  color: var(--color-ink);
  transition: color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.icon-btn:hover {
  color: var(--color-green);
  background: var(--color-surface);
  border-color: var(--color-line-strong);
}

.icon-btn:active { transform: translateY(var(--bw-1)); }

.icon-btn .lucide {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

/* ===== 페이지 헤드 ===== */
.page-head { padding-top: var(--space-24); }

.page-head p {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  color: var(--color-muted);
  font-size: var(--fs-md);
}

.page-head p::before {
  content: "";
  width: var(--space-20);
  height: var(--bw-1);
  background: var(--color-green);
  flex: none;
}

/* ===== 히어로 ===== */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: var(--space-56);
  padding: var(--space-40) 0 var(--space-64);
  border-bottom: var(--border-hairline);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-green);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  animation: rise var(--dur-slow) var(--ease-standard) both;
  animation-delay: calc(var(--delay-step) * 1);
}

.hero__eyebrow::before {
  content: "";
  width: var(--space-6);
  height: var(--space-6);
  background: var(--color-green);
  flex: none;
}

.hero__title {
  margin-top: var(--space-18);
  color: var(--color-ink);
  font-size: var(--fs-hero);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
  animation: rise var(--dur-slow) var(--ease-standard) both;
  animation-delay: calc(var(--delay-step) * 2);
}

.hero__desc {
  max-width: var(--measure);
  margin-top: var(--space-20);
  color: var(--color-ink-mute);
  font-size: var(--fs-xl);
  line-height: var(--lh-loose);
  animation: rise var(--dur-slow) var(--ease-standard) both;
  animation-delay: calc(var(--delay-step) * 3);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  margin-top: var(--space-30);
  animation: rise var(--dur-slow) var(--ease-standard) both;
  animation-delay: calc(var(--delay-step) * 4);
}

.hero__media {
  animation: rise-media var(--dur-slow) var(--ease-standard) both;
  animation-delay: calc(var(--delay-step) * 2);
}

.hero__frame {
  padding: var(--space-10);
  background: var(--color-surface);
  border: var(--border-strong);
}

.hero__img-wrap {
  position: relative;
  aspect-ratio: var(--ratio-thumb);
  overflow: hidden;
  background: var(--color-image);
}

.hero__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: img-settle calc(var(--dur-slow) * 1.8) var(--ease-standard) both;
}

.hero__stamp {
  position: absolute;
  left: var(--space-16);
  bottom: var(--space-16);
  background: var(--color-white-96);
}

.hero__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: var(--border-hairline);
  color: var(--color-muted);
  font-size: var(--fs-xs-plus);
}

.hero__caption .mono {
  color: var(--color-green);
  font-size: var(--fs-2xs-plus);
  letter-spacing: var(--ls-wide);
}

/* ===== 버튼 ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--control-height);
  padding: 0 var(--space-20);
  border: var(--border-accent);
  border-radius: var(--radius-2);
  background: transparent;
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight-5);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.btn .lucide {
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
  transition: transform var(--dur-fast) var(--ease-standard);
}

.btn:hover .lucide { transform: translateX(var(--space-2)); }

.btn:active { transform: translateY(var(--bw-1)); }

.btn--primary {
  background: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-on-green);
}

.btn--primary:hover {
  background: var(--color-green-dark);
  border-color: var(--color-green-dark);
}

.btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-line-strong);
  color: var(--color-ink);
}

.btn--secondary:hover {
  border-color: var(--color-green);
  color: var(--color-green);
}

.btn--ghost {
  background: transparent;
  color: var(--color-green);
}

.btn--ghost:hover {
  background: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-on-green);
}

.btn--danger {
  background: transparent;
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.btn--danger:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-on-green);
}

.btn--sm {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-12);
  font-size: var(--fs-md);
}

.btn--icon {
  width: var(--control-height);
  min-height: var(--control-height);
  padding: 0;
}

.btn--icon.btn--sm {
  width: var(--control-height-sm);
  min-height: var(--control-height-sm);
}

.btn--invert {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-green);
}

.btn--invert:hover {
  background: transparent;
  border-color: var(--color-white);
  color: var(--color-on-green);
}

.btn--invert-ghost {
  background: transparent;
  border-color: var(--color-white-60);
  color: var(--color-on-green);
}

.btn--invert-ghost:hover {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-green);
}

.btn[disabled],
.btn.is-disabled {
  background: var(--color-soft);
  border-color: var(--color-line);
  color: var(--color-muted);
  cursor: not-allowed;
  pointer-events: none;
}

.btn[disabled] .lucide,
.btn.is-disabled .lucide { transform: none; }

/* ===== 섹션 ===== */
.section {
  padding: var(--space-56) 0;
  border-bottom: var(--border-hairline);
}

.section:last-of-type {
  padding-bottom: var(--space-72);
  border-bottom: 0;
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-20);
  margin-bottom: var(--space-24);
}

.section__title {
  color: var(--color-ink);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight-2);
}

.section__sub {
  margin-top: var(--space-4);
  color: var(--color-muted);
  font-size: var(--fs-md);
}

.more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-green);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard);
}

.more .lucide {
  width: var(--icon-sm);
  height: var(--icon-sm);
  transition: transform var(--dur-fast) var(--ease-standard);
}

.more:hover {
  text-decoration: underline;
  text-underline-offset: var(--space-2);
}

.more:hover .lucide { transform: translateX(var(--space-2)); }

/* ===== 스크롤 등장 ===== */
.reveal {
  opacity: 0;
  transform: translateY(var(--space-12));
  transition: opacity var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-standard);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger { height: 100%; }

/* ===== 가치 카드 ===== */
.values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--color-surface);
  border: var(--border-hairline);
}

.value-card {
  display: flex;
  gap: var(--space-14);
  padding: var(--space-26) var(--space-24);
  border-left: var(--border-hairline);
}

.value-card:first-child { border-left: 0; }

.value-card__icon {
  flex: none;
  display: inline-flex;
  margin-top: var(--space-2);
  color: var(--color-ink);
}

.value-card__icon .lucide {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.value-card__title {
  color: var(--color-ink);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight-4);
}

.value-card__desc {
  margin-top: var(--space-6);
  color: var(--color-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

/* ===== 배지 ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-9);
  border: var(--border-strong);
  border-radius: var(--radius-2);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  white-space: nowrap;
}

.badge__dot {
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-full);
  background: var(--color-green);
  flex: none;
}

.badge--on { color: var(--color-green); }
.badge--on .badge__dot { background: var(--color-green); }

.badge--muted { color: var(--color-muted); }
.badge--muted .badge__dot { background: var(--color-dot-muted); }

.badge--done {
  color: var(--color-muted);
  border-color: var(--color-line);
}
.badge--done .badge__dot { background: var(--color-dot-muted); }

.badge--pending {
  color: var(--color-warn);
  border-color: var(--color-warn);
  background: var(--color-warn-soft);
}
.badge--pending .badge__dot { background: var(--color-warn); }

.badge--verified { color: var(--color-green); }
.badge--verified .badge__dot {
  background: var(--color-green);
  animation: pulse calc(var(--dur-slow) * 10) ease-in-out infinite;
}

/* ===== 매물 카드 ===== */
.prop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-18);
}

.prop-card {
  height: 100%;
  background: var(--color-surface);
  border: var(--border-hairline);
  transition: border-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.prop-card:hover { border-color: var(--color-green); }

.prop-card:active { transform: translateY(var(--bw-1)); }

.prop-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.prop-card__link:focus-visible {
  outline: var(--bw-2) solid var(--color-green);
  outline-offset: calc(var(--bw-2) * -1);
}

.prop-card__thumb {
  position: relative;
  aspect-ratio: var(--ratio-thumb);
  overflow: hidden;
  background: var(--color-image);
  border-bottom: var(--border-hairline);
}

.prop-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform calc(var(--dur-slow) * 0.7) var(--ease-standard);
}

.prop-card:hover .prop-card__thumb img { transform: scale(1.03); }

.prop-card__badge {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
}

.prop-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-16);
}

.prop-card__meta {
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

.prop-card__name {
  margin-top: var(--space-4);
  color: var(--color-ink);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-medium);
  letter-spacing: var(--ls-tight-3);
}

.prop-card__price {
  margin-top: var(--space-8);
  color: var(--color-ink);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight-4);
}

.prop-card__stats {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-12);
  padding-top: var(--space-10);
  border-top: var(--border-hairline);
}

.prop-card__stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-8);
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

.prop-card__stat strong {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm-plus);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight-5);
}

/* ===== 이야기방 · 칼럼 ===== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--space-48);
}

.post-list { border-top: var(--border-hairline); }

.post-row {
  display: grid;
  grid-template-columns: var(--post-col-board) minmax(0, 1fr) var(--post-col-author) var(--post-col-comment);
  align-items: center;
  gap: var(--space-12);
  min-height: var(--space-56);
  padding: var(--space-10) var(--space-12);
  border-bottom: var(--border-hairline);
  transition: background-color var(--dur-fast) var(--ease-standard);
}

.post-row:hover { background: var(--color-surface); }

.post-row:hover .post-row__title {
  text-decoration: underline;
  text-underline-offset: var(--space-2);
}

.post-row:active { background: var(--color-hover); }

.post-row__board {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-6);
  border: var(--border-hairline);
  border-radius: var(--radius-2);
  background: var(--color-soft);
  color: var(--color-ink-soft);
  font-size: var(--fs-2xs-plus);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.post-row__title {
  overflow: hidden;
  color: var(--color-ink);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-row__author,
.post-row__comment {
  color: var(--color-muted);
  font-size: var(--fs-xs-plus);
}

.post-row__comment {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.column-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.column-card {
  display: flex;
  gap: var(--space-14);
  padding: var(--space-12);
  background: var(--color-surface);
  border: var(--border-hairline);
  transition: border-color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}

.column-card:hover { border-color: var(--color-green); }

.column-card:active { background: var(--color-surface-alt); }

.column-card:focus-visible {
  outline: var(--bw-2) solid var(--color-green);
  outline-offset: calc(var(--bw-2) * -1);
}

.column-card__thumb {
  display: block;
  width: var(--column-thumb-w);
  height: var(--column-thumb-h);
  flex: none;
  overflow: hidden;
  background: var(--color-image);
  border: var(--border-hairline);
}

.column-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform calc(var(--dur-slow) * 0.7) var(--ease-standard);
}

.column-card:hover .column-card__thumb img { transform: scale(1.04); }

.column-card__body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.column-card__cat {
  color: var(--color-green);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
}

.column-card__title {
  margin-top: var(--space-4);
  color: var(--color-ink);
  font-size: var(--fs-base-plus);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-medium);
  letter-spacing: var(--ls-tight-4);
}

.column-card__date {
  margin-top: var(--space-8);
  color: var(--color-muted);
  font-size: var(--fs-2xs-plus);
}

/* ===== 신뢰 장치 ===== */
.proof {
  display: grid;
  grid-template-columns: minmax(var(--proof-media-min), var(--proof-media-w)) minmax(0, 1fr);
  background: var(--color-surface);
  border: var(--border-hairline);
}

.proof__media {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--color-image);
  border-right: var(--border-hairline);
}

.proof__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.proof__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-proof);
  pointer-events: none;
}

.proof__stamp {
  position: absolute;
  left: var(--space-16);
  bottom: var(--space-16);
  z-index: var(--z-raised);
  background: var(--color-white-96);
}

.proof__body {
  display: flex;
  align-items: center;
  padding: var(--space-28) var(--space-30);
}

.proof__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-28);
}

.proof__item {
  display: flex;
  gap: var(--space-12);
  padding: var(--space-18) 0;
  border-top: var(--border-hairline);
}

.proof__item:nth-child(1),
.proof__item:nth-child(2) {
  padding-top: 0;
  border-top: 0;
}

.proof__item:nth-child(3),
.proof__item:nth-child(4) { padding-bottom: 0; }

.proof__icon {
  flex: none;
  display: inline-flex;
  margin-top: var(--space-2);
  color: var(--color-ink);
}

.proof__icon .lucide {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.proof__title {
  color: var(--color-ink);
  font-size: var(--fs-base-plus);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight-4);
}

.proof__desc {
  margin-top: var(--space-4);
  color: var(--color-muted);
  font-size: var(--fs-sm-plus);
  line-height: var(--lh-normal);
}

/* ===== CTA ===== */
.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cta-media-w);
  overflow: hidden;
  background: var(--color-green);
  border: var(--border-accent);
  color: var(--color-on-green);
}

.cta-band__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-40);
}

.cta-band__title {
  color: var(--color-on-green);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-medium);
  letter-spacing: var(--ls-tight-2);
  text-wrap: balance;
}

.cta-band__desc {
  margin-top: var(--space-8);
  color: var(--color-on-green-muted);
  font-size: var(--fs-md-plus);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  margin-top: var(--space-24);
}

.cta-band__media {
  position: relative;
  min-height: var(--space-56);
  background: var(--color-cta-media);
  border-left: var(--bw-1) solid var(--color-white-22);
}

.cta-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  filter: grayscale(1);
}

.cta-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-cta);
  pointer-events: none;
}

.cta-band :focus-visible { outline-color: var(--color-white); }

/* ===== 푸터 ===== */
.site-footer {
  background: var(--color-soft);
  border-top: var(--border-hairline);
}

.site-footer__inner {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--space-40);
}

.site-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-24);
  padding-bottom: var(--space-24);
  border-bottom: var(--border-hairline);
}

.site-footer__info {
  padding-top: var(--space-20);
  color: var(--color-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-footer);
  overflow-wrap: break-word;
}

.site-footer__line { margin: 0; }

.site-footer__item { display: inline; }

.site-footer__sep { color: var(--color-muted); }

.site-footer__info a {
  color: var(--color-ink-soft);
  text-decoration: underline;
  text-underline-offset: var(--space-2);
}

.site-footer__info a:hover { color: var(--color-green); }

.site-footer__copy {
  margin-top: var(--space-16);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

/* ===== 폼 ===== */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.field__label {
  color: var(--color-ink);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.field__hint {
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

.input,
.textarea,
.select {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-12) var(--space-14);
  background: var(--color-surface);
  border: var(--border-strong);
  border-radius: var(--radius-2);
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  transition: border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

.textarea {
  min-height: calc(var(--control-height) * 3);
  resize: vertical;
}

.input:hover,
.textarea:hover,
.select:hover { border-color: var(--color-green); }

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--color-green);
  box-shadow: var(--shadow-ring);
}

.input::placeholder,
.textarea::placeholder { color: var(--color-muted); }

.input:disabled,
.textarea:disabled,
.select:disabled {
  background: var(--color-soft);
  border-color: var(--color-line);
  color: var(--color-muted);
  cursor: not-allowed;
}

.search {
  position: relative;
  display: block;
}

.search__icon {
  position: absolute;
  left: var(--space-12);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--color-muted);
  pointer-events: none;
}

.search .input { padding-left: var(--space-40); }

.select-wrap {
  position: relative;
  display: block;
}

.select-wrap__icon {
  position: absolute;
  right: var(--space-12);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--color-muted);
  pointer-events: none;
}

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-40);
  cursor: pointer;
}

/* 입력 오류 */
.field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  margin-top: var(--space-4);
  color: var(--color-danger);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.field-error .lucide {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex: none;
  margin-top: var(--space-2);
}

.input.is-invalid,
.textarea.is-invalid,
.select.is-invalid { border-color: var(--color-danger); }

.input.is-invalid:focus,
.textarea.is-invalid:focus,
.select.is-invalid:focus {
  border-color: var(--color-danger);
  box-shadow: var(--shadow-ring-danger);
}

/* 체크박스 · 라디오 */
.checkbox,
.radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--icon-touch);
  font-size: var(--fs-base);
  cursor: pointer;
}

.checkbox input,
.radio input {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: var(--check-size);
  height: var(--check-size);
  margin: 0;
  background: var(--color-surface);
  border: var(--border-strong);
  border-radius: var(--radius-2);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

.radio input { border-radius: var(--radius-full); }

.checkbox input:hover:not(:disabled),
.radio input:hover:not(:disabled) { border-color: var(--color-green); }

.checkbox input:checked,
.radio input:checked {
  background: var(--color-green);
  border-color: var(--color-green);
}

.checkbox input:checked::after {
  content: "";
  position: absolute;
  left: var(--space-6);
  top: var(--space-2);
  width: var(--space-6);
  height: var(--space-10);
  border-right: var(--bw-2) solid var(--color-on-green);
  border-bottom: var(--bw-2) solid var(--color-on-green);
  transform: rotate(45deg);
}

.radio input:checked::after {
  content: "";
  position: absolute;
  inset: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-on-green);
}

.checkbox input:focus-visible,
.radio input:focus-visible {
  outline: var(--bw-2) solid var(--color-green);
  outline-offset: var(--space-2);
}

.checkbox input:disabled,
.radio input:disabled {
  background: var(--color-soft);
  border-color: var(--color-line);
  cursor: not-allowed;
}

.checkbox input:disabled:checked,
.radio input:disabled:checked { background: var(--color-line-strong); }

.checkbox:has(input:disabled),
.radio:has(input:disabled) {
  color: var(--color-muted);
  cursor: not-allowed;
}

/* ===== 카드 ===== */
.card {
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-2);
  padding: var(--space-20);
}

.card__title {
  color: var(--color-ink);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight-3);
}

.card__desc {
  margin-top: var(--space-6);
  color: var(--color-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

/* ===== 표 ===== */
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border-top: var(--border-hairline);
  font-size: var(--fs-base);
}

.table caption {
  padding-bottom: var(--space-10);
  color: var(--color-muted);
  font-size: var(--fs-sm);
  text-align: left;
}

.table th,
.table td {
  padding: var(--space-12) var(--space-14);
  border-bottom: var(--border-hairline);
  text-align: left;
  vertical-align: middle;
}

.table thead th {
  background: var(--color-soft);
  color: var(--color-ink-soft);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.table .is-num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.table tbody tr:hover { background: var(--color-surface-alt); }

/* ===== 탭 ===== */
.tabs {
  display: flex;
  gap: var(--space-24);
  border-bottom: var(--border-hairline);
}

.tabs__item {
  display: inline-flex;
  align-items: center;
  min-height: var(--tab-height);
  border-bottom: var(--bw-2) solid transparent;
  margin-bottom: calc(var(--bw-1) * -1);
  color: var(--color-muted);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  transition: color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.tabs__item:hover { color: var(--color-green); }

.tabs__item.is-active,
.tabs__item[aria-selected="true"] {
  color: var(--color-green);
  border-bottom-color: var(--color-green);
  font-weight: var(--fw-semibold);
}

/* ===== 모달 ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-20);
}

.modal[hidden] { display: none; }

.modal__overlay {
  position: absolute;
  inset: 0;
  background: var(--color-ink-a45);
  border: 0;
  cursor: default;
}

.modal__dialog {
  position: relative;
  width: 100%;
  max-width: var(--modal-max);
  padding: var(--space-28);
  background: var(--color-surface);
  border: var(--border-hairline);
  border-top: var(--bw-2) solid var(--color-green);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-modal);
  animation: modal-in var(--dur-base) var(--ease-standard) both;
}

.modal__title {
  color: var(--color-ink);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight-3);
}

.modal__desc {
  margin-top: var(--space-10);
  color: var(--color-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
  margin-top: var(--space-24);
}

/* ===== 토스트 ===== */
.toast-stack {
  position: fixed;
  right: var(--space-20);
  bottom: var(--space-20);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: max-content;
  max-width: var(--toast-max);
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-12) var(--space-16);
  background: var(--color-surface);
  border: var(--border-hairline);
  border-left: var(--bw-3) solid var(--color-ink);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-toast);
  color: var(--color-ink);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  animation: toast-in var(--dur-base) var(--ease-standard) both;
}

.toast--success { border-left-color: var(--color-green); }
.toast--error { border-left-color: var(--color-danger); }
.toast--info { border-left-color: var(--color-ink-mute); }

.toast.is-leaving {
  opacity: 0;
  transform: translateY(var(--space-8));
  transition: opacity var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-standard);
}

/* ===== 상태 (빈 목록·오류·권한 없음) ===== */
.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-64) var(--space-24);
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-2);
  text-align: center;
}

.state__icon {
  display: inline-flex;
  color: var(--color-muted);
}

.state__icon .lucide {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.state__title {
  color: var(--color-ink);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight-2);
}

.state__desc {
  max-width: var(--measure-narrow);
  color: var(--color-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.error-state .state__icon { color: var(--color-danger); }
.denied-state .state__icon { color: var(--color-green); }

/* ===== 스켈레톤 ===== */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-soft);
  border-radius: var(--radius-2);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-skeleton);
  transform: translateX(-100%);
  animation: skeleton-sweep calc(var(--dur-slow) * 3) var(--ease-standard) infinite;
}

.skeleton--thumb {
  width: 100%;
  aspect-ratio: var(--ratio-thumb);
  border-radius: 0;
}

.skeleton--line {
  height: var(--skeleton-line);
  width: 100%;
}

.skeleton--line-sm { width: 60%; }

.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  background: var(--color-surface);
  border: var(--border-hairline);
  padding: 0 0 var(--space-16);
}

.skeleton-card .skeleton--line {
  max-width: calc(100% - var(--space-32));
  margin: 0 var(--space-16);
}

.skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: var(--space-56);
  padding: var(--space-10) var(--space-12);
  border-bottom: var(--border-hairline);
}

.skeleton-row .skeleton--line {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: 100%;
}

.skeleton-row .skeleton--line.skeleton--w18 {
  flex: 0 0 18%;
  width: 18%;
}

.skeleton-row .skeleton--line.skeleton--w12 {
  flex: 0 0 12%;
  width: 12%;
}

/* ===== 키프레임 ===== */
@keyframes rise {
  from { opacity: 0; transform: translateY(var(--space-8)); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rise-media {
  from { opacity: 0; transform: translateY(var(--space-12)); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes img-settle {
  from { transform: scale(1.04); }
  to { transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes menu-in {
  from { opacity: 0; transform: translateY(calc(var(--space-4) * -1)); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(var(--space-8)); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(var(--space-8)); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* ===== 반응형 ===== */
@media (max-width: 1080px) {
  .hero { gap: var(--space-36); }

  .prop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .proof { grid-template-columns: var(--proof-media-w-md) minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }

  .cta-band { grid-template-columns: 1fr; }

  .cta-band__media {
    min-height: var(--cta-media-h-sm);
    border-top: var(--bw-1) solid var(--color-white-22);
    border-left: 0;
  }
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    gap: var(--space-32);
    padding: var(--space-32) 0 var(--space-48);
  }

  .hero__media { max-width: var(--hero-media-max); }

  .hero__title { font-size: var(--fs-hero-md); }

  .proof { grid-template-columns: 1fr; }

  .proof__media {
    min-height: var(--proof-media-h-sm);
    border-right: 0;
    border-bottom: var(--border-hairline);
  }

  .proof__body { padding: var(--space-24); }
}

@media (max-width: 720px) {
  .values { grid-template-columns: 1fr; }

  .value-card {
    border-top: var(--border-hairline);
    border-left: 0;
  }

  .value-card:first-child { border-top: 0; }

  .proof__grid { grid-template-columns: 1fr; }

  .proof__grid .proof__item {
    padding: var(--space-16) 0;
    border-top: var(--border-hairline);
  }

  .proof__grid .proof__item:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .proof__grid .proof__item:nth-child(2) {
    padding-top: var(--space-16);
    border-top: var(--border-hairline);
  }

  .proof__grid .proof__item:last-child { padding-bottom: 0; }
}

@media (max-width: 640px) {
  .gnb { min-height: var(--gnb-height-sm); }

  .nav__link {
    height: var(--gnb-height-sm);
    padding: 0 var(--space-12);
  }

  .wrap,
  .gnb,
  .site-footer__inner {
    padding-right: var(--gutter-sm);
    padding-left: var(--gutter-sm);
  }

  .page-head { padding-top: var(--space-20); }

  .page-head p {
    align-items: flex-start;
    gap: var(--space-8);
    font-size: var(--fs-sm-plus);
    line-height: var(--lh-normal);
  }

  .page-head p::before { margin-top: var(--space-8); }

  .section { padding: var(--space-44) 0; }

  .section:last-of-type { padding-bottom: var(--space-56); }

  .section__head {
    align-items: flex-start;
    margin-bottom: var(--space-18);
  }

  .section__title { font-size: var(--fs-2xl); }

  .section__sub { font-size: var(--fs-sm-plus); }

  .hero { padding-top: var(--space-26); }

  .hero__title { margin-top: var(--space-14); }

  .hero__desc {
    margin-top: var(--space-16);
    font-size: var(--fs-base-plus);
    line-height: var(--lh-loose);
  }

  .hero__cta { margin-top: var(--space-24); }

  .prop-grid { gap: var(--space-14); }

  .post-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6) var(--space-10);
    min-height: 0;
    padding: var(--space-12);
  }

  .post-row__board { order: 1; }

  .post-row__author {
    order: 2;
    margin-left: auto;
  }

  .post-row__comment { order: 2; }

  .post-row__title {
    flex: 1 1 100%;
    order: 3;
    font-size: var(--fs-base);
    line-height: var(--lh-medium);
    white-space: normal;
  }

  .column-card__thumb {
    width: var(--column-thumb-w-sm);
    height: var(--column-thumb-h-sm);
  }

  .column-card__title { font-size: var(--fs-md-plus); }

  .cta-band__copy { padding: var(--space-28) var(--space-24); }

  .cta-band__title { font-size: var(--fs-3xl); }

  .cta-band__desc { font-size: var(--fs-md); }

  .site-footer__top {
    flex-direction: column;
    gap: var(--space-20);
  }

  .site-footer__inner {
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
  }

  .site-footer__line {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .site-footer__line + .site-footer__line {
    margin-top: var(--space-8);
  }

  .site-footer__item { display: block; }

  .site-footer__sep { display: none; }
}

@media (max-width: 560px) {
  .prop-grid { grid-template-columns: 1fr; }

  .hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__cta .btn { width: 100%; }

  .cta-band__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-band__actions .btn { width: 100%; }
}

@media (max-width: 480px) {
  .wrap,
  .gnb,
  .site-footer__inner {
    padding-right: var(--gutter-xs);
    padding-left: var(--gutter-xs);
  }

  .logo__word { font-size: var(--fs-xl); }

  .logo__sub { font-size: var(--fs-2xs); }

  .hero__title { font-size: var(--fs-hero-sm); }

  .hero__eyebrow {
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-wide);
  }

  .section__head { gap: var(--space-12); }

  .more { font-size: var(--fs-sm); }

  .proof__body { padding: var(--space-20); }

  .proof__media { min-height: var(--proof-media-h-xs); }

  .toast-stack {
    right: var(--space-16);
    left: var(--space-16);
    bottom: var(--space-16);
    width: auto;
    max-width: none;
  }
}

/* ===== 모션 최소화 ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__eyebrow,
  .hero__title,
  .hero__desc,
  .hero__cta,
  .hero__media,
  .hero__img-wrap img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .badge--verified .badge__dot {
    animation: none !important;
    opacity: 1 !important;
  }

  .skeleton::after {
    animation: none !important;
    transform: none !important;
    opacity: 0 !important;
  }
}

/* ==========================================================================
   추가분 — 디자인 시스템 확인 페이지(design-system.php)와 공용 보조 클래스
   값은 tokens.css 의 변수만 사용한다.
   ========================================================================== */

/* ===== 디자인 시스템 페이지 머리 ===== */
.ds-hero {
  padding: var(--space-40) 0 var(--space-32);
  border-bottom: var(--border-hairline);
}

.ds-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-green);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
}

.ds-hero__eyebrow::before {
  content: "";
  width: var(--space-6);
  height: var(--space-6);
  background: var(--color-green);
  flex: none;
}

.ds-hero__title {
  margin-top: var(--space-14);
  color: var(--color-ink);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight-2);
}

.ds-hero__desc {
  max-width: var(--measure);
  margin-top: var(--space-12);
  color: var(--color-ink-mute);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

/* ===== 디자인 시스템 블록 ===== */
.ds-block {
  margin-top: var(--space-16);
  padding: var(--space-24);
  background: var(--color-surface);
  border: var(--border-hairline);
}

.ds-block__title {
  color: var(--color-ink);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight-4);
}

.ds-note {
  margin-top: var(--space-8);
  color: var(--color-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.ds-code {
  padding: var(--space-2) var(--space-6);
  background: var(--color-soft);
  border: var(--border-hairline);
  border-radius: var(--radius-2);
  color: var(--color-ink-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-xs-plus);
  word-break: break-all;
}

.ds-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-10);
  margin-top: var(--space-16);
}

.ds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-18);
  margin-top: var(--space-16);
}

.ds-list {
  margin: var(--space-12) 0 0;
  padding: 0;
  list-style: none;
}

/* ===== 색 견본 ===== */
.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--space-12);
  margin: var(--space-20) 0 0;
  padding: 0;
  list-style: none;
}

.swatch {
  background: var(--color-surface);
  border: var(--border-hairline);
}

.swatch__chip {
  display: block;
  height: var(--space-64);
  border-bottom: var(--border-hairline);
}

.swatch__body { padding: var(--space-10) var(--space-12); }

.swatch__name {
  color: var(--color-ink);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.swatch__hex {
  margin-top: var(--space-2);
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
}

.swatch__use {
  margin-top: var(--space-6);
  color: var(--color-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-medium);
}

.swatch__var {
  margin-top: var(--space-4);
  color: var(--color-muted);
  font-size: var(--fs-2xs-plus);
  word-break: break-all;
}

/* ===== 글자 크기 ===== */
.type-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4) var(--space-16);
  padding: var(--space-10) 0;
  border-bottom: var(--border-hairline);
}

.type-row__sample {
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight-3);
}

.type-row__meta {
  color: var(--color-muted);
  font-size: var(--fs-xs-plus);
}

/* ===== 간격 ===== */
.space-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-6) 0;
  color: var(--color-muted);
  font-size: var(--fs-xs-plus);
}

.space-row__name {
  flex: none;
  min-width: 96px;
  color: var(--color-ink-soft);
}

.space-row__bar {
  flex: none;
  background: var(--color-green-soft);
  border: var(--border-accent);
}

/* ===== 모서리 · 그림자 ===== */
.radius-grid,
.shadow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-14);
  margin-top: var(--space-16);
}

.radius-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--space-72);
  background: var(--color-soft);
  border: var(--border-strong);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.shadow-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--space-64);
  background: var(--color-surface);
  border: var(--border-hairline);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

/* ===== 모션 시연 ===== */
.motion-row {
  padding: var(--space-12) 0;
  border-bottom: var(--border-hairline);
}

.motion-row:last-child { border-bottom: 0; }

.motion-demo {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.motion-track {
  position: relative;
  flex: 1 1 auto;
  min-width: 120px;
  height: var(--space-28);
  background: var(--color-soft);
  border: var(--border-hairline);
}

.motion-dot {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  width: var(--space-20);
  height: var(--space-20);
  background: var(--color-green);
}

.motion-demo:hover .motion-dot,
.motion-demo:focus-within .motion-dot { left: calc(100% - var(--space-24)); }

.motion-dot--fast { transition: left var(--dur-fast) var(--ease-standard); }
.motion-dot--base { transition: left var(--dur-base) var(--ease-standard); }
.motion-dot--slow { transition: left var(--dur-slow) var(--ease-standard); }

.motion-meta {
  margin-top: var(--space-6);
  color: var(--color-muted);
  font-size: var(--fs-xs-plus);
  line-height: var(--lh-normal);
}

/* ===== 아이콘 ===== */
.icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-12);
}

.icon-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-40);
  height: var(--space-40);
  background: var(--color-surface);
  border: var(--border-hairline);
  color: var(--color-ink);
}

.icon-cell .lucide {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.icon-cell--md .lucide {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

/* ===== 상태 화면 데모 ===== */
.state-demo {
  margin-top: var(--space-18);
}

.state-demo__label {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
  color: var(--color-green);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
}

.state-demo__label::before {
  content: "";
  width: var(--space-6);
  height: var(--space-6);
  background: var(--color-green);
  flex: none;
}

/* ===== 폼 보조 ===== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-18);
  margin-top: var(--space-18);
}

.check-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-24);
  margin-top: var(--space-12);
}

.field__req {
  margin-left: var(--space-2);
  color: var(--color-danger);
}

/* ===== 표 감싸기 (좁은 화면에서 페이지가 넘치지 않게) ===== */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===== 탭 패널 ===== */
.tabs__panel { padding-top: var(--space-16); }

/* ===== 스켈레톤 폭 변형 ===== */
.skeleton--w12 { width: 12%; }
.skeleton--w18 { width: 18%; }
.skeleton--w40 { width: 40%; }

.skeleton-block { display: block; }

/* ===== 디자인 시스템 페이지 반응형 ===== */
@media (max-width: 640px) {
  .ds-hero { padding: var(--space-32) 0 var(--space-24); }

  .ds-hero__title { font-size: var(--fs-3xl); }

  .ds-hero__desc { font-size: var(--fs-md-plus); }

  .ds-block { padding: var(--space-16); }

  .ds-row { gap: var(--space-8); }

  .tabs { gap: var(--space-16); }

  .tabs__item { font-size: var(--fs-md); }
}