/* ═══════════════════════════════════════════════════════════
   4-4 공개 페이지 (홈·소개) — 브랜드가이드 v3의 값만 사용 (새 색 없음)
   목업 v1.5 (3_설계/목업_미리보기.html 화면 1·2)의 부품을 실제 CSS로 옮김.
   모바일 우선 · 데스크톱 규칙은 04_와이어프레임.md v1.3 "데스크톱 확장 규칙".
   ═══════════════════════════════════════════════════════════ */

/* ── 섹션 구획 (얇은 1px 라인 — 2-5 "박스 남발 금지") ── */
.sec { padding: 26px 0; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec .h2 {
  font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700;
  color: var(--charcoal); margin: 0 0 6px;
}
/* 투톤 — 확정 방향: 앞 Gray(날것) → 뒤 Charcoal(완성) (2026-08-08, 2-5) */
.tone-raw { color: var(--gray); }
.h3 { font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--charcoal); margin: 0; }
.body-text { font-size: 16px; line-height: 1.6; color: var(--charcoal); margin: 0; }
.sub { font-size: 14px; line-height: 1.6; color: var(--slate); margin: 0; }
.meta { font-size: 12px; line-height: 1.4; color: var(--gray); margin: 0; }
.sort-caption { font-size: 12px; color: var(--gray); margin: 2px 0 0; } /* 티저 정렬 캡션 (10차 B-2) */
/* 소담수담 보조 병기 — 하단 설명 문구 레벨 (2026-08-09 사용자 지시) */
.h2 .h2-sub { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--gray); }

/* ── 좌측 세로 섹션 라벨 (22차 — 샘플사이트_스크랩북 UI · 데스크톱 전용 장식) ── */
.hero, .sec { position: relative; }
[data-label]::before {
  content: attr(data-label);
  position: absolute; left: -34px; top: 30px;
  writing-mode: vertical-rl;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--gray); opacity: .6;
  pointer-events: none; user-select: none;
}
@media (max-width: 1120px) { [data-label]::before { display: none; } }

/* 대문자 마이크로 라벨 — `:` 오렌지 콜론 (2-5) */
.mlabel { font-size: 11px; letter-spacing: 0.2em; color: var(--gray); font-weight: 500; margin: 0; }
.mlabel .oc { color: var(--orange); font-weight: 700; }

/* ── 히어로 (여백 48px급 — 목업 ③-3) ── */
.hero { padding: 48px 0 12px; }
.hero h1 {
  font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 800;
  color: var(--charcoal); margin: 0; text-wrap: balance;
}
.hero .hero-sub { font-size: 13px; letter-spacing: 0.06em; color: var(--gray); margin: 12px 0 0; }
.hero .mlabel { margin-top: 6px; }

