/* ══ EUNAMOA Home Portal ══ */

.home { max-width: var(--container); margin: 0 auto; padding: var(--space-xl) var(--gutter); }

/* ── Hero ── */
.home-hero {
  text-align: center;
  padding: var(--space-3xl) 0 var(--space-2xl);
}

.home-hero__title {
  font-family: var(--font-headline);
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.03em;
  line-height: 1.3;
  margin-bottom: var(--space-md);
}

/* 히어로의 강조는 보라 하나다. 제목까지 색을 주면 한 화면에 주인공이 둘이 된다 */
.home-hero__accent { color: var(--color-text); }

.home-hero__desc {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  line-height: 1.8;
  max-width: 480px;
  margin: 0 auto var(--space-xl);
}

/* ── Hero Targets ── */
.home-hero__targets { display: flex; justify-content: center; gap: var(--space-sm); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.home-hero__target { font-family: var(--font-label); font-size: 0.75rem; color: var(--color-outline); padding: 0.3rem 0.75rem; border: 1px solid rgba(57, 58, 50,0.3); border-radius: var(--radius-full); }
html.light .home-hero__target { color: #5a697f; border-color: #d1dae5; }

/* ── Hero Stats ── */
.home-hero__stats {
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
  margin-bottom: var(--space-xl);
}

.home-hero__stat { display: flex; flex-direction: column; align-items: center; }
.home-hero__stat-num { font-family: var(--font-headline); font-size: var(--font-size-2xl); font-weight: 800; color: var(--color-primary); line-height: 1; }
.home-hero__stat-label { font-size: 0.75rem; color: var(--color-outline); margin-top: var(--space-xs); }

.home-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.home-hero__sub {
  font-family: var(--font-label);
  font-size: 0.75rem;
  color: var(--color-outline);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.home-hero__sub:hover { color: var(--color-text); }

.home-hero__cta {
  display: inline-block;
  padding: 0.75rem 2rem;
  font-family: var(--font-headline);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: #fff;
  background: var(--color-primary-dim);
  border: none;
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.home-hero__cta:hover { background: var(--color-primary); }

/* ── Notice ── */
.home-notice {
  margin-bottom: var(--space-2xl);
  padding: var(--space-lg);
  background: rgba(35, 36, 29, 0.4);
  border: 1px solid rgba(57, 58, 50, 0.3);
  border-radius: var(--radius-xl);
}

.home-notice__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); }
.home-notice__title {
  font-family: var(--font-headline);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-outline);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.home-notice__more { font-family: var(--font-label); font-size: 0.75rem; color: var(--color-outline); text-decoration: none; transition: color var(--transition-fast); }
.home-notice__more:hover { color: var(--color-tertiary-dim); }
html.light .home-notice__more { color: #5a697f; }
html.light .home-notice__more:hover { color: #0f766e; }

.home-notice__list { list-style: none; }

.home-notice__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(57, 58, 50, 0.2);
  font-size: var(--font-size-sm);
}

.home-notice__item:last-child { border-bottom: none; }
.home-notice__text { color: var(--color-text-muted); }
.home-notice__date { color: var(--color-outline); font-size: 0.75rem; flex-shrink: 0; margin-left: var(--space-md); }

/* ── Section Headers ── */
.home-section {
  margin-bottom: var(--space-3xl);
}

.home-section__title {
  font-family: var(--font-headline);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
  letter-spacing: -0.02em;
}

.home-section__desc {
  font-size: var(--font-size-sm);
  color: var(--color-outline);
  margin-bottom: var(--space-xl);
}

/* ── Feature Cards Grid ── */
.home-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

/* 한 줄에 하나씩 놓는 가로형 목록 (도구 페이지).
   2열이면 설명이 좁게 갈려 읽기 나쁘다 (2026-07-26) */
.home-grid--rows { grid-template-columns: 1fr; }

.home-grid--rows .home-card {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas:
    "icon name  meta  arrow"
    "icon desc  desc  arrow"
    "icon tags  tags  arrow"
    "icon level level arrow";
  column-gap: var(--space-lg);
  align-items: center;
  padding: var(--space-lg) var(--space-xl);
}

/* 래퍼를 걷어내 아이콘과 화살표를 각자 자리에 놓는다 */
.home-grid--rows .home-card__top   { display: contents; }
.home-grid--rows .home-card__icon  { grid-area: icon; align-self: start; }
.home-grid--rows .home-card__arrow { grid-area: arrow; }
.home-grid--rows .home-card__name  { grid-area: name; }
.home-grid--rows .home-card__desc  { grid-area: desc; }
.home-grid--rows .home-card__tags  { grid-area: tags; }
.home-grid--rows .home-card__level { grid-area: level; }
.home-grid--rows .home-card__meta  { grid-area: meta; justify-self: end; }

/* 세로 카드에서 아래 배지와 띄우려던 여백. 가로형에서는 마지막 줄이라 빈칸으로만 남는다 */
.home-grid--rows .home-card__level { margin-bottom: 0; }

@media (max-width: 640px) {
  .home-grid--rows .home-card {
    display: block;
    padding: var(--space-lg);
  }
  .home-grid--rows .home-card__top { display: flex; }
}

.home-card {
  display: block;
  padding: var(--space-xl);
  background: rgba(35, 36, 29, 0.5);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(57, 58, 50, 0.4);
  border-radius: var(--radius-xl);
  text-decoration: none;
  /* 카드 전체가 <a>다. color 를 안 주면 브라우저 기본 링크색(#0000ee)이 자식에게 상속된다 */
  color: var(--color-text);
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.home-card:hover {
  border-color: var(--color-outline);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.home-card--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.home-card__icon {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-md);
}

.home-card__name {
  font-family: var(--font-headline);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.home-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.home-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.home-card__arrow {
  font-size: var(--font-size-lg);
  color: var(--color-outline);
  opacity: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.home-card--link:hover .home-card__arrow {
  opacity: 1;
  transform: translateX(4px);
}

.home-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

/* 태그는 「무엇이 들었나」를 말하는 낱말이고, LIVE·공개는 상태다.
   둘 다 테두리 알약이면 층위가 안 갈린다 → 태그는 글자만 남기고 알약은 상태에만 쓴다 */
.home-card__tag {
  font-family: var(--font-label);
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--color-outline);
}
.home-card__tag + .home-card__tag::before {
  content: '·';
  margin-right: 0.45rem;
  opacity: 0.55;
}
.home-card__tags { gap: 0.45rem; }

.home-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-card__date {
  font-family: var(--font-label);
  font-size: 0.65rem;
  color: var(--color-outline);
}

/* 카드의 주인공은 이름이다. 메타 줄에 색을 주면 이름보다 먼저 읽힌다 */
.home-card__level { font-family: var(--font-label); font-size: 0.7rem; color: var(--color-outline); margin-bottom: var(--space-md); }
html.light .home-card__level { color: #5a697f; }

.home-card__badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  letter-spacing: 0.03em;
}

.home-card__badge--live {
  color: var(--color-text);
  border: 1px solid rgba(57, 58, 50, 0.55);
  background: rgba(234, 231, 221, 0.05);
}

.home-card__badge--soon {
  color: var(--color-outline);
  border: 1px solid rgba(109, 115, 157, 0.3);
}

.home-card__badge--next {
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.1);
}

.home-card__badge--open {
  color: #efbc70;
  border: 1px solid rgba(239, 188, 112, 0.35);
  background: rgba(239, 188, 112, 0.1);
}
html.light .home-card__badge--open {
  color: #6234cc;
  border-color: rgba(124, 77, 255, 0.3);
  background: rgba(124, 77, 255, 0.10);
}

/* 준비 중 카드 — disabled(반투명 0.5)처럼 죽지 않게 밝기 유지, 클릭만 비활성 */
.home-card--prep { pointer-events: none; }
.home-card--next {
  border-color: rgba(251, 191, 36, 0.35);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.05) 0%, rgba(35, 36, 29, 0.5) 100%);
}
html.light .home-card__badge--next { color: #b45309; border-color: rgba(180,83,9,0.35); background: rgba(251,191,36,0.15); }
html.light .home-card--next { border-color: rgba(180,83,9,0.25); background: linear-gradient(180deg, rgba(251,191,36,0.08) 0%, rgba(255,255,255,0.5) 100%); }

/* ── Coming Soon Grid ── */
.home-grid--small {
  grid-template-columns: repeat(4, 1fr);
}

.home-card--small {
  padding: var(--space-lg);
  text-align: center;
}

.home-card--small .home-card__icon { margin-bottom: var(--space-sm); }
.home-card--small .home-card__name { font-size: var(--font-size-base); }
.home-card--small .home-card__desc { font-size: 0.75rem; }

/* ── Contact ── */
.home-contact {
  max-width: 520px;
  margin: 0 auto;
}

.home-contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.home-contact__row {
  display: flex;
  gap: var(--space-md);
}

.home-contact__input,
.home-contact__textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: rgba(29, 30, 25, 0.5);
  border: 1px solid #6e75a6;
  border-radius: var(--radius-lg);
  outline: none;
  transition: border-color var(--transition-fast);
}

.home-contact__input:focus,
.home-contact__textarea:focus {
  border-color: rgba(239, 188, 112, 0.5);
}

.home-contact__textarea {
  resize: vertical;
  min-height: 120px;
}

.home-contact__input::placeholder,
.home-contact__textarea::placeholder {
  color: var(--color-outline);   /* 반투명이라 1.89:1이었다 (2026-07-26) */
}

.home-contact__submit {
  align-self: flex-end;
  padding: 0.75rem 2rem;
  font-family: var(--font-headline);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: #fff;
  background: var(--color-primary-dim);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.home-contact__submit:hover { background: var(--color-primary); }

.home-contact__success {
  text-align: center;
  padding: var(--space-xl);
  color: var(--color-tertiary-dim);
  font-size: var(--font-size-sm);
}

/* ── Reviews ── */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-bottom: var(--space-xl); }
.reviews__empty { grid-column: 1/-1; text-align: center; color: var(--color-outline); font-size: var(--font-size-sm); padding: var(--space-xl); }

.rv__card { background: rgba(35, 36, 29,0.5); border: 1px solid rgba(57, 58, 50,0.4); border-radius: var(--radius-xl); padding: var(--space-lg); transition: border-color var(--transition-fast); }
.rv__card:hover { border-color: var(--color-outline); }
.rv__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-sm); }
.rv__star { color: var(--color-border); font-size: var(--font-size-sm); }
.rv__star--on { color: #fbbf24; }
.rv__date { font-size: 0.65rem; color: var(--color-outline); }
.rv__content { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--space-md); }
.rv__footer { display: flex; justify-content: space-between; align-items: center; }
.rv__name { font-family: var(--font-headline); font-size: 0.8rem; font-weight: 600; color: var(--color-text); }
.rv__class { font-size: 0.7rem; color: var(--color-outline); }

