/* ══════════════════════════════════════
 동궁원 100배 즐기기 v3
 ══════════════════════════════════════ */

.dg-enjoy-wrap {
display: flex;
gap: 16px;
align-items: flex-start;
}

/* ── 왼쪽 지도: 60% ── */
.dg-enjoy-map {
flex: 0 0 60%;
max-width: 60%;
position: sticky;
top: 20px;
}
.dg-map-frame {
position: relative;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 2px 16px rgba(0,0,0,.10);
background: #f4f6f9;
}
.dg-map-frame img {
display: block;
width: 100%;
height: auto;
}

/* 스팟 마커 — 기본 숨김 */
.dg-mk {
position: absolute;
transform: translate(-50%,-50%);
cursor: pointer;
z-index: 10;
opacity: 0;
pointer-events: none;
transition: opacity .3s;
}
.dg-mk.is-show {
opacity: 1;
pointer-events: auto;
}
.dg-mk-ring {
width: 38px; height: 38px;
background: rgba(255,105,135,0.55);
border: 2px solid #FF6987;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
transition: all .25s;
box-shadow: 0 0 0 5px rgba(255,105,135,.18);
animation: dg-pop .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes dg-pop {
0%   { transform: scale(0); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.dg-mk:hover .dg-mk-ring {
background: rgba(255,105,135,0.7);
transform: scale(1.15);
}
.dg-mk-num {
width: 20px; height: 20px;
background: #FF6987;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 9px; font-weight: 700; color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* 마커 타이틀 (항상 표시) */
.dg-mk-label {
position: absolute;
top: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
background: rgba(26,34,54,.88);
color: #fff;
padding: 2px 7px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
pointer-events: none;
line-height: 1.4;
}

/* ── 오른쪽 카드: 40% ── */
.dg-enjoy-cards {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 12px;
}

/* ── 하단 풀폭 ── */
.dg-enjoy-bottom {
margin-top: 16px;
}

/* ── 카드 공통 ── */
.dg-academy-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  overflow: hidden;
}
.dg-academy-card__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1.1rem;
  background: var(--dg-primary-gradient);
  border-radius: 14px 14px 0 0;
}
.dg-academy-card__icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: rgba(45,74,30,.10);
  display: flex; align-items: center; justify-content: center;
  color: #2d4a1e;
  font-size: .95rem;
  flex-shrink: 0;
}
.dg-academy-card__label {
  display: inline-block;
  font-size: .58rem; font-weight: 600;
  color: rgba(45,74,30,.5);
  background: rgba(45,74,30,.12);
  padding: .1rem .45rem;
  border-radius: 4px;
  margin-bottom: .1rem;
  letter-spacing: .02em;
}
.dg-academy-card__title {
  font-family: 'Noto Serif KR', serif;
  font-size: .95rem; font-weight: 700;
  color: #2d4a1e;
  margin: 0;
}
.dg-academy-card__badge {
  margin-left: auto;
  font-size: .68rem;
  color: rgba(45,74,30,.5);
  white-space: nowrap;
}
.dg-academy-card__body {
padding: .9rem 1.1rem;
}

/* ── 강조 카드 ── */
.pa-goal-card {
background: #f1f8e9;
border-left: 4px solid #66bb6a;
border-radius: 0 10px 10px 0;
padding: .6rem .9rem;
font-size: .82rem;
line-height: 1.65;
color: #33691e;
word-break: keep-all;
}

/* ── 테마 카드 (컴팩트) ── */
.dg-theme-grid {
display: flex;
flex-direction: column;
gap: .5rem;
}
.dg-theme-card {
background: #fafafa;
border-radius: 10px;
padding: .6rem .8rem;
border: 1px solid #f0f0f0;
cursor: pointer;
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.dg-theme-card:hover {
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(0,0,0,.07);
}
.dg-theme-card.is-active {
border-color: rgba(255,105,135,.5);
box-shadow: 0 2px 10px rgba(255,105,135,.12);
background: #fff;
}
.dg-theme-card__row {
display: flex;
align-items: center;
gap: .5rem;
}
.dg-theme-card__icon {
width: 30px; height: 30px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: .8rem; flex-shrink: 0;
}
.dg-theme-card__title {
font-size: .82rem; font-weight: 700;
color: #333; margin: 0;
flex: 1; min-width: 0;
}
.dg-theme-card__time {
font-size: .62rem; color: #999;
white-space: nowrap;
flex-shrink: 0;
}
/* 코스 경로 — 카드 내부, 활성 시에만 표시 */
.dg-theme-card__route {
display: none;
flex-wrap: wrap;
align-items: center;
gap: .2rem;
margin-top: .45rem;
padding-top: .4rem;
border-top: 1px solid #f0f0f0;
line-height: 1.7;
}
.dg-theme-card.is-active .dg-theme-card__route {
display: flex;
}
.dg-theme-card__route span {
display: inline-flex;
align-items: center;
gap: .15rem;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 5px;
padding: .08rem .35rem;
font-size: .68rem;
white-space: nowrap;
color: #555;
}
.dg-theme-card__route .arr { color: #aaa; font-size: .55rem; }
.dg-theme-card__route span em {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.05rem; height: 1.05rem;
border-radius: 50%;
background: #66bb6a;
color: #fff;
font-size: .5rem; font-weight: 700;
font-style: normal;
flex-shrink: 0;
}

/* 테마별 아이콘/배지 색상 */
.dg-theme-card--nature  .dg-theme-card__icon { background: #e8f5e9; color: #2e7d32; }
.dg-theme-card--family  .dg-theme-card__icon { background: #fff3e0; color: #e65100; }
.dg-theme-card--healing .dg-theme-card__icon { background: #e3f2fd; color: #1565c0; }
.dg-theme-card--photo   .dg-theme-card__icon { background: #fce4ec; color: #c62828; }
.dg-theme-card--nature  .dg-theme-card__route span em { background: #2e7d32; }
.dg-theme-card--family  .dg-theme-card__route span em { background: #e65100; }
.dg-theme-card--healing .dg-theme-card__route span em { background: #1565c0; }
.dg-theme-card--photo   .dg-theme-card__route span em { background: #c62828; }

/* ── 시간대별 카드 (컴팩트) ── */
.dg-time-grid {
display: flex;
flex-direction: column;
gap: .5rem;
}
.dg-time-card {
background: #fafafa;
border-radius: 10px;
padding: .6rem .8rem;
border: 1px solid #f0f0f0;
cursor: pointer;
transition: border-color .15s, box-shadow .15s;
}
.dg-time-card:hover {
box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.dg-time-card.is-active {
border-color: rgba(255,105,135,.5);
box-shadow: 0 2px 10px rgba(255,105,135,.12);
background: #fff;
}
.dg-time-card__row {
display: flex;
align-items: center;
gap: .5rem;
}
.dg-time-card__badge {
display: inline-flex;
align-items: center;
gap: .2rem;
font-size: .6rem; font-weight: 600;
padding: .12rem .4rem;
border-radius: 5px;
flex-shrink: 0;
}
.dg-time-card__badge--am  { background: #fff8e1; color: #f57f17; }
.dg-time-card__badge--pm  { background: #e8f5e9; color: #2e7d32; }
.dg-time-card__badge--eve { background: #e3f2fd; color: #1565c0; }
.dg-time-card__title {
font-size: .82rem; font-weight: 700;
color: #333; margin: 0;
flex: 1;
}
.dg-time-card__sub {
font-size: .62rem; color: #aaa;
flex-shrink: 0;
}
/* 시간대 시설 목록 — 활성 시에만 표시 */
.dg-time-card__detail {
display: none;
flex-wrap: wrap;
gap: .25rem;
margin-top: .4rem;
padding-top: .35rem;
border-top: 1px solid #f0f0f0;
}
.dg-time-card.is-active .dg-time-card__detail {
display: flex;
}
.dg-time-card__detail li {
display: inline-flex;
align-items: center;
gap: .2rem;
font-size: .7rem;
color: #555;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 5px;
padding: .08rem .35rem;
list-style: none;
}
.dg-time-card__detail li em {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.05rem; height: 1.05rem;
border-radius: 50%;
background: #66bb6a;
color: #fff;
font-size: .5rem; font-weight: 700;
font-style: normal;
flex-shrink: 0;
}

/* ── 하단 전체 시설 그리드 ── */
.dg-full-course-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .6rem;
}
.dg-full-course-item {
display: flex;
align-items: center;
gap: .6rem;
padding: .55rem .75rem;
background: #fafafa;
border: 1px solid #f0f0f0;
border-radius: 10px;
cursor: pointer;
transition: background .15s, border-color .15s, box-shadow .15s;
}
.dg-full-course-item:hover {
background: rgba(255,105,135,.04);
border-color: rgba(255,105,135,.3);
box-shadow: 0 2px 8px rgba(255,105,135,.08);
}
.dg-full-course-item__num {
width: 28px; height: 28px;
border-radius: 50%;
background: #66bb6a;
color: #fff;
font-size: .65rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(102,187,106,.25);
}
.dg-full-course-item:first-child .dg-full-course-item__num,
.dg-full-course-item:last-child  .dg-full-course-item__num { background: #2e7d32; }
.dg-full-course-item__info { flex: 1; min-width: 0; }
.dg-full-course-item__name {
font-size: .8rem; font-weight: 600;
color: #333; margin: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dg-full-course-item__desc {
font-size: .68rem; color: #999;
margin: .08rem 0 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── 반응형 ── */
@media (max-width: 991px) {
.dg-enjoy-wrap { flex-direction: column; }
.dg-enjoy-map {
  flex: none; max-width: 100%; width: 100%;
  position: relative; top: auto;
}
.dg-map-frame {
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.dg-map-frame img {
  width: auto; height: 380px;
  min-width: 750px; max-width: none;
}
.dg-enjoy-cards { width: 100%; }
.dg-full-course-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.dg-map-frame img { height: 320px; min-width: 650px; }
.dg-academy-card__body { padding: .75rem .85rem; }
.dg-full-course-grid { grid-template-columns: 1fr; }
}