/* ============================================================
   Vibe Board · ANGULAR SKIN  (각진 · 심플 · 컴팩트)
   ------------------------------------------------------------
   크몽(Kmong) 식 심플함 + 2025–26 "각진/네오그로테스크" 트렌드.
   - 둥근 모서리 → 또렷한 직각(2–4px)
   - 카드 본체는 얕은 그림자 + 1px 헤어라인 보더
   - 카드 콤팩트화(짧은 썸네일 · 좁은 패딩 · 더 촘촘한 그리드)
   - 브랜드 컬러(블루)는 유지, 형태/밀도만 재정의

   이 파일은 colors_and_type / styles / neon / extra 다음에 마지막으로
   로드되어 토큰과 컴포넌트 형태만 덮어쓴다. 원본은 그대로 보존.
   ============================================================ */

:root {
  /* ---------- 각진 반경 스케일 (직각에 가깝게) ---------- */
  --r-sm: 2px;     /* 칩 · 태그 · 작은 배지 */
  --r-md: 3px;     /* 버튼 · 입력 · 내비 아이템 */
  --r-lg: 4px;     /* 드롭존 등 큰 컨트롤 */
  --r-xl: 4px;     /* 카드 · 배너 (기존 20px) */
  --r-2xl: 6px;    /* 모달 · 시트 (기존 24px) */
  /* --r-pill: 999px 는 그대로 둔다 → 아바타 · 상태점만 원형 유지 */

  /* ---------- 플랫 엘리베이션 (카드는 별도 얕은 그림자) ---------- */
  --shadow-1: none;
  --shadow-2: none;                                   /* 카드 hover 등 → 보더로 대체 */
  --shadow-3: 0 6px 22px rgba(17, 24, 39, 0.12);      /* 모달·팝오버·토스트만 띄움 */
  --card-shadow: 0 10px 26px rgba(25, 31, 40, 0.08), 0 1px 4px rgba(25, 31, 40, 0.05);
  --card-shadow-hover: 0 14px 34px rgba(25, 31, 40, 0.12), 0 2px 8px rgba(25, 31, 40, 0.06);

  /* ---------- 헤어라인 보더 토큰 ---------- */
  --line-strong: #C8CAD2;  /* hover/active 시 진해지는 경계선 */
}

/* 다크(네온) 모드에서도 hover 보더가 보이도록 */
body.neon-dark { --line-strong: #3a4658; }

/* ============================================================
   CARD — 헤어라인 보더 + 얕은 그림자 + 콤팩트
   ============================================================ */
.post-card {
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  overflow: hidden;            /* 직각 모서리에 맞춰 썸네일 클립 */
  transition:
    border-color var(--dur, .18s) var(--ease, ease),
    box-shadow var(--dur, .18s) var(--ease, ease),
    transform var(--dur, .18s) var(--ease, ease);
}
.post-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}

/* 강제된 카드 높이 제거 → 콘텐츠 높이만큼만 (가장 큰 부피 원인) */
.home-rail .post-card { min-height: 0; }

/* 썸네일을 더 낮게 (16/11 + 176px 강제 → 16/10, 강제높이 제거) */
.post-card__thumb {
  aspect-ratio: 16 / 10;
  min-height: 0;
}

/* 본문 패딩 · 타이포 콤팩트화 */
.post-card__body { padding: 12px 13px 14px; gap: 4px; }
.post-card__title { font-size: 15px; }
.post-card__desc  { font-size: 13px; }
.post-card__meta  { margin-top: 6px; }

/* 오버레이 배지(카테고리 · 좋아요)도 각지게 */
.post-card__cat,
.post-card__likes,
.like-btn { border-radius: var(--r-sm); }

/* ============================================================
   GRID — 콤팩트 · 반응형 (auto-fit/-fill 로 미디어쿼리 없이 대응)
   ============================================================ */
/* 홈 레일: 데스크탑 4업으로 균일한 카드 폭(~284px).
   항목이 3개인 레일(TOP3·에디터픽)은 마지막 칸을 비워 폭을 통일한다
   (auto-fill = 빈 트랙 유지, auto-fit 처럼 늘어나지 않음). */