/* ── CTA·버튼 (블록형 — 목업 화면 1·2) ── */
.cta-row { margin: 14px 0; }
.btn-blk {
  display: flex; align-items: center; justify-content: center; height: 44px;
  border-radius: 8px; font-size: 15px; font-weight: 700; text-decoration: none;
}
.btn-blk--cta { background: var(--orange); color: #fff; }        /* 화면당 1개 */
.btn-blk--cta:hover { background: var(--amber); }
.btn-blk--primary { background: var(--deep-green); color: #fff; font-size: 14px; }
.btn-blk--primary:hover { background: var(--teal); }
.btn-blk--secondary {
  background: var(--panel); color: var(--deep-green); font-size: 14px;
  border: 1.5px solid var(--deep-green);
}
.btn-blk.is-soon { opacity: .55; cursor: default; }
.cta-note { font-size: 14px; color: var(--slate); text-align: center; margin: 14px 0; }

/* ── 스탯 행 (1px 라인 구획 — 모바일 2×2, 데스크톱 4열) ── */
.stats {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin: 20px 0 4px;
}
.stats .stat { padding: 14px 16px; }
.stats .stat:nth-child(odd) { border-right: 1px solid var(--line); }
.stats .stat:nth-child(1), .stats .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
.stats .num {
  font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--charcoal); line-height: 1.2;
}
.stats .num small { font-size: 12px; font-weight: 600; color: var(--slate); margin-left: 2px; }
.stats .lbl { font-size: 11px; letter-spacing: 0.1em; color: var(--gray); margin-top: 4px; }

/* ── 카드·목록 행 (그림자 대신 1px 테두리) ── */
.pcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.list-wrap {
  margin: 10px 0 0; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: var(--panel);
}
.list-wrap .row { padding: 12px 16px; border-top: 1px solid var(--line); background: var(--panel); }
.list-wrap .row:first-child { border-top: none; }
.row.pin { background: var(--mint); }
.row .h4 { font-size: 15px; font-weight: 600; color: var(--charcoal); display: inline; line-height: 1.4; }
.row .meta { margin-top: 4px; }
.row-empty { color: var(--gray); font-size: 13px; }

/* ── 태그·뱃지·말머리 ── */
.tag {
  display: inline-block; background: var(--mint); color: var(--deep-green);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 500;
}
.badge-o {
  display: inline-block; background: var(--orange); color: #fff;
  border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700;
}
.badge-g {
  display: inline-block; background: var(--deep-green); color: #fff;
  border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 500;
}
/* 말머리 위계 (10차 ㊸ — 공지 채움 > 소식 Teal 채움 > 후기→질문→자유 하강) */
.prefix, .prefix-notice, .prefix-news, .prefix-sp {
  display: inline-block; border-radius: 4px; padding: 1px 7px;
  font-size: 11px; margin-right: 6px; vertical-align: 1px;
}
.prefix { border: 1px solid var(--deep-green); color: var(--deep-green); font-weight: 500; }
.prefix-notice { background: var(--deep-green); color: #fff; font-weight: 700; }
.prefix-news { background: var(--teal); color: #fff; font-weight: 700; }
.prefix-sp { font-weight: 500; }
.prefix-sp::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 4px; vertical-align: 1px;
}
.sp1 { border: 1px solid var(--slate); color: var(--slate); }   /* 후기 */
.sp1::before { background: var(--amber); }
.sp2 { border: 1px solid var(--gray); color: var(--gray); }     /* 질문 */
.sp2::before { background: var(--yellow); }
.sp3 { border: 1px solid var(--faint); color: var(--gray); }    /* 자유 */
.sp3::before { background: var(--gray); }

/* ── '준비중' 플레이스홀더 (확정 — Deep Green + Off White) ── */
.soon-box {
  background: var(--deep-green); border-radius: 8px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: var(--off-white); min-height: 110px;
}
.soon-box b { font-size: 15px; letter-spacing: 0.1em; }
.soon-box span { font-size: 10px; opacity: .7; margin-top: 3px; }

/* ── 아카이빙 티저 — 썸네일만 (10차 ㉥ · 모바일 2열, 데스크톱 벤토) ── */
.archive-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.archive-teaser .thumb {
  border-radius: 8px; overflow: hidden; min-height: 110px;
  background: var(--line); display: block;
}
.archive-teaser .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── 카카오 오픈채팅 배너 (Mint 정보 박스 ㉱ + 카카오 아이콘 ㊽) ── */
.kakao-banner {
  display: flex; align-items: center; gap: 10px; background: var(--mint);
  color: var(--deep-green); border-radius: 12px; padding: 12px 14px;
  margin: 20px 0 0; font-size: 14px; font-weight: 700; text-decoration: none;
}
.kakao-banner .kicon-lg {
  flex: none; display: inline-flex; width: 28px; height: 28px; border-radius: 7px;
  background: #FEE500; align-items: center; justify-content: center;
}
.kakao-banner .kicon-lg svg { width: 17px; height: 16px; display: block; }

/* ── 매드리그 인증마크 배너 (흰 카드 ㉯ · 12차 문구) ── */
.mad-banner {
  margin: 20px 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; font-size: 13px; color: var(--slate); line-height: 1.7;
}
.mad-banner .mad-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.mad-banner .mad-logo {
  /* 원본 로고 251x114(배경 투명) → 높이 35px (사용자 지정) */
  display: block; height: 35px; width: auto; flex: none;
}
/* 강조 없이 — 배너 본문과 같은 크기·굵기·색 (로고가 강조를 맡는다) */
.mad-banner .mad-desc { font-size: 13px; font-weight: 400; color: var(--slate); }
.mad-banner .regions { font-size: 11px; color: var(--gray); display: block; margin-top: 4px; }
.mad-banner .mad-link {
  color: var(--deep-green); display: block; margin-top: 6px; font-weight: 700;
  text-decoration: none;
}
.mad-banner .mad-link:hover { text-decoration: underline; }

/* ── 소개 — Think·Design·Action 유기적 연결 (3원 중첩 + 연결선) ── */
.venn { display: flex; justify-content: center; padding: 10px 0 2px; }
.venn i { width: 48px; height: 48px; border-radius: 50%; opacity: .55; }
.venn i + i { margin-left: -15px; }
.venn .v-think { background: var(--yellow); }
.venn .v-design { background: var(--orange); }
.venn .v-action { background: var(--deep-green); }
.tda { display: flex; flex-direction: column; margin-top: 12px; }
.tda .pcard { flex: 1; }
.tda .pcard .vdot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 6px;
}
.tda .pcard.c-think { border-left: 4px solid var(--yellow); }
.tda .pcard.c-design { border-left: 4px solid var(--orange); }
.tda .pcard.c-action { border-left: 4px solid var(--deep-green); }
.tda .pcard .sub { margin-top: 4px; }
.tda .pcard .desc { font-size: 13px; color: var(--gray); margin: 6px 0 0; line-height: 1.6; }
.tda-link { width: 2px; height: 16px; background: var(--mint); margin: 0 auto; }

/* ── 소개 — 4단계 수렴 다이어그램 (㊴ — 라인이 굵어지며 실행으로 수렴) ── */
.conv { display: flex; align-items: center; padding: 10px 0 2px; }
.conv .cnode {
  width: 12px; height: 12px; border-radius: 50%; background: var(--page);
  border: 2px solid var(--deep-green); flex: none;
}
.conv .cnode.f2 { background: var(--mint); }
.conv .cnode.f3 { background: var(--teal); border-color: var(--teal); }
.conv .cnode.big { width: 24px; height: 24px; background: var(--deep-green); border-color: var(--deep-green); }
.conv .cline { flex: 1; border-radius: 2px; }
.conv .l1 { height: 2px; background: var(--line); }
.conv .l2 { height: 3px; background: var(--mint); }
.conv .l3 { height: 5px; background: var(--teal); }
.conv-lbl { display: flex; margin-top: 6px; }
.conv-lbl span { flex: 1; text-align: center; font-size: 11px; color: var(--gray); }
.conv-lbl span:last-child { font-weight: 700; color: var(--deep-green); }
.conv-steps { margin: 14px 0 0; padding: 0; list-style: none; }
.conv-steps li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--slate); }
.conv-steps li b { color: var(--charcoal); margin-right: 8px; }

