@charset "utf-8";

/* ================================================
   🌸 SWEET GARDEN THEME — 아기자기 팝 테마 🌸
   ================================================ */

/* Google Fonts — 귀여운 한글+영문 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Gaegu:wght@400;700&display=swap');

/* ================================================
   디자인 토큰
   ================================================ */
:root {
  /* 🎀 브랜드 컬러 — 파스텔 팝 */
  --pink:       #ff7eb9;
  --pink-soft:  #ffd6ec;
  --pink-pale:  #fff0f7;
  --lavender:   #c084fc;
  --lav-soft:   #ede9fe;
  --lav-pale:   #faf5ff;
  --mint:       #34d399;
  --mint-soft:  #d1fae5;
  --mint-pale:  #f0fdf4;
  --peach:      #fb923c;
  --peach-soft: #ffedd5;
  --sky:        #38bdf8;
  --sky-soft:   #e0f2fe;
  --yellow:     #fbbf24;
  --yellow-soft:#fef3c7;
  --coral:      #f87171;

  /* 그라데이션 */
  --grad-candy:   linear-gradient(135deg, #ff7eb9 0%, #c084fc 50%, #38bdf8 100%);
  --grad-peach:   linear-gradient(135deg, #fb923c 0%, #ff7eb9 100%);
  --grad-mint:    linear-gradient(135deg, #34d399 0%, #38bdf8 100%);
  --grad-lav:     linear-gradient(135deg, #c084fc 0%, #ff7eb9 100%);
  --grad-pastel:  linear-gradient(160deg, #fff0f7 0%, #ede9fe 40%, #e0f2fe 100%);
  --grad-header:  linear-gradient(135deg, #ffe4f3 0%, #ede9fe 50%, #dbeafe 100%);
  --grad-footer:  linear-gradient(135deg, #4c1d95 0%, #831843 60%, #9d174d 100%);
  --grad-btn:     linear-gradient(135deg, #ff7eb9, #c084fc);
  --grad-btn2:    linear-gradient(135deg, #34d399, #38bdf8);

  /* 텍스트 */
  --txt-dark:   #3b2a4a;
  --txt-mid:    #6b5b7e;
  --txt-soft:   #a78bb5;
  --txt-pale:   #cdb8d8;

  /* 테두리 */
  --bdr:        #f0d6e8;
  --bdr-focus:  #ff7eb9;

  /* 그림자 */
  --shadow-candy:  0 4px 20px rgba(255,126,185,.30);
  --shadow-lav:    0 4px 20px rgba(192,132,252,.30);
  --shadow-sm:     0 2px 8px  rgba(180,100,200,.12);
  --shadow-md:     0 6px 24px rgba(180,100,200,.18);
  --shadow-lg:     0 12px 48px rgba(150,80,180,.22);
  --shadow-card:   0 4px 0 0 #f0c0dc, 0 8px 24px rgba(200,100,180,.15);

  /* 라운드 */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   36px;
  --r-full: 9999px;

  /* 폰트 */
  --font:    'Nunito', 'Gaegu', 'Malgun Gothic', sans-serif;

  /* 크기 */
  --layout-width: 1200px;
  --hd-height: 90px;
  --gnb-height: 56px;

  /* 애니 */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 400ms;
}

/* ================================================
   배경 패턴 — 반짝이는 도트
   ================================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle, rgba(255,126,185,.18) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(192,132,252,.14) 1.5px, transparent 1.5px);
  background-size: 40px 40px, 28px 28px;
  background-position: 0 0, 14px 14px;
  pointer-events: none;
}

/* ================================================
   리셋 & 베이스
   ================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { overflow-y: scroll; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0; padding: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.7;
  color: var(--txt-dark);
  background: var(--grad-pastel);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin: 0; padding: 0; border: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font); font-weight: 800; line-height: 1.3; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ul, dl, dt, dd { margin: 0; padding: 0; list-style: none; }
legend { position: absolute; margin: 0; padding: 0; font-size: 0; line-height: 0; text-indent: -9999em; overflow: hidden; }
label, input, button, select, img { vertical-align: middle; font-size: 1em; }
input, button, textarea, select { margin: 0; font-family: var(--font); font-size: 1em; }
input[type="submit"], button { cursor: pointer; }
p { margin: 0; padding: 0; word-break: break-all; }
hr { display: none; }
pre { overflow-x: auto; font-size: 1.05em; }
a { color: inherit; text-decoration: none; }

/* 포커스 링 */
:focus-visible { outline: 2.5px dashed var(--pink); outline-offset: 3px; border-radius: var(--r-sm); }

/* 입력 포커스 */
input[type=text], input[type=password], input[type=email], input[type=tel], textarea {
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
  outline: none;
}
input[type=text]:focus, input[type=password]:focus,
input[type=email]:focus, input[type=tel]:focus,
textarea:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(255,126,185,.25) !important;
  border-color: var(--pink) !important;
}

.placeholdersjs { color: var(--txt-pale) !important; }

/* ================================================
   레이아웃 너비
   ================================================ */
#hd, #wrapper, #ft { min-width: var(--layout-width); }
#hd_pop, #hd_wrapper, #tnb .inner,
#gnb .gnb_wrap, #container_wr, #ft_wr { width: var(--layout-width); }

/* ================================================
   유틸리티
   ================================================ */
.is-hidden { display: none !important; }
.is-visible { display: block !important; }
.pc-only { display: none; }
@media (min-width: 769px) { .pc-only { display: block !important; } }
.mobile-only { display: block; }
@media (min-width: 769px) { .mobile-only { display: none !important; } }

/* ================================================
   키프레임 애니메이션
   ================================================ */
@keyframes floatUp {
  0%   { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(-8px) rotate(2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.12); }
}
@keyframes sparkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50%       { opacity: .6; transform: scale(1.3) rotate(20deg); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.8) rotate(-4deg); }
  70%  { transform: scale(1.05) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(-5deg); }
  75%       { transform: rotate(5deg); }
}
@keyframes rainbowShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ================================================
   팝업 레이어
   ================================================ */
#hd_pop { z-index: 1000; position: relative; margin: 0 auto; height: 0; }
#hd_pop h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
.hd_pops {
  position: absolute;
  border: 3px solid var(--pink-soft);
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: popIn var(--dur-slow) var(--ease-bounce);
}
.hd_pops img { max-width: 100%; display: block; }
.hd_pops_footer {
  padding: 0;
  background: linear-gradient(135deg, #4c1d95, #831843);
  color: #fff; text-align: left; position: relative;
}
.hd_pops_footer::after { display: block; visibility: hidden; clear: both; content: ""; }
.hd_pops_footer button { padding: 10px 18px; border: 0; color: #fff; font-size: 12px; cursor: pointer; font-weight: 700; }
.hd_pops_footer .hd_pops_reject { background: transparent; }
.hd_pops_footer .hd_pops_close { background: rgba(255,255,255,.15); position: absolute; top: 0; right: 0; }

/* ================================================
   🌸 헤더
   ================================================ */
#hd {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--grad-header);
  border-bottom: 3px solid var(--pink-soft);
  box-shadow: 0 4px 20px rgba(255,126,185,.18);
}

/* 헤더 상단 리본 장식 */
#hd::before {
  content: '🌸 ✨ 💖 ✨ 🌸 ✨ 💜 ✨ 🌸 ✨ 💙 ✨ 🌸 ✨ 💖 ✨ 🌸 ✨ 💜 ✨ 🌸';
  display: block;
  text-align: center;
  font-size: 11px;
  line-height: 22px;
  background: var(--grad-candy);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 4px;
  overflow: hidden;
  white-space: nowrap;
}

#hd_h1 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }

/* TNB */
#tnb {
  border-bottom: 2px dashed var(--pink-soft);
  background: rgba(255,240,247,.6);
}
#tnb::after { display: block; visibility: hidden; clear: both; content: ""; }
#tnb .inner { margin: 0 auto; }

#hd_define { float: left; }
#hd_define::after { display: block; visibility: hidden; clear: both; content: ""; }
#hd_define li {
  float: left; font-size: 11px; font-weight: 700;
  line-height: 36px;
  border-right: 2px dotted var(--pink-soft);
  padding: 0 14px 0 0; margin-right: 12px;
}
#hd_define li:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
#hd_define li a { color: var(--txt-soft); transition: color var(--dur-fast); }
#hd_define li a:hover { color: var(--pink); }
#hd_define li.active a { color: var(--pink); }

#hd_qnb { float: right; }
#hd_qnb::after { display: block; visibility: hidden; clear: both; content: ""; }
#hd_qnb li {
  float: left; font-size: 11px; font-weight: 700;
  line-height: 36px;
  border-right: 2px dotted var(--pink-soft);
  padding: 0 14px 0 0; margin-right: 12px;
}
#hd_qnb li:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
#hd_qnb li a { color: var(--txt-soft); transition: color var(--dur-fast); }
#hd_qnb li a:hover { color: var(--pink); }
#hd_qnb .visit .visit-num {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; padding: 0 8px; margin-left: 5px;
  border-radius: var(--r-full);
  background: var(--grad-candy);
  color: #fff; font-size: 10px; font-weight: 800; line-height: 1;
  animation: heartbeat 1.5s ease-in-out infinite;
}

/* 헤더 래퍼 */
#hd_wrapper {
  position: relative; margin: 0 auto;
  height: var(--hd-height);
  display: flex; align-items: center; gap: 28px;
}

/* 로고 */
#logo {
  flex-shrink: 0; display: flex; align-items: center;
  animation: floatUp 3s ease-in-out infinite;
}
#logo img { max-height: 48px; width: auto; filter: drop-shadow(0 4px 8px rgba(255,126,185,.4)); }

