/* ============================
   Global reset & motion polish
============================ */
* { -webkit-tap-highlight-color: transparent; }
a { text-decoration: none; color: inherit; }

/* 전역 이미지는 컨테이너 너비만 제한 (높이는 각 컴포넌트/Tailwind가 결정) */
img { max-width: 100%; }

/* rounded-full 이미지는 항상 1:1 비율로 잘라 표시 (높이 유틸이 없어도 원형 유지) */
img.rounded-full {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* 콘텐츠 이미지에서만 block */
.thumbnail,
.grid-thumb,
.swiper .swiper-slide img {
  display: block;
}

/* 버튼 공통 */
button, [role="button"] {
  outline: none;
  border: none;
  background: transparent;
  cursor: pointer;
}
button:focus, [role="button"]:focus { outline: none; }
button:focus-visible, [role="button"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.35);
  border-radius: 9999px;
}

/* 전역 전환 유틸 & 상단 네비 */
.transition-transform { transition: transform 0.3s ease; }
.nav-hidden { transform: translateY(100%); }
.nav-visible { transform: translateY(0); }

/* ============================
   Buttons / micro interactions
============================ */
.toggle-more,
.follow-btn,
.icon-button {
  transition:
    transform 180ms cubic-bezier(.2,.7,.2,1),
    box-shadow 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
  box-shadow: 0 1px 2px rgba(17,24,39,0.06);
}
.toggle-more {
  width: 28px; height: 28px;
  border-radius: 9999px;
  background-color: #e5e7eb; /* gray-200 */
  color: #4b5563;            /* gray-600 */
  display: inline-flex; align-items: center; justify-content: center;
}
.toggle-more:hover {
  background-color: #e0e7ff;
  box-shadow: 0 4px 10px rgba(17,24,39,0.10);
}
.toggle-more:active { transform: scale(0.94); }
.toggle-more .icon { transition: transform 160ms ease; }
.toggle-more.opened .icon { transform: scale(1.05); }


/* ============================
   Nickname badge (glass pill)
============================ */
.nick-badge{
  /* position은 마크업의 absolute를 그대로 사용 — 겹치지 않게 지정하지 않음 */
  z-index: 5; /* 이미지 위로 */
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px 0 8px; /* pl-2 pr-3와 균형 */
  height: 28px;
  border-radius: 9999px;
  font-weight: 800; letter-spacing: .1px;

  /* 글래스 효과 */
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.70);
  -webkit-backdrop-filter: saturate(150%) blur(6px);
  backdrop-filter: saturate(150%) blur(6px);

  /* 입체감 */
  box-shadow:
    0 10px 26px rgba(17,24,39,.22),
    inset 0 1px 0 rgba(255,255,255,.50);
  transition: filter .2s ease, box-shadow .2s ease, transform .14s ease;
}
.nick-badge:hover{
  filter: brightness(1.03);
  box-shadow: 0 14px 34px rgba(17,24,39,.28), inset 0 1px 0 rgba(255,255,255,.55);
}
.nick-badge:active{ transform: translateY(1px) scale(.99); }

/* 아바타: 하얀 링 + 살짝 입체감 */
.nick-badge img{
  width: 20px; height: 20px; /* w-5 h-5 유지용 */
  border-radius: 9999px; object-fit: cover;
  box-shadow:
    0 0 0 1.2px rgba(255,255,255,.95) inset,
    0 1px 2px rgba(17,24,39,.12);
}

/* 긴 닉네임 말줄임 */
.nick-badge span{
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ============================
   Follow button (overlay on image)
============================ */
.follow-btn{
  /* ⛔ position 제거해서 Tailwind의 absolute가 살아나도록 */
  /* position: relative;  <- 이 줄을 지웁니다 */
  z-index: 5; /* 이미지/배지 위로 */
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 12px;
  border-radius: 9999px;
  font-weight: 800; letter-spacing: .1px;
  border: 1px solid transparent;
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  backdrop-filter: saturate(140%) blur(6px);
  box-shadow: 0 8px 22px rgba(17,24,39,.20);
  transition: transform .14s ease, filter .2s ease, box-shadow .2s ease,
             background-color .2s ease, color .2s ease, border-color .2s ease;
  isolation: isolate;
}

/* 사진 위에서 경계가 보이도록 얇은 하얀 링 */
.follow-btn::after{
  content:"";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.70) inset;
  pointer-events: none;
}

.follow-btn:hover{ filter: brightness(1.03); box-shadow: 0 12px 28px rgba(17,24,39,.28); }
.follow-btn:active{ transform: translateY(1px) scale(.99); }

/* 상태별 색 */
.follow-btn.is-cta,
.follow-btn.bg-purple-600{
  background: linear-gradient(90deg,#a78bfa,#7c3aed) !important;
  color:#fff !important;
  border-color: transparent !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
}
.follow-btn.is-cta:hover,
.follow-btn.bg-purple-600:hover{ filter: brightness(1.05); }

.follow-btn.is-following,
.follow-btn.bg-white{
  background: rgba(255,255,255,.86) !important;
  color:#111827 !important;
  border-color: rgba(255,255,255,.80) !important;
}

.follow-btn i{ width:16px; height:16px; }


/* ============================
   Tabs (Grid/List)
============================ */
.tab-active,
.tab-inactive {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 0;
  font-weight: 700;
  color: #6b7280; /* gray-500 */
  transition: color 180ms ease;
}
.tab-active { color: #4c1d95; /* purple-900 */ }
.tab-active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #a78bfa, #7c3aed);
}
.tab-inactive:hover { color: #7c3aed; }

/* ============================
   Grid (프로필 그리드 뷰)
============================ */
.grid-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.grid-photos .cell {
  position: relative;
  border-radius: .75rem;
  overflow: hidden;
  background: #f3f4f6;
  box-shadow: 0 1px 2px rgba(17,24,39,0.05) inset;
  aspect-ratio: 1/1;
}
.grid-photos .grid-thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 240ms ease;
}
.grid-photos .cell:hover .grid-thumb { transform: scale(1.02); }

/* 탭 전환 시 그리드가 확실히 숨겨지도록 */
.grid-photos.hidden { display: none !important; }

/* ============================
   Detail box (더보기 영역)
============================ */
.detail-box {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    max-height 420ms ease,
    opacity 260ms ease,
    transform 260ms ease,
    padding-bottom 260ms ease;
}
.detail-box.open {
  max-height: 1000px;
  opacity: 1;
  transform: translateY(0);
  padding-bottom: 1rem;
}
.detail-box > .bg-gray-50 {
  background-color: #fafafa !important;
  border: 1px solid rgba(17, 24, 39, 0.06) !important;
  border-radius: .75rem;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.06) !important;
}
.detail-box .report-btn {
  transition: color 160ms ease, transform 160ms ease;
}
.detail-box .report-btn:active { transform: translateY(1px); }

