/**
 * ============================================================
 * WePlaNet – Global Styles
 * ------------------------------------------------------------
 * 팬 메인 / 커뮤니티 / 포털 / 관리자에서 공통으로 쓰는 레이아웃·
 * 컴포넌트. 페이지 전용 스타일은 community.css, portal.css 참고.
 * ============================================================
 */

@import url("./variables.css");

/* 이모지 대신 쓰는 line-icon 공용 스타일. 폰트 크기에 맞춰 같이 커지도록 em 단위 사용 */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* =========================================================
 * 0. Reset & Base
 * ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--wp-font);
  font-size: var(--wp-fs-md);
  line-height: 1.55;
  color: var(--wp-ink);
  background: var(--wp-paper);
  -webkit-font-smoothing: antialiased;
}

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

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

/* 스크린리더 전용 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* =========================================================
 * 1. App Shell – Header
 * ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--wp-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  background: var(--wp-surface);
  border-bottom: 1px solid var(--wp-hairline);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wp-font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
}

/* 로고 마크: 브랜드 앱 아이콘(img/brand/weplanet-app-icon.png 를 128px 로 줄인 사본) 이미지로 표시.
   템플릿 22곳의 <span class="brand__mark">W</span> 는 그대로 두고, 안의 "W" 글자만 숨긴다.
   원본 PNG 는 모서리가 흰색이라 border-radius 로 둥근 모서리 밖을 잘라낸다(다크모드에서 흰 모서리가 보이지 않게). */
.brand__mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 22%;
  overflow: hidden;
  background: var(--wp-brand) url("/img/brand/weplanet-app-icon-128.png") center / cover no-repeat;
  color: transparent;
  font-size: 0;
}

.brand__text span {
  color: var(--wp-brand);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--wp-ink-soft);
  transition: background var(--wp-fast) var(--wp-ease), color var(--wp-fast);
}

.icon-btn:hover {
  background: var(--wp-brand-soft);
  color: var(--wp-brand);
}

.icon-btn--badge {
  position: relative;
}

.icon-btn--badge::after {
  display: none;
}

.wp-noti-bound.has-unread::after {
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wp-live);
}

.wp-noti-bound:not(.has-unread)::after {
  display: none;
}

.wp-noti-count {
  display: none;
}

/* =========================================================
 * 2. Buttons
 * ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--wp-radius-sm);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: var(--wp-fs-sm);
  white-space: nowrap;
  transition: background var(--wp-fast), color var(--wp-fast), border-color var(--wp-fast),
    transform var(--wp-fast);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--wp-brand);
  color: var(--wp-on-brand, #fff);
}

.btn--primary:hover {
  background: var(--wp-brand-dark);
}

.btn--accent {
  background: var(--wp-accent);
  color: var(--wp-on-accent, #fff);
}

.btn--accent:hover {
  filter: brightness(0.95);
}

.btn--ghost {
  background: transparent;
  border-color: var(--wp-line);
  color: var(--wp-ink);
}

.btn--ghost:hover {
  background: var(--wp-surface);
  border-color: var(--wp-ink);
}

/* 잠긴 버튼 (예: 비밀번호 없는 계정의 소셜 연동 해제) - .form-input:disabled와 같은 톤으로
   "클릭할 수 없다"는 걸 색으로 표시한다 */
.btn--ghost:disabled,
.btn--ghost:disabled:hover {
  background: var(--wp-paper);
  border-color: var(--wp-hairline);
  color: var(--wp-muted);
  cursor: not-allowed;
}

.btn--soft {
  background: var(--wp-brand-soft);
  color: var(--wp-brand-dark);
}

.btn--block {
  width: 100%;
}

.btn--sm {
  min-height: 34px;
  padding: 0 12px;
  font-size: var(--wp-fs-xs);
}

.btn--lg {
  min-height: 52px;
  font-size: var(--wp-fs-md);
}

/* SNS 로그인/가입 버튼 */
.btn--sns {
  width: 100%;
  justify-content: flex-start;
  gap: 12px;
  background: var(--wp-surface);
  border: 1px solid var(--wp-line);
  color: var(--wp-ink);
  padding-left: 18px;
}

.btn--sns:hover {
  border-color: var(--wp-brand);
  background: var(--wp-brand-soft);
}

.btn--sns .sns-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}

.sns-icon--google { background: #4285f4; }
.sns-icon--kakao { background: #3c1e1e; color: #fee500; }
.sns-icon--line { background: #06c755; }

/* =========================================================
 * 3. Forms
 * ========================================================= */
.form-group {
  margin-bottom: 18px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--wp-fs-sm);
  font-weight: 600;
  color: var(--wp-ink-soft);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--wp-line);
  border-radius: var(--wp-radius-sm);
  background: var(--wp-surface);
  transition: border-color var(--wp-fast), box-shadow var(--wp-fast);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--wp-brand);
  box-shadow: 0 0 0 3px var(--wp-brand-tint);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--wp-faint);
}