.reviews__form-wrap { max-width: 520px; margin: 0 auto; text-align: center; }
.reviews__toggle { padding: 0.625rem 1.5rem; font-family: var(--font-headline); font-size: var(--font-size-sm); font-weight: 600; color: #fff; background: var(--color-primary-dim); border: none; border-radius: var(--radius-lg); cursor: pointer; transition: background var(--transition-fast); }
.reviews__toggle:hover { background: var(--color-primary); }

.reviews__form { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); text-align: left; }
.reviews__row { display: flex; gap: var(--space-md); }
.reviews__input { flex: 1; padding: 0.625rem 1rem; font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--color-text); background: rgba(29, 30, 25,0.5); border: 1px solid #6e75a6; border-radius: var(--radius-lg); outline: none; transition: border-color var(--transition-fast); }
.reviews__input:focus { border-color: rgba(239, 188, 112,0.5); }
.reviews__input::placeholder { color: var(--color-outline); }
.reviews__textarea { width: 100%; min-height: 100px; padding: 0.625rem 1rem; font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--color-text); background: rgba(29, 30, 25,0.5); border: 1px solid #6e75a6; border-radius: var(--radius-lg); outline: none; resize: vertical; transition: border-color var(--transition-fast); }
.reviews__textarea:focus { border-color: rgba(239, 188, 112,0.5); }
.reviews__textarea::placeholder { color: var(--color-outline); }

