/* =========================================================
   FILE : /assets/css/theme.common.css
   DESC : 동궁원 서브페이지 공통 컬러/카드/타이틀 테마
   NOTE :
   - 각 페이지별로 흩어진 그린 계열 색상을 공통 변수로 통일
   - 카드헤드, 페이지헤더, 배지, 섹션타이틀 공통 사용
   - 기존 CSS의 하드코딩 색상(#0f5132, #064e3b, #1a7a4a 등) 치환용
========================================================= */

/* =========================================================
   base
========================================================= */
html, body{
  color: var(--dg-text);
  background: var(--dg-bg);
}

body{
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

a{
  color: var(--dg-primary);
  text-decoration: none;
}

a:hover{
  color: var(--dg-primary-dark);
  text-decoration: none;
}

hr{
  border: 0;
  border-top: 1px solid var(--dg-border);
}

/* =========================================================
   common text helpers
========================================================= */
.dg-text-main{ color: var(--dg-text) !important; }
.dg-text-sub{ color: var(--dg-text-sub) !important; }
.dg-text-muted{ color: var(--dg-text-muted) !important; }
.dg-text-primary{ color: var(--dg-primary) !important; }
.dg-text-primary-dark{ color: var(--dg-primary-dark) !important; }

.dg-bg-primary-soft{ background: var(--dg-primary-soft) !important; }
.dg-bg-subtle{ background: var(--dg-bg-subtle) !important; }
.dg-border{ border-color: var(--dg-border) !important; }

/* =========================================================
   page header
   사용 예:
   <div class="dg-page-header">...</div>
========================================================= */
.dg-page-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--dg-gap);
  padding: 20px 0 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--dg-border);
}

.dg-page-header__left{
  min-width: 0;
}

.dg-page-header__title{
  margin: 0;
  color: var(--dg-primary);
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.dg-page-header__desc{
  margin-top: 8px;
  color: var(--dg-text-sub);
  font-size: 0.98rem;
  line-height: 1.65;
}

.dg-page-header__badge{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid rgba(15, 81, 50, 0.14);
  border-radius: 999px;
  background: var(--dg-primary-soft);
  color: var(--dg-primary-dark);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* =========================================================
   breadcrumb
========================================================= */
.dg-breadcrumb{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--dg-text-sub);
  font-size: 0.92rem;
}

.dg-breadcrumb a{
  color: var(--dg-text-sub);
}

.dg-breadcrumb a:hover{
  color: var(--dg-primary);
}

.dg-breadcrumb .is-current{
  color: var(--dg-primary-dark);
  font-weight: 700;
}

/* =========================================================
   card
   사용 예:
   <section class="dg-card">
     <div class="dg-card__head">제목</div>
     <div class="dg-card__body">내용</div>
   </section>
========================================================= */
.dg-card{
  background: var(--dg-bg);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-radius-lg);
  box-shadow: var(--dg-shadow-sm);
  overflow: hidden;
}

.dg-card + .dg-card{
  margin-top: 18px;
}

.dg-card__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--dg-primary);
  color: var(--dg-text-on-dark);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
}

.dg-card__head small,
.dg-card__head .small{
  color: rgba(255,255,255,0.82);
  font-size: 0.86rem;
  font-weight: 500;
}

.dg-card__body{
  padding: 18px;
  color: var(--dg-text);
  background: #fff;
}

.dg-card__foot{
  padding: 14px 18px;
  border-top: 1px solid var(--dg-border);
  background: var(--dg-bg-subtle);
}

.dg-card--soft .dg-card__head{
  background: linear-gradient(135deg, var(--dg-primary) 0%, var(--dg-primary-dark) 100%);
}

.dg-card--outline{
  border: 1px solid rgba(15, 81, 50, 0.18);
  box-shadow: none;
}

.dg-card--outline .dg-card__head{
  background: var(--dg-primary-soft);
  color: var(--dg-primary-dark);
  border-bottom: 1px solid rgba(15, 81, 50, 0.10);
}

/* =========================================================
   section title
========================================================= */
.dg-section-title{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--dg-primary);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
}

.dg-section-title::before{
  content: "";
  display: inline-block;
  width: 5px;
  height: 18px;
  border-radius: 999px;
  background: var(--dg-primary-light);
}