/* 공지 박스: feed 카드와 동일한 시각적 폭 */
#noticeCards .notice-shell{
  width: 100%;
  max-width: 100%;
  border-radius: .75rem;                      /* rounded-xl */
  box-shadow: 0 6px 18px rgba(17,24,39,.08);  /* shadow-md 느낌 */
  overflow: hidden;
}

/* 슬라이드 항목은 카드 스타일 제거 (내용만 슬라이드) */
#noticeCards .swiper .swiper-slide{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* 공지 내부 여백: feed와 유사한 감 */
#noticeCards .notice-body{ padding: .75rem 1rem; background:#fff; }
#noticeCards .notice-media{ background:#f9fafb; }

/* 페이지네이션 위치 고정 */
#noticeCards .swiper-pagination{
  position: absolute !important;
  top: .5rem !important; right: .75rem !important;
  left: auto !important; bottom: auto !important;
  width: auto !important; text-align: right !important; z-index: 5;
}

/* ============================
   Drawer (history/menu) – 공용
============================ */
.drawer{
  position:fixed; top:0; right:0; bottom:0;
  width:88%; max-width:380px;
  background:#fff;
  box-shadow:-12px 0 24px rgba(17,24,39,.12);
  transform:translateX(100%);
  transition:transform 320ms cubic-bezier(.2,.7,.2,1), box-shadow 200ms ease;
  z-index:70; display:flex; flex-direction:column;
}
.drawer.open{ transform:translateX(0); }
/* 헤더 라인( Tailwind border-b 미생성 대비 ) */
.drawer > .h-14{ border-bottom:1px solid rgba(17,24,39,.08); }

/* 백드롭(콘텐츠 위, 드로어 아래) */
#drawerBackdrop{ z-index:65; }
#drawerBackdrop.show{
  opacity:1 !important; pointer-events:auto !important;
  transition:opacity 200ms ease; backdrop-filter:blur(2px);
}

/* ============================
   Drawer body scroll 영역 보정
============================ */
#historyList{
  height:calc(100% - 56px - 40px) !important; /* 헤더56 + 안내문40 보정 */
  overflow-y:auto; padding:16px;
}

/* ============================
   History item 카드 (공용 규칙)
============================ */
.drawer .history-item{
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
  border-radius:12px;
  padding:12px 14px;
  display:grid; grid-template-columns:36px 1fr; gap:12px;
  box-shadow:0 6px 18px rgba(17,24,39,.06);
}
.drawer .history-item + .history-item{ margin-top:12px; }

.drawer .hi-left{ display:flex; align-items:flex-start; justify-content:center; }

.drawer .hi-icon{
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9999px;
  background:#f5f3ff; color:#7c3aed;  /* 연보라 배경 + 보라 아이콘 */
  box-shadow:0 1px 2px rgba(17,24,39,.06);
}
.drawer .hi-icon i{ width:18px; height:18px; }
.drawer .hi-icon.like img{ width:20px; height:20px; display:block; }

.drawer .hi-body{ line-height:1.5; color:#111827; }
.drawer .hi-text{ font-size:14px; margin:2px 0 4px; overflow-wrap:anywhere; }
.drawer .hi-when{ font-size:12px; color:#6b7280; }

/* 드로어 내 문장 중간 아바타는 인라인로 강제 */
.drawer .hi-text img,
.drawer .hi-body img[width="20"][height="20"] {
  display: inline-block !important;
  vertical-align: middle;
  margin-right: 6px;
  border-radius: 9999px;
}

/* hi-icon 영역의 like 이미지는 블록 */
.drawer .hi-icon.like img { display: block; }

/* 핀치 줌 제스처 클래스(모바일) */
.touch-pinch-zoom { touch-action: pinch-zoom; }

/* ============================
   Spinner
============================ */
.spinner {
  width: 24px; height: 24px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #9333ea;
  border-radius: 50%;
  animation: spinner 0.6s linear infinite;
  margin: 0 auto;
}

/* ============================
   Swiper (공지 슬라이드)
============================ */
.swiper { width: 100%; }
.swiper .swiper-slide {
  background: #ffffff;
  border-radius: .75rem;
  box-shadow: 0 6px 18px rgba(17,24,39,0.08);
  padding: 1rem;
}
.swiper-pagination-bullet {
  width: 8px; height: 8px; margin: 0 3px;
  background-color: #d1d5db; opacity: 0.6;
}
.swiper-pagination-bullet-active {
  background-color: #7c3aed; opacity: 1;
}
.swiper-pagination {
  position: absolute !important;
  top: .5rem !important;
  right: 2.5rem !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  text-align: right !important;
  z-index: 20;
}

/* ============================
   Tag autocomplete
============================ */
.tag-suggestion-item.active { background-color: #e9d5ff; }

/* ============================
   Feed sentinel tidy
============================ */
#feed > #scroll-sentinel,
#scroll-sentinel { margin:0 !important; padding:0 !important; }


/* ============================
   Modal System — Overlay / Panel / Buttons
   (Alert, Login, Report, Image 공용)
============================ */

/* Design tokens */
:root{
  --mg-overlay: rgba(8, 10, 20, .56);
  --mg-panel-bg: rgba(255,255,255,.86);
  --mg-panel-border: rgba(255,255,255,.55);
  --mg-shadow-xl: 0 22px 60px rgba(17,24,39,.28);
  --mg-shadow-lg: 0 12px 30px rgba(17,24,39,.18);
  --mg-radius-xl: 16px;
  --mg-radius-2xl: 20px;

  --mg-primary-start:#a78bfa; /* purple-300 */
  --mg-primary-end:#7c3aed;   /* purple-600 */
  --mg-danger-start:#f87171;  /* red-400 */
  --mg-danger-end:#ef4444;    /* red-500 */
  --mg-gray-100:#f3f4f6;
  --mg-gray-200:#e5e7eb;
  --mg-gray-500:#6b7280;
  --mg-gray-700:#374151;
}

/* ==== OVERLAYS (z, fade) ==== */
#alertModal,
#loginModal,
#reportModal,
#imageModal{
  z-index: 90 !important;                 /* 드로어(z-70) 위 */
  background: radial-gradient(1200px 800px at 50% 100%,
              rgba(124,58,237,.12), transparent 55%) ,
              var(--mg-overlay);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .28s ease;
}
#alertModal:not(.hidden),
#loginModal:not(.hidden),
#reportModal:not(.hidden),
#imageModal:not(.hidden){ opacity: 1; }

/* ==== PANELS (glass + pop-in) ==== */
.modal-panel{
  position: relative;
  background: var(--mg-panel-bg);
  border: 1px solid var(--mg-panel-border);
  border-radius: var(--mg-radius-2xl);
  box-shadow: var(--mg-shadow-xl);
  transform: scale(.96);
  transition: transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s ease;
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
}
/* 빛 반사 하이라이트 */
.modal-panel::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 40%);
  pointer-events:none;
}
#alertModal:not(.hidden) .modal-panel,
#loginModal:not(.hidden) .modal-panel,
#reportModal:not(.hidden) .modal-panel{
  transform: scale(1);
  box-shadow: var(--mg-shadow-xl);
}