.home-rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 14px;
  padding: 8px 0 12px;
}
/* 목록(둘러보기) 그리드: 더 촘촘한 4–5업 */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 16px;
}

/* ============================================================
   BUTTONS — 플랫 솔리드 · 직각
   ============================================================ */
.btn { border-radius: var(--r-md); }
.btn--sm { border-radius: var(--r-md); }
.btn--lg { border-radius: var(--r-md); }
.btn--kakao,
.oauth-btn--kakao { border-radius: var(--r-md); }

/* 프라이머리 버튼: 원본(vibeboard.co.kr 라이트) 스타일을 그대로 사용한다.
   (연한 블루 틴트 + 블루 글자 + 블루 링 + 은은한 글로우 — extra.css:39)
   각진 모서리만 토큰으로 적용되고, 채움/글로우는 건드리지 않는다. */

/* ============================================================
   CHIPS · TABS · BADGES · PILLS → 직각 (아바타/점은 제외)
   ============================================================ */
.chip { border-radius: var(--r-sm); }
.cat-radio,
.seg-choice__item { border-radius: var(--r-sm); }
.tech-chip,
.tech-add,
.pill,
.tag,
.sub-badge,
.adm-badge,
.note-card__tag,
.featured-flag,
.section__badge,
.ad-label,
.adm-feat,
.admin-action,
.msg-thread__tag { border-radius: var(--r-sm); }

/* 통계/랭크/더보기 알약 → 각진 사각 */
.latest-total-pill,
.load-more__btn,
.load-more__count,
.home-rank,
.policy-strip__links a,
.biz-flow__step { border-radius: var(--r-sm); }

/* ============================================================
   HERO — 플랫 아이브로우 · 각진 스탯
   ============================================================ */
.hero__eyebrow { border-radius: var(--r-sm); }
.hero__stat {
  border-radius: var(--r-md);
  box-shadow: none;
  border: 1px solid var(--line);
}

/* ============================================================
   INPUTS / SEARCH — 직각
   ============================================================ */
.searchbar { border-radius: var(--r-md); box-shadow: none; }
.msg-input,
.msg-search { border-radius: var(--r-md); }
.image-upload-btn,
.dropzone__icon,
.vb-check__box { border-radius: var(--r-sm); }

/* ============================================================
   STRIPS · BANNERS · CARDS(보조) → 플랫 + 보더
   ============================================================ */
.creator-strip,
.policy-strip,
.challenge-card,
.edu-card,
.op-card,
.adm-stat {
  box-shadow: none;
  border: 1px solid var(--line);
}
.creator-strip:hover,
.policy-strip:hover,
.challenge-card:hover,
.edu-card:hover,
.op-card:hover {
  box-shadow: none;
  border-color: var(--line-strong);
}

/* ============================================================
   NAV — 이미 거의 플랫. 아이콘버튼/탭만 각지게
   ============================================================ */
.app-nav__item { border-radius: var(--r-md); }
.icon-btn { border-radius: var(--r-md); }

/* ============================================================
   HERO SPLIT — 좌: 카피/통계, 우: 교육 광고 카드 (크몽식 2분할)
   카드가 좌측 컬럼 높이에 맞춰 늘어나도록 stretch.
   ============================================================ */
.hero.hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  align-items: stretch;
}
.hero--split .hero__main { min-width: 0; align-self: center; }
.hero--split .hero__stats,
.hero--split .hero__actions { justify-content: flex-start; }

@media (max-width: 900px) {
  .hero.hero--split { grid-template-columns: 1fr; gap: 22px; }
}
/* 모바일 메인화면에서는 교육 광고 자리를 숨긴다 (광고는 피드 사이에서 노출) */
@media (max-width: 760px) {
  .hero .ad-slot { display: none; }
}

