:root{
  --brand:#C0DFF8;
  --ink:#333;
  --sub:#5B6477;
  --line:#E8ECF2;
  --bg:#F7F8FB;
  --white:#fff;
  --primary: #C0DFF8;
  --blue: #368DFF;
  --radius:14px;
  --safe-t: env(safe-area-inset-top);
  --safe-b: env(safe-area-inset-bottom);
  --hdr-bar:    56px;  /* 상단 바 높이 */
  --hdr-search: 62px;  /* 검색 영역 높이 */
}
*{box-sizing:border-box}
html,body{height:100%}
/* 공통 바디: 오프셋은 항상 body에서만 처리 */
body{
  --header-offset: 0px; /* 기본: 고정 헤더 아님 */
  padding-top: calc(var(--header-offset) + env(safe-area-inset-top));
  margin:0;
  font-family:'Pretendard', sans-serif;
  color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}

/* 헤더가 fixed일 때만 오프셋 활성화 */
body.has-fixed-header{
  --header-offset: calc(var(--hdr-bar));
}

/* 이 페이지가 검색창 없는 헤더일 경우(상시 검색 미노출 페이지 등) */
body.has-fixed-header.no-search{
  --hdr-search: 0px;
}

/* 헤더 자체 고정 스타일 */
.m-header.is-fixed{
  position:fixed; top:0; left:0; right:0; z-index:998; background:#fff;
}

/* ✅ 기존의 `.m-header.is-fixed + main { padding-top: ... }` 는 삭제하세요 */