/* ==== HEAD / BODY / CLOSE ==== */
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.75rem; padding-bottom:.5rem;
  border-bottom:1px solid rgba(17,24,39,.08);
}
.modal-title{ font-weight:800; font-size:1.06rem; color:#111827; letter-spacing:.2px; }
.modal-body{ color:#374151; }

/* Close icon button (옵션) */
.modal-close{
  width:38px; height:38px; border-radius:9999px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--mg-gray-500);
  transition: background-color .18s ease, color .18s ease, transform .14s ease;
}
.modal-close:hover{ background:var(--mg-gray-100); color:var(--mg-gray-700); }
.modal-close:active{ transform: scale(.96); }
.modal-close:focus-visible{ box-shadow:0 0 0 3px rgba(124,58,237,.35); outline:0; }

/* ==== BUTTONS (공용) ==== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:104px; height:42px;
  padding:0 16px; border-radius:12px;
  font-weight:800; letter-spacing:.1px;
  border:1px solid transparent; cursor:pointer; user-select:none;
  transition: transform .14s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active{ transform: translateY(1px) scale(.99); }

/* Primary — purple gradient */
.btn-primary{
  background: linear-gradient(90deg, var(--mg-primary-start), var(--mg-primary-end));
  color:#fff;
  box-shadow: 0 10px 26px rgba(124,58,237,.28);
}
.btn-primary:hover{ filter: brightness(1.03); box-shadow: 0 14px 34px rgba(124,58,237,.34); }
.btn-primary:focus-visible{ box-shadow: 0 0 0 3px rgba(124,58,237,.38), 0 10px 26px rgba(124,58,237,.28); outline:0; }

/* Danger — red gradient */
.btn-danger{
  background: linear-gradient(90deg, var(--mg-danger-start), var(--mg-danger-end));
  color:#fff;
  box-shadow: 0 10px 26px rgba(239,68,68,.25);
}
.btn-danger:hover{ filter: brightness(1.03); box-shadow: 0 14px 34px rgba(239,68,68,.32); }
.btn-danger:focus-visible{ box-shadow: 0 0 0 3px rgba(239,68,68,.35), 0 10px 26px rgba(239,68,68,.25); outline:0; }

/* Ghost — subtle gray */
.btn-ghost{
  background: var(--mg-gray-100);
  color: var(--mg-gray-700);
  border-color: rgba(17,24,39,.08);
  box-shadow: var(--mg-shadow-lg);
}
.btn-ghost:hover{ background:#eef2ff; }
.btn-ghost:focus-visible{ box-shadow: 0 0 0 3px rgba(124,58,237,.28); outline:0; }

/* Button sizes (필요시 사용) */
.btn-sm{ min-width:80px; height:36px; padding:0 12px; font-weight:700; }
.btn-lg{ min-width:128px; height:48px; padding:0 18px; font-size:1.02rem; }

/* ============================
   Login Modal (#loginModal)
   - 레이아웃/여백/버튼 정렬 보강
============================ */
#loginModal {
  z-index: 90 !important;
  backdrop-filter: blur(8px); /* 살짝 더 또렷하게 */
}
#loginModal:not(.hidden) { opacity: 1 !important; }

/* 패널 폭/내부 패딩 정리 */
#loginModal .modal-panel{
  width: min(420px, calc(100% - 32px));
  padding: 20px 20px 18px;            /* 상·좌우·하 */
  transform: scale(.95);
  transition: transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s ease;
}
#loginModal:not(.hidden) .modal-panel{ transform: scale(1); }

/* 헤더/타이틀 라인 간격 보정 */
#loginModal .modal-header{
  margin-bottom: .75rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(17,24,39,.08);
}
#loginModal .modal-title{
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: .2px;
  color: #111827;
}

/* 본문 문단 여백/행간 – 더 읽기 쉬움 */
#loginModal .modal-body{
  margin: 10px 0 14px;
  line-height: 1.6;
  color: #374151;
}

/* 버튼 행: 오른쪽 정렬 + 균등 간격 */
#loginModal .modal-actions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  padding-top: 2px;          /* 헤더 라인/본문과의 텐션 */
}

/* 버튼: 동일 높이/둥글기/최소폭 통일 */
#loginModal .btn{
  height: 44px;
  min-width: 112px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: .1px;
}

/* Ghost 버튼을 더 또렷하게(유리감 유지) */
#loginModal .btn-ghost{
  background: rgba(255,255,255,.86);
  color: #374151;
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 8px 22px rgba(17,24,39,.10);
}

/* Primary 버튼 그림자 강도 밸런스 */
#loginModal .btn-primary{
  box-shadow: 0 12px 28px rgba(124,58,237,.30);
}

/* 아주 좁은 화면에서는 세로 스택 */
@media (max-width: 380px){
  #loginModal .modal-actions{
    flex-direction: column-reverse;
    gap: 8px;
  }
  #loginModal .btn{
    width: 100%;
    min-width: 0;
  }
}


/* ==== IMAGE MODAL ==== */
#imageModal img{
  border-radius: 20px;
  box-shadow: var(--mg-shadow-xl);
  transition: transform .28s ease, box-shadow .28s ease;
  transform: translateZ(0);       /* 스크롤 때 티어링 방지 */
  cursor: zoom-out;
}
#imageModal:hover img{ transform: scale(1.01); }
.touch-pinch-zoom{ touch-action: pinch-zoom; }

/* ==== REPORT FORM CONTROLS ==== */
#reportModal select,
#reportModal textarea{
  width:100%;
  padding:.65rem .75rem;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(17,24,39,.12);
  transition:border-color .18s ease, box-shadow .18s ease;
}
#reportModal select:focus,
#reportModal textarea:focus{
  outline:0;
  border-color:#a78bfa;
  box-shadow:0 0 0 3px rgba(124,58,237,.25);
}

/* ==== Alert modal specific ==== */
#alertModal{ z-index: 9999 !important; }
#alertModal .modal-panel{ text-align:center; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #alertModal, #loginModal, #reportModal, #imageModal,
  .modal-panel, .btn, #imageModal img{
    transition:none !important; animation:none !important;
  }
}