/* 잠긴 입력칸 (아이디, 잠금 상태의 이메일 등) - 클릭할 수 없다는 걸 색으로 표시 */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background: var(--wp-paper);
  border-color: var(--wp-hairline);
  color: var(--wp-muted);
  cursor: not-allowed;
}

/* 유효성 에러 (와이어프레임: 박스 밑 빨간 글씨) */
.form-error {
  margin-top: 6px;
  font-size: var(--wp-fs-xs);
  color: var(--wp-danger);
  display: none;
}

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

.form-group.is-invalid .form-error {
  display: block;
}

.form-hint {
  margin-top: 6px;
  font-size: var(--wp-fs-xs);
  color: var(--wp-muted);
}

.form-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.form-row .form-input {
  flex: 1;
}

/* 체크박스 / 약관 */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--wp-hairline);
  border-radius: var(--wp-radius);
  background: var(--wp-surface);
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--wp-fs-sm);
  color: var(--wp-ink-soft);
}

.check-item input {
  margin-top: 3px;
  accent-color: var(--wp-brand);
}

.check-item--all {
  padding-bottom: 10px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--wp-hairline);
  font-weight: 700;
  color: var(--wp-ink);
}

/* =========================================================
 * 4. Layout Helpers
 * ========================================================= */
.page {
  min-height: calc(100vh - var(--wp-header-h));
}

.container {
  width: min(100% - 40px, var(--wp-max));
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - 40px, 440px);
}