/* ── 소개 — 운영 특징·등급 안내 ── */
.feature-list .row .meta { font-size: 13px; color: var(--slate); line-height: 1.6; }
.salon-logo { height: 44px; display: block; margin: 0 0 10px; }

/* ── 게시판 흐름 강조 — 스크랩→아이디어→프로젝트→소담수담→이어달리기 (4-8) ──
   스크랩→프로젝트는 카드가 점점 작아지며 좁아지는(포커싱) 느낌,
   소담수담은 책꽂이처럼 나란히 선 얇은 막대(책등)로 표현. 새 색 없이 기존 토큰만. */
.flow-sec .sub { max-width: 640px; }
.flow-funnel {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-top: 22px; padding: 20px 10px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px;
}
.flow-stage { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fs-cards { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.fs-cards i { display: block; border-radius: 3px; background: var(--line); }
.fs-scrap .fs-cards i { width: 20px; height: 15px; }
.fs-idea .fs-cards i { width: 17px; height: 18px; background: var(--mint); }
.fs-project .fs-cards i { width: 13px; height: 23px; background: var(--teal); opacity: .85; }
/* 소담수담 = 책꽂이 — 얇은 막대가 나란히, 높이가 들쭉날쭉해 '꽂힌 책'처럼 */
.fs-shelf { display: flex; align-items: flex-end; gap: 2px; height: 26px; border-bottom: 2px solid var(--charcoal); padding-bottom: 1px; }
.fs-shelf i { width: 6px; border-radius: 2px 2px 0 0; background: var(--deep-green); }
.fs-shelf i:nth-child(2), .fs-shelf i:nth-child(4) { background: var(--teal); }
.fs-shelf i:nth-child(1) { height: 18px; }
.fs-shelf i:nth-child(2) { height: 24px; }
.fs-shelf i:nth-child(3) { height: 15px; }
.fs-shelf i:nth-child(4) { height: 22px; }
.fs-shelf i:nth-child(5) { height: 17px; }
.fs-label { font-size: 12px; font-weight: 700; color: var(--charcoal); }
.fs-note { font-size: 10px; color: var(--gray); }
.fs-arrow { color: var(--faint); font-size: 15px; transform: rotate(90deg); }
.flow-relay {
  margin-top: 14px; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--slate);
  background: var(--page); border: 1px dashed var(--line); border-radius: 10px; padding: 10px 14px;
}
.flow-relay b { color: var(--deep-green); }
.flow-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.chip-link {
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; font-size: 12px;
  color: var(--deep-green); text-decoration: none; background: var(--panel); transition: border-color .15s ease, color .15s ease;
}
.chip-link:hover { border-color: var(--teal); color: var(--teal); }
@media (min-width: 600px) {
  .flow-funnel { flex-direction: row; justify-content: center; gap: 16px; padding: 26px 20px; }
  .fs-arrow { transform: none; }
}

/* ── 홈 티저 인터랙션 (4-8) — 과하지 않은 재미: 순차 페이드인 + 살짝 뜨는 hover ──
   .reveal·.in-view는 JS(static/js/home.js)가 붙인다 — JS 없이도 콘텐츠는 그대로 보인다. */
.sec.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.sec.reveal.in-view { opacity: 1; transform: none; }
.sec.reveal.in-view .archive-teaser > *,
.sec.reveal.in-view .teaser-cards > *,
.sec.reveal.in-view .list-wrap .row {
  animation: teaser-rise .45s ease both;
}
.sec.reveal .archive-teaser > *:nth-child(1), .sec.reveal .teaser-cards > *:nth-child(1), .sec.reveal .list-wrap .row:nth-child(1) { animation-delay: .04s; }
.sec.reveal .archive-teaser > *:nth-child(2), .sec.reveal .teaser-cards > *:nth-child(2), .sec.reveal .list-wrap .row:nth-child(2) { animation-delay: .10s; }
.sec.reveal .archive-teaser > *:nth-child(3), .sec.reveal .teaser-cards > *:nth-child(3), .sec.reveal .list-wrap .row:nth-child(3) { animation-delay: .16s; }
.sec.reveal .archive-teaser > *:nth-child(4), .sec.reveal .teaser-cards > *:nth-child(4), .sec.reveal .list-wrap .row:nth-child(4) { animation-delay: .22s; }
@keyframes teaser-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

.pcard, .archive-teaser .thumb, .kakao-banner {
  transition: transform .18s ease, border-color .18s ease;
}
.pcard:hover, .archive-teaser a.thumb:hover { transform: translateY(-3px); border-color: var(--teal); }
.kakao-banner:hover { transform: translateY(-2px); }
.list-wrap .row { transition: background-color .15s ease; }
.list-wrap .row:not(.pin):hover { background: var(--page); }
.list-wrap .row a.h4 { transition: color .15s ease; }
.list-wrap .row a.h4:hover { color: var(--teal); }

/* 스탯 숫자 카운트업 (JS가 0→목표값으로 채운다 — data-target 없으면 정적 숫자 그대로) */
.stats .num .count-up { display: inline-block; min-width: 1ch; }

/* ── 다크모드 파생 (21차 — 브랜드가이드 2-7) ──
   Deep Green '텍스트'와 Mint '면'은 니어블랙 위 대비가 부족해 다크 파생값으로 교체.
   파생값 3종은 2-7 표에 등재: 그린 텍스트 #7FC4B7 · Mint 면 #1E3B35 · 링크 #4DB6A5 */
@media (prefers-color-scheme: dark) {
  .row.pin { background: #1E3B35; }
  .kakao-banner { background: #1E3B35; color: var(--mint); }
  .btn-blk--secondary { color: var(--mint); border-color: var(--teal); }
  .chip-link { color: #7FC4B7; }
  .mad-banner .mad-link { color: #7FC4B7; }
  .conv-lbl span:last-child { color: #7FC4B7; }
  .flow-relay b { color: #7FC4B7; }
}

/* ── 데스크톱 확장 (와이어프레임 v1.3 규칙 — 본문 최대 1024px) ── */
@media (min-width: 768px) {
  .hero { padding-top: 84px; }
  .hero h1 { font-size: 54px; }   /* 22차 — 샘플 UI 대형 타이포 (2-2 히어로 예외 등재) */
  .stats { grid-template-columns: repeat(4, 1fr); }  /* 4열 1줄 */
  .stats .stat { border-bottom: none !important; }
  .stats .stat:nth-child(n) { border-right: 1px solid var(--line); }
  .stats .stat:last-child { border-right: none; }
  .sec .h2 { font-size: 30px; }   /* 22차 — 섹션 제목도 한 단계 크게 */
  .btn-blk { max-width: 360px; margin-left: auto; margin-right: auto; }
  /* 홈 — 아카이빙 벤토 그리드 (대표작 크게 + 나머지 작게) · 티저 카드 2열 */
  .archive-teaser { grid-template-columns: 2fr 1fr 1fr; }
  .archive-teaser > :first-child { grid-row: span 2; min-height: 232px; }
  .teaser-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  /* 소개 — Think·Design·Action 가로 3열 + 가로 연결선 · 운영 특징 2열 */
  .tda { flex-direction: row; align-items: stretch; }
  .tda-link { width: 28px; height: 2px; margin: auto 0; flex: none; }
  .feature-list .rows { display: grid; grid-template-columns: 1fr 1fr; }
  .feature-list .rows .row:nth-child(2) { border-top: none; }
  .feature-list .rows .row:nth-child(odd) { border-right: 1px solid var(--line); }
}