/* 검색창 */
.hd_sch_wr {
  flex: 1; max-width: 460px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0; margin: 0;
}
#hd_sch {
  display: flex; align-items: center; width: 100%;
  background: rgba(255,255,255,.85);
  border: 2.5px solid var(--pink-soft);
  border-radius: var(--r-full);
  overflow: hidden;
  box-shadow: var(--shadow-candy);
  transition: all var(--dur-base) var(--ease-out);
}
#hd_sch:focus-within {
  background: #fff;
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(255,126,185,.2), var(--shadow-candy);
  transform: scale(1.02);
}
#hd_sch legend { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#hd_sch #sch_stx {
  flex: 1; height: 46px; padding: 0 20px;
  background: transparent; border: 0;
  font-size: 13px; font-weight: 600; color: var(--txt-dark);
  outline: none; box-shadow: none !important;
}
#hd_sch #sch_stx::placeholder { color: var(--txt-pale); }
#hd_sch #sch_submit {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 46px; border: 0;
  background: var(--grad-candy);
  color: #fff; font-size: 16px; cursor: pointer;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
#hd_sch #sch_submit:hover { opacity: .9; transform: scale(1.08); }

/* 로그인 */
.hd_login {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 6px;
  margin: 0; padding: 0;
}
.hd_login li { float: none; margin: 0; padding: 0; border: 0; list-style: none; }
.hd_login a {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 14px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.7);
  border: 2px solid var(--pink-soft);
  color: var(--txt-mid); font-size: 12px; font-weight: 700;
  transition: all var(--dur-fast) var(--ease-bounce);
}
.hd_login a:hover {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-candy);
}
.hd_login .tnb_admin a {
  background: var(--grad-candy);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-candy);
}
.hd_login .tnb_admin a:hover { opacity: .88; }

/* ================================================
   🌷 GNB 메인 메뉴
   ================================================ */
