/* =========================================================
   SUPPORT CARDS (주요 활동 페이지)
   ========================================================= */
.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sup-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:40px 28px;text-align:center;transition:all var(--t);
}
.sup-card:hover{border-color:var(--ink);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.sup-icon{
  width:64px;height:64px;border-radius:50%;background:var(--bg-mute);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:26px;
}
.sup-card h3{font-family:'Noto Serif KR',serif;font-size:20px;margin-bottom:12px;font-weight:600}
.sup-card p{color:var(--text-2);font-size:13.5px;line-height:1.85;margin-bottom:24px}

/* =========================================================
   ABOUT — GREETING / HISTORY
   ========================================================= */
.about-wrap{max-width:880px;margin:0 auto}
.greeting-text{font-size:16px;color:var(--text-2);line-height:2;margin-bottom:22px}
.greeting-sign{
  text-align:right;font-family:'Noto Serif KR',serif;
  margin-top:48px;
}
.greeting-sign p:first-child{margin-bottom:6px;color:var(--text-2)}
.greeting-sign .name{font-size:22px;font-weight:600}

.history-block{margin-top:90px}
.history-line{border-left:1px solid var(--brand);padding-left:32px}
.history-item{margin-bottom:28px}
.history-item:last-child{margin-bottom:0}
.history-item strong{
  color:var(--brand);font-family:'Noto Serif KR',serif;
  font-size:20px;display:block;
}
.history-item p{margin-top:8px;color:var(--text-2)}

/* =========================================================
   MYPAGE
   ========================================================= */
.mp-grid{display:grid;grid-template-columns:240px 1fr;gap:30px}
.mp-side{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;height:fit-content;
}
.mp-user{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:14px 0 22px;border-bottom:1px solid var(--line);margin-bottom:14px;
}
.mp-avatar{
  width:60px;height:60px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px;
  margin-bottom:10px;font-family:'Noto Serif KR',serif;
}
.mp-user strong{font-size:15px;font-weight:600}
.mp-user span{font-size:12px;color:var(--text-3);margin-top:4px}
.mp-side ul li{
  padding:11px 14px;border-radius:6px;cursor:pointer;font-size:13.5px;
  color:var(--text-2);transition:var(--t);margin-bottom:2px;
}
.mp-side ul li.on,.mp-side ul li:hover{background:var(--bg-soft);color:var(--brand);font-weight:600}
.mp-content{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;
}
.mp-content h3{font-family:'Noto Serif KR',serif;font-size:22px;margin-bottom:6px;font-weight:600}
.mp-content > p.sub{color:var(--text-3);font-size:13px;margin-bottom:28px}

/* =========================================================
   PANEL (서브페이지에서도 재사용)
   ========================================================= */
.panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;
}
.p-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:12px;flex-wrap:wrap}
.p-title{font-size:14.5px;font-weight:700}
.p-tag{
  font-size:10.5px;padding:4px 10px;border-radius:30px;
  background:var(--bg-mute);color:var(--text-2);
  font-family:'Inter';font-weight:600;letter-spacing:.05em;
}
.p-actions{display:flex;gap:8px}

/* KPI cards (마이페이지·관리자 공통) */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}
.kpi{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;position:relative;overflow:hidden;transition:var(--t);
}
.kpi:hover{box-shadow:var(--shadow);border-color:var(--text-4)}
.kpi::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--brand)}
.kpi-label{font-size:12.5px;color:var(--text-3);margin-bottom:8px;font-weight:500}
.kpi-value{
  font-size:26px;font-weight:700;
  font-family:'Noto Serif KR',serif;color:var(--ink);letter-spacing:-.02em;
}
.kpi-delta{font-size:11.5px;margin-top:6px;color:var(--success);font-weight:600;font-family:'Inter'}
.kpi-delta.down{color:var(--danger)}

/* Grid rows (대시보드/보고서 공통) */
.row-2{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}
.row-1-1{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}

/* =========================================================
   PAGES RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .row-2{grid-template-columns:1fr}
  .row-1-1{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .support-grid{grid-template-columns:1fr}
}
@media (max-width:880px){
  .mp-grid{grid-template-columns:1fr}
  .page-hero{padding:70px 0 50px}
  .page-hero h1{font-size:30px}
}
@media (max-width:560px){
  .kpi-grid{grid-template-columns:1fr}
}