@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Serif+KR:wght@400;700&family=Noto+Sans+KR:wght@300;400;500;600;700&family=Gaegu:wght@700&family=Gowun+Batang:wght@700&display=swap');
:root{
--white:#fff;--cream:#faf8f5;--light:#f7f5f1;--body-bg:#f2f0ec;
--pink:#e85d8a;--pink-dk:#d14a78;--pink-lt:#f58dac;--pink-bg:#fff0f4;--pink-border:#ffd6e3;
--txt:#3a3042;--txt-dk:#2c2332;--txt-sub:#6b6075;--txt-muted:#9e95a8;--txt-lt:#b8b0c0;
--border:#ece8e3;--red:#ff4466;--kakao:#FEE500;
--sh-sm:0 2px 8px rgba(0,0,0,.06);--sh-md:0 4px 16px rgba(0,0,0,.08);--sh-pk:0 4px 16px rgba(232,93,138,.12);
--r-sm:12px;--r-md:16px;--r-lg:22px;--r-full:9999px;
--sans:'Noto Sans KR',-apple-system,sans-serif;--serif:'Nanum Myeongjo','Noto Serif KR',serif;
--max-w:480px;--max-w-pc:780px;

/* ¡Ú ¾î¸£½Å ¹è·Á: ±âº» ÆùÆ® Å©±â ¾÷ */
--fs-base: 17px;
--fs-sm: 14px;
--fs-xs: 13px;
--fs-xxs: 12px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:var(--fs-base);scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--body-bg);color:var(--txt);min-height:100vh;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}a{text-decoration:none;color:inherit}button{font-family:inherit;cursor:pointer;border:none;background:none}
ul,ol{list-style:none}

.wrap{width:100%;min-height:100vh;display:flex;justify-content:center}
.container{width:100%;max-width:var(--max-w);min-height:100vh;background:var(--white);position:relative;padding-bottom:72px;box-shadow:0 0 30px rgba(0,0,0,.05)}

/* ??????????????????????????????
   HEADER ? ·Î°í Å©°Ô, ¼±¸íÇÏ°Ô
?????????????????????????????? */
.hd{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:2px solid #f0dde2;
  /* ¡Ú ³ôÀÌ Áõ°¡: 56¡æ76px */
  height:76px;
  display:flex;align-items:center;justify-content:center;
  padding:0 16px;
  box-shadow:0 2px 0 #f0dde2,0 4px 20px rgba(0,0,0,.08)
}
.hd-logo{display:flex;flex-direction:row;align-items:center;gap:12px;text-decoration:none}