#gnb {
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--pink-soft);
}
#gnb > h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#gnb .gnb_wrap { margin: 0 auto; position: relative; }
#gnb .gnb_wrap:hover, #gnb .gnb_wrap:focus { z-index: 100; }
#gnb #gnb_1dul { font-size: 13px; padding: 0; }
#gnb ul::after { display: block; visibility: hidden; clear: both; content: ""; }
#gnb .gnb_1dli { float: left; height: var(--gnb-height); position: relative; }

.gnb_1da {
  display: flex; align-items: center;
  height: var(--gnb-height); padding: 0 22px;
  font-size: 13px; font-weight: 800;
  color: var(--txt-dark); letter-spacing: .02em;
  position: relative;
  transition: color var(--dur-fast);
}
/* 하단 깜찍한 물결 언더라인 */
.gnb_1da::after {
  content: '';
  position: absolute; bottom: 6px; left: 22px; right: 22px;
  height: 3px;
  background: var(--grad-candy);
  border-radius: var(--r-full);
  transform: scaleX(0);
  transition: transform var(--dur-base) var(--ease-bounce);
  transform-origin: center;
}
.gnb_1dli:hover .gnb_1da { color: var(--pink); }
.gnb_1dli:hover .gnb_1da::after,
.gnb_1dli_over .gnb_1da::after { transform: scaleX(1); }
.gnb_1dli_over .gnb_1da { color: var(--pink); }

.gnb_1dli.gnb_al_li_plus .gnb_1da { padding-right: 28px; }
.gnb_1dli .bg {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  display: inline-block; width: 10px; height: 10px; overflow: hidden;
  background: url('../img/gnb_bg2.gif') no-repeat 50% 50%;
  text-indent: -999px; opacity: .4;
}

/* 2단 드롭다운 */
.gnb_2dli:first-child { border: 0; }
.gnb_2dul {
  display: none; position: absolute;
  top: calc(var(--gnb-height) + 4px); min-width: 170px; z-index: 200;
}
.gnb_2dul .gnb_2dul_box {
  background: rgba(255,255,255,.96);
  border: 2.5px solid var(--pink-soft);
  border-radius: var(--r-lg); padding: 8px 0;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  animation: slideDown var(--dur-base) var(--ease-bounce);
}
.gnb_2da {
  display: block; padding: 0 18px; line-height: 46px;
  font-size: 12px; font-weight: 700; color: var(--txt-mid);
  transition: all var(--dur-fast);
  position: relative;
}
.gnb_2da::before {
  content: '✿';
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: var(--pink-soft);
  transition: color var(--dur-fast), transform var(--dur-fast);
}
a.gnb_2da:hover {
  background: var(--pink-pale);
  color: var(--pink);
  padding-left: 22px;
}
a.gnb_2da:hover::before { color: var(--pink); transform: translateY(-50%) rotate(45deg); }

.gnb_1dli_over .gnb_2dul { display: block; left: 0; }
.gnb_1dli_over2 .gnb_2dul { display: block; right: 0; }
.gnb_wrap .gnb_empty { padding: 12px 0; width: 100%; text-align: center; line-height: 3em; color: var(--txt-soft); }
.gnb_wrap .gnb_empty a { color: var(--pink); text-decoration: underline; }

/* 전체메뉴 버튼 */
#gnb .gnb_menu_btn {
  display: flex; align-items: center; justify-content: center;
  width: var(--gnb-height); height: var(--gnb-height);
  border: 0; background: transparent; color: var(--txt-mid);
  font-size: 20px; border-radius: 0;
  transition: all var(--dur-fast) var(--ease-bounce);
}
#gnb .gnb_menu_btn:hover { color: var(--pink); transform: scale(1.2); animation: wiggle .4s ease; }
#gnb .gnb_close_btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 2px solid var(--pink-soft); border-radius: var(--r-full);
  background: #fff; color: var(--txt-soft); font-size: 16px;
  position: absolute; top: 16px; right: 16px;
  transition: all var(--dur-fast) var(--ease-bounce);
}
#gnb .gnb_close_btn:hover { background: var(--pink); border-color: var(--pink); color: #fff; transform: rotate(90deg) scale(1.1); }
#gnb .gnb_mnal { float: right; padding: 0; }

/* 전체메뉴 패널 */
#gnb_all {
  display: none; position: absolute; width: 100%;
  background: rgba(255,248,252,.97);
  z-index: 300;
  border: 2.5px solid var(--pink-soft); border-top: none;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: slideDown var(--dur-slow) var(--ease-bounce);
}
#gnb_all h2 {
  font-size: 15px; font-weight: 900;
  padding: 18px 28px; border-bottom: 2px dashed var(--pink-soft);
  color: var(--txt-dark); letter-spacing: .02em;
}
#gnb_all h2::before { content: '🌸 '; }
#gnb_all .gnb_al_ul::after { display: block; visibility: hidden; clear: both; content: ""; }
#gnb_all .gnb_al_ul > li:nth-child(5n+1) { border-left: 0; }
#gnb_all .gnb_al_li {
  float: left; width: 20%; min-height: 130px;
  padding: 20px 24px; border-left: 2px dashed var(--pink-soft);
}
#gnb_all .gnb_al_li .gnb_al_a {
  font-size: 13px; display: block; margin-bottom: 10px;
  font-weight: 900; color: var(--pink);
  transition: color var(--dur-fast);
}
#gnb_all .gnb_al_li .gnb_al_a::before { content: '💗 '; font-size: 11px; }
#gnb_all .gnb_al_li .gnb_al_a:hover { color: var(--lavender); }
#gnb_all .gnb_al_li li { line-height: 2.4em; }
#gnb_all .gnb_al_li li a {
  font-size: 12px; color: var(--txt-soft); font-weight: 600;
  transition: all var(--dur-fast);
}
#gnb_all .gnb_al_li li a:hover { color: var(--pink); padding-left: 6px; }
#gnb_all_bg {
  display: none;
  background: rgba(75,20,80,.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 299;
}

/* ================================================
   콘텐츠 레이아웃
   ================================================ */
