/* ===== 3분 놀이터 :: 게시물 하단 '활용 안내' 카드 =====
   각 게시물 맨 아래에 붙는 귀여운 설명문 상자예요.
   페이지마다 --pgd-accent / --pgd-soft 만 바꿔서 색을 맞춰요. */
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Gowun+Dodum&display=swap');

.pgd{
  --pgd-ink:#4A3F45;
  --pgd-ink-soft:#6E6268;
  --pgd-accent:#FF8FB1;
  --pgd-soft:#FFE6EE;
  --pgd-paper:#FFFBF3;
  --pgd-pink:#FFE3EC;
  --pgd-mint:#DDF5EA;
  --pgd-sky:#DFF0FF;
  --pgd-lemon:#FFF4C9;
  box-sizing:border-box;
  max-width:880px;
  margin:56px auto 40px;
  padding:0 16px;
  font-family:'Gowun Dodum','Noto Sans KR',sans-serif;
  color:var(--pgd-ink);
  line-height:1.75;
  word-break:keep-all;
  overflow-wrap:break-word;
  text-align:left;
  position:relative;
  z-index:1;
}
.pgd *,.pgd *::before,.pgd *::after{box-sizing:border-box;}

/* 큰 상자 — 도트 무늬 종이 */
.pgd__box{
  position:relative;
  background:
    radial-gradient(var(--pgd-soft) 1.6px, transparent 1.8px) 0 0/22px 22px,
    var(--pgd-paper);
  border:3px solid var(--pgd-ink);
  border-radius:32px;
  padding:42px 26px 26px;
  box-shadow:0 7px 0 rgba(74,63,69,.16);
}

/* 위쪽 리본 이름표 */
.pgd__ribbon{
  position:absolute; top:-19px; left:50%; transform:translateX(-50%) rotate(-2deg);
  display:inline-flex; align-items:center; gap:6px;
  background:var(--pgd-accent); color:#fff;
  font-family:'Jua',sans-serif; font-size:17px; letter-spacing:.01em;
  padding:6px 20px 7px; border:3px solid var(--pgd-ink); border-radius:999px;
  box-shadow:0 4px 0 rgba(74,63,69,.18); white-space:nowrap;
}

/* 머리말: 마스코트 + 제목 */
.pgd__head{display:flex; align-items:center; gap:20px; margin-bottom:22px;}
.pgd__mascot{
  flex:0 0 auto; width:150px; height:150px;
  background:#fff; border:3px solid var(--pgd-ink); border-radius:50%;
  padding:10px; box-shadow:0 5px 0 rgba(74,63,69,.14);
  animation:pgd-bob 3.2s ease-in-out infinite;
}
.pgd__mascot img{display:block; width:100%; height:100%; object-fit:contain;}
.pgd__title{
  font-family:'Jua',sans-serif; font-weight:400;
  font-size:27px; line-height:1.3; margin:0 0 8px; color:var(--pgd-ink);
}
.pgd__title mark{
  background:linear-gradient(transparent 58%, var(--pgd-soft) 58%);
  color:inherit; padding:0 2px;
}
.pgd__lead{margin:0; font-size:16px; color:var(--pgd-ink-soft);}
.pgd__lead b{color:var(--pgd-ink);}

/* 꼬리표(칩) */
.pgd__chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; padding:0; list-style:none;}
.pgd__chips li{
  font-family:'Jua',sans-serif; font-size:14.5px;
  background:#fff; border:2.5px solid var(--pgd-ink); border-radius:999px;
  padding:3px 13px; box-shadow:0 3px 0 rgba(74,63,69,.12);
}
.pgd__chips li:nth-child(4n+1){background:var(--pgd-lemon);}
.pgd__chips li:nth-child(4n+2){background:var(--pgd-mint);}
.pgd__chips li:nth-child(4n+3){background:var(--pgd-sky);}
.pgd__chips li:nth-child(4n+4){background:var(--pgd-pink);}

