/* 마이페이지(회원정보 보기) — 다크·퍼플. 모든 규칙은 .rtm / .rtm-tabs 안으로 한정한다.
   색은 사이트 토큰(--rt-*)을 쓰고, 퍼플은 이 파일 안에서만 지역 토큰으로 둔다. */
.rtm, .rtm-tabs, .rtm-list {
	--m-brand: #956BFF;
	--m-brand-rgb: 149, 107, 255;
	--m-brand-soft: #B49AFF;
	--m-card: var(--rt-surface-1, #0B1826);
	--m-card-2: var(--rt-surface-2, #102337);
	--m-line: var(--rt-border, #1c2a3c);
	--m-text: var(--rt-text, #F7F7FA);
	--m-text-2: var(--rt-text-2, #AAB1C7);
	--m-ok: #2DD4A0;
	--m-bad: #EF476F;
}
html body:has(.rtm) .gpe_contents_box { max-width: none; }

/* ── 상단 회원 메뉴 탭 ───────────────────────────── */
:is(.xm, .xc) .nav-tabs.rtm-tabs {
	display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; padding: 0;
	list-style: none; border: 0; border-bottom: 1px solid var(--m-line); background: transparent;
}
:is(.xm, .xc) .nav-tabs.rtm-tabs > li { float: none; margin: 0 0 -1px; }
:is(.xm, .xc) .nav-tabs.rtm-tabs > li > a {
	display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px;
	border: 0; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0;
	background: transparent; color: var(--m-text-2); font-size: 14.5px; font-weight: 600;
	text-decoration: none; transition: color .15s, background-color .15s, border-color .15s;
}
:is(.xm, .xc) .nav-tabs.rtm-tabs > li > a:hover,
:is(.xm, .xc) .nav-tabs.rtm-tabs > li > a:focus-visible { color: var(--m-brand-soft); background: rgba(var(--m-brand-rgb), .10); outline: none; }
:is(.xm, .xc) .nav-tabs.rtm-tabs > li.active > a,
:is(.xm, .xc) .nav-tabs.rtm-tabs > li.active > a:hover {
	color: var(--m-text); background: linear-gradient(180deg, rgba(var(--m-brand-rgb), .28), rgba(var(--m-brand-rgb), .10));
	border-bottom-color: var(--m-brand);
}
.rtm-ico, .rtm-chev {
	width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor;
	stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ── 본문 ───────────────────────────────────────── */
.rtm { color: var(--m-text); font-size: 14px; line-height: 1.5; padding: 4px 0 40px; }
.rtm *, .rtm *::before, .rtm *::after { box-sizing: border-box; }
.rtm h1, .rtm h2, .rtm p, .rtm dl, .rtm dd { margin: 0; padding: 0; border: 0; }
.rtm-head { margin-bottom: 22px; position: relative; }
.rtm-title {
	display: flex; align-items: center; gap: 12px; font-size: 32px; line-height: 1.2; font-weight: 800; color: var(--m-text);
}
.rtm-title::before { content: ""; width: 6px; height: 34px; border-radius: 3px; background: var(--m-brand); }
.rtm-sub { margin-top: 8px; color: var(--m-text-2); font-size: 15px; }
.rtm-head::after {
	content: ""; position: absolute; right: 0; top: -20px; width: 380px; height: 150px; pointer-events: none;
	background: radial-gradient(ellipse at 80% 40%, rgba(var(--m-brand-rgb), .28), transparent 70%);
}

.rtm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.rtm-side { display: grid; gap: 20px; min-width: 0; }
.rtm-card {
	min-width: 0; padding: 26px 28px; border: 1px solid rgba(var(--m-brand-rgb), .35); border-radius: 14px;
	background: linear-gradient(180deg, var(--m-card), var(--m-card-2) 220%);
}
.rtm-card-head {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 18px;
}
.rtm-profile .rtm-card-head { padding-bottom: 18px; border-bottom: 1px solid var(--m-line); }
.rtm-card-head h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; color: var(--m-text); }
.rtm-card-head h2 .rtm-ico { color: var(--m-brand-soft); width: 24px; height: 24px; }
.rtm-hint { color: var(--m-text-2); font-size: 13px; }
.rtm-badge {
	display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; border-radius: 999px;
	border: 1px solid rgba(var(--m-brand-rgb), .6); background: rgba(var(--m-brand-rgb), .16); color: var(--m-brand-soft); font-weight: 700;
}
.rtm-badge .rtm-ico { width: 20px; height: 20px; fill: currentColor; stroke: none; }

.rtm-who { display: flex; align-items: center; gap: 24px; padding: 8px 0 14px; }
.rtm-avatar {
	display: grid; place-items: center; width: 152px; height: 152px; flex: none; overflow: hidden; border-radius: 50%;
	border: 2px solid rgba(var(--m-brand-rgb), .7); background: rgba(5, 12, 24, .7); color: var(--m-brand-soft);
	box-shadow: 0 0 28px rgba(var(--m-brand-rgb), .25);
}
.rtm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rtm-avatar .rtm-ico { width: 72px; height: 72px; stroke-width: 1.4; }
.rtm-avatar .rtm-ico.is-person { width: 78%; height: 78%; fill: rgba(var(--m-brand-rgb), .65); stroke: none; }
.xm .rtm-pi { display: flex; flex: none; flex-direction: column; align-items: center; gap: 8px; margin: 0; }
.xm .rtm-avatar-edit { position: relative; display: grid; overflow: visible; margin: 0; cursor: pointer; }
.rtm-avatar-edit > img { border-radius: 50%; }
.rtm-pi-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.rtm-pi-act { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; }
.rtm-pi-act .rtm-pi-del { border-color: rgba(255, 255, 255, .18); background: transparent; color: var(--m-text-2); }
.rtm-pi-act .rtm-pi-del:hover { border-color: rgba(232, 82, 122, .6); color: #ff9db5; }
.rtm-pi-act button { min-height: 32px; padding: 0 12px; white-space: nowrap; border-radius: 999px; border: 1px solid rgba(var(--m-brand-rgb), .6); background: rgba(var(--m-brand-rgb), .16); color: var(--m-brand-soft); font-size: 13px; font-weight: 700; cursor: pointer; }
.rtm-pi-act .rtm-pi-pick { background: linear-gradient(180deg, #A57FFF, #8A5CF5); border-color: transparent; color: #101322; }
.rtm-pi-msg { margin: 0; max-width: 152px; color: #ff9db5; font-size: 12px; text-align: center; }
.rtm-who-txt { min-width: 0; }
.rtm-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rtm-name { font-size: 28px; font-weight: 800; overflow-wrap: anywhere; }
.rtm-pill {
	display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 700;
	border: 1px solid rgba(var(--m-brand-rgb), .6); background: rgba(var(--m-brand-rgb), .16); color: var(--m-brand-soft);
}
.rtm-id { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 17px; overflow-wrap: anywhere; }
.rtm-tag { padding: 2px 10px; border-radius: 6px; background: rgba(255,255,255,.07); color: var(--m-text-2); font-size: 14px; }
.rtm-desc { margin-top: 16px; color: var(--m-text-2); font-size: 15px; }

.rtm-rows { border-top: 1px solid var(--m-line); }
.rtm-row {
	display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 12px; padding: 18px 12px;
	border-bottom: 1px solid var(--m-line);
}
.rtm-row dt { display: flex; align-items: center; gap: 14px; color: var(--m-text-2); font-size: 16px; font-weight: 600; margin: 0; }
.rtm-row dt .rtm-ico { color: var(--m-brand-soft); }
.rtm-row dd { font-size: 16px; overflow-wrap: anywhere; }
.rtm-row dd small { color: var(--m-text-2); font-size: 15px; }
.rtm-row .rtm-ok-badge { grid-column: 1 / -1; justify-self: start; display: flex; align-items: center; gap: 6px; max-width: 100%; margin: 0; padding: 3px 10px; border: 1px solid rgba(45,212,160,.4); border-radius: 999px; background: rgba(45,212,160,.12); color: var(--m-ok); font-size: 13px; font-weight: 600; line-height: 1.5; }
.rtm-row .rtm-ok-badge svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.rtm-act {
	display: flex; align-items: center; gap: 18px; margin-top: 12px; padding: 14px 20px; border-radius: 10px; text-decoration: none;
	border: 1px solid rgba(var(--m-brand-rgb), .45); background: rgba(var(--m-brand-rgb), .10); color: var(--m-text);
	transition: background-color .15s, border-color .15s;
}
.rtm-act > .rtm-ico { width: 30px; height: 30px; color: var(--m-brand-soft); }
.rtm-act:hover, .rtm-act:focus-visible { background: rgba(var(--m-brand-rgb), .20); border-color: var(--m-brand); outline: none; color: var(--m-text); }
.rtm-act-txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.rtm-act-txt b { font-size: 16px; font-weight: 700; }
.rtm-act-txt small { color: var(--m-text-2); font-size: 14px; }
.rtm-chev { color: var(--m-brand-soft); width: 22px; height: 22px; }
.rtm-act.is-danger { border-color: rgba(239, 71, 111, .55); background: rgba(239, 71, 111, .10); }
.rtm-act.is-danger > .rtm-ico, .rtm-act.is-danger .rtm-act-txt b, .rtm-act.is-danger .rtm-chev { color: var(--m-bad); }
.rtm-act.is-danger:hover, .rtm-act.is-danger:focus-visible { background: rgba(239, 71, 111, .20); border-color: var(--m-bad); }

.rtm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rtm-stat {
	display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 16px; border-radius: 10px;
	border: 1px solid var(--m-line); background: rgba(5, 12, 24, .45); color: var(--m-brand-soft);
}
.rtm-stat > .rtm-ico { width: 34px; height: 34px; }
.rtm-stat span { display: grid; min-width: 0; color: var(--m-text); }
.rtm-stat small { color: var(--m-text-2); font-size: 13px; }
.rtm-stat b { font-size: 18px; font-weight: 800; overflow-wrap: anywhere; }
.rtm-stat b.is-ok { color: var(--m-ok); }
.rtm-stat b.is-bad { color: var(--m-bad); }
.rtm-stat b.is-brand { color: var(--m-brand-soft); }

@media (max-width: 1100px) {
	.rtm-grid { grid-template-columns: minmax(0, 1fr); }
	.rtm-head::after { display: none; }
}
@media (max-width: 640px) {
	:is(.xm, .xc) .nav-tabs.rtm-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	:is(.xm, .xc) .nav-tabs.rtm-tabs > li > a { padding: 0 14px; white-space: nowrap; }
	.rtm-title { font-size: 26px; }
	.rtm-card { padding: 18px 16px; }
	.rtm-who { flex-direction: column; align-items: center; gap: 14px; text-align: center; }
	.rtm-who-txt { width: 100%; }
	.rtm-name-row, .rtm-id { justify-content: center; }
	.rtm-avatar { width: 104px; height: 104px; }
	.rtm-avatar .rtm-ico { width: 52px; height: 52px; }
	.rtm-name { font-size: 24px; }
	.rtm-row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 4px; }
	.rtm-stats { grid-template-columns: minmax(0, 1fr); }
	.rtm-hint { flex-basis: 100%; }
}

/* ═══ 비밀번호 재확인 · 회원정보 수정 ═════════════════════════════════
   마이페이지와 같은 카드·색. 회원가입과 같은 `#fo_insert_member` 를 쓰는 수정 화면은
   `.rtm-edit` 로 감싸 이 화면에서만 덮어쓴다(가입·로그인 화면은 그대로다).
   퍼플은 이 래퍼 안에서만 --rt-brand 로 되돌린다 — 공통 토큰은 건드리지 않는다. */
.rtm-edit, .rtm-recheck {
	--m-brand: #956BFF; --m-brand-rgb: 149, 107, 255; --m-brand-soft: #B49AFF;
	--m-card: rgb(13, 19, 46); --m-card-2: rgb(8, 13, 34);
	--m-line: rgba(149, 107, 255, .22); --m-text: var(--rt-text, #F7F7FA); --m-text-2: var(--rt-text-2, #AAB1C7);
	--m-bad: #EF476F;
	--rt-brand: #956BFF; --rt-brand-rgb: 149, 107, 255; --rt-accent-hover: #B49AFF; --rt-on-brand: #101322;
	color: var(--m-text); font-size: 14px; line-height: 1.5; padding: 4px 0 56px;
}
.rtm-edit *, .rtm-recheck * { box-sizing: border-box; }
html body:has(.rtm-edit, .rtm-recheck) .gpe_contents_box { max-width: none; }

/* 공통: 메시지 · 입력 · 단추 */
.xm .rtm-edit .message, .xm .rtm-recheck .message {
	max-width: none; margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; font-size: 13.5px;
	border: 1px solid var(--m-line); background: var(--m-card-2); color: var(--m-text);
}
.xm .rtm-edit .message p, .xm .rtm-recheck .message p { margin: 0; }
.xm .rtm-edit .message.error, .xm .rtm-recheck .message.error { border-color: var(--m-bad); background: rgba(239,71,111,.10); color: #ff8da4; }
.xm .rtm-edit input[type="text"], .xm .rtm-edit input[type="email"], .xm .rtm-edit input[type="password"],
.xm .rtm-edit input[type="url"], .xm .rtm-edit input[type="tel"], .xm .rtm-edit input[type="number"],
.xm .rtm-edit input[type="date"], .xm .rtm-edit select, .xm .rtm-edit textarea,
.xm .rtm-recheck input[type="email"], .xm .rtm-recheck input[type="password"] {
	display: block; width: 100%; max-width: 100%; height: 46px; padding: 0 16px; border: 1px solid var(--m-line); border-radius: 10px;
	text-overflow: ellipsis; background: var(--m-card-2); color: var(--m-text); font-size: 16px; box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}
.xm .rtm-edit textarea { height: auto; min-height: 110px; padding: 12px 16px; }
.xm .rtm-edit input:focus, .xm .rtm-edit select:focus, .xm .rtm-edit textarea:focus, .xm .rtm-recheck input:focus {
	outline: none; border-color: var(--m-brand); box-shadow: 0 0 0 3px rgba(var(--m-brand-rgb), .22);
}
.xm .rtm-edit input[readonly], .xm .rtm-recheck input[readonly] { color: var(--m-text-2); background: rgba(5,12,24,.5); cursor: default; }
.xm .rtm-edit #fo_insert_member input[type="submit"], .xm .rtm-recheck input[type="submit"] {
	position: static; display: inline-flex; align-items: center; justify-content: center; width: 150px; min-width: 150px; min-height: 46px;
	padding: 0 16px; border: 1px solid var(--m-brand); border-radius: 10px; background: var(--m-brand); background-image: none;
	color: #fff; font-size: 15px; font-weight: 700; text-shadow: none; box-shadow: none; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.xm .rtm-edit #fo_insert_member input[type="submit"]:hover, .xm .rtm-recheck input[type="submit"]:hover { background: var(--m-brand-soft); border-color: var(--m-brand-soft); }
.xm .rtm-edit #fo_insert_member input[type="submit"]:active, .xm .rtm-recheck input[type="submit"]:active { filter: brightness(.9); }
.xm .rtm-edit input[type="submit"]:focus-visible, .xm .rtm-recheck input[type="submit"]:focus-visible { outline: 2px solid var(--m-brand-soft); outline-offset: 2px; }

/* 비밀번호 재확인 — 중앙 카드 */
.rtm-recheck { display: flex; justify-content: center; padding-top: 28px; }
.rtm-lock {
	width: 100%; max-width: 480px; padding: 32px 30px; border: 1px solid rgba(var(--m-brand-rgb), .35); border-radius: 14px;
	background: linear-gradient(180deg, var(--m-card), var(--m-card-2) 220%);
}
.rtm-lock-title { margin: 0 0 10px; padding: 0; border: 0; font-size: 24px; font-weight: 800; color: var(--m-text); }
.rtm-lock-desc { margin: 0 0 22px; color: var(--m-text-2); font-size: 14.5px; line-height: 1.6; }
.rtm-lock-form { display: grid; gap: 12px; }
.rtm-lock-form > div { margin: 0; }
.rtm-lock-form .input-append { display: grid; gap: 12px; margin: 0; padding: 0; white-space: normal; }
.xm .rtm-recheck input[type="submit"] { width: 100%; }

/* 회원정보 수정 — 900~1000px 중앙 카드 */
.rtm-edit { max-width: 740px; margin: 0 auto; padding-top: 0; padding-bottom: 40px; }
.rtm-edit .rtm-head { margin-bottom: 6px; }
.rtm-edit .rtm-head::after { display: none; }
.rtm-edit .rtm-title { position: relative; margin: 0; font-size: 22px; line-height: 1.2; }
/* 강조 바는 글 밖(왼쪽)에 둬서 제목·안내·카드의 시작선을 맞춘다 */
.rtm-edit .rtm-title::before { position: absolute; left: -14px; top: 50%; transform: translateY(-50%); width: 4px; height: 22px; }
.rtm-edit .rtm-sub { margin: 5px 0 0; font-size: 13px; }
.xm .rtm-edit #fo_insert_member {
	width: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
}
/* 단일 '기본 정보' 카드 */
.rtm-cols { display: block; }
.rtm-panel { padding: 20px 22px 14px; border-radius: 12px; }
.xm .rtm-edit #fo_insert_member.form-horizontal .control-group {
	display: block; margin: 0; padding: 8px 0; border-bottom: 0;
}
.xm .rtm-edit #fo_insert_member.form-horizontal .control-label {
	display: block; float: none; width: auto; padding: 0; margin: 0 0 8px; text-align: left; font-size: 14.5px; font-weight: 700; color: var(--m-text);
}
.xm .rtm-edit #fo_insert_member.form-horizontal .controls { margin: 0; padding: 0; min-width: 0; }
.xm .rtm-edit #fo_insert_member .control-label em { color: var(--m-brand-soft) !important; font-style: normal; margin-right: 2px; }
.xm .rtm-edit #fo_insert_member .help-inline { display: block; padding: 6px 0 0; color: var(--m-text-2); font-size: 12.5px; }
.rtm-edit .controls .error, .rtm-edit .controls .rx-error, .rtm-edit .controls .alert { color: #ff8da4; font-size: 12.5px; }

/* 라디오 → 선택 칩. 라디오 자체와 name/value/id 는 그대로다. */
.xm .rtm-edit #fo_insert_member .rtm-choices { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 2px; }
.xm .rtm-edit #fo_insert_member .rtm-choices label {
	display: inline-flex; align-items: center; gap: 8px; margin: 0; min-height: 44px; padding: 0 18px; cursor: pointer;
	border: 1px solid var(--m-line); border-radius: 10px; background: var(--m-card-2); color: var(--m-text-2); font-size: 14px; font-weight: 600;
	transition: border-color .15s, background-color .15s, color .15s;
}
.xm .rtm-edit #fo_insert_member .rtm-choices label:hover { border-color: rgba(var(--m-brand-rgb), .6); color: var(--m-text); }
.xm .rtm-edit #fo_insert_member .rtm-choices label:has(input:checked) {
	border-color: var(--m-brand); background: rgba(var(--m-brand-rgb), .16); color: var(--m-text);
}
.xm .rtm-edit #fo_insert_member .rtm-choices input[type="radio"] { margin: 0; accent-color: var(--m-brand); }

/* 단추 줄: 취소(왼쪽, 다크 네이비) · 등록(오른쪽, 퍼플) */
.xm .rtm-edit #fo_insert_member .btnArea.rtm-actions {
	display: flex; flex-direction: row-reverse; justify-content: flex-start; align-items: center; gap: 12px; margin: 0; padding: 16px 0 0 !important; border: 0; border-top: 0 !important;
}
.xm .rtm-edit #fo_insert_member .rtm-actions .btn { float: none; margin: 0; }
.xm .rtm-edit #fo_insert_member .rtm-actions a.btn {
	display: inline-flex; align-items: center; justify-content: center; width: 120px; min-width: 120px; min-height: 46px; padding: 0 16px;
	border: 1px solid var(--m-line); border-radius: 10px; background: var(--m-card-2); background-image: none; color: var(--m-text);
	font-size: 15px; font-weight: 700; text-decoration: none; text-shadow: none; box-shadow: none; transition: border-color .15s, background-color .15s;
}
.xm .rtm-edit #fo_insert_member .rtm-actions a.btn:hover, .xm .rtm-edit #fo_insert_member .rtm-actions a.btn:focus-visible {
	border-color: rgba(var(--m-brand-rgb), .6); background: rgba(var(--m-brand-rgb), .10); outline: none;
}
.xm .rtm-edit #fo_insert_member input.btn[type="button"] { min-height: 40px; border-radius: 8px; }

@media (max-width: 720px) {
	.rtm-lock { padding: 24px 18px; }
	.rtm-panel { padding: 16px 16px 10px; }
	.xm .rtm-edit #fo_insert_member .btnArea.rtm-actions { flex-direction: column; align-items: stretch; }
	.xm .rtm-edit #fo_insert_member .rtm-actions a.btn, .xm .rtm-edit #fo_insert_member input[type="submit"] { width: 100%; }
}

/* 회원정보 수정 — 메일링 가입 · 쪽지 수신 허용 행 숨김.
   display:none 이라도 라디오는 DOM 에 남아 있어 기존 저장값이 그대로 제출된다. */
.xm .rtm-edit #fo_insert_member .control-group:has(input[name="allow_mailing"]),
.xm .rtm-edit #fo_insert_member .control-group:has(input[name="allow_message"]) { display: none; }

/* ═══ 작성 글 · 작성 댓글 · 쪽지함 · 친구 목록 ═══════════════════════
   member(.xm) 와 communication(.xc) 스킨이 같은 모양을 쓴다. 모든 규칙은 `.rtm-list` 안으로
   한정한다. 코어 부트스트랩풍 표·단추·페이지 규칙(.xm/.xc 접두)을 이기려고 접두를 맞춘다. */
html body:has(.rtm-list) .gpe_contents_box { max-width: none; }
:is(.xm, .xc) .rtm-list { color: var(--m-text); font-size: 14px; line-height: 1.5; padding: 4px 0 40px; }
:is(.xm, .xc) .rtm-list *, :is(.xm, .xc) .rtm-list *::before, :is(.xm, .xc) .rtm-list *::after { box-sizing: border-box; }
:is(.xm, .xc) .rtm-list h1, :is(.xm, .xc) .rtm-list p { margin: 0; padding: 0; border: 0; }
:is(.xm, .xc) .rtm-list .rtm-head { margin-bottom: 18px; }
:is(.xm, .xc) .rtm-list .rtm-head::after { display: none; }
:is(.xm, .xc) .rtm-list .rtm-title { font-size: 28px; }
:is(.xm, .xc) .rtm-list .rtm-title::before { height: 30px; }
:is(.xm, .xc) .rtm-list .rtm-sub { margin-top: 6px; }
:is(.xm, .xc) .rtm-list a { text-decoration: none; }
:is(.xm, .xc) .rtm-list .message { margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--m-line); border-radius: 10px; background: var(--m-card-2); color: var(--m-text); }
:is(.xm, .xc) .rtm-list .message.error { border-color: var(--m-bad); background: rgba(239,71,111,.10); color: #ff8da4; }
:is(.xm, .xc) .rtm-list .message p { margin: 0; }

/* 표 카드 */
:is(.xm, .xc) .rtm-list .rtm-tablecard { padding: 0; margin: 0 0 14px; overflow-x: auto; border-radius: 12px; }
:is(.xm, .xc) .rtm-list .table { width: 100%; max-width: 100%; margin: 0; border: 0; border-collapse: collapse; background: transparent; color: var(--m-text); font-size: 14px; }
:is(.xm, .xc) .rtm-list .table > caption { caption-side: top; padding: 14px 20px; text-align: left; font-size: 13px; font-weight: 600; color: var(--m-text-2); border-bottom: 1px solid var(--m-line); }
:is(.xm, .xc) .rtm-list .table th { padding: 13px 16px; border: 0; border-bottom: 1px solid var(--m-line); background: rgba(var(--m-brand-rgb), .08); color: var(--m-text-2); font-size: 13px; font-weight: 700; text-align: left; vertical-align: middle; }
:is(.xm, .xc) .rtm-list .table td { padding: 14px 16px; border: 0; border-top: 1px solid var(--m-line); vertical-align: middle; color: var(--m-text); }
:is(.xm, .xc) .rtm-list .table thead:first-child tr:first-child th, :is(.xm, .xc) .rtm-list .table > caption + thead tr:first-child th { border-top: 0; }
:is(.xm, .xc) .rtm-list .table tbody > tr:first-child > td { border-top: 0; }
:is(.xm, .xc) .rtm-list .table-striped tbody > tr:nth-child(odd) > td, :is(.xm, .xc) .rtm-list .table-striped tbody > tr:nth-child(odd) > th { background: rgba(255,255,255,.02); }
:is(.xm, .xc) .rtm-list .table-striped tbody > tr:nth-child(even) > td { background: transparent; }
:is(.xm, .xc) .rtm-list .table-hover tbody tr:hover > td, :is(.xm, .xc) .rtm-list .table-hover tbody tr:hover > th { background: rgba(var(--m-brand-rgb), .10); }
:is(.xm, .xc) .rtm-list .table td a, :is(.xm, .xc) .rtm-list .table th a { color: var(--m-text); }
:is(.xm, .xc) .rtm-list .table td a:hover { color: var(--m-brand-soft); }
:is(.xm, .xc) .rtm-list .table td.title { overflow-wrap: anywhere; }
:is(.xm, .xc) .rtm-list .table td.title a { font-weight: 600; }
:is(.xm, .xc) .rtm-list .table th:not(.title), :is(.xm, .xc) .rtm-list .table td:not(.title):not([colspan]) { white-space: nowrap; }
:is(.xm, .xc) .rtm-list .table td.rtm-empty { padding: 48px 16px; text-align: center; color: var(--m-text-2); white-space: normal; }
:is(.xm, .xc) .rtm-list .table-hover tbody tr:hover > td.rtm-empty { background: transparent; }
:is(.xm, .xc) .rtm-list input[type="checkbox"], :is(.xm, .xc) .rtm-list input[type="radio"] { accent-color: var(--m-brand); width: auto; height: auto; margin: 0; }
:is(.xm, .xc) .rtm-list .rhymix_content, :is(.xm, .xc) .rtm-list .xe_content { color: var(--m-text); }
:is(.xm, .xc) .rtm-list .attachments { margin: 0; padding: 0 0 0 18px; }

/* 입력 · 단추 */
:is(.xm, .xc) .rtm-list input[type="text"], :is(.xm, .xc) .rtm-list input[type="search"], :is(.xm, .xc) .rtm-list select {
	display: inline-block; width: auto; max-width: 100%; height: 40px; margin: 0; padding: 0 12px; border: 1px solid var(--m-line); border-radius: 8px;
	background: var(--m-card-2); color: var(--m-text); font-size: 14px; line-height: normal; box-shadow: none; vertical-align: middle;
}
:is(.xm, .xc) .rtm-list input[type="text"]:focus, :is(.xm, .xc) .rtm-list select:focus { outline: none; border-color: var(--m-brand); box-shadow: 0 0 0 3px rgba(var(--m-brand-rgb), .22); }
:is(.xm, .xc) .rtm-list select option { background: var(--m-card-2); color: var(--m-text); }
:is(.xm, .xc) .rtm-list .btn, :is(.xm, .xc) .rtm-list a.btn, :is(.xm, .xc) .rtm-list button.btn, :is(.xm, .xc) .rtm-list input.btn[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin: 0; padding: 0 16px; border: 1px solid var(--m-line); border-radius: 8px;
	background: var(--m-card-2); background-image: none; color: var(--m-text); font-size: 14px; font-weight: 600; line-height: 1.2; text-shadow: none; box-shadow: none; cursor: pointer;
	float: none; transition: border-color .15s, background-color .15s, color .15s;
}
:is(.xm, .xc) .rtm-list .btn:hover, :is(.xm, .xc) .rtm-list .btn:focus-visible { border-color: rgba(var(--m-brand-rgb), .6); background: rgba(var(--m-brand-rgb), .12); color: var(--m-text); outline: none; }
:is(.xm, .xc) .rtm-list .rtm-search .btn, :is(.xm, .xc) .rtm-list .btn.is-active { border-color: var(--m-brand); background: var(--m-brand); color: #fff; }
:is(.xm, .xc) .rtm-list .rtm-search .btn:hover, :is(.xm, .xc) .rtm-list .btn.is-active:hover { border-color: var(--m-brand-soft); background: var(--m-brand-soft); color: #fff; }
:is(.xm, .xc) .rtm-list .btn-group { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 0; }
:is(.xm, .xc) .rtm-list .btn-group > .btn { border-radius: 8px; }
:is(.xm, .xc) .rtm-list .btnArea { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 0; border: 0; }
:is(.xm, .xc) .rtm-list form { margin: 0; }
:is(.xm, .xc) .rtm-list .btnArea .etc { display: inline-flex; gap: 8px; align-items: center; }
:is(.xm, .xc) .rtm-list .rtm-allow { display: flex; align-items: center; gap: 8px; }

/* 검색 · 페이지 */
:is(.xm, .xc) .rtm-list .rtm-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 0; }
:is(.xm, .xc) .rtm-list .pagination.pagination-centered { display: flex; justify-content: center; margin: 16px 0 0; }
:is(.xm, .xc) .rtm-list .rtm-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
:is(.xm, .xc) .rtm-list .rtm-search input[type="text"] { width: 220px; }
:is(.xm, .xc) .rtm-list .pagination ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; border-radius: 0; box-shadow: none; }
:is(.xm, .xc) .rtm-list .pagination ul > li { display: block; }
:is(.xm, .xc) .rtm-list .pagination ul > li > a, :is(.xm, .xc) .rtm-list .pagination ul > li > span {
	float: none; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; margin: 0; padding: 0 12px;
	border: 1px solid var(--m-line); border-radius: 8px; background: var(--m-card-2); color: var(--m-text-2); font-size: 13px; line-height: 1;
}
:is(.xm, .xc) .rtm-list .pagination ul > li > a:hover { border-color: rgba(var(--m-brand-rgb), .6); color: var(--m-text); background: rgba(var(--m-brand-rgb), .12); }
:is(.xm, .xc) .rtm-list .pagination ul > .active > a, :is(.xm, .xc) .rtm-list .pagination ul > .active > span { border-color: var(--m-brand); background: rgba(var(--m-brand-rgb), .24); color: var(--m-text); cursor: default; }

@media (max-width: 640px) {
	:is(.xm, .xc) .rtm-list .rtm-title { font-size: 24px; }
	:is(.xm, .xc) .rtm-list .table th, :is(.xm, .xc) .rtm-list .table td { padding: 10px 8px; font-size: 13px; }
	:is(.xm, .xc) .rtm-list .table > caption { padding: 12px; }
	:is(.xm, .xc) .rtm-list .table th:not(.title), :is(.xm, .xc) .rtm-list .table td:not(.title):not([colspan]) { white-space: normal; }
	:is(.xm, .xc) .rtm-list .table th.title, :is(.xm, .xc) .rtm-list .table td.title { min-width: 120px; }
	:is(.xm, .xc) .rtm-list .rtm-search { width: 100%; }
	:is(.xm, .xc) .rtm-list .rtm-search input[type="text"] { flex: 1 1 120px; width: auto; min-width: 0; }
	:is(.xm, .xc) .rtm-list .rtm-pager { flex-direction: column; align-items: stretch; }
	:is(.xm, .xc) .rtm-list .pagination ul { justify-content: center; }
	:is(.xm, .xc) .rtm-list .rtm-allow { width: 100%; }
}

/* 상단 회원 메뉴 — 쪽지함 · 친구 항목 숨김 (member · communication 공통 .rtm-tabs).
   메뉴 항목은 <li> 통째로 숨겨 빈 자리가 남지 않는다. 기능과 데이터는 그대로다. */
:is(.xm, .xc) .nav-tabs.rtm-tabs > li:has(> a[href*="dispCommunicationMessages"]),
:is(.xm, .xc) .nav-tabs.rtm-tabs > li:has(> a[href*="dispCommunicationFriend"]) { display: none; }

/* 모바일(≤767px) 작성 글 · 작성 댓글 — 표 대신 카드, 상단 탭은 짧은 글자 3열.
   마크업은 document_list.html · comment_list.html 의 `.rtm-cards`(PC·태블릿에서는 숨김). 작성 글은 퍼플, 작성 댓글은 블루 포인트. */
.rtm-head-ico, .rtm-count, .rtm-cards, .rtm-c-empty, .rtm-t-m, .rtm-cap-ko, .rtm-pc-x, .rtm-pnav, .rtm-ln-new { display: none; }
@media (max-width: 767px) {
	.rtm-list { --mc: 149, 107, 255; }
	.rtm-list.rtm-cmt { --mc: 94, 168, 255; }
	:is(.xm, .xc) .nav-tabs.rtm-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; border-bottom: 0; }
	:is(.xm, .xc) .nav-tabs.rtm-tabs::before, :is(.xm, .xc) .nav-tabs.rtm-tabs::after { display: none; }
	:is(.xm, .xc) .nav-tabs.rtm-tabs > li { margin: 0; }
	:is(.xm, .xc) .nav-tabs.rtm-tabs > li > a { box-sizing: border-box; justify-content: center; gap: 6px; width: 100%; height: 44px; padding: 0 4px; border: 1px solid rgba(var(--m-brand-rgb), .3); border-radius: 12px; background: linear-gradient(180deg, rgba(16, 22, 52, .98), rgba(10, 15, 38, .98)); font-size: 13px; white-space: nowrap; }
	:is(.xm, .xc) .nav-tabs.rtm-tabs > li.active > a, :is(.xm, .xc) .nav-tabs.rtm-tabs > li.active > a:hover { border-color: rgba(var(--m-brand-rgb), .8); background: linear-gradient(180deg, rgba(var(--m-brand-rgb), .38), rgba(var(--m-brand-rgb), .16)); color: #fff; }
	.rtm-ico { width: 18px; height: 18px; flex: none; }
	.rtm-t-pc { display: none; }
	.rtm-t-m { display: inline; }

	:is(.xm, .xc) .rtm-list .rtm-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid rgba(var(--mc), .35); border-radius: 14px; background: linear-gradient(180deg, rgba(16, 22, 52, .98), rgba(10, 15, 38, .98)); }
	:is(.xm, .xc) .rtm-list .rtm-head::after, :is(.xm, .xc) .rtm-list .rtm-title::before, :is(.xm, .xc) .rtm-list .rtm-sub { display: none; }
	:is(.xm, .xc) .rtm-list .rtm-head-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border: 1px solid rgba(var(--mc), .45); border-radius: 10px; background: rgba(var(--mc), .16); color: rgb(var(--mc)); }
	.rtm-head-svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
	:is(.xm, .xc) .rtm-list .rtm-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 17px; }
	:is(.xm, .xc) .rtm-list .rtm-count { display: inline-block; flex: none; padding: 4px 10px; border: 1px solid rgba(var(--mc), .4); border-radius: 999px; background: rgba(var(--mc), .14); color: rgb(var(--mc)); font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; }

	:is(.xm, .xc) .rtm-list .rtm-tablecard { display: none; }
	:is(.xm, .xc) .rtm-list .rtm-cards { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
	:is(.xm, .xc) .rtm-list .rtm-c-empty { display: block; margin: 0; padding: 40px 12px; border: 1px solid rgba(var(--mc), .3); border-radius: 12px; color: var(--m-text-2); text-align: center; }
	:is(.xm, .xc) .rtm-list .rtm-c-main { box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(var(--mc), .3); border-radius: 12px; background: linear-gradient(180deg, rgba(16, 22, 52, .98), rgba(10, 15, 38, .98)); color: var(--m-text); text-decoration: none; }
	:is(.xm, .xc) .rtm-list .rtm-c-main:hover { border-color: rgba(var(--mc), .6); }
	:is(.xm, .xc) .rtm-list .rtm-c-body { display: grid; flex: 1 1 auto; gap: 4px; min-width: 0; }
	:is(.xm, .xc) .rtm-list .rtm-c-cat { justify-self: start; padding: 1px 8px; border: 1px solid rgba(var(--mc), .5); border-radius: 999px; background: rgba(var(--mc), .14); color: rgb(var(--mc)); font-size: 11px; font-weight: 600; line-height: 1.5; }
	:is(.xm, .xc) .rtm-list .rtm-c-title, :is(.xm, .xc) .rtm-list .rtm-c-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
	:is(.xm, .xc) .rtm-list .rtm-c-title em { color: rgb(var(--mc)); font-style: normal; font-weight: 600; }
	:is(.xm, .xc) .rtm-list .rtm-c-text { -webkit-line-clamp: 3; font-size: 14px; font-weight: 600; }
	:is(.xm, .xc) .rtm-list .rtm-c-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--m-text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
	:is(.xm, .xc) .rtm-list .rtm-c-meta > span, :is(.xm, .xc) .rtm-list .rtm-c-sub { display: inline-flex; align-items: center; gap: 5px; }
	:is(.xm, .xc) .rtm-list .rtm-c-sub { justify-self: start; color: var(--m-text-2); font-size: 12px; }
	.rtm-c-mi { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
	.rtm-c-chev { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--m-text-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
	:is(.xm, .xc) .rtm-list .rtm-c-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(var(--mc), .16); color: rgb(var(--mc)); }
	.rtm-c-svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
	:is(.xm, .xc) .rtm-list .rtm-c-side { display: grid; flex: none; gap: 1px; color: var(--m-text-2); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

	:is(.xm, .xc) .rtm-list .rtm-pager { margin-top: 12px; gap: 10px; }
	:is(.xm, .xc) .rtm-list .rtm-pages { justify-content: center; gap: 4px; }
	:is(.xm, .xc) .rtm-list .pagination ul > li > a, :is(.xm, .xc) .rtm-list .pagination ul > li > span { min-width: 34px; height: 34px; padding: 0 6px; }
	:is(.xm, .xc) .rtm-list .rtm-pages .direction { font-size: 0; }
	:is(.xm, .xc) .rtm-list .rtm-pages li:first-child .direction::before { content: "\00ab"; font-size: 16px; }
	:is(.xm, .xc) .rtm-list .rtm-pages li:last-child .direction::before { content: "\00bb"; font-size: 16px; }
}

/* 회원설정 5화면(정보수정 · 비밀번호 변경 · 비밀번호 재확인 · 회원 탈퇴 · 이메일 주소 변경) — 전 해상도 통일(PC·태블릿은 아래 max-width 만 다르다).
   각 템플릿이 `<section class="xm rtm-set rtm-set-{화면}">` 를 만들고(common_header.html), 아래는 그 범위 안에서만 쓴다.
   구성: 탭 → 머리 카드(아이콘 · 제목 · 한 줄 설명) → 폼 카드(입력 50px · 간격 14px · 버튼 52px 꽉 찬 폭). PC·태블릿(≥768px)은 같은 카드를 가운데 정렬 폭으로 둔다.
   가입 카드용 규칙(layout userCSS 의 `.xm:has(> #fo_insert_member)`)이 이 화면의 .xm·h1·폼에도 닿으므로 같은 접두(html:root)로 덮는다. */
@media all {
	html:root :is(.xm.rtm-set, .xm.rtm-set:has(> #fo_insert_member)) { --rs-rgb: 149, 107, 255; --m-card: rgb(13, 19, 46); --m-card-2: rgb(8, 13, 34); --m-line: rgba(149, 107, 255, .22); max-width: none; margin: 0 0 8px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
	html:root :is(.xm.rtm-set, .xm.rtm-set:has(> #fo_insert_member)) > .nav-tabs.rtm-tabs { margin: 0 0 12px; }
	html:root .xm.rtm-set-leave { --rs-rgb: 232, 82, 122; }
	/* 회원설정 4화면(정보 수정 · 비밀번호 변경 · 이메일 변경 · 탈퇴)은 상단 탭(내 계정 · 작성 글 …)을 감추고 제목 카드가 바로 오게 한다.
	   다른 회원 화면의 탭은 그대로다(비밀번호 재확인 rtm-set-recheck 포함해 5화면). 탭이 빠진 만큼 헤더와 카드 사이 위 여백만 레이아웃 박스에 준다. */
	html:root .xm.rtm-set:is(.rtm-set-info, .rtm-set-pw, .rtm-set-email, .rtm-set-leave, .rtm-set-recheck) > .nav-tabs.rtm-tabs { display: none; }
	html:root .gpe_contents_box:has(.xm.rtm-set:is(.rtm-set-info, .rtm-set-pw, .rtm-set-email, .rtm-set-leave, .rtm-set-recheck)) { padding-top: 16px; }
	/* 이메일 변경 화면은 `#fo_insert_member` 가 없어 레이아웃의 float 해제(`.gpe_contents_box:has(#fo_insert_member)`)가 닿지 않는다 — 같은 기준으로 맞춘다. */
	html:root .gpe_contents_box:has(.xm.rtm-set) { float: none; }
	@media (min-width: 768px) { html:root :is(.xm.rtm-set, .xm.rtm-set:has(> #fo_insert_member)) { max-width: 720px; margin: 0 auto 24px; } html:root .xm.rtm-set-info { max-width: 960px; } }

	/* 머리 카드 */
	html:root :is(.xm.rtm-set, .xm.rtm-set:has(> #fo_insert_member)) > h1 { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; column-gap: 12px; max-width: none; margin: 0 0 12px; padding: 14px 16px; box-shadow: inset 0 0 0 1px rgba(var(--rs-rgb), .35); border-radius: 16px; background: linear-gradient(180deg, rgba(16, 22, 52, .98), rgba(10, 15, 38, .98)); color: var(--m-text, #f7f7fa); font-size: 18px; font-weight: 800; line-height: 1.3; text-align: left; }
	html:root :is(.xm.rtm-set, .xm.rtm-set:has(> #fo_insert_member)) > h1::before { content: ""; grid-row: 1 / span 2; display: block; width: 36px; height: 36px; margin: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(var(--rs-rgb), .45); background: rgba(var(--rs-rgb), .16) var(--rs-ico) center / 20px no-repeat; }
	html:root :is(.xm.rtm-set, .xm.rtm-set:has(> #fo_insert_member)) > h1::after { display: block; margin: 2px 0 0; color: var(--m-text-2, #aab1c7); font-size: 13px; font-weight: 400; line-height: 1.4; content: var(--rs-desc, none); }
	html:root :is(.xm.rtm-set, .xm.rtm-set:has(> #fo_insert_member)) > .message { max-width: none; margin: 0 0 12px; }
	html:root .xm.rtm-set-pw { --rs-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b79cff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); --rs-desc: "현재 비밀번호를 확인하고 새 비밀번호를 설정하세요."; }
	html:root .xm.rtm-set-leave { --rs-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8da4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 20h19z'/%3E%3Cpath d='M12 10v4M12 17.5v.01'/%3E%3C/svg%3E"); --rs-desc: "탈퇴를 진행하려면 비밀번호를 다시 입력해 주세요."; }
	html:root .xm.rtm-set-email { --rs-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b79cff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
	html:root :is(.xm.rtm-set-email, .xm.rtm-set-email:has(> #fo_insert_member)) > h1::after { content: none; }
	html:root :is(.xm.rtm-set-email, .xm.rtm-set-email:has(> #fo_insert_member)) > form > p { margin: 0 4px 2px; color: var(--m-text-2, #aab1c7); font-size: 13px; line-height: 1.5; }

	/* 폼 카드 */
	html:root :is(.xm.rtm-set, .xm.rtm-set:has(> #fo_insert_member)) > form { box-sizing: border-box; display: grid; gap: 12px; max-width: none; margin: 0; padding: 16px; background: linear-gradient(180deg, rgba(16, 22, 52, .98), rgba(10, 15, 38, .98)); border: 1px solid rgba(var(--rs-rgb), .35); border-radius: 16px; box-shadow: none; }
	html:root :is(.xm.rtm-set, .xm.rtm-set:has(> #fo_insert_member)) > form > div, html:root :is(.xm.rtm-set, .xm.rtm-set:has(> #fo_insert_member)) > form > .input-append { margin: 0; }
	html:root :is(.xm.rtm-set-leave, .xm.rtm-set-leave:has(> #fo_insert_member)) > form::before { content: "탈퇴를 진행하면 이 계정으로 더 이상 로그인할 수 없습니다."; padding: 10px 12px; border: 1px solid rgba(232, 82, 122, .4); border-radius: 10px; background: rgba(232, 82, 122, .1); color: #ff9db5; font-size: 13px; line-height: 1.5; }
	html:root :is(.xm.rtm-set, .xm.rtm-set:has(> #fo_insert_member)) > form input[type=email], html:root :is(.xm.rtm-set, .xm.rtm-set:has(> #fo_insert_member)) > form input[type=password], html:root :is(.xm.rtm-set, .xm.rtm-set:has(> #fo_insert_member)) > form input[type=text] { box-sizing: border-box; display: block; width: 100%; height: 46px; min-height: 46px; margin: 0; padding: 0 14px; border: 1px solid var(--m-line, #1c2a3c); border-radius: 10px; background: var(--m-card-2, #102337); box-shadow: none; color: var(--m-text, #f7f7fa); font-size: 16px; }
	html:root :is(.xm.rtm-set, .xm.rtm-set:has(> #fo_insert_member)) > form input::placeholder { color: var(--rt-muted, #8da2c0); }
	html:root :is(.xm.rtm-set, .xm.rtm-set:has(> #fo_insert_member)) > form input:focus { outline: none; border-color: #956BFF; box-shadow: 0 0 0 3px rgba(149, 107, 255, .22); }
	html:root :is(.xm.rtm-set, .xm.rtm-set:has(> #fo_insert_member)) > form input[disabled], html:root :is(.xm.rtm-set, .xm.rtm-set:has(> #fo_insert_member)) > form input[readonly] { background: rgba(5, 12, 24, .5); color: var(--m-text-2, #aab1c7); cursor: default; }
	html:root :is(.xm.rtm-set, .xm.rtm-set:has(> #fo_insert_member)) > form .input-append { display: grid; gap: 12px; white-space: normal; font-size: 16px; }
	html:root :is(.xm.rtm-set, .xm.rtm-set:has(> #fo_insert_member)) > form .help-inline { display: block; margin: 6px 2px 0; color: var(--rt-muted, #8da2c0); font-size: 12px; line-height: 1.5; }
	html:root :is(.xm.rtm-set, .xm.rtm-set:has(> #fo_insert_member)) > form input[type=submit] { box-sizing: border-box; display: block; width: 100%; min-width: 0 !important; height: 48px; min-height: 48px; margin: 4px 0 0; padding: 0; border: 0; border-radius: 10px; background: linear-gradient(180deg, #A57FFF, #8A5CF5); box-shadow: 0 8px 22px rgba(149, 107, 255, .28); color: #101322; font-size: 16px; font-weight: 700; text-shadow: none; cursor: pointer; }
	html:root :is(.xm.rtm-set-leave, .xm.rtm-set-leave:has(> #fo_insert_member)) > form input[type=submit] { background: linear-gradient(180deg, #E8527A, #C23A63); box-shadow: 0 8px 22px rgba(232, 82, 122, .25); color: #fff; }

	/* 정보수정: 머리 + 패널은 기존 구조, 머리만 아이콘 카드로 */
	html:root .xm.rtm-set-info #fo_insert_member { box-sizing: border-box; max-width: none; margin: 0; padding: 16px; background: linear-gradient(180deg, rgba(16, 22, 52, .98), rgba(10, 15, 38, .98)); border: 1px solid rgba(var(--rs-rgb), .35); border-radius: 16px; box-shadow: none; }
	html:root .xm.rtm-set-info .rtm-edit #fo_insert_member .rtm-panel { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
	html:root .xm.rtm-set-info .rtm-edit #fo_insert_member :is(input[type=text],input[type=email],input[type=password],select) { min-height: 46px; height: 46px; border-color: var(--m-line); background-color: var(--m-card-2); }
	html:root .xm.rtm-set-info .rtm-edit #fo_insert_member .rtm-actions :is(input[type=submit],a.btn) { min-height: 48px; height: 48px; }
	html:root .xm.rtm-set-info .rtm-edit #fo_insert_member .rtm-actions a.btn { border: 1px solid var(--m-line); background: var(--m-card-2); color: var(--m-text-2); }
	html:root .xm.rtm-set-info .rtm-edit #fo_insert_member.form-horizontal .control-group { padding: 6px 0; }
	html:root .xm.rtm-set-info .rtm-edit #fo_insert_member.form-horizontal .control-label { margin-bottom: 6px; }
	html:root .xm.rtm-set-info .rtm-edit #fo_insert_member .help-inline { padding-top: 6px; }
	html:root .xm.rtm-set-info .rtm-edit #fo_insert_member .btnArea.rtm-actions { padding-top: 10px !important; }
	html:root .xm.rtm-set-info .rtm-edit .rtm-head { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; column-gap: 12px; margin: 0 0 12px; padding: 14px 16px; box-shadow: inset 0 0 0 1px rgba(var(--rs-rgb), .35); border-radius: 16px; background: linear-gradient(180deg, rgba(16, 22, 52, .98), rgba(10, 15, 38, .98)); }
	html:root .xm.rtm-set-info .rtm-edit .rtm-head::before { content: ""; grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(var(--rs-rgb), .45); background: rgba(var(--rs-rgb), .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b79cff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") center / 20px no-repeat; }
	html:root .xm.rtm-set-info .rtm-edit .rtm-head::after { display: none; }
	html:root .xm.rtm-set-info .rtm-edit .rtm-title { margin: 0; font-size: 18px; }
	html:root .xm.rtm-set-info .rtm-edit .rtm-title::before { display: none; }
	html:root .xm.rtm-set-info .rtm-edit .rtm-sub { grid-column: 2; margin: 2px 0 0; font-size: 13px; line-height: 1.4; }

	/* 비밀번호 재확인: 카드 하나 안에 머리(아이콘 · 제목 · 설명) + 폼. 휑한 위·아래 여백을 줄인다. */
	html:root .xm.rtm-set-recheck .rtm-recheck { display: block; padding-top: 0; }
	html:root .xm.rtm-set-recheck .rtm-lock { max-width: none; margin: 0; padding: 16px; }
	html:root .xm.rtm-set-recheck .rtm-lock-title { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; column-gap: 12px; margin: 0 0 12px; font-size: 18px; }
	html:root .xm.rtm-set-recheck .rtm-lock-title::before { content: ""; width: 36px; height: 36px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(var(--rs-rgb), .45); background: rgba(var(--rs-rgb), .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b79cff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v6c0 4.4 3 7.4 7 9 4-1.6 7-4.6 7-9V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / 20px no-repeat; }
	html:root .xm.rtm-set-recheck .rtm-lock .rt-auth-notice { max-width: none; margin: 0 0 16px; }
	html:root .xm.rtm-set-recheck .rtm-lock-desc { margin: 0 0 16px; font-size: 13px; line-height: 1.5; }
	html:root .xm.rtm-set-recheck .rtm-lock-form { gap: 12px; margin: 0; }
	html:root .xm.rtm-set-recheck .rtm-lock-form > * { margin: 0; }
	html:root .xm.rtm-set-recheck .rtm-lock-form input[type=email], html:root .xm.rtm-set-recheck .rtm-lock-form input[type=password] { height: 46px; min-height: 46px; margin: 0; }
	html:root .xm.rtm-set-recheck .rtm-lock-form input[type=submit] { height: 48px; min-height: 48px; margin-top: 4px; border-radius: 10px; }
}

/* ═══ PC(≥1024px) 다크 퍼플 통일 — 회원정보 보기 · 작성 글 · 작성 댓글 ═══════════
   위쪽 규칙이 쓰는 지역 토큰(--m-card · --m-card-2 · --m-line)만 네이비·청회색에서 홈·랭킹과 같은 남보라로 바꾼다.
   표·카드·입력·페이지·구분선이 모두 이 토큰을 따라가므로 규칙을 더 만들지 않는다. 상단 탭(.rtm-tabs)·모바일·태블릿은 그대로다. */
@media (min-width: 1024px) {
	.rtm, .rtm-list {
		--m-card: rgb(13, 19, 46);
		--m-card-2: rgb(8, 13, 34);
		--m-line: rgba(var(--m-brand-rgb), .22);
	}
	.rtm-card { border-color: rgba(var(--m-brand-rgb), .28); }
	.rtm-avatar { background: rgba(8, 10, 27, .7); }
	.rtm-stat { background: rgba(8, 10, 27, .5); }
	/* 콘텐츠 바탕: 상단 탭과 본문을 감싼 `.xm`(회원정보 보기 · 작성 글 · 작성 댓글)만 — 정보 수정·로그인 등 다른 `.xm` 은 자식이 달라 걸리지 않는다. */
	.xm:has(> :is(.rtm, .rtm-list)) { box-sizing: border-box; padding: 12px 8px; border: 1px solid rgba(149, 107, 255, .28); border-radius: 18px; background: #0d122c; }
	.xm > :is(.rtm, .rtm-list) { padding-bottom: 0; }
	/* 상단 탭 구분선 · 제목 헤더(랭킹 허브와 같은 남보라 그라데이션 + 퍼플 .28 테두리) · 목록 건수 · 페이지 번호(랭킹 .pd-page 와 같은 퍼플). */
	:is(.xm, .xc) .nav-tabs.rtm-tabs { margin-bottom: 16px; border-bottom-color: rgba(var(--m-brand-rgb), .28); }
	/* 6개 탭을 한 줄에 — 우측 상단 회원 메뉴와 같은 항목. 예측 화면 3개에는 같은 탭 줄(.rtm-pnav)이 따로 있다. */
	.rtm-pc-x { display: block; }
	.rtm-pnav { display: block; }
	.rtm-ln-new { display: inline; }
	.rtm-ln-old { display: none; }
	:is(.xm, .xc) .nav-tabs.rtm-tabs { gap: 2px; }
	:is(.xm, .xc) .nav-tabs.rtm-tabs > li > a { gap: 6px; padding: 0 11px; font-size: 14px; white-space: nowrap; }
	.rtm-head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; margin-bottom: 16px; padding: 16px 22px; overflow: hidden; border: 1px solid rgba(var(--m-brand-rgb), .28); border-radius: 16px; background: radial-gradient(60% 140% at 78% 0%, rgba(var(--m-brand-rgb), .34), transparent 62%), radial-gradient(40% 90% at 8% 100%, rgba(70, 120, 255, .14), transparent 70%), linear-gradient(120deg, #171a42, #0b1030 62%); }
	:is(.xm, .xc) .rtm-head::after { display: none; }
	.rtm-head > :not(.rtm-head-ico) { grid-column: 2; min-width: 0; }
	:is(.xm, .xc) .rtm-list .rtm-head-ico, .rtm .rtm-title::before { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; width: 40px; height: 40px; border: 1px solid rgba(var(--m-brand-rgb), .4); border-radius: 11px; background: rgba(var(--m-brand-rgb), .14); color: var(--m-brand-soft); }
	:is(.xm, .xc) .rtm-list .rtm-head-ico { grid-column: 1; grid-row: 1 / span 2; margin-right: 14px; }
	.rtm .rtm-title::before { content: ""; background: rgba(var(--m-brand-rgb), .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b49aff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") center / 22px 22px no-repeat; }
	.rtm .rtm-sub { padding-left: 52px; }
	:is(.xm, .xc) .rtm-list .rtm-title::before { display: none; }
	:is(.xm, .xc) .rtm-list .rtm-sub { padding-left: 0; }
	.rtm-title, :is(.xm, .xc) .rtm-list .rtm-title { font-size: 26px; font-weight: 900; }
	.rtm-sub { margin-top: 4px; font-size: 14px; }
	.rtm-head-svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
	.rtm-cap-en { display: none; }
	.rtm-cap-ko { display: inline; }
	:is(.xm, .xc) .rtm-list .table > caption { background: rgba(var(--m-brand-rgb), .06); color: var(--m-brand-soft); }
	:is(.xm, .xc) .rtm-list .pagination ul > li > a, :is(.xm, .xc) .rtm-list .pagination ul > li > span { border-color: rgba(var(--m-brand-rgb), .18); background: rgba(var(--m-brand-rgb), .06); color: #cfc6ee; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease; }
	:is(.xm, .xc) .rtm-list .pagination ul > li > a:hover { border-color: rgba(var(--m-brand-rgb), .35); background: rgba(var(--m-brand-rgb), .16); color: #fff; box-shadow: inset 0 0 12px rgba(var(--m-brand-rgb), .18); }
	:is(.xm, .xc) .rtm-list .pagination ul > .active > a, :is(.xm, .xc) .rtm-list .pagination ul > .active > span { border-color: rgba(190, 165, 255, .5); background: linear-gradient(180deg, #9b79ff, #7549eb); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 4px 12px rgba(117, 73, 235, .38); }
	:is(.xm, .xc) .rtm-list .pagination ul > li > a:focus-visible { outline: 2px solid #b49aff; outline-offset: 2px; }
}

/* 모바일 다크 — 작성 댓글 보기(.rtm-cmt)의 블루 포인트(--mc 94,168,255)를 작성 글 보기와 같은 퍼플(149,107,255)로 통일한다.
   제목 아이콘·건수 배지·외곽 테두리·카드 테두리·댓글 아이콘 배경이 모두 --mc 하나로 칠해지므로 값만 바꾼다. 라이트·PC·태블릿은 이 블록 밖. */
@media (max-width: 767px) {
	html:root:not([data-theme="light"]) .rtm-list.rtm-cmt { --mc: 149, 107, 255; }
}

/* 회원정보 페이지(.rtm) 위의 이메일 변경 인증 메일 발송 안내 — 로그인 화면용 큰 위 여백(56px)·500px 폭 대신 페이지 폭에 맞춘다. 다른 .rt-auth-notice 는 건드리지 않는다. */
.xm .rtm > .rt-auth-notice { max-width: none; margin: 0 0 14px; }

/* 이메일 변경 인증 안내 박스를 같은 화면의 카드(.rtm-card · 재확인 폼)와 같은 남보라 면 + 은은한 퍼플 테두리로 맞춘다. 색은 .rtm / .xm.rtm-set 의 토큰이라 라이트에서도 따라 바뀐다. 체크 아이콘은 초록 대신 퍼플. */
html:root .xm .rtm > .rt-auth-notice { border-color: rgba(var(--m-brand-rgb), .35); border-radius: 14px; background: linear-gradient(180deg, var(--m-card), var(--m-card-2) 220%); color: var(--m-text); }
html:root .xm.rtm-set .rt-auth-notice { border-color: rgba(var(--rs-rgb), .35); border-radius: 14px; background: var(--m-card); color: var(--m-text, var(--rt-text)); }
html:root:not([data-theme="light"]) .xm .rtm > .rt-auth-notice > svg, html:root:not([data-theme="light"]) .xm.rtm-set .rt-auth-notice > svg { stroke: #b79cff; }