#wrapper {}
#container_wr { margin: 0 auto; }
#container_wr::after { display: block; visibility: hidden; clear: both; content: ""; }

#aside { float: right; width: 240px; margin: 30px 0 30px 20px; }

#container {
  position: relative; float: left;
  width: 914px; min-height: 500px; height: auto !important;
  margin: 30px 0;
  background: rgba(255,255,255,.92);
  border-radius: var(--r-lg);
  border: 2.5px solid var(--pink-soft);
  box-shadow: var(--shadow-card);
  padding: 28px 32px;
}
#container::after { display: block; visibility: hidden; clear: both; content: ""; }

/* 컨테이너 상단 리본 장식 */
#container::before {
  content: '';
  position: absolute;
  top: -2px; left: 20px; right: 20px; height: 4px;
  background: var(--grad-candy);
  border-radius: var(--r-full);
}

#container_title {
  font-size: 20px; font-weight: 900;
  color: var(--txt-dark);
  padding-bottom: 18px; margin-bottom: 22px;
  border-bottom: 2px dashed var(--pink-soft);
  letter-spacing: -.01em;
  position: relative;
}
#container_title span::before { content: '🌷 '; }
#container_title span { display: block; line-height: 1.4; }

/* 최신글 */
.lt_wr { width: 32%; }
.lt_wr:nth-child(3n+1) { clear: both; }
.latest_wr { margin-bottom: 28px; }
.latest_wr::after { display: block; visibility: hidden; clear: both; content: ""; }
.latest_top_wr { margin: 0 -10px 28px; }
.latest_top_wr::after { display: block; visibility: hidden; clear: both; content: ""; }

/* ================================================
   🌈 푸터
   ================================================ */
#ft {
  background: var(--grad-footer);
  text-align: center; margin: 0;
  position: relative;
  overflow: hidden;
}
/* 푸터 상단 물결 */
#ft::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: var(--grad-candy);
}
#ft h1 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#ft_wr { max-width: 1240px; margin: 0; padding: 54px 20px 0; display: inline-block; text-align: left; }
#ft_wr::after { display: block; visibility: hidden; clear: both; content: ""; }
#ft_wr .ft_cnt { width: 25%; float: left; padding: 0 24px; }

#ft_link { margin-bottom: 16px; }
#ft_link a {
  display: inline-block; color: rgba(255,200,230,.8);
  font-size: 12px; font-weight: 700; line-height: 2.4em;
  margin-right: 2px; padding: 0 6px; border-radius: var(--r-sm);
  transition: all var(--dur-fast);
}
#ft_link a:hover { color: var(--pink-soft); background: rgba(255,255,255,.1); }

#ft_company h2 {
  font-size: 12px; font-weight: 900;
  color: var(--pink-soft); margin-bottom: 14px; letter-spacing: .06em; text-transform: uppercase;
}
#ft_company h2::before { content: '🌸 '; }
#ft_company { color: rgba(220,180,220,.75); font-size: 11px; line-height: 2.2em; }
#ft_catch { margin: 20px 0 10px; }
#ft_copy {
  text-align: center; width: var(--layout-width); margin: 36px auto 0;
  padding: 22px 0; color: rgba(200,150,200,.7); font-size: 11px; font-weight: 700;
  border-top: 1px solid rgba(255,255,255,.12); letter-spacing: .04em;
}

/* 상단이동 버튼 — 하트 */
#top_btn {
  position: fixed; bottom: 28px; right: 28px;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid #fff;
  background: var(--grad-candy);
  color: #fff; font-size: 20px; border-radius: var(--r-full);
  box-shadow: var(--shadow-candy); z-index: 90;
  transition: transform var(--dur-base) var(--ease-bounce), box-shadow var(--dur-base);
  animation: heartbeat 2s ease-in-out infinite;
}
#top_btn:hover {
  transform: scale(1.2) translateY(-4px);
  box-shadow: 0 10px 32px rgba(255,126,185,.55);
  animation: none;
}

/* ================================================
   화면낭독기 / 건너뛰기
   ================================================ */
#hd_login_msg { position: absolute; top: 0; left: 0; font-size: 0; line-height: 0; overflow: hidden; }
.msg_sound_only, .sound_only {
  display: inline-block !important; position: absolute; top: 0; left: 0;
  width: 0; height: 0; margin: 0 !important; padding: 0 !important;
  font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important;
}
#skip_to_container a {
  z-index: 100000; position: absolute; top: 0; left: 0;
  width: 1px; height: 1px; font-size: 0; line-height: 0; overflow: hidden;
}
#skip_to_container a:focus, #skip_to_container a:active {
  width: 100%; height: 52px; background: var(--grad-candy);
  color: #fff; font-size: 1.2em; font-weight: 800;
  text-align: center; line-height: 52px;
}

.img_fix { width: 100%; height: auto; }

/* ================================================
   게시물 복사/이동
   ================================================ */
#copymove .win_desc { text-align: center; display: block; }
#copymove .tbl_wrap { margin: 20px; }
#copymove .win_btn { padding: 0 20px 20px; }
.copymove_current {
  float: right; background: var(--grad-candy);
  padding: 4px 14px; color: #fff;
  border-radius: var(--r-full); font-size: 11px; font-weight: 800;
}
.copymove_currentbg { background: var(--pink-pale); }

/* ================================================
   캡챠
   ================================================ */