/* 작은 카드들 */
.pgd__grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.pgd__card{
  position:relative; background:#fff;
  border:2.5px solid var(--pgd-ink); border-radius:24px;
  padding:20px 20px 16px; box-shadow:0 5px 0 rgba(74,63,69,.12);
}
.pgd__card--how{background:var(--pgd-pink);}
.pgd__card--learn{background:var(--pgd-mint);}
.pgd__card--class{background:var(--pgd-sky); margin-bottom:16px;}
.pgd__card h3{
  font-family:'Jua',sans-serif; font-weight:400; font-size:20px;
  margin:0 0 10px; display:flex; align-items:center; gap:8px;
}
.pgd__card h3 .pgd__ico{
  display:inline-grid; place-items:center; width:38px; height:38px; flex:0 0 auto;
  background:#fff; border:2.5px solid var(--pgd-ink); border-radius:50%;
  font-size:19px; line-height:1; transform:rotate(-6deg);
}
.pgd__card ul,.pgd__card ol{margin:0; padding:0; list-style:none;}
.pgd__card li{position:relative; padding-left:30px; margin:0 0 9px; font-size:15.5px;}
.pgd__card li:last-child{margin-bottom:0;}
.pgd__card li b{color:var(--pgd-ink);}

/* 순서 동그라미 */
.pgd__card ol{counter-reset:pgd;}
.pgd__card ol li::before{
  counter-increment:pgd; content:counter(pgd);
  position:absolute; left:0; top:2px; width:22px; height:22px;
  display:grid; place-items:center;
  font-family:'Jua',sans-serif; font-size:13px; color:#fff; line-height:1;
  background:var(--pgd-accent); border:2px solid var(--pgd-ink); border-radius:50%;
}
/* 배움 체크 */
.pgd__card--learn li::before{
  content:"✓"; position:absolute; left:0; top:2px; width:22px; height:22px;
  display:grid; place-items:center; font-weight:700; font-size:13px; line-height:1;
  color:var(--pgd-ink); background:#fff; border:2px solid var(--pgd-ink); border-radius:7px;
  transform:rotate(-4deg);
}
/* 교실 꿀팁 별 */
.pgd__card--class ul{display:grid; grid-template-columns:1fr 1fr; gap:9px 18px;}
.pgd__card--class li{margin:0;}
.pgd__card--class li::before{
  content:"★"; position:absolute; left:2px; top:0; font-size:18px; line-height:1.4;
  color:var(--pgd-accent); -webkit-text-stroke:1px var(--pgd-ink);
}

/* 선생님 한마디 말풍선 */
.pgd__tip{
  position:relative; display:flex; gap:12px; align-items:flex-start;
  background:var(--pgd-lemon); border:2.5px dashed var(--pgd-ink);
  border-radius:22px; padding:14px 18px; margin:6px 0 0; font-size:15px;
}
.pgd__tip::before{content:"💬"; font-size:24px; line-height:1.2; flex:0 0 auto;}
.pgd__tip b{display:block; font-family:'Jua',sans-serif; font-weight:400; font-size:17px; color:var(--pgd-ink); margin-bottom:2px;}

/* 장식 */
.pgd__deco{position:absolute; font-size:26px; pointer-events:none; user-select:none;
  animation:pgd-twinkle 2.6s ease-in-out infinite;}
.pgd__deco--a{top:14px; right:22px;}
.pgd__deco--b{bottom:16px; right:-10px; animation-delay:1.1s;}
.pgd__deco--c{top:46%; left:-14px; animation-delay:.6s;}

@keyframes pgd-bob{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-7px) rotate(2deg);}}
@keyframes pgd-twinkle{0%,100%{transform:scale(1) rotate(0); opacity:1;}50%{transform:scale(1.18) rotate(12deg); opacity:.75;}}

@media (prefers-reduced-motion: reduce){
  .pgd__mascot,.pgd__deco{animation:none;}
}

@media (max-width:680px){
  .pgd{margin:44px auto 28px;}
  .pgd__box{padding:38px 16px 18px; border-radius:26px;}
  .pgd__ribbon{font-size:15px; padding:5px 16px 6px;}
  .pgd__head{flex-direction:column; text-align:center; gap:14px;}
  .pgd__mascot{width:128px; height:128px;}
  .pgd__title{font-size:23px;}
  .pgd__chips{justify-content:center;}
  .pgd__grid{grid-template-columns:1fr;}
  .pgd__card--class ul{grid-template-columns:1fr;}
  .pgd__deco--b,.pgd__deco--c{display:none;}
}

@media print{
  .pgd{display:none !important;}
}