/* ---------- 교육 광고 자리 (네온 띠 플레이스홀더 · 이미지 추후) ---------- */
.ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  min-height: 300px;
  padding: 24px;
  border-radius: var(--r-xl);
  /* 네온 듀얼 그라데이션 테두리 + 글로우 (각진 모서리 유지) */
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad-dual) border-box;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--neon-blue) 30%, transparent),
    0 0 28px color-mix(in srgb, var(--neon-blue) 40%, transparent),
    0 0 36px color-mix(in srgb, var(--neon-coral) 22%, transparent),
    inset 0 0 34px color-mix(in srgb, var(--neon-blue) 10%, transparent);
}
.ad-slot__badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #fff;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  background: var(--grad-dual);
  box-shadow: var(--glow-sm);
}
.ad-slot__title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink-2);
}
.ad-slot__sub { font-size: 12.5px; font-weight: 600; color: var(--muted-2); }

/* ---------- 교육 광고 카드 (브랜드 블루 그라데이션 · 각진) ---------- */
.edu-promo {
  display: flex;
  flex-direction: column;
  background: linear-gradient(158deg, #3B86F7 0%, #1B5AD0 100%);
  color: #fff;
  border: 0;
  border-radius: var(--r-xl);
  padding: 20px;
  min-height: 300px;
  overflow: hidden;
}
.edu-promo__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.edu-promo__labels { display: flex; align-items: center; gap: 7px; }
.edu-promo__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  background: #fff;
  color: var(--blue-ink, #1B64DA);
  padding: 2px 7px;
  border-radius: var(--r-sm);
}
.edu-promo__kind { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.9); }
.edu-promo__pager { display: flex; align-items: center; gap: 4px; }
.edu-promo__arrow {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.16);
  border: 0;
  color: #fff;
  border-radius: var(--r-sm);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.edu-promo__arrow:hover { background: rgba(255, 255, 255, 0.32); }