#captcha { display: inline-block; position: relative; }
#captcha legend { position: absolute; font-size: 0; line-height: 0; text-indent: -9999em; overflow: hidden; }
#captcha #captcha_img { height: 40px; border: 2px solid var(--pink-soft); vertical-align: top; border-radius: var(--r-md); }
#captcha #captcha_mp3 { margin: 0; padding: 0; width: 40px; height: 40px; border: 0; background: url('../../../img/captcha2.png') no-repeat; text-indent: -999px; cursor: pointer; border-radius: var(--r-sm); vertical-align: middle; }
#captcha #captcha_reload { margin: 0; padding: 0; width: 40px; height: 40px; border: 0; background: url('../../../img/captcha2.png') no-repeat 0 -40px; text-indent: -999px; cursor: pointer; border-radius: var(--r-sm); vertical-align: middle; }
#captcha #captcha_key { margin: 0 0 0 4px; padding: 0 8px; width: 90px; height: 40px; border: 2px solid var(--pink-soft); background: #fff; font-size: 1.2em; font-weight: 800; text-align: center; border-radius: var(--r-md); vertical-align: top; color: var(--txt-dark); }
#captcha #captcha_info { display: block; margin: 5px 0 0; font-size: 11px; color: var(--txt-pale); }
#captcha.m_captcha audio { display: block; margin: 0 0 5px; width: 187px; }
#captcha.m_captcha #captcha_img { width: 160px; height: 60px; border: 2px solid var(--pink-soft); margin: 5px 0 3px; display: block; border-radius: var(--r-md); }
#captcha.m_captcha #captcha_reload { position: static; }
#captcha.m_captcha #captcha_reload span { display: none; }
#captcha.m_captcha #captcha_key { margin: 0 0 0 4px; width: 115px; height: 29px; line-height: 29px; }
#captcha.m_captcha #captcha_mp3 { width: 31px; height: 31px; border: none; }

/* ================================================
   CKEditor
   ================================================ */
.cheditor-popup-window *, .cheditor-popup-window :after, .cheditor-popup-window :before {
  -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;
}
#bo_v_con ul { display: block; list-style-type: disc; margin: 1em 0; padding-left: 40px; }
#bo_v_con ol { display: block; list-style-type: decimal; margin: 1em 0; padding-left: 40px; }
#bo_v_con li { display: list-item; }

.cke_sc { margin: 0 0 6px; text-align: right; }
.btn_cke_sc {
  display: inline-block; padding: 0 12px; height: 28px;
  border: 2px solid var(--pink-soft); background: var(--pink-pale);
  color: var(--txt-mid); text-decoration: none; line-height: 24px;
  vertical-align: middle; cursor: pointer; border-radius: var(--r-sm);
  font-size: 11px; font-weight: 700; transition: all var(--dur-fast);
}
.btn_cke_sc:hover { background: var(--pink-soft); color: var(--txt-dark); }
.cke_sc_def { margin: 0 0 6px; padding: 14px; border: 2px dashed var(--pink-soft); background: var(--pink-pale); border-radius: var(--r-md); }
.cke_sc_def dl { margin: 0 0 5px; text-align: left; }
.cke_sc_def dl::after { display: block; visibility: hidden; clear: both; content: ""; }
.cke_sc_def dt, .cke_sc_def dd { float: left; margin: 0; padding: 6px 0; border-bottom: 1px dashed var(--pink-soft); }
.cke_sc_def dt { width: 20%; font-weight: 800; color: var(--txt-dark); }
.cke_sc_def dd { width: 30%; color: var(--txt-mid); }

/* ================================================
   💝 버튼 시스템
   ================================================ */
a.btn, .btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 18px;
  font-weight: 800; font-size: 12px;
  border: 0; border-radius: var(--r-full); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-bounce);
  letter-spacing: .02em;
}

/* btn01 기본 선 버튼 */
a.btn01, button.btn01 {
  display: inline-flex; align-items: center;
  padding: 7px 16px;
  border: 2px solid var(--pink-soft); background: #fff;
  color: var(--txt-mid); border-radius: var(--r-full);
  font-size: 12px; font-weight: 700;
  transition: all var(--dur-fast) var(--ease-bounce); cursor: pointer;
}
a.btn01:hover, button.btn01:hover {
  border-color: var(--pink); background: var(--pink-pale);
  color: var(--pink); transform: translateY(-2px);
  box-shadow: var(--shadow-candy);
}

/* btn02 다크 버튼 */
a.btn02, button.btn02 {
  display: inline-flex; align-items: center; padding: 7px 16px;
  border: 2px solid var(--lavender); background: var(--lavender);
  color: #fff; border-radius: var(--r-full); font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all var(--dur-fast) var(--ease-bounce);
}
a.btn02:hover, button.btn02:hover {
  background: var(--lav-soft); border-color: var(--lavender); color: var(--txt-dark);
  transform: translateY(-2px); box-shadow: var(--shadow-lav);
}

.btn_confirm { text-align: right; }

/* 제출 버튼 */
.btn_submit {
  border: 0;
  background: var(--grad-btn);
  color: #fff; border-radius: var(--r-full); font-weight: 800;
  box-shadow: var(--shadow-candy);
  transition: all var(--dur-fast) var(--ease-bounce);
}
.btn_submit:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 24px rgba(255,126,185,.5); }

/* 닫기 버튼 */
.btn_close {
  border: 2px solid var(--pink-soft); cursor: pointer;
  border-radius: var(--r-full); background: #fff;
  color: var(--txt-mid); transition: all var(--dur-fast) var(--ease-bounce);
}
.btn_close:hover { background: var(--pink-pale); border-color: var(--pink); color: var(--pink); transform: rotate(5deg); }
a.btn_close { text-align: center; line-height: 50px; }

/* 취소 버튼 */
a.btn_cancel, button.btn_cancel {
  display: inline-flex; align-items: center; padding: 7px 16px;
  background: var(--lav-soft); color: var(--txt-mid);
  border: 2px solid var(--lavender); border-radius: var(--r-full);
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-bounce);
}
.btn_cancel:hover { background: var(--lavender); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lav); }

/* 폼라인 버튼 */
a.btn_frmline, button.btn_frmline {
  display: inline-flex; align-items: center; justify-content: center;
  width: 130px; height: 42px; padding: 0 8px;
  border: 0; background: var(--grad-mint);
  border-radius: var(--r-full); color: #fff; font-weight: 800;
  font-size: 12px; cursor: pointer; transition: all var(--dur-fast) var(--ease-bounce);
  box-shadow: 0 4px 12px rgba(52,211,153,.3);
}
a.btn_frmline:hover, button.btn_frmline:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 20px rgba(52,211,153,.4); }