.section {
  padding: 28px 0;
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.section__title {
  font-size: var(--wp-fs-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.section__link {
  font-size: var(--wp-fs-sm);
  color: var(--wp-brand);
  font-weight: 600;
}

.section__link:hover {
  text-decoration: underline;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stack--lg {
  gap: 20px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* 로그인 후 메인: 콘텐츠 + 우측 사이드 */
.layout-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
  padding: 24px 0 48px;
}

@media (max-width: 900px) {
  .layout-split {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
 * 5. Banner Carousel
 * ========================================================= */
.banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--wp-radius);
  background: #1a2a2a;
  color: #fff;
  aspect-ratio: 21 / 7;
  min-height: 160px;
}

.banner__track {
  display: flex;
  height: 100%;
  transition: transform var(--wp-med) var(--wp-ease);
}

.banner__slide {
  flex: 0 0 100%;
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(120deg, #2d3a47 0%, #8a5a66 55%, #f7c8d3 140%);
}

.banner__kicker {
  font-size: var(--wp-fs-xs);
  opacity: 0.85;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.banner__title {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.banner__nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  pointer-events: none;
}

.banner__nav .icon-btn {
  pointer-events: auto;
  /* 관리자 배너는 배경이 밝을 수도 있어서, 흰 반투명 대신 어두운 반투명으로 어디서나 보이게 */
  background: rgba(20, 20, 20, 0.28);
  color: #fff;
  backdrop-filter: blur(4px);
}

.banner__dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.banner__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);   /* 밝은 배너 배경에서도 점이 보이도록 */
}

.banner__dot.is-active {
  background: #fff;
  width: 16px;
  border-radius: 999px;
}

/* 관리자가 등록한 메인 배너 (최고관리자 > 배너 영역 관리)
   위버스처럼 왼쪽에 영문명/대제목/본문, 오른쪽에 이미지. 배경색·글자색은 배너마다 inline style로 들어온다 */
a.banner__slide--promo,
.banner__slide--promo {
  padding: 0;
  justify-content: stretch;
  color: inherit;
  text-decoration: none;
}

.banner-promo {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 100%;
}

/* 글 영역 - 위버스처럼 왼쪽 가장자리에서 한참 들어온 곳에서 시작 */
.banner-promo__text {
  flex: 1 1 52%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  padding: 24px 24px 24px 12%;
}

/* 아티스트 영문명 - 알약 모양 태그. 배경/테두리는 글자색을 옅게 섞어서 어떤 배경색에서도 어울리게 */
.banner-promo__label {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}

/* 대제목·본문은 관리자가 넣은 줄바꿈 그대로 (최대 두 줄) */
.banner-promo__title {
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.28;
  white-space: pre-line;
  word-break: keep-all;
}

.banner-promo__body {
  font-size: clamp(13px, 1.25vw, 17px);
  line-height: 1.45;
  opacity: 0.9;
  white-space: pre-line;
  word-break: keep-all;
}

/* 이미지 영역 - 오른쪽 가장자리에서 한참 들어온 곳에 둥근 카드(4:3)로 */
.banner-promo__media {
  flex: 1 1 48%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 6% 12% 6% 0;
}

.banner-promo__media img {
  height: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  /* 투명 배경 이미지면 배경색보다 살짝 밝은 판이 비친다 */
  background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 768px) {
  /* 좁은 화면에서는 좌우 화살표가 글자를 가려서 숨긴다 (아래 점 + 자동 넘김으로 이동) */
  .banner__nav {
    display: none;
  }

  .banner-promo__text {
    padding: 14px 10px 14px 20px;
    gap: 6px;
  }

  .banner-promo__title {
    font-size: 17px;
  }

  .banner-promo__body {
    font-size: 12px;
  }

  .banner-promo__label {
    height: 22px;
    padding: 0 8px;
    font-size: 10px;
  }

  .banner-promo__media {
    padding: 14px 20px 14px 0;
  }

  .banner-promo__media img {
    border-radius: 10px;
  }
}

/* =========================================================
 * 6. Artist Marquee (지금 바로 만나보세요)
 * ========================================================= */
.marquee-block {
  margin-top: 28px;
}

.marquee-block__title {
  font-size: var(--wp-fs-lg);
  font-weight: 700;
  margin-bottom: 14px;
}

.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: marquee-ltr 28s linear infinite;
}

/* 와이어프레임: 오른쪽→왼쪽 모션 */
@keyframes marquee-ltr {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.artist-chip {
  width: 88px;
  text-align: center;
  flex-shrink: 0;
}

.artist-chip__logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fdeef2, #f7c8d3);
  border: 2px solid var(--wp-surface);
  box-shadow: var(--wp-shadow);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--wp-brand-dark);
  font-size: var(--wp-fs-sm);
  overflow: hidden;
}

.artist-chip__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.artist-chip__name {
  font-size: var(--wp-fs-xs);
  color: var(--wp-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.artist-chip:hover .artist-chip__logo {
  border-color: var(--wp-brand);
}

/* "커뮤니티 가입하기"(#meetArtists)로 스크롤해 왔을 때 고정 헤더에 제목이 가리지 않도록 */
.meet-artists {
  scroll-margin-top: calc(var(--wp-header-h) + 16px);
}

/* 지금 바로 만나보세요 - 위버스처럼 한 줄에 2명 (동그란 사진 + 오른쪽에 굵은 이름) */
.artist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 32px;
  padding: 24px;
  background: var(--wp-surface);
  border: 1px solid var(--wp-hairline);
  border-radius: var(--wp-radius);
}

.artist-tile {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  color: inherit;
}

.artist-tile__thumb {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 2px solid var(--wp-surface);
  box-shadow: var(--wp-shadow);
  background: linear-gradient(145deg, #fdeef2, #f7c8d3);
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: var(--wp-fs-lg);
  font-weight: 800;
  color: var(--wp-brand-dark);
  transition: transform var(--wp-fast), border-color var(--wp-fast);
}

.artist-tile__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.artist-tile__name {
  min-width: 0;
  font-size: var(--wp-fs-lg);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.artist-tile:hover .artist-tile__thumb {
  transform: translateY(-2px);
  border-color: var(--wp-brand);
}

@media (max-width: 768px) {
  .artist-grid {
    gap: 16px 12px;
    padding: 16px;
  }

  .artist-tile {
    gap: 10px;
  }

  .artist-tile__thumb {
    width: 56px;
    height: 56px;
    font-size: var(--wp-fs-sm);
  }

  .artist-tile__name {
    font-size: var(--wp-fs-sm);
  }
}

/* =========================================================
 * 7. Feed / Post Cards
 * ========================================================= */
.feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 메인 페이지 "최신 인기 포스트" 위젯처럼 가로로 여러 장 나열할 때 사용 */
.feed--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.post-card {
  background: var(--wp-surface);
  border: 1px solid var(--wp-hairline);
  border-radius: var(--wp-radius);
  padding: 16px 18px;
  transition: border-color var(--wp-fast);
}

.post-card:hover {
  border-color: var(--wp-line);
}

.post-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wp-brand-soft);
  color: var(--wp-brand-dark);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--wp-fs-sm);
  flex-shrink: 0;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar--sm {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.avatar--lg {
  width: 72px;
  height: 72px;
  font-size: 22px;
}

.badge-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--wp-brand);
  color: #fff;
  font-size: 9px;
  margin-left: 4px;
  vertical-align: middle;
}

.badge-solo {
  display: inline;
  color: var(--wp-brand-dark);
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
  vertical-align: middle;
}

.post-card__meta {
  flex: 1;
  min-width: 0;
}

.post-card__name {
  font-weight: 700;
  font-size: var(--wp-fs-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.post-card__video {
  display: block;
  width: 100%;
  max-height: 420px;
  border-radius: var(--wp-radius-sm);
  background: #000;
  margin-bottom: 8px;
}

.post-card__time {
  font-size: var(--wp-fs-xs);
  color: var(--wp-muted);
}

.post-card__body {
  font-size: var(--wp-fs-md);
  color: var(--wp-ink-soft);
  white-space: pre-wrap;
}

/* 게시글 상세의 본문(Toast UI 뷰어). 뷰어는 줄바꿈을 "<br>\n" 으로 그리는데, 위 pre-wrap 을 물려받으면
   <br> 뒤의 \n 까지 줄바꿈으로 처리돼서 줄마다 빈 줄이 하나씩 더 생긴다. 뷰어 안에서는 기본값으로 되돌린다 */
.post-card__body .toastui-editor-contents {
  white-space: normal;
}

/* 에디터에서 빈 줄을 하나 띄우면 저장 시 문단이 나뉜다(\n\n). 상세에서도 에디터처럼 정확히 한 줄만큼 띄운다 */
.post-card__body .toastui-editor-contents p {
  margin: 0;
}

.post-card__body .toastui-editor-contents p + p {
  margin-top: 1.6em;
}

/* 게시글 목록 카드의 본문 미리보기 (Post.getPreviewText) - 줄바꿈 그대로 최대 5줄, 넘치면 마지막 줄 끝에 … */
.post-card__preview {
  line-height: 1.6;
  white-space: pre-line;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}

.post-card__media {
  margin-top: 12px;
  display: grid;
  gap: 4px;
  border-radius: var(--wp-radius-sm);
  overflow: hidden;
}

.post-card__media--2 { grid-template-columns: 1fr 1fr; }
.post-card__media--4 { grid-template-columns: 1fr 1fr; }

.media-ph {
  aspect-ratio: 1;
  background:
    linear-gradient(135deg, #f1eee8, #ddd9d1);
  display: grid;
  place-items: center;
  color: var(--wp-muted);
  font-size: var(--wp-fs-xs);
  position: relative;
}

.media-ph--more::after {
  content: attr(data-more);
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 31, 0.45);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--wp-fs-lg);
}

.post-card__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--wp-hairline);
  color: var(--wp-muted);
  font-size: var(--wp-fs-sm);
}

.post-card__actions button:hover {
  color: var(--wp-brand);
}

.post-like {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  line-height: 1;
  min-height: 1.25em;
}

/* 카운트 유무와 무관하게 하트 크기 고정 (0→1 전환 시 커짐/작아짐 방지) */
.post-like .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.post-like [data-like-count] {
  display: inline-block;
  min-width: 1ch;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.post-like.is-liked {
  color: var(--wp-live);
}

.post-like.is-liked .icon {
  color: var(--wp-live);
  fill: currentColor;
}

.translate-link {
  font-size: var(--wp-fs-xs);
  color: var(--wp-brand);
  font-weight: 600;
  margin-top: 8px;
  display: inline-block;
}

/* =========================================================
 * 8. Rising Community Cards
 * ========================================================= */
.rising-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.rising-card {
  background: var(--wp-surface);
  border: 1px solid var(--wp-hairline);
  border-radius: var(--wp-radius);
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  transition: border-color var(--wp-fast), transform var(--wp-fast);
}

.rising-card:hover {
  border-color: var(--wp-brand);
  transform: translateY(-2px);
}

.rising-card__info strong {
  display: block;
  font-size: var(--wp-fs-sm);
}

.rising-card__info span {
  display: block;
  font-size: var(--wp-fs-xs);
  color: var(--wp-muted);
}

/* =========================================================
 * 9. Side Panel (로그인 후 / 드로어)
 * ========================================================= */
.side-panel {
  background: var(--wp-surface);
  border: 1px solid var(--wp-hairline);
  border-radius: var(--wp-radius);
  padding: 20px;
  position: sticky;
  top: calc(var(--wp-header-h) + 16px);
}

.side-panel__greet {
  font-size: var(--wp-fs-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.side-panel__greet em {
  font-style: normal;
  color: var(--wp-brand);
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
}

.side-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--wp-radius-sm);
  font-size: var(--wp-fs-sm);
  font-weight: 500;
  color: var(--wp-ink-soft);
}

.side-nav a:hover,
.side-nav a.is-active {
  background: var(--wp-brand-soft);
  color: var(--wp-brand-dark);
}

.community-shortcuts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.community-shortcuts__title {
  font-size: var(--wp-fs-xs);
  font-weight: 700;
  color: var(--wp-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.community-shortcuts a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--wp-radius-sm);
  font-size: var(--wp-fs-sm);
}

.community-shortcuts a:hover {
  background: var(--wp-paper);
}

/* =========================================================
 * 10. Week Schedule (로그인 후 메인)
 * ========================================================= */
.week-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
  font-weight: 700;
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  overflow-x: auto;
}

.week-day {
  min-width: 110px;
  background: var(--wp-surface);
  border: 1px solid var(--wp-hairline);
  border-radius: var(--wp-radius-sm);
  padding: 10px;
}

.week-day__label {
  font-size: var(--wp-fs-xs);
  font-weight: 700;
  color: var(--wp-muted);
  margin-bottom: 8px;
  white-space: nowrap;
}

.week-event {
  font-size: 11px;
  padding: 6px;
  border-radius: 4px;
  background: var(--wp-brand-soft);
  color: var(--wp-brand-dark);
  margin-bottom: 4px;
  line-height: 1.3;
}

.week-event--alt {
  background: var(--wp-accent-soft);
  color: #8a3d14;
}

/* =========================================================
 * 11. Auth Screens (로그인/회원가입)
 * ========================================================= */
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(15, 107, 107, 0.12), transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(196, 92, 38, 0.1), transparent 45%),
    var(--wp-paper);
}