.reviews__stars { display: flex; gap: 0.25rem; }
.reviews__star { font-size: var(--font-size-xl); color: var(--color-border); cursor: pointer; transition: color var(--transition-fast); }
.reviews__star--on { color: #fbbf24; }
.reviews__star--hover { color: #fcd34d; }

.reviews__submit { align-self: flex-end; padding: 0.625rem 1.5rem; font-family: var(--font-headline); font-size: var(--font-size-sm); font-weight: 600; color: #fff; background: var(--color-primary-dim); border: none; border-radius: var(--radius-lg); cursor: pointer; }
.reviews__submit:hover { background: var(--color-primary); }
.reviews__notice { font-size: 0.7rem; color: var(--color-outline); text-align: center; }
.reviews__success { color: var(--color-tertiary-dim); font-size: var(--font-size-sm); text-align: center; padding: var(--space-lg); }

/* Light */
html.light .rv__card { background: #fff; border-color: #d1dae5; }
html.light .rv__card:hover { border-color: #6b7a90; }
html.light .rv__content { color: #334155; }
html.light .rv__name { color: #141c2f; }
html.light .reviews__input, html.light .reviews__textarea { background: #fff; border-color: #d1dae5; color: #141c2f; }
html.light .reviews__input::placeholder, html.light .reviews__textarea::placeholder { color: #6b7a90; }
html.light .reviews__star { color: #d1dae5; }

/* ── Empty State ── */
.empty-state { text-align: center; padding: var(--space-3xl) var(--space-xl); }
.empty-state__icon { font-size: 3rem; margin-bottom: var(--space-lg); opacity: 0.6; }
.empty-state__title { font-family: var(--font-headline); font-size: var(--font-size-lg); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-sm); }
.empty-state__desc { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.8; margin-bottom: var(--space-sm); }
.empty-state__sub { font-size: 0.8rem; color: var(--color-outline); line-height: 1.7; margin-bottom: var(--space-xl); }
.empty-state__cta { display: inline-block; padding: 0.625rem 1.5rem; font-family: var(--font-headline); font-size: var(--font-size-sm); font-weight: 600; color: #fff; background: var(--color-primary-dim); border-radius: var(--radius-lg); text-decoration: none; transition: background var(--transition-fast); }
.empty-state__cta:hover { background: var(--color-primary); }
html.light .empty-state__title { color: #141c2f; }
html.light .empty-state__desc { color: #334155; }
html.light .empty-state__sub { color: #5a697f; }

/* ── About Profile ── */
.about-profile { padding: var(--space-xl); background: rgba(35, 36, 29,0.5); border: 1px solid rgba(57, 58, 50,0.4); border-radius: var(--radius-xl); margin-bottom: var(--space-2xl); max-width: 44rem; /* 짧은 줄 원고라 전체 폭이면 오른쪽이 빈다 (2026-09-08) */ }
.about-profile__name { font-family: var(--font-headline); font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-xs); }
.about-profile__role { font-size: var(--font-size-sm); color: var(--color-tertiary-dim); margin-bottom: var(--space-md); }
/* 읽기 폭 40rem — glossary-guides.css .guide__intro와 같은 규칙(2026-09-04, 이 문단만 빠져 있었다) */
.about-profile__desc { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.8; max-width: 40rem; }
html.light .about-profile { background: #fff; border-color: #d1dae5; }
html.light .about-profile__name { color: #141c2f; }
html.light .about-profile__role { color: #0f766e; }
html.light .about-profile__desc { color: #334155; }

.about-tags { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.about-tag { padding: 0.5rem 1rem; font-family: var(--font-label); font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-muted); border: 1px solid rgba(57, 58, 50,0.4); border-radius: var(--radius-full); }
html.light .about-tag { color: #334155; border-color: #d1dae5; }

/* 소개 본문 — 은아님 원고의 짧은 줄을 그대로 살린다 (2026-09-08). 읽기 폭은 .about-profile__desc와 같은 40rem */
.about-statement { margin-top: var(--space-md); max-width: 40rem; margin-left: auto; margin-right: auto; text-align: center; }   /* 가운데 정렬 (2026-09-13 은아님) */
.about-statement p { margin: 0 0 var(--space-md); font-size: var(--font-size-base); line-height: 1.9; color: var(--color-text-muted); word-break: keep-all; }
.about-statement p:last-child { margin-bottom: 0; }
html.light .about-statement p { color: #334155; }
.about-quote { margin: 0; font-family: var(--font-headline); font-size: var(--font-size-xl); font-weight: 700; line-height: 1.5; color: var(--color-text); word-break: keep-all; }
.about-quote__name { margin: var(--space-sm) 0 0; font-size: var(--font-size-sm); color: var(--color-tertiary-dim); }
html.light .about-quote { color: #141c2f; }
html.light .about-quote__name { color: #0f766e; }

/* ── Notice List ── */
.notice__item { display: flex; gap: var(--space-lg); padding: var(--space-lg); background: rgba(35, 36, 29,0.5); border: 1px solid rgba(57, 58, 50,0.4); border-radius: var(--radius-xl); margin-bottom: var(--space-md); transition: border-color var(--transition-fast); }
.notice__item:hover { border-color: var(--color-outline); }
.notice__date { flex-shrink: 0; font-family: var(--font-label); font-size: 0.75rem; color: var(--color-outline); min-width: 80px; padding-top: 2px; }
.notice__title { font-family: var(--font-headline); font-size: var(--font-size-base); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-xs); }
.notice__desc { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.7; }
html.light .notice__item { background: #fff; border-color: #d1dae5; }
html.light .notice__item:hover { border-color: #6b7a90; }
html.light .notice__title { color: #141c2f; }
html.light .notice__desc { color: #334155; }
html.light .notice__date { color: #5a697f; }

/* ── Gallery Grid ── */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.gallery-item { background: rgba(35, 36, 29,0.5); border: 1px solid rgba(57, 58, 50,0.4); border-radius: var(--radius-xl); overflow: hidden; transition: border-color var(--transition-fast), transform var(--transition-fast); text-decoration: none; color: inherit; display: block; }
.gallery-item:hover { border-color: var(--color-outline); transform: translateY(-2px); }
.gallery-item__img { width: 100%; height: 200px; object-fit: cover; display: block; }
.gallery-item__placeholder { width: 100%; height: 200px; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-3xl); background: rgba(57, 58, 50,0.2); }
.gallery-item__info { padding: var(--space-md); }
.gallery-item__title { font-family: var(--font-headline); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-xs); }
.gallery-item__meta { font-size: 0.7rem; color: var(--color-outline); }
html.light .gallery-item { background: #fff; border-color: #d1dae5; }
html.light .gallery-item:hover { border-color: #6b7a90; }
html.light .gallery-item__placeholder { background: #f0f4f9; }
html.light .gallery-item__title { color: #141c2f; }
html.light .gallery-item__meta { color: #5a697f; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .home-hero__title { font-size: var(--font-size-2xl); }
  .home-hero__stats { gap: var(--space-lg); }
  .home-hero__stat-num { font-size: var(--font-size-xl); }
  .home-grid { grid-template-columns: 1fr; }
  .home-grid--small { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: 1fr; }
  .reviews__row { flex-direction: column; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .notice__item { flex-direction: column; gap: var(--space-sm); }
  .notice__date { min-width: auto; }
  .home-contact__row { flex-direction: column; }
}

@media (max-width: 480px) {
  .home-hero__title { font-size: var(--font-size-xl); }
  .home-hero__stats { gap: var(--space-md); }
  .home-grid--small { grid-template-columns: 1fr 1fr; }
}

/* ── Light Mode ── */
html.light .home-hero__title { color: #141c2f; }
html.light .home-hero__accent { color: #141c2f; }
html.light .home-hero__desc { color: #334155; }
html.light .home-hero__cta { background: #5b36d6; color: #fff; }   /* 밝은 보라 #7c4dff 는 가볍고 「AI 서비스」 느낌 → 진한 보라(2026-09-11) */
html.light .home-hero__cta:hover { background: #4a1fa6; }

html.light .home-notice {
  background: #fff;
  border-color: #d1dae5;
}
html.light .home-notice__title { color: #334155; }
html.light .home-notice__text { color: #141c2f; }
html.light .home-notice__date { color: #5a697f; }
html.light .home-notice__item { border-color: #dee5ed; }

html.light .home-section__title { color: #141c2f; }
html.light .home-section__desc { color: #334155; }

html.light .home-card {
  background: #fff;
  border-color: #d1dae5;
  backdrop-filter: none;
}
html.light .home-card:hover {
  border-color: #6b7a90;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
html.light .home-card__icon { filter: none; }
html.light .home-card__name { color: #141c2f; }
html.light .home-card__desc { color: #334155; }

html.light .home-card--disabled {
  opacity: 1;
  pointer-events: none;
}
html.light .home-card--disabled .home-card__name { color: #6b7a90; }
html.light .home-card--disabled .home-card__desc { color: #6b7a90; }
html.light .home-card--disabled .home-card__icon { opacity: 0.5; filter: grayscale(0.5); }

html.light .home-card__badge--live {
  color: #141c2f;
  border-color: #d1dae5;
  background: #edf1f7;
}
html.light .home-card__badge--soon {
  color: #6b7a90;
  border-color: #d1dae5;
  background: #f8fafc;
}

html.light .home-contact__input,
html.light .home-contact__textarea {
  background: #fff;
  border-color: #d1dae5;
  color: #141c2f;
}
html.light .home-contact__input::placeholder,
html.light .home-contact__textarea::placeholder { color: #6b7a90; }
html.light .home-contact__input:focus,
html.light .home-contact__textarea:focus { border-color: #7c4dff; box-shadow: 0 0 0 3px rgba(124,77,255,0.1); }
html.light .home-contact__submit { background: #7c4dff; color: #fff; }
html.light .home-contact__submit:hover { background: #6234cc; }

html.light .home-hero__stat-num { color: #7c4dff; }
html.light .home-hero__stat-label { color: #5a697f; }
html.light .home-hero__sub { color: #5a697f; }
html.light .home-hero__sub:hover { color: #141c2f; }
html.light .home-card__arrow { color: #6b7a90; }
html.light .home-card__tag { color: #5a697f; }
html.light .home-card__date { color: #6b7a90; }

/* ── Section Header (title + more link) ── */
.home-section__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.home-section__header .home-section__title { margin-bottom: 0; }
.home-section__more {
  font-family: var(--font-label);
  font-size: 0.8rem;
  color: var(--color-outline);
  text-decoration: none;
  transition: color var(--transition-fast);
  flex-shrink: 0;
}
.home-section__more:hover { color: var(--color-tertiary); }
html.light .home-section__more { color: #5a697f; }
html.light .home-section__more:hover { color: #0f766e; }

/* ── Review Preview Cards (home page) ── */
.home-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
@media (max-width: 768px) {
  .home-reviews-grid { grid-template-columns: 1fr; }
}
.home-review {
  padding: var(--space-lg);
  background: rgba(35, 36, 29, 0.4);
  border: 1px solid rgba(57, 58, 50, 0.35);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.home-review__type {
  display: inline-block;
  align-self: flex-start;
  padding: 0.15rem 0.5rem;
  font-family: var(--font-label);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-tertiary-dim);
  border: 1px solid rgba(93, 231, 211, 0.25);
  background: rgba(93, 231, 211, 0.06);
  border-radius: var(--radius-full);
  letter-spacing: 0.03em;
}
.home-review__content {
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-review__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(57, 58, 50, 0.25);
  font-size: 0.75rem;
}
.home-review__name { color: var(--color-text-muted); font-weight: 500; }
.home-review__date { color: var(--color-outline); }
html.light .home-review {
  background: #fff;
  border-color: #d1dae5;
}
html.light .home-review__type { color: #0f766e; border-color: rgba(13,148,136,0.3); background: rgba(13,148,136,0.05); }
html.light .home-review__content { color: #141c2f; }
html.light .home-review__footer { border-color: #dee5ed; }
html.light .home-review__name { color: #334155; }
html.light .home-review__date { color: #6b7a90; }

/* ── 빈 상태 라인 아이콘 ── */
.empty-state__icon { color: var(--color-primary); line-height: 0; }
.empty-state__icon svg { width: 3rem; height: 3rem; display: block; margin: 0 auto; }

/* ══ 강의 자료 (lecture.html) ══
   검색 · 탭 · 목록은 본문 컨테이너 폭을 그대로 쓴다.
   전에는 820px로 다시 좁혀서 로고·네비와 축이 어긋났다 (2026-07-26) */
.lec-search, .lec-tabs, .lec-list {
  width: 100%;
}
.lec-search { margin-bottom: 1.1rem; }
.lec-tabs { justify-content: flex-start; margin-bottom: 1.6rem; }   /* 검색창·목록과 같은 축에서 시작 */

/* 목록 — 테두리 상자를 쌓지 않고 얇은 구분선으로 잇는다 */
.lec-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}
.lec-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 1.1rem;
  padding: 1.15rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 0.16s ease, padding-left 0.16s ease;
}
.lec-row:hover { background: var(--color-surface); padding-left: 1.25rem; }
.lec-row__icon {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  flex: none;
  border-radius: 9px;
  background: rgba(239, 188, 112, 0.12);
  color: var(--color-primary);
}
.lec-row__icon .icon { width: 1.15rem; height: 1.15rem; }
.lec-row__body { display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; }
.lec-row__title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.lec-row__desc {
  font-size: 0.86rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lec-row__tag {
  flex: none;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(239, 188, 112, 0.1);
  border-radius: 999px;
  padding: 0.28em 0.8em;
  white-space: nowrap;
}
.lec-row__date {
  flex: none;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lec-row__arrow {
  flex: none;
  font-size: 1.05rem;
  color: var(--color-outline);
  transition: color 0.16s ease, transform 0.16s ease;
}
.lec-row:hover .lec-row__arrow { color: var(--color-primary); transform: translateX(3px); }

html.light .lec-list, html.light .lec-row { border-color: #dee5ed; }
html.light .lec-row:hover { background: #f0f4f9; }
html.light .lec-row__icon { background: rgba(124, 77, 255, 0.1); color: #7c4dff; }
html.light .lec-row__title { color: #141c2f; }
html.light .lec-row__tag { color: #7c4dff; background: rgba(124, 77, 255, 0.1); }

/* 좁은 화면에서는 주제·날짜를 접고 제목만 남긴다 */
@media (max-width: 640px) {
  .lec-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.8rem; padding: 1rem 0.5rem; }
  .lec-row__tag, .lec-row__date { display: none; }
  .lec-row__desc { white-space: normal; }
}

/* 강의 자료 히어로 — 위 여백을 줄여 목록이 첫 화면에 들어오게 한다 */
.lec-hero { padding: var(--space-2xl) 0 var(--space-lg); }
.lec-hero__desc {
  max-width: 640px;          /* 480px에서는 단어가 중간에서 잘렸다 */
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  word-break: keep-all;      /* 낱말 단위로 줄바꿈 */
}

/* 검색창 — 자료가 적을 때 화면의 주인공이 되지 않도록 낮춘다 */
.lec-search .search__input { padding-top: 0.8rem; padding-bottom: 0.8rem; font-size: 0.95rem; }


/* 어디까지 원문에서 확인했는지 — 슬라이드로 옮길 때 헷갈리지 않게 */


/* ── 프롬프트 모음 (2026-07-27) ──
   수업 중에 꺼내 쓰는 화면이다. 장식 대신 위계를 준다.
   절마다 번호를 붙이고 목차를 위에 둬서 “지금 어디인지”가 보이게 한다.
   프롬프트는 그 절 안에 둔다 — 설명과 떨어져 있으면 수업 중에 못 찾는다. */


/* ⚠️ 읽기 폭은 카드 바깥(.prompts-page)에 한 번만 준다.
   본문에만 주면 헤더는 넓고 본문은 좁아 끝선이 둘이 된다(2026-07-28에 두 번 물림). */
.pr-card__cat { font-family: var(--font-label); font-size: 0.7rem; font-weight: 600; color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--radius-full); padding: 0.15rem 0.6rem; }


/* 본문 절 */
.pr-sec { margin-top: var(--space-xl, 2rem); scroll-margin-top: 60px; }
.pr-sec__h { display: flex; align-items: baseline; gap: 0.5rem; font-family: var(--font-headline); font-size: 1.125rem; font-weight: 700; color: var(--color-text); margin: 0 0 0.6rem; padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.pr-sec__n { flex: none; min-width: 1.4rem; font-family: var(--font-label); font-size: 0.9rem; font-weight: 800; color: var(--color-primary); }
.pr-sec__p { color: var(--color-text-muted); margin: 0 0 0.7rem; line-height: 1.8; }
.pr-sec__list { margin: 0; padding-left: 1.2rem; color: var(--color-text-muted); line-height: 1.85; }
.pr-sec__list li { margin-bottom: 0.55rem; }
.pr-sec__list li::marker { color: var(--color-outline); }
.pr-code { font-family: ui-monospace, SFMono-Regular, Menlo, 'Noto Sans KR', monospace; font-size: 0.85em; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 4px; padding: 0.1em 0.35em; word-break: normal; }


/* 복사해 쓰는 프롬프트 */
.pr-boxes { margin-top: var(--space-md); display: flex; flex-direction: column; gap: 0.6rem; }
.pr-box { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.pr-box__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 0.45rem 0.7rem; background: var(--color-surface-dim); }
.pr-box__label { font-family: var(--font-label); font-size: 0.8125rem; font-weight: 600; color: var(--color-text); }
/* 코드 글꼴 스택에 'Noto Sans KR'을 monospace 앞에 — 없으면 한글이 시스템 대체 글꼴로 띄엄띄엄 그려진다 (2026-08-12, .pc__code와 같은 처방) */
.pr-box__text { margin: 0; padding: 0.8rem 0.9rem; font-family: ui-monospace, SFMono-Regular, Menlo, 'Noto Sans KR', monospace; font-size: 0.875rem; line-height: 1.75; color: var(--color-text); white-space: pre-wrap; word-break: break-word; }
.pr-copy { flex: none; padding: 0.28rem 0.75rem; font-family: var(--font-label); font-size: 0.75rem; font-weight: 600; color: #fff; background: var(--color-primary-dim); border: none; border-radius: var(--radius-full); cursor: pointer; transition: background var(--transition-fast); }
.pr-copy:hover { background: var(--color-primary); }
.pr-copy--done { background: #0f766e; }

.pr-closing { margin: var(--space-xl, 2rem) 0 0; padding-top: var(--space-md); border-top: 1px solid var(--color-border); font-size: 0.8125rem; color: var(--color-outline); line-height: 1.7; }


/* 결론 상자 — 슬라이드 첫 장이 되는 자리 (2026-07-27) */
.pr-conc { margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); border-left: 3px solid var(--color-primary); background: var(--color-surface-dim); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.pr-conc__h { font-family: var(--font-label); font-size: 0.7rem; font-weight: 700; color: var(--color-primary); letter-spacing: 0.06em; }
.pr-conc__list { margin: 0.5rem 0 0; padding-left: 1.2rem; color: var(--color-text); line-height: 1.8; font-weight: 500; }
.pr-conc__list li + li { margin-top: 0.35rem; }

/* 목록 앞말 — 긴 문장 목록은 앞말이 굵어야 훑을 수 있다 (2026-07-28) */
.pr-lead-w { color: var(--color-text); font-weight: 700; }

/* ── 프롬프트 모음: 왼쪽 목차 + 본문 (2026-07-28) ──
   ⚠️ 자료가 쌓이면 카드를 하나씩 펼쳐 보는 방식으로는 못 찾는다.
      2건일 때는 괜찮아 보여도 10건이면 못 쓴다. 목록을 왼쪽에 고정한다.
   ⚠️ 읽기 폭은 가장 바깥에 한 번만 준다. 안쪽 요소에 주면 끝선이 늘어난다. */
.prompts-page .search,
.prompts-page .tabs,
.prompts-page .pr-layout { max-width: 69rem; margin-inline: auto; }

.pr-body { min-width: 0; }   /* 격자 안에서 긴 낱말이 칸을 밀지 않게 */
.pr-layout { display: grid; grid-template-columns: 16.5rem 1fr; gap: var(--space-xl, 2rem); align-items: start; }

/* 왼쪽 목차 — 스크롤해도 따라온다
   ⚠️ overflow-y만 auto로 주면 overflow-x도 auto가 되어(CSS 규칙)
      긴 제목이 칸을 넘칠 때 가로 스크롤바가 생긴다. x는 못 박아 둔다. */
.pr-side { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.pr-side__title, .pr-side__sub { overflow-wrap: anywhere; }
/* ⚠️ 항목마다 같은 좌우 여백을 준다. 흰 상자를 바깥으로 당기면(음수 여백)
   칸 모서리에 붙어 좌우 틈이 사라진다(2026-07-28 지적). 상자는 칸 안에 들어와야 한다. */
.pr-side__item { padding: 0 0.85rem 0.5rem; }
.pr-side__item + .pr-side__item { border-top: 1px solid var(--color-border); padding-top: 0.75rem; }
.pr-side__row { display: flex; align-items: flex-start; gap: 0.25rem; }
.pr-side__doc { display: block; flex: 1; min-width: 0; text-align: left; padding: 0.4rem 0; background: none; border: none; cursor: pointer; }
/* 절 목차 접기 — 자료가 늘면 왼쪽이 길어진다. 안 보는 것은 접어 둔다 */
.pr-side__fold {
  flex: none; width: 24px; height: 24px; margin-top: 0.5rem; padding: 0;
  background: no-repeat center / 12px 12px; border: 1px solid var(--color-border);
  border-radius: 50%; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c4dff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.pr-side__fold:hover { border-color: var(--color-primary); }
.pr-side__item--fold .pr-side__fold { transform: rotate(-90deg); }
.pr-side__item--fold .pr-side__subs { display: none; }
.pr-side__cat { display: block; font-family: var(--font-label); font-size: 0.65rem; font-weight: 700; color: var(--color-outline); letter-spacing: 0.04em; }
.pr-side__title { display: block; margin-top: 0.15rem; font-family: var(--font-headline); font-size: 0.875rem; font-weight: 700; line-height: 1.45; color: var(--color-text-muted); transition: color var(--transition-fast); }
.pr-side__doc:hover .pr-side__title { color: var(--color-primary); }
.pr-side__item--on .pr-side__title { color: var(--color-text); }

.pr-side__subs { margin: 0.3rem 0 0; padding-left: 0; list-style: none; counter-reset: prside; }
.pr-side__subs li { counter-increment: prside; }
/* ⚠️ 지금 보는 절은 배경까지 깔아 준다. 글씨색과 선만으로는 스치듯 보면 놓친다 */
.pr-side__sub {
  display: block; position: relative;
  padding: 0.36rem 0.75rem 0.36rem 1.5rem; margin-left: 0;
  font-size: 0.8125rem; line-height: 1.5; color: var(--color-outline); text-decoration: none;
  border-left: 2px solid var(--color-border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.pr-side__sub::before { content: counter(prside); position: absolute; left: 0.6rem; font-family: var(--font-label); font-size: 0.65rem; }
.pr-side__sub:hover { color: var(--color-text); background: var(--color-surface-dim); }
/* ⚠️ 배경은 두 모드를 따로 정한다. 강조색 변수를 그대로 쓰면 다크에서
   민트 배경에 보라 글씨가 얹혀 1.73:1이 된다(2026-07-28에 물림). */
.pr-side__sub--on {
  color: #cbb6ff; font-weight: 700;
  border-left-color: var(--color-primary);
  background: rgba(239, 188, 112,0.16);
}
html.light .pr-side__sub--on { color: var(--color-primary); background: rgba(124,77,255,0.10); }

/* 고른 자료도 또렷하게 */
/* ⚠️ 고른 자료 상자는 안쪽 여백을 좌우로 넉넉히. 좁으면 접기 화살표가 모서리에 붙고
   아래 목록만 왼쪽에 몰려 어긋나 보인다(2026-07-28 지적). */
.pr-side__item--on {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 0.8rem 0.85rem 0.9rem;
  margin: 0 0 0.4rem;
}
.pr-side__item--on + .pr-side__item { border-top: none; }

/* 본문 */
/* 본문 안 출처 링크 — 입문서 .guide__intro a 와 같은 규칙(불투명 색, 라이트·다크 공용) */
.pr-doc a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}
.pr-doc a:hover { color: var(--color-tertiary-dim); }

.pr-doc { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-lg); }
.pr-doc .pr-sec:first-of-type .pr-sec__h { border-top: none; padding-top: 0; }

@media (max-width: 900px) {
  .pr-layout { grid-template-columns: 1fr; gap: var(--space-md); }

  /* ⚠️ 가로로 늘어놓지 않는다. 한글 제목은 길어서 칩에 안 맞고,
     가로 스크롤이 생기면 뒤에 뭐가 더 있는지 알 수 없다.
     세로 목록으로 두고 절 목차만 감춘다 — 절은 본문을 내려가며 보면 된다. */
  .pr-side { position: static; max-height: none; overflow: visible; }
  .pr-side__inner { display: block; }
  .pr-side__subs, .pr-side__fold { display: none; }

  .pr-side__item {
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: 0; margin: 0 0 0.5rem;
  }
  .pr-side__item + .pr-side__item { border-top: 1px solid var(--color-border); padding-top: 0; }
  .pr-side__item--on { border-color: var(--color-primary); background: var(--color-surface); }
  /* 손가락으로 누르는 자리는 넉넉해야 한다. 최소 44px */
  .pr-side__doc { padding: 0.7rem 0.9rem; min-height: 44px; }
  .pr-side__cat { font-size: 0.65rem; }
  .pr-side__title { font-size: 0.9375rem; line-height: 1.4; }

  .pr-doc { padding: var(--space-md); }
}

@media (max-width: 560px) {
  /* 휴대폰 — 글자와 여백을 한 단계 줄이고, 복사 버튼은 손가락 크기를 지킨다 */
  .prompts-page .search, .prompts-page .tabs, .prompts-page .pr-layout { max-width: none; }
  .pr-doc { padding: 0.9rem 0.85rem; border-radius: var(--radius-lg); }
  .pr-head__title { font-size: 1.1875rem; }
  .pr-head__lead { font-size: 0.9375rem; }
  .pr-conc { padding: 0.7rem 0.85rem; }
  .pr-conc__list { padding-left: 1.1rem; font-size: 0.9375rem; }
  .pr-sec { margin-top: 1.5rem; }
  .pr-sec__h { font-size: 1.0625rem; }
  .pr-sec__p, .pr-sec__list { font-size: 0.9375rem; }
  .pr-box__text { font-size: 0.78125rem; padding: 0.7rem 0.75rem; line-height: 1.7; }
  .pr-box__top { padding: 0.5rem 0.6rem; }
  .pr-copy { padding: 0.45rem 0.9rem; min-height: 34px; }
  .pr-closing { font-size: 0.78125rem; }
}

/* 자료 머리 (2026-07-28) — 사이드바 구조로 바꾸며 통째로 사라졌던 것 */
.pr-head__meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pr-head__date { font-family: var(--font-label); font-size: 0.75rem; color: var(--color-outline); }
.pr-head__title { font-family: var(--font-headline); font-size: 1.5rem; font-weight: 800; color: var(--color-text); margin: 0.35rem 0 0; letter-spacing: -0.01em; line-height: 1.35; }
.pr-head__lead { font-size: 1rem; color: var(--color-primary); font-weight: 600; margin: 0.4rem 0 0; }
.pr-doc > .pr-conc { margin-top: var(--space-lg); }
@media (max-width: 640px) { .pr-head__title { font-size: 1.25rem; } .pr-head__lead { font-size: 0.9375rem; } }

/* ══ 홈 개편 (2026-09-11) ══════════════════════════════════════════════
   index.html(홈) · work.html(하는 일) · about.html(소개) · tools.html(도구) 의 <div class="home home--main"> 에만 걸린다.
   홈은 그림까지만 보여 주고(2026-09-11 은아님) 하는 일·소개·자료·문의는 각 메뉴 페이지에 둔다.
   .home-section · .home-hero 는 소개·강의·도구 페이지도 함께 쓰므로 반드시 .home--main 으로 한정할 것.
   구성 근거: UI/UX Pro Max「신뢰·권위형」— 머리(경력) → 해결책 → 분명한 문의 동선, 스위스 미니멀 */

/* 한 문장이 두 줄로 꺾일 때 끝말만 홀로 남지 않게 줄 길이를 고르게 나눈다 */
.home--main .home-hero__desc { text-wrap: balance; }
.home--main .nowrap { white-space: nowrap; }   /* “교육 / 프로그램”처럼 한 덩어리 낱말이 갈리지 않게 */

/* 버튼 둘 — 채운 버튼(문의) + 테두리 버튼(하는 일). html.light .home-hero__cta(0,2,1)의 보라 채움보다 높게 */
.home--main .home-hero__actions { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }
.home--main .home-hero__cta.home-hero__cta--ghost { color: var(--color-text); background: transparent; border: 1px solid var(--color-outline); }
.home--main .home-hero__cta.home-hero__cta--ghost:hover { background: var(--color-surface); }

/* 그림 세 장 부채 — 임시 선 그림. 현장 사진이 생기면 바꿔 끼운다 */
:root { --ill-bg:#1d1e19; --ill-blob:#1a2560; --ill-paper:#1f2a66; --ill-ink:#eae7dd; --ill-soft:#48538f; --ill-accent:#efbc70; --ill-accent-soft:#3a2f7a; }
html.light { --ill-bg:#ffffff; --ill-blob:#eef2f7; --ill-paper:#ffffff; --ill-ink:#1e293b; --ill-soft:#cbd5e1; --ill-accent:#7c4dff; --ill-accent-soft:#ebe5ff; }
.hero-fan { display: flex; justify-content: center; align-items: center; max-width: 41rem; margin: var(--space-2xl) auto 0; padding-bottom: 24px; }
.hero-fan__card { position: relative; flex-shrink: 0; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--ill-bg); border: 1px solid var(--ill-soft); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 28px -16px rgba(15, 23, 42, 0.30); }
.hero-fan__card svg { display: block; width: 100%; height: 100%; }
/* 그림은 하는 일 페이지로 가는 링크다. 기울기(transform)는 건드리지 않고 테두리·그림자로만 알린다 */
a.hero-fan__card { transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
a.hero-fan__card:hover { border-color: var(--color-outline); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 16px 32px -14px rgba(15, 23, 42, 0.38); }
a.hero-fan__card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.hero-fan__card--l { width: 38%; margin-right: -2rem; z-index: 1; transform: translateY(24px) rotate(-6deg); }
.hero-fan__card--m { width: 42%; z-index: 2; transform: translateY(-8px); }
.hero-fan__card--r { width: 38%; margin-left: -2rem; z-index: 1; transform: translateY(24px) rotate(6deg); }
@media (max-width: 640px) {
  /* 기울어진 카드가 좌우 여백(16px)을 넘지 않게 폭을 줄인다 */
  .hero-fan__card--l, .hero-fan__card--r { width: 34%; }
  .hero-fan__card--m { width: 38%; }
  .hero-fan__card--l { margin-right: -1rem; }
  .hero-fan__card--r { margin-left: -1rem; }
}

/* 부드러운 등장 — 페이지가 열릴 때 한 번. 스크롤 감지는 쓰지 않는다(헤드리스에서 검증이 안 된다) */
@keyframes homeHeroIn { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes homeFanL { from { opacity: 0; transform: translate(48px, 24px) rotate(-6deg); } to { opacity: 1; transform: translateY(24px) rotate(-6deg); } }
@keyframes homeFanM { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(-8px); } }
@keyframes homeFanR { from { opacity: 0; transform: translate(-48px, 24px) rotate(6deg); } to { opacity: 1; transform: translateY(24px) rotate(6deg); } }
.home--main .home-hero__title   { animation: homeHeroIn .5s cubic-bezier(.22,1,.36,1) .05s both; }
.home--main .home-hero__desc    { animation: homeHeroIn .5s cubic-bezier(.22,1,.36,1) .15s both; }
.home--main .home-hero__actions { animation: homeHeroIn .5s cubic-bezier(.22,1,.36,1) .25s both; }
.hero-fan__card--m { animation: homeFanM .6s cubic-bezier(.22,1,.36,1) .45s both; }
.hero-fan__card--l { animation: homeFanL .6s cubic-bezier(.22,1,.36,1) .55s both; }
.hero-fan__card--r { animation: homeFanR .6s cubic-bezier(.22,1,.36,1) .55s both; }
@media (prefers-reduced-motion: reduce) {
  .home--main .home-hero__title, .home--main .home-hero__desc, .home--main .home-hero__actions, .hero-fan__card { animation: none; }
}

/* 섹션 사이 간격 하나로 — 시안에서 재 보니 48·64·96·101·64px 로 들쭉날쭉했다. 데스크톱 96 · 모바일 64 */
.home--main .home-hero { padding-bottom: clamp(4rem, 8vw, 6rem); }
.home--main > .home-section { margin-bottom: clamp(4rem, 8vw, 6rem); }
.home--main > .home-section:last-child { margin-bottom: 0; }

/* 섹션 제목·설명 가운데 — 머리·세 칸 제목·인용문과 같은 축. 긴 설명은 두 줄 길이를 고르게 */
.home--main .home-section > .home-section__title,
.home--main .home-section > .home-section__desc,
.home--main .home-section__note { text-align: center; }
.home--main .home-section > .home-section__desc { max-width: 40rem; margin-left: auto; margin-right: auto; text-wrap: balance; word-break: keep-all; }
/* 안내 한 줄 — 섹션 설명 바로 아래에 붙인다. 설명보다 한 단계 작고 옅게 */
.home--main .home-section__desc--tight { margin-bottom: var(--space-xs); }
.home--main .home-section__note { margin: 0 0 var(--space-xl); font-size: 0.8125rem; color: var(--color-outline); }

/* 하는 일 — 서비스 세 칸. 링크가 아니므로 떠오르는 효과를 주지 않는다 */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
@media (max-width: 860px) { .svc-grid { grid-template-columns: 1fr; } }
.svc { padding: var(--space-xl); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; scroll-margin-top: 6rem; }
/* 눌리는 칸(소개 페이지) — 하는 일 페이지의 해당 칸으로 간다 */
a.svc { display: block; text-decoration: none; color: var(--color-text); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
a.svc:hover { border-color: var(--color-outline); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 16px -8px rgba(15, 23, 42, 0.18); }
a.svc .svc__head { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--space-sm); }
.svc__more { display: block; text-align: center; font-family: var(--font-label); font-size: var(--font-size-sm); color: var(--color-outline); }
a.svc:hover .svc__more { color: var(--color-text); }
.about-extra { margin: var(--space-lg) 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); word-break: keep-all; }

/* 홈의 그림을 눌러 도착한 칸 — 어디로 왔는지 보이게 */
.svc:target { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.12); }

/* 소개 페이지 — 원고 상자를 가운데로, 역할 줄은 청록 대신 중립색(홈에서 청록을 걷어낸 것과 같은 이유) */
.home--main .about-profile { margin-left: auto; margin-right: auto; border-radius: 12px; }
.home--main .about-profile__role, html.light .home--main .about-profile__role { color: var(--color-outline); }
.home--main .about-extra { text-align: center; }

/* 하는 일 · 소개 · 도구 페이지 머리 — 홈 머리보다 아래 여백을 줄인다(그림이 없다) */
.home--main .home-hero--page { padding-bottom: var(--space-2xl); }
/* 제목부만 가운데 — 아이콘을 제목 위로 쌓고, 구분선으로 아래 본문(왼쪽 정렬)과 나눈다 */
.svc__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-sm); padding-bottom: var(--space-md); margin-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); }
.svc__head .home-card__icon { margin-bottom: 0; line-height: 0; }
.svc__name { font-family: var(--font-headline); font-size: var(--font-size-lg); font-weight: 700; color: var(--color-text); margin: 0; }
.svc__desc { font-size: var(--font-size-sm); line-height: 1.7; color: var(--color-text-muted); margin: 0 0 var(--space-md); word-break: keep-all; text-wrap: balance; }
.svc__list { list-style: none; margin: 0 0 var(--space-md); padding: 0; }
.svc__list li { position: relative; padding-left: 0.9rem; font-size: var(--font-size-sm); line-height: 1.7; color: var(--color-text-muted); word-break: keep-all; }
.svc__list li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 4px; height: 4px; border-radius: 50%; background: var(--color-outline); }
.svc__for { margin: 0; padding-top: var(--space-md); border-top: 1px solid var(--color-border); font-size: 0.8rem; line-height: 1.6; color: var(--color-text-muted); word-break: keep-all; }
.svc__for b { color: var(--color-text); font-weight: 700; margin-right: 0.35rem; }

/* 이렇게 일합니다 — 제목 왼쪽 · 설명 오른쪽. 위 세 칸과 모양을 달리해 리듬을 준다 */
.ways { border-top: 1px solid var(--color-border); margin-top: var(--space-lg); }
.ways__item { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-border); }
@media (max-width: 760px) { .ways__item { grid-template-columns: 1fr; gap: var(--space-xs); } }
.ways__title { font-family: var(--font-headline); font-size: var(--font-size-base); font-weight: 700; color: var(--color-text); margin: 0; word-break: keep-all; }
.ways__text { font-size: var(--font-size-sm); line-height: 1.8; color: var(--color-text-muted); margin: 0; max-width: 40rem; word-break: keep-all; }

/* 소개 요약 — 가운데 정렬. 이름은 사이트 보조색(청록) 대신 본문 회색 — 홈에서는 청록이 이 한 곳뿐이라 튀었다 */
.home-closing { text-align: center; }
.home-closing__name { margin: var(--space-sm) 0 var(--space-lg); font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* 가로형 카드(도구 페이지) — 모서리만 맞춘다. 태그·대상 줄이 있으므로 칸 배치는 원래 규칙 그대로 */
.home--main .home-grid--rows .home-card { border-radius: 12px; }
html.light .home--main .home-card:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 16px -8px rgba(15, 23, 42, 0.18); }

/* 문의 — 마지막 행동 자리. 한 덩어리로 묶고 가운데로 쌓는다 */
.ask-box { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-2xl) var(--space-xl); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; }
.ask-box .home-section__title { margin-bottom: var(--space-sm); }
.home-ask__mail { font-family: var(--font-label); font-size: var(--font-size-sm); color: var(--color-text-muted); margin: var(--space-sm) 0 var(--space-lg); }
.home-ask__mail a { color: inherit; }

/* 홈 머리 이름 줄 — 「교육 기획·운영 전문가 김은아 · 은아모아」(2026-09-13 엔터티) */
.home--main .home-hero__kicker { font-family: var(--font-label); font-size: var(--font-size-sm); font-weight: 600; letter-spacing: 0.02em; color: var(--color-primary); margin: 0 0 var(--space-sm); word-break: keep-all; }

/* 진행 과정 — 하는 일 ⑤. 네 단계 가로, 좁으면 세로 */
.home--main .steps { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); counter-reset: step; }
@media (max-width: 900px) { .home--main .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .home--main .steps { grid-template-columns: minmax(0, 1fr); } }
.home--main .steps__item { position: relative; padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; }
.home--main .steps__num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary); color: #fff; font-family: var(--font-label); font-size: var(--font-size-sm); font-weight: 700; margin-bottom: var(--space-sm); }
.home--main .steps__title { font-family: var(--font-headline); font-size: var(--font-size-base); font-weight: 700; color: var(--color-text); margin: 0 0 var(--space-xs); word-break: keep-all; }
.home--main .steps__text { font-size: var(--font-size-sm); line-height: 1.7; color: var(--color-text-muted); margin: 0; word-break: keep-all; }
/* 소개 「걸어온 길」 안의 링크 — 브라우저 기본 파랑 차단(2026-09-09 규칙) */
.home--main #path a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 0.2em; }

/* ══ 홈 덩어리 ②–⑤ (2026-09-13 홈페이지형) — .home--landing 안에서만 ══ */
.home--landing .home-hero { margin-bottom: var(--space-3xl); }
.home--landing .home-landing__more { margin: var(--space-lg) 0 0; text-align: center; }
.home--landing .home-section__more { font-family: var(--font-label); font-size: var(--font-size-sm); color: var(--color-primary); text-decoration: none; }
.home--landing .home-section__more:hover { text-decoration: underline; text-underline-offset: 0.2em; }
/* ③ 브랜드 띠 */
.home--landing .brand { padding: var(--space-2xl); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; }
.home--landing .brand__grid { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
@media (max-width: 760px) { .home--landing .brand { padding: var(--space-xl); } .home--landing .brand__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } }
.home--landing .brand__word { display: flex; flex-direction: column; gap: var(--space-xs); }
.home--landing .brand__ko { font-family: var(--font-headline); font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--color-text); }
.home--landing .brand__en { font-family: 'Playfair Display', Georgia, serif; font-size: 1.9rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.1; color: var(--color-text); }
.home--landing .brand__lead { font-family: var(--font-headline); font-size: var(--font-size-lg); font-weight: 700; line-height: 1.5; color: var(--color-text); margin: 0 0 var(--space-lg); word-break: keep-all; }
.home--landing .brand__list { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: grid; gap: var(--space-md); }
.home--landing .brand__list li { font-size: var(--font-size-sm); line-height: 1.7; color: var(--color-text-muted); word-break: keep-all; padding-left: var(--space-md); border-left: 2px solid var(--color-border); }
.home--landing .brand__list li b { display: block; font-weight: 700; color: var(--color-text); margin-bottom: 2px; }
/* ④ 자료 카드 세 칸 */
.home--landing .home-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .home--landing .home-grid--three { grid-template-columns: minmax(0, 1fr); } }
.home--landing .home-grid--three .home-card { display: flex; flex-direction: column; }
.home--landing .home-grid--three .home-card__meta { margin-top: auto; }

/* 교육 문의 페이지 — 홈·하는 일 상자와 같은 말(2026-09-13) */
.home-contact__hint { font-size: 0.8rem; line-height: 1.6; color: var(--color-text-muted); margin: var(--space-sm) 0 0; word-break: keep-all; }
.home-contact__hint a { color: var(--color-primary); white-space: nowrap; }
.home-contact__success--error { color: var(--color-danger); }
.home-contact__success--error a { color: inherit; }

/* 홈 덩어리 고르기 탭 (2026-09-13) — 고른 덩어리만 보인다 */
.home--landing .home-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-md); margin: 0 0 var(--space-2xl); border-bottom: 1px solid var(--color-border); }
.home--landing .home-tabs__btn { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: var(--space-sm) var(--space-xs); font-family: var(--font-label); font-size: var(--font-size-base); font-weight: 600; color: var(--color-text-muted); cursor: pointer; word-break: keep-all; transition: color var(--transition-fast), border-color var(--transition-fast); }
.home--landing .home-tabs__btn:hover { color: var(--color-text); }
.home--landing .home-tabs__btn[aria-pressed="true"] { color: var(--color-text); border-bottom-color: var(--color-primary); }
.home--landing .home-tabs__btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }

/* ══ 가독성 (2026-09-13 은아님 「글이 안 읽힘, 너무 흐림」) ══
   실측: 본문 14px·400·회색, 대상·푸터·안내 12.8px, 카드 날짜 10.4px에 대비 2.5:1.
   색은 통과했는데 크기·굵기가 얇았다. 설명 글 15px·500, 작은 글자 한 단계 위로 */
.home .home-section__desc, .home .svc__desc, .home .svc__list li, .home .ways__text, .home .steps__text, .home .home-card__desc, .home .brand__list li, .home .about-extra, .home .home-closing__name, .home .home-ask__mail, .home .home-landing__more a, .home .home-section__more { font-size: 0.9375rem; font-weight: 500; }
.home .home-landing__more a, .home .home-section__more { color: var(--color-primary); }
.home .svc__for, .home .home-contact__hint, .home .home-card--small .home-card__desc { font-size: 0.875rem; font-weight: 500; }
.home .home-card__level { font-size: 0.8rem; font-weight: 500; }
.home .home-card__date { font-size: 0.75rem; color: var(--color-text-muted); }
.home .home-contact__input, .home .home-contact__textarea { font-size: 1rem; }
.footer__line { font-size: 0.875rem; }

/* 소개 상자 — 글줄 폭에 맞춰 줄이고(양옆이 비어 보였다), 줄마다 아래에서 올라온다 (2026-09-13 은아님) */
.home--main .about-profile { max-width: 44rem; }
.about-statement__line { display: block; opacity: 0; transform: translateY(14px); animation: homeHeroIn .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(0.15s + var(--i, 0) * 0.09s); }
@media (prefers-reduced-motion: reduce) { .about-statement__line { animation: none; opacity: 1; transform: none; } }

/* 모바일 — 홈 탭은 한 줄에 넷이 들어가게 글자를 줄이고 사이를 좁힌다 (2026-09-13) */
@media (max-width: 480px) { .home--landing .home-tabs { gap: var(--space-xs) var(--space-sm); } .home--landing .home-tabs__btn { font-size: 0.875rem; padding: var(--space-sm) 2px; } }