/* ============================
   Topbar (glass, gradient, elevate on scroll)
============================ */
.topbar{
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(17,24,39,.08);
  transition: box-shadow .22s ease, background-color .22s ease, border-color .22s ease;
}
.topbar::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, #a78bfa33, #7c3aed4d, #a78bfa33);
  pointer-events: none;
}
.topbar-inner{
  max-width: 42rem; /* = 672px (기존 max-w-2xl) */
  margin: 0 auto;
  padding: .75rem 1rem;
  display: flex; align-items: center; justify-content: space-between;
}
.topbar-title{
  font-size: 1rem;              /* text-base */
  font-weight: 800;             /* bold+ */
  color: #4c1d95;               /* purple-900 */
  letter-spacing: .2px;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}
.topbar-actions{ width: 1.5rem; height: 1.5rem; } /* 좌/우 자리 맞춤용 빈 영역 */

/* 스크롤 시 살짝 떠오르는 느낌 */
.topbar.elevated{
  background: rgba(255,255,255,.85);
  border-color: rgba(17,24,39,.10);
  box-shadow: 0 8px 24px rgba(17,24,39,.10);
}

.topbar .topbar-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border-radius:9999px;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border:1px solid rgba(17,24,39,.08);
  color:#4b5563; /* gray-600 */
  box-shadow: 0 2px 8px rgba(17,24,39,.08);
  transition:
    transform .16s cubic-bezier(.2,.7,.2,1),
    box-shadow .2s ease,
    background-color .2s ease,
    border-color .2s ease;
}
.topbar .topbar-btn:hover{
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 18px rgba(17,24,39,.12);
  color:#7c3aed; /* purple-600 */
}
.topbar .topbar-btn:active{ transform: scale(.96); }
.topbar .topbar-btn i{ width:20px; height:20px; }

/* 선택: 툴팁 안 리스트 간격 미세 조정 */
#followTooltip ul li + li { border-top: 1px dashed rgba(0,0,0,0.05); }

/* ============================
   Purchase Verify Modal (구매 인증)
   - 폭/여백/둥근모서리/타이포/버튼정렬
============================ */
#purchaseVerifyModal{
  /* 드로어/공지/툴팁 보다 항상 위 */
  z-index: 9999 !important;
  /* 화면 가장자리에 닿지 않게 오버레이 자체에 좌우 패딩 */
  padding-left: 16px;
  padding-right: 16px;
}

/* 패널: 화면폭 대응 + 라운드 축소 + 내부 패딩 */
#purchaseVerifyModal .modal-panel{
  width: min(640px, calc(100% - 32px));  /* 화면 가로에 맞춰 넉넉하게 */
  border-radius: 12px;                   /* 둥근 모서리 비율 ↓ */
  padding: 18px 18px 14px;               /* 상·좌우·하 */
}

/* 헤더: 좌우 패딩, 아이콘 좌측 여백 */
#purchaseVerifyModal .modal-header{
  padding-left: 12px;
  padding-right: 12px;
}
#purchaseVerifyModal .modal-header i{
  margin-left: 4px;                      /* 아이콘 왼쪽 여백 */
  margin-right: 6px;
  color: #7c3aed;                        /* 브랜드 퍼플 */
}

/* 본문: 입력창 바깥 좌우 여백 + 문구 줄간격 타이트 */
#purchaseVerifyModal .modal-body{
  padding-left: 12px;                    /* ⬅︎ 입력창 바깥 좌우 여백 확보 */
  padding-right: 12px;
}
#purchaseVerifyModal .modal-body p{
  line-height: 1.35;                     /* 안내 문구 줄간격 축소 */
  margin-bottom: 6px;
}

/* 입력 필드 높이/가독성 보강 */
#purchaseVerifyModal .modal-body input[type="tel"],
#purchaseVerifyModal .modal-body input[type="text"],
#purchaseVerifyModal .modal-body .ui-input{
  height: 48px;
  font-size: 15px;
  padding: 0 12px;
}

/* 액션: 오른쪽 여백 넉넉 + 간격 유지 (버튼이 모달 끝에 붙지 않도록) */
#purchaseVerifyModal .modal-actions{
  padding: 8px 16px 12px 16px;           /* 상·우·하·좌 (우측 여백 확실히) */
  gap: 10px;
  border-top: 1px solid rgba(17,24,39,.06);
}

/* 버튼 크기/라운드 통일 */
#purchaseVerifyModal .modal-actions .btn{
  height: 44px;
  min-width: 112px;
  border-radius: 12px;
  font-weight: 800;
}

/* (보장) 퍼플 프라이머리 강제 – 테마 충돌 시 우선 */
#purchaseVerifyModal .btn-primary{
  background: linear-gradient(90deg, #a78bfa, #7c3aed) !important;
  color:#fff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 28px rgba(124,58,237,.30);
}