/* 게시판 버튼 */
a.btn_b01, .btn_b01 { display: inline-flex; align-items: center; color: var(--txt-pale); border: 0; background: transparent; cursor: pointer; transition: all var(--dur-fast); }
.btn_b01:hover { color: var(--pink); transform: scale(1.1); }
a.btn_b02, .btn_b02 {
  display: inline-flex; align-items: center;
  background: var(--grad-btn); padding: 5px 16px;
  color: #fff; border: 0; border-radius: var(--r-full);
  font-size: 12px; font-weight: 800; transition: all var(--dur-fast) var(--ease-bounce);
  box-shadow: var(--shadow-candy);
}
a.btn_b02:hover, .btn_b02:hover { transform: translateY(-2px) scale(1.04); }
a.btn_b03, .btn_b03 {
  display: inline-flex; align-items: center;
  background: #fff; border: 2px solid var(--pink-soft);
  color: var(--txt-mid); border-radius: var(--r-full); padding: 5px 14px;
  font-size: 12px; font-weight: 700; transition: all var(--dur-fast) var(--ease-bounce);
}
a.btn_b03:hover, .btn_b03:hover { background: var(--pink-pale); border-color: var(--pink); color: var(--pink); transform: translateY(-2px); }
a.btn_b04, .btn_b04 {
  display: inline-flex; align-items: center;
  background: #fff; border: 2px solid var(--bdr);
  color: var(--txt-mid); border-radius: var(--r-full); padding: 5px 14px;
  font-size: 12px; font-weight: 700; transition: all var(--dur-fast) var(--ease-bounce);
}
a.btn_b04:hover, .btn_b04:hover { background: var(--pink-pale); border-color: var(--pink-soft); color: var(--txt-dark); transform: translateY(-2px); }
a.btn_admin, .btn_admin { display: inline-flex; align-items: center; color: var(--coral); font-weight: 800; transition: all var(--dur-fast); }
.btn_admin:hover { color: #e03060; transform: scale(1.1); }

/* ================================================
   📋 테이블
   ================================================ */
.tbl_wrap table {
  width: 100%; border-collapse: collapse; border-spacing: 0;
  background: rgba(255,255,255,.9);
  border-top: 3px solid var(--pink);
  border-bottom: 2px solid var(--pink-soft);
  border-radius: var(--r-md);
}
.tbl_wrap caption { padding: 10px 0; font-weight: 800; text-align: left; color: var(--txt-dark); }

.tbl_head01 { margin: 0 0 16px; }
.tbl_head01 caption { padding: 0; font-size: 0; line-height: 0; overflow: hidden; }
.tbl_head01 thead th {
  padding: 14px 8px; font-weight: 800; font-size: 11px;
  text-align: center; letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 2px solid var(--pink-soft);
  background: linear-gradient(135deg, var(--pink-pale), var(--lav-pale));
  color: var(--txt-mid);
}
.tbl_head01 thead th input { vertical-align: top; }
.tbl_head01 tfoot th, .tbl_head01 tfoot td {
  padding: 10px; border-top: 2px solid var(--pink-soft);
  border-bottom: 2px solid var(--pink-soft);
  background: var(--pink-pale); text-align: center;
}
.tbl_head01 tbody th { padding: 12px 8px; border-bottom: 1px dashed var(--pink-soft); color: var(--txt-dark); font-weight: 700; }
.tbl_head01 td {
  color: var(--txt-mid); padding: 14px 8px;
  border-top: 1px dashed var(--pink-soft);
  border-bottom: 1px dashed var(--pink-soft);
  line-height: 1.5; height: 54px; word-break: break-all; font-size: 13px;
}
.tbl_head01 tbody tr { transition: background var(--dur-fast); }
.tbl_head01 tbody tr:hover td { background: var(--pink-pale); }
.tbl_head01 a { color: var(--txt-dark); font-weight: 600; }
.tbl_head01 a:hover { color: var(--pink); text-decoration: underline; }

.tbl_head02 { margin: 0 0 16px; }
.tbl_head02 caption { padding: 0; font-size: 0; line-height: 0; overflow: hidden; }
.tbl_head02 thead th {
  padding: 12px 8px; border-top: 3px solid var(--pink);
  border-bottom: 2px solid var(--pink-soft);
  background: linear-gradient(135deg, var(--pink-pale), var(--lav-pale));
  color: var(--txt-mid); font-size: 11px; font-weight: 800;
  text-align: center; letter-spacing: .05em;
}
.tbl_head02 thead a { color: var(--txt-mid); }
.tbl_head02 thead th input { vertical-align: top; }
.tbl_head02 tfoot th, .tbl_head02 tfoot td { padding: 10px; border-top: 1px dashed var(--pink-soft); border-bottom: 1px dashed var(--pink-soft); background: var(--pink-pale); text-align: center; }
.tbl_head02 tbody th { padding: 10px 8px; border-top: 1px dashed var(--pink-soft); border-bottom: 1px dashed var(--pink-soft); background: rgba(255,255,255,.8); }
.tbl_head02 td { padding: 10px 8px; border-top: 1px dashed var(--pink-soft); border-bottom: 1px dashed var(--pink-soft); background: rgba(255,255,255,.8); line-height: 1.5; word-break: break-all; font-size: 13px; }

/* ================================================
   📝 폼 테이블
   ================================================ */
.tbl_frm01 { margin: 0 0 24px; }
.tbl_frm01 table { width: 100%; border-collapse: collapse; border-spacing: 0; }
.tbl_frm01 th {
  width: 90px; padding: 10px 16px;
  border: 1px dashed var(--pink-soft); border-left: 0;
  background: linear-gradient(135deg, var(--pink-pale), var(--lav-pale));
  text-align: left; font-weight: 800; font-size: 12px; color: var(--txt-mid);
}
.tbl_frm01 td { padding: 9px 12px; border-top: 1px dashed var(--pink-soft); border-bottom: 1px dashed var(--pink-soft); }
.wr_content textarea, .tbl_frm01 textarea, .form_01 textarea, .frm_input {
  border: 2px solid var(--pink-soft);
  background: rgba(255,255,255,.9); color: var(--txt-dark);
  vertical-align: middle; border-radius: var(--r-md); padding: 8px 14px;
  font-weight: 600;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.tbl_frm01 textarea { padding: 10px 14px; }
.frm_input { height: 42px; }
.full_input { width: 100%; }
.half_input { width: 49.5%; }
.twopart_input { width: 385px; margin-right: 10px; }
.tbl_frm01 textarea, .write_div textarea { width: 100%; height: 100px; }
.tbl_frm01 a { text-decoration: none; color: var(--pink); font-weight: 700; }
.tbl_frm01 .frm_file { display: block; margin-bottom: 5px; }
.tbl_frm01 .frm_info { display: block; padding: 0 0 5px; line-height: 1.7; color: var(--txt-pale); font-size: 11px; }
.frm_info.add_info {
  margin-top: 10px !important; padding: 12px 16px;
  background: var(--pink-pale); border: 2px dashed var(--pink-soft);
  border-radius: var(--r-md); line-height: 1.7;
}
.btn_info_toggle { display: block; margin: 5px 0 0 21px; font-size: 11px; color: var(--pink); background: none; border: none; cursor: pointer; text-decoration: underline; font-weight: 700; }

/* ================================================
   📑 리스트
   ================================================ */
.list_01 ul { border-top: 2px dashed var(--pink-soft); }
.list_01 li {
  border-bottom: 1px dashed var(--pink-soft);
  background: rgba(255,255,255,.8); padding: 12px 18px;
  position: relative; transition: background var(--dur-fast);
}
.list_01 li:nth-child(odd) { background: var(--pink-pale); }
.list_01 li::after { display: block; visibility: hidden; clear: both; content: ""; }
.list_01 li:hover { background: var(--lav-pale); }
.list_01 li.empty_li { text-align: center; padding: 28px 0; color: var(--txt-pale); }

.form_01 h2 { font-size: 1.1em; font-weight: 900; color: var(--txt-dark); }
.form_01 li { margin-bottom: 12px; }
.form_01 ul::after, .form_01 li::after { display: block; visibility: hidden; clear: both; content: ""; }
.form_01 .left_input { float: left; }
.form_01 .margin_input { margin-right: 1%; }
.form_01 textarea { height: 100px; width: 100%; }
.form_01 .frm_label { display: inline-block; width: 130px; font-weight: 700; }

.empty_table { padding: 60px 0 !important; text-align: center; color: var(--txt-pale); font-size: 15px; }
.empty_table::before { content: '🌸 '; }
.empty_list  { padding: 28px 0 !important; color: var(--txt-pale); text-align: center; }
.empty_list::before { content: '💭 '; }

.required, textarea.required { background-image: url('../img/require.png') !important; background-repeat: no-repeat !important; background-position: right top !important; }

.td_board, .td_category, .td_group, .td_mng { width: 80px; text-align: center; }
.td_chk { width: 30px; text-align: center; }
.td_date { width: 60px; text-align: center; }
.td_datetime { width: 110px; text-align: center; }
.td_mb_id, .td_nick { width: 100px; text-align: center; }
.td_name { width: 100px; text-align: left; }
.td_num { width: 50px; text-align: center; }
.td_numbig { width: 80px; text-align: center; }
.td_stat { width: 60px; text-align: center; }

.txt_active  { color: var(--mint); font-weight: 800; }
.txt_done    { color: var(--coral); font-weight: 800; }
.txt_expired { color: var(--txt-pale); }
.txt_rdy     { color: var(--peach); font-weight: 800; }

/* ================================================
   🪟 새창 팝업
   ================================================ */
.new_win { position: relative; }
.new_win .tbl_wrap { margin: 0 20px; }
.new_win #win_title {
  font-size: 17px; font-weight: 900;
  height: 62px; line-height: 42px; padding: 10px 24px;
  background: linear-gradient(135deg, var(--pink-pale), var(--lav-pale));
  color: var(--txt-dark);
  border-bottom: 2px dashed var(--pink-soft);
}
.new_win #win_title::before { content: '✨ '; }
.new_win #win_title .sv { font-size: 11px; line-height: 1.4; }
.new_win .win_ul { margin-bottom: 16px; padding: 0 24px; }
.new_win .win_ul::after { display: block; visibility: hidden; clear: both; content: ""; }
.new_win .win_ul li {
  float: left; background: #fff; text-align: center; padding: 0 16px;
  border: 2px solid var(--pink-soft); border-radius: var(--r-full);
  margin-left: 6px; transition: all var(--dur-fast) var(--ease-bounce);
}
.new_win .win_ul li:first-child { margin-left: 0; }
.new_win .win_ul li a { display: block; padding: 8px 0; color: var(--pink); font-size: 12px; font-weight: 700; }
.new_win .win_ul .selected { background: var(--grad-btn); border-color: transparent; }
.new_win .win_ul .selected a { color: #fff; font-weight: 800; }
.new_win .win_desc {
  position: relative; margin: 10px; border-radius: var(--r-md);
  font-size: 12px; background: #fff0f7; color: var(--coral);
  line-height: 50px; padding: 0 20px; border: 2px dashed #ffb3cc;
  font-weight: 700;
}
.new_win .win_desc::after { content: ""; position: absolute; left: 0; top: 0; width: 5px; height: 50px; background: var(--grad-candy); border-radius: var(--r-sm) 0 0 var(--r-sm); }
.new_win .frm_info { font-size: 11px; color: var(--txt-pale); }
.new_win .win_total {
  float: right; display: inline-block; line-height: 30px; font-weight: 700;
  font-size: 11px; color: var(--pink);
  background: var(--pink-pale); padding: 0 14px; border-radius: var(--r-full);
  border: 1px solid var(--pink-soft);
}
.new_win .new_win_con { margin: 20px 0; padding: 20px; }
.new_win .new_win_con::after { display: block; visibility: hidden; clear: both; content: ""; }
.new_win .new_win_con2 { margin: 20px 0; }
.new_win .btn_confirm::after { display: block; visibility: hidden; clear: both; content: ""; }
.new_win .win_btn { text-align: center; }
.new_win .cert_btn { margin-bottom: 30px; text-align: center; }
.new_win .btn_close { padding: 0 20px; height: 46px; overflow: hidden; cursor: pointer; }
.new_win .btn_submit { padding: 0 24px; height: 46px; font-weight: 800; font-size: 12px; }

/* ================================================
   🔍 검색 하이라이트
   ================================================ */
.sch_word {
  color: #fff;
  background: var(--grad-candy);
  background-size: 200% 200%;
  animation: rainbowShift 2s ease infinite;
  padding: 2px 8px 3px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 800; line-height: 20px; margin: 0 2px;
}

/* ================================================
   ⚠️ JS alert 대안
   ================================================ */
#validation_check { margin: 100px auto; width: 500px; }
#validation_check h1 {
  margin-bottom: 20px; font-size: 22px; font-weight: 900;
  color: var(--txt-dark); text-align: center;
}
#validation_check h1::before { content: '💌 '; }
#validation_check p {
  margin-bottom: 20px; padding: 32px 24px;
  border: 2px dashed var(--pink-soft); background: #fff;
  border-radius: var(--r-lg); color: var(--txt-mid); line-height: 1.8;
  box-shadow: var(--shadow-card);
}

