/**
 * DXCMS DEFAULT THEME — style.css
 * 테마 레이아웃 통합 스타일시트
 * (themes/default/layout/style.css)
 *
 * ※ 테마 변수(:root, body.dark)는 main.php <style> 인라인에 유지됩니다.
 *   (--p 값이 PHP로 동적 생성되기 때문)
 */

/* ─── 레이아웃 · 기본 스타일 ───────────────────────────────────── */
/* ── 기본 리셋 ─────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font);
  background-color: var(--bg-body);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s, color .3s;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { text-decoration: none !important; color: inherit; }
img { max-width:100%; height:auto; display:block; }
button, input, textarea, select { font-family: inherit; }
::selection { background:#dbeafe; color:#1d4ed8; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

/* ── 카드/헤더 배경 전환 ─────────────────── */
.dx-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  transition: background-color .3s, border-color .3s;
}
header, .dx-topbar {
  background-color: var(--bg-header) !important;
  border-color: var(--border) !important;
  transition: background-color .3s, border-color .3s;
}

/* ── 게시판 행 hover ─────────────────────── */
.board-row {
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.board-row:hover { background-color: var(--hover-row) !important; }

/* ── 상단 유틸바 ─────────────────────────── */
.dx-topbar {
  border-bottom: 1px solid var(--border);
}

/* ── 헤더 sticky ─────────────────────────── */
.dx-header {
  position: sticky; top:0; z-index:100;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: background-color .3s;
}

/* ── 네비 활성 ───────────────────────────── */
.dx-nav-active {
  color: var(--p) !important;
  border-bottom: 3px solid var(--p);
}

/* ── 드롭다운 ────────────────────────────── */
.dx-nav-item { position:relative; }
.dx-dropdown {
  display:none; position:absolute;
  top:calc(100% + 6px); left:0;
  min-width:160px; z-index:200;
}
.dx-nav-item:hover .dx-dropdown { display:block; }
.dx-arrow { font-size:.55rem; opacity:.5; transition:transform .2s; margin-left:2px; }
.dx-nav-item:hover .dx-arrow { transform:rotate(180deg); }

/* ── 모바일 메뉴 ─────────────────────────── */
.dx-mob-nav { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; }
.dx-mob-nav.open { display:block; }
.dx-mob-panel {
  background-color: var(--bg-card);
  position:absolute; top:0; right:0;
  width:260px; height:100%; overflow-y:auto;
  animation:dxSlide .22s ease;
}
@keyframes dxSlide { from{transform:translateX(100%)} to{transform:translateX(0)} }

/* ── 다크모드 입력 ───────────────────────── */
body.dark input[type="text"],
body.dark input[type="search"] {
  background:#334155; color:var(--text-main); border-color:var(--border);
}

/* ── 알림 시스템 ─────────────────────────── */
#dx-notif-toast-wrap {
  position:fixed; bottom:20px; right:20px;
  z-index:99998; display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.dx-notif-toast { opacity:0; transform:translateX(20px); transition:all .3s; pointer-events:auto; }
.dx-notif-toast.show { opacity:1; transform:translateX(0); }
@keyframes dx-bell-shake {
  0%,100%{transform:rotate(0)} 20%{transform:rotate(12deg)}
  40%{transform:rotate(-10deg)} 60%{transform:rotate(8deg)} 80%{transform:rotate(-5deg)}
}
.dx-bell-shake i { animation:dx-bell-shake .6s ease; }

/* ── 에디터 콘텐츠 ───────────────────────── */
.dx-content img { max-width:100%; border-radius:6px; }
.dx-content a { color:#2563eb; text-decoration:underline; }
.dx-content pre { background:#1e293b; color:#e2e8f0; padding:16px; border-radius:8px; overflow-x:auto; font-family:monospace; font-size:.875rem; }
.dx-content code:not(pre code) { background:#f1f5f9; padding:1px 5px; border-radius:4px; font-size:.85em; font-family:monospace; }
.dx-content blockquote { border-left:3px solid #93c5fd; margin:12px 0; padding:.5em 1em; color:#475569; background:#f8fafc; border-radius:0 6px 6px 0; }
body.dark .dx-content code:not(pre code) { background:#334155; color:#e2e8f0; }
body.dark .dx-content blockquote { background:#1e293b; color:#94a3b8; }

/* ── 플래시 ──────────────────────────────── */
.dx-flash-success { background:#f0fdf4; border-color:#bbf7d0; color:#15803d; }
.dx-flash-error   { background:#fef2f2; border-color:#fecaca; color:#dc2626; }
.dx-flash-info    { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }

/* ── 로고 ────────────────────────────────── */
.dx-logo {
  font-family: var(--font-logo);
  font-weight: 900;
  color: var(--p);
  letter-spacing: -.03em;
  font-size: 1.45rem;
  line-height: 1;
}
@media(min-width:768px) { .dx-logo { font-size:1.7rem; } }

/* ── 반응형 ──────────────────────────────── */
@media(max-width:1023px) {
  #dx-sidebar { display:none !important; }
  /* 모바일: 2컬럼 → 1컬럼 (사이드바 숨김 후 본문이 전체 너비 차지) */
  #dx-two-col { display:block !important; }
  #dx-two-col > div:first-child { width:100% !important; }
}
@media(max-width:767px) {
  .dx-topbar { display:none !important; }
}

/* ── 푸터 반응형 ─────── */
@media(max-width:900px){.dx-footer-grid{grid-template-columns:1fr 1fr!important}}
@media(max-width:480px){.dx-footer-grid{grid-template-columns:1fr!important;gap:24px!important}}


/* pre 태그를 버튼 배치의 기준점으로 설정 */
.dx-post-body pre {
	position: relative;
	padding-top: 40px !important; /* 버튼이 들어갈 공간 확보 */
}

.dx-copy-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 5px 10px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 4px;
	z-index: 10;
	backdrop-filter: blur(4px);
}

.dx-copy-btn:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: #3b82f6;
}

.dx-copy-btn.copied {
	background: #059669; /* 성공 시 초록색 */
	border-color: #059669;
}


/* ─── dxp 채팅 스크롤바 ─────────────────────────────────────── */
#dxp-chat-msgs::-webkit-scrollbar{width:3px}
#dxp-chat-msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px}
#dxp-modal::-webkit-scrollbar{width:0}
@keyframes dxpMsgIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}


/* ─── dxp 메모 전송 모달 ────────────────────────────────────── */
#dxp-memo-modal .dxp-mm-card {
  background:linear-gradient(160deg,#1a1f35 0%,#0f172a 100%);
  border:1px solid rgba(99,102,241,.25);
  border-radius:20px;
  padding:0;
  max-width:440px;
  width:100%;
  box-shadow:0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  overflow:hidden;
  animation:dxpMmIn .25s cubic-bezier(.32,1.1,.53,1) both;
}
@keyframes dxpMmIn{from{opacity:0;transform:scale(.94) translateY(12px)}to{opacity:1;transform:none}}
#dxp-memo-modal .dxp-mm-header {
  background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(139,92,246,.12));
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:18px 22px 16px;
  display:flex;align-items:center;justify-content:space-between;
}
#dxp-memo-modal textarea {
  width:100%;background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.08);border-radius:12px;
  padding:13px 15px;color:#e2e8f0;font-size:.9rem;resize:vertical;
  outline:none;font-family:inherit;line-height:1.7;box-sizing:border-box;
  min-height:120px;transition:border-color .15s;
}
#dxp-memo-modal textarea:focus{border-color:rgba(99,102,241,.6);}
#dxp-memo-modal textarea::placeholder{color:rgba(255,255,255,.25);}


/* ─── 모바일 메뉴 버튼 미디어쿼리 ─────────────────────────────────── */
@media(max-width:767px){#dxMobBtn{display:flex!important}}
        @media(min-width:768px){#dxMobBtn{display:none!important}}


/* ─── 게시판 카테고리 네비 ─────────────────────────────────────── */
.dx-cat-nav{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
      .dx-cat-ul{list-style:none;padding:6px 0;margin:0}
      .dx-cat-all{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;font-size:.82rem;color:var(--text-main);text-decoration:none;border-left:3px solid transparent;transition:background .15s,color .15s,border-color .15s}
      .dx-cat-all:hover,.dx-cat-top:hover{background:rgba(26,115,232,.06);color:var(--p)}
      .dx-cat-all.dx-cat-active{color:var(--p);font-weight:700;background:rgba(26,115,232,.07);border-left-color:var(--p)}
      .dx-cat-top{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;font-size:.82rem;font-weight:600;color:var(--text-main);background:transparent;border-left:3px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s;width:100%;border-top:none;border-right:none;border-bottom:none;font-family:inherit;text-align:left}
      .dx-cat-top.dx-cat-active{color:var(--p);font-weight:700;background:rgba(26,115,232,.07);border-left-color:var(--p)}
      .dx-cat-top.dx-cat-open{background:var(--bg-card)}
      .dx-cat-top-left{display:flex;align-items:center;gap:7px}
      .dx-cat-arrow{font-size:.6rem;color:var(--text-muted);transition:transform .22s;flex-shrink:0}
      .dx-cat-top.dx-cat-open .dx-cat-arrow{transform:rotate(180deg)}
      .dx-cat-children{display:none;overflow:hidden;background:var(--bg-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:2px}
      .dx-cat-children.dx-cat-ch-open{display:block}
      .dx-cat-child-a{display:flex;align-items:center;gap:6px;padding:7px 16px 7px 28px;font-size:.78rem;font-weight:400;color:var(--text-main);text-decoration:none;border-left:3px solid transparent;transition:background .13s,color .13s,border-color .13s}
      .dx-cat-child-a:hover{background:rgba(26,115,232,.06);color:var(--p)}
      .dx-cat-child-a.dx-cat-active{color:var(--p);font-weight:700;background:rgba(26,115,232,.07);border-left-color:var(--p)}


/* ─── 커뮤니티 위젯 반응형 ─────────────────────────────────────── */
/* 위젯 반응형 */
@media(max-width:900px){
  #dx-community-widget > div:nth-child(1){grid-template-columns:repeat(3,1fr)!important}
  #dx-community-widget > div:nth-child(2){grid-template-columns:1fr!important}
}
@media(max-width:480px){
  #dx-community-widget > div:nth-child(1){grid-template-columns:repeat(2,1fr)!important}
}


/* ─── FAB (플로팅 액션 버튼) ─────────────────────────────────── */
#dx-fab-wrap {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  pointer-events: none;
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity .35s cubic-bezier(.4,0,.2,1),
              transform .35s cubic-bezier(.4,0,.2,1);
}
#dx-fab-wrap.dx-fab-show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* 공통 버튼 */
.dx-fab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 100px;
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: filter .15s, transform .15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}
.dx-fab-btn:active { transform: scale(.94); }
/* 목록 버튼 */
#dx-fab-list {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226,232,240,.9) !important;
  color: var(--text-muted, #64748b);
  display: none;
}
body.dark #dx-fab-list {
  background: rgba(15,23,42,.85);
  border-color: rgba(51,65,85,.7) !important;
  color: #94a3b8;
}
/* 맨위로 버튼 */
#dx-fab-top {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226,232,240,.9) !important;
  color: var(--text-main, #1e293b);
  flex-direction: column;
  padding: 8px 14px;
  gap: 2px;
}
body.dark #dx-fab-top {
  background: rgba(15,23,42,.85);
  border-color: rgba(51,65,85,.7) !important;
  color: #e2e8f0;
}
#dx-fab-top:hover { filter: brightness(.96); }
/* SVG 진행률 */
#dx-fab-svg-wrap { position:relative; width:28px; height:28px; flex-shrink:0; }
#dx-fab-svg { width:28px; height:28px; transform:rotate(-90deg); }
#dx-fab-track { fill:none; stroke:rgba(203,213,225,.6); stroke-width:2.5; }
body.dark #dx-fab-track { stroke:rgba(71,85,105,.6); }
#dx-fab-ring { fill:none; stroke:url(#dx-fab-grad); stroke-width:2.5; stroke-linecap:round; transition:stroke-dashoffset .12s linear; }
#dx-fab-arrow { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--text-main,#1e293b); }
body.dark #dx-fab-arrow { color:#e2e8f0; }
#dx-fab-pct { font-size:.65rem; font-weight:600; color:var(--text-muted,#94a3b8); font-variant-numeric:tabular-nums; line-height:1; }
/* 글쓰기 버튼 */
#dx-fab-write {
  background: var(--p, #1a73e8);
  color: #fff;
  box-shadow: 0 2px 12px rgba(26,115,232,.35);
  display: none;
}
#dx-fab-write:hover { filter: brightness(1.1); }
@media (max-width: 480px) {
  #dx-fab-wrap { bottom: 16px; gap: 6px; }
  .dx-fab-btn { padding: 8px 13px; font-size: .75rem; }
  #dx-fab-top { padding: 7px 10px; }
}


/* ─── 기존 style.css 통합 (board/dark 보완) ─────────────────────── */
/* 다크모드 게시판 테이블 헤더 */
body.dark .dx-thead {
  background-color: #1a2744 !important;
}
body.dark .dx-thead div {
  color: #64748b !important;
}

/* HOT 배지 */
.dx-hot-badge {
  font-size: 9px;
  font-weight: 900;
  color: #f97316;
  background: rgba(249,115,22,.1);
  padding: 2px 5px;
  border-radius: 4px;
  font-style: italic;
  flex-shrink: 0;
}

/* 다크모드 사이드바 */
body.dark .dx-sidebar-card {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

/* 인기 급상승 순위 */
.dx-rank-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1;
  min-width: 20px;
}

/* 로그인 소셜 버튼 */
.dx-social-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  transition: filter .15s;
}
.dx-social-btn:hover { filter: brightness(1.1); }

/* 반응형 그리드 */
@media (max-width: 1023px) {
  .dx-layout-sidebar { display: none !important; }
}
@media (max-width: 640px) {
  .dx-pc-only { display: none !important; }
  .dx-mo-only { display: flex !important; }
}


/* ─── home.php — 홈페이지 (히어로·통계·카운트다운·모달) ────────────── */
*,*::before,*::after{box-sizing:border-box}
/* ── 히어로 ─────────────────────────────────────────── */
.dx-hero{background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 55%,#1a73e8 100%);border-radius:18px;padding:60px 48px;color:#fff;margin-bottom:28px;position:relative;overflow:hidden}
.dx-hero::before{content:'';position:absolute;top:-60px;right:-60px;width:280px;height:280px;background:rgba(255,255,255,.05);border-radius:50%}
.dx-hero::after{content:'';position:absolute;bottom:-80px;left:40%;width:200px;height:200px;background:rgba(255,255,255,.04);border-radius:50%}
.dx-hero-brand{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:10px;position:relative}
.dx-hero h1{margin:0 0 8px;font-family:'Montserrat',sans-serif;font-size:2.4rem;font-weight:900;letter-spacing:-.03em;line-height:1.15;position:relative}
.dx-hero-sub{font-size:.95rem;opacity:.8;margin-bottom:28px;position:relative;line-height:1.65}
.dx-hero-features{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;position:relative}
.dx-hero-feat{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:6px 14px;font-size:.78rem;font-weight:600}
.dx-hero-feat i{font-size:.72rem;opacity:.85}
/* 히어로 하단 행 */
.dx-hero-bottom{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:end;position:relative}
.dx-hero-btns{display:flex;gap:10px;flex-wrap:wrap}
.dx-hero-btn-w{display:inline-flex;align-items:center;gap:7px;padding:11px 24px;border-radius:10px;font-size:.88rem;font-weight:700;background:#fff;color:#1e3a8a;text-decoration:none;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 16px rgba(0,0,0,.2);cursor:pointer;border:none}
.dx-hero-btn-w:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.dx-hero-btn-o{display:inline-flex;align-items:center;gap:7px;padding:11px 24px;border-radius:10px;font-size:.88rem;font-weight:700;background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.35);color:#fff;text-decoration:none;transition:background .15s}
.dx-hero-btn-o:hover{background:rgba(255,255,255,.25)}
/* 진행률바 */
.dx-progress-box{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:14px 18px;min-width:200px}
.dx-progress-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:8px}
.dx-progress-bar{height:6px;background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden;margin-bottom:6px}
.dx-progress-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#34d399,#10b981);transition:width .8s ease}
.dx-progress-pct{font-size:11px;font-weight:700;color:rgba(255,255,255,.75)}
/* 카운트다운 */
.dx-countdown-box{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:14px 18px;min-width:180px}
.dx-countdown-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:8px}
.dx-countdown-nums{display:flex;gap:8px;align-items:center}
.dx-cd-unit{text-align:center}
.dx-cd-num{font-family:'Montserrat',sans-serif;font-size:1.3rem;font-weight:900;line-height:1;display:block}
.dx-cd-lbl{font-size:9px;opacity:.5;letter-spacing:.05em}
.dx-cd-sep{font-size:1.2rem;font-weight:700;opacity:.4;margin-bottom:4px}
/* DEMO 모달 */
.dx-demo-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.dx-demo-modal.active{display:flex}
.dx-demo-card{background:#fff;border-radius:20px;padding:40px 36px;max-width:420px;width:90%;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.dx-demo-close{position:absolute;top:16px;right:18px;background:none;border:none;font-size:20px;cursor:pointer;color:#94a3b8;line-height:1}
.dx-demo-close:hover{color:#374151}
/* 뱃지바 */
.dx-badge-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.dx-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:99px;border:1px solid;font-size:.78rem;font-weight:600}
/* 통계 */
.dx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.dx-stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:20px;text-align:center;transition:border-color .15s}
.dx-stat-card:hover{border-color:var(--p)}
.dx-stat-icon{font-size:1.4rem;color:var(--p);margin-bottom:8px}
.dx-stat-num{font-family:'Montserrat',sans-serif;font-size:1.6rem;font-weight:900;color:var(--text-main);line-height:1;margin-bottom:4px}
.dx-stat-label{font-size:.75rem;color:var(--text-muted);font-weight:600}
.bl-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.dx-hero-bottom{grid-template-columns:1fr!important}.dx-hero{padding:40px 24px}.dx-hero h1{font-size:1.7rem}.bl-grid-2{grid-template-columns:1fr}}
@media(max-width:640px){.dx-stats{grid-template-columns:1fr 1fr}.dx-hero-features span:nth-child(n+4){display:none}}