/* =========================================================
   info / notice box
========================================================= */
.dg-note{
  padding: 14px 16px;
  border: 1px solid rgba(15, 81, 50, 0.12);
  border-radius: var(--dg-radius);
  background: var(--dg-primary-soft);
  color: var(--dg-text);
}

.dg-note strong{
  color: var(--dg-primary-dark);
}

.dg-note + .dg-note{
  margin-top: 12px;
}

/* =========================================================
   badge / chip
========================================================= */
.dg-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--dg-primary-soft);
  color: var(--dg-primary-dark);
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1;
  border: 1px solid rgba(15, 81, 50, 0.10);
}

.dg-badge--primary{
  background: var(--dg-primary);
  color: #fff;
  border-color: var(--dg-primary);
}

.dg-badge--line{
  background: #fff;
  color: var(--dg-primary-dark);
  border-color: rgba(15, 81, 50, 0.22);
}

.dg-badge--gray{
  background: #f8fafc;
  color: #475569;
  border-color: #e2e8f0;
}

/* =========================================================
   list / table helpers
========================================================= */
.dg-list-clean{
  margin: 0;
  padding: 0;
  list-style: none;
}

.dg-list-clean > li{
  padding: 12px 0;
  border-bottom: 1px solid var(--dg-border);
}

.dg-list-clean > li:last-child{
  border-bottom: 0;
}

.dg-table-wrap{
  overflow-x: auto;
}

.dg-table{
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  background: #fff;
}

.dg-table th,
.dg-table td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--dg-border);
  vertical-align: middle;
}

.dg-table thead th{
  background: var(--dg-primary-soft);
  color: var(--dg-primary-dark);
  font-weight: 800;
  border-top: 1px solid var(--dg-border);
  border-bottom: 1px solid var(--dg-border-strong);
}

.dg-table tbody tr:hover{
  background: #fcfdfc;
}

.dg-table tbody td{
  color: var(--dg-text);
}

/* =========================================================
   buttons
========================================================= */
.dg-btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--dg-primary);
  border-radius: 12px;
  background: var(--dg-primary);
  color: #fff;
  font-weight: 700;
  line-height: 1;
  transition: all .18s ease;
}

.dg-btn-primary:hover{
  background: var(--dg-primary-dark);
  border-color: var(--dg-primary-dark);
  color: #fff;
}

.dg-btn-line{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(15, 81, 50, 0.18);
  border-radius: 12px;
  background: #fff;
  color: var(--dg-primary-dark);
  font-weight: 700;
  line-height: 1;
  transition: all .18s ease;
}

.dg-btn-line:hover{
  background: var(--dg-primary-soft);
  border-color: rgba(15, 81, 50, 0.28);
  color: var(--dg-primary-dark);
}

/* =========================================================
   utility blocks
========================================================= */
.dg-panel{
  padding: 18px;
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-radius-lg);
  background: #fff;
  box-shadow: var(--dg-shadow-sm);
}

.dg-divider{
  height: 1px;
  margin: 18px 0;
  background: var(--dg-border);
}

.dg-kv{
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px 14px;
}

.dg-kv__key{
  color: var(--dg-text-sub);
  font-weight: 700;
}

.dg-kv__val{
  color: var(--dg-text);
  min-width: 0;
}

/* =========================================================
   bootstrap override (선택 적용)
   Bootstrap 5 사용 페이지에서 success 계열을 브랜드 그린으로 맞춤
========================================================= */
.btn-success{
  background-color: var(--dg-primary);
  border-color: var(--dg-primary);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active{
  background-color: var(--dg-primary-dark);
  border-color: var(--dg-primary-dark);
}

.text-success{
  color: var(--dg-primary) !important;
}

.bg-success{
  background-color: var(--dg-primary) !important;
}

.border-success{
  border-color: var(--dg-primary) !important;
}

.bg-success-subtle{
  background-color: var(--dg-primary-soft) !important;
}

.text-bg-success{
  background-color: var(--dg-primary) !important;
  color: #fff !important;
}

/* =========================================================
   responsive
========================================================= */
@media (max-width: 991.98px){
  .dg-page-header{
    flex-direction: column;
    align-items: stretch;
  }

  .dg-page-header__badge{
    align-self: flex-start;
  }
}

@media (max-width: 767.98px){
  .dg-card__head,
  .dg-card__body,
  .dg-card__foot,
  .dg-panel{
    padding-left: 14px;
    padding-right: 14px;
  }

  .dg-kv{
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .dg-kv__key{
    margin-top: 4px;
  }
}