.auth-card {
  width: min(100%, 420px);
  background: var(--wp-surface);
  border: 1px solid var(--wp-hairline);
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: var(--wp-shadow);
}

.auth-card__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--wp-fs-sm);
  color: var(--wp-muted);
  margin-bottom: 20px;
}

.auth-card__back:hover {
  color: var(--wp-brand);
}

.auth-card__title {
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin-bottom: 8px;
}

.auth-card__desc {
  color: var(--wp-muted);
  font-size: var(--wp-fs-sm);
  margin-bottom: 28px;
}

.auth-card__brand {
  text-align: center;
  font-weight: 800;
  font-size: 22px;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.auth-card__brand span {
  color: var(--wp-brand);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--wp-faint);
  font-size: var(--wp-fs-xs);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--wp-hairline);
}

.auth-links {
  display: flex;
  justify-content: space-between;
  margin: 12px 0 20px;
  font-size: var(--wp-fs-xs);
}

.auth-links a {
  color: var(--wp-muted);
}

.auth-links a:hover {
  color: var(--wp-brand);
  text-decoration: underline;
}

/* =========================================================
 * 12. Modal
 * ========================================================= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 31, 0.45);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-backdrop.is-open {
  display: flex;
}

.modal {
  width: min(100%, 480px);
  max-height: min(90vh, 720px);
  overflow: auto;
  background: var(--wp-surface);
  border-radius: 14px;
  box-shadow: var(--wp-shadow-modal);
  padding: 24px;
}

.modal--wide {
  width: min(100%, 640px);
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.modal__title {
  font-size: var(--wp-fs-lg);
  font-weight: 700;
}

.modal__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--wp-muted);
}

.modal__close:hover {
  background: var(--wp-paper);
  color: var(--wp-ink);
}

/* =========================================================
 * 13. Tabs / Chips
 * ========================================================= */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--wp-hairline);
  margin-bottom: 20px;
  overflow: visible;
}