/* ¡Ú º¸°æ´ç ·Î°í: ´õ Å©°í ÁøÇÏ°Ô */
.hd-logo .t1{
  font-family:'Nanum Brush Script',cursive;
  font-size:3.4rem;          /* 2.6¡æ3.4rem */
  color:#8b0a2e;             /* ´õ ÁøÇÑ »¡°­ */
  letter-spacing:3px;
  line-height:1;
  display:block;
  -webkit-text-fill-color:#8b0a2e;
  background:none;
  text-shadow:0 1px 3px rgba(139,10,46,.15);
}
.hd-divider{width:2px;height:34px;background:linear-gradient(to bottom,transparent,#e8c0c8,transparent);flex-shrink:0}

/* ¡Ú ȲÇصµÀ̺Ϲ«´ç: ÁøÇÏ°Ô, Å©°Ô */
.hd-logo .t2{
  font-family:'Noto Sans KR',sans-serif;
  font-size:12.5px;          /* 9.5¡æ12.5px */
  font-weight:800;           /* bold¡æ800 */
  color:#9a4055;             /* ´õ ÁøÇÑ »ö */
  letter-spacing:.5px;
  line-height:1.8;
  display:block;
  white-space:nowrap;
  -webkit-text-fill-color:#9a4055;
  background:none
}
.hd-right{position:absolute;right:16px;display:flex;gap:6px}
.hd-btn{
  width:36px;height:36px;   /* 30¡æ36px */
  border-radius:50%;
  background:var(--light);
  border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--txt-sub);transition:.2s
}
.hd-btn:hover{background:var(--pink-bg);border-color:var(--pink-border);color:var(--pink)}
.hd-btn svg{width:20px;height:20px}  /* 16¡æ20px */

/* ??????????????????????????????
   BANNER
?????????????????????????????? */
.banner{position:relative;width:100%;overflow:hidden;background:var(--light)}
.banner-track{display:flex;transition:transform .4s ease}
.banner-slide{min-width:100%}
.banner-slide img{width:100%;display:block}
.banner-slide .placeholder{aspect-ratio:16/8;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fce4ec,#fff5f7);color:var(--txt-muted);font-size:1rem;flex-direction:column;gap:8px}
.banner-slide .placeholder .ph-i{font-size:2.4rem;opacity:.3}
.banner-idx{position:absolute;bottom:10px;right:12px;background:rgba(0,0,0,.5);color:#fff;font-size:.78rem;font-weight:700;padding:3px 12px;border-radius:var(--r-full);z-index:2}
.banner-dots{display:flex;justify-content:center;gap:6px;padding:10px 0}
.banner-dots span{width:8px;height:8px;border-radius:50%;background:var(--txt-lt);cursor:pointer;transition:.3s}
.banner-dots span.on{background:var(--pink);width:22px;border-radius:4px}

/* ??????????????????????????????
   YT QUICK ? ±Û¾¾ Å©°Ô
?????????????????????????????? */
.yt-quick{display:flex;gap:10px;padding:14px 16px}
.yt-q{
  flex:1;display:flex;align-items:center;gap:10px;
  padding:14px 12px;
  background:var(--white);
  border:2.5px solid #ffb3c6;
  border-radius:14px;
  font-size:.92rem;           /* .74¡æ.92rem */
  font-weight:800;
  color:var(--txt);
  transition:.25s;
  box-shadow:0 2px 10px rgba(232,93,138,.12),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:hidden;
}
.yt-q::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,240,244,.6) 0%,transparent 60%);pointer-events:none}
.yt-q:hover{border-color:var(--pink);background:var(--pink-bg);box-shadow:0 4px 18px rgba(232,93,138,.22),inset 0 1px 0 rgba(255,255,255,1);transform:translateY(-1px)}
.yt-q .yti{width:30px;height:21px;background:#ff0000;border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 6px rgba(255,0,0,.35)}
.yt-q .yti svg{width:13px;height:13px;fill:#fff}
.yt-q .arr{margin-left:auto;color:var(--pink);font-size:1rem;font-weight:900}

/* ??????????????????????????????
   SERVICE MENU ? ¾ÆÀÌÄÜ+ÅؽºÆ® ´ëÆø Áõ°¡
?????????????????????????????? */
.svc-menu{padding:12px 16px 16px}
.svc-menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.svc-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 4px;cursor:pointer;position:relative;transition:.15s}
.svc-item:active{transform:scale(.96)}

/* ¡Ú ¾ÆÀÌÄÜ Å©±â 52¡æ64px */
.svc-icon{
  width:64px;height:64px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s,box-shadow .2s;
  box-shadow:0 3px 12px rgba(0,0,0,.14),0 1px 4px rgba(0,0,0,.09),inset 0 1px 2px rgba(255,255,255,.85);
}
.svc-item:hover .svc-icon{transform:scale(1.10) translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.10),inset 0 1px 2px rgba(255,255,255,.9)}