.edu-promo__index {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  min-width: 34px;
  text-align: center;
}
.edu-promo__body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.edu-promo__org {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
.edu-promo__logo {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 800;
}
.edu-promo__title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.025em;
  color: #fff;
}
.edu-promo__desc {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.edu-promo__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 12px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
}
.edu-promo__meta .dot { background: rgba(255, 255, 255, 0.55); }
.edu-promo__price { font-size: 15px; font-weight: 800; color: #fff; }
.edu-promo__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fff;
  color: var(--blue-ink, #1B64DA);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  padding: 11px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  border: 0;
}
.edu-promo__cta:hover { background: #EAF1FB; }

/* ============================================================
   FEED AD — 게시글 사이에 끼우는 인라인 교육 광고 (광고 명확 표기)
   포스트 카드와 같은 크기, 옅은 블루 틴트 + 블루 상단 액센트로 구분.
   ============================================================ */
.feed-ad {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 12px 13px 13px;
  background: #F4F8FF;
  border: 1px solid #D6E3FB;
  border-top: 2px solid var(--blue);
  border-radius: var(--r-xl);
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--dur, .18s) var(--ease, ease);
}
.feed-ad:hover { border-color: var(--blue); }
.feed-ad__top { display: flex; align-items: center; gap: 6px; }
.feed-ad__badge {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: var(--blue);
  padding: 2px 7px;
  border-radius: var(--r-sm);
}
.feed-ad__kind { font-size: 11.5px; font-weight: 700; color: var(--blue-ink, #1B64DA); }
.feed-ad__body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.feed-ad__org {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.feed-ad__logo {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: var(--r-sm);
}
.feed-ad__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-ad__desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-ad__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
.feed-ad__price { font-size: 14px; font-weight: 800; color: var(--ink); }
.feed-ad__cta { font-size: 12.5px; font-weight: 700; color: var(--blue); }

/* ============================================================
   MOBILE RAILS — 카드를 가로 스크롤(스와이프)로 (요청사항)
   ============================================================ */
@media (max-width: 760px) {
  .home-rail {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: 0;
    padding: 10px 0 16px;
    scroll-padding-inline: 0;
  }
  .home-rail::-webkit-scrollbar { display: none; }
  .home-rail > .home-rail__item {
    flex: 0 0 76%;
    max-width: 320px;
    scroll-snap-align: start;
  }
}

/* ============================================================
   MODALS / POPOVERS — 직각(6px) + 떠 있는 그림자만 유지
   ============================================================ */
.modal,
.noti-pop,
.auth-card { box-shadow: var(--shadow-3); }
.toast { box-shadow: var(--shadow-3); }

/* ============================================================
   FORM FONT FIX — input/textarea/select 는 폼 기본 글꼴을 쓰므로
   본문과 같은 sans(Pretendard/Inter)로 강제 (타이핑 글씨체 통일)
   ============================================================ */
.input,
.textarea,
.select {
  font-family: var(--sans);
  letter-spacing: var(--tracking-body);
}

/* ============================================================
   상세 댓글 섹션 — 입력창 강조 + 추천("이런 사이트는 어때요?")과 구분
   ============================================================ */
.detail-comments {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.detail-comments__title { font-size: 19px; margin-bottom: 16px; }

/* 댓글 작성 영역을 또렷한 카드로 → 눈에 잘 들어오게 */
.comment-form {
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  margin-bottom: 24px;
}
.comment-form .textarea {
  min-height: 76px;
  background: var(--surface-2);              /* 살짝 들어간 입력면 */
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 15px;
  line-height: 1.6;
}
.comment-form .textarea::placeholder { color: var(--muted-2); }
.comment-form .textarea:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.comment-form .textarea:focus {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--blue);   /* 포커스 시 또렷한 블루 링 */
}
.comment-login {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
}

/* 작성한 댓글 목록을 또렷한 카드로 묶어 추천 섹션과 분리 */
.comment-list { gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.comment-thread {
  padding: 15px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.comment-thread:last-child { border-bottom: 0; }
.comment-thread .comment-item { padding: 0; border-bottom: 0; }
.comment-replies,
.comment-form--reply { border-left-color: var(--line); }
.comment-form--reply {
  background: transparent;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  margin-bottom: 0;
  padding-top: 10px;
  padding-right: 0;
  padding-bottom: 0;
}

/* "이런 사이트는 어때요?" — 댓글 영역과 확실히 구분되는 띠 + 여백 */
.detail-related {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.detail-related__title { font-size: 18px; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.detail-related__sub { font-size: 13px; color: var(--muted-2); margin: 0 0 16px; }

/* ============================================================
   공개 프로필 — 정보 보강(아바타 이미지 · 가입일 · 분야 · 기술 스택)
   ============================================================ */
.profile-head__avatar { overflow: hidden; }          /* 아바타 이미지 클립 */
.profile-head__stats { flex-wrap: wrap; gap: 18px 22px; }
/* 활동 분야 칩 줄 */
.profile-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.profile-tags__label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  margin-right: 2px;
}
/* 기술 스택 칩 그리드 */
.tech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ============================================================
   상세 헤더 — 제목 좌측, 작성자 본인용 수정/삭제는 우측 상단으로
   ============================================================ */
.detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.detail__head-main { min-width: 0; }
.owner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 4px;
}
/* 삭제는 평소 차분하게(고스트), hover 시에만 위험색 — 확인 팝업이 보호 */
.owner-actions__del { color: var(--muted); }
.owner-actions__del:hover { color: var(--danger); background: var(--danger-soft); }

/* ============================================================
   관리형 리스트 화면(쪽지함 · 알림) — 탭/빈 상태 정렬 통일
   ============================================================ */
.list-tabs {
  gap: 4px;
  margin: 0;
  padding-bottom: 0;
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.list-tabs::-webkit-scrollbar { display: none; }
.list-tabs .tab {
  height: 44px;
  padding: 0 16px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}
.list-tabs .tab.is-active {
  background: transparent;
  box-shadow: none;
  color: var(--ink);
}
.list-tabs .tab.is-active::after {
  display: block;
  content: "";
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
}
.noti-tabs.list-tabs { margin: 0; }
.list-section--managed { padding-top: 12px; }
.list-section--managed .note-feed,
.list-section--managed .noti-list { margin-top: 0; }
.list-section--managed > .empty-state--card {
  box-sizing: border-box;
  min-height: 152px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 42px 20px;
}
.list-section--managed > .empty-state--card b { margin-bottom: 8px; }
/* 페이지네이션 윗여백 통일 (쪽지·알림·추천 그리드) */
.note-feed + .pagination,
.noti-list + .pagination,
.post-grid + .pagination { margin-top: 20px; }