/* (선택) 모바일에서 치수 미세 조정 */
@media (max-width:480px){
  :root{
    --hdr-bar:52px;
    --hdr-search:58px;
  }
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
ul{list-style:none; margin:0; padding:0}
.section{padding:8px 16px}

/* Buttons */
.icon-btn{
  width:40px;height:40px;border:none;background:transparent;
  display:grid;place-items:center;border-radius:10px;color:#4b5563;
}
.icon-btn:active{background:#eef2ff}
.m-btn{padding:10px 14px;border:none;border-radius:12px;font-weight:600}
.m-btn--primary{background:var(--primary);color:#333;}

/* ============ Header ============ */
.m-header{position:fixed;top:0;z-index:50;background:var(--white);box-shadow:0 2px 0 rgba(0,0,0,.03);padding-top:var(--safe-t); width: 100%;}
/* 헤더 바 기본 */
.m-header__bar{
  position: relative;                /* ★ 로고 absolute 기준 */
  display: flex;
  align-items: center;
  justify-content: space-between;    /* 좌측 햄버거 ↔ 우측 액션 */
  height: 56px;
  padding: 0 12px;
}

/* 아이콘 버튼 공통(있다면 유지) */
.icon-btn{
  width: 40px; height: 40px;
  display: grid; place-items: center;
}

/* ★ 로고를 문서 중앙에 고정 */
.m-header__logo{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);  /* 수평/수직 정확히 중앙 */
  margin: 0; line-height: 0;
  pointer-events: none;              /* 로고가 버튼 위를 덮어도 클릭 방해 X */
}
.m-header__logo a{ pointer-events: auto; display: inline-block; }
.m-header__logo img{ height:40px; display: block; }  /* 필요 시 크기 조절 */

/* 우측 액션 간격 */
.m-header__actions{ display: flex; gap: 4px; }

/* search slide-down */
.m-search{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 12px}
.m-search[hidden]{display:none}
.m-search__form{display:flex;gap:8px}
.m-search__form input{
  flex:1; height:42px; padding:0 12px; border-radius:12px; border:1px solid var(--line); background:#fff;
  min-width:0;
  font-size:14px;
}
/* 검색 인풋 기본 */
.m-search__form input[type="search"]{
  flex:1;
  height:40px;
  min-width:0;
  padding:0 12px;
  border-radius:8px;
  border:1px solid var(--line);
  background:#fff;
  font-size:16px;

  transition: border-color .2s, box-shadow .2s;
}

/* 포커스 시 파란색 테두리 + 링 */
.m-search__form input[type="search"]:focus,
.m-search__form input[type="search"]:focus-visible{
  border-color:#C0DFF8;                     /* 파란 테두리 */
  box-shadow:0 0 0 3px rgba(62,95,172,.18); /* 파란 포커스 링 */
  outline:none;                              /* 기본 오렌지 링 제거 */
}

/* ============ Drawer ============ */
/* 드로어 헤더: 로고 더 작게 */
.m-drawer__head{display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;border-bottom:1px solid var(--line)}
.m-drawer__brand img{height:40px} /* 기존 22px → 18px */

/* 인사/버튼 바 */
.m-drawer__user{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-bottom:1px solid var(--line); background:#F9FAFB;
}
.m-drawer__user .hello{font-size:14px; color:#374151}
.m-drawer__user .hello strong{font-weight:800}

/* 버튼 사이즈/변형 */
.m-btn--sm{padding:8px 12px; border-radius:10px; font-weight:700; font-size:13px}
.m-btn--ghost{background:#fff; border:1px solid var(--line); color:#374151}
.m-drawer{
  position:fixed; inset:0;
  pointer-events:none;
  z-index: 2000;                 /* 배너/헤더 위에 강제 */
}
.m-drawer__scrim{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  opacity:0; transition:.25s;
  border: 0;
}
.m-drawer__panel{
  position:absolute; inset:0 auto 0 0;
  width:min(85%, 320px);
  height:100%;                    /* 전체 높이 확보 */
  background:#fff;
  transform:translateX(-100%);
  transition:transform .3s;
  display:flex; flex-direction:column;
  overflow-y:auto;                 /* 패널 자체 스크롤 */
  -webkit-overflow-scrolling:touch;
  /* box-shadow: 2px 0 18px rgba(0,0,0,.18); */
}
.m-drawer.active{ pointer-events:auto; }
.m-drawer.active .m-drawer__scrim{ opacity:1; }
.m-drawer.active .m-drawer__panel{ transform:none; }

/* Drawer user row: 기존 배경 유지, 텍스트만 정리 */
/* ========== Drawer Userbar (Sky, no dots) ========== */
.m-userbar{
  background: #D5EAFA;
  color:#0b3a6b;
  padding:16px;
  border-bottom:1px solid #e6eef8;
  border-radius: 0;                 /* 필요시 8px 등으로 */
}

/* 본문: 인사(중앙) – 액션(우) */
/* 1) 바디를 2행 그리드로 */
.m-userbar__body{
  display:grid;
  grid-template-columns: 1fr auto;   /* 좌 내용, 우 버튼 */
  grid-template-rows: auto auto;     /* 1행: 제목/버튼, 2행: 칩들 */
  column-gap:12px;
  row-gap:6px;
  align-items:start;                  /* 위로 붙이기 */
  width:100%;
}

/* 2) 인사/칩: 왼쪽에서 1~2행 차지  */
.m-userbar__hello{
  grid-column: 1 / 2;                 /* ← 기존에 2로 되어 있던 것 제거/교체 */
  grid-row: 1 / 3;                    /* 2행까지 span */
  display:flex; flex-direction:column; gap:6px;
}
.m-userbar__hello .name{
  margin:0;
  font-weight:800; font-size:15px; letter-spacing:-.02em;
}
.m-userbar__hello .meta{
  margin:0; display:flex; flex-wrap:wrap; gap:6px;
}

/* 배지/칩(회원유형/만료/포인트) */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  height:24px; padding:4px 8px; border-radius:999px;
  font-size:12px; line-height:1; white-space:nowrap;
  border:1px solid #e1eaf6; background:#fff; color:#2b4f8f;
}
.chip--type{ background:#fdf9ef; color:#f59c30; border-color:#F2A647; font-weight:700; }
.chip--exp{ background:#fff; }
.chip--point{ background:#fff7d8; color:#7a5600; border-color:#ffeaa6; font-weight:700; }
.chip--point i{ font-size:13px; }



/* 3) 로그인/로그아웃: 1행 우측 상단 */
.m-userbar__actions{
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  justify-self: end;                  /* 오른쪽 끝 */
  align-self: start;                  /* 상단 정렬 */
}

/* 버튼 크기(원래 값 유지 가능) */
.m-userbar .m-btn{ border-radius:10px; padding:8px 12px; font-size:12px; }
.m-userbar .m-btn--primary{ background:var(--blue); color:#fff; }
.m-userbar .m-btn--ghost  { background:#ffffffbf; color:#2b5fae; border:1px solid #d8e6ff; }

/* 더 좁은 화면 압축 */
@media (max-width:360px){
  .m-userbar{ padding:12px; }
  .m-userbar__body{ grid-template-columns:52px 1fr auto; column-gap:10px; }
  .m-userbar .m-btn{ padding:6px 10px; }
}

/* accordion */
.m-accordion{ padding:6px 6px 18px; }
.m-acc{ border-bottom:1px solid var(--line); }

/* 아코디언 버튼 기본 */
/* 드로어 아코디언 버튼: 텍스트 ↔ 아이콘 */
.m-drawer .m-acc__btn{
  display: flex;
  justify-content: space-between;   /* 텍스트는 좌, 아이콘은 우 */
  align-items: center;              /* 세로 정확히 중앙 */
  gap: 10px;
  padding: 10px 14px;               /* 컴팩트 여백 */
  min-height: 44px;                 /* 터치 영역 보장 */
  text-align: left;
  font-weight: 700;
  background: #fff;
  border: 0;
  box-sizing: border-box;
}

/* 아이콘(FA) 스타일 */
.m-drawer .m-acc__btn .acc-icon{
  font-size: 16px;                  /* 필요 시 14~18px로 조절 */
  line-height: 1;
  color: var(--ink);
  transition: transform .2s ease, color .2s ease;
}

/* 펼침 상태: 아이콘 위로 180° 회전 + 색 강조 */
.m-drawer .m-acc__btn[aria-expanded="true"] .acc-icon{
  transform: rotate(180deg);
}

/* 구분선(줄 사이) */
.m-drawer .m-acc + .m-acc .m-acc__btn{ border-top:1px solid #EEF1F5; }

/* 패널 내부 여백 */
.m-drawer .m-acc__panel{ padding:6px 14px 10px; }

.m-acc__panel{ padding:0 10px 12px 14px; }
.m-acc__panel a{ display:block; padding:10px 0; color:#4b5563; }
.m-acc__link{ display:block; padding:14px 10px; font-weight:700; }

/* ============ Blocks ============ */
.block-head{display:flex;align-items:center;
  flex-direction: column; justify-content:center;gap:8px;margin-bottom:15px;}
.block-head h2{font-size:18px;font-weight:700;position:relative;width:100%;text-align:center;}
.block-head h3{font-size:16px;margin:0 }
.block-head p{font-size:13px; margin-bottom: 10px; }
.sub{color:var(--sub);margin:0}
.btn-morev2 { font-size:12px; color:#2563eb; padding:6px 10px;
  border:1px solid #dbeafe; border-radius:10px; text-decoration:none;position:absolute;right:0px;}

/* hero */
.m-hero{ overflow:hidden}
.m-hero .swiper-pagination-bullets{bottom:6px}

/* age grid chips */
/* .m-agegrid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.m-chip{
  display:inline-grid; place-items:center; height:44px; border-radius:12px;
  background:#fff; border:1px solid var(--line); font-weight:600;
}
.m-chip:active{background:#f2f4ff; border-color:#d8dcff} */
/* 캘린더 래퍼 */
/* ===== 캘린더(배경 없이 CSS만) ===== */
/* ===== CSS-only 캘린더 (라벨↔그리드 사이에 링 노출) ===== */
/* ===== CSS-only 캘린더 (링을 header에 부착) ===== */
.calendar-box{
  --bd:#BFDFFB;      /* 본문 외곽선 */
  --dash:#D4E7FA;    /* 점선 */
  --head:#CFE7FF;    /* 라벨 배경 */
  --clip:#98CCF7;    /* 링 색상 */
  --r:14px;          /* 모서리 반경 */

  /* 간격/링 치수 */
  --ring-gap:8px;   /* 라벨과 표 사이 간격(링이 보이는 높이) */
  --ring-w:8px;     /* 링 너비 */
  --ring-h:32px;     /* 링 높이 */
  --ring-x:26px;     /* 좌/우 기준 위치 */
  --ring-offset:14px;/* 좌우 두 번째 링 간격 */
  --ring-drop: -12px;   /* 링 수직 드롭 보정(+ 내려감, - 올라감) */

  width:min(100%, 360px);
  margin:0 auto;
  position:relative;
  font-family:sans-serif;
}

/* 제목 라벨 */
.calendar-header{
  position:relative;
  width: 100%;
  margin:0 auto;
  padding:15px 16px;
  background:var(--head);
  border-radius:12px;
  font-weight:800;
  font-size:clamp(16px,4.4vw,18px);
  line-height:1.2;
  z-index:3; /* 링/본문보다 위 */
  text-align: center;
}

/* ✔ 링을 header의 가상요소에서 그림 (header에 붙어 보이게) */
.calendar-header::before,
.calendar-header::after{
  content:"";
  position:absolute;
  bottom: calc(-1 * var(--ring-gap) + var(--ring-drop));
  width:var(--ring-w);
  height:var(--ring-h);
  border-radius:6px;
  background:var(--clip);
  z-index:3;
}
.calendar-header::before{
  left:var(--ring-x);
  /* 왼쪽 2개 링 */
  box-shadow: var(--ring-offset) 0 0 0 var(--clip);
}
.calendar-header::after{
  right:var(--ring-x);
  /* 오른쪽 2개 링 (음수로 반대 방향 복제) */
  box-shadow: calc(-1 * var(--ring-offset)) 0 0 0 var(--clip);
}

/* 본문 박스 */
.calendar-body{
  position:relative;
  margin-top:var(--ring-gap);    /* 라벨과 띄워 링이 보이게 */
  border:2px solid var(--bd);
  border-radius:var(--r);
  background:#fff;
  padding:12px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,minmax(56px,1fr));
  z-index:1;
}

/* 점선(세로2 + 가로1) - padding 안쪽에 딱 맞춤 */
.calendar-body{
  background:
    /* 세로 1/3 */
          repeating-linear-gradient(to bottom, var(--dash) 0 4px, transparent 4px 10px)
          calc(33.333%) 12px/1px calc(100% - 24px) no-repeat,
            /* 세로 2/3 */
          repeating-linear-gradient(to bottom, var(--dash) 0 4px, transparent 4px 10px)
          calc(66.666%) 12px/1px calc(100% - 24px) no-repeat,
            /* 가로 중앙 */
          repeating-linear-gradient(to right,  var(--dash) 0 4px, transparent 4px 10px)
          12px calc(50%)/calc(100% - 24px) 1px no-repeat;
}

/* 래퍼 병합 */
.calendar-row{ display:contents; }

/* 셀 & 링크 */
.calendar-cell{ display:flex; align-items:center; justify-content:center; padding:6px; }
.calendar-cell a{
  display:flex; width:100%; height:100%;
  align-items:center; justify-content:center;
  border-radius:10px; box-sizing:border-box;
  color:#111; text-decoration:none;
  font-size:clamp(14px,3.7vw,16px);
  -webkit-tap-highlight-color:transparent;
}
.calendar-cell a:hover,
.calendar-cell a:focus-visible{
  background:rgba(240,240,240,.85);
  font-weight:700; outline:none;
}

/* quick icons */
.m-quick{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.m-quick__item{
  background:#fff;
  border:1px solid var(--line);border-radius:16px;
  padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px
}
.m-quick__item img{width:50px;height:50px;object-fit:contain}
.m-quick__item span{font-size:13px; letter-spacing: -0.1rem;}

/* tabs */
.m-tabs{display:flex; gap:6px}
.m-tabs-shop {margin-top:10px;}
.m-tab{
  flex:0 0 auto; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:#fff; font-weight:700; margin-bottom: 10px;
  color:#333;font-size:14px;
}
.m-tab.is-active{background:var(--brand); color:#333; border-color:var(--brand)}
.m-tabpanel.is-hidden{display:none}

/* cards slider */

.m-cards{--size:180px}
.m-card{width:var(--size); overflow:hidden;}
.m-cards .swiper-wrapper{padding:2px}

/* 배경색 */
.section.data-package{
  background-color: #fff4f5; padding: 24px 16px;
}
.section.popular{
  background-color: #FFF9F0;
}
.section.recommend{
  background-color: #f5f7fb; padding: 24px 16px 0 16px;
}
/* 2 grid cards */
.m-grid2{display:grid;grid-template-columns:1fr 1fr; gap:10px;}
.m-card--wide{ overflow:hidden;}
.m-card__title{display:block;padding:10px 6px;font-weight:600; text-align: center;}

/* thumbs */
.m-thumbs .swiper-slide{width:130px; border-radius:12px; overflow:hidden}

/* shop */
/* 제목 줄 오른쪽 pill 버튼 */
.block-head.mall{ display:flex; align-items:center; flex-direction: row; justify-content: space-between; gap:8px; flex-wrap:wrap; }

.m-more{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px;
  font-size:13px;
  color:var(--ink); text-decoration:none;
  border: 1px solid #bbb;
  border-radius:999px;
  white-space:nowrap;
}
.m-more::after{ content:"›"; font-weight:900; line-height:1; }

/* 조금 넓은 화면에서 살짝 키움 */
@media (min-width:480px){
  .m-more{ font-size:14px; padding:9px 14px; }
}
.m-shop-banner{display:block;border-radius:8px;overflow:hidden; margin-bottom: 10px;}
.m-shop-banner img{
  width: 100%;
  object-fit: cover;
}
/* 상품 카드 */
.m-products .swiper-slide{ width:160px; }

.m-product{
  display:block;
  border-radius:12px;         /* 카드 자체 반경 */
  padding:0 0 10px;           /* 텍스트 영역 여백 */
  overflow:visible;           /* 부모 클리핑 제거(선택) */
}

/* 이미지에도 동일 반경 적용 → 하단 모서리까지 둥글게 */
.m-product img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;         /* ← 핵심 */
  object-fit:cover;
}

/* (iOS에서 드물게 생기는 모서리 1px 거슬림 방지용, 선택) */
.m-product img{
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.m-product .name{display:block;padding:8px 10px 0;font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.m-product .price{display:block;padding:4px 10px 10px;font-weight:700}
.m-product .sale{font-style:normal;color:#f25c5c;margin-right:4px}

/* board */
/* 공지사항 & 가정통신문 카드 컨테이너 */
.mb-card{
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:16px;
  padding:12px;
  margin:12px 0;
  box-shadow:0 2px 10px rgba(0,0,0,.03);
}

/* 헤더 */
.mb-card__head{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:4px 4px 8px;
}
.mb-card__title h2{ font-size:16px; margin:0; color:#111827; }
.mb-card__title p{ font-size:12px; color:#6b7280; margin:2px 0 0; }
.mb-more{
  font-size:12px; color:#2563eb; padding:6px 10px;
  border:1px solid #dbeafe; border-radius:10px; text-decoration:none;
}

/* 리스트: 버튼형 항목 */
.mb-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.mb-item{
  display:flex; align-items:center; gap:8px;
  background:#f8fafc; border:1px solid #eef2f7;
  border-radius:12px; padding:12px; text-decoration:none;
}
.mb-item:active{ transform:translateY(1px); }
.mb-text{ flex:1; color:#0f172a; font-size:14px; line-height:1.4; }
.mb-time{ color:#94a3b8; font-size:12px; }

/* 배지 */
.mb-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:22px; padding:0 8px; border-radius:999px;
  background:#D7E3FF; color:#7e8edf; font-size:12px; font-weight:600;
}
.mb-badge--alert{ background:#FFD2CB; color:#FF565D; }

/* 간격 옵션 */
.mt16{ margin-top:16px; }

/* 태블릿 이상에서만 2열로 (선택) */
@media (min-width: 640px){
  .section--roomy .mb-card{ margin:16px 0; }
  .mb-item{ padding:14px 16px; }
}

/* banner2 */
.m-banner2{display:grid;gap:10px}
.m-banner2 img{overflow:hidden}

/* ============ Footer (mobile clean) ============ */
.m-footer {
  padding: 20px 16px;
  text-align: center;
  background: #f9fafb;
  color: #6b7280;
  font-size: 13px;
}

/* 상단 액션 버튼 */
.m-footer__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.m-chip {
  padding: 6px 12px;
  font-size: 13px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  text-decoration: none;
  color: #374151;
  background: #fff;
}

/* 연락처 */
.m-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.contact .label {
  font-size: 12px;
  color: #94a3b8;
  margin-right: 6px;
}
.contact .value {
  font-weight: 600;
  color: #111827;
  text-decoration: none;
}

/* SNS 아이콘 */
.m-footer__sns {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}
.m-footer__sns img {
  width: 28px;
  height: 28px;
  display: block;
}

/* 카피라이트 */
.m-footer__copy {
  font-size: 11px;
  color: #9ca3af;
  line-height: 1.4;
}

/* desktop up (단순 확대) */
@media (min-width:768px){
  .section{padding:20px}
  .m-grid2{grid-template-columns:repeat(4,1fr)}
  .m-grid2--fixed2 {grid-template-columns: repeat(2, 1fr);}
  .m-products .swiper-slide{width:180px}
}

/* ── Mobile spacing tune ─────────────────────────────────── */
/* ── Mobile spacing (≤480px): 통합본 ───────────────────── */
/* ── Mobile spacing (≤480px): 상단 compact 유지, 하단 roomy 통일 ── */
/* ── Mobile section spacing: one-direction (≤480px) ───────── */
/* ── Mobile spacing (≤480px) ───────────────────────────── */
@media (max-width: 480px){

  /* 내부 패딩은 최소값으로 통일 (겹침 방지) */
  .section{ padding: 10px 16px; }

  /* 섹션 간 간격은 오직 다음 섹션의 margin-top 으로만 제어 */
  .section + .section{ margin-top:10px; }

  /* 배너 → 8월 놀이계획안만 더 촘촘 */
  .section--hero{ padding:0px;}
  .section--hero + .section{ margin-top:6px; }

  /* 상단 3개(컴팩트) */
  .section + .section--compact{ margin-top:6px; }
  .section--compact .block-head{ margin-bottom:6px; }
  .section--compact .block-head + *{ margin-top:6px; }

  /* 기본 하단 roomy 간격(통일) */
  .section + .section--roomy{ margin-top:14px; }

  /* 공지/가정통신문, 하단 배너는 윗 간격만 더 타이트 */
  .section + .section--roomy.roomy--tight{ margin-top:8px; }

  /* 공지·가정통신문: 두 보드가 붙지 않게 내부에서만 간격 부여 */
  .section--roomy .m-board{ margin:0; }                 /* 외부 간격 없음(섹션이 관리) */
  .section--roomy .m-board + .m-board{ margin-top:12px; }/* 보드끼리 간격 */

  /* roomy 내부 공통 간격(최소치) */
  .section--roomy .block-head{ margin-bottom:12px; }
  .section--roomy .block-head + *{ margin-top:12px; }
  .section--roomy .m-grid2{ gap:12px; }
  .section--roomy .m-thumbs,
  .section--roomy .m-products{ margin-top:12px; }
  .section--roomy .m-shop-banner{ margin-bottom:12px; }
  .section--roomy .m-banner2{ gap:12px; }
}
/* 인기자료 총 6개 레이아웃 */
/* 인기 놀이자료: 페이지(슬라이드 한 장) 안에 그리드 구성 */
/* 그리드 레이아웃 */
.m-thumbs .thumbs-grid {
  display: grid;
  gap: 6px;
  height: 100%; /* 부모 슬라이드 높이에 맞춤 */
}
.m-thumbs .thumbs-grid--2x2 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr); /* 2행을 동일 높이로 */
}
.m-thumbs .thumbs-grid--1x2 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr; /* 1행 */
}

/* 이미지: 비율 유지(왜곡/크롭 없음) */
/* 이미지: 비율 유지(왜곡/크롭 없음) */
.m-thumbs .thumbs-grid a {
  display: flex;
  border-radius: 12px;
  overflow: visible; /* hidden 제거 */
  height: 100%;
  align-items: center;
}
.m-thumbs .thumbs-grid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px; /* 이미지 자체에 라운드 적용 */
}


/* 컨테이너에 아주 얕은 여백을 넣어 마지막 카드가 안 잘리게 */
.m-cards{ padding-right: 2px; }           /* 필요시 1~3px 사이로 조절 */

/* 슬라이드 렌더링 안정화 */
.m-cards .swiper-wrapper,
.m-cards .swiper-slide{
  backface-visibility: hidden;
  transform: translateZ(0);
  box-sizing: border-box;
}
/* 카드 보더를 가상요소로 그리면 클리핑/안티앨리어싱 이슈가 거의 사라짐 */
.m-card{
  position: relative;
  border: 0;                               /* 실제 border 제거 */
  /* border-radius: 14px; */
  overflow: hidden;
}
.m-card::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
/* 플로팅 알림장 도우미 */
/* ── Floating: 알림장 도우미(아이콘만, 클릭 이동) ───────────────── */
.fab-note{
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 1100;
  --fab-size: 56px;            /* 아이콘 크기: 필요시 48~64로 조절 */
  -webkit-tap-highlight-color: transparent;
}

/* 앵커 자체는 배경/테두리/그림자 전부 제거 */
.fab-note__btn{
  display: inline-block;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  line-height: 0;              /* 여분 공백 제거 */
  text-decoration: none;
}

/* 아이콘만 크게 보여주기 */
.fab-note__icon{
  display: inline-block;
  width: var(--fab-size);
  height: var(--fab-size);
}
.fab-note__icon img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;         /* 원본비율 유지 */
}

/* 라벨은 시각적으로 숨기고 접근성은 유지(원하면 display:none으로 바꿔도 됨) */
.fab-note__label{
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 아이콘 사이즈 조절 */
@media (min-width: 480px){
  .fab-note{ --fab-size: 64px; }
}

/* 드로어 메뉴 수정 */
/* 드로어 패널 배경을 깔끔하게 */
.m-drawer__panel{ background:#fff; }

/* 섹션 기본 */
.m-mega .mega-sec{
  padding:16px;
  border-top:8px solid #f7f9fc;       /* 섹션 구분 띠 */
}
.m-mega .mega-sec:first-child{ border-top:0; padding-top:14px; }

/* 섹션 타이틀/우측 more */
.mega-headrow{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:10px;
}
.mega-title{
  margin:0; font-weight:800; font-size:16px; letter-spacing:-.02em; color:#111827;
}
.mega-headrow .more{
  font-size:12px; color:#5b76c7; border:1px solid #d6def8; padding:6px 10px; border-radius:999px;
}

/* 칩(빠른작업) */
.mega-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.mega-chips .chip{
  display:inline-flex; align-items:center; height:30px; padding:0 12px;
  border-radius:999px; font-size:12px; font-weight:700;
  background:#eee; color:#2b4f8f; border:1px solid #d9e3ff;
}

/* 링크 그리드 */
.mega-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.link-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 10px; border:1px solid #eee; border-radius:12px;
  background:#fff;
  color:var(--ink); font-size:14px;
  letter-spacing: -0.1rem;
}
.link-item i{
  width:32px; height:32px; border-radius:10px;
  display:grid; place-items:center;
  background:#f3f6ff; color:#3E5FAC; font-size:15px;
}

/* 작은 화면에서 그리드 보다 넓게 보이도록 */
@media (max-width:360px){
  .mega-grid{ grid-template-columns:repeat(2,1fr); }
}
/* 이미 있으면 유지, 없으면 사용 */
/* .m-drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 12px; border-bottom:1px solid var(--line);
} */

/* 우측 아이콘 그룹 간격/정렬 */
.m-drawer__actions{ display:flex; align-items:center; gap:3px; }

/* 드로어 헤더 안에서만 터치 영역/크기 정의 */
.m-drawer__head .icon-btn{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:10px; color:#4b5563;
}
.m-drawer__head .icon-btn i{ font-size:18px; line-height:1; }
.m-drawer__head .icon-btn:hover{ background:#f2f4f7; }
.m-drawer__head .icon-btn:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}
/* 공통 */
.m-userbar{
  background: linear-gradient(180deg, #eaf4ff 0%, #dfefff 100%);
  padding: 14px;
}

/* 레이아웃: 인사(좌) / 액션(우측 상단) */
.m-userbar__body{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:flex-start;
  column-gap:12px;
}
.m-userbar__hello{ display:flex; flex-direction:column; gap:6px; }
.m-userbar__hello .name{ margin:0; font-weight:800; font-size:15px; }
.m-userbar__hello .meta{ margin:0; display:flex; flex-wrap:wrap; gap:6px; }

/* 안내문 */
.m-userbar__hello .hint{
  margin:0;
  color:#4b5563;
  font-size:12px;
}

/* 칩(회원유형/만료/포인트) */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  height:24px; padding:4px 8px; border-radius:999px;
  font-size:12px; line-height:1; white-space:nowrap;
  border:1px solid #e1eaf6; background:#fff; color:#2b4f8f;
}
.chip--type{ background:#fdf9ef; color:#f59c30; border-color:#F2A647; font-weight:700; }
.chip--exp{ background:#fff; }
.chip--point{ background:#fff7d8; color:#7a5600; border-color:#ffeaa6; font-weight:700; }
.chip--point i{ font-size:13px; }
.chip--color-black{color: #333 }

/* 액션 버튼 우측 상단 정렬 */
.m-userbar__actions{ display:flex; gap:8px; justify-self:end; }

/* 버튼 스킨 */
.m-userbar .m-btn{ border-radius:10px; padding:8px 12px; font-size:12px; }
.m-userbar .m-btn--primary{ background:var(--primary); color:var(--ink); }
.m-userbar .m-btn--white{ background:#fff; color:#2b5fae; border:1px solid #d8e6ff; }

/* ▶ 게스트 상태: 배경 더 밝게, 칩 숨김, 안내문 표시(토글은 JS에서) */
.m-userbar.is-guest{
  background: linear-gradient(180deg, #f4f8ff 0%, #e9f2ff 100%);
}
/* 게스트(비로그인) 상태에서는 칩 묶음 숨김 */
.m-userbar.is-guest .meta{ display:none; }

/* 검색 상시 고정으로 변경 */
/* 검색 패널 기본(상시 노출) */
/* .m-search{
  background:var(--bg);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:10px 12px;
}
.m-search__form{ display:flex; gap:8px; }
.m-search__form input{
  flex:1; height:42px; padding:0 12px;
  border-radius:12px; border:1px solid var(--line); background:#fff;
}
.m-search__form input:focus{
  outline:0;
  border-color:#3E5FAC;               //
  box-shadow:0 0 0 3px rgba(62,95,172,.15);
} */

/* 검색창 패널 기본 숨김 */
.m-search {
  display: none;
  background:#fff;
  border-bottom:1px solid #eee;
  padding:8px 12px;
}

/* 열렸을 때 */
.m-search.is-active {
  display: block;
}

/* 검색 폼 스타일 */
.m-search__form {
  display:flex; gap:8px;
}

.m-search__form input {
  flex:1;
  height:38px;
  padding:0 10px;
  border:1px solid #ddd;
  border-radius:8px;
}

.m-search__form button {
  flex:0 0 42px;
  height:40px;
  border-radius:8px;
  background:#469DFF;
  color:#fff;
}

/* (선택) 바 높이만큼 본문 보정 */
:root{
  --hdr-bar:56px;     /* 상단 바 높이 */
  --hdr-search:62px;  /* 검색 영역 높이(패딩 포함 대략치) */
}
.m-header.is-fixed{ position:fixed; top:0; left:0; right:0; z-index:998; background:#fff; }
.m-header.is-fixed + main{            /* header 바로 다음 요소가 <main>일 때 */
  padding-top: calc(var(--hdr-bar) + var(--hdr-search));
}

/* 알림장 도우미 */
/* ===============================
   알림장 도우미 (scoped to .chat-window)
   =============================== */

/* ==========================
   NoteChat – in-page version
   ========================== */
:root{
  --header-offset: 0px; /* 사이트에서 이미 쓰면 그 값 사용됨 */
}

.notechat{
  display:flex; flex-direction:column;
  min-height: calc(100dvh - var(--header-offset));
  background:#fff;
  color:var(--ink);
  font-family:inherit;
}

/* 앱바 */
.notechat__appbar{
  position:sticky; top:0; z-index:5;
  display:grid; grid-template-columns: 44px 1fr 44px; align-items:center;
  gap:6px; height:52px; padding:0 8px;
  background:#fff; border-bottom:1px solid var(--nc-line);
}
.notechat__back,
.notechat__brand{ display:flex; align-items:center; justify-content:center; }
.notechat__back{ width:36px; height:36px; border-radius:10px; border:1px solid var(--nc-line); background:#f4f7ff; color:#3b5aa2; }
.notechat__title{ margin:0; font-size:16px; font-weight:800; text-align:center; }
.notechat__brand img{ height:18px; opacity:.9; }

/* 툴바 */
.notechat__toolbar{
  position:sticky; top:56px; z-index:4;
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  padding:10px 12px; background:var(--bg); border-bottom:1px solid #eee;
}

.notechat__toolbar h2{
  font-size: 18px;
  font-weight: 700;
  margin-left: 10px;
}

/* 셀렉트 */
.notechat__select{ position:relative; min-width:0; flex:1; }
.notechat__select-btn{
  width:100%; height:40px; padding:0 12px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:1px solid var(--nc-line); border-radius:10px; background:#fff; font-weight:700; color: var(--ink);
}
.notechat__select-list{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:#fff; border:1px solid var(--nc-line); border-radius:12px;
  box-shadow:0 10px 26px rgba(18,32,64,.12);
  max-height:260px; overflow:auto; padding:6px;
}
.notechat__select-list[hidden]{ display:none; }
.notechat__select-list li{
  padding:10px 10px; border-radius:8px; cursor:pointer; color: var(--ink);
}
.notechat__select-list li:hover{ background:#f3f7ff; }

/* 툴바 액션 */
.notechat__actions{ display:flex; align-items:center; gap:8px; }
.notechat__btn{
  border:1px solid var(--nc-line); background:#f4f7ff; color:var(--ink);
  border-radius:10px; height:40px; padding:0 12px; font-weight:800;
}
.notechat__btn--primary{ background:var(--primary); color:var(--ink); border-color:var(--primary); }
.notechat__icon{
  width:40px !important; height:40px; border-radius:10px;;
  background:#fff; color:var(--ink);
  font-size: 20px;
}
.notechat__icon img{
  width: 26px;
}
/* 본문(대화) */
/* ===== 공통 ===== */
:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

.notechat__body{
  height: 100%;
  overflow-y: auto;
  /* 입력바 높이에 맞춰 JS가 runtime에 padding-bottom 갱신 */
  padding: 16px 12px 90px;
  background: #fff;
}

/* 말풍선 */
.notechat__group{ display:flex; margin:10px 0; }
.notechat__group--bot{ justify-content:flex-start; }
.notechat__group--me{ justify-content:flex-end; }

.notechat__bubble{
  max-width:86%;
  padding:12px 14px;
  border-radius:14px;
  line-height:1.5;
  font-size:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.notechat__bubble--bot{ background:#f7f7f7; border:1px solid #e9eef3; color:#1f2d3d; }
.notechat__bubble--me{ background:#C0DFF8; color:var(--ink); border:1px solid transparent; }

.notechat__lead{ margin:0 0 10px; font-weight:700; }
.notechat__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.notechat__chip{
  height:32px; padding:0 12px; border:1px solid #d7dee6; border-radius:16px;
  background:#fff; font-size:13px; cursor:pointer;
}
.notechat__chip--active{ background:#C0DFF8;  }
.notechat__chip--long{ padding:0 14px; }

/* ===== 하단 고정 입력바 ===== */
.notechat__inputbar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 10px;
  padding: 10px 12px calc(10px + var(--safe-bottom));
  background:#fff;
  border-top:1px solid #e6ebf0;
  z-index: 1000;
}

.notechat__plus-btn{
  width:36px; height:36px; border-radius:12px;
  border:1px solid #dfe6ee; background:#fff; cursor:pointer;
}
.notechat__plus-menu[aria-hidden="false"]{ display:block; }
.notechat__plus-menu {
  position: absolute;
  bottom: 48px;
  left: 12px;
  min-width: 160px;
  padding: 4px; /* 패딩 줄이고 */
  background: #fff;
  border: 1px solid #e3e9f1;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(29,46,80,.12);
  display: none;
  z-index: 1001;
  overflow: hidden; /* ✅ hover 시 배경 넘치지 않게 */
}

.notechat__plus-menu > * {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 6px; /* hover 배경 둥글게 */
  background: transparent;
  border: 0;
  font-size: 13px;
  color: #1f2d3d;
  box-sizing: border-box; /* ✅ padding 포함 */
}

.notechat__plus-menu > *:hover {
  background: #EAF4FF;
}
.notechat__input{
  max-height: 120px;
  width: 100%;
  border:1px solid #dfe6ee; border-radius:12px;
  padding:10px 12px; resize:none; outline:none;
  line-height:1.5; font-size:14px; overflow-y:auto; background:#fff;
}

.notechat__send{
  height:36px; padding:0 14px;
  background:#C0DFF8; color:var(--ink); border:0; border-radius:12px;
  font-weight:600; cursor:pointer;
}

/* iOS 안전영역 보정 */
@supports (padding: max(0px)) {
  .notechat__inputbar{ padding-bottom: max(10px, var(--safe-bottom)); }
}
/* 가운데 정렬 */
/* 1) 하단바 아이콘 정확히 가운데 정렬 */
.notechat__inputbar{
  /* 기존: align-items:end → center */
  align-items: center;
}

.notechat__plus-btn{
  display: flex;               /* 아이콘 수직/수평 중앙 */
  align-items: center;
  justify-content: center;
}

.notechat__plus-btn i{
  display: block;              /* 폰트아이콘 baseline 보정 */
  line-height: 0;
}

/* (헤더 등 공통 아이콘 버튼도 쓴다면 같이 적용)
.icon-btn i { display:block; line-height:0; }
*/

/* 2) 입력창 옆에 보이는 회색 보더 제거 */
.notechat__input{
  border: none;                /* 테두리 없앰 */
  background: #f5f7fb;         /* 은은한 배경만 */
  outline: none;
  box-shadow: none;
}
.notechat__input:focus{
  border: none;
  box-shadow: none;
}

/* 툴바: 한 줄 정렬 + 간격 */
.notechat__toolbar{
  display:flex;
  align-items:center;
  gap:10px;
}

/* 셀렉트는 남는 공간 채움 */
.notechat__select{
  position:relative;
  flex:1 1 auto;
  min-width:0;          /* 긴 라벨도 줄바꿈 없이 수축 가능 */
}

/* 셀렉트 버튼 */
.notechat__select-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  height:44px;
  padding:0 12px;
  border:1px solid #e1e6ee;
  border-radius:12px;
  background:#fff;
  box-shadow:none;
  margin:0;             /* 겹침 유발 여백 제거 */
}
.notechat__select-btn i{ line-height:0; display:block; }

/* 액션 영역(버튼 + 아이콘)은 내용 크기만큼 */
.notechat__actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

/* 기본 버튼 */
.notechat__btn{
  height:44px;
  padding:0 14px;
  border:0;
  border-radius:12px;
  font-weight:700;
  margin:0;             /* 겹침 방지 */
}
.notechat__btn--primary{
  background: var(--primary);   /* 팔레트에 맞게 수정 가능 */
  color:var(--ink);
}

/* 아이콘 버튼(정중앙) */
.notechat__icon{
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid #e1e6ee;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  margin:0;             /* 겹침 방지 */
}
.notechat__icon i{ line-height:0; display:block; }

/* 드롭다운 리스트 */
.notechat__select-list{
  position:absolute;
  top:calc(100% + 6px);
  left:0; right:0;
  max-height:240px;
  overflow:auto;
  background:#fff;
  border:1px solid #e1e6ee;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  z-index:10;           /* 버튼 위에 뜨도록 */
}
.notechat__select-list[hidden]{ display:none !important; }
.notechat__select-list li{
  padding:10px 12px;
  cursor:pointer;
}
.notechat__select-list li:hover{
  background:#f5f7fb;
}

/* 혹시 기존 스타일에 남아있는 겹침 유발 속성 초기화 */
.notechat__select-btn,
.notechat__btn,
.notechat__icon{
  position:relative;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  z-index:auto !important;
}
/* 드롭다운을 내용 크기만큼만 보이게 */
.notechat__select{
  flex: 0 0 auto;          /* 남는 공간 차지하지 않음 */
  width: auto;             /* 자동 크기 */
  max-width: 200px;        /* 필요하면 최대너비 제한 */
}

/* 버튼도 자동폭 */
.notechat__select-btn{
  width: auto;
  min-width: 140px;        /* 최소 보장 너비 (옵션) */
}

/* 플러스 버튼 */
/* 입력바가 메뉴의 기준이 되도록 */
.notechat__inputbar { position: fixed; z-index: 1000; }

/* + 메뉴가 버튼 위에 뜨게 */
.notechat__plus-menu{
  position: absolute;
  bottom: 48px;      /* 버튼 위로 */
  left: 12px;        /* 필요시 조정 */
  display: none;
  z-index: 1001;
}
.notechat__plus-menu[aria-hidden="false"]{ display: block; }

/* + 아이콘 정확히 중앙 */
.notechat__plus-btn{ display:flex; align-items:center; justify-content:center; }
.notechat__plus-btn i{ display:block; line-height:0; }

/* 메뉴 아이템 */
.notechat__plus-menu [role="menuitem"]{
  display: flex;
  align-items: center;
  gap: 8px;                 /* 아이콘-텍스트 간격 */
  width: 100%;
  padding: 10px 14px;       /* 위아래/좌우 패딩 */
  font-size: 14px;
  color: #1f2d3d;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.notechat__plus-menu [role="menuitem"]:not(:last-child) {
  border-bottom: 1px solid #eee;
}
.notechat__plus-menu [role="menuitem"]:hover{
  background: #f5f7fb;
}

/* 아이콘 정렬 */
.notechat__plus-menu i{
  font-size: 15px;
  min-width: 18px;          /* 텍스트랑 일정 간격 유지 */
  text-align: center;
}
/* 인트로 카드 */
.intro-card{
  text-align:center;
  padding:16px;
}
.intro-header{
  font-size:16px;
  font-weight:700;
  margin-bottom:10px;
}
.intro-image{
  width:150px;
  height:150px;
  margin:0 auto 12px;
  display:block;
}
.intro-text{
  font-size:14px;
  line-height:1.5;
  margin-bottom:14px;
  color:#444;
}
.intro-buttons{
  display:flex;
  justify-content:center;
  gap:10px;
}
.intro-btn{
  padding:8px 14px;
  border-radius:8px;
  font-size:13px;
  cursor:pointer;
  border:1px solid #e1e6ee;
  background:#fff;
}
.intro-btn.start{
  background:#C0DFF8;
  color:var(--ink);
  border:none;
}

/* 예/아니오 버튼 */
.tone-buttons{
  display:flex;
  gap:10px;
  margin-top:10px;
}
/* .tone-btn{
  padding:6px 14px;
  border-radius:8px;
  border:1px solid #d7dee6;
  background:#fff;
  cursor:pointer;
  font-size:13px;
}
.tone-btn.selected{
  background:#eef3ff;
  border-color:#b7c6ff;
} */
/* 예/아니요 버튼 */
/* .tone-buttons{ display:flex; gap:10px; margin-top:10px; }
.tone-btn{
  padding:6px 14px; border-radius:8px; border:1px solid #d7dee6;
  background:#fff; cursor:pointer; font-size:13px;
}
.tone-btn.active, .tone-btn:hover{ background:#eef3ff; border-color:#b7c6ff; } */

/* 커스텀 셀렉트 */
.custom-select-wrapper{ position:relative; margin:8px 0;flex:0 0 auto;  }
.custom-select{ position:relative; display:inline-block;}
.custom-select-trigger{
  display:flex; align-items:center; justify-content:space-between;
  height:40px; padding:0 12px; border:1px solid #e1e6ee; border-radius:6px; background:#fff;
  white-space:nowrap;           /* 줄바꿈 방지 */
  width:max-content;            /* 내용 기준 */
}
.custom-select .arrow{ line-height:0; }
.custom-options{
  position:absolute; top:calc(100% + 6px); left:0; /* right 제거 */
  width: max-content;      /* ▶ 내용 길이에 맞게 폭 확장 */
  min-width: 100%;         /* ▶ 최소한 트리거 폭만큼은 유지 */
  max-width: 92vw;         /* ▶ 화면 밖으로 너무 커지는 것 방지 */
  overflow-y:auto; overflow-x:auto;  /* 긴 단어 대비 가로 스크롤 허용 */

  background:#fff; border:1px solid #e1e6ee;
  border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.08);
  display:none; z-index:20;
  font-size:14px;
}
.custom-select.open .custom-options{ display:block; }
/* 옵션은 한 줄 표시 → 폭이 자동으로 늘어남 */
.custom-option{
  display:block; padding:10px 12px; cursor:pointer;
  white-space: nowrap;       /* ▶ 줄바꿈 금지 */
}
.custom-option:hover{ background:#f5f7fb; }


/* 정렬 전용(좁게) */
.custom-select--fixed .custom-select-trigger{
  min-width: 92px;   /* 원하는 값으로 조절 (예: 88~110px) */
  width: 92px;
}

/* 드롭다운 박스는 내용폭 기준 + 최소 트리거폭 보장 */
.custom-select--fixed .custom-options{
  width: max-content;
  min-width: 100%;
  max-width: 92vw;
}

/* 챗봇 페이지에선 헤더 검색 숨김 */
.page--notechat .header__search,
.page--notechat #globalSearchBox { display:none !important; }

/* 검색창 빠진 만큼 헤더 정렬 보정(필요 시) */
.page--notechat .header__inner { grid-template-columns: auto 1fr auto; }
.page--notechat .notechat__body {
  padding-top: 60px; /* 헤더 실제 높이 */
}

/* 커스텀 셀렉트 비활성 표시 */
.custom-select.disabled .custom-select-trigger {
  background:#f3f5f9;
  color:#97a3b3;
  border-color:#e3e8f0;
  cursor:not-allowed;
}
.custom-select.disabled .arrow { opacity:.4; }
.custom-select.disabled .custom-options { display:none !important; }

/* 아이콘을 오른쪽에 고정 + 텍스트와 간격 확보 */
.custom-select-trigger{
  position: relative;
  padding-right: 36px;   /* ← 아이콘 자리 확보(원하면 32~40px로 조절) */
}

.custom-select-trigger .arrow{
  position: absolute;
  right: 12px;           /* 오른쪽 여백 */
  top: 50%;
  transform: translateY(-50%);
  line-height: 0;
  pointer-events: none;  /* 클릭 영역은 버튼 전체로 */
}

/* 텍스트와 아이콘 사이 최소 간격 보장 (선택) */
.custom-select-trigger .trigger-label{
  margin-right:25px;     /* 텍스트-아이콘 간격 */
  font-size:14px;
}
/* 대화 끝 스크롤 */
#notechatBody{
  overflow-y: auto;
  height: 100%;
  -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
  position: relative;
}
/* JS에서 --nc-inputbar를 업데이트해 줄 거야 */
:root { --nc-inputbar: 80px; }

/* 각 말풍선 그룹이 스크롤로 보일 때, 아래 여백만큼 더 보이도록 */
.notechat__group {
  scroll-margin-bottom: calc(var(--nc-inputbar, 80px) + 20px); /* 입력바 높이 + 20px 여유 */
}

/* 복사하기, 스크랩하기 메뉴*/
/* 버블: 메뉴 위치 기준 */
.notechat__bubble{ position:relative; }

/* 메뉴 박스 */
.bubble-menu{
  position:absolute; right:8px; top:8px;
  background:#fff; border:1px solid #e5e9f2; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  padding:6px; width:140px; z-index:40;
  overflow: hidden;
}
.bubble-menu[hidden]{ display:none !important; }

.bubble-menu .menu-item{
  width:100%; display:flex; gap:8px; align-items:center;
  padding:8px 10px; border:0; background:#fff; border-radius:8px; cursor:pointer; text-align: center;
}
.bubble-menu .menu-item:hover{ background:#f5f7fb; }

/* 모달 & 토스트 (필요 시 이미 있으면 생략) */
/* 모달 오버레이 */
.custom-alert.hidden { display: none; }
.custom-alert {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}

/* 모달 박스 */
.custom-alert-box{
  width: min(92vw, 360px);     /* 살짝 넓게 */
  background: #fff;
  border-radius: 16px;         /* 둥글게 */
  padding: 28px 24px;          /* 여백 업! */
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
}

/* 메시지 */
.custom-alert-message{
  margin: 0 0 18px;
  color: #111827;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;          /* 가운데 정렬 */
}

/* 버튼 영역: 가운데 정렬 + 넉넉한 간격 */
.custom-alert-buttons{
  display: flex;
  gap: 12px;                   /* 버튼 사이 간격 증가 */
  justify-content: center;     /* 가운데 정렬 */
  margin-top: 8px;
}

/* 버튼 스타일 */
.custom-alert-buttons button{
  min-width: 92px;             /* 버튼 폭 통일감 */
  padding: 10px 14px;          /* 여백 업 */
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
  font-weight: 600;
  transition: background .15s, box-shadow .15s, transform .04s;
  text-align: center;
}
.custom-alert-buttons button:hover{
  background: #f7f9fc;
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
}
.custom-alert-buttons button:active{
  transform: translateY(1px);
}

/* '네' 강조 버튼 */
.custom-alert-buttons #confirmYes{
  background: #CFE8FF;         /* 기존 C0DFF8보다 톤 정리 */
  border-color: #CFE8FF;
  color: #0f172a;
}
.custom-alert-buttons #confirmYes:hover{
  background: #BFE0FF;
}
.custom-alert-buttons #confirmYes:focus-visible,
.custom-alert-buttons button:focus-visible{
  outline: 2px solid #93c5fd;  /* 접근성용 포커스 */
  outline-offset: 2px;
}

/* 아주 작은 화면에서 버튼이 두 줄로 떨어지면 꽉 채워 보이도록 */
@media (max-width: 360px){
  .custom-alert-buttons{
    flex-wrap: wrap;
  }
  .custom-alert-buttons button{
    flex: 1 1 120px;
  }
}

.toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); padding:10px 14px; border-radius:10px; background:rgba(17,24,39,.92); color:#fff; font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:9999; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px); }

/* 그룹: 말풍선 + 외부 아이콘 가로 정렬 */
.notechat__group--bot.js-scrapable{
  display:flex; align-items:flex-start; gap:8px; margin-bottom:12px;
}

/* 말풍선(테두리 없음) */
.notechat__bubble--bot{
  flex:1; background:#f7f7f7; border-radius:12px; padding:12px 14px; position:relative; border:0;
}

/* 외부 스크랩 아이콘 */
/* .scrap-btn{
  flex-shrink:0; margin-top:4px;
  background:#fff; border:1px solid #e5e9f2; border-radius:8px;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  color:#a3b0c2; cursor:pointer; transition:.15s;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.scrap-btn:hover{ color:#64748b; }
.scrap-btn[aria-pressed="true"]{ color:#f6c108; border-color:#f6c10833; } */

/* 팝업 메뉴 */
.bubble-menu{
  position:absolute; right:8px; top:8px; z-index:40;
  width:148px; padding:6px; background:#fff; border:1px solid #e5e9f2; border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.bubble-menu[hidden]{ display:none !important; }

.bubble-menu .menu-item{
  width:100%; display:flex; gap:8px; align-items:center;
  padding:8px 10px; border:0; background:#fff; border-radius:8px; cursor:pointer;
}
.bubble-menu .menu-item:hover{ background:#f5f7fb; }

/* 토스트 */
.toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  padding:10px 14px; border-radius:10px; background:rgba(17,24,39,.92);
  color:#fff; font-size:13px; opacity:0; pointer-events:none; transition:.2s; z-index:9999; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px); }

/* .scrap-btn { background:none; border:none; box-shadow:none; padding:4px; cursor:pointer; }
.scrap-btn i { color:#9aa3af; transition:color .2s; font-size: 1.52rem; }

.scrap-btn.is-scrapped i { color: var(--blue);  }                 */


/* 이전 대화 보기 버튼(노트챗) */
.nc-loadprev{
  position: sticky;         /* 스크롤해도 맨 위에 붙어 있게 */
  top: 0;                   /* notechatBody의 맨 위 */
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
  z-index: 5;               /* 말풍선보다 위 */
  background: linear-gradient(#fff, rgba(255,255,255,0.7)); /* 상단 겹침 완화 */
}

.load-prev-wrapper {
  text-align: center;
  margin: 12px 0;
}

.load-prev-btn {
  padding: 6px 12px;
  font-size: 13px;
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 15px;
  cursor: pointer;
}

.load-prev-btn:hover {
  background-color: var(--primary)
}

/* 공통 */
.notechat__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 기본은 왼쪽 */
}

.notechat__group--me {
  align-items: flex-end;  /* 사용자 메시지는 오른쪽 */
}

.timestamp-wrapper {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1;
  color: #9aa3ae;
  padding: 3px 6px;
  text-align: left;
}
.notechat__group--me .timestamp-wrapper {
  text-align: right;
}
/* 버블을 기준점으로 */
.notechat__group {
  position: relative;
}

/* 스크랩 버튼 절대 배치 */
/* .scrap-btn {
  position: absolute;
  top: 3px;
  right: 10px;
  width: 28px;
  height: 28px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #15325c;
  cursor: pointer;
  z-index: 2;
}

.scrap-btn:hover { color: #64748b; }
.scrap-btn[aria-pressed="true"] {
  color: #f6c108;
  border-color: #f6c10833;
} */
#emptyScrap{
  width: 100%;
  text-align: center;
  color: var(--ink);
  padding: 24px 12px;
}

/* 우리들의 이야기 게시판 */
/* ===== Mobile Board (scoped with .mbb-) ===== */
.mbb-board{margin:0 auto;padding:12px;}

/* 헤더 */
.mbb-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.mbb-title{margin:0;font-size:18px;font-weight:800;letter-spacing:-.02em}
.mbb-btn-write{
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;padding:0 12px;border-radius:10px; font-size: 16px;
  background:var(--primary);color:var(--ink);font-weight:700;text-decoration:none;border:1px solid var(--line)
}

/* 밑줄 탭 */
.mbb-tabs{
  display:flex;gap:14px;overflow:auto;padding:0 2px 10px;border-bottom:1px solid var(--line);
  -webkit-overflow-scrolling:touch; scrollbar-width:none
}
.mbb-tabs::-webkit-scrollbar{display:none}
.mbb-tab{
  position:relative;flex:0 0 auto;padding:10px 2px;background:transparent;border:0;
  font-weight:700;color:#7b8190
}
.mbb-tab.is-active,
.mbb-tab:focus-visible{color:var(--blue);outline:none}
.mbb-tab.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:-11px;height:2px;border-radius:2px;
  background:var(--blue);
}

/* 리스트 */
.mbb-list{list-style:none;margin:10px 0 0;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden}
.mbb-item{border-bottom:1px solid var(--line)}
.mbb-item:last-child{border-bottom:0} /* 마지막 구분선 제거 */
.mbb-empty {padding:60px 20px;text-align:center;background:#f9f9f9;font-size:14px;}

.mbb-link{
  display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px 12px;text-decoration:none;color:inherit
}
.mbb-link:active{background:var(--bg)}
.mbb-main{min-width:0}
.mbb-title-row{margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.4;
  word-break: keep-all;

  display: block;          /* 한 줄 박스로 */
  white-space: nowrap;     /* 줄바꿈 금지 */
  overflow: hidden;        /* 넘치면 숨김 */
  text-overflow: ellipsis; /* … 표시 */;}
.mbb-replies{margin-left:6px;color:var(--blue);font-weight:700}
.mbb-meta{margin:0;font-size:12px;color:#7b8190;margin-top:5px;}
.mbb-dot{margin:0 6px;color:#c2c7d2}
.mbb-chev{align-self:center;font-size:18px;color:#c2c7d2}

/* 배지 */
.mbb-badge{
  display:inline-block;min-width:30px;height:18px;padding:0 6px;margin-right:6px;
  border-radius:999px;background:#ffe2e2;color:#ff5a67;font-size:11px;line-height:18px;font-weight:700;vertical-align:1px
}

.mbb-badge-n{
  display:inline-block;margin-right:6px;
  padding:4px 10px;
  font-size:11px;
  border-radius:999px;background:#eee;color:#333;font-weight:700;vertical-align:1px
}

/* 페이지네이션 */
.mbb-pager{display:flex;justify-content:center;align-items:center;gap:8px;padding:14px 0}
.mbb-btn{appearance:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;font-size:13px}
.mbb-btn[disabled]{opacity:.5}
.mbb-now{min-width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--bg);font-weight:800}
.mbb{min-width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;}

/* 아주 좁은 화면 보정 */
@media (max-width:360px){
  .mbb-link{padding:10px}
  .mbb-title{font-size:17px}
}

/* 페이지 길이 짧을 때 footer 조정 */
html, body { height:100%; margin:0; }

body{
  display:flex; flex-direction:column;
  min-height:100dvh;   /* ✅ height → min-height 로 바꿔줘 */
  box-sizing:border-box;         /* ↓ 패딩을 높이에 포함 */
  padding-top: calc(var(--header-offset) + env(safe-area-inset-top));
  overflow-y:auto;      /* iOS에서 안전하게 스크롤 허용 */
}

.m-page{ flex:1 1 auto; min-height:0; }  /* 남는 높이만큼 확장 */
.m-footer{ margin-top:auto; padding-bottom:max(16px, env(safe-area-inset-bottom)); }

/* 놀이주제별 계획안 */
/* ===== Mobile Plan page (mbp-) ===== */
.mbp-plan{max-width:560px;margin:0 auto;padding:12px}
.mbp-head{margin-bottom:8px}
.mbp-title{margin-top: 5px; font-size:18px;font-weight:800;letter-spacing:-.02em}
/* 안내 박스 */
.mbp-tip{
  display:flex; align-items:flex-start; gap:8px;
  padding:10px 12px; border:1px solid var(--line); border-radius:12px;
  background:#f7f9ff; color:#374151; font-size:13px; margin-bottom:10px
}
.mbp-tip i{font-style:normal}

/* 탭: 밑줄형 */
/* ===== ONE-LINE TOOLBAR ===== */
.mbp-toolbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;           /* 좁아지면 자연스럽게 줄바꿈 */
  margin-bottom:12px;
}

/* 탭: 가로 스크롤 유지 + 라인에서 최소 폭만 차지 */
.mbp-tabs{
  display:flex;
  justify-content: center;
  gap:14px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:0;         /* 한 줄 배치에선 밑줄 여백 제거 */
  border-bottom:0;          /* 필요하면 유지해도 OK */
  flex:0 0 auto;
}
.mbp-tabs::-webkit-scrollbar{display:none}
.mbp-tab{
  position:relative; padding:10px 2px; background:transparent; border:0; font-weight:800; color:#7b8190;
}
.mbp-tab.is-active{color:var(--blue)}
.mbp-tab.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--blue); border-radius:2px;
}

/* 필터 + 검색: 가로 한 줄 */
/* 필터 + 검색 한 줄 */
.mbp-filters{
  display:flex;
  align-items:center;
  gap:8px;
  /* margin-top:8px; */
}

/* 셀렉트 고정폭 */
.custom-select-wrapper{ flex:0 0 110px; }  /* 필요시 120~140px로 조절 */

/* 검색 영역 */
.mbp-search{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1 1 auto;
  min-width:0;
}
.mbp-search input{
  flex:1 1 auto;
  min-width:0;   /* 최소 폭도 설정 가능 */
  height:42px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
}
.mbp-search input:focus{
  outline:none;
  border-color:#C0DFF8;
  box-shadow:0 0 0 3px rgba(62,95,172,.18);
}
.mbp-btn{
  flex:0 0 64px;
  height:40px;
  padding:0;
  border-radius:12px;
  background:#368DFF;
  border:none;
  color:#fff;
  font-weight:600;
  text-align:center;
  cursor:pointer;
  font-size:14px;
}

/* 반응형: 아주 좁아지면 탭이 위 줄, 필터/검색이 다음 줄 */
@media (max-width:640px){
  .mbp-toolbar{ gap:8px; }
  .mbp-tabs{
    flex:1 1 100%;
    padding-bottom: 10px;
    box-sizing: border-box;
  }
  .mbp-filters{ flex:1 1 100%; }
}

/* 카드 그리드 */
.mbp-grid{
  list-style:none; margin:0; padding:0; display:grid; gap:10px;
  grid-template-columns: repeat(3, 1fr);  /* 기본 2열 */
}
@media (max-width:359px){
  .mbp-grid{ grid-template-columns: repeat(2, 1fr);  } /* 아주 좁을 때 1열 */
}

.mbp-card a{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:12px; border:1px solid #eef2f7; border-radius:14px; background:#fff;
  text-decoration:none; color:inherit
}
.mbp-card a:active{ transform: translateY(1px); background:#f8fafc }
.mbp-thumb{
  width:96px; height:130px; display:grid; place-items:center;
  overflow:hidden;
}
.mbp-thumb img{ width:100%; height: 100%; object-fit: contain;}
.mbp-name{font-size:14px; font-weight:700}

/* 접근성/유틸 */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 놀이주제별 계획안 상세 */
/* 섹션 */
.pd-section{padding:12px;}

/* 제목줄 */
.pd-section__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:12px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 12px;
  margin-top:10px;
}
.pd-section__icon{
  width:36px; height:36px; flex:0 0 auto;
  margin:0; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden;
  background:#fff;
}
.pd-section__icon img{width:100%;height:100%;object-fit:cover;display:block;}
.pd-section__title{
  flex:1 1 auto;
  font-size:18px; font-weight:800; margin:0;
  color:#111;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pd-section__chip{
  display:inline-flex; align-items:center; gap:4px;
  height:28px; padding:0 8px;
  font-size:12px; font-weight:600;
  color: var(--ink); background:#eee;
  border:1px solid #ddd; border-radius:999px;
  text-decoration:none; white-space:nowrap;
}
.pd-section__chip i{font-size:12px;}

/* 카드 그리드 */
.pd-section__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
@media(max-width:360px){
  .pd-section__grid{grid-template-columns:repeat(2,1fr);}
}

.pd-section__grid li a{
  display:flex; flex-direction:column; align-items:center; gap:15px;
  text-decoration:none;
}
.pd-section__grid img{
  width:72px; height:72px; background:#fff;
}
.pd-section__grid span{
  font-size:13px; font-weight:700; color:#111;
}

/* 컨테이너 */
.m-detail{padding:12px 12px 24px; background:#fff;}

/* 타이틀 줄 */
.md-head{
}
.md-title{
  display:grid; grid-template-columns:48px 1fr auto;
  align-items:center; gap:10px; padding:8px 0 10px;
  background:
          url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><path d='M20 0H0v20' fill='none' stroke='%23eef2f6'/></svg>") repeat;
  border-bottom:1px solid var(--line);
  width:100%;
}

.md-icon{width:48px;height:48px;margin:0;overflow:hidden;background:#fff;}
.md-icon img{width:100%;height:100%;object-fit:cover;display:block;}
.md-head h1{margin:0;font-size:20px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.md-chip{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;
  font-size:12px;font-weight:700;color:var(--ink);text-decoration:none;
  background:#eee;border:1px solid #ddd;border-radius:999px;white-space:nowrap;
}
.md-chip i{font-size:12px;}
@media (max-width:360px){ .md-head{grid-template-columns:44px 1fr auto;} .md-icon{width:44px;height:44px;} }

.md-head{
}

.md-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid #e5e7eb;
}

.md-head h1{
  margin:0;
  font-size:18px;
  font-weight:800;
  flex:1 1 auto; /* 가운데 영역을 차지하도록 */
}

/* 버튼 그룹 */
.md-actions{
  display:flex;
  gap:6px; /* 버튼 사이 간격 */
  flex-shrink:0; /* 줄어들지 않도록 */
  margin-top:5px;
  width:100%;
  align-items: center;
  justify-content: end;
}

/* 칩 버튼 */
.md-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  height:28px;
  padding:0 10px;
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  background:#eee;
  border:1px solid #ddd;
  border-radius:999px;
  white-space:nowrap;
}
.md-chip i{font-size:12px;}

/* 메타 */
.md-meta{display:flex; align-items:flex-start; gap:8px; padding:10px 0 6px;}
.md-desc{flex:1 1 auto; margin:0; font-size:12px; color:#6b7280;}
.md-chips{display:flex; gap:6px;}
.md-chip.ghost{background:#fff;border:1px solid var(--line);color:#34495e;height:28px;padding:0 10px;font-weight:600}

/* 탭 */
.md-tabs{display:flex;gap:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:10px;}
.md-tabs::-webkit-scrollbar{display:none}
.md-tab{appearance:none;background:transparent;border:0;padding:10px 2px;color:#7b8190;font-weight:800;position:relative;white-space:nowrap;}
.md-tab.is-active{color:var(--blue);}
.md-tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--blue);border-radius:2px;}

/* 카드 묶음 */
.md-cards{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:16px;}
.md-card{background:#f7fbff;border:1px solid #dfeaf7;border-radius:16px;padding:12px;}
.md-card__title{margin:0 0 6px;font-size:15px;font-weight:800;color:var(--blue);}
.md-card__body{font-size:13px;color:#222;}
.md-label{display:inline-block;margin-bottom:4px;color:#5b77a8;}
.md-list{margin:0;padding-left:18px;}
.md-list li{margin:4px 0}

/* 가로 스크롤 공통 */
.md-strip{background:#f7fbff;border:1px solid #e4ecfb;border-radius:16px;padding:10px;margin-bottom:14px;}
.md-strip__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.md-strip__head h3{margin:0;font-size:15px;font-weight:800;}
.md-more{font-size:12px;color:var(--ink);text-decoration:none}
.md-hscroll{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
.md-hscroll::-webkit-scrollbar{display:none}

/* 자료 썸네일 */
.md-thumb{display:block;flex:0 0 110px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;}
.md-thumb img{width:110px;height:92px;object-fit:cover;display:block;}

/* 상품 카드 */
.md-prod{flex:0 0 160px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;}
.md-prod img{width:100%;height:100px;object-fit:cover;border-radius:8px;display:block;}
.md-prod__name{margin:6px 0 2px;font-size:13px;font-weight:700;line-height:1.3;}
.md-prod__tag{margin:0;font-size:11px;color:#6b7280;}

/* 월간계획안 */
*{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;clip:rect(0,0,0,0);overflow:hidden;}

.mpage{padding:12px; background:#fff;}

/* 헤더/필터 */
.mpage-head h1{margin:0 0 8px; font-size:18px; font-weight:800;}
.mpage-filters{display:flex; gap:8px; margin-bottom:10px;}
.mbp-select{
  height:38px; padding:0 10px; border-radius:10px; border:1px solid #eee; background:#fff;
  appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='%239aa3ad'><path d='M7 10l5 5 5-5'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; background-size:16px; padding-right:28px;
}

/* 상단 주제/칩 */
.mpage-topic{background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px; margin-bottom:10px; box-sizing: border-box;}
.topic-line{}
.topic-left{
  display:flex;
  align-items:center;
  gap:8px;
}
.topic-label{font-size:12px; color:#64748b; background:#f3f6fb; border:1px solid #e6ebf5; padding:2px 8px; border-radius:999px;}
.topic-name{font-size:16px; font-weight:800;}
.chips{ margin-top:10px;}
.chip-desc {margin-top:10px;font-size:13px;background:#f9f9f9;border-radius:10px;padding:10px;}

/* 주차 탭 (라디오) */
.week-meta{
  padding: 10px 0;
  box-sizing: border-box;
}
/* 컨테이너 */
.week-tabs{
  position:relative; display:flex; gap:0;
  background:#f7f7f7; border:1px solid #eee;
  border-radius:12px; padding:4px; margin-bottom:8px;
}

.week-tabs input{ position:absolute; visibility:hidden; width:0; height:0; }

.week-tabs label{
  position:relative; z-index:1; flex:1 1 auto;
  text-align:center; padding:10px 0; font-weight:800;
  color:#8b95a1; cursor:pointer;
  transition: color .18s ease;
}
.week-tabs label:hover{ color:#8b95a1; }

/* 인디케이터: 위치만 이동, 색은 고정 */
.week-tabs .indicator{
  position:absolute; left:4px; top:4px; bottom:4px;
  width:calc(25% - 8px);
  background:#C0DFF8;
  border:1px solid #d3e2ff; border-radius:8px;
  transition:left .22s ease;
}

/* 위치 이동 */
#wk1:checked ~ .indicator{ left:4px; }
#wk2:checked ~ .indicator{ left:calc(25% + 4px); }
#wk3:checked ~ .indicator{ left:calc(50% + 4px); }
#wk4:checked ~ .indicator{ left:calc(75% + 4px); }

/* 선택된 라벨만 색 변경 */
#wk1:checked + label{ color:var(--ink); }
#wk2:checked + label{ color:var(--ink); }
#wk3:checked + label{ color:var(--ink); }
#wk4:checked + label{ color:var(--ink); }

/* 계획표 */
/* 표 컨테이너 */
/* 표 기본: 열 고정 */
.plan-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  background:#fff;
}
.plan-table th,
.plan-table td{
  border:1px solid #eee;
  padding:10px 12px;
  vertical-align:middle;
  word-break: break-word; /* 긴 단어 줄바꿈 */
  white-space: normal;    /* 공백, 줄바꿈 정상 처리 */
}

/* 열 너비(필요시 조절) */
.c-group{  width:56px; }   /* 그룹명 */
.c-domain{ width:88px; }   /* 영역명 */
.c-title{  width:auto; }   /* 내용 */

/* 제목셀(1~2열) */
.th-group{
  background:#f6fbff;
  text-align:center;
  font-weight:800;
  color:#555;
}
.th-group:empty{ background:#fff; }

.th-domain{
  background:#f6fbff;
  text-align:center;
  font-weight:700;
  color:#666;
}

/* 내용셀(3열) */
.td-title{ color:#333; }

/* 배지 */
.badge{
  display:inline-block; font-size:12px; line-height:1;
  padding:4px 6px; border-radius:10px; margin-left:6px;
  background:#eef1f6; color:#111;
}


/* notechat 범위에서만 alim.css 위에 살짝 얹기 */
.notechat .chat-body {
  padding-top: 56px;             /* 툴바 높이만큼 */
  scroll-padding-top: 56px;      /* 위로 스크롤할 때도 위 여백 확보 */
}

.custom-select-wrapper.reset{
  flex: initial !important;
}
.select-btn {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid #ccc;
  background-color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.select-btn.active,
.select-btn:hover {
  background-color: #D8E7FC;
  color: #414040;
  border-color: #D8E7FC;
}

/* 드롭다운이 카드/말풍선 밖으로 나가도 보이게 */
.chat-message { overflow: visible; }

/* 기본 포지셔닝과 z-index 확보 */
.custom-select { position: relative; }
.custom-options {
  display: none;
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  z-index: 9999;
  max-height: 240px;
  overflow: auto;
}

/* 혹시 .down 클래스가 display:none 강제하면 무력화 */
.custom-options.down { display: none; }            /* 기본은 닫힘 */
.custom-select.open .custom-options.down { display:block; }
.custom-select.open .custom-options { display:block; }

/* 평생교육원*/
/* 온라인 강의 */
/* ===== 모바일 온라인 강의 : 공통 ===== */
.m-lecture { max-width: 720px; margin:0 auto; padding:16px; }
.sr-only { position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0; }

/* 헤드 */
.mlec-head { margin-bottom:12px; }
.mlec-title { margin:0 0 4px; font-size:18px; font-weight:800; color:#1f2a44; }
.mlec-sub { margin:0; color:#556070; font-size:13px; }

/* 검색바 컨테이너 */
.mlec-searchbar { margin: 8px 0 12px; }

/* 가로 정렬 */
.mlec-searchbox { display:flex; gap:8px;align-items: center; }

/* 인풋/버튼 (root 변수 없이) */
.mlec-input{
  flex:1 1 auto; height:40px; padding:0 12px; font-size:15px;
  border:1px solid #e6ebf5; border-radius:8px; background:#fff;
  min-width:0;
  width:100%;
}
.mlec-btn{
  height:40px; padding:0 14px; border-radius:8px;
  border:1px solid #cfe0f4; background:#fff; cursor:pointer;
  color:#333;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight:bold;
}
/* 연한 하늘색 버튼 (모바일 톤) */
.mlec-btn--sky{
  background:#C0DFF8; border-color:#C0DFF8; color:var(--ink);
}
.mlec-btn--sky:active { filter: brightness(0.95); }

/* 작은 기기 보정 */
@media (max-width:360px){
  .mlec-searchbox { gap:6px; }
  .mlec-btn { padding:0 12px; }
}

/* 섹션 헤드 */
.mlec-sechead{
  display:flex;
  align-items:center;
  width:100%;
  flex-wrap:nowrap;
  margin: 15px 0;
}

.mlec-sechead > .custom-select-wrapper{
  flex:0 0 auto;
  margin:0;              /* 혹시 기본 마진 있으면 제거 */
}

.mlec-sechead > .custom-select-wrapper + .custom-select-wrapper{
  margin-left:auto;      /* 두 번째(정렬) 드롭다운을 우측 끝으로 */
}
.mlec-sec__title { margin:0; font-size:16px; font-weight:800; color:#1f2a44; }
.mlec-link { font-size:13px; color:#5b79ff; text-decoration:none; }

/* 추천 카드 목록 (가로 스크롤) */
/* 가로 스크롤 유지 */
.mlec-cards {
  display: grid;
  grid-auto-flow: column;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;

  /* ▶ 카드 1.6개 정도 보이도록 */
  grid-auto-columns: 62%;
  box-sizing: border-box;
}
.mlec-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6ebf5;
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: start;
  padding:10px;
  box-sizing: border-box;
}
.mlec-card__link { display:block; color:inherit; text-decoration:none; }
.mlec-card__thumb {
  width: 100%;
  overflow: hidden;
  position: relative;      /* 배지 위치 잡기용 */
  margin-bottom: 10px;
}

.mlec-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mlec-card__body {
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
}
.mlec-badge { position:absolute; left:8px; top:8px; padding:4px 8px; border-radius:999px; background:#222; color:#fff; font-size:12px; font-weight:800; }
.mlec-badge--free { background:#1ac6a9; }
.mlec-badge--hot { background:#ff6b6b; }
.mlec-card__body { padding:12px; }
.mlec-card__title { margin:0 0 6px; font-size:16px; font-weight:800; color:#1f2a44; line-height:1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* ✅ 최대 2줄 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;     /* 긴 단어도 줄바꿈 */
}
.mlec-card__meta { margin:0 0 8px; color:#556070; font-size:12px; }
.mlec-card__price { margin:0; }
.mlec-price { color:#ed1c24; font-weight:800; }
.mlec-price--del { color:#9aa6b2; text-decoration:line-through; }

/* 안내문 */
.mlec-note { border:1px solid #e6ebf5; border-radius:12px; background:#f5f8ff; padding:12px; margin-top:14px; }
.mlec-bullets { margin:0; padding-left:5px; color:#556070; font-size:13px; }
.mlec-bullets li { margin:6px 0; }

/* 리스트 */
.mlec-list { margin-top:14px; }

/* 섹션 헤드 내부 컨트롤 래퍼 */
.mlec-controls{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}

/* 작은 셀렉트 공통(이미 있으면 생략 가능) */
.mlec-select.mlec-select--sm{
  height:36px; padding:0 10px; font-size:14px; border:1px solid #e6ebf5; border-radius:8px; background:#fff;
}

/* 좁은 화면 정렬: 타이틀 위/아래 줄바꿈 대응 */
@media (max-width:420px){
  .mlec-sechead{ align-items:flex-start; gap:8px; }
  .mlec-controls{ width:100%; justify-content:flex-end; }
}

.mlec-sort .mlec-select--sm { height:36px; padding:0 10px; font-size:14px; }
.mlec-items { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.mlec-item {
  display:grid;
  grid-template-columns:102px 1fr; /* 썸네일 사이즈에 맞게 */
  gap:12px;
  border:1px solid #e6ebf5;
  border-radius:12px;
  background:#fff;
  padding:10px;
}

.mlec-item__thumb {
  display:block;
  border-radius:10px;
  overflow:hidden;
  background:#f3f6fb;
  width:102px;
  height:80px;
}

.mlec-item__thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.mlec-item__body {
  display:grid;
  align-content:start;
  gap:6px;
}

.mlec-item__title {
  display:block;
  font-size:14px; /* 버튼 크기와 맞추려면 조금 줄이는 게 좋아요 */
  color:#1f2a44;
  font-weight:800;
  text-decoration:none;
  line-height:1.4;
}

.mlec-item__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px; /* 버튼이 작아진 만큼 간격도 줄이기 */
}

.mlec-item__price {
  margin:0;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
}

.mlec-btn.mlec-btn--primary {
  flex-shrink: 0;
  padding: 2px 8px;   /* 위아래 줄이고, 좌우도 좁힘 */
  font-size: 11px;    /* 글자 크기 축소 */
  font-weight: 700;
  border-radius: 4px; /* 모서리도 작게 */
  background: #3E5FAC;
  color: #fff;
  text-decoration: none;
  line-height: 1.2;
  height: 22px;       /* 버튼 전체 높이를 강제 지정 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.mlec-item__top { display:flex; gap:6px; flex-wrap:wrap; }
.mlec-chip { padding:3px 8px; border-radius:999px; background:#eef3ff; color:#5060a8; font-size:12px; font-weight:800; }
.mlec-chip--pink { background:#FFEEF5; color:#ff709d; }
.mlec-chip--mint { background:#D5EAFA; color:#3E5FAC; }
.mlec-item__meta { margin:0; color:#556070; font-size:12px; }


/* 페이지네이션 */
.mlec-paging { display:flex; justify-content:center; gap:8px; margin:16px 0 8px; }
.mlec-page { min-width:36px; height:36px; border-radius:8px; border:1px solid #e6ebf5; background:#fff; font-weight:700; cursor:pointer; }
.mlec-page.is-active { background:#5b79ff; color:#fff; border-color:#5b79ff; }

/* 반응형 */
@media (max-width:360px){
  .mlec-cards { grid-auto-columns:86%; }
  .mlec-item { grid-template-columns:110px 1fr; }
}
@media (min-width:520px){
  .mlec-cards { grid-auto-columns:48%; }
  .mlec-item { grid-template-columns:150px 1fr; }
}

.mlec-btn--primary {
  background-color: #3E5FAC;
  border-color: #3E5FAC;
  color: #fff;
}

/* ====== 강의 상세 (모바일) – root 없이, 네임스페이스 전용 ====== */
.m-lecture-2{max-width:480px;margin:0 auto;padding:12px;
  display: grid;
  gap: 24px;   /* 전체 영역 간 간격 */
  padding: 12px;}

/* 카드 요약 */
.m-lecture__card{
  background:#fff;border:1px solid #e6ebf5;border-radius:12px;
  box-shadow:0 6px 16px rgba(17,38,146,.06);
  padding:12px;
}
.m-lecture__thumb{border-radius:10px;overflow:hidden;background:#f3f6fb}
.m-lecture__thumb img{width:100%;height:100%;object-fit:cover;max-width:100%;}
.m-lecture__body{display:grid;align-content:start;gap:6px}

.m-lecture__chips{display:flex;gap:6px;flex-wrap:wrap;}
.m-lecture__chip{padding:4px 8px;border-radius:999px;font-size:12px;font-weight:800;flex-shrink: 0;}
.m-lecture__chip--pink{background:#FFEEF5;color:#ff709d}
.m-lecture__chip--mint{background:#D5EAFA;color:#3E5FAC}

.m-lecture__title{margin:0;font-weight:900;color:#1f2a44;font-size:16px;line-height:1.35;display:flex;align-items: center;gap:5px;}

.m-lecture__info{margin:2px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.m-lecture__info li{display:flex;gap:8px}
.m-lecture__key{min-width:40px;color:#6b7280; font-size: 14px; }
.m-lecture_period{font-size: 14px;}
.m-lecture__foot{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.m-lecture__actions{
  display:flex;
  align-items:center;
  gap:6px;
}
/* 찜하기 버튼 & 신청하기 버튼 높이 동일 */
.m-lecture__icon-btn,
.m-lecture__btn.m-lecture__btn--mini {
  height: 32px;                  /* 동일 높이 */
  padding: 0 12px;               /* 좌우 여백만 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid #e6ebf5;
  background: #fff;
  cursor: pointer;
  line-height: 1;                /* 텍스트 정렬 */
}

/* 찜하기 아이콘 전용 */
.m-lecture__icon-btn {
  width: 32px;                   /* 정사각형 버튼 */
  color: #ff709d;
}
.m-lecture__icon-btn.active {
  background: #ffeff5;
  color: #ff3366;
}

/* 신청하기 버튼 색상 */
.m-lecture__btn.m-lecture__btn--mini {
  color: #fff;
  background: #3E5FAC;
  border-color: #3E5FAC;
  font-weight: 700;
}
/* 가격 영역 */
.m-lecture__price {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;       /* 통일된 크기 */
  line-height: 1.4;      /* 줄간격 맞추기 */
  font-weight: 700;
  color: #1f2a44;
}
.m-lecture__del {
  color: #9aa3af;
  text-decoration: line-through;
  font-weight: 500;
}

/* ===== 강좌 안내 (상세페이지 이미지 + 안내 멘트) ===== */
.m-lecture__guide{
  background:#fff;
  border:1px solid #e6ebf5;
  border-radius:12px;
  padding:12px;
  display:grid;
  gap:12px;
}

.m-lecture__guide-image img{
  width:100%;
  height:auto;
  border-radius:10px;
  object-fit:cover;
  background:#f3f6fb;
}

.m-lecture__guide-body{display:grid;gap:6px}
.m-lecture__note{margin:0;color:#556070;font-size:14px;line-height:1.55}

.m-lecture__guide-actions{
  display:flex;gap:8px;margin-top:4px;flex-wrap:wrap
}
.m-lecture__btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 12px;border-radius:10px;
  border:1px solid #e6ebf5;background:#fff;color:#1f2a44;
  text-decoration:none;font-weight:700;font-size:13px
}
.m-lecture__btn--line{background:#fff}

/* ===== 강사소개 ===== */
.m-lecture__tutor-card{
  background:#fff;border:1px solid #e6ebf5;border-radius:12px;padding:12px;display:grid;gap:10px
}
.m-lecture__tutor-head{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center}
.m-lecture__tutor-photowrap{width:64px;height:86px;border-radius:12px;overflow:hidden;background:#eef2f7}
.m-lecture__tutor-photo{width:100%;height:100%;object-fit:cover}
.m-lecture__tutor-name{font-weight:900;color:#1f2a44}
.m-lecture__tutor-sub{color:#6b7280;font-size:13px;margin-top:2px}

.m-lecture__tutor-block{margin-top:4px}
.m-lecture__h3{margin:10px 0 6px 0;font-size:14px;font-weight:900;color:#1f2a44}
.m-lecture__list{margin:0;padding:0 0 0 5px;color:#556070}

/* ===== 수강후기 ===== */
.m-lecture__review-head{display:flex;align-items:center;gap:8px}
.m-lecture__h2{margin-right:auto;padding-bottom:10px}

.m-lecture__reviews{margin-top: 5px;padding:0;list-style:none;display:grid;gap:8px}

/* 카드 느낌은 빼고, 한 줄 리스트 형태 */
.m-lecture__review{border:1px solid #e6ebf5;border-radius:12px;background:#fff}
.m-lecture__review.is-empty{padding:12px;text-align:center;color:#6b7280}
.m-lecture__review.no__review{
  padding: 10px;
}
/* 한 줄 게시판 레이아웃 */
.m-lecture__review-row{
  display:grid;
  grid-template-columns:auto 1fr auto; /* 이름 | 내용 | 날짜 */
  align-items:center;
  gap:10px;
  padding:12px 14px;
  text-decoration:none;
  color:#1f2a44;
}

/* 이름(고정폭 느낌) */
.m-lecture__review-name{
  font-weight:700;
  white-space:nowrap;
}

/* 내용(말줄임) */
.m-lecture__review-text{
  min-width:0;               /* 말줄임 필수 */
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#1f2a44;
  opacity:.95;
}

/* 날짜 */
.m-lecture__review-date{
  white-space:nowrap;
  color:#6b7280;
  font-size:12px;
}

/* 터치 피드백 */
.m-lecture__review-row:active{background:#f7faff}

/* 더보기 */
.m-lecture__more{display:flex;justify-content:center;margin-top:8px}
/* ====== m-pay 레이아웃 ====== */
.m-pay{max-width:480px;margin:0 auto;padding:16px;display:grid;gap:20px}

/* 요약 */
.m-pay__summary{
  display:grid;grid-template-columns:96px 1fr;gap:12px;
  background:#fff;border:1px solid #e6ebf5;border-radius:12px;padding:12px
}
.m-pay__thumb{width:96px;height:76px;border-radius:10px;overflow:hidden;background:#f3f6fb}
.m-pay__thumb img{width:100%;height:100%;object-fit:cover}
.m-pay__title{margin:0 0 6px 0;font-weight:900;color:#1f2a44;font-size:16px;line-height:1.35}
.m-pay__price{margin:0;display:grid;gap:4px}
.m-pay__price dt{display:none}
.m-pay__price dd{margin:0;font-weight:800;color:#1f2a44}
.m-pay__del{color:#9aa3af;text-decoration:line-through;font-weight:600;margin-right:6px}

/* 폼 공통 */
.m-pay__form{display:grid;gap:20px}
.m-pay__group{
  background:#fff;border:1px solid #e6ebf5;border-radius:12px;padding:12px;display:grid;gap:12px
}
.m-pay__legend{margin:0 0 4px 0;font-size:15px;font-weight:900;color:#1f2a44}
.m-pay__field{display:grid;gap:6px}
.m-pay__label{font-weight:800;color:#1f2a44}
.m-pay__input,.m-pay__select{
  height:40px;padding:0 12px;border:1px solid #dfe6f3;border-radius:8px;background:#fff;color:#1f2a44
}
.m-pay__input::placeholder{color:#9aa3af}
.m-pay__select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#7b8794 50%),linear-gradient(135deg,#7b8794 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;background-size:6px 6px;background-repeat:no-repeat}

/* 라디오 */
.m-pay__radios{display:grid;gap:8px}
.m-pay__radio{display:flex;align-items:center;gap:8px;color:#1f2a44}
.m-pay__radio input{width:16px;height:16px}

/* 안내/약관 */
.m-pay__hint{margin:4px 0 0;color:#6b7280;font-size:12px}
.m-pay__termsbox{
  border:1px solid #e6ebf5;border-radius:8px;background:#f8fbff;color:#556070;
  padding:10px;max-height:140px;overflow:auto;font-size:13px;line-height:1.5
}
.m-pay__agree{display:flex;align-items:center;gap:8px;color:#1f2a44}

/* 제출 */
.m-pay__submit{position:sticky;bottom:0}
.m-pay__btn{
  width:100%;height:48px;border-radius:12px;border:1px solid #3E5FAC;background:#3E5FAC;
  color:#fff;font-weight:900;font-size:16px
}

/* 작은 화면 보정 */
@media (max-width:400px){
  .m-pay{padding:14px;gap:16px}
  .m-pay__summary{grid-template-columns:84px 1fr}
  .m-pay__thumb{width:84px;height:66px}
}

/* ===== Zoom 목록 (모바일) ===== */
.m-zoomlist{max-width:480px;margin:0 auto;padding:12px;display:grid;gap:16px}

/* 헤더 */
.m-zoomlist__head{display:grid;gap:8px}
.m-zoomlist__search{display:flex;gap:8px}
.m-zoomlist__input{
  flex:1 1 auto;height:40px;padding:0 12px;border:1px solid #dfe6f3;border-radius:10px;
  background:#fff;
}
.m-zoomlist__sbtn{
  height:40px;padding:0 14px;border-radius:10px;border:1px solid #3E5FAC;background:#3E5FAC;color:#fff;font-weight:800
}
.m-zoomlist__filters{display:flex;justify-content:flex-end}
.m-zoomlist__sort select{
  height:36px;padding:0 28px 0 10px;border:1px solid #dfe6f3;border-radius:8px;background:#fff
}

/* 리스트 공통 */
.m-zoomlist__items{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.m-zoomlist__item{

  background:#fff;border:1px solid #e6ebf5;border-radius:12px;padding:10px
}
.m-zoomlist__item.is-closed{opacity:.65}

/* 썸네일 */
.m-zoomlist__thumb{display:block;border-radius:10px;overflow:hidden;background:#f3f6fb}
.m-zoomlist__thumb img{width:100%;height:100%;object-fit:cover}

/* 본문 */
.m-zoomlist__body{display:grid;align-content:start;gap:6px}
.m-zoomlist__chips{display:flex;gap:6px;flex-wrap:wrap;flex-shrink: 0;}
.mzl-chip{padding:4px 8px;border-radius:999px;font-size:12px;font-weight:800}
.mzl-chip--green{background:#e7f9ee;color:#167d39}
.mzl-chip--purple{background:#eef0ff;color:#4a51a7}
.mzl-chip--gray{background:#eceff3;color:#6b7280}

.m-zoomlist__title{margin-top:10px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:900;color:#1f2a44;text-decoration:none;line-height:1.35;display:flex;gap:5px;align-items: center;}

.m-zoomlist__meta{margin:0;display:grid;gap:2px;color:#556070;font-size:13px}
.m-zoomlist__meta dt{color:#6b7280;font-weight:700;display:inline}
.m-zoomlist__meta dd{display:inline;margin:0}

/* 하단 */
.m-zoomlist__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.m-zoomlist__price{margin:0;display:flex;align-items:center;gap:6px;font-weight:800;color:#1f2a44}
.mzl-del{color:#9aa3af;text-decoration:line-through;font-weight:600}

/* 액션: 찜 + 신청 */
.m-zoomlist__actions{display:flex;align-items:center;gap:6px}
.mzl-icon,
.mzl-btn{
  height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid #e6ebf5;background:#fff
}
.mzl-icon{width:32px;color:#ff709d}
.mzl-btn{padding:0 12px;color:#fff;background:#3E5FAC;border-color:#3E5FAC;font-weight:700; font-size: 13px;}
.mzl-btn.is-disabled{background:#cdd4e1;border-color:#cdd4e1;color:#fff;pointer-events:none}
.mzl-btn:hover,
.mzl-btn:focus {
  color: #fff;
}

/* 페이지네이션 */
.m-zoomlist__pager{display:flex;justify-content:center;gap:6px;margin-top:4px}
.mzl-page{min-width:34px;height:34px;border-radius:8px;border:1px solid #e6ebf5;background:#fff}
.mzl-page.is-current{background:#3E5FAC;border-color:#3E5FAC;color:#fff;font-weight:800}

/* a11y */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mzl-note{font-size:12px;color:#6b7280}
.mzl-subprice{margin-top:4px;font-size:12px;color:#6b7280}
.m-zoomlist__filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 12px;
}

.m-zoomlist__count {
  font-size: 14px;
  color: #556070;
}
.m-zoomlist__count strong {
  font-weight: 800;
  color: #1f2a44;
}

/* 무료 강의 및 세미나 */
/* 리스트 컨테이너는 한 줄 */
.m-seminar__items{
  margin:0;padding:0;list-style:none;
  display:grid;gap:12px;
  grid-template-columns: 1fr;     /* 한 칸 꽉 차게 */
  justify-items: stretch;         /* 가운데 말고 좌우 늘림 */
}

/* 아이템은 100% */
.m-seminar__item{
  width:100%;
  max-width:none;                 /* 혹시 남아있던 제한 제거 */
  margin:0;
  background:#fff;
  border:1px solid #e6ebf5;
  border-radius:12px;
  padding:12px;
}
.m-seminar__item.is-closed{opacity:.65}

/* 본문 */
.m-seminar__body{display:grid;align-content:start;gap:8px}

/* 칩(상태/번호) */
.m-seminar__chips{display:flex;gap:6px;flex-wrap:wrap}
.ms-chip{
  padding:4px 8px;border-radius:999px;
  font-size:12px;font-weight:800;line-height:1
}

/* 제목 */
.m-seminar__title{
  display: block;                /* block 또는 inline-block */
  white-space: nowrap;           /* 줄바꿈 금지 */
  overflow: hidden;              /* 넘치는 부분 숨김 */
  text-overflow: ellipsis;       /* ... 표시 */

  font-weight: 900;
  color: #1f2a44;
  text-decoration: none;
  line-height: 1.35;
  font-size: 15px;
}

/* 메타 정보 */
.m-seminar__meta{margin:0;display:grid;gap:2px;color:#556070;font-size:13px}
.m-seminar__meta dt{color:#6b7280;font-weight:700;display:inline}
.m-seminar__meta dd{display:inline;margin:0}

/* 수강료 */
.m-seminar__price{margin:4px 0 0;color:#1f2a44}
.m-seminar__price strong{font-weight:900}

/* 버튼 */
.m-seminar__actions{display:flex;justify-content:flex-start;margin-top:4px}


/* 빈 상태 */
.m-seminar__empty{
  text-align:center;color:#6b7280;border:1px dashed #e6ebf5;
  background:#fff;border-radius:12px;padding:20px
}

/* 기본 */
.m-dlist{max-width:680px;margin:0 auto;padding:16px;background:#fafbff}
.m-dlist__title{margin:0 0 10px;font-size:20px;font-weight:800;color:#1f2a44}

/* 필터 */
.m-dlist__filters{display:grid;gap:8px;margin-bottom:10px}
.m-dlist__row{display:flex;gap:8px}
.m-dlist__select{
  flex:1;height:40px;border:1px solid #e6ebf5;border-radius:8px;
  background:#fff;padding:0 10px;font-size:14px;color:#1f2a44
}
.m-dlist__input{
  flex:1;height:40px;border:1px solid #e6ebf5;border-radius:8px;
  background:#fff;padding:0 12px;font-size:15px;color:#1f2a44
}
.m-dlist__btn{
  height:40px;padding:0 14px;border-radius:8px;border:1px solid #5b8cff;
  background:#5b8cff;color:#fff;font-weight:800
}

/* 리스트 */
.m-dlist__items{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.m-dlist__item{background:#fff;border:1px solid #e6ebf5;border-radius:12px}
.m-dlist__link{
  display:grid;grid-template-columns:auto 1fr;gap:10px;
  padding:12px 14px;text-decoration:none;color:#1f2a44
}

/* 아이콘 */
.m-dlist__icon{
  width:32px;height:32px;border-radius:8px;align-self:start;
  background:#eef3ff;display:inline-block;position:relative;flex:0 0 32px
}
.m-dlist__icon::after{
  content:"📄"; position:absolute; inset:0; display:grid; place-items:center; font-size:18px;
}
.m-dlist__icon.is-pdf{background:#ffe7e9}
.m-dlist__icon.is-pdf::after{content:"📕"}
.m-dlist__icon.is-zip{background:#fff4d8}
.m-dlist__icon.is-zip::after{content:"🗂️"}

/* 텍스트 영역 */
.m-dlist__badge{
  display:inline-block;align-self:start;margin-top:2px;
  padding:2px 8px;border-radius:999px;background:#eceff3;color:#6b7280;
  font-size:12px;font-weight:800
}

/* 제목: 1줄 … */
.m-dlist__title{
  grid-column:1 / -1; /* 배지 옆이 아니라 다음 줄 시작 */
  margin-top:6px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:15px;font-weight:900;line-height:1.35;color:#1f2a44
}

/* 메타 */
.m-dlist__meta{
  grid-column:1 / -1; display:flex; gap:8px; color:#6b7280; font-size:13px; margin-top:4px
}
.m-dlist__views{white-space:nowrap}

/* 빈 상태 */
.m-dlist__empty{
  text-align:center;color:#6b7280;border:1px dashed #e6ebf5;background:#fff;
  border-radius:12px;padding:20px
}

/* 페이지네이션 */
.m-dlist__pager{display:flex;justify-content:center;gap:6px;margin-top:10px}
.m-dlist__page{
  min-width:36px;height:36px;border-radius:10px;border:1px solid #e6ebf5;
  background:#fff;color:#1f2a44;font-weight:700
}
.m-dlist__page.is-active{background:#f1f6ff;border-color:#5b8cff}

/* 접근성 */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 강의 자료실 */
/* 검색 영역 */
.mbb-search{
  display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;
}
.mbb-select,
.mbb-input{
  flex:1;min-width:0;height:38px;
  border:1px solid var(--line);border-radius:6px;
  padding:0 10px;font-size:14px;
}
.mbb-btn-search{
  height:38px;padding:0 14px;border-radius:6px;
  border:1px solid var(--line);
  background:var(--brand);
  color:#333;font-weight:700;font-size:14px;
}

/* 한 줄 정렬 */
.mbb-search{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;     /* 줄바꿈 방지 */
}

/* 셀렉트 2개: 고정폭 */
.mbb-search .custom-select-wrapper{
  flex:0 0 80px;       /* 필요 시 100~120px 사이로 조절 */
}

/* 커스텀 셀렉트 트리거 높이 맞춤 */
.mbb-search .custom-select,
.mbb-search .custom-select-trigger{
  width:100%;
}
.mbb-search .custom-select-trigger{
  height:38px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
}

/* 검색 인풋: 남는 공간 모두 사용 */
.mbb-input{
  flex:1 1 auto;
  min-width:0;          /* ellipsis/폭 계산 위해 필요 */
  height:38px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:14px;
}

/* 검색 버튼 */
.mbb-btn-search{
  flex:0 0 auto;
  height:38px;
  padding:0 14px;
  border-radius:6px;
  border:1px solid var(--line);
  background:var(--brand);
  color:#333;
  font-weight:700;
  font-size:14px;
}

/* (선택) 아주 작은 화면에서만 2줄 허용하고 싶다면 */
@media (max-width: 340px){
  .mbb-search{ flex-wrap:wrap; }
  .mbb-search .custom-select-wrapper{ flex:1 0 110px; }
  .mbb-btn-search{ width:100%; }
}
.mbb-input:focus {
  outline: none;                /* 기본 브라우저 아웃라인 제거 */
  border: 2px solid #DCE2F0;
}


/* new 라벨 */
.topic-list .topic-item {
  position: relative; /* 리본 위치를 잡기 위해 */
  /*display: inline-block;*/
}
.topic-list .new-ribbon {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 35px;
  height: 35px;
  background: #fabc01;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  border-top-left-radius: 6px;   /* 모서리 둥글게 */
}

.topic-list .new-ribbon span {
  position: absolute;
  top: 20px;
  left: -9px;
  width: 50px;
  color: #fff;
  font-size: 9px;
  letter-spacing: 0.5px;
  font-weight: bold;
  text-align: center;
  transform: rotate(-45deg);
  transform-origin: 0 0;
}

.topic-list .new-badge {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 18px;
  height: 18px;
  background: #fabc01;
  color: #fff;
  font-size: 13px;
  font-weight: normal;
  border-radius: 50%;
  text-align: center;
  line-height: 18px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}