.svc-icon.c1{background:radial-gradient(circle at 35% 35%,#fff9f0,#ffd18a);border:2.5px solid #ffcc80;box-shadow:0 4px 14px rgba(255,152,0,.28),0 1px 3px rgba(0,0,0,.08),inset 0 1px 2px rgba(255,255,255,.9)}
.svc-icon.c2{background:radial-gradient(circle at 35% 35%,#f0fff2,#7dce85);border:2.5px solid #a5d6a7;box-shadow:0 4px 14px rgba(56,142,60,.25),0 1px 3px rgba(0,0,0,.08),inset 0 1px 2px rgba(255,255,255,.9)}
.svc-icon.c3{background:radial-gradient(circle at 35% 35%,#f0f8ff,#7ab8f0);border:2.5px solid #90caf9;box-shadow:0 4px 14px rgba(21,101,192,.25),0 1px 3px rgba(0,0,0,.08),inset 0 1px 2px rgba(255,255,255,.9)}
.svc-icon.c4{background:radial-gradient(circle at 35% 35%,#fff0f5,#f081a5);border:2.5px solid #f48fb1;box-shadow:0 4px 14px rgba(194,24,91,.25),0 1px 3px rgba(0,0,0,.08),inset 0 1px 2px rgba(255,255,255,.9)}
.svc-icon.c5{background:radial-gradient(circle at 35% 35%,#fffdf0,#ffd54f);border:2.5px solid #ffd54f;box-shadow:0 4px 14px rgba(245,127,23,.28),0 1px 3px rgba(0,0,0,.08),inset 0 1px 2px rgba(255,255,255,.9)}
.svc-icon.c6{background:radial-gradient(circle at 35% 35%,#fdf0ff,#c97dd8);border:2.5px solid #ce93d8;box-shadow:0 4px 14px rgba(123,31,162,.25),0 1px 3px rgba(0,0,0,.08),inset 0 1px 2px rgba(255,255,255,.9)}
.svc-icon.c7{background:radial-gradient(circle at 35% 35%,#f0fffc,#60c2b8);border:2.5px solid #80cbc4;box-shadow:0 4px 14px rgba(0,105,92,.25),0 1px 3px rgba(0,0,0,.08),inset 0 1px 2px rgba(255,255,255,.9)}
.svc-icon.c8{background:radial-gradient(circle at 35% 35%,#f0f2ff,#8b97d6);border:2.5px solid #9fa8da;box-shadow:0 4px 14px rgba(40,53,147,.25),0 1px 3px rgba(0,0,0,.08),inset 0 1px 2px rgba(255,255,255,.9)}
.svc-icon.c9{background:radial-gradient(circle at 35% 35%,#fff5f2,#ff8a65);border:2.5px solid #ffab91;box-shadow:0 4px 14px rgba(191,54,12,.25),0 1px 3px rgba(0,0,0,.08),inset 0 1px 2px rgba(255,255,255,.9)}

/* ¡Ú ¾ÆÀÌÄÜ SVG Å©±â 24¡æ30px */
.svc-icon svg{width:30px;height:30px}
.svc-icon img{width:34px;height:34px;object-fit:contain}

/* ¡Ú ¸Þ´º ÅؽºÆ® .65¡æ.82rem, ±½±â °­È­ */
.svc-txt{
  font-size:.82rem;
  font-weight:700;
  text-align:center;
  line-height:1.35;
  color:var(--txt-dk);
  white-space:pre-line;
  letter-spacing:-.01em;
}

/* ??????????????????????????????
   NOTICE BAR ? Å©°Ô, ¶Ñ·ÇÇÏ°Ô
?????????????????????????????? */
.noti{
  display:flex;margin:2px 16px 12px;
  align-items:center;gap:10px;
  padding:13px 14px;
  background:var(--cream);
  border:1.5px solid var(--border);
  border-radius:var(--r-sm);
  cursor:pointer;transition:.2s
}
.noti:hover{background:var(--pink-bg);border-color:var(--pink-border)}
.noti-icon{font-size:1.15rem;flex-shrink:0}
.noti-body{flex:1;min-width:0}
.noti-body .lb{font-size:.7rem;color:var(--pink);font-weight:800;letter-spacing:.06em}
/* ¡Ú °øÁö ÅؽºÆ® Å©°Ô */
.noti-body .tx{font-size:.88rem;font-weight:500;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.noti-arr{color:var(--txt-lt);font-size:1.2rem;font-weight:700}

/* ??????????????????????????????
   FOOTER
?????????????????????????????? */
.ft{padding:18px 16px;text-align:center;border-top:1px solid var(--border)}
.ft p{font-size:.75rem;color:var(--txt-muted);line-height:1.6}

/* ??????????????????????????????
   BOTTOM NAV ? ¾ÆÀÌÄÜ+ÅؽºÆ® Å©°Ô
?????????????????????????????? */
.bnav-wrap{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--max-w);
  height:62px;              /* 54¡æ62px */
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);
  border-top:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:space-around;
  z-index:100;
  box-shadow:0 -2px 10px rgba(0,0,0,.05)
}
.bn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 10px;color:var(--txt-muted);font-size:.68rem;font-weight:600;transition:.2s}  /* .55¡æ.68rem */
.bn svg{width:24px;height:24px;stroke-width:1.8}  /* 20¡æ24px */
.bn.on{color:var(--pink)}
.bn:hover{color:var(--pink-dk)}

/* ??????????????????????????????
   MODAL
?????????????????????????????? */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;align-items:flex-end;justify-content:center}
.modal-overlay.show{display:flex}
.modal-box{width:100%;max-width:var(--max-w);background:var(--white);border-radius:22px 22px 0 0;padding:28px 22px calc(env(safe-area-inset-bottom,0px) + 24px);animation:slideUp .3s ease}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* ¡Ú ¸ð´Þ Á¦¸ñ Å©°Ô */
.modal-box h3{font-family:var(--serif);font-size:1.25rem;text-align:center;margin-bottom:6px;color:var(--txt-dk)}
.modal-box .desc{font-size:.92rem;color:var(--txt-sub);text-align:center;margin-bottom:22px;line-height:1.8}
.modal-btns{display:flex;gap:10px}
.m-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 10px;        /* 13¡æ16px */
  border-radius:var(--r-sm);
  font-size:1rem;           /* .85¡æ1rem */
  font-weight:700;transition:.2s
}
.m-btn svg{width:18px;height:18px;flex-shrink:0}
.m-btn.ph{background:var(--pink);color:#fff}
.m-btn.ph:hover{background:var(--pink-dk)}
.m-btn.kk{background:var(--kakao);color:#3C1E1E}
.modal-close{display:block;width:100%;margin-top:16px;padding:13px;text-align:center;font-size:.9rem;font-weight:600;color:var(--txt-muted);border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--white);transition:.2s}
.modal-close:hover{background:var(--light)}

/* ??????????????????????????????
   NOTICE PAGE
?????????????????????????????? */
.page-header{display:flex;align-items:center;padding:16px;gap:12px;border-bottom:1.5px solid var(--border)}
.page-header .back{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--light);border:1.5px solid var(--border);color:var(--txt-sub)}
.page-header .back svg{width:18px;height:18px}
.page-header h1{font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--txt-dk)}

.notice-list{padding:0 16px}
.notice-item{padding:16px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:.15s}
.notice-item:hover{background:var(--pink-bg);margin:0 -16px;padding:16px}
.notice-item .n-pin{display:inline-block;font-size:.68rem;color:var(--pink);font-weight:700;border:1.5px solid var(--pink-border);border-radius:4px;padding:2px 6px;margin-right:6px}
.notice-item .n-title{font-size:.95rem;font-weight:700;color:var(--txt-dk)}
.notice-item .n-date{font-size:.75rem;color:var(--txt-muted);margin-top:4px}
.notice-item .n-body{font-size:.88rem;color:var(--txt-sub);line-height:1.8;margin-top:12px;white-space:pre-wrap;display:none}
.notice-item.open .n-body{display:block}
.notice-empty{padding:48px 0;text-align:center;color:var(--txt-muted);font-size:.92rem}

.notice-card-list{padding:12px 16px}
.notice-card{display:flex;align-items:center;gap:14px;padding:16px;margin-bottom:12px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-sm);cursor:pointer;transition:.2s}
.notice-card:hover{border-color:var(--pink-border);background:var(--pink-bg)}
.notice-card:active{transform:scale(.98)}
.nc-thumb{width:100px;height:100px;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--light)}
.nc-thumb img{width:100%;height:100%;object-fit:cover}
.nc-thumb-default{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#fff3e0,#ffe0b2);gap:4px}
.nc-thumb-default svg{width:28px;height:28px;stroke:var(--pink)}
.nc-thumb-default span{font-size:.72rem;color:var(--pink);font-weight:700;letter-spacing:.03em}
.nc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.nc-title{font-size:1.1rem;font-weight:700;color:var(--txt-dk);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.nc-date{font-size:.78rem;color:var(--txt-muted);margin-top:2px}
.nc-arr{color:var(--txt-lt);font-size:1.3rem;flex-shrink:0}

.notice-detail{padding:0 16px 20px}
.nd-img{margin:0 -16px;overflow:hidden}
.nd-img img{width:100%;display:block}
.nd-header{padding:18px 0 14px;border-bottom:1.5px solid var(--border)}
.nd-title{font-family:var(--serif);font-size:1.2rem;font-weight:700;color:var(--txt-dk);line-height:1.5;margin-top:6px}
.nd-meta{display:flex;gap:12px;margin-top:8px;font-size:.78rem;color:var(--txt-muted)}
.nd-content{padding:18px 0;font-size:.95rem;color:var(--txt);line-height:2}
.nd-content img{max-width:100%;height:auto;border-radius:10px;margin:10px 0;display:block}
.nd-content p{margin-bottom:10px}
.nd-content ul,.nd-content ol{padding-left:22px;margin-bottom:10px}
.nd-content a{color:var(--pink);text-decoration:underline}

/* ??????????????????????????????
   ANIMATIONS
?????????????????????????????? */
.fi{opacity:0;transform:translateY(10px);animation:fi .35s ease-out forwards}
@keyframes fi{to{opacity:1;transform:translateY(0)}}
.fi:nth-child(1){animation-delay:.02s}.fi:nth-child(2){animation-delay:.04s}.fi:nth-child(3){animation-delay:.06s}.fi:nth-child(4){animation-delay:.08s}.fi:nth-child(5){animation-delay:.1s}.fi:nth-child(6){animation-delay:.12s}.fi:nth-child(7){animation-delay:.14s}.fi:nth-child(8){animation-delay:.16s}.fi:nth-child(9){animation-delay:.18s}
.ripple{position:relative;overflow:hidden}
.rw{position:absolute;border-radius:50%;background:rgba(232,93,138,.1);transform:scale(0);animation:rw .45s ease-out;pointer-events:none}
@keyframes rw{to{transform:scale(4);opacity:0}}

/* ??????????????????????????????
   PC ? Ãß°¡ È®´ë
?????????????????????????????? */
@media(min-width:769px){
  .container{max-width:var(--max-w-pc);padding-bottom:20px}.bnav-wrap{display:none}
  .hd{padding:0 28px;height:80px}.hd-right{right:28px}
  .hd-logo .t1{font-size:3.8rem}
  .hd-logo .t2{font-size:14px}
  .svc-menu{padding:12px 28px 16px}.svc-icon{width:70px;height:70px}.svc-icon svg{width:34px;height:34px}.svc-txt{font-size:.88rem}
  .noti{margin:2px 28px 14px}.yt-quick{padding:12px 28px}.ft{padding:22px 28px}
  .notice-list{padding:0 28px}.notice-card-list{padding:12px 28px}.notice-detail{padding:0 28px 24px}.nd-img{margin:0 -28px}.page-header{padding:16px 28px}
}

/* ??????????????????????????????
   ¼ÒÇü ±â±â ? ³Ê¹« ÀÛ¾ÆÁöÁö ¾Ê°Ô
?????????????????????????????? */
@media(max-width:360px){
  .svc-icon{width:54px;height:54px}.svc-icon svg{width:24px;height:24px}.svc-txt{font-size:.72rem}
  .hd-logo .t1{font-size:2.9rem}
}