/* ================================================
   사이드뷰
   ================================================ */
.sv_wrap { position: relative; font-weight: normal; }
.sv_wrap .sv {
  z-index: 1000; display: none; margin: 6px 0 0;
  font-size: 12px;
  background: rgba(75,20,80,.95);
  border: 2px solid var(--pink);
  border-radius: var(--r-md); box-shadow: var(--shadow-md); overflow: hidden;
  animation: popIn var(--dur-base) var(--ease-bounce);
}
.sv_wrap .sv::before {
  content: ""; position: absolute; top: -7px; left: 15px; width: 0; height: 0;
  border-style: solid; border-width: 0 6px 7px 6px;
  border-color: transparent transparent var(--pink) transparent;
}
.sv_wrap .sv a {
  display: block; padding: 0 14px; line-height: 40px; width: 120px;
  color: var(--pink-soft); font-weight: 700; transition: all var(--dur-fast);
}
.sv_wrap .sv a:hover { background: rgba(255,126,185,.2); color: #fff; padding-left: 18px; }
.sv_member { color: var(--txt-mid); }
.sv_on { display: block !important; position: absolute; top: 24px; left: 0; width: auto; height: auto; }
.sv_nojs .sv { display: block; }

/* ================================================
   📄 페이징
   ================================================ */
.pg_wrap { clear: both; float: left; display: inline-block; }
.pg_wrap::after { display: block; visibility: hidden; clear: both; content: ""; }
.pg { text-align: center; }
.pg_page, .pg_current { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.pg a:focus, .pg a:hover { text-decoration: none; }

.pg_page {
  height: 36px; min-width: 36px; padding: 0 10px;
  font-size: 12px; font-weight: 700; color: var(--txt-soft);
  border: 2px solid var(--pink-soft); border-radius: var(--r-full);
  background: rgba(255,255,255,.9); margin: 0 3px;
  transition: all var(--dur-fast) var(--ease-bounce);
}
.pg_page:hover {
  background: var(--pink-pale); border-color: var(--pink); color: var(--pink);
  transform: translateY(-3px) scale(1.08);
  box-shadow: var(--shadow-candy);
}

.pg_start { background: rgba(255,255,255,.9) url('../img/btn_first.gif') no-repeat 50% 50%; text-indent: -999px; overflow: hidden; padding: 0; border: 2px solid var(--pink-soft); }
.pg_prev  { background: rgba(255,255,255,.9) url('../img/btn_prev.gif')  no-repeat 50% 50%; text-indent: -999px; overflow: hidden; padding: 0; border: 2px solid var(--pink-soft); }
.pg_end   { background: rgba(255,255,255,.9) url('../img/btn_end.gif')   no-repeat 50% 50%; text-indent: -999px; overflow: hidden; padding: 0; border: 2px solid var(--pink-soft); }
.pg_next  { background: rgba(255,255,255,.9) url('../img/btn_next.gif')  no-repeat 50% 50%; text-indent: -999px; overflow: hidden; padding: 0; border: 2px solid var(--pink-soft); }
.pg_start:hover, .pg_prev:hover, .pg_end:hover, .pg_next:hover {
  background-color: var(--pink-pale); border-color: var(--pink);
  transform: translateY(-3px); box-shadow: var(--shadow-candy);
}

.pg_current {
  height: 36px; min-width: 36px; padding: 0 12px;
  background: var(--grad-btn);
  border: 0; color: #fff; font-weight: 900; font-size: 12px;
  border-radius: var(--r-full); margin: 0 3px;
  box-shadow: var(--shadow-candy);
  animation: heartbeat 1.5s ease-in-out infinite;
}

/* ================================================
   모바일 전환
   ================================================ */
#device_change {
  display: block; margin: .4em; padding: .6em 0;
  border: 2.5px dashed var(--pink-soft); border-radius: var(--r-full);
  background: rgba(255,255,255,.8); color: var(--txt-mid);
  font-size: 1.4em; font-weight: 700; text-align: center;
  transition: all var(--dur-base) var(--ease-bounce);
}
#device_change:hover {
  background: var(--grad-candy); border-color: transparent;
  color: #fff; box-shadow: var(--shadow-candy);
  transform: scale(1.03);
}