.tabs a,
.tabs button {
  padding: 12px 14px;
  font-size: var(--wp-fs-sm);
  font-weight: 600;
  color: var(--wp-muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tabs a:hover,
.tabs button:hover {
  color: var(--wp-ink);
}

.tabs a.is-active,
.tabs button.is-active {
  color: var(--wp-brand);
  border-bottom-color: var(--wp-brand);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--wp-line);
  font-size: var(--wp-fs-xs);
  font-weight: 600;
  color: var(--wp-ink-soft);
  background: var(--wp-surface);
  cursor: pointer;
  position: relative;
  text-decoration: none;
}

span.chip {
  cursor: default;
}

.chip .tab-ico {
  width: 14px;
  height: 14px;
}

.chip.is-active,
.chip.is-selected,
.chip:hover,
.chip:has(input:checked) {
  background: var(--wp-brand);
  border-color: var(--wp-brand);
  color: #fff;
}

.chip input[type="radio"],
.chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
 * 14. Empty / CTA boxes
 * ========================================================= */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 200px;
  padding: 48px 20px;
  color: var(--wp-muted);
  box-sizing: border-box;
}

.empty-state strong {
  display: block;
  color: var(--wp-ink);
  margin-bottom: 6px;
}

/* 게시글/미디어/공지 등 목록 비었을 때 — 해당 란 중앙 */
.list-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 200px;
  margin: 0;
  padding: 48px 20px;
  text-align: center;
  color: var(--wp-muted);
  box-sizing: border-box;
}

.community-main > section .list-empty,
.comment-list .list-empty {
  min-height: 140px;
  padding: 32px 16px;
}