/* 구매인증 결과 메시지 (좀 더 크게/카드형으로) */
.pv-msg{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: .98rem;                 /* 기존보다 살짝 크게 */
  line-height: 1.45;
  background: #faf5ff;               /* 연보라 */
  color:#4c1d95;                     /* 보라 계열 텍스트 */
  border:1px solid rgba(167,139,250,.45);
  box-shadow: 0 8px 20px rgba(17,24,39,.08), inset 0 1px 0 rgba(255,255,255,.6);
}
.pv-msg::before{
  content:"";
  display:inline-block; flex:0 0 auto;
  width:8px; height:8px; border-radius:9999px;
  background: linear-gradient(90deg,#a78bfa,#7c3aed);
  box-shadow: 0 0 0 6px rgba(167,139,250,.25);
}

/* 상태별 강조 (필요 시 JS로 클래스 토글) */
.pv-msg.ok{
  background:#ecfdf5; color:#065f46;               /* emerald 계열 */
  border-color:#a7f3d0;
}
.pv-msg.ok::before{
  background: linear-gradient(90deg,#34d399,#10b981);
  box-shadow:0 0 0 6px rgba(16,185,129,.22);
}
.pv-msg.err{
  background:#fef2f2; color:#991b1b;               /* red 계열 */
  border-color:#fecaca;
}
.pv-msg.err::before{
  background: linear-gradient(90deg,#f87171,#ef4444);
  box-shadow:0 0 0 6px rgba(239,68,68,.22);
}


/* ============================
   BottomNav active state
============================ */
.bottomnav .nav-item { position: relative; }
.bottomnav [aria-current="page"],
.bottomnav .nav-active { color: #7c3aed !important; }
.bottomnav .nav-item.nav-active::after,
.bottomnav [aria-current="page"]::after {
  content: ""; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 3px; border-radius: 9999px;
  background: linear-gradient(90deg, #a78bfa, #7c3aed);
}
.bottomnav .nav-item:focus-visible {
  box-shadow: 0 0 0 3px rgba(124,58,237,.35);
  border-radius: 12px;
}

/* ============================
   Post form (upload & crop)
============================ */

/* 폼 카드(글래스) */
.form-card{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(17,24,39,.14);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  backdrop-filter: saturate(150%) blur(8px);
  padding: 18px 16px;
}

/* 공통 입력 */
.ui-input{
  width: 100%;
  padding: .75rem .9rem;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.12);
  background: #fff;
  font-size: .95rem;
  color: #111827;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.ui-input::placeholder{ color: #9ca3af; }
.ui-input:focus{
  outline: 0;
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(124,58,237,.25);
}

/* 파일 인풋 (크로스 브라우저) */
.file-input{
  width:100%;
  border:1px dashed rgba(124,58,237,.4);
  border-radius: 14px;
  padding: .9rem;
  background: #faf5ff;
  color:#6b7280;
  cursor:pointer;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.file-input:hover{ background:#f5f3ff; border-color:#7c3aed; }
.file-input:focus{ outline:0; box-shadow:0 0 0 3px rgba(124,58,237,.25); }
.file-input::file-selector-button{
  margin-right: .8rem;
  padding: .55rem .9rem;
  border:0;
  border-radius: 10px;
  background: linear-gradient(90deg,#a78bfa,#7c3aed);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
@supports not selector(::file-selector-button) {
  /* 사파리/구형 브라우저 대비 – 내부 버튼 미지원 시 전체를 버튼처럼 */
  .file-input{ text-align:center; }
}

/* 프리뷰/크로퍼 스테이지 */
.cropper-stage{
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(0deg, rgba(17,24,39,.04), rgba(17,24,39,.04)),
    conic-gradient(from 90deg at 1px 1px, #f9fafb 25%, transparent 0) 0 0/16px 16px;
  border: 1px solid rgba(17,24,39,.08);
  min-height: 200px;
}
#previewImage{
  display:block; width:100%; height:auto; 
}

/* 크로퍼 테마 (CropperJS) */
.cropper-view-box{ outline: 2px solid #7c3aed; outline-color:#7c3aed; }
.cropper-line{ background-color:#7c3aed; }
.cropper-point{ background-color:#7c3aed; opacity:.9; }
.cropper-modal{ background-color: rgba(0,0,0,.35); }

/* 세그먼트 버튼 그룹(툴바) */
.seg-group{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  border:1px solid rgba(17,24,39,.12);
  border-radius: 14px; overflow:hidden;
  background:#fff;
}
.seg{
  height:42px; padding:0 .75rem;
  font-weight:800; font-size:.95rem;
  background:#f3f4f6; color:#374151;
  border-right:1px solid rgba(17,24,39,.08);
  transition: background-color .18s ease, color .18s ease, transform .14s ease;
}
.seg:last-child{ border-right:0; }
.seg:hover{ background:#eef2ff; }
.seg:active{ transform: translateY(1px) scale(.99); }

/* 주요 작업(자르기) 강조 */
.seg-primary{
  background: linear-gradient(90deg,#34d399,#10b981); /* emerald */
  color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.18);
}
.seg-primary:hover{ filter: brightness(1.04); }

/* 전역 버튼 유틸(모달 외부에서도 사용) */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:104px; height:44px;
  padding:0 16px; border-radius:14px;
  font-weight:800; letter-spacing:.1px;
  border:1px solid transparent; cursor:pointer; user-select:none;
  transition: transform .14s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn-lg{ min-width:128px; height:48px; }

/* Primary – purple gradient */
.btn-primary{
  background: linear-gradient(90deg, #a78bfa, #7c3aed);
  color:#fff;
  box-shadow: 0 12px 28px rgba(124,58,237,.30);
}
.btn-primary:hover{ filter: brightness(1.03); box-shadow: 0 16px 36px rgba(124,58,237,.34); }

/* (선택) Danger/ Ghost 등도 필요하면 재사용 가능
.btn-ghost{ background:#f3f4f6; color:#374151; border-color:rgba(17,24,39,.08); box-shadow:0 8px 22px rgba(17,24,39,.10); }
.btn-danger{ background:linear-gradient(90deg,#f87171,#ef4444); color:#fff; box-shadow:0 12px 28px rgba(239,68,68,.28); }
*/

/* =========================================
   Auth Modals (Find ID / Reset Password)
   내부 여백 & 버튼 정렬 보정
========================================= */
#findIdModal .modal-panel,
#resetPwModal .modal-panel{
  width: min(420px, calc(100% - 32px));
  padding: 18px 18px 16px;         /* 상·좌우·하 */
  border-radius: 16px;
}

/* 상단 라인/정렬 */
#findIdModal .modal-header,
#resetPwModal .modal-header{
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(17,24,39,.08);
}
#findIdModal .modal-title,
#resetPwModal .modal-title{
  font-weight: 800; font-size: 1.06rem; letter-spacing: .2px; color:#111827;
}

/* 본문: 컴팩트하지만 숨 안차게 */
#findIdModal .modal-body,
#resetPwModal .modal-body{
  margin-top: 8px;
  margin-bottom: 10px;
  display: grid; gap: 10px;
  line-height: 1.55;
}

#resetPwModal .modal-body #step1:not(.hidden),
#resetPwModal .modal-body #step2:not(.hidden){
  display: grid; gap: 10px;
}

/* (안전망) hidden이 붙어 있으면 무조건 감춤 */
#resetPwModal #step1.hidden,
#resetPwModal #step2.hidden{
  display: none !important;
}

/* 결과 메시지 박스와의 간격 */
#findIdModal #findIdResult,
#resetPwModal #resetPwResult{
  margin-bottom: 4px;
}

/* 버튼 정렬: 우측 정렬 + 일정 간격 */
#findIdModal .modal-actions,
#resetPwModal .modal-actions{
  margin-top: 8px;
  padding-top: 6px;
  display: flex; gap: 10px;
  justify-content: flex-end; align-items: center;
  border-top: 1px solid rgba(17,24,39,.04);
}

/* 작은 화면에서는 버튼을 세로로 스택 */
@media (max-width: 380px){
  #findIdModal .modal-actions,
  #resetPwModal .modal-actions{
    flex-direction: column-reverse;
    gap: 8px;
  }
  #findIdModal .modal-actions .btn,
  #resetPwModal .modal-actions .btn{
    width: 100%; min-width: 0;
  }
}

/* 닫기 버튼(×) 미려하게 */
.modal-close{
  border: 1px solid rgba(17,24,39,.10);
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: #fff;
  color: #6b7280;
  transition: background-color .18s ease, box-shadow .2s ease, transform .12s ease;
}
.modal-close:hover{ background:#f9fafb; box-shadow: 0 8px 18px rgba(17,24,39,.10); }
.modal-close:active{ transform: translateY(1px) scale(.98); }

/* =========================================
   Register: 회원 유형 선택 카드
========================================= */
.select-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:18px 14px; border-radius:14px; border:1px solid rgba(17,24,39,.12);
  background:#fff;
  cursor:pointer; user-select:none;
  transition: box-shadow .2s ease, border-color .2s ease, transform .12s ease, background-color .2s ease;
}
.select-card:hover{ box-shadow:0 10px 24px rgba(17,24,39,.10); border-color:rgba(124,58,237,.35); background:#faf5ff; }
.select-card:active{ transform: translateY(1px) scale(.99); }
.select-card.selected{
  background: linear-gradient(180deg, #faf5ff, #ffffff);
  border-color:#a78bfa;
  box-shadow:0 12px 28px rgba(124,58,237,.18);
}
.select-title{ font-weight:800; color:#4c1d95; }
.select-desc{ margin-top:4px; font-size:12px; color:#6b7280; }

/* =========================================
   Register: 안내/레이블 텍스트
========================================= */
.helper-text{ font-size:12px; color:#6b7280; }
.helper-label{ display:block; font-size:12px; font-weight:600; color:#374151; margin-bottom:6px; }

/* =========================================
   Modals: 공통(이미 프로젝트에 존재하면 스킵 가능)
========================================= */
.modal-panel{
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 18px 40px rgba(17,24,39,.16);
  -webkit-backdrop-filter:saturate(150%) blur(8px);
  backdrop-filter:saturate(150%) blur(8px);
  transform: scale(.97);
  animation: scaleIn .25s ease forwards, fadeIn .25s ease forwards;
}
.modal-header{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid rgba(17,24,39,.08);
}
.modal-title{ font-weight:800; font-size:1.06rem; letter-spacing:.2px; color:#111827; }
.modal-actions{
  margin-top:10px; padding-top:8px;
  display:flex; justify-content:flex-end; gap:10px; align-items:center;
  border-top:1px solid rgba(17,24,39,.04);
}
.modal-close{
  border:1px solid rgba(17,24,39,.10);
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; background:#fff; color:#6b7280;
  transition: background-color .18s ease, box-shadow .2s ease, transform .12s ease;
}
.modal-close:hover{ background:#f9fafb; box-shadow:0 8px 18px rgba(17,24,39,.10); }
.modal-close:active{ transform: translateY(1px) scale(.98); }

/* (작은 화면 버튼 스택) */
@media (max-width: 380px){
  .modal-actions{ flex-direction: column-reverse; gap:8px; }
  .modal-actions .btn{ width:100%; min-width:0; }
}

/* =========================================
   섹션 표시/숨김 안전망 (hidden 유지)
========================================= */
#buyerSection.hidden, #generalSection.hidden { display:none !important; }
#buyerSection:not(.hidden), #generalSection:not(.hidden) { display:block; }

/* =========================================
   Toast (공통)
========================================= */
.toast{
  left:50%; transform:translateX(-50%);
  min-width:280px;
  background:#7c3aed; color:#fff;
  border-radius:10px; padding:10px 14px;
  box-shadow:0 12px 28px rgba(17,24,39,.22);
  z-index:1000; text-align:center;
}
.toast.top{ top:12px; }

/* ============================
   Register Step2 전용 보강
============================ */

/* 회원구분 배지 */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:9999px; font-size:13px; font-weight:700;
  border:1px solid transparent; white-space:nowrap;
}
.badge-regular{ background:#f3e8ff; color:#6d28d9; border-color:#d6bcfa; }
.badge-general{ background:#f3f4f6; color:#374151; border-color:#d1d5db; }
.badge-warn{ background:#fef3c7; color:#92400e; border-color:#fcd34d; }

/* 입력 오른쪽 아이콘 */
.input-with-icon{ position:relative; }
.input-icon{
  position:absolute; top:50%; right:10px; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px;
  transition: background-color .18s ease;
}
.input-icon:hover{ background:#f3f4f6; }

/* 필드 하단 설명/피드백 */
.field-note{ margin-top:6px; font-size:12px; }

/* 비밀번호 강도 게이지 */
.pw-meter{ width:100%; height:6px; background:#f3f4f6; border-radius:9999px; overflow:hidden; }
.pw-bar{ height:100%; width:0%; transition: width .25s ease; }
.pw-bar.weak{ background:#ef4444; }   /* red-500 */
.pw-bar.mid{  background:#f59e0b; }   /* amber-500 */
.pw-bar.strong{ background:#10b981; } /* emerald-500 */

/* 아바타 프리뷰(원형 고정 + 글래스 테두리) */
.avatar-preview {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1200 / 630;   /* 그대로 유지 */
  background: #f8fafc;
  border: 1px dashed #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
  position: relative;
}

/* ⬇️ 자른 비율 그대로 표시 (크롭/늘림 없음) */
.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;         /* 핵심 */
  display: block;
  image-rendering: -webkit-optimize-contrast; /* 선택: 모바일 가독성 */
}

/* ============================
   Playground (Webzine)
============================ */

/* ====== Webzine: 에디터 콘텐츠 리셋 & 타이포 ====== */
.prose-reset{
  padding: .75rem 1.25rem 1.1rem;
  color:#1f2937; /* gray-800 */
  font-size:.95rem;
  line-height:1.58;           /* 줄간격 과하지 않게 */
  text-align: justify;        /* 양쪽 정렬 */
  text-justify: inter-word;
  word-break: keep-all;       /* 한글 줄바꿈 보정 */
  hyphens: auto;
}
.prose-reset h1,.prose-reset h2,.prose-reset h3{
  font-weight:800; line-height:1.2; margin:1.2em 0 .6em;
}
.prose-reset h1{ font-size:1.5rem; }
.prose-reset h2{ font-size:1.25rem; }
.prose-reset h3{ font-size:1.125rem; }
.prose-reset p{ margin:.5rem 0; } /* 단락 여백 조금만 */
.prose-reset ul, .prose-reset ol{ margin:.5rem 0 .5rem 1rem; }
.prose-reset li{ margin:.2rem 0; }
.prose-reset blockquote{
  margin:.8rem 0; padding:.7rem 1rem;
  border-left:4px solid #a78bfa; background:#faf5ff; color:#4b5563;
  border-radius:.5rem;
}
.prose-reset code{
  background:#f3f4f6; padding:.15rem .35rem; border-radius:.35rem;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
}
.prose-reset pre{
  background:#0f172a; color:#e5e7eb; padding:1rem; border-radius:.75rem; overflow:auto; font-size:.85rem;
}
.prose-reset table{ width:100%; border-collapse:collapse; margin:1rem 0; font-size:.9rem; }
.prose-reset th, .prose-reset td{ border:1px solid rgba(17,24,39,.08); padding:.6rem; }
.prose-reset th{ background:#f9fafb; font-weight:700; }

/* === 섹션 간격 타이트하게(목록/문단 다음 헤딩 상단 여백 축소) === */
.prose-reset h2{ margin:.85em 0 .5em; }   /* 기존 1.25em → 0.85em */
.prose-reset h3{ margin:.75em 0 .45em; }  /* 기존 1.125em → 0.75em */
.prose-reset :is(ul,ol,blockquote,pre) + :is(h2,h3){ margin-top:.5rem; }
.prose-reset p + :is(h2,h3){ margin-top:.65rem; }
.prose-reset ul, .prose-reset ol{ margin:.35rem 0 .45rem 1rem; }
.prose-reset li{ margin:.18rem 0; }

/* ====== 에디터 본문 이미지(글 내부) – 반응형 + 카드 톤 ====== */
.zine-img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;          /* 비율 유지 (크롭 X) */
  background:#f3f4f6;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(17,24,39,.08);
  margin:.6rem 0 .9rem;
  cursor:zoom-in;
}

/* ===== Playground Hero media (16:9 + no-crop) ===== */
.zine-media{ position:relative; }

.zine-16x9{
  position:relative;
  aspect-ratio:16 / 9;         /* 컨테이너 16:9 고정 */
  background:#f3f4f6;
  border-radius:14px;
  overflow:hidden;              /* 둥근 모서리 유지 */
  box-shadow:0 8px 24px rgba(17,24,39,.08);
}

/* 컨테이너 안에서 원본비율 그대로 중앙 정렬(크롭 X) */
.zine-16x9 .zine-image{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:auto; height:auto;      /* 고정폭/고정높이 제거 */
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center center;
  display:block;
  cursor:zoom-in;
}

/* ===== 리스트/카드 ===== */
.zine-list{ 
  display:flex; 
  flex-direction:column; 
  gap:1rem; 
  /* ⬇️ 하단 네비(고정)와 겹침 방지 여백 */
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

.zine-card{
  background:#fff;
  border:1px solid rgba(17,24,39,.06);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(17,24,39,.10);
}

/* 마지막 카드 추가 여백은 0으로(패딩이 대신 담당) */
.zine-card:last-child{ margin-bottom: 0; }

.zine-title{
  font-weight:800;
  font-size:1.125rem;
  padding:1rem 1.25rem .5rem;
  color:#111827;
  display:flex; align-items:center; gap:.5rem;
}

.zine-title-dot{
  width:8px; height:8px; border-radius:9999px;
  background:linear-gradient(90deg,#a78bfa,#7c3aed);
  box-shadow:0 0 0 4px rgba(167,139,250,.25);
}

/* 등록일(메타) 숨김 — 마크업이 남아 있어도 보이지 않도록 */
.zine-meta{ display:none !important; }

/* === 구매 인증 모달 기본 === */
.pv-modal { display: none; align-items: center; justify-content: center; }
.pv-modal.flex { display: flex; }
.pv-backdrop { background: rgba(17, 24, 39, 0.45); backdrop-filter: blur(2px); }
.pv-dialog {
  width: 420px; max-width: calc(100vw - 24px);
  background:#fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  padding: 20px 20px 16px; position: relative;
  animation: pvPop .2s ease-out;
}
@keyframes pvPop { from { transform: translateY(8px) scale(.98); opacity: .6; } to { transform: none; opacity: 1; } }

.pv-close {
  position: absolute; right: 8px; top: 6px; font-size: 28px; line-height: 1;
  background: transparent; border: 0; color: #6b7280; cursor: pointer;
}
.pv-close:hover { color: #111827; }

.pv-title { font-size: 18px; font-weight: 700; color:#111827; margin: 4px 24px 14px 2px; }
.pv-label { display:block; font-size: 13px; color:#6b7280; margin-bottom: 6px; }

.pv-input-row { display:flex; gap:8px; }
.pv-input {
  flex:1; height:44px; padding: 10px 12px; border:1px solid #e5e7eb; border-radius: 12px;
  font-size:14px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.pv-input:focus { border-color:#a78bfa; box-shadow: 0 0 0 4px rgba(167,139,250,.15); }

.pv-btn {
  height:44px; padding: 0 14px; border-radius: 12px; border:1px solid transparent;
  font-weight: 600; font-size:14px; cursor:pointer; transition: transform .02s, box-shadow .15s, background .15s, color .15s;
}
.pv-btn:active { transform: translateY(1px); }
.pv-btn-primary { background: linear-gradient(135deg,#8b5cf6,#6366f1); color:#fff; box-shadow: 0 8px 16px rgba(99,102,241,.25); }
.pv-btn-primary:hover { filter: brightness(1.03); }
.pv-btn-light { background:#f3f4f6; color:#374151; }
.pv-btn-light:hover { background:#e5e7eb; }
.pv-btn-ghost { background:transparent; color:#6b7280; }
.pv-btn-ghost:hover { color:#111827; }

.pv-actions {
  display:flex; justify-content: space-between; align-items:center;
  gap:8px; margin-top: 12px;
}

/* === 결과 메시지: ok / err === */
.pv-msg {
  margin-top: 10px; border-radius: 12px; padding: 10px 12px 10px 40px;
  font-size: 13px; min-height: 40px; display: none; position: relative;
  border:1px solid transparent;
}
.pv-msg.show { display:block; }
.pv-msg::before {
  content:""; position:absolute; left:12px; top:50%; transform: translateY(-50%);
  width:18px; height:18px; -webkit-mask-size: cover; mask-size: cover; background: currentColor;
}
.pv-msg.ok {
  background: #ecfeff; border-color:#a5f3fc; color:#0e7490;
}
.pv-msg.ok::before {
  /* 체크 아이콘 (data URI, SVG) */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
}
.pv-msg.err {
  background: #fef2f2; border-color:#fecaca; color:#b91c1c;
}
.pv-msg.err::before {
  /* 경고 아이콘 */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12' y2='17'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12' y2='17'/></svg>");
}

/* === 반응형: 모바일 전체폭 & 세로 정렬 === */
@media (max-width: 520px) {
  /* === 구매 인증 모달 기본 === */
  .pv-dialog {
    width: 340px; /* 기존 420px → 적당한 폭으로 축소 */
    max-width: calc(100vw - 32px); /* 화면 좌우 여백 확보 */
    background: #fff;
    border-radius: 14px; /* 살짝 더 둥글게 */
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
    padding: 16px 18px; /* 기존보다 패딩 줄임 */
    position: relative;
    animation: pvPop .2s ease-out;
  }

  .pv-title { margin-top: 6px; }
  .pv-input-row { flex-direction: column; }
  .pv-btn { width: 100%; }
  .pv-actions { flex-direction: column-reverse; align-items: stretch; }
}

.pv-title {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 4px 24px 14px 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pv-title-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z'/><path d='M8 12l2 2 4-4'/></svg>") no-repeat center/contain;
}


/* === 토스트 === */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 22px; background: rgba(17, 24, 39, 0.92); color:#fff;
  padding: 10px 14px; border-radius: 12px; font-size: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 60; opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.hidden { display: none; }


/* ============================
   Animations
============================ */
@keyframes spinner { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pulse { 0%{transform:scale(1);} 50%{transform:scale(1.15);} 100%{transform:scale(1);} }
.pulse { animation: pulse 0.3s ease-in-out; }

/* ============================
   Reduced motion respect
============================ */
@media (prefers-reduced-motion: reduce) {
  .transition-transform,
  .toggle-more,
  .follow-btn,
  .like-icon,
  .detail-box,
  .drawer,
  #imageModal img,
  .animate-fade,
  .animate-scale,
  #alertModal .modal-panel,
  #loginModal .modal-panel,
  #reportModal .modal-panel {
    transition: none !important;
    animation: none !important;
  }
}

/* Mango Message Drawer (왼쪽 슬라이드, 기존 drawer와 일치) */
#msgDrawer{left:0;right:auto;transform:translateX(-100%);pointer-events:none}
#msgDrawer.open{transform:translateX(0);pointer-events:auto}

/* Message tabs (Grid/List 탭과 클래스 분리) */
.mgm-tab-active{background:#7C3AED;color:#fff}
.mgm-tab-inactive{background:#E5E7EB;color:#374151}

/* Mango UI buttons */
.mg-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.5rem .9rem;border-radius:.6rem;font-weight:700;border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  font-size:14px;line-height:1.1}
.mg-btn:focus{outline:2px solid #C4B5FD;outline-offset:2px}
.mg-btn-primary{background:#7C3AED;color:#fff;border-color:#6D28D9}
.mg-btn-primary:hover{background:#6D28D9}
.mg-btn-ghost{background:#fff;color:#374151;border-color:#E5E7EB}
.mg-btn-ghost:hover{background:#F3F4F6}

/* ===== Mango modal overlay (검정+흐림) — 항상 최상위 ===== */
.mg-modal-overlay{
  position: fixed; inset: 0;
  z-index: 10050;                 /* 공지/드로어/상단바보다 위 */
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}

/* 모달 패널 좌우 여백 보장(이미 있다면 그대로 두세요) */
.mg-modal-panel{
  width:100%; max-width:28rem;
  margin-left:20px; margin-right:20px; /* 좌우 여백 강제 */
}

@media (min-width: 640px){
  /* 데스크톱도 살짝 여유를 원하면 이 줄을 지우지 말고 유지하세요.
     완전 중앙 정렬을 원하면 0으로 바꾸세요. */
  .mg-modal-panel{
    margin-left: 20px;
    margin-right: 20px;
  }
}

/* ===== 망고쪽지 · 신고 모달 공통 =====
   - 드로어(z-50/60) 위로 올라오도록 z-index를 높임
   - 검정 배경 + 블러, 카드 폭/여백/그림자 통일  */
#reportMsgModal {
  position: fixed;
  inset: 0;
  z-index: 140;              /* 드로어보다 충분히 큼 */
}

/* 배경(검정 + 블러) - ::before로 넣어야 기존 '오버레이 클릭=닫기' 로직이 깨지지 않음 */
#reportMsgModal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px) saturate(110%);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
}

/* 모달 카드(가운데) */
#reportMsgModal .report-dialog {
  position: relative;
  background: #fff;
  border-radius: 16px;
  width: min(92vw, 560px);   /* 좌우 여백 확보 */
  margin: 0 14px;            /* 추가 좌우 여백 */
  padding: 16px 16px 18px;
  box-shadow: 0 18px 48px rgba(2, 6, 23, .20);
  border: 1px solid rgba(17, 24, 39, .08);
}

/* 폼 컨트롤(기본 룩 정렬) */
#reportMsgModal .mg-field label {
  display: block;
  font-size: 12px;
  color: #6B7280;            /* gray-500 */
  margin-bottom: 6px;
}
#reportMsgModal .mg-input,
#reportMsgModal .mg-select,
#reportMsgModal .mg-textarea {
  width: 100%;
  border: 1px solid #E5E7EB; /* gray-200 */
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}
#reportMsgModal .mg-textarea {
  min-height: 96px;
  resize: vertical;
}
#reportMsgModal .mg-input:focus,
#reportMsgModal .mg-select:focus,
#reportMsgModal .mg-textarea:focus {
  border-color: #A78BFA;               /* purple-300 */
  box-shadow: 0 0 0 3px rgba(167,139,250,.25);
}

/* 버튼 줄 정렬 */
#reportMsgModal .actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

/* 배지 위치가 버튼 기준으로 잡히도록 안전장치 */
.mg-mail-onchip { position: relative; }

/* 혹시 Tailwind가 없는 환경에서도 동일하게 보이게 하는 폴백(선택) */
#msgBadge {
  /* Tailwind 없는 경우 대비용 – 이미 tailwind 클래스가 있으면 무시됨 */
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 6px;
  border-radius: 9999px;
  background: #ef4444; color: #fff;
  font-weight: 700; font-size: 11px; line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff; /* ring-2 ring-white */
}

/* 혹시 상위에서 relative 안 걸렸을 때를 대비한 안전장치 */
.topbar-btn { position: relative; }

/* Tailwind가 없는 페이지 폴백 (이미 Tailwind 쓰면 무시됨) */
#historyBadge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 6px;
  border-radius: 9999px;
  background: #ef4444; color: #fff;
  font-weight: 700; font-size: 11px; line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff; /* ring-2 ring-white */
}

:root{
  --msg-date-pad-y: 12px;  /* ↑ 여기 숫자로 두께 제어 (예: 8~16px) */
  --msg-date-font: 13px;
}
.msg-date-header{
  padding: var(--msg-date-pad-y) 12px;
  min-height: calc(var(--msg-date-pad-y) * 2 + 20px);
  font-size: var(--msg-date-font);
  line-height: 1.4;
  display: flex;
  align-items: center;
}

/* Quill 드롭다운이 카드 밖으로 넘어가도록 강제 */
.zine-card.mg-editor-card{ overflow: visible !important; }

/* 툴바 드롭다운이 다른 요소보다 위로 올라오도록 */
.mg-editor-card .ql-snow .ql-picker-options{ z-index: 1001 !important; }

/* (안전망) Quill 툴바 버튼 기본 클릭/포커스 유지 */
.ql-snow .ql-toolbar button{ background: transparent; border: 0; cursor: pointer; }
.ql-snow .ql-toolbar button:disabled{ pointer-events: none; opacity: .5; }