/* ─── mypage.php — 프로필 헤더 카드 ──────────────────────────── */
/* ── 공통 ── */
  .mp-profile-card{background:#fff;border-radius:18px;box-shadow:0 1px 4px rgba(0,0,0,.06);border:1px solid #f1f5f9;padding:20px 20px 16px;margin-bottom:16px}
  .mp-avatar{width:62px;height:62px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;color:#fff;background:linear-gradient(135deg,#3b82f6,#6366f1)}
  .mp-profile-img{width:62px;height:62px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid #e2e8f0}
  .mp-card-top{display:flex;align-items:center;gap:14px}
  .mp-info{flex:1;min-width:0}
  .mp-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
  .mp-name{font-size:1.05rem;font-weight:800;color:#0f172a}
  .mp-lv-badge{flex-shrink:0;padding:2px 10px;background:#dbeafe;color:#1d4ed8;font-size:.72rem;font-weight:700;border-radius:99px}
  .mp-loginid{font-size:.8rem;color:#94a3b8;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mp-exp-row{display:flex;align-items:center;gap:8px}
  .mp-exp-bar{flex:1;height:6px;background:#f1f5f9;border-radius:99px;overflow:hidden;max-width:160px}
  .mp-exp-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#3b82f6,#6366f1)}
  .mp-exp-txt{font-size:.72rem;color:#94a3b8;white-space:nowrap;flex-shrink:0}
  .mp-stat-val{font-size:1.1rem;font-weight:800;line-height:1.2}
  .mp-stat-lbl{font-size:.72rem;color:#94a3b8;margin-top:2px}

  /* ── 모바일 기본: 스탯 하단 가로 3분할 ── */
  .mp-stats-mo{display:flex;margin-top:14px;border-top:1px solid #f1f5f9;padding-top:14px}
  .mp-stats-mo .mp-stat-item{flex:1;text-align:center}
  .mp-stats-mo .mp-stat-item+.mp-stat-item{border-left:1px solid #f1f5f9}

  /* ── PC: 스탯 우측 가로 배치 ── */
  .mp-stats-pc{display:none;flex-direction:row;align-items:center;gap:28px;flex-shrink:0;margin-left:auto;padding-left:24px;border-left:1px solid #f1f5f9}
  .mp-stats-pc .mp-stat-item{text-align:center;min-width:52px}

  @media(min-width:600px){
    .mp-profile-card{padding:20px 24px}
    .mp-avatar{width:72px;height:72px;font-size:1.8rem}
    .mp-profile-img{width:72px;height:72px}
    .mp-name{font-size:1.15rem}
    .mp-stat-val{font-size:1.25rem}
    .mp-stats-mo{display:none!important}
    .mp-stats-pc{display:flex!important}
  }

/* ─── mypage.php — 공통 테이블/카드 스타일 ──────────────────────── */
/* ── 마이페이지 공통 테이블/카드 스타일 (v6.1.1) ── */
  .mp-hd { padding:20px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px; }
  .mp-hd-title { font-size:1rem;font-weight:800;color:var(--text-main); }
  .mp-hd-sub   { font-size:.78rem;color:var(--text-muted);margin-top:2px; }
  .mp-stat-card{ display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:12px;white-space:nowrap; }
  /* 테이블 */
  .mp-tbl { width:100%;border-collapse:collapse;table-layout:fixed; }
  .mp-tbl thead tr { background:#f8fafc; }
  .mp-tbl th {
    padding:12px 0;font-size:.72rem;font-weight:800;
    color:#64748b;text-transform:uppercase;letter-spacing:.06em;
    border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;
    text-align:left;white-space:nowrap;
  }
  .mp-tbl th.r,
  .mp-tbl td.r { text-align:right; }
  .mp-tbl th.c,
  .mp-tbl td.c { text-align:center; }
  .mp-tbl td {
    padding:12px 0;font-size:.875rem;
    border-bottom:1px solid var(--border);vertical-align:middle;
    text-align:left;
  }
  .mp-tbl tbody tr:last-child td { border-bottom:none; }
  .mp-tbl tbody tr:hover { background:#f8fafc; }
  /* 날짜 셀 */
  .mp-tbl td.td-date { color:#94a3b8;font-size:.8rem;white-space:nowrap; }
  /* 변동/획득 금액 */
  .mp-tbl td.td-plus  { font-weight:800;font-size:.9rem;color:#16a34a; }
  .mp-tbl td.td-minus { font-weight:800;font-size:.9rem;color:#ef4444; }
  .mp-tbl td.td-exp-plus  { font-weight:800;font-size:.9rem;color:#7c3aed; }
  .mp-tbl td.td-exp-minus { font-weight:800;font-size:.9rem;color:#ef4444; }
  /* 잔액/누적 */
  .mp-tbl td.td-bal { color:#64748b;font-size:.875rem; }
  /* 메모 */
  .mp-tbl td.td-note { color:#94a3b8;font-size:.82rem; }
  /* 유형 배지 */
  .mp-type-badge {
    display:inline-block;padding:3px 10px;border-radius:20px;
    font-size:.72rem;font-weight:700;
    background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;
  }
  /* 빈 상태 */
  .mp-empty { padding:60px 20px;text-align:center;color:var(--text-muted); }
  .mp-empty i { font-size:2rem;display:block;margin-bottom:12px;opacity:.2; }
  /* 탭 버튼 반응형 */
  .mp-tab-btn { min-height:38px; }
  @media(max-width:480px){
    .mp-tab-btn { padding:7px 10px!important; font-size:.78rem!important; gap:4px!important; }
    .mp-tab-btn span:first-child { font-size:.82rem; }
  }

/* ─── mypage.php — 프로필 편집 폼 ───────────────────────────── */
/* ── 섹션 ── */
  .pf-section {
    padding:24px 28px 24px;
    border-bottom:1px solid #f1f5f9;
  }
  .pf-section:last-of-type { border-bottom:none; }
  /* 섹션 제목 */
  .pf-section-title {
    font-size:.72rem; font-weight:800; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:.08em;
    margin-bottom:16px;
    display:flex; align-items:center; gap:8px;
  }
  .pf-section-title::after { content:''; flex:1; height:1px; background:#f1f5f9; margin-left:4px; }
  /* ── 그리드 ── */
  .pf-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
  @media(max-width:600px){ .pf-row { grid-template-columns:1fr; } }
  .pf-full { grid-column:1/-1; }
  /* ── 레이블 / 인풋 ── */
  .pf-label { display:block; font-size:.75rem; font-weight:700; color:var(--text-muted); margin-bottom:5px; }
  .pf-input {
    width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:9px;
    font-size:.85rem; color:var(--text-main); background:var(--bg-body);
    outline:none; font-family:inherit; box-sizing:border-box; transition:border-color .15s;
    min-width:0;
  }
  .pf-input:focus { border-color:var(--p); background:var(--bg-card); }
  .pf-input::placeholder { color:var(--text-muted); opacity:.55; font-size:.82rem; }
  .pf-textarea { resize:vertical; min-height:90px; }
  /* ── 버튼 ── */
  .pf-btn { display:inline-flex; align-items:center; gap:7px; padding:10px 22px;
            border:none; border-radius:10px; font-size:.875rem; font-weight:700;
            cursor:pointer; transition:filter .15s; }
  .pf-btn-primary { background:var(--p); color:#fff; box-shadow:0 2px 8px rgba(26,115,232,.22); }
  .pf-btn-primary:hover { filter:brightness(1.08); }
  .pf-btn-danger  { background:#ef4444; color:#fff; }
  .pf-btn-danger:hover  { filter:brightness(1.08); }
  .pf-btn-ghost   { background:transparent; color:var(--text-muted); border:1.5px solid var(--border); }
  /* ── SNS 행: 모바일에서 아이콘+input 세로배치 ── */
  .pf-sns-row {
    display:flex; align-items:center; gap:10px; margin-bottom:10px;
  }
  .pf-sns-icon {
    width:34px; height:34px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; font-size:.95rem; color:#fff;
  }
  /* 모바일: SNS 그리드 1컬럼으로 */
  @media(max-width:600px){
    .pf-sns-grid { grid-template-columns:1fr !important; }
    .pf-section { padding:20px 16px 20px; }
  }
  /* 프로필 이미지 */
  .pf-img-wrap { position:relative; width:96px; height:96px; flex-shrink:0; }
  .pf-img-circle { width:96px; height:96px; border-radius:50%; object-fit:cover; border:3px solid var(--border); background:var(--bg-body); display:block; }
  .pf-img-default { width:96px; height:96px; border-radius:50%; background:linear-gradient(135deg,var(--p),#6366f1); display:flex; align-items:center; justify-content:center; font-size:2.2rem; font-weight:800; color:#fff; border:3px solid var(--border); }
  .pf-img-edit-btn { position:absolute; bottom:2px; right:2px; width:26px; height:26px; border-radius:50%; background:var(--p); color:#fff; border:2px solid var(--bg-card); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.65rem; }

/* ─── mypage.php — 친구 목록 ──────────────────────────────── */
.fr-row{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--border);transition:background .12s;}
  .fr-row:last-child{border-bottom:none;}
  .fr-row:hover{background:var(--hover-row);}
  .fr-ava{width:40px;height:40px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:800;color:#fff;flex-shrink:0;}
  .fr-sub-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg-body);}
  .fr-sub-tab{flex:1;padding:11px 0;text-align:center;font-size:.82rem;font-weight:700;color:var(--text-muted);border-bottom:2px solid transparent;cursor:pointer;text-decoration:none;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px;}
  .fr-sub-tab.active{color:var(--p);border-bottom-color:var(--p);}
  .fr-sub-tab em{font-style:normal;font-size:.72rem;font-weight:800;padding:1px 6px;border-radius:10px;background:var(--border);color:var(--text-muted);}
  .fr-sub-tab.active em{background:rgba(99,102,241,.12);color:var(--p);}
  .fr-btn{padding:5px 12px;border-radius:8px;font-size:.75rem;font-weight:700;cursor:pointer;border:1.5px solid var(--border);background:transparent;color:var(--text-muted);transition:all .15s;}
  .fr-btn:hover{border-color:#ef4444;color:#ef4444;}
  .fr-mutual-badge{display:inline-block;padding:1px 7px;border-radius:5px;background:#eff6ff;color:#2563eb;font-size:.7rem;font-weight:800;vertical-align:middle;}

/* ─── mypage.php — 메모(쪽지) 탭 ───────────────────────────── */
/* ── 메모 탭 전체 스타일 ── */
  .mx-tab-wrap { display:flex;align-items:center;gap:6px;padding:16px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap; }
  .mx-tab-grp  { display:flex;gap:4px;background:var(--bg-body);border:1px solid var(--border);border-radius:10px;padding:3px; }
  .mx-tab      { padding:6px 14px;border-radius:7px;border:none;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .15s;background:transparent;color:var(--text-muted); }
  .mx-tab.on   { background:var(--bg-card);color:var(--p);box-shadow:0 1px 4px rgba(0,0,0,.08); }
  .mx-tab-divider { width:1px;height:20px;background:var(--border);margin:0 4px;align-self:center; }
  .mx-write-btn { display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border:none;border-radius:9px;background:var(--p);color:#fff;font-size:.8rem;font-weight:700;cursor:pointer;transition:filter .15s;margin-left:auto; }
  .mx-write-btn:hover { filter:brightness(1.1); }
  .mx-del-all-btn { display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text-muted);font-size:.78rem;font-weight:600;cursor:pointer;transition:all .15s; }
  .mx-del-all-btn:hover { border-color:#ef4444;color:#ef4444; }
  /* ── 메모 행 ── */
  .mx-row { display:flex;align-items:flex-start;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s;position:relative; }
  .mx-row:last-child { border-bottom:none; }
  .mx-row:hover { background:var(--hover-row); }
  .mx-row.friend-memo { border-left:3px solid #a78bfa; }
  .mx-row.friend-memo .mx-badge-friend { display:inline-flex; }
  .mx-ava  { width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:800;color:#fff;border:2px solid var(--border); }
  .mx-ava.friend-ava { border-color:#a78bfa; }
  .mx-title-unread { font-weight:700;color:var(--text-main); }
  .mx-title-read   { color:var(--text-muted); }
  .mx-badge-new    { display:inline-block;padding:1px 6px;border-radius:5px;background:var(--p);color:#fff;font-size:9px;font-weight:800;vertical-align:middle; }
  .mx-badge-friend { display:none;padding:1px 7px;border-radius:5px;background:#ede9fe;color:#7c3aed;font-size:9px;font-weight:800;vertical-align:middle; }
  .mx-badge-read   { font-size:.7rem;color:var(--text-muted); }
  /* ── 펼치기 영역 ── */
  .mx-expand { display:none;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border); }
  .mx-expand-text { font-size:.875rem;color:var(--text-main);line-height:1.75;white-space:pre-wrap;word-break:break-all; }
  .mx-action-btn  { display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:8px;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .15s;border:none; }
  .mx-reply-btn   { background:var(--p);color:#fff; }
  .mx-reply-btn:hover { filter:brightness(1.1); }
  .mx-delete-btn  { background:transparent;border:1.5px solid var(--border)!important;color:var(--text-muted); }
  .mx-delete-btn:hover { border-color:#ef4444!important;color:#ef4444; }
  /* ── 보내기 폼 ── */
  .mx-form-wrap { padding:24px 20px; }
  .mx-form-label { display:block;font-size:.78rem;font-weight:700;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em; }
  .mx-form-input { width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:10px;font-size:.875rem;outline:none;background:var(--bg-body);color:var(--text-main);font-family:inherit;box-sizing:border-box;transition:border-color .15s; }
  .mx-form-input:focus { border-color:var(--p); }
  .mx-form-textarea { resize:vertical;min-height:120px; }
  /* ── 섹션 구분 헤더 ── */
  .mx-section-hd { padding:8px 20px;background:var(--bg-body);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px; }
  .mx-section-hd span { font-size:.72rem;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em; }