.cta-banner {
  background: var(--wp-brand-soft);
  border: 1px solid #c5e0e0;
  border-radius: var(--wp-radius);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.cta-banner p {
  font-weight: 600;
  color: var(--wp-brand-dark);
}

/* =========================================================
 * 15. Settings / Collection
 * ========================================================= */
.settings-block {
  background: var(--wp-surface);
  border: 1px solid var(--wp-hairline);
  border-radius: var(--wp-radius);
  padding: 20px 22px;
  margin-bottom: 16px;
}

/* 비밀번호가 없는 계정(소셜 전용 가입)은 "연결된 계정" 박스 전체를 잠근다 - 연동된 소셜이 유일한 로그인 수단이라
   비밀번호를 먼저 설정해야(hasPassword() true) 연결/해제를 할 수 있다. 박스 전체를 흐리게 + 클릭 불가로 만든다. */
.settings-block.is-locked {
  opacity: .5;
  pointer-events: none;
  user-select: none;
}

.settings-block__title {
  font-size: var(--wp-fs-sm);
  font-weight: 700;
  color: var(--wp-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--wp-hairline);
  font-size: var(--wp-fs-sm);
}

.settings-row:last-child {
  border-bottom: none;
}

.toggle,
.toggle-managed {  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--wp-line);
  position: relative;
  transition: background var(--wp-fast);
}

.toggle::after,
.toggle-managed::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--wp-fast) var(--wp-ease);
}

.toggle.is-on,
.toggle-managed.is-on {
  background: var(--wp-brand);
}

.toggle.is-on::after,
.toggle-managed.is-on::after {
  transform: translateX(18px);
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.collection-card {
  background: var(--wp-surface);
  border: 1px solid var(--wp-hairline);
  border-radius: var(--wp-radius);
  padding: 16px;
}

.collection-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.badge-row {
  display: flex;
  gap: 8px;
}

.badge-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(145deg, #f0ebe4, #dde8e7);
  display: grid;
  place-items: center;
  font-size: 18px;
}

/* =========================================================
 * 16. Tables (포털/관리자)
 * ========================================================= */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--wp-hairline);
  border-radius: var(--wp-radius);
  background: var(--wp-surface);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp-fs-sm);
}

.data-table th,
.data-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--wp-hairline);
  white-space: nowrap;
}

