/* ══════════════════════════════════════
   ArchiV — style.css
   담당자: CSS/디자인 담당
   ══════════════════════════════════════ */


:root {
 --primary: #0ea5e9;
 --primary-light: #e0f2fe;
 --primary-dark: #0369a1;
 --bg: #f8fafc;
 --card-bg: #fff;
 --text-main: #0f172a;
 --text-sub: #475569;
 --text-muted: #94a3b8;
 --border: #e2e8f0;
 --sky-border: #bae6fd;
 --sky-1: #e0f4ff;
 --sky-2: #bae6fd;
 --sky-3: #7dd3fc;
 --sky-4: #38bdf8;
 --sky-5: #0ea5e9;
 --sky-6: #0284c7;
 --sky-7: #0369a1;
 --mint: #34d399;
 --coral: #fb7185;
 --amber: #fbbf24;
 --radius: 16px;
 --radius-sm: 10px;
 --shadow: 0 4px 20px rgba(14,165,233,.08);
}

@keyframes scCardIn {
 from { opacity:0; transform:translateY(8px); }
 to { opacity:1; transform:translateY(0); }
}
@keyframes syncPulse {
 0%,100%{ opacity:1; transform:scale(1); }
 50%{ opacity:.4; transform:scale(.75); }
}
@keyframes scTabPulse {
 0% { box-shadow: 0 0 0 0 rgba(14,165,233,.6); background: var(--primary); color: #fff; }
 60% { box-shadow: 0 0 0 8px rgba(14,165,233,0); }
 100%{ box-shadow: 0 0 0 0 rgba(14,165,233,0); }
}
.sc-sync-pulse {
 animation: scTabPulse .7s ease-out forwards;
}

[data-theme="dark"] {
 --primary: #38bdf8;
 --primary-light: #0c2d3f;
 --primary-dark: #7dd3fc;
 --bg: #0f172a;
 --card-bg: #1e293b;
 --text-main: #f1f5f9;
 --text-sub: #94a3b8;
 --text-muted: #64748b;
 --border: #334155;
 --sky-border: #1e4a6e;
 --sky-1: #0c2233;
 --sky-2: #0c3050;
 --sky-3: #1e4a6e;
 --sky-4: #2a6591;
 --sky-5: #38bdf8;
 --sky-6: #7dd3fc;
 --sky-7: #bae6fd;
 --shadow: 0 4px 20px rgba(0,0,0,.3);
}
[data-theme="dark"] nav { background: rgba(15,23,42,.95); }
[data-theme="dark"] .gnb-clock-pill,
[data-theme="dark"] .gnb-icon-btn { background: #1e293b; }
[data-theme="dark"] .notif-panel,
[data-theme="dark"] .login-modal-box { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .notif-item:hover { background: #0c2233; }
[data-theme="dark"] .login-input { background: #0f172a; border-color: #334155; color: #f1f5f9; }
[data-theme="dark"] .section-card,
[data-theme="dark"] .re-card,
[data-theme="dark"] .welfare-card,
[data-theme="dark"] .stat-card { background: #1e293b; }
[data-theme="dark"] table.data tbody tr:nth-child(even),
[data-theme="dark"] table.salary tbody tr:nth-child(even) { background: #162032; }
[data-theme="dark"] table.data tbody td:first-child { background: inherit; }
[data-theme="dark"] table.salary tbody td:first-child { background: #1a2e42; }
[data-theme="dark"] .hero { background: linear-gradient(180deg, #0c2233 0%, var(--bg) 100%); }
[data-theme="dark"] .menu-btn { color: var(--text-main); }
[data-theme="dark"] .inner-tab-btn { background: #1e293b; color: var(--text-sub); }
[data-theme="dark"] .re-tag { background: #0c2233; }

* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; }
body {
 font-family: 'Noto Sans KR', sans-serif;
 background: var(--bg);
 color: var(--text-main);
 line-height: 1.6;
}

nav {
 background: rgba(255,255,255,.95);
 border-bottom: 1px solid var(--border);
 padding: 0 2rem;
 height: 64px;
 display: grid;
 grid-template-columns: 260px 1fr 260px;
 align-items: center;
 position: sticky;
 top: 0;
 z-index: 1000;
 backdrop-filter: blur(10px);
}
.gnb-center {
 display: flex;
 justify-content: center;
 align-items: center;
}
.gnb-right-col {
 display: flex;
 justify-content: flex-end;
 align-items: center;
}
.logo {
 font-family: 'Syne', sans-serif;
 font-size: 1.4rem;
 font-weight: 800;
 color: var(--primary-dark);
 display: flex;
 justify-content: center;
 align-items: center;
}
.logo span { color: var(--primary); }

.gnb-right {
 display: flex;
 align-items: center;
 gap: 10px;
}

.gnb-clock-pill {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 8px 16px;
 border-radius: 999px;
 background: white;
 border: 1px solid var(--border);
 font-size: .82rem;
 font-weight: 600;
 color: var(--text-sub);
 white-space: nowrap;
}
.gnb-clock-pill .live-dot {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: #10b981;
 flex-shrink: 0;
}
.gnb-clock-pill .weather-icon { font-size: 1rem; }
.gnb-clock-pill .clock-time { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.gnb-clock-pill .temp { color: var(--text-muted); font-weight: 500; }

.gnb-icon-btn {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 border: 1px solid var(--border);
 background: white;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1rem;
 cursor: pointer;
 transition: all .18s ease;
 color: var(--text-sub);
 text-decoration: none;
}
.gnb-icon-btn:hover {
 background: var(--primary-light);
 border-color: var(--sky-border);
 transform: translateY(-1px);
}

.gnb-avatar {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background: var(--border);
 color: var(--text-muted);
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 700;
 font-size: .9rem;
 cursor: pointer;
 flex-shrink: 0;
 border: 1px solid var(--border);
 transition: all .18s ease;
 position: relative;
 overflow: hidden;
}

.profile-modal-overlay {
 position: fixed; inset: 0;
 background: rgba(15,23,42,.45);
 backdrop-filter: blur(4px);
 z-index: 3000;
 display: flex; align-items: flex-start; justify-content: flex-end;
 padding-top: 70px; padding-right: 16px;
 opacity: 0; visibility: hidden; transition: all .22s ease;
}
.profile-modal-overlay.open { opacity: 1; visibility: visible; }
.profile-modal-box {
 background: var(--card-bg);
 border-radius: 22px;
 width: 340px;
 max-width: 95vw;
 box-shadow: 0 30px 70px rgba(0,0,0,.18);
 transform: translateY(-10px) scale(.97);
 transition: transform .22s ease;
 overflow: hidden;
 max-height: 88vh;
 overflow-y: auto;
}
.profile-modal-overlay.open .profile-modal-box { transform: translateY(0) scale(1); }

.pm-header {
 position: relative;
 padding: 36px 20px 20px;
 text-align: center;
 background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, #38bdf8 100%);
}
.pm-close {
 position: absolute; top: 12px; right: 12px;
 width: 28px; height: 28px; border-radius: 50%;
 border: none; background: rgba(255,255,255,.2); cursor: pointer;
 font-size: .85rem; color: white; display: flex; align-items: center; justify-content: center;
}
.pm-close:hover { background: rgba(255,255,255,.35); }
.pm-avatar-wrap {
 position: relative; display: inline-block; cursor: pointer; margin-bottom: 10px;
}
.pm-avatar {
 width: 76px; height: 76px; border-radius: 50%;
 background: rgba(255,255,255,.2);
 border: 3px solid rgba(255,255,255,.6);
 display: flex; align-items: center; justify-content: center;
 overflow: hidden; margin: 0 auto;
}
.pm-avatar-edit {
 position: absolute; bottom: 0; right: 0;
 width: 24px; height: 24px; border-radius: 50%;
 background: white; color: var(--primary-dark);
 font-size: .7rem; display: flex; align-items: center; justify-content: center;
 border: 2px solid var(--primary);
}
.pm-user-name {
 font-weight: 800; font-size: 1rem; color: white; margin-bottom: 3px;
 font-family: 'Outfit', sans-serif;
}
.pm-user-email { font-size: .75rem; color: rgba(255,255,255,.75); margin-bottom: 10px; }
.pm-rank-badge {
 display: inline-flex; align-items: center; gap: 5px;
 background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
 border-radius: 999px; padding: 4px 14px;
 font-size: .82rem; font-weight: 700; color: white;
}

.pm-current-rank-section { padding: 14px 20px 0; border-bottom: 1px solid var(--border); }
.pm-current-rank-card {
 display: flex; align-items: center; justify-content: space-between;
 margin-bottom: 10px;
}
.pm-current-rank-left { display: flex; align-items: center; gap: 10px; }
.pm-current-rank-icon { font-size: 1.8rem; line-height: 1; }
.pm-current-rank-name { font-size: 1rem; font-weight: 800; color: var(--text-main); font-family: 'Outfit', sans-serif; }
.pm-current-rank-sub { font-size: .7rem; color: var(--text-muted); margin-top: 1px; }
.pm-rank-toggle-btn {
 padding: 5px 11px; border-radius: 8px;
 border: 1.5px solid var(--border); background: var(--bg);
 color: var(--text-sub); font-size: .75rem; font-weight: 600;
 cursor: pointer; font-family: inherit; transition: all .15s;
 white-space: nowrap;
}
.pm-rank-toggle-btn:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-light); }
.pm-rank-toggle-btn.open { background: var(--primary-light); border-color: var(--sky-border); color: var(--primary-dark); }

.pm-level-track { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; margin-bottom: 5px; }
.pm-level-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), #38bdf8); transition: width .6s ease; }
.pm-level-hint { font-size: .72rem; color: var(--text-muted); text-align: right; }

.pm-rank-table-panel {
 border-bottom: 1px solid var(--border);
 animation: pmRankSlide .2s ease;
}
@keyframes pmRankSlide {
 from { opacity:0; transform:translateY(-6px); }
 to { opacity:1; transform:translateY(0); }
}
.pm-rank-table-points-row {
 display: flex; justify-content: space-between; align-items: center;
 padding: 10px 20px 8px; border-bottom: 1px solid var(--border);
 background: var(--sky-1);
}
.pm-rank-table-points-label { font-size: .78rem; font-weight: 700; color: var(--text-sub); }
.pm-rank-table-points-val { font-size: 1rem; font-weight: 800; color: var(--primary-dark); font-family: 'Outfit', sans-serif; }
.pm-rank-table { display: flex; flex-direction: column; gap: 0; padding: 8px 12px 10px; }
.pm-rank-row {
 display: flex; align-items: center; gap: 10px;
 padding: 7px 10px; border-radius: 8px;
 background: transparent; transition: background .12s;
}
.pm-rank-row:hover { background: var(--bg); }
.pm-rank-row.current { background: var(--primary-light); border: 1.5px solid var(--sky-border); }
.pm-rank-row-icon { font-size: 1.1rem; width: 22px; text-align: center; flex-shrink: 0; }
.pm-rank-row-info { flex: 1; }
.pm-rank-row-name { font-size: .8rem; font-weight: 700; color: var(--text-main); }
.pm-rank-row-range { font-size: .68rem; color: var(--text-muted); }
.pm-rank-row-check { font-size: .75rem; color: var(--primary); font-weight: 800; }
[data-theme="dark"] .pm-rank-table-points-row { background: #0c2233; }
[data-theme="dark"] .pm-rank-row.current { background: #0c2233; }

.pm-stats-row {
 display: grid; grid-template-columns: repeat(4, 1fr);
 border-bottom: 1px solid var(--border); text-align: center;
}
.pm-stat-item { padding: 14px 8px; }
.pm-stat-item + .pm-stat-item { border-left: 1px solid var(--border); }
.pm-stat-num { font-size: 1.15rem; font-weight: 800; color: var(--primary-dark); font-family: 'Outfit', sans-serif; }
.pm-stat-name { font-size: .7rem; color: var(--text-muted); margin-top: 2px; }

.pm-actions { padding: 14px 20px; }
.pm-logout-btn {
 width: 100%; height: 42px; border-radius: 10px;
 border: 1.5px solid var(--border); background: var(--bg);
 color: var(--text-sub); font-size: .85rem; font-weight: 600;
 cursor: pointer; font-family: inherit; transition: all .15s;
}
.pm-logout-btn:hover { border-color: var(--coral); color: #f43f5e; background: #fef2f2; }

.pm-edit-info-btn {
 width: 100%; height: 42px; border-radius: 10px;
 border: 1.5px solid var(--sky-border); background: var(--primary-light);
 color: var(--primary-dark); font-size: .85rem; font-weight: 600;
 cursor: pointer; font-family: inherit; transition: all .15s;
 margin-bottom: 8px;
}
.pm-edit-info-btn:hover { background: var(--sky-2); border-color: var(--sky-3); }

.pm-secret-section {
 padding: 12px 20px 14px;
 border-bottom: 1px solid var(--border);
 background: linear-gradient(135deg, rgba(109,40,217,.04) 0%, rgba(168,85,247,.06) 100%);
}
.pm-secret-row {
 display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
}
.pm-secret-label {
 display: flex; align-items: center; gap: 6px;
 font-size: .8rem; font-weight: 700; color: #7c3aed;
}
.pm-secret-label-dot {
 width: 7px; height: 7px; border-radius: 50%;
 background: #7c3aed; animation: secretPulse 2s infinite;
}
@keyframes secretPulse {
 0%,100%{ opacity:1; transform:scale(1); box-shadow:0 0 0 0 rgba(124,58,237,.5); }
 50%{ opacity:.6; transform:scale(1.2); box-shadow:0 0 0 5px rgba(124,58,237,0); }
}
.pm-secret-val {
 font-size: 1rem; font-weight: 800; color: #6d28d9; letter-spacing: .05em;
 font-family: 'JetBrains Mono', monospace;
 text-shadow: 0 0 12px rgba(109,40,217,.3);
}
.pm-secret-track {
 height: 6px; border-radius: 999px; overflow: hidden; margin-bottom: 5px;
 background: rgba(109,40,217,.12);
}
.pm-secret-fill {
 height: 100%; border-radius: 999px;
 background: linear-gradient(90deg, #7c3aed, #a855f7, #ec4899);
 background-size: 200% 100%;
 animation: secretShift 3s linear infinite;
 transition: width .8s ease;
}
@keyframes secretShift {
 0%{ background-position:0% 0%; }
 100%{ background-position:200% 0%; }
}
.pm-secret-hint { font-size: .7rem; color: #9333ea; text-align: right; font-style: italic; }
.pm-secret-title-unlock {
 display: flex; align-items: center; gap: 8px;
 padding: 8px 12px; border-radius: 10px; margin-top: 8px;
 background: rgba(109,40,217,.08); border: 1.5px dashed rgba(109,40,217,.3);
 font-size: .78rem; font-weight: 700; color: #7c3aed;
}
[data-theme="dark"] .pm-secret-section { background: rgba(109,40,217,.08); }
[data-theme="dark"] .pm-secret-track { background: rgba(124,58,237,.2); }
[data-theme="dark"] .pm-rank-row { background: #0f172a; }
[data-theme="dark"] .pm-rank-row.current { background: #0c2233; }
.gnb-avatar.logged-in {
 background: linear-gradient(135deg, var(--primary), var(--primary-dark));
 color: white;
 border-color: transparent;
}
.gnb-avatar:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(14,165,233,.2); }

.notif-wrap {
 position: relative;
}
.notif-badge {
 position: absolute;
 top: -3px; right: -3px;
 width: 16px; height: 16px;
 border-radius: 50%;
 background: var(--coral);
 color: white;
 font-size: .6rem;
 font-weight: 700;
 display: flex; align-items: center; justify-content: center;
 border: 2px solid white;
}
.notif-panel {
 position: absolute;
 top: calc(100% + 14px);
 right: 0;
 width: 320px;
 background: white;
 border: 1px solid var(--border);
 border-radius: 18px;
 box-shadow: 0 20px 50px rgba(0,0,0,.12);
 z-index: 999;
 overflow: hidden;
 opacity: 0;
 visibility: hidden;
 transform: translateY(8px);
 transition: all .22s ease;
}
.notif-panel.open {
 opacity: 1; visibility: visible; transform: translateY(0);
}
.notif-header {
 padding: 16px 18px 12px;
 border-bottom: 1px solid var(--border);
 display: flex; justify-content: space-between; align-items: center;
}
.notif-header strong { font-size: .9rem; color: var(--text-main); }
.notif-clear {
 font-size: .75rem; color: var(--primary); cursor: pointer;
 background: none; border: none; font-family: inherit; font-weight: 600;
}
.notif-item {
 padding: 13px 18px;
 border-bottom: 1px solid var(--border);
 cursor: pointer;
 transition: background .15s;
 display: flex; gap: 12px; align-items: flex-start;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--sky-1); }
.notif-dot-wrap { padding-top: 4px; flex-shrink: 0; }
.notif-unread { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.notif-read { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.notif-item-title { font-size: .82rem; font-weight: 600; color: var(--text-main); margin-bottom: 3px; }
.notif-item-desc { font-size: .76rem; color: var(--text-sub); line-height: 1.5; }
.notif-item-time { font-size: .7rem; color: var(--text-muted); margin-top: 4px; }
.notif-empty { padding: 28px; text-align: center; color: var(--text-muted); font-size: .85rem; }

.login-overlay {
 position: fixed; inset: 0;
 background: rgba(15,23,42,.5);
 backdrop-filter: blur(6px);
 z-index: 2000;
 display: flex; align-items: center; justify-content: center;
 opacity: 0; visibility: hidden; transition: all .25s ease;
}
.login-overlay.open { opacity: 1; visibility: visible; }
.login-modal-box {
 background: var(--card-bg);
 border-radius: 24px;
 padding: 36px 32px 28px;
 width: 400px;
 max-width: 92vw;
 box-shadow: 0 40px 80px rgba(0,0,0,.2);
 transform: translateY(20px) scale(.97);
 transition: transform .25s ease;
 position: relative;
}
.login-overlay.open .login-modal-box { transform: translateY(0) scale(1); }

.lm-tab-row {
 display: flex;
 background: var(--bg);
 border-radius: 12px;
 padding: 4px;
 margin-bottom: 24px;
 gap: 2px;
}
.lm-tab {
 flex: 1; padding: 9px 0;
 border: none; border-radius: 9px;
 font-family: 'Noto Sans KR', sans-serif;
 font-size: .88rem; font-weight: 600;
 cursor: pointer; transition: all .18s;
 background: transparent; color: var(--text-muted);
}
.lm-tab.active {
 background: var(--card-bg);
 color: var(--text-main);
 box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.login-label { font-size: .8rem; font-weight: 700; color: var(--text-sub); margin-bottom: 6px; display: block; }
.login-input {
 width: 100%; height: 46px;
 border: 1.5px solid var(--border); border-radius: 11px;
 padding: 0 14px; font-size: .88rem;
 background: var(--bg); outline: none;
 transition: all .18s;
 font-family: 'Noto Sans KR', sans-serif;
 color: var(--text-main);
 margin-bottom: 13px;
}
.login-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,165,233,.12); }

.login-btn {
 width: 100%; height: 48px;
 background: linear-gradient(135deg, var(--primary), var(--primary-dark));
 color: white; border: none; border-radius: 11px;
 font-size: .9rem; font-weight: 700;
 cursor: pointer; font-family: 'Noto Sans KR', sans-serif;
 transition: all .18s ease; margin-top: 2px;
 display: flex; align-items: center; justify-content: center; gap: 6px;
}
.login-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(14,165,233,.35); }

.login-divider {
 display: flex; align-items: center; gap: 10px;
 text-align: center; font-size: .75rem; color: var(--text-muted);
 margin: 16px 0;
}
.login-divider::before, .login-divider::after {
 content: ''; flex: 1; height: 1px; background: var(--border);
}

.lm-social-row { display: flex; gap: 8px; margin-bottom: 16px; }
.lm-social-btn {
 flex: 1; height: 42px; border: 1.5px solid var(--border);
 border-radius: 10px; background: var(--card-bg);
 font-family: 'Noto Sans KR', sans-serif; font-size: .82rem; font-weight: 600;
 color: var(--text-sub); cursor: pointer; transition: all .18s;
 display: flex; align-items: center; justify-content: center; gap: 7px;
}
.lm-social-btn:hover { border-color: var(--sky-border); background: var(--sky-1); color: var(--primary-dark); }

.lm-signup-hint {
 text-align: center; font-size: .77rem; color: var(--text-muted); margin-bottom: 14px;
}
.lm-signup-hint a { color: var(--primary); font-weight: 700; text-decoration: none; cursor: pointer; }
.lm-signup-hint a:hover { text-decoration: underline; }

.lm-demo-btn {
 width: 100%; height: 44px;
 background: var(--bg); border: 1.5px solid var(--border);
 border-radius: 11px; font-family: 'Noto Sans KR', sans-serif;
 font-size: .85rem; font-weight: 600; color: var(--text-sub);
 cursor: pointer; transition: all .18s;
 display: flex; align-items: center; justify-content: center; gap: 7px;
}
.lm-demo-btn:hover { border-color: var(--sky-border); background: var(--sky-1); color: var(--primary-dark); }

.login-close {
 position: absolute; top: 16px; right: 16px;
 width: 30px; height: 30px; border-radius: 50%;
 border: none; background: var(--border); cursor: pointer;
 font-size: .9rem; display: flex; align-items: center; justify-content: center;
 color: var(--text-sub); transition: all .15s;
}
.login-close:hover { background: var(--sky-2); color: var(--primary-dark); }

.edit-profile-overlay {
 position: fixed; inset: 0;
 background: rgba(15,23,42,.5);
 backdrop-filter: blur(6px);
 z-index: 3100;
 display: flex; align-items: center; justify-content: center;
 opacity: 0; visibility: hidden; transition: all .25s ease;
}
.edit-profile-overlay.open { opacity: 1; visibility: visible; }
.edit-profile-box {
 background: var(--card-bg);
 border-radius: 24px;
 width: 420px; max-width: 94vw;
 max-height: 90vh; overflow-y: auto;
 box-shadow: 0 40px 80px rgba(0,0,0,.22);
 transform: translateY(20px) scale(.97);
 transition: transform .25s ease;
 position: relative;
}
.edit-profile-overlay.open .edit-profile-box { transform: translateY(0) scale(1); }

.ep-header {
 display: flex; align-items: center; gap: 10px;
 padding: 22px 24px 18px;
 border-bottom: 1px solid var(--border);
}
.ep-back-btn {
 width: 30px; height: 30px; border-radius: 50%;
 border: 1.5px solid var(--border); background: var(--bg);
 cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center;
 color: var(--text-sub); transition: all .15s; flex-shrink: 0;
}
.ep-back-btn:hover { background: var(--primary-light); border-color: var(--sky-border); color: var(--primary-dark); }
.ep-title { font-size: 1rem; font-weight: 800; color: var(--text-main); font-family: 'Outfit', sans-serif; }

.ep-avatar-section {
 display: flex; flex-direction: column; align-items: center;
 padding: 28px 24px 20px;
 border-bottom: 1px solid var(--border);
}
.ep-avatar-wrap {
 position: relative; display: inline-block; cursor: pointer; margin-bottom: 8px;
}
.ep-avatar {
 width: 80px; height: 80px; border-radius: 50%;
 background: linear-gradient(135deg, var(--primary), var(--primary-dark));
 display: flex; align-items: center; justify-content: center;
 overflow: hidden; border: 3px solid var(--sky-border);
}
.ep-avatar-edit-badge {
 position: absolute; bottom: 2px; right: 2px;
 width: 26px; height: 26px; border-radius: 50%;
 background: white; border: 2px solid var(--sky-border);
 display: flex; align-items: center; justify-content: center;
 font-size: .72rem; color: var(--primary-dark);
 box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.ep-avatar-hint { font-size: .72rem; color: var(--text-muted); }

.ep-fields { padding: 20px 24px; }
.ep-field-group {
 background: var(--bg); border-radius: 14px;
 border: 1.5px solid var(--border);
 margin-bottom: 10px; overflow: hidden;
}
.ep-field-label {
 font-size: .72rem; font-weight: 700; color: var(--text-muted);
 padding: 12px 16px 2px; display: block; letter-spacing: .03em;
}
.ep-field-row {
 display: flex; align-items: center; gap: 8px;
 padding: 4px 16px 12px;
}
.ep-input {
 flex: 1; border: none; background: transparent;
 font-size: .92rem; font-family: 'Noto Sans KR', sans-serif;
 color: var(--text-main); outline: none; padding: 0;
 min-width: 0;
}
.ep-input::placeholder { color: var(--text-muted); }
.ep-input:disabled { color: var(--text-sub); cursor: default; }
.ep-confirm-btn {
 height: 32px; padding: 0 14px; border-radius: 8px;
 border: 1.5px solid var(--sky-border); background: var(--primary-light);
 color: var(--primary-dark); font-size: .78rem; font-weight: 700;
 cursor: pointer; font-family: inherit; white-space: nowrap;
 transition: all .15s; flex-shrink: 0;
}
.ep-confirm-btn:hover { background: var(--sky-2); }
.ep-field-hint {
 font-size: .72rem; color: var(--text-muted);
 padding: 0 16px 10px; line-height: 1.5;
}
.ep-field-error {
 font-size: .72rem; color: #f43f5e; font-weight: 600;
 padding: 0 16px 10px; display: none;
}
.ep-field-error.show { display: block; }

.ep-marketing-row {
 display: flex; align-items: center; justify-content: space-between;
 background: var(--bg); border-radius: 14px;
 border: 1.5px solid var(--border);
 padding: 14px 16px; margin-bottom: 10px;
}
.ep-marketing-left { display: flex; align-items: center; gap: 10px; }
.ep-marketing-check {
 width: 22px; height: 22px; border-radius: 50%;
 background: var(--primary); border: none;
 display: flex; align-items: center; justify-content: center;
 color: white; font-size: .75rem; flex-shrink: 0;
}
.ep-marketing-label { font-size: .88rem; font-weight: 600; color: var(--text-main); }
.ep-marketing-view {
 font-size: .78rem; color: var(--text-muted); text-decoration: underline;
 cursor: pointer; background: none; border: none; font-family: inherit;
 transition: color .15s;
}
.ep-marketing-view:hover { color: var(--primary); }

.ep-withdrawal-row {
 display: flex; justify-content: flex-end;
 padding: 4px 0 8px;
}
.ep-withdrawal-btn {
 font-size: .78rem; color: var(--text-muted); background: none; border: none;
 cursor: pointer; font-family: inherit; transition: color .15s;
 display: flex; align-items: center; gap: 3px;
}
.ep-withdrawal-btn:hover { color: #f43f5e; }

.ep-save-btn {
 width: 100%; height: 46px; border-radius: 11px;
 background: linear-gradient(135deg, var(--primary), var(--primary-dark));
 color: white; border: none; font-size: .9rem; font-weight: 700;
 cursor: pointer; font-family: inherit; transition: all .18s;
 margin-top: 4px;
}
.ep-save-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(14,165,233,.35); }
[data-theme="dark"] .ep-field-group { background: #0f172a; }
[data-theme="dark"] .ep-marketing-row { background: #0f172a; }
[data-theme="dark"] .edit-profile-box { background: #1e293b; border-color: #334155; }
.lm-error {
 font-size: .78rem; color: #f43f5e; font-weight: 600;
 margin: -8px 0 10px; display: none;
}
.lm-error.show { display: block; }

.ad-banner {
 border-radius: 12px;
 overflow: hidden;
 position: relative;
 font-family: 'Noto Sans KR', sans-serif;
}
.ad-label {
 position: absolute;
 top: 7px; right: 8px;
 font-size: 9px; font-weight: 600;
 color: var(--text-muted);
 background: var(--bg);
 border: 1px solid var(--border);
 border-radius: 4px;
 padding: 1px 5px;
 letter-spacing: .03em;
 opacity: .7;
}

.ad-sidebar {
 margin: 10px 4px 4px;
 background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
 border: 1.5px dashed var(--sky-border);
 padding: 14px 12px 12px;
 text-align: center;
 cursor: pointer;
 transition: all .18s;
}
.ad-sidebar:hover { border-color: var(--primary); background: linear-gradient(135deg,#e0f2fe,#bae6fd); }
.ad-sidebar-icon { font-size: 1.6rem; margin-bottom: 5px; }
.ad-sidebar-title { font-size: .78rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 3px; }
.ad-sidebar-desc { font-size: .68rem; color: var(--text-sub); line-height: 1.5; }
.ad-sidebar-cta { display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 99px; background: var(--primary); color: white; font-size: .7rem; font-weight: 700; }
[data-theme="dark"] .ad-sidebar { background: linear-gradient(135deg,#0c2233,#0c3050); border-color: var(--sky-border); }

/* ── 콘텐츠 배너 중앙 정렬 wrapper ── */
.ad-content-center {
 margin-left: calc(260px + 1.5rem);
 margin-right: calc(260px + 1.5rem);
}

.ad-content-banner {
 display: flex; align-items: center; gap: 12px;
 background: rgba(254,252,232,.55);
 border: 1px solid #fde68a;
 border-radius: 10px;
 padding: 10px 14px;
 cursor: pointer;
 transition: all .18s;
 position: relative;
}
.ad-content-banner:hover { border-color: #f59e0b; background: rgba(254,252,232,.85); box-shadow: 0 2px 10px rgba(251,191,36,.12); }
.ad-content-banner-icon { font-size: 1.4rem; flex-shrink: 0; opacity: .85; }
.ad-content-banner-body { flex: 1; min-width: 0; }
.ad-content-banner-title { font-size: .8rem; font-weight: 700; color: #92400e; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-content-banner-desc { font-size: .7rem; color: #a16207; line-height: 1.4; opacity: .9; }
.ad-content-banner-cta { flex-shrink: 0; padding: 5px 11px; border-radius: 7px; background: #f59e0b; color: white; font-size: .72rem; font-weight: 700; white-space: nowrap; }
[data-theme="dark"] .ad-content-banner { background: rgba(28,21,0,.4); border-color: #78350f; }
[data-theme="dark"] .ad-content-banner-title { color: #fcd34d; }
[data-theme="dark"] .ad-content-banner-desc { color: #fbbf24; }

.ad-footer-banner {
 /* 중앙 컬럼 너비에 맞춤: 전체너비 - 양쪽패딩(4rem) - 사이드바2개(520px) - 갭2개(3rem) */
 max-width: calc(100% - 4rem - 520px - 3rem);
 margin: 0 auto;
 padding: 10px 0 12px;
 display: flex; align-items: center; justify-content: space-between; gap: 14px;
 border-bottom: 1px solid #1e293b;
 flex-wrap: wrap;
}
.ad-footer-banner-left { display: flex; align-items: center; gap: 10px; }
.ad-footer-banner-icon { font-size: 1.2rem; flex-shrink: 0; opacity: .7; }
.ad-footer-banner-title { font-size: .78rem; font-weight: 600; color: #64748b; }
.ad-footer-banner-desc { font-size: .68rem; color: #334155; margin-top: 1px; opacity: .8; }
.ad-footer-banner-cta { padding: 5px 13px; border-radius: 7px; background: transparent; color: #4a7a9b; font-size: .72rem; font-weight: 600; border: 1px solid #2d4a6e; white-space: nowrap; cursor: pointer; transition: all .15s; flex-shrink: 0; }
.ad-footer-banner-cta:hover { background: #1e3a5f; color: #bae6fd; }
@media(max-width:860px){
 .ad-footer-banner { padding: 12px 1.5rem; }
 .ad-content-banner { flex-wrap: wrap; }
 .ad-content-banner-cta { width: 100%; text-align: center; }
}
.hero {
 background: linear-gradient(180deg, #e0f2fe 0%, var(--bg) 100%);
 padding: .9rem 2rem .8rem;
 text-align: center;
 border-bottom: 1px solid var(--sky-border);
}
.hero h1 {
 font-family: 'Syne', sans-serif;
 font-size: 1.35rem;
 color: var(--primary-dark);
 margin-bottom: .25rem;
 font-weight: 800;
 display: flex;
 justify-content: center;
 align-items: center;
 gap: .3rem;
}
.hero p { color: var(--text-sub); font-size: .82rem; }

/* 히어로 시험관 애니메이션 */
.hero-beaker-wrap {
 position: relative;
 display: inline-flex;
 align-items: center;
 line-height: 1;
}
.hero-beaker-bubbles {
 position: absolute;
 top: -10px;
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 gap: 3px;
 pointer-events: none;
}
.hero-b {
 width: 5px;
 height: 5px;
 border-radius: 50%;
 opacity: 0;
}
.hero-b1 { animation: hero-rise 2s 0s infinite, hero-bub-color 5s ease-in-out infinite; }
.hero-b2 { animation: hero-rise 2s .5s infinite, hero-bub-color 5s ease-in-out infinite; }
.hero-b3 { animation: hero-rise 2s 1s infinite, hero-bub-color 5s ease-in-out infinite; }
.hero-beaker {
 display: inline-block;
 animation: hero-float 2.4s ease-in-out infinite, hero-color 5s ease-in-out infinite;
}
@keyframes hero-float {
 0%, 100% { transform: translateY(0) scale(1); }
 50% { transform: translateY(-5px) scale(1.06); }
}
@keyframes hero-rise {
 0%   { opacity: 0; transform: translateY(0); }
 30%  { opacity: 1; }
 100% { opacity: 0; transform: translateY(-20px); }
}
@keyframes hero-color {
 0%, 100% { filter: hue-rotate(0deg); }
 50%       { filter: hue-rotate(150deg); }
}
@keyframes hero-bub-color {
 0%, 100% { background: #34d399; }
 50%       { background: #a855f7; }
}

.main-container {
 width: 100%;
 margin: 0 auto;
 padding: 1.2rem 2rem 2rem;
 display: grid;
 grid-template-columns: 260px 1fr 260px;
 gap: 1.5rem;
 min-height: calc(100vh - 120px);
 align-items: start;
}

.sidebar {
 background: var(--card-bg);
 border-radius: var(--radius);
 padding: 1rem .8rem;
 border: 1px solid var(--sky-border);
 height: fit-content;
 position: sticky;
 top: 72px;
}
.sidebar-title {
 display: none;
}

/* ── 우측 고정 사이드바 ── */
.right-sidebar {
 background: transparent;
 height: fit-content;
 position: sticky;
 top: 72px;
 min-width: 0;
 width: 100%;
 overflow: hidden;
}
.menu {
 display: flex;
 flex-direction: column;
 gap: 0;
}

.menu-group {
 margin-bottom: .5rem;
}
.menu-group:last-child {
 margin-bottom: 0;
}
.menu-group-label {
 display: flex;
 align-items: center;
 gap: .4rem;
 padding: .45rem .7rem .3rem;
 font-size: .7rem;
 font-weight: 700;
 letter-spacing: .05em;
 color: var(--text-muted);
 text-transform: uppercase;
 user-select: none;
 border-bottom: 1px solid var(--border);
 margin-bottom: .3rem;
}
.menu-group-label .group-icon {
 font-size: .75rem;
}
.menu-items {
 display: flex;
 flex-direction: column;
 gap: .15rem;
}

.menu-btn {
 padding: .6rem .9rem;
 border: 1px solid transparent;
 background: transparent;
 border-radius: var(--radius-sm);
 cursor: pointer;
 font-family: 'Noto Sans KR', sans-serif;
 font-size: .84rem;
 font-weight: 500;
 color: var(--text-main);
 transition: all .2s ease;
 text-align: left;
 transform: translateY(0);
 display: flex;
 align-items: center;
 gap: .5rem;
 line-height: 1.3;
}
.menu-btn .menu-icon {
 font-size: .95rem;
 flex-shrink: 0;
 width: 18px;
 text-align: center;
}
.menu-btn:hover {
 background: var(--primary-light);
 color: var(--primary-dark);
 border-color: var(--sky-border);
 transform: translateY(-1px);
 box-shadow: 0 3px 10px rgba(14,165,233,.1);
}
.menu-btn.active {
 background: var(--primary-light);
 color: var(--primary-dark);
 border-color: var(--sky-border);
 font-weight: 700;
 box-shadow: 0 2px 8px rgba(14,165,233,.1);
}

[data-theme="dark"] .menu-group-label {
 color: var(--text-muted);
 border-color: var(--border);
}

.content-area { display: none; }
.content-area.active { display: block; }

.section-card {
 background: var(--card-bg);
 border-radius: var(--radius);
 padding: 1.4rem;
 border: 1px solid var(--sky-border);
 box-shadow: var(--shadow);
 margin-bottom: 1.4rem;
 min-width: 0;
 overflow: hidden;
}
.section-card h2 {
 font-size: 1.4rem;
 color: var(--primary-dark);
 margin-bottom: .5rem;
 font-family: 'Outfit', sans-serif;
}
.section-card h3 {
 font-size: .95rem;
 color: var(--primary-dark);
 margin-bottom: .9rem;
 font-weight: 700;
 display: flex;
 align-items: center;
 gap: .4rem;
}
.section-subtitle {
 color: var(--text-sub);
 font-size: .85rem;
 margin-bottom: 1.2rem;
}

.chat-unified-card {
 border: 1px solid var(--sky-border);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 display: flex;
 flex-direction: column;
 margin-bottom: 1.4rem;
}
.chat-tab-header {
 padding: .6rem .8rem;
 background: var(--sky-1);
 border-bottom: 1px solid var(--sky-border);
}
.chat-tab-btns {
 display: flex;
 gap: .4rem;
}
.chat-tab-btn {
 flex: 1;
 padding: .4rem .5rem;
 border-radius: 8px 8px 0 0;
 border: 1px solid var(--sky-border);
 border-bottom: none;
 background: rgba(255,255,255,.6);
 color: var(--text-sub);
 font-family: 'Noto Sans KR', sans-serif;
 font-size: .78rem;
 font-weight: 600;
 cursor: pointer;
 transition: all .18s;
 opacity: .7;
}
.chat-tab-btn.active {
 background: var(--card-bg);
 color: var(--primary-dark);
 border-color: var(--sky-border);
 opacity: 1;
 font-weight: 700;
 box-shadow: 0 -2px 6px rgba(14,165,233,.1);
}
.chat-tab-btn:hover { opacity: 1; color: var(--primary); }

.chat-panel {
 display: none;
 flex-direction: column;
 height: 420px;
}
.chat-panel.active { display: flex; }

.chat-online-bar {
 padding: .45rem .6rem;
 font-size: .74rem;
 color: var(--text-muted);
 background: var(--bg);
 border-bottom: 1px solid var(--border);
 display: flex;
 align-items: center;
 gap: .4rem;
 justify-content: space-between;
 min-width: 0;
}
.chat-online-left {
 display: flex;
 align-items: center;
 gap: .4rem;
}
.online-dot {
 width: 7px; height: 7px;
 border-radius: 50%;
 background: #10b981;
 flex-shrink: 0;
 animation: pulse-online 2s infinite;
}
@keyframes pulse-online {
 0%,100% { opacity:1; }
 50% { opacity:.4; }
}

.chat-messages {
 flex: 1;
 overflow-y: auto;
 padding: .7rem .8rem;
 display: flex;
 flex-direction: column;
 gap: .55rem;
 background: var(--card-bg);
}
.chat-msg { font-size: .82rem; line-height: 1.5; max-width: 88%; word-break: break-word; }
.ai-bubble {
 background: var(--sky-1);
 border: 1px solid var(--sky-border);
 border-radius: 0 12px 12px 12px;
 padding: .55rem .8rem;
 color: var(--text-main);
 align-self: flex-start;
}
.user-bubble {
 background: var(--primary);
 color: white;
 border-radius: 12px 0 12px 12px;
 padding: .55rem .8rem;
 align-self: flex-end;
}
.system-bubble {
 background: var(--border);
 color: var(--text-muted);
 border-radius: 8px;
 padding: .4rem .7rem;
 font-size: .75rem;
 align-self: center;
 text-align: center;
 max-width: 100%;
}
.other-bubble {
 background: #f1f5f9;
 border-radius: 0 12px 12px 12px;
 padding: .5rem .75rem;
 align-self: flex-start;
 color: var(--text-main);
}
[data-theme="dark"] .other-bubble { background: #1a2d40; }
.nick {
 display: block;
 font-size: .7rem;
 font-weight: 700;
 color: var(--primary);
 margin-bottom: .15rem;
}
.ai-typing {
 background: var(--sky-1);
 border: 1px solid var(--sky-border);
 border-radius: 0 12px 12px 12px;
 padding: .55rem .8rem;
 align-self: flex-start;
 display: flex;
 gap: 4px;
 align-items: center;
}
.ai-typing span {
 width: 6px; height: 6px; border-radius: 50%;
 background: var(--primary); display: inline-block;
 animation: typing-dot 1.2s infinite;
}
.ai-typing span:nth-child(2) { animation-delay: .2s; }
.ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typing-dot {
 0%,80%,100% { transform: scale(.7); opacity:.5; }
 40% { transform: scale(1); opacity:1; }
}

.chat-online-status {
 display: flex;
 align-items: center;
 gap: .4rem;
}
.chat-nick-input {
 width: 80px;
 min-width: 0;
 padding: .3rem .5rem;
 border: 1px solid var(--border);
 border-radius: 6px;
 font-size: .74rem;
 font-family: 'Noto Sans KR', sans-serif;
 background: var(--bg);
 color: var(--text-main);
 outline: none;
 text-align: center;
}
.chat-nick-input:focus { border-color: var(--primary); }

.chat-input-row {
 display: flex;
 gap: .4rem;
 padding: .6rem .6rem;
 border-top: 1px solid var(--border);
 background: var(--card-bg);
 min-width: 0;
}
.chat-text-input {
 flex: 1;
 min-width: 0;
 padding: .5rem .6rem;
 border: 1px solid var(--border);
 border-radius: 8px;
 font-size: .8rem;
 font-family: 'Noto Sans KR', sans-serif;
 background: var(--bg);
 color: var(--text-main);
 outline: none;
 transition: border-color .18s;
}
.chat-text-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,165,233,.1); }
.chat-send-btn {
 flex-shrink: 0;
 padding: .5rem .7rem;
 background: var(--primary);
 color: white;
 border: none;
 border-radius: 8px;
 font-size: .78rem;
 font-weight: 700;
 cursor: pointer;
 font-family: 'Noto Sans KR', sans-serif;
 transition: all .18s;
 white-space: nowrap;
}
.chat-send-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }

[data-theme="dark"] .chat-tab-header { background: var(--sky-2); }
[data-theme="dark"] .ai-bubble { background: var(--sky-2); }
[data-theme="dark"] .chat-tab-btn.active { background: var(--card-bg); }
[data-theme="dark"] .chat-tab-btn { background: rgba(30,41,59,.6); }

.jph-calc-btn { border:1px solid var(--border); background:var(--card-bg); border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; color:var(--text-main); transition:all .1s; padding:0; font-family:inherit; width:100%; min-height:30px; }
.jph-calc-btn:hover { background:var(--primary-light); border-color:var(--primary); color:var(--primary-dark); }
.jph-calc-btn.op { color:var(--primary-dark); }
.jph-calc-btn.eq { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:white; border-color:var(--primary-dark); }
.jph-calc-btn.clr { color:#f43f5e; }
.jph-preset-btn { padding:5px 2px; border-radius:5px; font-size:11px; font-weight:600; background:var(--primary-light); color:var(--primary-dark); border:1px solid var(--sky-border); cursor:pointer; transition:all .15s; font-family:inherit; width:100%; }
.jph-preset-btn:hover { background:var(--primary); color:white; }
.dashboard-grid {
 display: block;
}
.home-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.home-table th {
 background: var(--sky-1);
 color: var(--sky-7);
 padding:10px; text-align:left; font-weight:700;
 border-bottom: 2px solid var(--sky-3);
}
.home-table td { padding:10px; border-bottom:1px solid var(--border); }
.home-table tr:hover { background: var(--primary-light); }
.badge {
 display:inline-block; background:var(--primary-light);
 color:var(--primary-dark); padding:3px 9px; border-radius:6px;
 font-size:.75rem; font-weight:600;
}
.platform-mini-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(100px,1fr));
 gap: .8rem; margin-top:.8rem;
}
.platform-mini-card {
 background:var(--bg); border:1px solid var(--border);
 padding:.8rem; border-radius:10px; text-align:center; transition:.2s;
}
.platform-mini-card:hover { border-color:var(--primary); transform:translateY(-2px); }
.platform-mini-card strong { display:block; font-size:.85rem; margin-bottom:.3rem; }
.platform-mini-card span { font-size:.75rem; color:var(--primary); font-weight:600; }
.live-item { padding:.8rem 0; border-bottom:1px solid var(--border); }
.live-item:last-child { border-bottom:none; }
.live-title { font-weight:600; font-size:.88rem; margin-bottom:.3rem; display:block; }
.live-meta { font-size:.75rem; color:var(--text-sub); display:flex; justify-content:space-between; }

.stats-row {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: .9rem;
 margin-bottom: 1.2rem;
}
.stat-card {
 background: white;
 border: 1.5px solid var(--sky-border);
 border-radius: var(--radius-sm);
 padding: .9rem .5rem;
 text-align: center;
 transition: all .2s ease;
 cursor: default;
 white-space: nowrap;
}
.stat-card:hover {
 transform: translateY(-3px);
 box-shadow: 0 8px 20px rgba(14,165,233,.13);
 border-color: var(--sky-3);
}
.stat-num {
 font-family: 'Outfit', sans-serif;
 font-size: 1.3rem;
 font-weight: 800;
 color: var(--sky-6);
}
.stat-label { font-size: .75rem; color: var(--text-sub); margin-top: .3rem; white-space: nowrap; }

.inner-tabs {
 display: flex;
 gap: .35rem;
 margin-bottom: 1.1rem;
 flex-wrap: wrap;
}

.inner-tab-btn {
 padding: .42rem 1rem;
 border-radius: 999px;
 border: 1.5px solid var(--border);
 background: var(--card-bg);
 color: var(--text-muted);
 font-family: 'Noto Sans KR', sans-serif;
 font-size: .81rem;
 font-weight: 600;
 cursor: pointer;
 transition: all .18s;
 white-space: nowrap;
}
.inner-tab-btn:hover { border-color: var(--sky-border); color: var(--primary-dark); background: var(--sky-1); }
.inner-tab-btn.active {
 background: var(--primary);
 border-color: var(--primary);
 color: white;
 font-weight: 700;
}
[data-theme="dark"] .inner-tab-btn { background: #1e293b; }
[data-theme="dark"] .inner-tab-btn.active { background: var(--primary); color: white; }
.inner-tab-pane { display:none; }
.inner-tab-pane.active { display:block; }

.year-bar { display:flex; gap:.3rem; margin-bottom:1rem; flex-wrap:wrap; }

.year-btn {
 padding: .3rem .85rem; border-radius: 999px;
 border: 1px solid var(--border); background: var(--card-bg);
 color: var(--text-muted); font-size: .78rem; font-weight: 600;
 cursor: pointer; transition: all .15s;
 font-family: 'Noto Sans KR', sans-serif;
}
.year-btn:hover { border-color: var(--sky-border); color: var(--primary-dark); background: var(--sky-1); }
.year-btn.active { background: var(--sky-1); border-color: var(--primary); color: var(--primary-dark); font-weight: 700; }
[data-theme="dark"] .year-btn { background: #1e293b; }
[data-theme="dark"] .year-btn.active { background: var(--sky-2); }
.rev-pane { display:none; }
.rev-pane.active { display:block; }

.re-sub-pane { display: none; }
.re-sub-pane.active { display: block; }

.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-sm); border:1px solid var(--border); }
table.data { width:100%; border-collapse:collapse; font-size:.82rem; }
table.data thead th {
 background: var(--sky-1);
 color: var(--sky-7);
 padding:10px 12px; text-align:center;
 font-weight:700; white-space:nowrap;
 border-bottom: 2px solid var(--sky-3);
 border-right: 1px solid var(--sky-2);
}
table.data thead th:first-child { text-align:left; border-right: 1px solid var(--sky-2); }
table.data tbody tr { transition:background .15s; }
table.data tbody tr:hover { background:var(--sky-1); }
table.data tbody tr:nth-child(even) { background:#f8fbff; }
table.data tbody tr:nth-child(even):hover { background:var(--sky-1); }
table.data tbody td {
 padding:9px 12px; border-bottom:1px solid #e0f2fe;
 text-align:center; color:var(--text-main); white-space:nowrap;
}
table.data tbody td:first-child { text-align:left; font-weight:500; }

.rank-badge {
 display:inline-flex; align-items:center; justify-content:center;
 width:26px; height:26px; border-radius:50%;
 font-size:11px; font-weight:700; margin-right:3px;
}
.rank-1 { background:#fef3c7; color:#d97706; }
.rank-2 { background:#f1f5f9; color:#64748b; }
.rank-3 { background:#fef2f2; color:#dc2626; }
.rank-other { background:var(--sky-1); color:var(--sky-6); }

.revenue-chip {
 display:inline-block;
 background: var(--sky-1);
 color:var(--sky-7); border-radius:6px; padding:2px 8px;
 font-size:.78rem; font-weight:600;
 border: 1px solid var(--sky-2);
}
.revenue-na { color:var(--text-muted); font-size:.78rem; }
.growth-up { color:#16a34a; font-weight:600; font-size:.78rem; }
.growth-down { color:#dc2626; font-weight:600; font-size:.78rem; }
.growth-na { color:var(--text-muted); font-size:.78rem; }

.salary-table-wrap {
 overflow-x: auto;
 overflow-y: visible;
 -webkit-overflow-scrolling: touch;
 border-radius: var(--radius-sm);
 border: 1px solid var(--border);
 max-width: 100%;
 width: 100%;
 display: block;
}
table.salary { width:100%; border-collapse:collapse; font-size:.78rem; table-layout:auto; }
table.salary thead th {
 background: var(--sky-1);
 color: var(--sky-7);
 padding:9px 10px; text-align:center; font-weight:700; white-space:nowrap;
 border-bottom: 2px solid var(--sky-3);
 border-right: 1px solid var(--sky-2);
}
table.salary thead th:first-child {
 background: var(--sky-2);
 color: var(--sky-7);
 text-align:left; position:sticky; left:0; z-index:4;
 min-width:150px; border-right:2px solid var(--sky-3);
}
table.salary thead th.accent {
 background: var(--sky-2);
 color: var(--primary-dark);
}
table.salary tbody tr:hover { background:var(--sky-1); }
table.salary tbody tr:nth-child(even) { background:#f8fbff; }
table.salary tbody td {
 padding:8px 10px; border-bottom:1px solid #e0f2fe;
 text-align:center; white-space:nowrap; font-size:.78rem;
}
table.salary tbody td:first-child {
 text-align:left; font-weight:600; position:sticky; left:0; z-index:3;
 background:#f0f9ff; border-right:2px solid var(--sky-3);
 min-width:150px; max-width:200px; white-space:normal; word-break:keep-all;
}
table.salary tbody tr:nth-child(even) td:first-child { background:#e8f4fc; }
table.salary tbody tr:hover td:first-child { background:var(--sky-2); }
.salary-highlight {
 background: var(--sky-2);
 color: var(--sky-7); font-weight:700; border-radius:5px;
 padding:2px 6px; display:inline-block;
}
.salary-na { color:var(--text-muted); }
.salary-divider td {
 background: var(--sky-1) !important;
 color:var(--sky-7); font-size:.75rem; font-weight:700;
 padding:6px 12px !important;
 border-top: 1.5px solid var(--sky-3) !important;
 border-bottom:2px solid var(--sky-3) !important;
 text-align:left !important;
}
.salary-divider td:first-child {
 background: var(--sky-2) !important;
 border-right:2px solid var(--sky-3) !important;
}
.company-note { font-size:.7rem; color:var(--text-sub); font-weight:400; display:block; margin-top:2px; }

.sml-meta {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 1.2rem;
}
.sml-meta span {
 background: var(--sky-1);
 border: 1px solid var(--sky-border);
 border-radius: 999px;
 padding: 4px 12px;
 font-size: .78rem;
 color: var(--text-sub);
 font-weight: 500;
}

.sml-region {
 margin-bottom: 1.6rem;
 border: 1.5px solid var(--sky-border);
 border-radius: var(--radius);
 overflow: hidden;
}
.sml-region-hd {
 background: linear-gradient(90deg, var(--sky-2), var(--sky-1));
 color: var(--sky-7);
 font-weight: 700;
 font-size: .95rem;
 padding: 10px 16px;
 border-bottom: 1.5px solid var(--sky-border);
 letter-spacing: .01em;
}

.sml-year-block {
 border-bottom: 1px solid var(--sky-border);
 padding: 10px 14px;
}
.sml-year-block:last-child { border-bottom: none; }

.sml-year-label {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 8px;
 flex-wrap: wrap;
}
.sml-year-badge {
 background: var(--sky-5);
 color: white;
 font-size: .75rem;
 font-weight: 700;
 padding: 3px 10px;
 border-radius: 999px;
 letter-spacing: .03em;
}
.sml-band-pill {
 background: var(--sky-1);
 border: 1px solid var(--sky-border);
 color: var(--sky-6);
 font-size: .74rem;
 font-weight: 600;
 padding: 2px 10px;
 border-radius: 999px;
}

.sml-cards {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}
.sml-size-group {
 background: var(--bg);
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 padding: 8px 12px;
 min-width: 130px;
 flex: 1 1 130px;
 max-width: 220px;
}
.sml-size-tag {
 font-size: .72rem;
 font-weight: 700;
 color: var(--sky-6);
 background: var(--sky-1);
 border-radius: 5px;
 padding: 2px 7px;
 display: inline-block;
 margin-bottom: 7px;
}
.sml-row {
 display: flex;
 align-items: baseline;
 gap: 6px;
 padding: 2px 0;
 border-bottom: 1px dashed var(--border);
}
.sml-row:last-child { border-bottom: none; }
.sml-sal {
 font-family: 'Outfit', sans-serif;
 font-size: .95rem;
 font-weight: 700;
 color: var(--primary-dark);
 min-width: 48px;
}
.sml-note {
 font-size: .72rem;
 color: var(--text-muted);
}

.sml-other-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 0;
}
.sml-other-card {
 border-right: 1px solid var(--sky-border);
 border-bottom: 1px solid var(--sky-border);
 padding: 12px 16px;
}
.sml-other-card:nth-child(2n) { border-right: none; }
.sml-other-card:nth-last-child(-n+2) { border-bottom: none; }
.sml-other-region {
 font-size: .82rem;
 font-weight: 700;
 color: var(--sky-6);
 margin-bottom: 8px;
}
table.sml-simple-tbl {
 width: 100%;
 border-collapse: collapse;
 font-size: .76rem;
 table-layout: fixed;
}
table.sml-simple-tbl th,
table.sml-simple-tbl td {
 width: 25%;
 padding: 5px 10px;
 border-bottom: 1px solid var(--border);
 white-space: nowrap;
 vertical-align: middle;
 overflow: hidden;
 text-overflow: ellipsis;
}
table.sml-simple-tbl th {
 background: var(--sky-1);
 color: var(--sky-7);
 padding: 5px 10px;
 text-align: left;
 font-weight: 700;
 border-bottom: 1.5px solid var(--sky-3);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

table.sml-simple-tbl tr:last-child td { border-bottom: none; }
table.sml-simple-tbl .sml-sal {
 font-size: .82rem;
 font-weight: 700;
 color: var(--primary-dark);
}
table.sml-simple-tbl .sml-note {
 font-size: .7rem;
 color: var(--text-muted);
}

.sml-footnote {
 font-size: .74rem;
 color: var(--text-muted);
 padding: .5rem .3rem .2rem;
 border-top: 1px dashed var(--border);
 margin-top: .4rem;
}

[data-theme="dark"] .sml-size-group { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .sml-other-card { border-color: #334155; }
[data-theme="dark"] table.sml-simple-tbl th { background: #0c2233; }
[data-theme="dark"] table.sml-simple-tbl td { border-color: #334155; }

.welfare-grid {
 display:grid;
 grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
 gap:1rem;
}
.welfare-card {
 background:white; border:1.5px solid var(--sky-border);
 border-radius:var(--radius-sm); padding:1rem;
 transition:box-shadow .2s;
}
.welfare-card:hover { box-shadow:0 4px 16px rgba(14,165,233,.12); }
.welfare-name { font-size:.88rem; font-weight:700; color:var(--sky-6); margin-bottom:.6rem; }
.welfare-tag {
 display:inline-block; background:var(--sky-1); color:var(--sky-7);
 border-radius:5px; padding:2px 6px; font-size:.68rem; margin:2px 2px 2px 0;
 white-space:nowrap;
}

/* ── 건설사 연봉 테이블 ── */
.constr-table-wrap { margin-top: 1rem; }
.constr-table { width: 100%; border-collapse: collapse; }
.constr-divider td {
 background: var(--sky-1); color: var(--sky-7);
 font-size: .75rem; font-weight: 700; letter-spacing: .06em;
 padding: 6px 12px; border-bottom: 1px solid var(--sky-border);
}
.constr-row { border-bottom: 1px solid var(--border); transition: background .12s; }
.constr-row:hover { background: var(--primary-light); }
.constr-name-cell {
 padding: 10px 12px; font-size: .85rem; vertical-align: middle;
 border-right: 1px solid var(--border);
}
.constr-name-cell strong { display: block; margin-bottom: 4px; }
.constr-tier-badge {
 display: inline-block; font-size: .65rem; font-weight: 700;
 padding: 1px 6px; border-radius: 99px; border: 1px solid; letter-spacing: .04em;
}
.constr-label { padding: 10px 12px; font-size: .82rem; color: var(--text-sub); }
.constr-amount { padding: 10px 12px; text-align: center; }
.constr-sal { font-size: .95rem; font-weight: 700; color: var(--text-main); }
.constr-gross { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
.constr-type-badge {
 display: inline-block; font-size: .68rem; font-weight: 700;
 padding: 2px 7px; border-radius: 99px; border: 1px solid; letter-spacing: .03em;
}
.constr-note { padding: 10px 12px; font-size: .78rem; color: var(--text-sub); }
.constr-source {
 margin-top: 1rem; padding: 10px 14px;
 background: var(--sky-1); border-radius: 8px; border: 1px solid var(--sky-border);
 font-size: .75rem; color: var(--text-sub); line-height: 1.7;
}
[data-theme="dark"] .constr-divider td { background: #0c2233; }
[data-theme="dark"] .constr-source { background: #0c1a2e; }

.platform-items-grid {
 display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
 gap:1rem; margin-top:.8rem;
}
.platform-item {
 background:white; border:1px solid var(--sky-border);
 border-radius:var(--radius-sm); padding:1rem; text-align:center; transition:all .2s;
}
.platform-item:hover { border-color:var(--primary); transform:translateY(-3px); box-shadow:0 6px 14px rgba(14,165,233,.12); }
.rank-num { font-size:.78rem; color:var(--primary); font-weight:700; margin-bottom:.4rem; }
.platform-name { font-size:.95rem; font-weight:700; color:var(--text-main); margin-bottom:.4rem; }
.platform-val { background:var(--primary-light); color:var(--primary-dark); padding:5px 9px; border-radius:6px; font-size:.76rem; font-weight:600; display:inline-block; }

.source-box {
 background:var(--sky-1); border:1px solid var(--sky-border);
 border-radius:var(--radius-sm); margin-top:1rem;
 overflow:hidden;
}
.source-box summary {
 padding:.7rem 1rem; font-size:.82rem; font-weight:600;
 color:var(--sky-6); cursor:pointer; list-style:none;
 display:flex; align-items:center; gap:.4rem;
}
.source-box summary::-webkit-details-marker { display:none; }
.source-box summary::after { content:'▾'; margin-left:auto; font-size:.85rem; transition:transform .2s; }
.source-box[open] summary::after { transform:rotate(180deg); }
.source-box summary:hover { background:var(--sky-2); }
.source-content {
 padding:.7rem 1rem 1rem; font-size:.78rem; color:var(--text-sub);
 line-height:1.8; border-top:1px solid var(--sky-border);
}

.notice {
 background:linear-gradient(135deg, #fff7ed, #fef3c7);
 border:1px solid #fde68a; border-radius:var(--radius-sm);
 padding:.9rem 1rem; margin-bottom:1rem;
 font-size:.78rem; color:#92400e; line-height:1.7;
}
.notice strong { color:#b45309; }

.re-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 gap: 20px;
 margin-top: 1.2rem;
}
.re-card {
 position: relative;
 background: rgba(255,255,255,.85);
 border: 1px solid var(--sky-border);
 border-radius: 20px;
 padding: 22px 22px 20px;
 transition: all .25s ease;
 box-shadow: 0 6px 20px rgba(14,165,233,.08);
 display: flex;
 flex-direction: column;
}
.re-card:hover {
 transform: translateY(-6px);
 box-shadow: 0 16px 36px rgba(14,165,233,.18);
 border-color: var(--sky-3);
}
.re-rank {
 position: absolute;
 top: 16px;
 right: 16px;
 width: 28px;
 height: 28px;
 border-radius: 8px;
 background: var(--sky-1);
 color: var(--sky-6);
 font-weight: 700;
 font-size: .78rem;
 display: flex;
 align-items: center;
 justify-content: center;
 border: 1.5px solid var(--sky-2);
 box-shadow: none;
}
.re-name {
 font-size: 1.15rem;
 font-weight: 800;
 color: var(--text-main);
 margin-bottom: 8px;
 padding-right: 36px;
}
.re-value {
 display: inline-block;
 background: var(--primary-light);
 color: var(--primary-dark);
 padding: 6px 12px;
 border-radius: 999px;
 font-size: .75rem;
 font-weight: 700;
 margin-bottom: 14px;
}
.re-desc {
 font-size: .83rem;
 line-height: 1.65;
 color: var(--text-sub);
 margin-bottom: 14px;
 flex: 1;
}
.re-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 7px;
 margin-bottom: 16px;
}
.re-tag {
 background: white;
 color: var(--primary-dark);
 border-radius: 999px;
 padding: 5px 11px;
 font-size: .72rem;
 font-weight: 600;
 border: 1px solid var(--sky-border);
}
.re-link {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 text-decoration: none;
 background: var(--sky-1);
 color: var(--sky-6);
 font-weight: 700;
 font-size: .82rem;
 padding: 12px;
 border-radius: 14px;
 transition: all .22s ease;
 border: 1.5px solid var(--sky-2);
 margin-top: auto;
}
.re-link:hover {
 background: var(--sky-2);
 border-color: var(--sky-3);
 color: var(--sky-7);
 transform: translateY(-1px);
 box-shadow: 0 4px 12px rgba(14,165,233,.15);
}

.content { min-width: 0; }
.empty-state { text-align:center; padding:3rem 2rem; color:var(--text-sub); }
.empty-icon { font-size:3rem; margin-bottom:.8rem; }

.board-toolbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 1.1rem;
 flex-wrap: wrap;
 gap: .6rem;
}
.board-search-wrap {
 display: flex;
 align-items: center;
 gap: .5rem;
 flex: 1;
 min-width: 180px;
}
.board-search {
 flex: 1;
 height: 34px;
 border: 1px solid var(--border);
 border-radius: 999px;
 padding: 0 14px;
 font-size: .79rem;
 font-family: 'Noto Sans KR', sans-serif;
 background: var(--bg);
 color: var(--text-main);
 outline: none;
 transition: border-color .15s;
}
.board-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,165,233,.08); }

.board-write-btn {
 display: flex;
 align-items: center;
 gap: .4rem;
 padding: 0 16px;
 height: 34px;
 border-radius: 999px;
 border: none;
 background: var(--primary);
 color: white;
 font-size: .79rem;
 font-weight: 700;
 font-family: 'Noto Sans KR', sans-serif;
 cursor: pointer;
 transition: all .18s ease;
 white-space: nowrap;
 flex-shrink: 0;
}
.board-write-btn:hover { background: var(--primary-dark); box-shadow: 0 4px 14px rgba(14,165,233,.28); }

.post-list { display: flex; flex-direction: column; gap: 0; }
.post-item {
 display: grid;
 grid-template-columns: 1fr auto;
 gap: .4rem 1rem;
 padding: 13px 4px;
 border-bottom: 1px solid var(--border);
 cursor: pointer;
 transition: background .15s;
 border-radius: 8px;
}
.post-item:last-child { border-bottom: none; }
.post-item:hover { background: var(--sky-1); padding-left: 10px; padding-right: 10px; margin: 0 -6px; }
.post-tag {
 display: inline-block;
 padding: 2px 8px;
 border-radius: 6px;
 font-size: .68rem;
 font-weight: 700;
 background: var(--sky-1);
 color: var(--sky-6);
 border: 1px solid var(--sky-2);
 margin-right: 6px;
 vertical-align: middle;
 white-space: nowrap;
}
.post-title {
 font-size: .88rem;
 font-weight: 600;
 color: var(--text-main);
 vertical-align: middle;
}
.post-title.anonymous { color: var(--text-sub); }
.post-meta {
 font-size: .72rem;
 color: var(--text-muted);
 margin-top: 3px;
 display: flex;
 gap: .7rem;
}
.post-stats {
 display: flex;
 align-items: center;
 gap: .5rem;
 font-size: .72rem;
 color: var(--text-muted);
 white-space: nowrap;
 align-self: center;
}
.post-stat { display: flex; align-items: center; gap: 2px; }
.post-hot { color: var(--coral); font-weight: 700; }

.board-pagination {
 display: flex;
 justify-content: center;
 gap: .3rem;
 margin-top: 1rem;
 flex-wrap: wrap;
}
.page-btn {
 width: 32px; height: 32px;
 border-radius: 8px;
 border: 1.5px solid var(--sky-border);
 background: white;
 color: var(--text-sub);
 font-size: .8rem;
 font-weight: 600;
 cursor: pointer;
 font-family: 'Noto Sans KR', sans-serif;
 transition: all .15s;
 display: flex; align-items: center; justify-content: center;
}
.page-btn:hover, .page-btn.active {
 background: var(--sky-2);
 border-color: var(--sky-4);
 color: var(--sky-7);
}
.board-empty {
 text-align: center;
 padding: 2.5rem 1rem;
 color: var(--text-muted);
 font-size: .85rem;
}
.board-empty-icon { font-size: 2.2rem; margin-bottom: .5rem; }

.post-view-header {
 border-bottom: 1.5px solid var(--sky-border);
 padding-bottom: 1rem;
 margin-bottom: 1rem;
}
.post-view-title {
 font-size: 1.15rem;
 font-weight: 700;
 color: var(--text-main);
 margin-bottom: .5rem;
 line-height: 1.4;
}
.post-view-meta {
 font-size: .78rem;
 color: var(--text-muted);
 display: flex;
 gap: 1rem;
 flex-wrap: wrap;
}
.post-view-body {
 font-size: .9rem;
 line-height: 1.8;
 color: var(--text-main);
 white-space: pre-wrap;
 min-height: 120px;
}
.post-view-actions {
 display: flex;
 gap: .5rem;
 margin-top: 1.2rem;
 padding-top: 1rem;
 border-top: 1px solid var(--border);
}

.post-action-btn {
 display: flex; align-items: center; gap: 4px;
 padding: 5px 14px; border-radius: 999px;
 border: 1px solid var(--border);
 background: var(--card-bg); color: var(--text-muted);
 font-size: .77rem; font-weight: 600;
 cursor: pointer; font-family: 'Noto Sans KR', sans-serif;
 transition: all .15s;
}
.post-action-btn:hover { background: var(--sky-1); border-color: var(--sky-border); color: var(--primary-dark); }
.post-action-btn.liked { background: var(--sky-1); border-color: var(--sky-border); color: var(--coral); }
.post-back-btn {
 display: inline-flex; align-items: center; gap: 4px;
 padding: 5px 12px; border-radius: 999px;
 border: 1px solid var(--border);
 background: var(--card-bg); color: var(--text-muted);
 font-size: .77rem; font-weight: 600;
 cursor: pointer; font-family: 'Noto Sans KR', sans-serif;
 transition: all .15s;
 margin-bottom: 1rem;
}
.post-back-btn:hover { background: var(--bg); border-color: var(--sky-border); color: var(--text-sub); }

.post-breadcrumb {
 display: flex;
 align-items: center;
 gap: 6px;
 font-size: 12px;
 color: var(--text-muted);
 margin-bottom: 8px;
}
.post-breadcrumb a {
 color: var(--primary);
 text-decoration: none;
 font-weight: 600;
 transition: opacity .15s;
}
.post-breadcrumb a:hover { opacity: .75; text-decoration: underline; }
.post-breadcrumb span { color: var(--text-muted); }

.comment-section { margin-top: 1.5rem; }
.comment-title { font-size: .88rem; font-weight: 700; color: var(--text-sub); margin-bottom: .8rem; }
.comment-list { display: flex; flex-direction: column; gap: 0; }
.comment-item {
 padding: 10px 0;
 border-bottom: 1px solid var(--border);
 font-size: .83rem;
}
.comment-item:last-child { border-bottom: none; }
.comment-author { font-weight: 700; color: var(--sky-6); margin-right: 8px; font-size: .78rem; }
.comment-time { color: var(--text-muted); font-size: .72rem; }
.comment-body { margin-top: 3px; color: var(--text-main); line-height: 1.6; }
.comment-input-wrap {
 display: flex;
 gap: .5rem;
 margin-top: .8rem;
}
.comment-input {
 flex: 1;
 height: 38px;
 border: 1.5px solid var(--sky-border);
 border-radius: 10px;
 padding: 0 12px;
 font-size: .83rem;
 font-family: 'Noto Sans KR', sans-serif;
 background: var(--bg);
 color: var(--text-main);
 outline: none;
 transition: border-color .18s;
}
.comment-input:focus { border-color: var(--primary); }
.comment-submit {
 padding: 0 16px; height: 38px;
 border-radius: 10px; border: none;
 background: var(--primary); color: white;
 font-size: .82rem; font-weight: 700;
 font-family: 'Noto Sans KR', sans-serif;
 cursor: pointer; transition: all .15s;
}
.comment-submit:hover { background: var(--primary-dark); }

.write-overlay {
 position: fixed; inset: 0;
 background: rgba(15,23,42,.45);
 backdrop-filter: blur(4px);
 z-index: 3000;
 display: flex; align-items: center; justify-content: center;
 opacity: 0; visibility: hidden; transition: all .22s ease;
}
.write-overlay.open { opacity: 1; visibility: visible; }
.write-modal {
 background: var(--card-bg);
 border-radius: 24px;
 padding: 32px 32px 28px;
 width: 640px;
 max-width: 95vw;
 max-height: 90vh;
 overflow-y: auto;
 box-shadow: 0 30px 60px rgba(0,0,0,.18);
 transform: translateY(20px);
 transition: transform .22s ease;
 position: relative;
}
.write-overlay.open .write-modal { transform: translateY(0); }
.write-modal-title {
 font-size: 1.05rem;
 font-weight: 700;
 color: var(--primary-dark);
 margin-bottom: 1.2rem;
 display: flex; align-items: center; gap: .5rem;
}
.write-close {
 position: absolute; top: 18px; right: 18px;
 width: 32px; height: 32px; border-radius: 50%;
 border: 1px solid var(--border); background: var(--bg);
 cursor: pointer; font-size: 1rem;
 display: flex; align-items: center; justify-content: center;
 color: var(--text-sub); transition: all .15s;
}
.write-close:hover { background: var(--sky-1); border-color: var(--sky-border); }
.write-field { margin-bottom: 1rem; }
.write-label {
 display: block;
 font-size: .78rem; font-weight: 700;
 color: var(--text-sub); margin-bottom: 5px;
}
.write-select, .write-input, .write-textarea {
 width: 100%;
 border: 1.5px solid var(--sky-border);
 border-radius: 10px;
 padding: 10px 14px;
 font-size: .87rem;
 font-family: 'Noto Sans KR', sans-serif;
 background: var(--bg);
 color: var(--text-main);
 outline: none;
 transition: border-color .18s, box-shadow .18s;
}
.write-select:focus, .write-input:focus, .write-textarea:focus {
 border-color: var(--primary);
 box-shadow: 0 0 0 3px rgba(14,165,233,.1);
}
.write-textarea {
 height: 180px;
 resize: vertical;
 line-height: 1.7;
}
.write-footer {
 display: flex;
 justify-content: flex-end;
 gap: .6rem;
 margin-top: 1.2rem;
}
.write-cancel {
 padding: 0 20px; height: 40px;
 border-radius: 10px;
 border: 1.5px solid var(--border);
 background: white; color: var(--text-sub);
 font-size: .85rem; font-weight: 600;
 font-family: 'Noto Sans KR', sans-serif;
 cursor: pointer; transition: all .15s;
}
.write-cancel:hover { background: var(--bg); }
.write-submit {
 padding: 0 24px; height: 40px;
 border-radius: 10px; border: none;
 background: linear-gradient(135deg, var(--primary), var(--primary-dark));
 color: white; font-size: .85rem; font-weight: 700;
 font-family: 'Noto Sans KR', sans-serif;
 cursor: pointer; transition: all .18s;
}
.write-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(14,165,233,.3); }
.write-anon-row {
 display: flex; align-items: center; gap: 8px;
 font-size: .8rem; color: var(--text-sub);
 margin-bottom: 1rem;
}
.write-anon-row input[type="checkbox"] { accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer; }

[data-theme="dark"] .write-modal { background: #1e293b; }
[data-theme="dark"] .write-select,
[data-theme="dark"] .write-input,
[data-theme="dark"] .write-textarea { background: #0f172a; border-color: #334155; color: #f1f5f9; }
[data-theme="dark"] .board-search { background: #0f172a; border-color: #334155; color: #f1f5f9; }
[data-theme="dark"] .post-item:hover { background: #0c2233; }
[data-theme="dark"] .post-action-btn,
[data-theme="dark"] .page-btn,
[data-theme="dark"] .write-cancel { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .comment-input { background: #0f172a; border-color: #334155; color: #f1f5f9; }

.login-gate-overlay {
 position: fixed; inset: 0;
 background: rgba(15,23,42,.6);
 backdrop-filter: blur(8px);
 z-index: 4000;
 display: flex; align-items: center; justify-content: center;
 opacity: 0; visibility: hidden; transition: all .3s ease;
}
.login-gate-overlay.open { opacity: 1; visibility: visible; }
.login-gate-box {
 background: var(--card-bg);
 border-radius: 28px;
 padding: 44px 40px 36px;
 width: 420px;
 max-width: 92vw;
 box-shadow: 0 50px 100px rgba(0,0,0,.25), 0 0 0 1px rgba(14,165,233,.15);
 transform: translateY(30px) scale(.96);
 transition: transform .3s cubic-bezier(.34,1.56,.64,1);
 text-align: center;
 position: relative;
}
.login-gate-overlay.open .login-gate-box { transform: translateY(0) scale(1); }
.login-gate-icon {
 width: 72px; height: 72px;
 border-radius: 20px;
 background: linear-gradient(135deg, var(--sky-1), var(--sky-2));
 border: 2px solid var(--sky-border);
 display: flex; align-items: center; justify-content: center;
 font-size: 2rem;
 margin: 0 auto 20px;
}
.login-gate-title {
 font-family: 'Outfit', sans-serif;
 font-size: 1.3rem; font-weight: 800;
 color: var(--text-main);
 margin-bottom: 10px;
 letter-spacing: -.3px;
}
.login-gate-desc {
 font-size: .88rem; color: var(--text-sub);
 line-height: 1.7; margin-bottom: 28px;
}
.login-gate-desc strong { color: var(--primary-dark); }
.login-gate-benefits {
 display: flex; flex-direction: column; gap: 8px;
 margin-bottom: 24px; text-align: left;
}
.login-gate-benefit-item {
 display: flex; align-items: center; gap: 10px;
 padding: 10px 14px;
 background: var(--sky-1);
 border: 1px solid var(--sky-border);
 border-radius: 10px;
 font-size: .82rem; color: var(--text-main);
 font-weight: 500;
}
.login-gate-benefit-item .benefit-icon {
 font-size: 1rem; flex-shrink: 0;
}
.login-gate-btn-primary {
 width: 100%; height: 50px;
 background: linear-gradient(135deg, var(--primary), var(--primary-dark));
 color: white; border: none; border-radius: 13px;
 font-size: .95rem; font-weight: 700;
 cursor: pointer; font-family: 'Noto Sans KR', sans-serif;
 transition: all .2s; margin-bottom: 10px;
 display: flex; align-items: center; justify-content: center; gap: 8px;
}
.login-gate-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(14,165,233,.4); }
.login-gate-btn-secondary {
 width: 100%; height: 44px;
 background: var(--bg); border: 1.5px solid var(--border);
 border-radius: 12px; font-size: .85rem; font-weight: 600;
 color: var(--text-sub); cursor: pointer;
 font-family: 'Noto Sans KR', sans-serif; transition: all .18s;
}
.login-gate-btn-secondary:hover { border-color: var(--sky-border); background: var(--sky-1); color: var(--primary-dark); }
.login-gate-close {
 position: absolute; top: 16px; right: 16px;
 width: 32px; height: 32px; border-radius: 50%;
 border: 1px solid var(--border); background: var(--bg);
 cursor: pointer; font-size: .9rem;
 display: flex; align-items: center; justify-content: center;
 color: var(--text-sub); transition: all .15s;
}
.login-gate-close:hover { background: var(--sky-1); border-color: var(--sky-border); }
[data-theme="dark"] .login-gate-box { background: #1e293b; }
[data-theme="dark"] .login-gate-benefit-item { background: #0c2233; border-color: #1e4a6e; }

.proj-progress-wrap {
 margin-top: 8px;
 padding-top: 8px;
}
.proj-progress-label {
 display: flex; justify-content: space-between; align-items: center;
 font-size: 11px; color: var(--text-sub); margin-bottom: 5px; font-weight: 600;
}
.proj-progress-bar-bg {
 width: 100%; height: 7px;
 background: var(--border); border-radius: 99px; overflow: hidden;
}
.proj-progress-bar-fill {
 height: 100%; border-radius: 99px;
 transition: width .6s cubic-bezier(.34,1.56,.64,1);
}
.proj-date-chip {
 display: inline-flex; align-items: center; gap: 4px;
 padding: 2px 8px; border-radius: 6px;
 font-size: 11px; font-weight: 600;
 background: var(--sky-1); color: var(--primary-dark);
 border: 1px solid var(--sky-border);
}
.proj-date-row {
 display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
}

.alarm-active-dot {
 width: 6px; height: 6px; border-radius: 50%;
 background: #10b981; display: inline-block; margin-right: 4px;
 animation: pulse-online 2s infinite;
}

.fin-num {
 font-family: 'JetBrains Mono', 'Outfit', monospace;
 font-weight: 700;
 font-size: 13px;
 letter-spacing: -.02em;
 color: var(--text-main);
}
.fin-num-lg {
 font-family: 'JetBrains Mono', 'Outfit', monospace;
 font-weight: 700;
 font-size: 14px;
 letter-spacing: -.02em;
}
.fin-up { color: #059669; }
.fin-dn { color: #f43f5e; }
.fin-chg {
 font-family: 'JetBrains Mono', monospace;
 font-size: 10px;
 font-weight: 600;
 margin-left: 4px;
}

.admin-delete-btn {
 padding: 4px 10px;
 border-radius: 6px;
 border: 1px solid #fecaca;
 background: #fef2f2;
 color: #ef4444;
 font-size: 11px; font-weight: 700;
 cursor: pointer; font-family: inherit;
 transition: all .15s;
}
.admin-delete-btn:hover { background: #ef4444; color: white; }

.salary-blind-wrap {
 position: relative;
 min-height: 320px;
}
.salary-blind-overlay {
 position: absolute;
 inset: 0;
 z-index: 10;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 pointer-events: none;
 border-radius: 12px;
 overflow: hidden;
}
.salary-blind-overlay.active {
 pointer-events: all;
}
.salary-blur-bg {
 position: absolute;
 inset: 0;
 backdrop-filter: blur(7px) brightness(1.04);
 -webkit-backdrop-filter: blur(7px) brightness(1.04);
 background: linear-gradient(180deg,
 rgba(248,250,252,.45) 0%,
 rgba(224,242,254,.78) 35%,
 rgba(248,250,252,.95) 100%
 );
}
[data-theme="dark"] .salary-blur-bg {
 background: linear-gradient(180deg,
 rgba(15,23,42,.45) 0%,
 rgba(12,34,63,.78) 35%,
 rgba(15,23,42,.95) 100%
 );
}
.salary-blind-card {
 position: relative;
 z-index: 1;
 background: var(--card-bg);
 border: 1.5px solid var(--sky-border);
 border-radius: 20px;
 padding: 28px 32px 24px;
 text-align: center;
 max-width: 360px;
 width: 90%;
 box-shadow: 0 16px 40px rgba(14,165,233,.14), 0 4px 16px rgba(0,0,0,.07);
}
.salary-blind-icon {
 width: 56px; height: 56px;
 border-radius: 14px;
 background: linear-gradient(135deg, var(--sky-1), var(--sky-2));
 border: 1.5px solid var(--sky-border);
 display: flex; align-items: center; justify-content: center;
 font-size: 1.6rem; margin: 0 auto 14px;
}
.salary-blind-title {
 font-family: 'Outfit', sans-serif;
 font-size: 1.1rem; font-weight: 800;
 color: var(--text-main); margin-bottom: 8px;
 letter-spacing: -.3px;
}
.salary-blind-desc {
 font-size: .82rem; color: var(--text-sub);
 line-height: 1.7; margin-bottom: 16px;
}
.salary-blind-desc strong { color: var(--primary-dark); }
.salary-blind-tag-row {
 display: flex; gap: 6px; justify-content: center;
 flex-wrap: wrap; margin-bottom: 18px;
}
.salary-blind-tag {
 padding: 3px 10px; border-radius: 99px;
 font-size: 11px; font-weight: 700;
 background: var(--sky-1); color: var(--primary-dark);
 border: 1px solid var(--sky-border);
}
.salary-blind-btn {
 width: 100%; height: 44px;
 background: linear-gradient(135deg, var(--primary), var(--primary-dark));
 color: white; border: none; border-radius: 11px;
 font-size: .88rem; font-weight: 700;
 cursor: pointer; font-family: 'Noto Sans KR', sans-serif;
 transition: all .2s; margin-bottom: 8px;
 display: flex; align-items: center; justify-content: center; gap: 7px;
}
.salary-blind-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(14,165,233,.38); }
.salary-blind-btn-sub {
 width: 100%; height: 38px;
 background: var(--bg); border: 1.5px solid var(--border);
 border-radius: 10px; font-size: .82rem; font-weight: 600;
 color: var(--text-sub); cursor: pointer;
 font-family: 'Noto Sans KR', sans-serif; transition: all .18s;
}
.salary-blind-btn-sub:hover { border-color: var(--sky-border); background: var(--sky-1); color: var(--primary-dark); }
[data-theme="dark"] .salary-blind-card { background: #1e293b; }

/* ══════════════════════════════════════════
   반응형 레이아웃 — 중간 (1025px ~ 1279px): 우측 사이드바 숨김
   ══════════════════════════════════════════ */
@media (min-width: 1025px) and (max-width: 1279px) {
  .main-container {
    grid-template-columns: 260px 1fr;
  }
  .right-sidebar { display: none; }
}

/* ══════════════════════════════════════════
   반응형 레이아웃 — 태블릿 (≤1024px)
   ══════════════════════════════════════════ */
@media (max-width: 1024px) {
  nav {
    grid-template-columns: auto 1fr auto;
  }
  .main-container {
    grid-template-columns: 1fr;
    padding: 1rem 1.2rem 2rem;
    gap: 1rem;
  }
  .sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .4rem;
    padding: .8rem;
  }
  .right-sidebar { display: none; }
  .sidebar-title { grid-column: 1 / -1; }
  .menu-group { margin-bottom: 0; }
  .menu-group-label { display: none; }
  .menu-items { flex-direction: row; flex-wrap: wrap; gap: .2rem; }
  .menu-btn { font-size: .78rem; padding: .45rem .7rem; white-space: nowrap; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(3, 1fr); }
  .gnb-clock-pill .temp { display: none; }
  /* 사이드바 내 카드형 광고 — 수평 스크롤 메뉴에 섞이지 않도록 숨김 */
  .ad-sidebar { display: none; }
  /* 콘텐츠 배너 wrapper 마진 초기화 */
  .ad-content-center { margin-left: 0; margin-right: 0; }
}

/* ══════════════════════════════════════════
   반응형 레이아웃 — 모바일 (≤768px)
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── 네비게이션 바 ── */
  nav {
    padding: 0 1rem;
    height: 56px;
    grid-template-columns: auto 1fr auto;
  }
  .logo { font-size: 1.15rem; }
  .gnb-clock-pill {
    display: none; /* 시계 pill 숨김 */
  }
  .gnb-right { gap: 6px; }
  .gnb-icon-btn { width: 36px; height: 36px; font-size: .9rem; }
  .gnb-avatar { width: 36px; height: 36px; font-size: .82rem; }

  /* ── 히어로 ── */
  .hero { padding: .7rem 1rem .6rem; }
  .hero h1 { font-size: 1.05rem; }
  .hero p { font-size: .76rem; }

  /* ── 메인 컨테이너 ── */
  .main-container {
    padding: .8rem .8rem 2rem;
    gap: .8rem;
    min-height: auto;
  }

  /* ── 사이드바 → 수평 스크롤 메뉴 ── */
  .sidebar {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: .5rem .6rem;
    gap: .3rem;
    border-radius: 12px;
    height: auto;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar-title { display: none; }
  .menu { flex-direction: row; gap: 0; }
  .menu-group {
    display: contents;
    margin-bottom: 0;
  }
  .menu-group-label { display: none; }
  .menu-items { flex-direction: row; flex-wrap: nowrap; gap: .25rem; }
  .menu-btn {
    font-size: .76rem;
    padding: .4rem .7rem;
    white-space: nowrap;
    border-radius: 999px;
    flex-shrink: 0;
  }

  /* ── 카드 / 섹션 ── */
  .section-card { padding: 1rem; margin-bottom: 1rem; }
  .section-card h2 { font-size: 1.15rem; }

  /* ── 통계 행 ── */
  .stats-row {
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-bottom: .9rem;
  }
  .stat-card { padding: .7rem .3rem; }
  .stat-num { font-size: 1rem; }
  .stat-label { font-size: .68rem; }

  /* ── 대시보드 그리드 ── */
  .dashboard-grid { grid-template-columns: 1fr; gap: .9rem; }

  /* ── 내부 탭 ── */
  .inner-tabs { gap: .25rem; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .inner-tabs::-webkit-scrollbar { display: none; }
  .inner-tab-btn { font-size: .74rem; padding: .38rem .65rem; white-space: nowrap; flex-shrink: 0; }

  /* ── 테이블 래퍼 ── */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .salary-table-wrap { overflow-x: auto; }

  /* ── 게시판 툴바 ── */
  .board-toolbar { flex-direction: column; align-items: stretch; }
  .board-search-wrap { width: 100%; min-width: 0; }
  .board-write-btn { width: 100%; justify-content: center; }

  /* ── 페이지네이션 버튼 ── */
  .page-btn { width: 30px; height: 30px; font-size: .78rem; }

  /* ── 알림 패널 ── */
  .notif-panel { width: calc(100vw - 2rem); right: -1rem; }

  /* ── 급여 테이블 첫 열 ── */
  table.salary thead th:first-child,
  table.salary tbody td:first-child { min-width: 100px; max-width: 140px; }

  /* ── 회사분석 검색 ── */
  .cmp-search-wrap { min-width: 0; }

  /* ── 글 목록 ── */
  .post-item { grid-template-columns: 1fr; gap: .25rem; }
  .post-stats { align-self: flex-start; }

  /* ── 부동산 카드 그리드 ── */
  .re-grid { grid-template-columns: 1fr; gap: 14px; }

  /* ── 복지 그리드 ── */
  .welfare-grid { grid-template-columns: 1fr 1fr; }

  /* ── 채팅 패널 ── */
  .chat-panel { height: 340px; }
  .chat-online-bar { flex-wrap: wrap; gap: .3rem; }
  .chat-nick-input { width: 90px; }

  /* ── 글쓰기 모달 ── */
  .write-modal { padding: 22px 18px 20px; border-radius: 18px; }

  /* ── 프로필 모달 ── */
  .profile-modal-overlay { padding-top: 62px; padding-right: 8px; }
  .profile-modal-box { width: 310px; }

  /* ── 임금 블라인드 카드 ── */
  .salary-blind-card { padding: 22px 20px 18px; }

  /* ── JHP 섹션 ── */
  .jph-spec-grid { grid-template-columns: repeat(2, 1fr); }
  .jph-amenity-grid { grid-template-columns: repeat(3, 1fr); }
  .jph-complex-grid { grid-template-columns: 1fr; }

  /* ── SML 기타 그리드 ── */
  .sml-other-grid { grid-template-columns: 1fr; }
  .sml-other-card { border-right: none; }
  .sml-other-card:nth-child(2n) { border-right: none; }

  /* ── 투자 정보 ── */
  .tool-tab-wrap { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .tool-tab-wrap::-webkit-scrollbar { display: none; }
  .tool-tab-btn { white-space: nowrap; flex-shrink: 0; }

  /* ── 광고 공통 ── */
  .ad-banner { max-width: 100%; overflow: hidden; }
  .ad-content-center { margin-left: 0; margin-right: 0; }
  .ad-sidebar { display: none; }

  /* ── 콘텐츠 배너 외부 wrapper 패딩 축소 ── */
  .ad-content-center-wrap { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* ── 하단 푸터 배너 ── */
  .ad-footer-banner {
    max-width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 1rem;
  }
  .ad-footer-banner-cta { width: 100%; text-align: center; }

  /* ── pm-stats-row ── */
  .pm-stats-row { grid-template-columns: repeat(2, 1fr); }
  .pm-stat-item:nth-child(3) { border-left: none; }

  /* ── 로그인 게이트 모달 패딩 ── */
  .login-gate-box { padding: 28px 20px 24px; }

  /* ── 지도 사이드 패널 ── */
  .map-side-panel { max-width: 82vw; }

  /* ── 게시글 뷰 메타 ── */
  .post-view-meta { flex-wrap: wrap; gap: .35rem; }
  .post-view-actions { flex-wrap: wrap; gap: .4rem; }

  /* ── SML 사이즈 그룹 ── */
  .sml-size-group { max-width: 180px; }

  /* ── 이미지 overflow 방지 ── */
  img { max-width: 100%; height: auto; }

  /* ── 가로 스크롤 방지 ── */
  .section-card, .post-view, .comment-section { overflow-x: hidden; }
}

/* ══════════════════════════════════════════
   반응형 레이아웃 — 소형 스마트폰 (≤480px)
   ══════════════════════════════════════════ */
@media (max-width: 480px) {
  /* ── 네비게이션 ── */
  nav { padding: 0 .75rem; }
  .logo { font-size: 1rem; }

  /* ── 메인 패딩 ── */
  .main-container { padding: .6rem .6rem 1.5rem; }

  /* ── 통계 2열로 ── */
  .stats-row { grid-template-columns: repeat(2, 1fr); }

  /* ── 복지 카드 1열 ── */
  .welfare-grid { grid-template-columns: 1fr; }

  /* ── 시계/날씨 pill → 더 작은 버전 ── */
  .gnb-icon-btn { width: 32px; height: 32px; font-size: .82rem; }
  .gnb-avatar { width: 32px; height: 32px; font-size: .78rem; }

  /* ── 섹션카드 패딩 ── */
  .section-card { padding: .85rem; }
  .section-card h2 { font-size: 1rem; }
  .section-card h3 { font-size: .88rem; }

  /* ── 내부 탭 ── */
  .inner-tab-btn { font-size: .7rem; padding: .32rem .55rem; }
  .year-btn { font-size: .72rem; padding: .26rem .65rem; }

  /* ── 채팅 높이 축소 ── */
  .chat-panel { height: 280px; }

  /* ── JHP 매물 그리드 → 1열 ── */
  .jph-amenity-grid { grid-template-columns: repeat(2, 1fr); }
  .jph-spec-grid { grid-template-columns: 1fr 1fr; }

  /* ── 코인 그리드 ── */
  /* (coin-grid는 auto-fill 사용 중이라 자연스럽게 1열로 수렴) */

  /* ── 투자 섹션 탭 행 ── */
  .inv-tab-row { flex-wrap: nowrap; overflow-x: auto; }
  .inv-tab-row::-webkit-scrollbar { display: none; }
  .inv-tab-btn { flex-shrink: 0; }

  /* ── 게시판 ── */
  .board-pagination { gap: .2rem; }
  .page-btn { width: 28px; height: 28px; font-size: .75rem; }

  /* ── 알림 패널 전체 너비 ── */
  .notif-panel { width: calc(100vw - 1.5rem); right: -1rem; }

  /* ── 프로필 모달 전체 너비 ── */
  .profile-modal-overlay { padding-right: 6px; }
  .profile-modal-box { width: calc(100vw - 12px); }

  /* ── 글쓰기 모달 ── */
  .write-modal { padding: 18px 14px 16px; }
  .write-footer { flex-direction: column; }
  .write-cancel, .write-submit { width: 100%; }

  /* ── 로그인 모달 패딩 ── */
  .login-modal-box { padding: 24px 18px 20px; }

  /* ── 로그인 게이트 패딩 ── */
  .login-gate-box { padding: 22px 14px 18px; }
  .login-gate-title { font-size: 1.1rem; }
  .login-gate-desc { font-size: .82rem; }

  /* ── 지도 사이드 패널 전체폭 ── */
  .map-side-panel { width: 100%; max-width: 100%; }

  /* ── 급여 테이블 첫 열 더 축소 ── */
  table.salary thead th:first-child,
  table.salary tbody td:first-child { min-width: 70px; max-width: 100px; font-size: .78rem; }

  /* ── SML 사이즈 그룹 2열 ── */
  .sml-size-group { min-width: calc(50% - 6px); max-width: calc(50% - 6px); flex: 0 0 calc(50% - 6px); }

  /* ── 댓글 입력창 세로 배치 ── */
  .comment-input-wrap { flex-direction: column; gap: .4rem; }
  .comment-submit { width: 100%; }

  /* ── 게시글 뷰 ── */
  .post-view-title { font-size: 1rem; }

  /* ── 프로필 모달 stats 4열→2열 ── */
  .pm-stat-item:nth-child(even) { border-left: 1px solid var(--border); }

  /* ── Hero 타이틀 ── */
  .hero h1 { font-size: .95rem; }
  .hero p { font-size: .72rem; }
}

.design-inner-tabs {
 display: flex;
 gap: .35rem;
 margin-bottom: 1.1rem;
 flex-wrap: wrap;
}

.dit-btn {
 flex: 1;
 padding: .42rem .8rem;
 border-radius: 999px;
 border: 1.5px solid var(--border);
 background: var(--card-bg);
 font-family: 'Noto Sans KR', sans-serif;
 font-size: .81rem;
 font-weight: 600;
 color: var(--text-muted);
 cursor: pointer;
 transition: all .18s;
 white-space: nowrap;
 text-align: center;
 min-width: 0;
}
.dit-btn.active {
 background: var(--primary);
 border-color: var(--primary);
 color: white;
 font-weight: 700;
}
.dit-btn:hover:not(.active) { border-color: var(--sky-border); color: var(--primary-dark); background: var(--sky-1); }
.dit-pane { display: none; }
.dit-pane.active { display: block; }
[data-theme="dark"] .dit-btn { background: #1e293b; }
[data-theme="dark"] .dit-btn.active { background: var(--primary); color: white; }

.tool-tab-wrap {
 display: flex; gap: .3rem; margin-bottom: 1rem;
}

.tool-tab-btn {
 padding: .3rem .85rem;
 border: 1px solid var(--border); border-radius: 999px;
 background: var(--card-bg);
 font-family: 'Noto Sans KR', sans-serif;
 font-size: .78rem; font-weight: 600; color: var(--text-muted);
 cursor: pointer; transition: all .15s; white-space: nowrap;
}
.tool-tab-btn.active { background: var(--sky-1); border-color: var(--primary); color: var(--primary-dark); font-weight: 700; }
.tool-tab-btn:hover:not(.active) { border-color: var(--sky-border); color: var(--primary-dark); background: var(--sky-1); }
.tool-pane { display: none; }
.tool-pane.active { display: block; }
[data-theme="dark"] .tool-tab-btn { background: #1e293b; }
[data-theme="dark"] .tool-tab-btn.active { background: var(--sky-2); }

.map-search-bar { display: flex; gap: 8px; margin-bottom: .9rem; }
.map-search-input {
 flex: 1; height: 40px;
 border: 1px solid var(--border); border-radius: 999px;
 padding: 0 14px; font-size: .86rem;
 font-family: 'Noto Sans KR', sans-serif;
 background: var(--bg); color: var(--text-main); outline: none;
 transition: border-color .18s;
}
.map-search-input:focus { border-color: var(--primary); }
.map-search-btn {
 height: 40px; padding: 0 16px;
 background: var(--primary); color: white; border: none; border-radius: 999px;
 font-size: .83rem; font-weight: 700;
 cursor: pointer; font-family: 'Noto Sans KR', sans-serif;
 transition: all .15s; white-space: nowrap;
}
.map-search-btn:hover { background: var(--primary-dark); box-shadow: 0 4px 14px rgba(14,165,233,.28); }
.map-frame-wrap {
 width: 100%; border-radius: 12px; overflow: hidden;
 border: 1px solid var(--border); box-shadow: 0 2px 12px rgba(0,0,0,.06);
 position: relative;
}

#ditNaverMapDiv,
#ditKakaoMapDiv {
 width: 100%; height: 520px; display: block;
}

.map-overlay-ui {
 position: absolute; top: 0; left: 0; right: 0; bottom: 0;
 pointer-events: none; z-index: 10;
}
.map-overlay-ui * { pointer-events: auto; }

.map-filter-bar {
 position: absolute; top: 12px; left: 12px; right: 12px;
 display: flex; gap: 7px; flex-wrap: wrap;
}
.map-filter-chip {
 height: 32px; padding: 0 14px;
 background: white; border: 1.5px solid var(--border);
 border-radius: 999px; font-size: .77rem; font-weight: 700;
 color: var(--text-sub); cursor: pointer;
 box-shadow: 0 2px 8px rgba(0,0,0,.10);
 display: flex; align-items: center; gap: 5px;
 transition: all .15s; white-space: nowrap;
}
.map-filter-chip:hover, .map-filter-chip.active {
 background: var(--primary); color: white; border-color: var(--primary);
}

.map-ctrl-col {
 position: absolute; top: 12px; right: 12px;
 display: flex; flex-direction: column; gap: 6px;
}
.map-ctrl-btn {
 width: 36px; height: 36px;
 background: white; border: 1px solid var(--border);
 border-radius: 8px; font-size: 1rem;
 display: flex; align-items: center; justify-content: center;
 cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.10);
 transition: all .15s; color: var(--text-sub);
}
.map-ctrl-btn:hover { background: var(--primary-light); border-color: var(--primary); }

.map-result-badge {
 position: absolute; bottom: 12px; left: 12px;
 background: rgba(15,23,42,.82); color: white;
 padding: 6px 14px; border-radius: 999px;
 font-size: .78rem; font-weight: 600;
 backdrop-filter: blur(6px);
}

.map-side-panel {
 position: absolute; top: 0; right: 0; bottom: 0;
 width: 280px;
 background: white; border-left: 1px solid var(--border);
 display: flex; flex-direction: column;
 transform: translateX(100%);
 transition: transform .28s cubic-bezier(.4,0,.2,1);
 box-shadow: -4px 0 24px rgba(0,0,0,.10);
 z-index: 20;
}
.map-side-panel.open { transform: translateX(0); }
[data-theme="dark"] .map-side-panel { background: #1e293b; border-color: #334155; }
.msp-header {
 padding: 14px 16px 10px;
 border-bottom: 1px solid var(--border);
 display: flex; justify-content: space-between; align-items: center;
}
.msp-title { font-size: .9rem; font-weight: 700; color: var(--text-main); }
.msp-close {
 width: 28px; height: 28px; border-radius: 50%;
 background: var(--border); border: none; cursor: pointer;
 display: flex; align-items: center; justify-content: center;
 font-size: .85rem; color: var(--text-sub);
}
.msp-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.msp-item {
 padding: 12px 16px; border-bottom: 1px solid var(--border);
 cursor: pointer; transition: background .12s;
}
.msp-item:hover { background: var(--sky-1); }
.msp-item-name { font-size: .85rem; font-weight: 700; color: var(--text-main); margin-bottom: 3px; }
.msp-item-addr { font-size: .75rem; color: var(--text-muted); margin-bottom: 4px; }
.msp-item-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.msp-tag {
 font-size: .68rem; font-weight: 700; padding: 2px 8px;
 border-radius: 999px; background: var(--primary-light); color: var(--primary-dark);
}
.msp-tag.red { background: #fef2f2; color: #dc2626; }
.msp-tag.green { background: #f0fdf4; color: #16a34a; }

.custom-infowin {
 background: white; border-radius: 12px; padding: 12px 14px;
 box-shadow: 0 8px 28px rgba(0,0,0,.15);
 border: 1px solid var(--border);
 min-width: 180px; font-family: 'Noto Sans KR', sans-serif;
}
.ciw-name { font-size: .88rem; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
.ciw-addr { font-size: .73rem; color: #64748b; margin-bottom: 6px; }
.ciw-row { display: flex; gap: 5px; }
.ciw-tag {
 font-size: .68rem; font-weight: 700; padding: 2px 8px;
 border-radius: 999px;
}

.map-demo-banner {
 position: absolute; bottom: 12px; right: 12px;
 background: linear-gradient(135deg, #0ea5e9, #0369a1);
 color: white; padding: 8px 14px; border-radius: 10px;
 font-size: .72rem; font-weight: 700;
 box-shadow: 0 4px 16px rgba(14,165,233,.35);
 line-height: 1.5;
}
.map-demo-banner span { opacity: .8; font-weight: 400; }

.law-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1rem; }
@media (max-width: 768px) { .law-grid { grid-template-columns: 1fr; } }
.law-input-group label { display: block; font-size: .76rem; font-weight: 700; color: var(--text-sub); margin-bottom: 5px; }
.law-select, .law-input {
 width: 100%; height: 38px;
 border: 1px solid var(--border); border-radius: 8px;
 padding: 0 12px; font-size: .85rem;
 font-family: 'Noto Sans KR', sans-serif;
 background: var(--bg); color: var(--text-main); outline: none; transition: border-color .15s;
}
.law-select:focus, .law-input:focus { border-color: var(--primary); }
.law-calc-btn {
 width: 100%; height: 40px; background: var(--primary);
 color: white; border: none; border-radius: 999px;
 font-size: .83rem; font-weight: 700;
 cursor: pointer; font-family: 'Noto Sans KR', sans-serif;
 transition: all .18s; margin-bottom: 1rem;
}
.law-calc-btn:hover { background: var(--primary-dark); box-shadow: 0 4px 14px rgba(14,165,233,.28); }
.law-result-box {
 background: var(--bg); border: 1px solid var(--border);
 border-radius: 10px; padding: 1rem 1.2rem; display: none;
}
.law-result-box.show { display: block; }
.law-result-title { font-size: .76rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .8rem; }
.law-result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.law-result-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: 9px; padding: .7rem .9rem; }
.law-result-item .lri-label { font-size: .72rem; color: var(--text-muted); margin-bottom: 4px; }
.law-result-item .lri-value { font-size: 1rem; font-weight: 800; color: var(--primary-dark); font-family: 'Outfit', sans-serif; }
.law-result-item .lri-unit { font-size: .7rem; color: var(--text-sub); font-weight: 500; }
.law-warn { font-size: .74rem; color: var(--text-muted); padding: .6rem .9rem; background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.22); border-radius: 7px; margin-top: .8rem; line-height: 1.7; }

.cost-tab-row { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 1rem; }
.cost-type-btn { padding: .3rem .85rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--card-bg); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; font-family: inherit; transition: all .15s; }
.cost-type-btn.active { background: var(--sky-1); border-color: var(--primary); color: var(--primary-dark); font-weight: 700; }
.cost-type-btn:hover:not(.active) { border-color: var(--sky-border); background: var(--sky-1); color: var(--primary-dark); }
[data-theme="dark"] .cost-type-btn { background: #1e293b; }
[data-theme="dark"] .cost-type-btn.active { background: var(--sky-2); }
.cost-row { display: flex; gap: 8px; align-items: flex-end; margin-bottom: .7rem; }
.cost-field { flex: 1; }
.cost-field label { display: block; font-size: .76rem; font-weight: 700; color: var(--text-sub); margin-bottom: 5px; }
.cost-input { width: 100%; height: 40px; border: 1.5px solid var(--border); border-radius: 9px; padding: 0 12px; font-size: .86rem; font-family: 'Noto Sans KR', sans-serif; background: var(--bg); color: var(--text-main); outline: none; transition: border-color .15s; }
.cost-input:focus { border-color: var(--primary); }
.cost-select { width: 100%; height: 40px; border: 1.5px solid var(--border); border-radius: 9px; padding: 0 12px; font-size: .85rem; font-family: 'Noto Sans KR', sans-serif; background: var(--bg); color: var(--text-main); outline: none; }
.cost-calc-btn { width: 100%; height: 40px; background: var(--primary); color: white; border: none; border-radius: 999px; font-size: .83rem; font-weight: 700; cursor: pointer; font-family: 'Noto Sans KR', sans-serif; transition: all .18s; margin: .4rem 0 1rem; }
.cost-calc-btn:hover { background: var(--primary-dark); box-shadow: 0 4px 14px rgba(14,165,233,.28); }
.cost-result-wrap { display: none; }
.cost-result-wrap.show { display: block; }
.cost-summary-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: .7rem; margin-bottom: 1rem; }
.cost-summary-card { background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px; padding: .8rem .9rem; text-align: center; }
.cost-summary-card.accent { background: var(--primary-light); border-color: var(--sky-border); }
.csc-label { font-size: .75rem; color: var(--text-muted); margin-bottom: 5px; }
.csc-val { font-size: 1.15rem; font-weight: 800; color: var(--primary-dark); font-family: 'Outfit', sans-serif; line-height: 1.2; }
.csc-unit { font-size: .72rem; color: var(--text-sub); margin-top: 2px; }
.cost-breakdown-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-bottom: 1rem; }
.cost-breakdown-table th { background: var(--sky-1); color: var(--sky-7); padding: 9px 12px; text-align: left; font-weight: 700; border-bottom: 2px solid var(--sky-3); font-size: .8rem; }
.cost-breakdown-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); }
.cost-breakdown-table tr:hover { background: var(--primary-light); }
.cost-disclaimer { font-size: .75rem; color: var(--text-muted); padding: .8rem 1rem; background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.25); border-radius: 8px; line-height: 1.7; }
[data-theme="dark"] .law-result-box { background: #0c2233; }
[data-theme="dark"] .cost-summary-card { background: #0c2233; }
[data-theme="dark"] .cost-summary-card.accent { background: linear-gradient(135deg,rgba(56,189,248,.12),rgba(125,211,252,.07)); }

.sec-header {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 padding-bottom: 1rem;
 border-bottom: 1px solid var(--border);
 margin-bottom: 1.2rem;
 gap: 1rem;
 flex-wrap: wrap;
}
.sec-header-left { flex: 1; min-width: 0; }
.sec-header h2 {
 font-size: 1.25rem;
 font-family: 'Outfit', sans-serif;
 font-weight: 800;
 color: var(--text-main);
 margin-bottom: .15rem;
 letter-spacing: -.3px;
}
.sec-header .sec-desc {
 font-size: .82rem;
 color: var(--text-muted);
 line-height: 1.5;
}
.sec-actions {
 display: flex;
 align-items: center;
 gap: .5rem;
 flex-shrink: 0;
}

.info-disclosure {
 margin-top: 1.4rem;
 border-top: 1px solid var(--border);
 padding-top: .6rem;
}
.info-disclosure summary {
 display: flex;
 align-items: center;
 gap: .4rem;
 padding: .45rem 0;
 font-size: .76rem;
 font-weight: 600;
 color: var(--text-muted);
 cursor: pointer;
 list-style: none;
 user-select: none;
 width: fit-content;
}
.info-disclosure summary::-webkit-details-marker { display: none; }
.info-disclosure summary .disc-arrow {
 font-size: .7rem;
 transition: transform .2s;
 opacity: .6;
}
.info-disclosure[open] summary .disc-arrow { transform: rotate(180deg); }
.info-disclosure summary:hover { color: var(--text-sub); }
.disc-body {
 padding: .8rem 0 .2rem;
 font-size: .76rem;
 color: var(--text-muted);
 line-height: 1.9;
}
.disc-body p { margin-bottom: .3rem; }
.disc-warn {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 3px 9px;
 border-radius: 5px;
 font-size: .72rem;
 font-weight: 600;
 background: rgba(251,191,36,.1);
 color: #92400e;
 border: 1px solid rgba(251,191,36,.3);
 margin-top: .3rem;
}
[data-theme="dark"] .disc-warn { background: rgba(251,191,36,.07); color: #b45309; }

.notice-cat-btn {
 display: inline-flex; align-items: center; gap: 6px;
 padding: 8px 16px; border-radius: 999px;
 border: 1.5px solid var(--border);
 background: var(--card-bg);
 font-size: .8rem; font-weight: 600;
 color: var(--text-sub); cursor: pointer;
 transition: all .18s; font-family: inherit;
 white-space: nowrap;
}
.notice-cat-btn:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-light); }
.notice-cat-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.notice-cat-btn .dot {
 width: 7px; height: 7px; border-radius: 50%;
 background: currentColor; opacity: .7;
 flex-shrink: 0;
}
[data-theme="dark"] .notice-cat-btn { background: #1e293b; }
[data-theme="dark"] .notice-cat-btn.active { background: var(--primary); }

/* ── Utility Classes ── */
.ic-google{width:16px;height:16px;border-radius:50%;background:conic-gradient(#4285F4 0 25%,#EA4335 25% 50%,#FBBC05 50% 75%,#34A853 75%);display:inline-block;flex-shrink:0}
.ic-ms{width:14px;height:14px;background:#00a4ef;display:inline-block;flex-shrink:0;border-radius:2px}
.ic-live-dot{width:6px;height:6px;border-radius:50%;background:#10b981;display:inline-block;animation:pulse-online 2s infinite}
.ic-sync-dot{width:8px;height:8px;border-radius:50%;background:#10b981;flex-shrink:0;display:inline-block;animation:syncPulse 1.4s infinite}
.u-row-between-border{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border)}
.u-row-between-border2{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid var(--border)}
.u-label-std{display:block;font-size:.78rem;font-weight:700;color:var(--text-sub);margin-bottom:5px}
.u-val-outfit{font-size:1.2rem;font-weight:800;font-family:'Outfit',sans-serif;color:var(--primary-dark)}
.u-val-outfit-w{font-size:1.2rem;font-weight:800;font-family:'Outfit',sans-serif;color:#fff}
.u-meta-sm{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:5px}
.u-text-center-caption{text-align:center;font-size:10px;font-weight:600;color:var(--text-muted);padding:3px 0}
.u-row-sb-mb{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.u-txt-muted-xs{font-size:.68rem;color:var(--text-muted)}
.u-txt-muted-xs-w{font-size:.68rem;color:rgba(255,255,255,.75)}
.u-empty-panel{text-align:center;padding:24px;color:var(--text-muted);font-size:.82rem}
.u-grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1rem}
.u-inp-readonly{background:var(--bg);color:var(--primary);font-weight:700}
.u-txt-muted-12{color:var(--text-muted);font-size:12px;padding:10px 0}
.u-flex-gap5{display:flex;align-items:center;gap:5px}
.u-txt-key{font-size:12px;font-weight:700;color:var(--text-main)}





 .cmp-cat-tabs {
 display: flex; gap: 8px; flex-wrap: wrap;
 margin-bottom: 18px;
 }
 .cmp-cat-btn {
 display: inline-flex; align-items: center; gap: 6px;
 padding: 8px 16px; border-radius: 999px;
 border: 1.5px solid var(--border);
 background: var(--card-bg);
 font-size: .8rem; font-weight: 600;
 color: var(--text-sub); cursor: pointer;
 transition: all .18s; font-family: inherit;
 }
 .cmp-cat-btn:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-light); }
 .cmp-cat-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
 .cmp-cat-btn .dot {
 width: 7px; height: 7px; border-radius: 50%;
 background: currentColor; opacity: .7;
 flex-shrink: 0;
 }


 .cmp-toolbar {
 display: flex; gap: 10px; align-items: center;
 margin-bottom: 18px; flex-wrap: wrap;
 }
 .cmp-search-wrap { position: relative; flex: 1; min-width: 200px; }
 .cmp-search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: .4; }
 .cmp-search {
 width: 100%; padding: 9px 12px 9px 36px;
 border: 1.5px solid var(--border); border-radius: 10px;
 background: var(--card-bg); color: var(--text-main);
 font-size: .84rem; font-family: inherit;
 transition: border-color .18s;
 }
 .cmp-search:focus { outline: none; border-color: var(--primary); }
 .cmp-sort {
 padding: 9px 14px; border: 1.5px solid var(--border);
 border-radius: 10px; background: var(--card-bg);
 color: var(--text-sub); font-size: .82rem;
 font-family: inherit; cursor: pointer;
 }


 .cmp-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
 margin-bottom: 10px;
 }
 @media(max-width:1100px){ .cmp-grid { grid-template-columns: repeat(2,1fr); } }
 @media(max-width:640px) { .cmp-grid { grid-template-columns: 1fr; } }

 .cmp-card {
 background: var(--card-bg);
 border: 1.5px solid var(--border);
 border-radius: var(--radius);
 overflow: hidden;
 display: flex; flex-direction: column;
 transition: all .22s;
 cursor: pointer;
 }
 .cmp-card:hover {
 transform: translateY(-4px);
 box-shadow: 0 12px 32px rgba(14,165,233,.14);
 border-color: var(--primary);
 }
 .cmp-card-thumb {
 height: 7px;
 flex-shrink: 0;
 }
 .cmp-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
 .cmp-card-tags { display: flex; gap: 5px; flex-wrap: wrap; }
 .cmp-tag {
 display: inline-block;
 padding: 2px 8px; border-radius: 5px;
 font-size: 10.5px; font-weight: 700;
 letter-spacing: .02em;
 }
 .cmp-tag-cat { background: var(--primary-light); color: var(--primary-dark); }
 .cmp-tag-new { background: #dcfce7; color: #15803d; }
 .cmp-tag-hot { background: #fee2e2; color: #b91c1c; }
 .cmp-tag-end { background: #f1f5f9; color: #64748b; }
 .cmp-tag-gl { background: #ede9fe; color: #6d28d9; }
 .cmp-tag-open { background: #fef9c3; color: #854d0e; }
 .cmp-card-title {
 font-size: .92rem; font-weight: 700;
 color: var(--text-main); line-height: 1.4;
 }
 .cmp-card-org {
 font-size: .78rem; color: var(--text-sub);
 }
 .cmp-card-footer {
 display: flex; align-items: center; justify-content: space-between;
 padding: 10px 16px;
 border-top: 1px solid var(--border);
 font-size: 11px; color: var(--text-muted);
 flex-wrap: wrap; gap: 4px;
 }
 .cmp-dday {
 font-weight: 700; font-size: 12px;
 padding: 3px 9px; border-radius: 6px;
 }
 .cmp-dday.urgent { background: #fee2e2; color: #b91c1c; }
 .cmp-dday.soon { background: #fef3c7; color: #92400e; }
 .cmp-dday.normal { background: var(--primary-light); color: var(--primary-dark); }
 .cmp-dday.ended { background: #f1f5f9; color: #94a3b8; }
 .cmp-dday.open { background: #dcfce7; color: #15803d; }

 .cmp-link-btn {
 display: inline-flex; align-items: center; gap: 4px;
 font-size: 11px; color: var(--primary);
 text-decoration: none; font-weight: 600;
 padding: 3px 8px; border-radius: 6px;
 background: var(--primary-light);
 transition: all .15s;
 }
 .cmp-link-btn:hover { background: var(--primary); color: #fff; }


 .cmp-section-hd {
 display: flex; align-items: center; justify-content: space-between;
 margin-bottom: 12px;
 }
 .cmp-section-hd h3 {
 font-size: .95rem; font-weight: 700;
 color: var(--text-main);
 display: flex; align-items: center; gap: 7px;
 }
 .cmp-section-hd .cmp-cnt {
 font-size: 12px; font-weight: 600;
 background: var(--primary-light); color: var(--primary-dark);
 padding: 2px 9px; border-radius: 99px;
 }


 .cmp-platform-grid {
 display: grid;
 grid-template-columns: repeat(3,1fr);
 gap: 12px;
 margin-top: 8px;
 }
 @media(max-width:900px){ .cmp-platform-grid { grid-template-columns: repeat(2,1fr); } }
 @media(max-width:560px){ .cmp-platform-grid { grid-template-columns: 1fr; } }
 .cmp-platform-card {
 display: flex; gap: 12px; align-items: flex-start;
 background: var(--card-bg);
 border: 1.5px solid var(--border);
 border-radius: 12px; padding: 14px;
 transition: all .2s; cursor: pointer;
 }
 .cmp-platform-card:hover { border-color: var(--primary); background: var(--primary-light); }
 .cmp-platform-icon {
 width: 36px; height: 36px; border-radius: 10px;
 display: flex; align-items: center; justify-content: center;
 font-size: 18px; flex-shrink: 0;
 }
 .cmp-platform-info { flex: 1; min-width: 0; }
 .cmp-platform-name { font-size: .83rem; font-weight: 700; color: var(--text-main); margin-bottom: 3px; }
 .cmp-platform-desc { font-size: .73rem; color: var(--text-sub); line-height: 1.45; }


 .cmp-empty {
 grid-column: 1/-1;
 text-align: center; padding: 60px 0;
 color: var(--text-muted); font-size: 14px;
 }
 .cmp-empty .icon { font-size: 2.2rem; margin-bottom: 10px; }

 [data-theme="dark"] .cmp-sort,
 [data-theme="dark"] .cmp-search { background: #0f172a; border-color: #334155; color: #f1f5f9; }
 [data-theme="dark"] .cmp-card { background: #1e293b; border-color: #334155; }
 [data-theme="dark"] .cmp-platform-card { background: #1e293b; border-color: #334155; }
 [data-theme="dark"] .cmp-tag-end { background: #1e293b; }



 .law-hero {
 background: linear-gradient(135deg,#0369a1 0%,#0ea5e9 60%,#38bdf8 100%);
 border-radius: 14px; padding: 18px 22px 16px;
 margin-bottom: 16px; color: #fff;
 display: flex; align-items: center; justify-content: space-between;
 gap: 12px; flex-wrap: wrap;
 }
 .law-hero h3 { font-size:1rem; font-weight:800; margin-bottom:3px; }
 .law-hero p { font-size:.76rem; opacity:.85; }
 .law-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
 .law-tab-btn {
 padding:7px 16px; border-radius:999px;
 border:1.5px solid var(--border); background:var(--card-bg);
 color:var(--text-sub); font-size:.78rem; font-weight:600;
 cursor:pointer; font-family:inherit; transition:all .15s;
 }
 .law-tab-btn:hover { border-color:var(--primary); color:var(--primary-dark); }
 .law-tab-btn.active { background:var(--primary); border-color:var(--primary); color:#fff; }
 .law-pane { display:none; }
 .law-pane.active { display:block; }


 .lv-auto-sync-banner {
 padding:9px 14px; border-radius:10px;
 background:var(--sky-1); border:1.5px solid var(--sky-border);
 font-size:.79rem; color:var(--primary-dark);
 display:flex; align-items:center; gap:8px;
 margin-bottom:14px; transition: background .3s, border-color .3s, color .3s;
 }
 .lv-auto-sync-banner .sync-dot {
 width:8px; height:8px; border-radius:50%;
 background:#10b981; flex-shrink:0;
 animation: syncPulse 1.4s infinite;
 }
 @keyframes syncPulse {
 0%,100%{ opacity:1; transform:scale(1); }
 50%{ opacity:.4; transform:scale(.75); }
 }


 .lv-section-hd {
 font-size:.78rem; font-weight:800; color:var(--primary-dark);
 letter-spacing:.05em; padding:8px 0 6px;
 border-bottom:2px solid var(--sky-border);
 margin:14px 0 10px; display:flex; align-items:center; gap:6px;
 }
 .lv-section-sub {
 font-size:.74rem; font-weight:700; color:var(--text-sub);
 margin:10px 0 6px; padding-left:2px;
 }

 .law-form-grid-3 {
 grid-template-columns: repeat(3,1fr) !important;
 }
 @media(max-width:700px){ .law-form-grid-3 { grid-template-columns: repeat(2,1fr) !important; } }
 @media(max-width:480px){ .law-form-grid-3 { grid-template-columns: 1fr !important; } }

 .lv-auto-tag {
 display:inline-block; padding:1px 7px; border-radius:4px;
 font-size:9px; font-weight:700;
 background:var(--primary-light); color:var(--primary-dark);
 margin-left:4px; vertical-align:middle;
 }
 .lv-opt { font-size:9px; color:var(--text-muted); font-weight:400; margin-left:4px; }

 .law-form-inp-auto {
 background:var(--bg) !important;
 color:var(--primary-dark) !important;
 font-weight:700 !important;
 cursor:default;
 }

 .law-live-grid {
 display:grid; grid-template-columns:repeat(4,1fr);
 gap:8px;
 }
 @media(max-width:700px){ .law-live-grid { grid-template-columns:repeat(2,1fr); } }
 .law-live-item {
 background:var(--card-bg); border:1.5px solid var(--border);
 border-radius:10px; padding:10px 12px;
 }
 .law-live-item.ok { border-color:#10b981; background:#f0fdf4; }
 .law-live-item.warn { border-color:#f59e0b; background:#fefce8; }
 .law-live-item.ng { border-color:#dc2626; background:#fef2f2; }
 .law-live-label { font-size:.7rem; color:var(--text-muted); margin-bottom:3px; }
 .law-live-val { font-size:1rem; font-weight:800; color:var(--text-main); font-family:'Outfit',sans-serif; }
 .law-live-sub { font-size:.68rem; color:var(--text-sub); margin-top:2px; }


 .law-form-grid {
 display:grid; grid-template-columns:repeat(2,1fr);
 gap:12px; margin-bottom:14px;
 }
 @media(max-width:600px){ .law-form-grid { grid-template-columns:1fr; } }
 .law-form-group label { display:block; font-size:.78rem; font-weight:600; color:var(--text-sub); margin-bottom:5px; }
 .law-form-sel, .law-form-inp {
 width:100%; padding:9px 12px;
 border:1.5px solid var(--border); border-radius:10px;
 background:var(--card-bg); color:var(--text-main);
 font-size:.84rem; font-family:inherit;
 transition:border-color .15s;
 }
 .law-form-sel:focus, .law-form-inp:focus { outline:none; border-color:var(--primary); }
 .law-calc-big-btn {
 width:100%; padding:12px; border-radius:12px;
 background:linear-gradient(135deg,#0369a1,#0ea5e9);
 color:#fff; border:none; font-size:.9rem; font-weight:700;
 cursor:pointer; font-family:inherit; transition:all .18s;
 margin-bottom:16px;
 }
 .law-calc-big-btn:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(14,165,233,.35); }


 .law-summary-cards {
 display:grid; grid-template-columns:repeat(3,1fr);
 gap:10px; margin-bottom:14px;
 }
 @media(max-width:700px){ .law-summary-cards { grid-template-columns:repeat(2,1fr); } }
 @media(max-width:480px){ .law-summary-cards { grid-template-columns:1fr; } }
 .law-sum-card {
 background:var(--card-bg); border:1.5px solid var(--border);
 border-radius:12px; padding:13px; text-align:center;
 }
 .law-sum-card.accent { border-color:var(--primary); background:var(--primary-light); }
 .law-sum-card.ok { border-color:#10b981; background:#f0fdf4; }
 .law-sum-card.warn { border-color:#f59e0b; background:#fefce8; }
 .law-sum-label { font-size:.72rem; color:var(--text-muted); margin-bottom:4px; }
 .law-sum-val { font-size:1.3rem; font-weight:800; color:var(--text-main); font-family:'Outfit',sans-serif; }
 .law-sum-sub { font-size:.7rem; color:var(--text-sub); margin-top:2px; }


 .law-tbl-wrap { overflow-x:auto; }
 .law-tbl {
 width:100%; border-collapse:collapse;
 font-size:.8rem; min-width:680px;
 }
 .law-tbl thead tr { background:var(--sky-1); }
 .law-tbl thead th {
 padding:9px 10px; text-align:left;
 border-bottom:2px solid var(--sky-3);
 font-size:.75rem; font-weight:700; color:var(--sky-7);
 white-space:nowrap;
 }
 .law-tbl tbody td { padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
 .law-tbl tbody tr:hover { background:var(--primary-light); }
 .law-cat-cell {
 text-align:center; font-size:9px; font-weight:700;
 color:var(--primary-dark); white-space:nowrap;
 border-right:2px solid rgba(14,165,233,.2);
 padding:8px 8px;
 }
 .law-badge {
 display:inline-block; padding:2px 8px; border-radius:5px;
 font-size:10px; font-weight:700; white-space:nowrap;
 }
 .badge-ok { background:#dcfce7; color:#15803d; }
 .badge-warn { background:#fef9c3; color:#854d0e; }
 .badge-ng { background:#fee2e2; color:#b91c1c; }
 .badge-na { background:#f1f5f9; color:#64748b; }
 .law-art-btn {
 background:none; border:none; padding:0;
 font-size:9px; color:var(--text-sub);
 cursor:pointer; font-family:inherit;
 line-height:1.4; text-align:left;
 text-decoration:underline dotted;
 }
 .law-art-btn:hover { color:var(--primary); }


 .law-modal-overlay {
 display:none; position:fixed; inset:0;
 background:rgba(0,0,0,.45); z-index:3000;
 align-items:center; justify-content:center;
 }
 .law-modal-overlay.open { display:flex; }
 .law-modal-box {
 background:var(--card-bg); border-radius:20px;
 padding:28px; width:min(560px,93vw);
 max-height:80vh; overflow-y:auto;
 box-shadow:0 24px 60px rgba(0,0,0,.22);
 border:1px solid var(--border);
 }
 .law-modal-hd { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px; }
 .law-modal-title { font-size:.95rem; font-weight:800; color:var(--text-main); line-height:1.4; }
 .law-modal-badge { display:inline-block; padding:2px 9px; border-radius:5px; font-size:10px; font-weight:700; background:var(--primary-light); color:var(--primary-dark); border:1px solid var(--sky-border); }
 .law-modal-close { background:none; border:none; font-size:1.2rem; cursor:pointer; color:var(--text-muted); flex-shrink:0; }
 .law-modal-body p { font-size:.83rem; line-height:1.7; color:var(--text-main); margin-bottom:10px; }
 .law-modal-body ul { padding-left:16px; }
 .law-modal-body li { font-size:.82rem; line-height:1.6; color:var(--text-sub); margin-bottom:4px; }
 .law-modal-body li b { color:var(--text-main); }
 .law-modal-link { display:inline-flex; align-items:center; gap:5px; margin-top:14px; padding:8px 16px; border-radius:8px; background:var(--primary-light); color:var(--primary-dark); font-size:.8rem; font-weight:600; text-decoration:none; border:1px solid var(--sky-border); }
 .law-modal-link:hover { background:var(--primary); color:#fff; }


 .setback-calc-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:12px; }
 @media(max-width:500px){ .setback-calc-grid { grid-template-columns:1fr; } }
 .setback-result {
 background:var(--card-bg); border:1.5px solid var(--border);
 border-radius:12px; padding:14px; margin-top:12px;
 display:none;
 }
 .setback-result.show { display:block; }
 .setback-row { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px solid var(--border); font-size:.83rem; }
 .setback-row:last-child { border-bottom:none; }
 .setback-row .k { color:var(--text-sub); }
 .setback-row .v-ok { color:#10b981; font-weight:700; }
 .setback-row .v-warn { color:#f59e0b; font-weight:700; }
 .setback-row .v-ng { color:#dc2626; font-weight:700; }


 .custom-law-wrap { display:flex; flex-direction:column; gap:8px; }
 .custom-law-item {
 display:grid; grid-template-columns:1fr 1fr 1fr 80px 40px;
 gap:6px; align-items:center; padding:10px; border-radius:10px;
 background:var(--bg); border:1px solid var(--border);
 }
 @media(max-width:600px){ .custom-law-item { grid-template-columns:1fr; } }
 .custom-law-inp {
 padding:6px 10px; border:1.5px solid var(--border);
 border-radius:8px; background:var(--card-bg);
 color:var(--text-main); font-size:.8rem; font-family:inherit;
 width:100%;
 }
 .custom-law-del {
 background:none; border:1.5px solid #fca5a5;
 color:#dc2626; border-radius:7px; padding:5px 8px;
 cursor:pointer; font-size:.75rem; font-family:inherit;
 transition:all .15s;
 }
 .custom-law-del:hover { background:#fee2e2; }


 .law-ref-grid {
 display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
 gap:10px;
 }
 .law-ref-card {
 display:flex; flex-direction:column; gap:5px;
 padding:14px; border-radius:12px;
 background:var(--primary-light); border:1.5px solid var(--sky-border);
 text-decoration:none; transition:all .18s;
 }
 .law-ref-card:hover { background:var(--primary); border-color:var(--primary); }
 .law-ref-card:hover .law-ref-name,
 .law-ref-card:hover .law-ref-desc { color:#fff; }
 .law-ref-icon { font-size:1.3rem; }
 .law-ref-name { font-size:.83rem; font-weight:700; color:var(--text-main); }
 .law-ref-desc { font-size:.72rem; color:var(--text-sub); line-height:1.4; }

 [data-theme="dark"] .law-form-sel,
 [data-theme="dark"] .law-form-inp,
 [data-theme="dark"] .custom-law-inp { background:#0f172a; border-color:#334155; color:#f1f5f9; }
 [data-theme="dark"] .law-sum-card { background:#1e293b; }
 [data-theme="dark"] .law-modal-box { background:#1e293b; border-color:#334155; }



 
 .jph-home-screen { }
 .jph-detail-screen { }
 .jph-hero-banner { position:relative; border-radius:var(--radius); overflow:hidden; margin-bottom:0; background:linear-gradient(135deg,#0369a1 0%,#0ea5e9 50%,#38bdf8 100%); padding:36px 32px 32px; }
 .jph-hero-bg { position:absolute;inset:0;background-image:radial-gradient(circle at 80% 20%,rgba(255,255,255,.12) 0%,transparent 50%),radial-gradient(circle at 20% 80%,rgba(255,255,255,.08) 0%,transparent 40%);pointer-events:none; }
 .jph-hero-badge { display:inline-flex;align-items:center;gap:6px;padding:5px 14px;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);border-radius:99px;font-size:12px;font-weight:700;color:white;margin-bottom:14px; }
 .jph-hero-title { font-size:28px;font-weight:800;color:white;line-height:1.3;letter-spacing:-1px;margin-bottom:8px;font-family:'Outfit',sans-serif; }
 .jph-hero-sub { font-size:14px;color:rgba(255,255,255,.85);margin-bottom:20px; }
 .jph-search-box { display:flex;align-items:center;gap:0;background:white;border-radius:12px;padding:6px 6px 6px 14px;box-shadow:0 8px 32px rgba(0,0,0,.15);max-width:560px;margin-bottom:14px; }
 .jph-search-icon { font-size:16px;margin-right:4px;flex-shrink:0; }
 .jph-search-inp { flex:1;border:none;outline:none;font-size:14px;color:var(--text-main);font-family:inherit;background:transparent;padding:4px 8px; }
 .jph-search-btn { padding:9px 20px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s;flex-shrink:0; }
 .jph-search-btn:hover { transform:translateY(-1px);box-shadow:0 4px 12px rgba(14,165,233,.4); }
 .jph-quick-tags { display:flex;gap:7px;flex-wrap:wrap; }
 .jph-qtag { padding:5px 12px;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);border-radius:99px;font-size:12px;font-weight:600;color:white;cursor:pointer;transition:all .15s;font-family:inherit; }
 .jph-qtag:hover { background:rgba(255,255,255,.32);transform:translateY(-1px); }
 .jph-ai-home-bar { display:flex;align-items:center;gap:14px;padding:14px 18px;background:linear-gradient(135deg,rgba(14,165,233,.07),rgba(99,102,241,.07));border:1px solid rgba(14,165,233,.2);border-radius:var(--radius-sm);margin-bottom:20px;flex-wrap:wrap;gap:10px; }
 .jph-ai-start-btn { padding:9px 18px;background:linear-gradient(135deg,var(--primary),#6366f1);color:white;border:none;border-radius:8px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s;flex-shrink:0; }
 .jph-ai-start-btn:hover { transform:translateY(-1px);box-shadow:0 4px 14px rgba(99,102,241,.4); }
 .jph-home-section-title { font-size:16px;font-weight:800;color:var(--text-main);margin-bottom:14px;display:flex;align-items:center;gap:8px;letter-spacing:-.3px; }
 .jph-listing-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:6px; }
 @media(max-width:1100px){ .jph-listing-grid { grid-template-columns:repeat(2,1fr); } }
 @media(max-width:650px){ .jph-listing-grid { grid-template-columns:1fr; } }
 .jph-listing-card { background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all .22s; }
 .jph-listing-card:hover { transform:translateY(-4px);box-shadow:0 12px 32px rgba(14,165,233,.18);border-color:var(--primary); }
 .jph-listing-img { height:150px;display:flex;align-items:center;justify-content:center;position:relative; }
 .jph-listing-badges { position:absolute;top:10px;left:10px;display:flex;gap:5px; }
 .jph-listing-badge { padding:3px 8px;border-radius:5px;font-size:10.5px;font-weight:700; }
 .badge-sell { background:rgba(16,185,129,.12);color:#059669;border:1px solid rgba(16,185,129,.35); }
 .badge-jeonse { background:rgba(14,165,233,.13);color:#0369a1;border:1px solid rgba(14,165,233,.3); }
 .badge-wolse { background:rgba(245,158,11,.12);color:#D97706;border:1px solid rgba(245,158,11,.35); }
 .badge-new { background:rgba(16,185,129,.12);color:#10b981;border:1px solid rgba(16,185,129,.25); }
 .jph-listing-heart { position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border:1px solid var(--border);color:#f43f5e;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s; }
 .jph-listing-heart:hover { background:white;transform:scale(1.1); }
 .jph-listing-body { padding:14px; }
 .jph-listing-price { font-size:17px;font-weight:800;color:var(--text-main);letter-spacing:-.5px;margin-bottom:4px;font-family:'Outfit',sans-serif; }
 .jph-listing-name { font-size:13.5px;font-weight:600;color:var(--text-main);margin-bottom:4px; }
 .jph-listing-addr { font-size:12px;color:var(--text-muted);margin-bottom:8px; }
 .jph-listing-specs { display:flex;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--text-sub);margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border); }
 .jph-listing-meta { display:flex;gap:10px;font-size:11px;color:var(--text-muted); }
 .jph-more-btn { padding:12px 32px;background:var(--card-bg);border:1.5px solid var(--border);border-radius:99px;font-size:13px;font-weight:700;color:var(--text-sub);cursor:pointer;transition:all .2s;font-family:inherit; }
 .jph-more-btn:hover { border-color:var(--primary);color:var(--primary-dark);background:var(--primary-light); }
 .jph-back-btn { display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--card-bg);border:1px solid var(--border);border-radius:99px;font-size:13px;font-weight:600;color:var(--text-sub);cursor:pointer;transition:all .2s;font-family:inherit;margin-bottom:14px; }
 .jph-back-btn:hover { border-color:var(--primary);color:var(--primary-dark);background:var(--primary-light); }

 [data-theme="dark"] .jph-search-box { background:#1e293b;border:1px solid #334155; }
 [data-theme="dark"] .jph-search-inp { color:#f1f5f9; }
 [data-theme="dark"] .jph-listing-card { background:#1e293b;border-color:#334155; }
 [data-theme="dark"] .jph-listing-heart { background:rgba(30,41,59,.88);border-color:#334155; }
 [data-theme="dark"] .jph-more-btn { background:#1e293b;border-color:#334155;color:#94a3b8; }
 [data-theme="dark"] .jph-back-btn { background:#1e293b;border-color:#334155;color:#94a3b8; }
 [data-theme="dark"] .jph-hero-banner { background:linear-gradient(135deg,#0c2233 0%,#0369a1 50%,#0ea5e9 100%); }

 .jph-wrap { font-family: 'Noto Sans KR', sans-serif; color: var(--text-main); }
 .jph-filter-bar { background: var(--bg); border: 1px solid var(--sky-border); border-radius: var(--radius-sm); padding: 10px 14px; display:flex; align-items:center; gap:8px; overflow-x:auto; scrollbar-width:none; margin-bottom:16px; flex-wrap:wrap; }
 .jph-filter-bar::-webkit-scrollbar { display:none; }
 .jph-chip { display:inline-flex; align-items:center; justify-content:center; padding:0; width:76px; height:32px; border:1px solid var(--border); border-radius:999px; font-size:.78rem; font-weight:600; color:var(--text-muted); cursor:pointer; transition:all .15s; white-space:nowrap; background:var(--card-bg); font-family:inherit; }
 .jph-chip:hover { border-color:var(--sky-border); color:var(--primary-dark); background:var(--sky-1); }
 .jph-chip.active { background:var(--sky-1); border-color:var(--primary); color:var(--primary-dark); font-weight:700; }
 .jph-chip.active-lime { background:rgba(16,185,129,.1); border-color:#10b981; color:#059669; font-weight:700; }
 .jph-chip.active-amber { background:rgba(245,158,11,.1); border-color:#f59e0b; color:#D97706; font-weight:700; }
 .jph-sep { width:1px; height:18px; background:var(--border); margin:0 4px; flex-shrink:0; }
 .jph-fsel { padding:0 28px 0 12px; height:32px; background:var(--bg); border:1px solid var(--border); border-radius:99px; color:var(--text-sub); font-size:.78rem; font-weight:600; cursor:pointer; outline:none; appearance:none; font-family:inherit; flex-shrink:0; }
 .jph-fsel:hover { border-color:var(--primary); }
 .jph-breadcrumb { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-muted); margin-bottom:12px; flex-wrap:wrap; }
 .jph-breadcrumb a { color:var(--text-muted); text-decoration:none; }
 .jph-breadcrumb a:hover { color:var(--primary); }
 .jph-tags { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
 .jph-tag { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:6px; font-size:11px; font-weight:700; }
 .jph-tag-sell { background:rgba(244,63,94,.10); color:#F43F5E; border:1px solid rgba(244,63,94,.2); }
 .jph-tag-type { background:var(--primary-light); color:var(--primary-dark); border:1px solid var(--sky-border); }
 .jph-tag-new { background:rgba(16,185,129,.10); color:#10b981; border:1px solid rgba(16,185,129,.2); }
 .jph-title { font-size:22px; font-weight:700; color:var(--text-main); letter-spacing:-.5px; margin-bottom:6px; font-family:'Outfit',sans-serif; }
 .jph-addr { font-size:13px; color:var(--text-sub); display:flex; align-items:center; gap:5px; }
 .jph-meta { display:flex; gap:14px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); font-size:12px; color:var(--text-muted); flex-wrap:wrap; }
 .jph-ai-bar { display:flex; align-items:center; gap:10px; padding:12px 16px; background:linear-gradient(135deg,rgba(14,165,233,.07),rgba(59,130,246,.07)); border:1px solid rgba(14,165,233,.22); border-radius:var(--radius-sm); margin-bottom:16px; }
 .jph-ai-ring { width:44px; height:44px; flex-shrink:0; position:relative; }
 .jph-ai-ring svg { transform:rotate(-90deg); }
 .jph-ai-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--primary-dark); font-family:'Outfit',sans-serif; }
 .jph-ai-title { font-size:13px; font-weight:700; color:var(--primary-dark); margin-bottom:2px; }
 .jph-ai-desc { font-size:11.5px; color:var(--text-sub); line-height:1.5; }
 .jph-ai-badge { display:flex; align-items:center; gap:4px; padding:5px 10px; border-radius:99px; background:var(--primary-light); border:1px solid var(--sky-border); font-size:11px; font-weight:600; color:var(--primary-dark); flex-shrink:0; }
 .jph-gallery { border-radius:var(--radius); overflow:hidden; position:relative; background:var(--primary-light); aspect-ratio:16/9; margin-bottom:20px; }
 .jph-slide-track { display:flex; height:100%; transition:transform .45s cubic-bezier(.25,.46,.45,.94); }
 .jph-slide { flex-shrink:0; width:100%; height:100%; position:relative; overflow:hidden; }
 .jph-slide-bg { width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; }
 .jph-slide-1 { background:linear-gradient(135deg,#BAE6FD,#E0F2FE); }
 .jph-slide-2 { background:linear-gradient(135deg,#DDD6FE,#EDE9FE); }
 .jph-slide-3 { background:linear-gradient(135deg,#A7F3D0,#D1FAE5); }
 .jph-slide-4 { background:linear-gradient(135deg,#FED7AA,#FEF3C7); }
 .jph-slide-icon { font-size:48px; opacity:.35; }
 .jph-slide-label { font-size:12px; color:rgba(15,23,42,.5); font-weight:600; letter-spacing:1px; }
 .jph-gallery-nav { position:absolute; top:50%; transform:translateY(-50%); width:100%; display:flex; justify-content:space-between; padding:0 14px; pointer-events:none; z-index:10; }
 .jph-gallery-btn { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.85); backdrop-filter:blur(12px); border:1px solid var(--border); color:var(--primary-dark); cursor:pointer; display:flex; align-items:center; justify-content:center; pointer-events:all; transition:all .2s; font-size:16px; }
 .jph-gallery-btn:hover { background:white; }
 .jph-gallery-dots { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:5px; z-index:10; }
 .jph-dot { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; transition:all .2s; }
 .jph-dot.active { width:20px; border-radius:3px; background:white; }
 .jph-gallery-counter { position:absolute; bottom:16px; right:16px; background:rgba(255,255,255,.88); color:var(--text-main); font-size:12px; font-weight:600; padding:4px 10px; border-radius:99px; z-index:10; border:1px solid var(--border); }
 .jph-gallery-pills { position:absolute; top:14px; left:14px; display:flex; gap:6px; z-index:10; }
 .jph-gallery-pill { display:flex; align-items:center; gap:5px; padding:5px 12px; background:rgba(255,255,255,.88); backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:99px; color:var(--primary-dark); font-size:12px; font-weight:600; cursor:pointer; }
 .jph-spec-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
 .jph-spec-card { background:var(--card-bg); border:1.5px solid var(--sky-border); border-radius:var(--radius-sm); padding:14px 16px; transition:all .2s; }
 .jph-spec-card:hover { border-color:var(--primary); transform:translateY(-2px); box-shadow:0 6px 16px rgba(14,165,233,.12); }
 .jph-spec-card.hot { border-color:var(--primary); background:var(--primary-light); }
 .jph-spec-label { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.8px; margin-bottom:6px; }
 .jph-spec-value { font-size:20px; font-weight:800; color:var(--text-main); letter-spacing:-.5px; font-family:'Outfit',sans-serif; }
 .jph-spec-sub { font-size:11px; color:var(--text-sub); margin-top:3px; }
 .jph-section { background:var(--card-bg); border:1px solid var(--sky-border); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:16px; }
 .jph-sec-head { padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; background:linear-gradient(135deg,rgba(14,165,233,.04),transparent); flex-wrap:wrap; gap:8px; }
 .jph-sec-title { font-size:14px; font-weight:700; color:var(--text-main); display:flex; align-items:center; gap:8px; }
 .jph-sec-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
 .jph-icon-blue{background:rgba(59,130,246,.12);} .jph-icon-coral{background:rgba(244,63,94,.12);} .jph-icon-lime{background:rgba(16,185,129,.12);} .jph-icon-amber{background:rgba(245,158,11,.12);} .jph-icon-purple{background:rgba(139,92,246,.12);}
 .jph-sec-body { padding:16px; }
 .jph-map { width:100%; height:180px; background:linear-gradient(135deg,#e0f2fe,#bae6fd); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; margin-bottom:14px; }
 .jph-map-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(14,165,233,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(14,165,233,.08) 1px,transparent 1px); background-size:30px 30px; }
 .jph-map-pin { width:36px; height:36px; background:var(--primary); border-radius:50% 50% 50% 0; transform:rotate(-45deg); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(14,165,233,.4); z-index:1; }
 .jph-map-pin-dot { width:12px; height:12px; background:white; border-radius:50%; transform:rotate(45deg); }
 .jph-map-label { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); background:white; padding:4px 12px; border-radius:99px; font-size:12px; font-weight:600; color:var(--text-main); border:1px solid var(--sky-border); white-space:nowrap; }
 .jph-infra-list { display:flex; flex-direction:column; gap:8px; }
 .jph-infra-item { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bg); border:1px solid var(--border); border-radius:8px; transition:all .15s; }
 .jph-infra-item:hover { border-color:var(--primary); background:var(--primary-light); }
 .jph-infra-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
 .jph-subway{background:rgba(14,165,233,.12);} .jph-bus{background:rgba(16,185,129,.12);} .jph-mart{background:rgba(245,158,11,.12);} .jph-hosp{background:rgba(244,63,94,.12);}
 .jph-infra-name { font-size:13px; font-weight:600; color:var(--text-main); }
 .jph-infra-detail { font-size:11.5px; color:var(--text-muted); }
 .jph-infra-dist { margin-left:auto; font-size:12px; font-weight:700; color:var(--primary-dark); white-space:nowrap; }
 .jph-tabs-row { display:flex; gap:6px; flex-wrap:wrap; }
 .jph-tab-btn { padding:.3rem .85rem; border-radius:999px; border:1px solid var(--border); background:var(--card-bg); color:var(--text-muted); font-size:.78rem; font-weight:600; cursor:pointer; font-family:inherit; transition:all .15s; }
 .jph-tab-btn.active { background:var(--sky-1); border-color:var(--primary); color:var(--primary-dark); font-weight:700; }
 .jph-tab-panel { display:none; } .jph-tab-panel.active { display:block; }
 .jph-chart-wrap { position:relative; height:140px; overflow:hidden; margin-bottom:8px; }
 .jph-chart-svg { width:100%; height:100%; }
 .jph-chart-labels { display:flex; justify-content:space-between; font-size:10px; color:var(--text-muted); margin-bottom:10px; }
 .jph-chart-legend { display:flex; gap:14px; font-size:11px; color:var(--text-sub); }
 .jph-legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
 .jph-trade-table { width:100%; border-collapse:collapse; font-size:12.5px; margin-top:12px; }
 .jph-trade-table th { background:var(--sky-1); color:var(--sky-7); padding:8px 10px; text-align:left; font-weight:700; border-bottom:2px solid var(--sky-border); font-size:11.5px; }
 .jph-trade-table td { padding:8px 10px; border-bottom:1px solid var(--border); }
 .jph-trade-table tr:hover { background:var(--primary-light); }
 .jph-trade-price { font-weight:700; color:var(--text-main); }
 .jph-trade-up { color:#10b981; font-weight:700; } .jph-trade-down { color:#f43f5e; font-weight:700; }
 .jph-amenity-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
 .jph-amenity-item { padding:12px 8px; border:1.5px solid var(--border); border-radius:10px; text-align:center; transition:all .18s; }
 .jph-amenity-item.ok { border-color:var(--sky-border); background:var(--primary-light); }
 .jph-amenity-item.unavailable { opacity:.45; }
 .jph-amenity-icon { font-size:20px; margin-bottom:4px; }
 .jph-amenity-label { font-size:11px; color:var(--text-sub); font-weight:500; }
 .jph-amenity-item.ok .jph-amenity-label { color:var(--primary-dark); }
 .jph-accordion { border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
 .jph-accordion-item { border-bottom:1px solid var(--border); }
 .jph-accordion-item:last-child { border-bottom:none; }
 .jph-acc-trigger { width:100%; display:flex; align-items:center; justify-content:space-between; padding:13px 16px; background:transparent; border:none; cursor:pointer; text-align:left; font-size:13.5px; font-weight:600; color:var(--text-main); gap:10px; font-family:inherit; transition:background .15s; }
 .jph-acc-trigger:hover { background:var(--primary-light); }
 .jph-acc-arrow { font-size:14px; color:var(--primary); transition:transform .3s; flex-shrink:0; }
 .jph-acc-body { max-height:0; overflow:hidden; transition:max-height .35s ease; }
 .jph-acc-body.open { max-height:600px; }
 .jph-acc-content { padding:14px 16px 16px; border-top:1px solid var(--border); font-size:13px; color:var(--text-sub); line-height:1.8; }
 .jph-complex-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
 .jph-complex-item { display:flex; justify-content:space-between; align-items:center; padding:9px 12px; background:var(--bg); border-radius:8px; border:1px solid var(--border); }
 .jph-complex-key { font-size:12px; color:var(--text-muted); } .jph-complex-val { font-size:12.5px; font-weight:600; color:var(--text-main); }
 .jph-school-list { display:flex; flex-direction:column; gap:7px; }
 .jph-school-item { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--bg); border:1px solid var(--border); border-radius:8px; transition:all .15s; }
 .jph-school-item:hover { border-color:var(--primary); background:var(--primary-light); }
 .jph-school-badge { padding:3px 8px; border-radius:5px; font-size:10px; font-weight:700; flex-shrink:0; }
 .jph-badge-elem{background:var(--primary-light);color:var(--primary-dark);} .jph-badge-mid{background:rgba(124,58,237,.10);color:#6D28D9;} .jph-badge-high{background:rgba(245,158,11,.10);color:#B45309;} .jph-badge-hakwon{background:rgba(244,63,94,.10);color:#F43F5E;}
 .jph-school-name { font-size:13px; font-weight:600; color:var(--text-main); flex:1; }
 .jph-school-dist { font-size:11.5px; color:var(--text-muted); }
 .jph-fee-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
 .jph-fee-item { padding:10px 12px; background:var(--bg); border:1px solid var(--border); border-radius:8px; display:flex; justify-content:space-between; align-items:center; }
 .jph-fee-key { font-size:12px; color:var(--text-muted); } .jph-fee-val { font-size:12.5px; font-weight:600; color:var(--text-main); }
 .jph-desc-hl { display:flex; align-items:center; gap:7px; padding:10px 16px; background:linear-gradient(90deg,rgba(14,165,233,.10),transparent); border:1px solid rgba(14,165,233,.22); border-radius:10px; font-size:13px; font-weight:600; color:var(--primary-dark); margin-bottom:14px; }
 .jph-desc-text { font-size:13.5px; color:var(--text-sub); line-height:1.9; }
 .jph-similar-scroll { display:flex; gap:14px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; margin-top:12px; }
 .jph-similar-scroll::-webkit-scrollbar { display:none; }
 .jph-similar-card { flex-shrink:0; width:195px; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; transition:all .2s; }
 .jph-similar-card:hover { border-color:var(--primary); transform:translateY(-2px); box-shadow:0 6px 16px rgba(14,165,233,.15); }
 .jph-similar-info { padding:12px 14px; }
 .jph-similar-price { font-size:14px; font-weight:700; color:var(--text-main); }
 .jph-similar-name { font-size:12px; color:var(--text-muted); margin-top:2px; }
 .jph-similar-specs { display:flex; gap:8px; margin-top:8px; padding-top:8px; border-top:1px solid var(--border); font-size:11px; color:var(--text-muted); flex-wrap:wrap; }
 .jph-layout { display:grid; grid-template-columns:1fr minmax(200px,220px); gap:14px; align-items:start; }
 .jph-price-card { background:var(--card-bg); border:1.5px solid var(--sky-border); border-radius:var(--radius); padding:14px; overflow:hidden; position:relative; box-shadow:var(--shadow); margin-bottom:10px; min-width:0; }
 .jph-price-label { font-size:10.5px; font-weight:700; color:var(--text-muted); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:6px; }
 .jph-price-main { font-size:21px; font-weight:800; color:var(--text-main); letter-spacing:-1px; line-height:1.1; margin-bottom:4px; font-family:'Outfit',sans-serif; }
 .jph-price-sub { font-size:11px; color:var(--text-muted); margin-bottom:8px; }
 .jph-price-vs { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:99px; background:rgba(16,185,129,.10); border:1px solid rgba(16,185,129,.25); font-size:10px; font-weight:700; color:#10b981; margin-bottom:8px; }
 .jph-price-rows { display:flex; flex-direction:column; }
 .jph-price-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-top:1px solid var(--border); font-size:11.5px; }
 .jph-price-row:first-child { border-top:none; }
 .jph-price-key { color:var(--text-muted); font-size:10.5px; } .jph-price-val { font-weight:600; color:var(--text-sub); font-size:11px; text-align:right; word-break:keep-all; }
 .jph-price-val.ok { color:#10b981; }
 .jph-cta-stack { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
 .jph-cta-btn { display:flex; align-items:center; justify-content:center; gap:6px; padding:9px; border-radius:var(--radius-sm); font-size:12.5px; font-weight:700; cursor:pointer; border:none; transition:all .2s; width:100%; font-family:inherit; }
 .jph-cta-primary { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:white; box-shadow:0 4px 12px rgba(14,165,233,.35); }
 .jph-cta-primary:hover { transform:translateY(-1px); }
 .jph-cta-secondary { background:var(--bg); color:var(--text-main); border:1px solid var(--border); }
 .jph-cta-secondary:hover { border-color:var(--primary); background:var(--primary-light); color:var(--primary-dark); }
 .jph-cta-kakao { background:#FAE100; color:#3B1D00; }
 .jph-cta-kakao:hover { background:#FFE933; transform:translateY(-1px); }
 .jph-action-bar { display:flex; gap:6px; margin-bottom:10px; }
 .jph-action-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:4px; padding:8px 6px; border:1px solid var(--border); border-radius:10px; background:var(--card-bg); font-size:11px; color:var(--text-sub); cursor:pointer; transition:all .18s; font-weight:500; font-family:inherit; }
 .jph-action-btn:hover { border-color:var(--primary); color:var(--primary-dark); background:var(--primary-light); }
 .jph-action-btn.fav-active { border-color:#f43f5e; color:#f43f5e; background:rgba(244,63,94,.10); }
 .jph-agent-card { background:var(--card-bg); border:1px solid var(--sky-border); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:10px; }
 .jph-agent-head { padding:11px 14px 10px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; background:linear-gradient(135deg,rgba(14,165,233,.05),transparent); }
 .jph-agent-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
 .jph-agent-name { font-size:13px; font-weight:700; color:var(--text-main); }
 .jph-agent-co { font-size:10.5px; color:var(--text-muted); margin-top:1px; }
 .jph-agent-badge { display:inline-flex; align-items:center; padding:2px 6px; border-radius:5px; background:rgba(16,185,129,.12); color:#10b981; font-size:9.5px; font-weight:700; margin-top:2px; border:1px solid rgba(16,185,129,.2); }
 .jph-agent-body { padding:10px 14px; }
 .jph-agent-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; font-size:11.5px; border-bottom:1px solid var(--border); }
 .jph-agent-row:last-child { border-bottom:none; }
 .jph-agent-key { color:var(--text-muted); } .jph-agent-val { font-weight:500; color:var(--text-sub); }
 .jph-inquiry-card { background:var(--card-bg); border:1px solid var(--sky-border); border-radius:var(--radius-sm); overflow:hidden; }
 .jph-inq-head { padding:11px 14px; border-bottom:1px solid var(--border); font-size:13px; font-weight:700; color:var(--text-main); display:flex; align-items:center; gap:6px; }
 .jph-inq-body { padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
 .jph-form-grp { display:flex; flex-direction:column; gap:4px; }
 .jph-form-lbl { font-size:11px; font-weight:600; color:var(--text-sub); }
 .jph-form-inp, .jph-form-area { width:100%; padding:8px 10px; background:var(--bg); border:1px solid var(--border); border-radius:8px; font-size:12px; color:var(--text-main); outline:none; transition:all .2s; font-family:inherit; }
 .jph-form-inp:focus, .jph-form-area:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(14,165,233,.12); }
 .jph-form-area { height:60px; resize:none; line-height:1.5; }
 .jph-form-submit { display:flex; align-items:center; justify-content:center; gap:6px; padding:9px; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:white; border:none; border-radius:8px; font-size:12.5px; font-weight:700; cursor:pointer; transition:all .2s; width:100%; font-family:inherit; }
 .jph-form-submit:hover { transform:translateY(-1px); box-shadow:0 5px 15px rgba(14,165,233,.4); }
 .jph-dash { background:var(--card-bg); border:1px solid var(--sky-border); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:16px; }
 .jph-dash-head { padding:14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; background:linear-gradient(135deg,rgba(14,165,233,.06),transparent); flex-wrap:wrap; gap:8px; }
 .jph-dash-title { font-size:14px; font-weight:800; color:var(--text-main); font-family:'Outfit',sans-serif; display:flex; align-items:center; gap:8px; }
 .jph-dash-badge { font-size:10px; font-weight:700; color:var(--primary-dark); background:var(--primary-light); border:1px solid var(--sky-border); padding:2px 8px; border-radius:99px; letter-spacing:1px; text-transform:uppercase; }
 .jph-dash-tabs { display:flex; gap:4px; flex-wrap:wrap; }
 .jph-dash-tab { padding:5px 12px; border-radius:8px; font-size:12px; font-weight:600; color:var(--text-muted); cursor:pointer; transition:all .15s; border:none; background:none; font-family:inherit; }
 .jph-dash-tab.active { background:var(--primary-light); color:var(--primary-dark); }
 .jph-dash-tab:hover { color:var(--text-sub); background:var(--bg); }
 .jph-dash-body { padding:16px 18px 18px; }
 .jph-dash-panel { display:none; } .jph-dash-panel.active { display:block; }
 .jph-dash-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; align-items:stretch; }
 .jph-d-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:13px; display:flex; flex-direction:column; transition:border-color .2s; min-height:0; }
 .jph-d-card:hover { border-color:var(--primary); }
 .jph-d-card-title { font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:5px; }
 .jph-cal-hdr { text-align:center; font-size:12px; font-weight:700; color:var(--primary-dark); margin-bottom:10px; }
 .jph-cal-tbl { width:100%; border-collapse:collapse; }
 .jph-cal-tbl th { font-size:9.5px; color:var(--text-muted); text-align:center; padding-bottom:5px; font-weight:600; }
 .jph-cal-tbl td { text-align:center; font-size:11px; color:var(--text-sub); padding:3px 0; border-radius:5px; }
 .jph-cal-today { background:var(--primary) !important; color:white !important; font-weight:800; border-radius:5px; }
 .jph-calc-display { background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:9px 12px; text-align:right; font-family:'Courier New',monospace; font-size:17px; font-weight:600; color:var(--text-main); margin-bottom:9px; min-height:44px; display:flex; align-items:center; justify-content:flex-end; }
 .jph-calc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; align-content:stretch; }
 .jph-calc-btn { border:1px solid var(--border); background:var(--card-bg); border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; color:var(--text-main); transition:all .1s; padding:7px 4px; font-family:inherit; width:100%; }
 .jph-calc-btn:hover { background:var(--primary-light); border-color:var(--primary); color:var(--primary-dark); }
 .jph-calc-btn.op { color:var(--primary-dark); } .jph-calc-btn.eq { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:white; border-color:var(--primary-dark); } .jph-calc-btn.clr { color:#f43f5e; }
 .jph-unit-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
 .jph-unit-lbl { font-size:11.5px; font-weight:700; color:var(--primary-dark); width:25px; flex-shrink:0; }
 .jph-unit-inp { flex:1; padding:7px 9px; background:var(--card-bg); border:1px solid var(--border); border-radius:7px; font-size:13px; font-weight:600; color:var(--text-main); outline:none; transition:border-color .2s; font-family:inherit; }
 .jph-unit-inp:focus { border-color:var(--primary); }
 .jph-unit-hint { font-size:11px; color:var(--text-muted); text-align:center; margin-top:5px; }
 .jph-preset { display:flex; gap:5px; margin-top:7px; flex-wrap:wrap; }
 .jph-preset-btn { padding:3px 8px; border-radius:5px; font-size:11px; font-weight:600; background:var(--primary-light); color:var(--primary-dark); border:1px solid var(--sky-border); cursor:pointer; transition:all .15s; font-family:inherit; }
 .jph-preset-btn:hover { background:var(--primary); color:white; }
 .jph-d-news { grid-column:span 3; max-height:200px; }
 .jph-news-list { overflow-y:auto; flex:1; }
 .jph-news-item { display:flex; align-items:baseline; gap:8px; padding:7px 0; border-bottom:1px solid var(--border); }
 .jph-news-item:last-child { border-bottom:none; }
 .jph-news-date { font-family:monospace; font-size:10px; color:var(--text-muted); font-weight:600; white-space:nowrap; background:var(--bg); padding:1px 5px; border-radius:4px; flex-shrink:0; }
 .jph-news-src { font-size:9.5px; color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
 .jph-news-link { font-size:12px; font-weight:500; color:var(--text-main); text-decoration:none; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; flex:1; }
 .jph-news-link:hover { color:var(--primary-dark); }
 .jph-market-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
 .jph-comm-panel { display:none; } .jph-comm-panel.active { display:block; }
 .jph-comm-list { display:flex; flex-direction:column; }
 .jph-comm-item { display:flex; gap:12px; padding:13px 16px; border-bottom:1px solid var(--border); transition:background .15s; }
 .jph-comm-item:last-child { border-bottom:none; }
 .jph-comm-item:hover { background:var(--primary-light); }
 .jph-comm-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:white; flex-shrink:0; }
 .jph-comm-content { flex:1; min-width:0; }
 .jph-comm-meta { display:flex; align-items:center; gap:7px; margin-bottom:5px; flex-wrap:wrap; }
 .jph-comm-name { font-size:13px; font-weight:700; color:var(--text-main); }
 .jph-comm-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:99px; font-size:10.5px; font-weight:700; }
 .jph-comm-badge-owner { background:rgba(14,165,233,.12); color:var(--primary-dark); border:1px solid rgba(14,165,233,.2); }
 .jph-comm-badge-expert { background:rgba(245,158,11,.12); color:#D97706; border:1px solid rgba(245,158,11,.2); }
 .jph-comm-time { font-size:11.5px; color:var(--text-muted); margin-left:auto; }
 .jph-comm-text { font-size:13px; color:var(--text-sub); line-height:1.65; margin-bottom:7px; }
 .jph-comm-reply { display:flex; align-items:flex-start; gap:6px; padding:8px 12px; background:var(--bg); border-left:3px solid var(--primary); border-radius:0 8px 8px 0; margin-bottom:7px; font-size:12.5px; color:var(--text-sub); }
 .jph-comm-actions { display:flex; gap:8px; }
 .jph-comm-react { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:99px; background:var(--bg); border:1px solid var(--border); font-size:12px; color:var(--text-muted); cursor:pointer; transition:all .15s; font-family:inherit; }
 .jph-comm-react:hover { border-color:var(--primary); color:var(--primary-dark); background:var(--primary-light); }
 .jph-toast { position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--card-bg); border:1px solid var(--border); backdrop-filter:blur(16px); padding:12px 20px; border-radius:99px; font-size:13px; font-weight:600; color:var(--text-main); box-shadow:0 8px 24px rgba(14,165,233,.18); opacity:0; transition:all .3s; z-index:9999; white-space:nowrap; pointer-events:none; }
 .jph-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
 @media(max-width:1100px){ .jph-layout { grid-template-columns:1fr; } }
 @media(max-width:1360px) and (min-width:1101px){ .jph-layout { grid-template-columns:1fr 210px; gap:10px; } }
 @media(max-width:900px){ .jph-spec-grid { grid-template-columns:repeat(2,1fr); } .jph-amenity-grid { grid-template-columns:repeat(4,1fr); } .jph-dash-grid { grid-template-columns:1fr 1fr; } .jph-d-news { grid-column:span 2; } }
 @media(max-width:600px){
   .jph-hero-banner{padding:22px 16px 20px;}
   .jph-hero-title{font-size:20px;}
   .jph-search-box{padding:5px 5px 5px 12px;}
   .jph-search-btn{padding:8px 12px;font-size:12px;}
   .jph-spec-grid{grid-template-columns:1fr 1fr;}
   .jph-amenity-grid{grid-template-columns:repeat(3,1fr);}
   .jph-dash-grid{grid-template-columns:1fr;}
   .jph-d-news{grid-column:span 1;}
   .jph-market-grid{grid-template-columns:1fr;}
   .jph-title{font-size:17px;}
   .jph-price-main{font-size:17px;}
 }





 .atk-channels { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
 .atk-ch-btn {
 display:inline-flex; align-items:center; gap:5px;
 padding:8px 16px; border-radius:999px;
 border:1.5px solid var(--border);
 background:var(--card-bg); color:var(--text-sub);
 font-size:.8rem; font-weight:600;
 cursor:pointer; font-family:inherit; transition:all .15s;
 }
 .atk-ch-btn:hover { border-color:var(--primary); color:var(--primary-dark); background:var(--primary-light); }
 .atk-ch-btn.active { border-color:var(--primary); background:var(--primary); color:#fff; }
 .atk-ch-btn .atk-count { font-size:.68rem; opacity:.75; font-weight:500; }


 .atk-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
 .atk-search-wrap { flex:1; min-width:160px; position:relative; }
 .atk-search-wrap svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); opacity:.35; }
 .atk-search {
 width:100%; padding:8px 11px 8px 33px;
 border:1.5px solid var(--border); border-radius:10px;
 background:var(--card-bg); color:var(--text-main);
 font-size:.82rem; font-family:inherit;
 }
 .atk-search:focus { outline:none; border-color:var(--primary); }
 .atk-write-btn {
 padding:8px 18px; border-radius:10px;
 background:var(--primary); color:#fff;
 border:none; font-size:.82rem; font-weight:700;
 cursor:pointer; font-family:inherit; white-space:nowrap;
 transition:background .15s;
 }
 .atk-write-btn:hover { background:var(--primary-dark); }
 .atk-sort-sel {
 padding:8px 12px; border:1.5px solid var(--border);
 border-radius:10px; background:var(--card-bg);
 color:var(--text-sub); font-size:.8rem; font-family:inherit;
 }


 .atk-post {
 display:flex; align-items:center; gap:12px;
 padding:13px 16px; border-bottom:1px solid var(--border);
 cursor:pointer; transition:background .14s;
 }
 .atk-post:last-child { border-bottom:none; }
 .atk-post:hover { background:var(--primary-light); }
 .atk-post-left { flex:1; min-width:0; }
 .atk-post-ch {
 display:inline-block; padding:2px 8px; border-radius:5px;
 font-size:10px; font-weight:700; margin-bottom:4px;
 letter-spacing:.02em;
 }
 .atk-post-title { font-size:.88rem; font-weight:600; color:var(--text-main); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 .atk-post-preview { font-size:.75rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:5px; }
 .atk-post-meta { display:flex; gap:10px; font-size:.71rem; color:var(--text-muted); flex-wrap:wrap; }
 .atk-post-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
 .atk-badge-hot { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; font-size:10px; font-weight:800; padding:2px 7px; border-radius:5px; }
 .atk-badge-new { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; font-size:10px; font-weight:700; padding:2px 7px; border-radius:5px; }
 .atk-stat-row { display:flex; gap:8px; font-size:.72rem; color:var(--text-muted); }


 .atk-view-ch { display:inline-block; padding:3px 10px; border-radius:6px; font-size:11px; font-weight:700; margin-bottom:10px; }
 .atk-view-title { font-size:1.1rem; font-weight:800; color:var(--text-main); margin-bottom:8px; line-height:1.4; }
 .atk-view-meta { display:flex; gap:12px; font-size:.75rem; color:var(--text-muted); margin-bottom:16px; flex-wrap:wrap; }
 .atk-view-body { font-size:.88rem; line-height:1.85; color:var(--text-main); white-space:pre-wrap; padding:16px; background:var(--bg); border-radius:10px; margin-bottom:16px; }


 .atk-react-bar { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
 .atk-react-btn {
 display:inline-flex; align-items:center; gap:5px;
 padding:8px 16px; border-radius:999px;
 border:1.5px solid var(--border); background:var(--card-bg);
 font-size:.8rem; font-weight:600; color:var(--text-sub);
 cursor:pointer; font-family:inherit; transition:all .15s;
 }
 .atk-react-btn:hover { border-color:var(--primary); color:var(--primary); }
 .atk-react-btn.on { background:var(--primary-light); border-color:var(--primary); color:var(--primary-dark); }
 .atk-react-btn.dislike.on { background:#fef2f2; border-color:#fca5a5; color:#dc2626; }
 .atk-buje-btn.on { background:#fef9c3; border-color:#fde68a; color:#854d0e; }


 .atk-comment { padding:12px 14px; background:var(--bg); border-radius:10px; margin-bottom:8px; }
 .atk-comment-meta { font-size:.72rem; color:var(--text-muted); margin-bottom:6px; display:flex; gap:8px; }
 .atk-comment-body { font-size:.84rem; color:var(--text-main); line-height:1.6; }
 .atk-comment-input-area { display:flex; gap:8px; margin-top:14px; }
 .atk-comment-input {
 flex:1; padding:9px 13px;
 border:1.5px solid var(--border); border-radius:10px;
 background:var(--card-bg); color:var(--text-main);
 font-size:.84rem; font-family:inherit;
 }
 .atk-comment-input:focus { outline:none; border-color:var(--primary); }
 .atk-comment-submit {
 padding:9px 16px; border-radius:10px;
 background:var(--primary); color:#fff;
 border:none; font-size:.82rem; font-weight:700;
 cursor:pointer; font-family:inherit; white-space:nowrap;
 }


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

 /* ── 조회수 TOP 5 고정 영역 ── */
 .atk-pinned-section {
   background: var(--card-bg);
   border: 2px solid var(--sky-border);
   border-radius: var(--radius);
   padding: 14px 16px;
   margin-bottom: 14px;
 }
 .atk-pinned-header {
   display: flex; align-items: center; gap: 8px;
   font-size: .85rem; font-weight: 800; color: var(--primary-dark);
   margin-bottom: 10px; padding-bottom: 8px;
   border-bottom: 1.5px solid var(--sky-border);
 }
 .atk-pinned-header .pin-icon { font-size: 1rem; }
 .atk-pinned-header .pin-sub {
   margin-left: auto; font-size: .7rem; font-weight: 500;
   color: var(--text-muted); background: var(--sky-1);
   border-radius: 99px; padding: 2px 9px;
   border: 1px solid var(--sky-border);
 }
 .atk-pinned-row {
   display: flex; align-items: center; gap: 10px;
   padding: 7px 0; border-bottom: 1px solid var(--border);
   cursor: pointer; transition: background .12s;
 }
 .atk-pinned-row:last-child { border-bottom: none; }
 .atk-pinned-row:hover .atk-pinned-title { color: var(--primary); }
 .atk-pinned-num {
   width: 22px; height: 22px; border-radius: 50%;
   background: var(--primary); color: #fff;
   font-size: .72rem; font-weight: 800;
   display: flex; align-items: center; justify-content: center;
   flex-shrink: 0;
 }
 .atk-pinned-num.top1 { background: #f59e0b; }
 .atk-pinned-num.top2 { background: #94a3b8; }
 .atk-pinned-num.top3 { background: #cd7c3a; }
 .atk-pinned-ch {
   font-size: .7rem; font-weight: 700; padding: 1px 7px;
   border-radius: 5px; flex-shrink: 0;
 }
 .atk-pinned-title {
   flex: 1; font-size: .83rem; color: var(--text-main);
   line-height: 1.4; font-weight: 500;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
 .atk-pinned-meta {
   display: flex; gap: 8px; align-items: center; flex-shrink: 0;
 }
 .atk-pinned-views { font-size: .72rem; color: var(--text-muted); }
 .atk-pinned-hot-badge {
   background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5;
   font-size: .68rem; font-weight: 800; padding: 1px 6px;
   border-radius: 5px; flex-shrink: 0;
 }
 .atk-pinned-days {
   font-size: .68rem; color: var(--text-muted);
   background: var(--bg); border-radius: 99px;
   padding: 1px 7px; border: 1px solid var(--border);
 }
 [data-theme="dark"] .atk-pinned-section {
   background: #1e293b !important;
   border: 1px solid #334155 !important;
   box-shadow: 0 4px 16px rgba(0,0,0,.25) !important;
 }
 [data-theme="dark"] .atk-pinned-header {
   color: #f1f5f9 !important;
   border-bottom: 1px solid #334155 !important;
 }
 [data-theme="dark"] .atk-pinned-header .pin-sub {
   background: #0c2233 !important;
   color: #38bdf8 !important;
   border-color: #1e4a6e !important;
 }
 [data-theme="dark"] .atk-pinned-row {
   border-bottom-color: #334155 !important;
   transition: background .15s;
 }
 [data-theme="dark"] .atk-pinned-row:hover {
   background: #0c2233 !important;
   border-radius: 8px;
 }
 [data-theme="dark"] .atk-pinned-num {
   background: #0284c7 !important;
   box-shadow: none !important;
 }
 [data-theme="dark"] .atk-pinned-num.top1 {
   background: linear-gradient(135deg,#d97706,#f59e0b) !important;
   box-shadow: 0 0 8px rgba(245,158,11,.4) !important;
 }
 [data-theme="dark"] .atk-pinned-num.top2 {
   background: linear-gradient(135deg,#64748b,#94a3b8) !important;
   box-shadow: none !important;
 }
 [data-theme="dark"] .atk-pinned-num.top3 {
   background: linear-gradient(135deg,#92400e,#cd7c3a) !important;
   box-shadow: 0 0 8px rgba(205,124,58,.3) !important;
 }
 [data-theme="dark"] .atk-pinned-title { color: #f1f5f9 !important; }
 [data-theme="dark"] .atk-pinned-row:hover .atk-pinned-title {
   color: #38bdf8 !important;
 }
 [data-theme="dark"] .atk-pinned-views { color: #64748b !important; }
 [data-theme="dark"] .atk-pinned-hot-badge {
   background: rgba(220,38,38,.15) !important;
   color: #f87171 !important;
   border-color: rgba(248,113,113,.3) !important;
 }
 [data-theme="dark"] .atk-pinned-days {
   background: #0f172a !important;
   color: #64748b !important;
   border-color: #334155 !important;
 }


 .atk-anon-notice {
 background: var(--sky-1);
 border: 1px solid var(--sky-border);
 border-radius: 12px; padding: 12px 16px;
 display: flex; align-items: center; gap: 10px;
 font-size: .78rem; color: var(--primary-dark); margin-bottom: 14px;
 }
 .atk-anon-notice .icon { font-size:1.2rem; flex-shrink:0; }
 [data-theme="dark"] .atk-anon-notice {
 background: linear-gradient(135deg,#0c2233,#1e293b);
 border-color: rgba(14,165,233,.2);
 color: #94a3b8;
 }


 [data-theme="dark"] .atk-search,
 [data-theme="dark"] .atk-sort-sel { background:#0f172a; border-color:#334155; color:#f1f5f9; }
 [data-theme="dark"] .atk-post:hover { background:#0c2233; }
 [data-theme="dark"] .atk-comment { background:#0f172a; }
 [data-theme="dark"] .atk-comment-input { background:#0f172a; border-color:#334155; color:#f1f5f9; }

 /* ══ 익명토크 — 다크모드 블루 테마 ══ */
 [data-theme="dark"] .atk-ch-btn {
   background: #1e293b;
   border-color: #334155;
   color: #94a3b8;
 }
 [data-theme="dark"] .atk-ch-btn:hover {
   background: #0c2233;
   border-color: #38bdf8;
   color: #f1f5f9;
   transform: translateY(-1px);
 }
 [data-theme="dark"] .atk-ch-btn.active {
   background: #0284c7;
   border-color: #38bdf8;
   color: #fff;
   box-shadow: 0 0 10px rgba(14,165,233,.25);
 }

 [data-theme="dark"] .atk-search:focus {
   border-color: #38bdf8 !important;
   box-shadow: 0 0 0 3px rgba(14,165,233,.15) !important;
 }
 [data-theme="dark"] .atk-search::placeholder { color: #64748b !important; }
 [data-theme="dark"] .atk-search-wrap svg { color: #64748b; }

 [data-theme="dark"] .atk-write-btn {
   background: #0284c7 !important;
   color: #fff !important;
   border-color: transparent !important;
   box-shadow: 0 2px 8px rgba(14,165,233,.3);
 }
 [data-theme="dark"] .atk-write-btn:hover {
   background: #0369a1 !important;
   box-shadow: 0 4px 14px rgba(14,165,233,.4);
   transform: translateY(-1px);
 }

 [data-theme="dark"] #atk-post-list > div { border-bottom-color: #334155 !important; }
 [data-theme="dark"] .atk-post-title { color: #f1f5f9 !important; }
 [data-theme="dark"] .atk-post-preview { color: #94a3b8 !important; }
 [data-theme="dark"] .atk-post-meta { color: #64748b !important; }
 [data-theme="dark"] .atk-post-ch {
   background: #0c2233 !important;
   color: #38bdf8 !important;
   border-color: #1e4a6e !important;
 }

 [data-theme="dark"] .atk-badge-hot {
   background: rgba(14,165,233,.12);
   color: #38bdf8;
   border-color: rgba(14,165,233,.28);
 }
 [data-theme="dark"] .atk-badge-new {
   background: rgba(52,211,153,.1);
   color: #34d399;
   border-color: rgba(52,211,153,.22);
 }

 [data-theme="dark"] .atk-post-right .atk-stat-row span:first-child { color: #38bdf8 !important; }
 [data-theme="dark"] .atk-post-right .atk-stat-row span:last-child { color: #f87171 !important; }

 [data-theme="dark"] .atk-comment {
   border-left: 2px solid #1e4a6e;
   border-radius: 8px;
 }
 [data-theme="dark"] .atk-comment-meta { color: #64748b !important; }
 [data-theme="dark"] .atk-comment-body { color: #f1f5f9 !important; }
 [data-theme="dark"] .atk-comment-input::placeholder { color: #64748b !important; }
 [data-theme="dark"] .atk-comment-submit {
   background: #0284c7 !important;
   border-color: transparent !important;
   color: #fff !important;
 }

 [data-theme="dark"] .atk-react-btn {
   background: #1e293b;
   border-color: #334155;
   color: #94a3b8;
 }
 [data-theme="dark"] .atk-react-btn:hover {
   border-color: #38bdf8;
   color: #f1f5f9;
   background: #0c2233;
 }
 [data-theme="dark"] .atk-react-btn.on {
   background: #0c2233;
   border-color: #38bdf8;
   color: #38bdf8;
 }

 [data-theme="dark"] .atk-view-title { color: #f1f5f9 !important; }
 [data-theme="dark"] .atk-view-body {
   background: #0f172a !important;
   color: #e2e8f0 !important;
   border-left: 3px solid #334155;
 }
 [data-theme="dark"] .atk-view-meta { color: #64748b !important; }
 [data-theme="dark"] .atk-view-ch { background: #0c2233 !important; color: #38bdf8 !important; }

 [data-theme="dark"] .page-btn {
   background: #1e293b !important;
   border-color: #334155 !important;
   color: #94a3b8 !important;
 }
 [data-theme="dark"] .page-btn:hover,
 [data-theme="dark"] .page-btn.active {
   background: #0284c7 !important;
   border-color: #38bdf8 !important;
   color: #fff !important;
 }

 [data-theme="dark"] #atk-write-modal > div {
   background: #1e293b !important;
   border: 1px solid #334155 !important;
   box-shadow: 0 20px 60px rgba(0,0,0,.5) !important;
 }
 [data-theme="dark"] #atk-write-modal h3 { color: #f1f5f9 !important; }
 [data-theme="dark"] #atk-write-modal label { color: #94a3b8 !important; }
 [data-theme="dark"] #atk-write-modal input,
 [data-theme="dark"] #atk-write-modal select,
 [data-theme="dark"] #atk-write-modal textarea {
   background: #0f172a !important;
   border-color: #334155 !important;
   color: #f1f5f9 !important;
 }
 [data-theme="dark"] #atk-write-modal input::placeholder,
 [data-theme="dark"] #atk-write-modal textarea::placeholder { color: #64748b !important; }
 [data-theme="dark"] #atk-write-modal button[onclick="atkSubmitWrite()"] {
   background: #0284c7 !important;
   border-color: transparent !important;
   box-shadow: 0 4px 14px rgba(14,165,233,.35) !important;
 }

 [data-theme="dark"] #atk-admin-bar {
   background: #1e293b !important;
   border-color: #334155 !important;
   border-radius: 10px;
   padding: 6px;
 }
 [data-theme="dark"] .atk-pagination { background: transparent !important; }

 #atk-magic-canvas { display: none; }
 #atk-magic-entry { display: none; }

/* ── 게시글 목록 작성자 계급 아이콘 ── */
.post-author-wrap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  border-radius: 4px;
  padding: 1px 4px 1px 2px;
  transition: background .15s;
  white-space: nowrap;
}
.post-author-wrap:hover { background: var(--primary-light); }
.post-rank-icon { font-size: .9em; line-height: 1; }

/* ── 유저 미니 프로필 팝업 ── */
.user-profile-popup {
  position: fixed;
  z-index: 9999;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px 12px;
  width: 210px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.08);
}
.upp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.upp-avatar-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  border: 2px solid var(--border);
}
.upp-header-info { flex: 1; min-width: 0; }
.upp-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.upp-rank {
  font-size: .78rem;
  font-weight: 600;
  margin-top: 2px;
}
.upp-stats {
  display: flex;
  justify-content: space-between;
  background: var(--bg);
  border-radius: 10px;
  padding: 8px 4px;
  margin-bottom: 8px;
}
.upp-stat-item {
  display: flex; flex-direction: column; align-items: center; flex: 1;
}
.upp-stat-item span {
  font-size: .88rem; font-weight: 700; color: var(--text-main);
}
.upp-stat-item label {
  font-size: .68rem; color: var(--text-muted); margin-top: 2px;
}
.upp-joined {
  font-size: .72rem;
  color: var(--text-muted);
  text-align: center;
}
[data-theme="dark"] .user-profile-popup {
  box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
}

.archiv-footer {
 font-family: 'Noto Sans KR', sans-serif;
 background: #0f172a;
 border-top: 1px solid #1e293b;
 margin-top: 60px;
}

.footer-body {
 max-width: 100%;
 margin: 0 auto;
 padding: 22px 2rem;
 display: grid;
 grid-template-columns: 260px 1fr 260px;
 gap: 1.5rem;
 align-items: center;
}

.footer-brand {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 12px;
}
.footer-logo {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 text-decoration: none;
}
.footer-logo-mark {
 width: 28px;
 height: 28px;
 background: linear-gradient(135deg, #0ea5e9, #38bdf8);
 border-radius: 6px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: 'Outfit', sans-serif;
 font-weight: 800;
 font-size: 12px;
 color: #fff;
 flex-shrink: 0;
}
.footer-logo-text {
 font-family: 'Syne', sans-serif;
 font-weight: 800;
 font-size: 18px;
 color: #f1f5f9;
 letter-spacing: .02em;
}
.footer-logo-text span { color: #38bdf8; }

.footer-policy-links {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 0;
 justify-content: center;
}
.footer-policy-links a {
 color: #475569;
 text-decoration: none;
 font-size: 12.5px;
 padding: 0 14px;
 transition: color .18s;
 letter-spacing: -.01em;
 white-space: nowrap;
}
.footer-policy-links a:hover { color: #94a3b8; }
.fp-sep {
 display: inline-block;
 width: 1px;
 height: 11px;
 background: #2d4a6e;
 flex-shrink: 0;
}

/* ── 후원 버튼 ── */
.donate-btn {
 display: inline-flex;
 align-items: center;
 gap: 7px;
 background: transparent;
 border: 1px solid rgba(180,205,230,0.2);
 border-radius: 8px;
 padding: 9px 18px;
 cursor: pointer;
 transition: border-color 0.2s, background 0.2s, color 0.2s;
 color: #8faec8;
 font-family: 'Noto Sans KR', sans-serif;
 font-size: 13px;
 font-weight: 600;
 letter-spacing: 0.01em;
}
.donate-btn:hover {
 border-color: rgba(180,205,230,0.4);
 background: rgba(180,205,230,0.05);
 color: #c8d6e8;
}
.donate-btn:active { background: rgba(180,205,230,0.08); }
.donate-btn-heart { font-size: 13px; opacity: 0.8; }

/* ── 후원 모달 오버레이 ── */
.donate-modal-overlay {
 display: none;
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.75);
 backdrop-filter: blur(6px);
 -webkit-backdrop-filter: blur(6px);
 z-index: 9999;
 justify-content: center;
 align-items: center;
 padding: 20px;
}
.donate-modal-overlay.active { display: flex; }

/* ── 후원 모달 카드 ── */
.donate-modal {
 background: #111827;
 border-radius: 24px;
 width: 100%;
 max-width: 320px;
 position: relative;
 overflow: hidden;
 animation: donateSlideUp 0.28s cubic-bezier(.34,1.56,.64,1);
 border: 1px solid rgba(255,255,255,0.07);
 box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(99,102,241,0.15);
}
@keyframes donateSlideUp {
 from { transform: translateY(20px) scale(0.95); opacity: 0; }
 to   { transform: translateY(0) scale(1); opacity: 1; }
}
.donate-close-btn {
 position: absolute;
 top: 14px; right: 14px;
 width: 28px; height: 28px;
 background: rgba(255,255,255,0.08);
 border: 1px solid rgba(255,255,255,0.12);
 border-radius: 50%;
 color: rgba(255,255,255,0.55);
 font-size: 13px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.15s;
 z-index: 10;
}
.donate-close-btn:hover { background: rgba(255,255,255,0.16); color: #fff; }
.donate-modal-body {
 padding: 32px 28px 0;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 20px;
}
.donate-toss-badge {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 background: rgba(0,100,255,0.12);
 border: 1px solid rgba(0,100,255,0.25);
 color: #60a5fa;
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 0.05em;
 padding: 5px 13px;
 border-radius: 100px;
}
.donate-qr-wrap { width: 220px; height: 220px; }
.donate-qr-wrap canvas { display: block; width: 220px; height: 220px; image-rendering: pixelated; }
.donate-scan-steps { display: flex; align-items: center; gap: 7px; }
.donate-step { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #6b7280; font-weight: 500; }
.donate-step-num {
 width: 17px; height: 17px;
 background: rgba(99,102,241,0.15);
 border: 1px solid rgba(99,102,241,0.3);
 color: #818cf8;
 border-radius: 50%;
 font-size: 9.5px;
 font-weight: 700;
 display: flex; align-items: center; justify-content: center;
 flex-shrink: 0;
}
.donate-step-arrow { color: #374151; font-size: 11px; }
.donate-purpose-text {
 font-size: 11.5px;
 color: #4b5563;
 line-height: 1.65;
 text-align: center;
 padding: 14px 16px;
 background: rgba(255,255,255,0.03);
 border-top: 1px solid rgba(255,255,255,0.05);
 width: calc(100% + 56px);
 margin: 0 -28px;
}

.footer-legal-strip {
 background: #0a1628;
 border-top: 1px solid #1e293b;
 padding: 12px 2rem;
}
.footer-legal-inner {
 width: 100%;
 margin: 0 auto;
 text-align: center;
}
.footer-legal-company {
 font-size: 11px;
 color: #334155;
 line-height: 1.8;
 letter-spacing: -.01em;
}
.footer-legal-company strong {
 color: #3d5068;
 font-weight: 600;
}
.footer-legal-sep { color: #1e3a5f; margin: 0 6px; }
.footer-copyright-bar {
 padding-top: 8px;
 border-top: 1px solid #1a2d42;
 margin-top: 8px;
}
.footer-copyright {
 font-size: 11px;
 color: #253a52;
 font-family: 'Outfit', sans-serif;
}
.footer-copyright span { color: #2d4a6e; }

@media (max-width: 860px) {
 .footer-body {
 grid-template-columns: 1fr;
 gap: 14px;
 padding: 20px 1.5rem;
 text-align: center;
 }
 .footer-brand { align-items: center; }
 .footer-policy-links { justify-content: center; }
 .footer-legal-strip { padding: 12px 1.5rem; }
 /* 후원 버튼 모바일 중앙 정렬 */
 .donate-btn { width: 100%; justify-content: center; }
}

[data-theme="dark"] .archiv-footer { background: #080f1c; border-color: #111d2e; }
[data-theme="dark"] .footer-legal-strip { background: #060c18; }

/* 일반 게시글(리스트) 형태 오버라이드 */
.jph-listing-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 14px 16px !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: var(--card-bg) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer;
  transition: background 0.2s;
}
.jph-listing-card:last-child {
  border-bottom: none !important;
}
.jph-listing-card:hover {
  background: var(--bg) !important;
  transform: none !important;
  box-shadow: none !important;
}
/* 필터 숨김 — !important보다 높은 specificity로 display 덮어쓰기 */
.jph-listing-card.jph-hidden {
  display: none !important;
}
.jph-listing-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* 모바일 대응 */
@media(max-width: 650px) {
  .jph-listing-card {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  .jph-listing-card > div:nth-child(2) {
    min-width: 100% !important;
    padding-left: 0 !important;
    order: -1 !important; /* 제목을 제일 위로 */
    font-size: 15px !important;
    margin-bottom: 4px !important;
  }
  .jph-listing-card > div:nth-child(1),
  .jph-listing-card > div:nth-child(3),
  .jph-listing-card > div:nth-child(4) {
    width: auto !important;
    flex: none !important;
    font-size: 12px !important;
  }
  .jph-listing-card > div:nth-child(5) {
    width: auto !important;
    margin-left: auto !important; /* 가격을 우측으로 밀기 */
    font-size: 14px !important;
  }
}

/* 필터 셀렉트 — 값 선택 시 강조 */
.jph-fsel[data-filter-key]:not([value=""]) { border-color: var(--primary); color: var(--primary-dark); background: var(--sky-1); font-weight: 700; }
.jph-fsel.fsel-active { border-color: var(--primary) !important; color: var(--primary-dark) !important; background: var(--sky-1) !important; font-weight: 700 !important; }
.jph-chip[data-filter-val="오피스텔"] { width: 66px; font-size: .72rem; }

/* ══════════════════════════════════════════
   모바일 반응형 추가 개선
   ══════════════════════════════════════════ */

/* 전체 검색 모달 — 모바일 */
@media (max-width: 600px) {
  #global-search-box { border-radius: 0 0 16px 16px; margin-top: 0; }
  #global-search-overlay { padding-top: 56px; }
}

/* 로그인 모달 — 모바일 전체폭 */
@media (max-width: 480px) {
  .login-modal { width: calc(100vw - 28px); padding: 24px 18px 20px; border-radius: 18px; }
  .lm-tab-row { gap: 4px; }
  .lm-tab { font-size: .82rem; padding: 6px 14px; }
}

/* 홈탭 마켓 그리드 — 모바일 1열 */
@media (max-width: 600px) {
  .home-market-outer-grid { grid-template-columns: 1fr !important; }
  .home-stats-grid { grid-template-columns: repeat(2,1fr) !important; }
}

/* 게시글 뷰 — 모바일 패딩 */
@media (max-width: 480px) {
  .post-view { padding: .9rem; }
  .post-view-title { font-size: 1rem; }
  .post-view-meta { flex-wrap: wrap; gap: 4px; font-size: .72rem; }
  .post-comment-input { font-size: .85rem; }
}

/* 채팅 패널 — 모바일 전체폭 */
@media (max-width: 480px) {
  .chat-wrap { padding: .6rem; }
  .chat-input-row { flex-wrap: wrap; gap: 4px; }
  .chat-input-row input { flex: 1 1 100%; }
  .chat-send-btn { width: 100%; }
}

/* 내부 탭 (design 탭 등) — 모바일 스크롤 */
@media (max-width: 600px) {
  .design-inner-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .design-inner-tabs::-webkit-scrollbar { display: none; }
  .dit-btn { flex: none; white-space: nowrap; font-size: .76rem; padding: .38rem .75rem; }
}

/* 글쓰기 모달 — 작은 화면 */
@media (max-width: 480px) {
  .write-overlay { padding: 0; align-items: flex-end; }
  .write-modal { border-radius: 20px 20px 0 0; max-height: 92vh; overflow-y: auto; }
  .write-modal-title { font-size: 1rem; }
  .write-tag-row { flex-wrap: wrap; gap: 4px; }
  .write-tag-btn { font-size: .74rem; padding: .28rem .7rem; }
}

/* 회사분석 섹션 — 테이블 스크롤 */
@media (max-width: 600px) {
  .revenue-table-wrap, .salary-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .revenue-table th, .revenue-table td { font-size: .75rem; padding: 7px 8px; white-space: nowrap; }
}

/* 프로필 편집 모달 — 전체폭 */
@media (max-width: 480px) {
  .edit-profile-box { width: calc(100vw - 20px); padding: 20px 14px 18px; border-radius: 16px; }
  .ep-form-group input, .ep-form-group textarea { font-size: .85rem; }
}

/* 소형 폰 — 사이드바 메뉴 버튼 더 작게 */
@media (max-width: 360px) {
  .menu-btn { font-size: .7rem; padding: .35rem .55rem; }
  .section-card { padding: .7rem; }
  .inner-tab-btn { font-size: .66rem; padding: .28rem .45rem; }
}

/* ══════════════════════════════════════
   실시간 베스트 게시글
   ══════════════════════════════════════ */
.best-tab-btn {
  padding: 4px 10px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.best-tab-btn.active,
.best-tab-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.best-post-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.best-post-item:last-child { border-bottom: none; }
.best-post-item:hover { background: var(--sky-1); border-radius: 8px; padding-left: 6px; }
.best-post-rank {
  font-size: .78rem;
  font-weight: 800;
  min-width: 20px;
  text-align: center;
  color: var(--text-muted);
}
.best-post-rank.top1 { color: #ef4444; }
.best-post-rank.top2 { color: #f97316; }
.best-post-rank.top3 { color: #f59e0b; }
.best-post-info { flex: 1; min-width: 0; }
.best-post-title {
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.best-post-meta {
  display: flex;
  gap: 8px;
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.best-post-badge {
  font-size: .68rem;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--sky-1);
  color: var(--primary-dark);
  font-weight: 700;
  white-space: nowrap;
}

/* ══════════════════════════════════════
   법적 문서 모달 (이용약관 / 개인정보처리방침)
   ══════════════════════════════════════ */
.legal-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9995;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.legal-modal-overlay.active { display: flex; }
.legal-modal {
  background: var(--card-bg);
  border-radius: var(--radius);
  width: min(720px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,.22);
  overflow: hidden;
  position: relative;
}
.legal-modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.legal-modal-header h2 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}
.legal-modal-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 8px;
  line-height: 1;
  transition: background .15s;
}
.legal-modal-close:hover { background: var(--bg); }
.legal-modal-body {
  overflow-y: auto;
  padding: 24px;
  font-size: .875rem;
  line-height: 1.8;
  color: var(--text-sub);
}
.legal-modal-body h3 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 20px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.legal-modal-body h3:first-child { margin-top: 0; }
.legal-modal-body p { margin: 0 0 8px; }
.legal-modal-body ul { margin: 4px 0 10px; padding-left: 20px; }
.legal-modal-body li { margin-bottom: 4px; }
.legal-modal-body .legal-date {
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}
@media (max-width: 600px) {
  .legal-modal-body { padding: 16px; }
  .legal-modal-header { padding: 16px 16px 12px; }
}

/* ══════════════════════════════════════════
   모바일 전역 안전장치 — 전체 화면 overflow 방지
   ══════════════════════════════════════════ */
html, body { overflow-x: hidden; max-width: 100vw; }

/* ══════════════════════════════════════════
   모바일 공통 UX 개선 (≤768px)
   ══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── JHP 검색박스 ── */
  .jph-search-box { max-width: 100%; }

  /* ── 글로벌 검색 모달 ── */
  #global-search-box { padding: 14px 14px 10px; }

  /* ── 투자 섹션 탭 ── */
  .tool-tab-wrap { gap: .2rem; }

  /* ── 부동산 카드 ── */
  .re-card { padding: 16px 14px 14px; }

  /* ── 내 프로필 모달 → 전체폭 ── */
  .profile-modal-overlay {
    padding-top: 60px;
    padding-right: 8px;
    padding-left: 8px;
    justify-content: center;
  }
  .profile-modal-box { width: 100%; max-width: 360px; }

  /* ── 회사분석 테이블 ── */
  .cmp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cmp-table th, .cmp-table td { font-size: .78rem; padding: 8px 10px; white-space: nowrap; }

  /* ── 법률계산기 레이아웃 ── */
  .law-calc-grid { grid-template-columns: 1fr !important; }
  .law-result-cards { grid-template-columns: 1fr 1fr !important; }
}

/* ══════════════════════════════════════════
   소형 모바일 집중 수정 (≤480px)
   ══════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── 전역: 패딩 있는 컨테이너 overflow 방지 ── */
  .section-card { overflow: hidden; }

  /* ── 게시글 목록 ── */
  .post-title { font-size: .84rem; }
  .post-meta { flex-wrap: wrap; gap: .3rem; }

  /* ── 게시글 뷰 액션 버튼 ── */
  .post-action-row { flex-wrap: wrap; gap: .35rem; }
  .post-action-btn { font-size: .74rem; padding: 4px 10px; }

  /* ── 댓글 ── */
  .comment-body { font-size: .81rem; }
  .comment-item { padding: 8px 0; }

  /* ── 내부 탭 ── */
  .inner-tabs { -webkit-overflow-scrolling: touch; }

  /* ── JHP 섹션 ── */
  .jph-hero-banner { padding: 16px 12px; }
  .jph-hero-title { font-size: 1.1rem; }
  .jph-hero-desc { font-size: .8rem; }

  /* ── JHP 매물 카드 (수평 스크롤 유지) ── */
  .jph-similar-card { width: 160px; }

  /* ── 복지 카드 ── */
  .welfare-card { padding: 14px 12px; }

  /* ── 프로필 모달 stats 배치 ── */
  .pm-stats-row { grid-template-columns: repeat(2, 1fr); }
  .pm-stat-item:nth-child(3) { border-left: none; }

  /* ── 통계 카드 ── */
  .stat-card { padding: .6rem .25rem; }
  .stat-num { font-size: .95rem; }
  .stat-label { font-size: .64rem; }

  /* ── 채팅 닉네임 입력 ── */
  .chat-nick-input { width: 70px; font-size: .78rem; }
}

/* ══════════════════════════════════════════
   극소형 폰 집중 수정 (≤360px)
   ══════════════════════════════════════════ */
@media (max-width: 360px) {
  nav { padding: 0 .6rem; height: 52px; }
  .logo { font-size: .92rem; }
  .gnb-icon-btn { width: 30px; height: 30px; font-size: .82rem; }
  .gnb-avatar { width: 30px; height: 30px; font-size: .76rem; }
  .gnb-right { gap: 4px; }

  .main-container { padding: .5rem .5rem 1.2rem; }
  .section-card { padding: .65rem; border-radius: 12px; }
  .section-card h2 { font-size: .95rem; }

  .stats-row { gap: .35rem; }
  .stat-card { padding: .55rem .2rem; border-radius: 10px; }
  .stat-num { font-size: .88rem; }
  .stat-label { font-size: .6rem; }

  .menu-btn { font-size: .68rem; padding: .32rem .5rem; }
  .inner-tab-btn { font-size: .64rem; padding: .25rem .4rem; }

  .page-btn { width: 26px; height: 26px; font-size: .72rem; }

  .login-modal-box { padding: 20px 14px 18px; }
  .login-gate-box { padding: 18px 12px 16px; }

  table.salary thead th:first-child,
  table.salary tbody td:first-child { min-width: 60px; max-width: 85px; font-size: .72rem; }
  table.salary th, table.salary td { font-size: .74rem; padding: 6px 6px; }

  .write-modal { padding: 16px 12px 14px; }
  .notif-panel { width: calc(100vw - 1rem); right: -.5rem; }
}