.data-table th {
  background: var(--wp-paper);
  font-weight: 700;
  font-size: var(--wp-fs-xs);
  color: var(--wp-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background: #faf9f7;
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.tag--public { background: var(--wp-brand-soft); color: var(--wp-brand-dark); }
.tag--private { background: #eee; color: var(--wp-muted); }
.tag--member { background: var(--wp-accent-soft); color: #8a3d14; }
.tag--danger { background: var(--wp-danger-soft); color: var(--wp-danger); }
.tag--live {
  background: var(--wp-live);
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* =========================================================
 * 17. Pagination
 * ========================================================= */
.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
}

.pagination a,
.pagination span {
  min-width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--wp-radius-sm);
  font-size: var(--wp-fs-sm);
  font-weight: 600;
  color: var(--wp-ink-soft);
}

.pagination a:hover {
  background: var(--wp-brand-soft);
  color: var(--wp-brand);
}

.pagination .is-active {
  background: var(--wp-brand);
  color: #fff;
}

/* =========================================================
 * 18. Utility
 * ========================================================= */
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.text-muted { color: var(--wp-muted); }
.text-sm { font-size: var(--wp-fs-sm); }
.text-xs { font-size: var(--wp-fs-xs); }
.text-danger { color: var(--wp-danger); }
.fw-700 { font-weight: 700; }
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.flex-center {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hidden { display: none !important; }

/* 진행률 바 (컬렉션·프로젝트 공통) */
.progress {
  height: 6px;
  background: var(--wp-hairline);
  border-radius: 999px;
  overflow: hidden;
}

.progress > span {
  display: block;
  height: 100%;
  background: var(--wp-brand);
  border-radius: inherit;
}

/* =========================================================
 * 19. Sitemap landing (루트 index)
 * ========================================================= */
.sitemap-hero {
  padding: 56px 0 32px;
}

.sitemap-hero h1 {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

.sitemap-hero h1 span {
  color: var(--wp-brand);
}

.sitemap-hero p {
  margin-top: 12px;
  color: var(--wp-muted);
  max-width: 520px;
}

.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding-bottom: 64px;
}

.sitemap-group {
  background: var(--wp-surface);
  border: 1px solid var(--wp-hairline);
  border-radius: var(--wp-radius);
  padding: 18px;
}

.sitemap-group h2 {
  font-size: var(--wp-fs-sm);
  font-weight: 800;
  color: var(--wp-brand);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.sitemap-group a {
  display: block;
  padding: 8px 0;
  font-size: var(--wp-fs-sm);
  border-bottom: 1px solid var(--wp-hairline);
  color: var(--wp-ink-soft);
}

.sitemap-group a:last-child {
  border-bottom: none;
}

.sitemap-group a:hover {
  color: var(--wp-brand);
}

/* =========================================================
 * 20. Responsive
 * ========================================================= */
@media (max-width: 768px) {
  .site-header {
    padding: 0 14px;
  }

  .banner {
    aspect-ratio: 16 / 9;
  }

  .banner__slide {
    padding: 20px;
  }

  .week-grid {
    grid-auto-flow: column;
    grid-template-columns: none;
  }

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


/* Toast UI 에디터 하단 모드 전환 탭 - 기본 라벨(Markdown/WYSIWYG)을 한글로 바꾸면서
   글자가 길어져 두 줄로 깨지는 것 방지 (community-posts.js의 relabelEditorModeTabs와 한 쌍) */
.toastui-editor-mode-switch .tab-item {
  width: auto;
  min-width: 88px;
  padding: 0 12px;
  white-space: nowrap;
}



/* ===== 공용 알림/확인 다이얼로그 (브라우저 alert/confirm 대체) ===== */
.wp-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: grid;
  place-items: center;
  z-index: 3000;
  padding: 20px;
}

.wp-dialog-backdrop[hidden] { display: none; }

.wp-dialog {
  width: min(100%, 360px);
  background: var(--wp-surface, #fff);
  border-radius: var(--wp-radius, 12px);
  padding: 22px 20px 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

.wp-dialog__msg {
  margin: 0 0 18px;
  font-size: var(--wp-fs-sm, 14px);
  line-height: 1.6;
  white-space: pre-line;
}

.wp-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.wp-dialog__actions [hidden] { display: none; }

/* 토스트 */
.wp-toast-root {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3100;
  pointer-events: none;
}

.wp-toast {
  background: rgba(24, 24, 27, 0.92);
  color: #fff;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: var(--wp-fs-xs, 12px);
  font-weight: 600;
  transition: opacity 0.25s, transform 0.25s;
}

.wp-toast.is-out {
  opacity: 0;
  transform: translateY(6px);
}

/* 팬 댓글 목록 - 댓글이 수십 개 달려도 페이지 전체가 늘어나지 않도록
   이 영역 안에서만 스크롤되게 함. 아티스트 댓글은 이 박스 밖(위쪽)에 고정 */
.comment-scroll {
  max-height: 420px;
  overflow-y: auto;
  /* 아티스트 댓글은 margin:0 -8px 로 좌우가 컨테이너보다 넓어서
     가로 스크롤바가 생겼음. 세로만 스크롤되게 명시적으로 잠금 */
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 4px;
}
.comment-scroll::-webkit-scrollbar {
  width: 6px;
}
.comment-scroll::-webkit-scrollbar-thumb {
  background: var(--wp-line, #ddd);
  border-radius: 3px;
}

/* 아티스트 댓글도 수십 개가 달릴 수 있어서 별도 스크롤 영역으로 둠.
   최상단 고정은 유지하되, 팬 댓글이 화면 밖으로 밀려나지 않도록 높이를 팬 댓글보다 낮게 잡음 */
.comment-scroll--artist {
  max-height: 240px;
}

/* ---------- 테마 토글 ---------- */
/* 라이트일 땐 해, 다크일 땐 달만 보이게 */
[data-theme-icon="dark"] { display: none; }
:root[data-theme="dark"] [data-theme-icon="dark"] { display: block; }
:root[data-theme="dark"] [data-theme-icon="light"] { display: none; }

/* ---------- 다크모드: 게시글 본문 ---------- */
/* 본문은 toastui 뷰어로 그려지는데, 라이브러리 CSS가 요소마다 어두운 글자색을
   직접 박아둬서 다크 배경에서 글씨가 묻힌다. 토큰 색으로 되돌린다. */
:root[data-theme="dark"] .toastui-editor-contents,
:root[data-theme="dark"] .toastui-editor-contents p,
:root[data-theme="dark"] .toastui-editor-contents h1,
:root[data-theme="dark"] .toastui-editor-contents h2,
:root[data-theme="dark"] .toastui-editor-contents h3,
:root[data-theme="dark"] .toastui-editor-contents h4,
:root[data-theme="dark"] .toastui-editor-contents h5,
:root[data-theme="dark"] .toastui-editor-contents h6,
:root[data-theme="dark"] .toastui-editor-contents li,
:root[data-theme="dark"] .toastui-editor-contents td,
:root[data-theme="dark"] .toastui-editor-contents th,
:root[data-theme="dark"] .toastui-editor-contents strong,
:root[data-theme="dark"] .toastui-editor-contents em {
  color: var(--wp-ink);
}

:root[data-theme="dark"] .toastui-editor-contents blockquote {
  color: var(--wp-ink-soft);
  border-left-color: var(--wp-line);
}

:root[data-theme="dark"] .toastui-editor-contents a {
  color: var(--wp-brand);
}

/* ---------- 다크모드: 글쓰기 에디터(간편 편집) ---------- */
/* 위 규칙은 본문 뷰어용인데, 글쓰기 에디터의 간편 편집 입력칸도 같은 .toastui-editor-contents 를 쓴다.
   입력칸 배경은 라이브러리 기본 흰색 그대로라, 다크모드에서 입력한 글씨가 흰 바탕에 흰 글씨로 안 보였다.
   에디터는 마크다운 모드/툴바처럼 다크모드에서도 밝은 종이 + 어두운 글씨로 둔다. */
:root[data-theme="dark"] .toastui-editor-ww-container .toastui-editor-contents,
:root[data-theme="dark"] .toastui-editor-ww-container .toastui-editor-contents p,
:root[data-theme="dark"] .toastui-editor-ww-container .toastui-editor-contents h1,
:root[data-theme="dark"] .toastui-editor-ww-container .toastui-editor-contents h2,
:root[data-theme="dark"] .toastui-editor-ww-container .toastui-editor-contents h3,
:root[data-theme="dark"] .toastui-editor-ww-container .toastui-editor-contents h4,
:root[data-theme="dark"] .toastui-editor-ww-container .toastui-editor-contents h5,
:root[data-theme="dark"] .toastui-editor-ww-container .toastui-editor-contents h6,
:root[data-theme="dark"] .toastui-editor-ww-container .toastui-editor-contents li,
:root[data-theme="dark"] .toastui-editor-ww-container .toastui-editor-contents td,
:root[data-theme="dark"] .toastui-editor-ww-container .toastui-editor-contents th,
:root[data-theme="dark"] .toastui-editor-ww-container .toastui-editor-contents strong,
:root[data-theme="dark"] .toastui-editor-ww-container .toastui-editor-contents em,
:root[data-theme="dark"] .toastui-editor-ww-container .toastui-editor-contents blockquote {
  color: #222;
}

/* =========================================================
 * 21. Profile Image Crop
 * - 프로필/배경 이미지 편집 패널의 배경 미리보기 박스 + 크롭 모달.
 *   portal/profile.html, community/profile.html이 함께 쓴다.
 * ========================================================= */
.pe-cover-preview {
  position: relative;
  aspect-ratio: 2560 / 1660;
  overflow: hidden;
  margin: 0 -24px;
}

.pe-cover-preview img {
  display: block;
  width: 100%;
  height: auto;
}

/* 배경 이미지를 아직 안 골랐을 때 - 그냥 빈 흰 박스면 여기에 사진을 넣을 수 있다는 게
   전혀 안 보여서, 옅은 배경 + 점선 테두리 + 안내 문구로 "업로드 영역"임을 표시한다 */
.pe-cover-preview.is-empty {
  background: var(--wp-paper);
  border-top: 1px dashed var(--wp-hairline, #e5e5e5);
  border-bottom: 1px dashed var(--wp-hairline, #e5e5e5);
}

/* 포털 헤더 이미지 미리보기 비율 - 커뮤니티 히어로 배너와 동일한 3:1.
   community/profile.html의 개인 프로필 커버는 기본값(2560:1660)을 그대로 쓴다. */
.pe-cover-preview--header {
  aspect-ratio: 3 / 1;
}

.pe-cover-preview__hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--wp-muted, #8a8a8a);
  font-size: var(--wp-fs-sm);
  pointer-events: none;
}

.pe-cover-preview__hint svg {
  width: 26px;
  height: 26px;
  opacity: .7;
}


/* 이미지 크롭 모달의 편집 영역 최대 높이 */
.crop-stage {
  position: relative;
  max-height: 520px;
  overflow: hidden;
  background: #111;
  border-radius: var(--wp-radius-sm, 8px);
}

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

/* 아바타 크롭용 원형 마스크 - 실제로 잘리는 영역은 그대로 두고, Cropper.js의
   크롭박스/뷰박스만 둥글게 보이게 해서 "원 안에 들어올 부분"을 미리 보여준다 */
.crop-stage.is-round .cropper-view-box,
.crop-stage.is-round .cropper-face {
  border-radius: 50%;
}

.crop-zoom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.crop-zoom-row input[type="range"] {
  flex: 1;
  accent-color: var(--wp-brand);
}

.crop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--wp-hairline, #e5e5e5);
}


/* [해시태그 총공] 홈 캐러셀 맨 앞 자동 슬라이드 (index.html) */
.hashtag-home-slide {
  color: #fff;
  text-decoration: none;
  background:
    linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.45) 100%),
    linear-gradient(120deg, #6b2d4a 0%, #b4577a 55%, #f7c8d3 140%);
}

.hashtag-home-slide__body {
  margin-top: 8px;
  font-size: var(--wp-fs-sm);
  font-weight: 700;
  opacity: 0.9;
}

/* 모바일: 입력칸 글자가 16px 보다 작으면 iOS Safari 가 입력할 때 화면을 자동 확대한다.
   입력칸마다 클래스로 크기를 따로 주고 있어서 !important 로 한 번에 맞춘다. */
@media (max-width: 560px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}