.btnArea,
.content-head {
  padding: 20px;
}


section {
  z-index: 1;
  padding-bottom:40px;
  overflow-y: auto;
  overflow-x: hidden;
}

.wrap{
  position: relative;
}
.content-head .title {
  line-height: unset;
  font-weight: 600;
  width: fit-content;
}
.content-head .btn {
  position: absolute;
  right: 0;
  bottom: 0;
}





/*************** custom ***************/

/* main */
/* [2026-09-30] 큐 AP — 상단 수강 카드 재구성(Claude Design 안 A-1 + 설명).
   종전: 흐린 15.4px 이름 + 26.4px 설명(3줄 말줄임) + 아래 absolute 잔여, 높이 280px.
   설명란에 이름을 그대로 넣은 프로그램이 많아 같은 말이 크게 한 번 더 나왔고 정작 이름은 작았다.
   → 윗줄: 아이콘 배지 + 이름(제목, 2줄) / 가운데: 설명 본문 크기 3줄 / 아래: 사진 + 잔여·기한.
   높이 280→230px 로 줄여 아래 영역(최근 QR 내역) 공간을 확보한다. 세로 배치는 flex, 아래 줄은 margin-top:auto.
   (종전 platform_*.css 의 블록 간격 5px/20px 규칙은 이 배치와 맞지 않아 삭제했다.) */
.slideMain .swiper-slide {
  height: 230px;
  padding: 24px;
  border-radius: 20px;
  background-color: var(--colorWhite);
}
.slideMain .swiper-slide > .wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.slideMain .swiper-slide .programBox{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.slideMain .swiper-slide .programBox .iconBadge{
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: rgba(216, 196, 182, .16); /* --colorSub-brown 16% */
  display: flex;
  align-items: center;
  justify-content: center;
}
.slideMain .swiper-slide .programBox .icon{
  width: 20px;
  height: 20px;
}
.slideMain .swiper-slide .programBox .name{
  flex: 1;
  min-width: 0;
  padding-top: 5px; /* 배지(36px) 가운데에 첫 줄을 맞춘다 */
  font-size: var(--fs-heading);
  line-height: 2.4rem;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.slideMain .swiper-slide .textBox{
  margin-top: 14px;
}
.slideMain .swiper-slide .textBox .contentText {
  font-size: var(--fs-body);
  line-height: 1.9rem;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.slideMain .swiper-slide .infoBox{
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.slideMain .swiper-slide .infoBox .profile{
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #333;

  background-size: cover;
  background-position: center;
}
.slideMain .swiper-slide .infoBox .limit{
  font-weight: 600;
}







.btnArea.mainLine .btnBox {
  white-space: nowrap;
}
.btnArea.mainLine .btnBox .btn * {
  display: inline-block;
  vertical-align: middle;
}
.btnArea.mainLine .btnBox .btn{
  padding: 7px 10px;
  border-radius: 20px;
  background-color: var(--colorWhite);
  min-width: 50px;
  margin-left: -15px;
}
.btnArea.mainLine .btnBox .btn .icon-wrap {
  width: 35px;
  height: 35px;
  border-radius: 50%;

  background-color: var(--colorMain);
}
.btnArea.mainLine .btnBox .btn .icon-wrap .icon {
  width: 18px;
  height: 18px;
}
.btnArea.mainLine .btnBox .btn .label{
  margin-left:7px;
  line-height: 34px;
  height: 35px;
}

.btnArea.mainLine .btnBox .btn:nth-child(1){ width: calc(50% + 15px); margin-left: unset; }
.btnArea.mainLine .btnBox .btn:nth-child(2){ width: calc(50% - 50px + 15px); }

/* [2026-09-30] 큐 AT — 메인의 QR 만들기/찍기 줄을 없애며 큐 AL 의 메인 전용 버튼 규칙도 지웠다(위 공용 규칙은 member/links.php·profile_edit.html 이 쓴다). */







.slideLog .swiper-slide {
  padding: 25px;
  border-radius: 20px;
  background-color: var(--colorWhite);
}
.slideLog .swiper-slide .textBox .state {
  font-weight: 600;
}
.slideLog .swiper-slide .textBox .programName {
  opacity: .6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slideLog .swiper-slide .icon{
  position: absolute;
  right: 0;
  top: 3px;
  width: 16px;
  height: 16px;

}

.slideLog .swiper-slide .infoBox{
  position: relative;
  margin-top: 40px;
}
.slideLog .swiper-slide .infoBox .time {
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: .6;
}

/* [2026-09-30] 큐 AT — 메인 '최근 출석' 세로 목록(Claude Design 안 2). 큐 AN 의 가로 카드(.slideLog, 메인 전용 규칙)를 대체.
   흰 상자 하나 안에 최근 3건: 상태 칩 | 프로그램명(2줄) | 날짜·시간. 가로 카드보다 이름 칸이 넓어(약 200px) 긴 이름도 대부분 다 보인다.
   칩 색은 type 으로(체크인 파랑 · 체크아웃/스캔 회색 · 세션체크 베이지) — 문구는 프로그램마다 바뀔 수 있다. */
.recentList {
  margin: 0 20px;
  padding: 4px 16px;
  border-radius: 20px;
  background-color: var(--colorWhite);
}
.recentList .recentItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
}
.recentList .recentItem + .recentItem {
  border-top: 1px solid var(--colorGray100);
}
.recentList .recentItem .state {
  flex-shrink: 0;
  min-width: 64px;
  max-width: 96px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: var(--colorGray100);
  color: var(--colorGray800);
}
.recentList .recentItem .state-in { background-color: #EDEEFF; color: var(--colorBlue); }
.recentList .recentItem .state-session { background-color: #F3ECE6; color: #7A5C48; }
.recentList .recentItem .name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recentList .recentItem .when {
  flex-shrink: 0;
  text-align: right;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: #767676; /* 흰 바탕 4.5:1 — --colorGray600(#999)은 2.85:1 로 부족(큐 AT 리뷰) */
}
.recentList .recentEmpty {
  padding: 18px 0;
  text-align: center;
  color: #767676; /* 흰 바탕 4.5:1 — --colorGray600(#999)은 2.85:1 로 부족(큐 AT 리뷰) */
}




.slideLog.type-program .swiper-wrapper{
  padding: 20px 0;
}
.slideLog.type-program .swiper-slide{
  padding: 20px 20px 0;
  border-radius: 16px;
  box-shadow:0 10px 20px rgba(0,0,0,.3);
}
.slideLog.type-program .swiper-slide .programBox .name span::after{
  content: '';
  position: relative;
  width: 3px;
  height: 3px;
  background-color: var(--colorWhite);
  margin: 0 6px;
  vertical-align: middle;
  display: inline-block;
  border-radius: 50%;
}
.slideLog.type-program .swiper-slide .programBox .name span:last-child:after{
  content: none;
}
.slideLog.type-program .swiper-slide .textBox {
  height: 260px;
  position: relative;
}
.slideLog.type-program .swiper-slide .textBox .contentText{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.slideLog.type-program .swiper-slide .infoBox{
  position: relative;
  width: calc(100% + 40px);
  height: 50px;
  margin-left: -20px;
  padding: 18px 20px 15px;
  background-color: #fff;
  margin-top: 25px;
  text-align: right;
  border-radius: 0 0 15px 15px;
}
.slideLog.type-program .swiper-slide .infoBox .icon{
  right: unset;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.slideLog.type-program .swiper-slide .infoBox .btnBox{
  text-align: center;
}


.slideLog.type-program .swiper-slide.cont-bill .textBox .frame{
  position: absolute;
  bottom: 0;
  width: 100%;
}
.slideLog.type-program .swiper-slide.cont-bill .textBox .frame > .contentText:first-child{
  bottom: unset;
  top: 30px;
  border-bottom: 1px solid var(--colorGray800);
  width: calc(100% + 40px);
  margin-left: -20px;
  padding-bottom: 15px;
  padding: 0 20px 20px;
  margin-bottom: 8px;
  text-align: right;
}

.slideLog.type-program .swiper-slide.cont-bill .textBox .contentText{
  position: unset;
  padding-top: 12px;
}

.slideLog.type-program .swiper-slide.cont-bill .textBox .divide .contentText:last-child{
  text-align: right;
}

.programInfo {
  padding:  20px;
  border-radius: 0 0 30px 30px;
}
.programInfo .listArea{
  padding: 20px 0 0;
  border-top: 1px solid var(--colorGray800);
}
.programInfo > .btnBox {
  padding-top: 20px;
  z-index: 2;
  position: relative;

}




.programInfo .bnerBox {
  padding: 20px 15px 12px;
  margin-top: -10px;
  background-color: var(--colorBlack);
  color: var(--colorGray200);
  width: 100%;
  z-index: 1;
  position: relative;
  border-radius: 0 0 20px 20px;
}
.programInfo .bnerBox .title{
  position: relative;
  padding-left: 24px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.programInfo .bnerBox .title .icon{
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}


/* qr */
/* qr > scan */
body[data-location="qr-scan"] > .wrap {padding-top: unset;}
body[data-location="qr-scan"] section{ padding-bottom: unset; overflow: hidden;height: 100%;}
.cameraArea,
.cameraArea .scanBox .scan {
  background-size: calc((var(--vh, 1vh) * 100) - 0px) auto; 
  background-position: center;
}
.cameraArea{
  position: relative;
  height: 100%;
  padding-top: 65px;
}

.cameraArea::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: .6;
}
.cameraArea > .wrap {
  width: 100%;
  height: 100%;
}
.cameraArea .scanBox {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
}
.cameraArea .scanBox .scan{
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,.6);
  background-position-y: 30%;
}
.cameraArea .scanBox .guide {
  text-align: center;
  padding-top: 15px;
  color: var(--colorWhite);
}

body[data-location="qr-scan"][data-state="scanSuccess"] nav{bottom: -100px;}
body[data-location="qr-scan"][data-state="scanSuccess"] .cameraArea::before{opacity: .4;}
body[data-location="qr-scan"][data-state="scanSuccess"] .cameraArea .scanBox .scan{border-color: #F1C376;}
body[data-location="qr-scan"][data-state="scanSuccess"] .cameraArea .scanBox .guide{display: none}
body[data-location="qr-scan"][data-state="scanSuccess"] .cameraArea + .resultArea {
  display: block;
}
.cameraArea + .resultArea{
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 20px 20px;
}
.resultArea .resultBox{
  background-color: var(--colorWhite);
  border-radius: 16px;
  margin-bottom: 10px;
  padding: 20px;
}
.resultArea .resultBox > .wrap{
  padding-left: 72px;
}
.resultArea .resultBox .thm{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 60px;
  background-color: #eee;
  background-size: cover;
  background-position: center;
  border-radius: 14px;
}
.resultArea .resultBox .textBox {
  padding: 6px 0;
}
.resultArea .resultBox .textBox .programName{
  font-weight: 800;
}
.resultArea .resultBox .textBox .programRange{
  opacity: .5;
}



/* qr > scan > log */
.listArea{
  padding: 20px 20px 30px;
}
.listArea .qrList > li {  margin-bottom: 10px;}
.listArea .qrList .qrItems .qrItem {  margin-bottom: 6px;}
.listArea .qrList > li:last-child,
.listArea .qrList .qrItems .qrItem:last-child {  margin-bottom: unset;}

.listArea .qrList .qrTitle{  margin-top: 20px;}
.listArea .qrList .qrTitle:first-child{  margin-top: unset;}
.listArea .qrList .qrTitle .title{  font-weight: 600;}

.listArea .qrList .qrItems .qrItem {  
  padding: 16px;
  border-radius: 12px;
  background-color: var(--colorWhite);
}
.listArea .qrList .qrItems .qrItem > .wrap{ 
  padding-left: 38px; 
  padding-right: 75px;
}
.listArea .qrList .qrItems .qrItem .numBox{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 15px;
  width: 30px;
  text-align: center;  
  background-color: #999;
  background-size: cover;
  background-position: center;
}
.listArea .qrList.type-order .qrItems .qrItem .numBox{
  width: 40px;
  border-radius: 12px;
}
/* 주문 내역: 썸네일은 40px 정사각형 고정 — 행 높이에 맞춰 세로로 늘어나 보이던 것 방지 (2026-10-13) */
.listArea .qrList.type-order .qrItems .qrItem .numBox{
  top: 50%;
  bottom: auto;
  height: 40px;
  transform: translateY(-50%);
}
.listArea .qrList.type-order .qrItems .qrItem > .wrap{ 
  padding-left: 48px; 
}
.listArea .qrList .qrItems .qrItem .numBox .num{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--colorWhite);

}

.listArea .qrList .qrItems .qrItem .textBox {
  border-right: 1px solid #eee;
  padding-right: 10px;
}
.listArea .qrList .qrItems .qrItem .textBox > *{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.listArea .qrList .qrItems .qrItem .stateBox {
  position: absolute;
  right: -15px;
  width: 90px;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}
.listArea .qrList .qrItems .qrItem h5 {font-weight: 600;}
.listArea .qrList .qrItems .qrItem h6 {  color: #999;}



/* qr > make */
body[data-location="qr-make"] .slideLog .swiper-slide{padding: 16px;border-radius: 16px;}
body[data-location="qr-make"] .slideLog .swiper-slide .infoBox{ margin-top: 16px;}
.qrBox {
  height: 65%;
  padding: 0 20px 20px;
  text-align: center;
}
.qrBox > .wrap{
  background-color: var(--colorWhite);
  border-radius: 30px;
  padding: 30px 20px 20px;
  height: 100%;
}
.qrBox .qr {

  width: 100%;
  height: calc(100% - 36px - 20px);
  margin: 20px auto 0;

  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}





/* program */
/* program > list */
.listControl {
  position: relative;
  white-space: nowrap;
  height: 30px;
  width: 100%;
  padding: 0 20px;
}
.listControl .result{
  line-height: 30px;
}
.listControl select {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  width: fit-content;
  height: 30px;
  outline: unset;
}
.listArea .listControl{
  height: fit-content;
  padding: 0 ;
  margin-bottom: 12px;
}
.listArea .listControl select {
  right: 0;
}
/* [2026-09-30] 큐 AW — 프로그램 목록 화면 정리(Claude Design 수정안). list.html 전용 클래스(head-program·progTabs·
   progControl·progList)라 같은 data-location="program" 을 쓰는 member/links.php 에는 걸리지 않는다.
   상단바: 제목 | 찜 N · 알림(뒤로가기 없음). 카드는 한 가지: 사진 84 | 학원명 칩 · 이름 2줄 · 가격 + 회차/기간, 찜은 카드 오른쪽 위. */
header.head-program > .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
header.head-program .location {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-header);
  line-height: var(--lh-header);
  font-weight: 800;
}
header.head-program .actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
header.head-program .favPill {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 17px;
  background-color: #f3f3f6;
  color: var(--colorMain);
  font-size: var(--fs-caption);
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
header.head-program .favPill .icon {
  width: 16px;
  height: 16px;
  -webkit-mask-image: url(../resources/icon/icon-heartON.png);
  mask-image: url(../resources/icon/icon-heartON.png);
}
header.head-program .actions .btn {
  position: relative;
  width: 24px;
  height: 24px;
  -webkit-tap-highlight-color: transparent;
}
header.head-program .actions .btn::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
}
header.head-program .actions .btn .icon {
  width: 100%;
  height: 100%;
  background-color: #000;
}
header.head-program .favPill:active,
header.head-program .actions .btn:active { opacity: .55; }

.progTabs .tabList.type-tag {
  padding-top: 4px;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.progTabs .tabList.type-tag::-webkit-scrollbar { display: none; }

.listControl.progControl {
  margin: 12px 0 8px;
}
.listControl.progControl .result {
  font-size: var(--fs-body);
  color: #767676;
}
.listControl.progControl .result b { color: #222; }

.progList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px 60px; /* 하단 탭 가운데 QR 버튼(탭 위로 약 38px 튀어나옴)에 마지막 카드가 가리지 않게 */
}
.progList .progItem {
  position: relative;
  border-radius: 16px;
  background-color: var(--colorWhite);
}
.progList .progLink {
  display: flex;
  gap: 12px;
  padding: 12px 48px 12px 12px;
  color: inherit;
}
.progList .thm {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 12px;
  background-color: var(--colorGray100);
  background-size: cover;
  background-position: center;
}
.progList .info {
  flex: 1;
  min-width: 0;
  min-height: 84px;
  display: flex;
  flex-direction: column;
}
.progList .brand {
  align-self: flex-start;
  max-width: 100%;
  padding: 1px 8px;
  border-radius: 6px;
  background-color: #f1f1f4;
  color: #555;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.progList .name {
  margin-top: 4px;
  font-size: 1.5rem;
  line-height: 2.1rem;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.progList .meta {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
}
.progList .price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--colorMain);
}
.progList .term {
  font-size: var(--fs-caption);
  color: #767676;
}
.progList .btnHeart {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.progList .btnHeart .icon {
  width: 22px;
  height: 22px;
}
.progList .progEmpty {
  padding: 40px 0;
  text-align: center;
  color: #767676;
}

/* [2026-09-30] 큐 AX — 프로그램 상세 화면 정리(Claude Design 수정안, 기획자 결정 4건). detail.html 전용 클래스.
   ① 뒤로·찜: 사진 위 원형 버튼. 헤더를 절대 위치로 두어 섹션이 스크롤돼도 제자리. 노치 여백은 env() 로 직접
      (iOS 앱은 .wrap 이 45px 내려와도 버튼은 상태바 아래, Android·PC 는 0).
   ② 사진: 원본 비율 그대로(포스터 글자가 잘리지 않게), 너무 길면 최대 70vh.
   ③ 흰 시트: 머리말 칩 · 이름 · 가격 · 요약 칩('12회 · 기간 제한 없음') · 요약 문단.
   ④ 상세 안내·고지사항: 위아래, 각 5줄 뒤 '더보기'(5줄을 넘을 때만 버튼 — detail.html 스크립트).
   ⑤ 하단 고정: 가격 + 구매하기. 트레이너 계정은 종전 .btnBox.pos-bottom QR 버튼 그대로. */
header.head-detail {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 0;
  pointer-events: none;
}
header.head-detail .dtRound {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
header.head-detail .dtRound:active { opacity: .6; }
header.head-detail .dtRound .icM-arrow {
  width: 11px;
  height: 20px;
  background-color: #222;
}
header.head-detail .dtRound.btnHeart .icon {
  width: 20px;
  height: 20px;
}

.dtSection { padding-bottom: 0; }
/* [2026-09-30] 큐 AZ — 상세 화면만 오른쪽 스크롤바 숨김(common.css 의 *::-webkit-scrollbar 로 꾸민 막대가
   Android WebView 에서 항상 보여 어색했다). 대신 하단 바 위 모서리의 2px 진행 막대(.dtProgress). */
.dtSection { scrollbar-width: none; }
.dtSection::-webkit-scrollbar { display: none; width: 0; height: 0; }
.dtProgress {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background-color: #ececf1;
  pointer-events: none;
}
.dtProgress > span {
  display: block;
  width: 0;
  height: 100%;
  background-color: var(--colorBlue);
}
.dtProgress.is-hidden { display: none; }
/* 트레이너 분기: common.css 의 '.btnBox.pos-bottom + div { max-height; overflow-y:auto }' 가 바로 뒤 사진 칸에 걸려
   작은 화면에서 사진만 따로 스크롤·8px 스크롤바가 보이던 것(코드 리뷰, AX 부터). 더 구체적인 선택자로 끈다. */
.dtSection .btnBox.pos-bottom + .dtPhoto { max-height: none; overflow: visible; }
.dtPhoto {
  min-height: 120px;
  background-color: #f3f3f6;
}
.dtPhoto img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
}
.dtSheet {
  position: relative;
  margin-top: -20px;
  padding: 24px 20px 20px;
  border-radius: 24px 24px 0 0;
  background-color: var(--colorWhite);
}
.dtSheet .dtBrand {
  display: inline-block;
  max-width: 100%;
  padding: 2px 9px;
  border-radius: 6px;
  background-color: #f1f1f4;
  color: #555;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.dtSheet .dtName {
  margin: 8px 0 0;
  font-size: 2rem;
  line-height: 2.7rem;
  font-weight: 800;
}
.dtSheet .dtPrice {
  margin-top: 6px;
  font-size: 2.2rem;
  line-height: 3rem;
  font-weight: 800;
  color: var(--colorMain);
}
.dtSheet .dtPrice span {
  font-size: 1.6rem;
  font-weight: 700;
}
.dtSheet .dtChips {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dtSheet .dtChips span {
  padding: 4px 10px;
  border-radius: 8px;
  background-color: #f3f3f6;
  color: #444;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 600;
}
.dtSheet .dtDesc {
  margin-top: 16px;
  font-size: var(--fs-body);
  line-height: 2.1rem;
  color: #444;
}
.dtInfo {
  padding: 18px 20px 110px; /* 아래 고정 구매 바에 마지막 글이 가리지 않게 */
  border-top: 8px solid #f5f5f5;
  background-color: var(--colorWhite);
}
.dtInfo .dtBlock + .dtBlock { margin-top: 22px; }
.dtInfo .dtBlock h2 {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: 700;
}
.dtInfo .dtFold {
  margin-top: 8px;
  font-size: var(--fs-body);
  line-height: 2.1rem;
  color: #444;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dtInfo .dtBlock.open .dtFold {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.dtInfo .dtMore {
  display: none;
  margin-top: 4px;
  padding: 8px 0;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--colorBlue);
}
.dtBuy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background-color: var(--colorWhite);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
}
.dtBuy .dtBuyPrice {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.dtBuy .dtBuyPrice .cnt {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: #767676;
}
.dtBuy .dtBuyPrice b {
  font-size: 1.7rem;
  line-height: 2.2rem;
  font-weight: 800;
  color: var(--colorMain);
}
.dtBuy .dtBuyBtn {
  flex: 1;
  height: 52px;
  border-radius: 14px;
  background-color: var(--colorMain);
  color: var(--colorWhite);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.dtBuy .dtBuyBtn:active { opacity: .8; }
/* [2026-09-30] 큐 BB — 수강 상태 표시 */
.dtBuy .dtBuyPrice.is-enrolled .cnt { color: var(--colorBlue); font-weight: 700; }
.dtBuy .dtBuyPrice.is-enrolled b { color: var(--colorBlue); }
.dtBuy .dtBuyOff {
  flex: 1;
  height: 52px;
  border-radius: 14px;
  background-color: #f3f3f6;
  color: #767676;
  font-size: var(--fs-body);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dtSheet .dtChips span.st-on { background-color: #EDEEFF; color: var(--colorBlue); font-weight: 700; }
.dtSheet .dtChips span.st-done { background-color: #F3ECE6; color: #7A5C48; font-weight: 700; }
.listArea .blockList .blockItem {
  display: block;
  margin-bottom: 16px;
  border-radius: 16px;
  padding: 16px;
  background-color: var(--colorWhite);
}

.listArea .blockList .blockItem > .wrap{
  padding-right: 116px;
}
.listArea .blockList .blockItem .typeBox > *{
  display: inline-block;
  vertical-align: middle;
  line-height: unset;
}
.listArea .blockList .blockItem .typeBox .icon{
  width: 20px;
  height: 20px;
  margin-right: 6px;
  background-color: var(--colorMain);
}
.listArea .blockList .blockItem .typeBox .programType{
  opacity: .5;
}
.listArea .blockList .blockItem .textBox {
  margin:10px 0 16px
}

.listArea .blockList .blockItem .textBox > * {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.listArea .blockList .blockItem .textBox .programName{
  font-weight: 600;
}
.listArea .blockList .blockItem .textBox .programDetail{
  opacity: .6;
  line-height: unset;
}
.listArea .textBox .programDetail span::after{
  content: '·';
  margin: 0 6px;
  display: inline;
}
.listArea .textBox .programDetail span:last-child::after{
  content: unset;
}
.listArea .blockList .blockItem .infoBox {
  position: relative;
}
.listArea .blockList .blockItem .infoBox .programPrice {
  font-weight: 600;
}
.listArea .blockList .blockItem .btnHeart {
  position: absolute;
  bottom: 2px;
  right: 116px;
}
.listArea .blockList .blockItem .btnHeart .icon{
  width: 20px;
  height: 20px;
}
.listArea .blockList .blockItem .thm{
  position: absolute;
  width: 100px;
  top: 0;
  bottom: 0;
  right: 0;
  border-radius: 14px;
  background-color: #eee;
  background-size: cover;
  background-position: center;
}

.listArea .blockList.col-2 {
  font-size: 0;
}
.listArea .blockList.col-2 .blockItem {
  display: inline-block;
  width: calc(100% / 2 - 8px);
  margin-bottom: 16px;
  margin-right: 15px;
  padding: 0;
  background-color: unset;
  overflow: hidden;
  border: 1px solid var(--colorGray200);
}
.listArea .blockList.col-2 .blockItem > .wrap{
  padding: 15px;
}

.listArea .blockList.col-2 .blockItem > .wrap > a::before{
  content: '';
  position: absolute;
  z-index: 2;
  background:linear-gradient(180deg, rgba(255,255,255,.2),rgba(255,255,255,1) 70%);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.listArea .blockList.col-2 .blockItem .textBox{
  z-index: 3;
  position: relative;
  margin-bottom: unset;
  padding-top: 120px;
}
.listArea .blockList.col-2 .blockItem .infoBox{
  display: none;
}
.listArea .blockList.col-2 .blockItem:nth-child(2n){
  margin-right: unset;
}

.listArea .blockList.col-2 .blockItem .thm{
  width: 100%;
  z-index: 1;
}
.listArea .blockList.col-2 .blockItem .btnHeart{
  right: 15px;
  top: 15px;
  bottom: unset;
  z-index: 4;
}




.listArea .smallList .smallItem {
  display: block;
  margin-bottom: 12px;
}

.listArea .smallList .smallItem > .wrap{
  /* padding-left: 82px; */
  /* padding-right: 80px; */
}

.listArea .smallList .smallItem > .wrap > a ,
  .listArea .smallList .smallItem > .wrap > div {
 display: flex; 
 padding-left: 112px;
 flex-direction: column;
 position: relative;
 z-index: 1;
}
.listArea .smallList .smallItem > .wrap > a *,
  .listArea .smallList .smallItem > .wrap > div *{
  flex:auto;
}
.listArea .smallList .smallItem .thm{
  position: absolute;
  width: 100px;
  top: 0;
  flex: unset !important;
  bottom: 0;
  left: 0;
  border-radius: 10px;
  background-color: #eee;
  background-size: cover;
  background-position: center;
}

.listArea .smallList .smallItem .btnHeart{
  z-index: 2;
  position: absolute;
  left: 76px;
  bottom: 8px;
}
.listArea .smallList .smallItem .btnHeart .icon{
  background-color: var(--colorWhite) !important;
  width: 16px;
  height: 16px;
}
.listArea .smallList .smallItem .btnHeart.ON .icon{background-color: var(--colorBlue) !important;}


.listArea .smallList .smallItem .textBox { padding: 4px 0 6px;}

.listArea .smallList .smallItem .textBox > * {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.listArea .smallList .smallItem .textBox .programName{  
  font-weight: 600;
  height: 44px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.listArea .smallList .smallItem .textBox .programDetail{  opacity: .6;}
.listArea .smallList .smallItem .textBox .programDetail span::after{
  content: '·';
  margin: 0 6px;
  display: inline;
}
/* [2026-10-19] 큐 EY — 결제 상세 끝에 '·' 가 남았다(큰 목록에만 마지막 칸 규칙이 있었다) */
.listArea .smallList .smallItem .textBox .programDetail span:last-child::after{ content: unset; }
.listArea .smallList .smallItem .infoBox {
  /* position: absolute; */
  /* right: 0; */
  /* top: 50%; */
  /* transform: translateY(-50%); */
  flex: 1 !important;  
  height: fit-content;
}
.listArea .smallList .smallItem .infoBox .programPrice{  
  font-weight: 600;
  /* color: var(--colorBlue); */
}



body[data-location="program-order-check"] > .wrap,
body[data-location="program-order-detail"] > .wrap{  background-color: var(--colorGray100) !important;}
body[data-location="program-order-success"] > .wrap{  background-color: var(--colorBlue) !important;}
body[data-location="program-order-fail"] > .wrap,
body[data-location="program-order-cancle"] > .wrap{  background-color: var(--colorGray800) !important;}

.listArea .smallList.type-order .smallItem{
  box-shadow: 0 12px 24px rgba(0,0,0,.03);
}
.listArea .smallList.type-order .smallItem > .wrap > div,
  .listArea .smallList.type-order .smallItem > .wrap > ul{
  padding: 16px;
  background-color: #fff;
  border-top: 1px solid var(--colorGray100);  
  transform: translateY(-1px);
}

.listArea .smallList.type-order .smallItem > .wrap > div:first-child,
  .listArea .smallList.type-order .smallItem > .wrap > ul:first-child{
  transform:unset;
  border-top: unset;
  }
.listArea .smallList.type-order .smallItem .thm{
  position: unset;
  transform: unset;
  height: 100px;
  width: 100%;
  margin-bottom: 10px;
}


.listArea .smallList.type-order .smallItem > .wrap > div:first-child{
  border-radius: 0 0 12px 12px;
}
.listArea .smallList.type-order .smallItem > .wrap > ul:nth-child(2){
  border-radius: 12px 12px 0 0;
}
.listArea .smallList.type-order .smallItem .orderLogs {
  background-color: var(--colorGray050) !important;
  padding-bottom: 8px !important;

}
.listArea .smallList.type-order .smallItem .orderLogs > .title {
  margin-bottom:8px;
}
.listArea .smallList.type-order .smallItem .orderLogs .orderLog {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 8px;
}
.listArea .smallList.type-order .smallItem .orderLogs .orderLog > *:last-child{
  flex: auto;
  text-align: right;
}

.stateLog {
  text-align: center;
  padding: 20px 0;
  color: var(--colorWhite);
}
.stateLog .icon{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 12px;
  background-color: var(--colorWhite);
  position: relative;
}
.stateLog .icon i{
  background-color: var(--colorBlue);
  width: 50px;
  height: 50px;
  display: block;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  
  mask-size: 32px auto;
  mask-repeat: no-repeat;
  mask-position: center;
}




.listmore {
  border-top: 1px solid var(--colorGray100);
  margin-top: 20px;
  padding: 40px 20px;
  color: var(--colorGray500);
  text-align: center;
}
.listmore .btn{
  margin-top: 12px;
}


/* member */
/* member > home */
/* [2026-09-08] 종전 `*="member"` 는 마이페이지(`member`)까지 nav 를 숨겼다.
   하단 nav 에 '마이페이지' 탭이 생겼는데 정작 그 화면에서 nav 가 사라져
   활성 상태를 볼 수 없었다. 로그인·회원가입·알림 등 서브 화면(`member-*`)만
   숨기도록 좁힌다 — `^="member-"` 는 `member` 자체와는 매칭되지 않는다. */
body[data-location^="member-"] nav{bottom: -100px;}

.profileBox{
  padding: 0 20px;
}
.profileBox .profile{
  position: relative;
  display: block;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;

  background-size: cover;
  background-position: center;
}

.profileBox .profile .btn {
  position: absolute;
  right: 0;
  bottom: 0;
}
.profileBox .profile .btn .icon-wrap{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--colorWhite);
  background-color: #F1C376;
}
.profileBox .profile .btn .icon-wrap .icon{
  width: 16px;
  height: 16px;
}

.profileBox + .topicBox {
  text-align: center;
  padding-bottom: 30px;
}
/* [2026-09-08] 리스트 행 규격화 (A)
   종전에는 margin-bottom: 20px 만 있어 행 높이가 내용에 따라 들쭉날쭉했고
   행 사이 경계가 없었다(1줄 행과 2줄 행이 섞이면 그대로 드러난다).
   높이 하한 + 전폭 구분선으로 통일한다.
   linkList 만 .listArea 의 좌우 패딩(20px)을 상쇄해 구분선이 끝까지 가게 하고,
   상쇄한 만큼을 각 행이 다시 갖는다. */
.listArea .linkList {
  margin-left: -20px;
  margin-right: -20px;
}
.listArea .linkList > [class*="link"] {
  margin-bottom: unset;
  padding-left: 20px;
  padding-right: 20px;
}
.listArea .linkList .linkItem {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--colorGray100);
}
  /* 마지막 행의 선은 남기지 않는다 — 뒤에 .listArea 의 padding-bottom 만 남아
     선이 허공에 떠 보인다. */
  .listArea .linkList > [class*="link"]:last-child{border-bottom: unset;}
.listArea .linkList .linkItem > .wrap {
  width: 100%;
}
  /* 버튼만 들어가는 행 — 리스트 행의 높이 규격을 따르지 않고 버튼 여백만 갖는다.
     종전에는 이 버튼이 바로 아래 '그룹 관리' 행 안에 함께 들어가 있어
     한 행에 버튼과 항목이 섞여 행 구분이 무너졌다. */
  .listArea .linkList .linkItem.type-action {
    min-height: unset;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .listArea .linkList .linkItem.type-action .btnBox {
    margin-top: unset;
    padding-bottom: unset;
  }

/* [2026-09-08] 섹션 구분 (B)
   1px 선 대신 회색 띠(면)로 나눈다. 선 하나보다 그룹 경계가 훨씬 강하게 읽힌다. */
.listArea .linkList .linkTitle {
  margin-top: unset;
  padding-top: 20px;
  padding-bottom: 8px;
  border-top: unset;
  border-bottom: 1px solid var(--colorGray100);
  background-color: var(--colorGray050);
  color: var(--colorGray600);
}
.listArea .linkList .linkTitle .title {line-height: unset;}

.listArea .linkList .linkItem .icon{
  width: 20px;
  height: 20px;
  /* [2026-09-08] !important 3건 제거 — 이 규칙(0-4-0)이 .icon(0-1-0)·.btn(0-1-0)을
     특이도로 이미 이긴다. 18개 화면 실측에서도 제거 전후 계산값이 동일했다. */
  -webkit-mask-size: auto 16px;
  background-size: auto 16px;
  vertical-align: text-bottom;
  background-color: var(--colorBlack);
} 
/* [2026-09-08] 행 레이아웃을 flex 로 (C)
   종전에는 `*:not(span)` 이라는 광범위 선택자로 textBox 안의 모든 요소를
   inline-block 으로 만들고, 우측 값은 `position:absolute; top:50%` 로 띄웠다.
   그래서 행 높이가 왼쪽 내용에만 좌우되고, 우측 값이 문서 흐름 밖에 있어
   길어지면 왼쪽 글자와 겹쳤다.
   space-between 으로 바꾸면 정렬·높이가 자동으로 맞고 겹칠 수 없다.
   `.icon`·`.btn` 은 각자 기본 규칙에 display:inline-block 이 있어
   광범위 선택자를 걷어내도 영향받지 않는다. */
.listArea .linkList .linkItem .textBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
  /* 왼쪽은 남는 폭을 갖되 줄어들 수 있어야 하고(min-width:0 없으면 flex 아이템이
     내용보다 작아지지 못해 우측 값을 밀어낸다), 오른쪽은 줄어들지 않는다. */
  .listArea .linkList .linkItem .textBox .leftContent {
    min-width: 0;
  }
  .listArea .linkList .linkItem .textBox .rightContent {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-align: right;
  }

.listArea .linkList .linkItem .textBox .title{
  font-weight: 600;
}

.listArea .linkList .linkItem .textBox .leftContent .icon{
  margin-right: 8px;
}
.listArea .linkList .linkItem .textBox .rightContent .icon{
  transform: rotate(180deg);
  margin-left: 8px;
}
.listArea .linkList .linkItem .textBox .rightContent .formArea{
  padding: 0;
}

.listArea .linkList .linkItem .textBox .leftContent > *{
  display: block;
}
.listArea .linkList .linkItem .textBox .leftContent .label{
  margin-bottom: 6px;
}
.listArea .linkList .linkItem .textBox .leftContent .info{
  margin-top: 6px;
  color: var(--colorGray600);
}
.listArea .linkList .linkItem .btnBox {
  margin-top: 12px;
  padding-bottom: 6px;
}



.listArea .programList{
  position: relative;
}
.popup .popupItem .listArea .programList::before{
  height: calc(100% - 50px);
}
.popup .popupItem .listArea .programList .programItem:last-child::before{
  bottom: 50%;
  height: 50%;
}
.popup .popupItem .listArea .programList .programItem:last-child{
  padding-bottom: unset;
  margin-bottom: unset;
}
.listArea .programList .programItem{
  position: relative;
  z-index: 2;
  margin-bottom: 6px;
}
.listArea .programList .programItem::before{
  z-index: 0;
  content: '';
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  left: 15px;
  width: 2px;
  height: calc(120%);
  background-color: var(--colorBlueSoft);
}

.listArea .programList .programItem:last-child::before {
  transform: unset;
  top: unset;
  bottom: 0;
}

.listArea .programList .programItem:last-child{
  padding-bottom: 20px;
  margin-bottom: 0;
}

.listArea .programList .programItem:first-child::before {
  transform: unset;
}
.listArea .programList .programItem > .wrap{
  position: relative;
  padding: 10px 80px 10px 40px;
}

.listArea .programList .programItem .infoBox .Num{
  position: absolute;
  left: 0;
  width: 32px;
  height: 45px;
  line-height: 45px;
  top:50%;
  transform: translateY(-50%);
  border-radius: 20px;
  text-align: center;
  background-color: var(--colorBlueSoft);
  color: var(--colorBlue);


} 

section .listArea .programList .programItem .textBox > * {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.listArea .programList .programItem .textBox .programDetail{
  color: var(--colorGray600);
}
.listArea .programList .programItem .thm {
  position: absolute;
  right: 0;
  top: 0;
  width: 70px;
  height: 100%;
  border-radius: 8px;
  background-size: cover;
  background-position: center;

}

.mediaBox {
  height: 300px;
  background-size: cover;
  background-position: center;
}
.mediaBox + .infoArea {
  margin-top: -40px;
  border-top-left-radius: 30px;
  padding: 20px;
}

.mediaBox + .infoArea .programInfo .listArea {
  border-top: unset;
}
.mediaBox + .infoArea .programInfo .listArea .textBox{
  text-align: left;

}

.mediaBox + .infoArea .topicBox,
.mediaBox + .infoArea .programInfo ,
.mediaBox + .infoArea .programInfo .listArea .textBox {
  padding: 0;
}

.mediaBox + .infoArea .infoBox {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-top: 30px;
}
.mediaBox + .infoArea .infoBox::before{
  content: '';
  width: 100%;
  height: 30px;
  position: absolute;
  bottom: 0;
  left: 0;
  background:linear-gradient(180deg, transparent,rgba(255,255,255,1));
}
.mediaBox + .infoArea .infoBox.ON {
  overflow: unset;
  text-overflow: unset;
  -webkit-line-clamp: unset;
}
.mediaBox + .infoArea .infoBox.ON::before{
  content: none;
}

.mediaBox + .infoArea .topicBox > h3{
  font-weight: 600;
}
.mediaBox + .infoArea .topicBox .unit{
  margin-top: 8px;
}
.mediaBox + .infoArea .topicBox .unit > *{
  display: inline-block;
}
.contentFrame {
  padding: 20px;
}




/* member > login */


body[data-location="member-login"] section,
  body[data-location="member-joinSuccess"] section{ 
  padding-bottom: unset;
  padding-top: unset !important;
  height: calc(100% - 215px);

}


body[data-location="member-login"] section > div {
  padding: 30px !important;
}
.btnArea.loginBtn{
  margin-top: -1px;
  padding-top: 10px !important;
}
.easyLogin {
  text-align: center;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--colorGray200);
  padding-bottom: 10px;
}
.easyLogin .btnBox{
  margin-top: 16px;
}
.easyLogin .btnBox .btn{
  margin: 0 3px;
}
.easyLogin .btnBox .btn.cus-naver{
  background-color: #27D349;
}
.easyLogin .btnBox .btn.cus-kakao{
  background-color: #FFEB00;
}

/* member > alert */

.listArea .alertList > li {  margin-bottom: 10px;}
.listArea .alertList .alertItems .alertItem {  margin-bottom: 6px;}
.listArea .alertList > li:last-child,
.listArea .alertList .alertItems .alertItem:last-child {  margin-bottom: unset;}

.listArea .alertList .alertTitle{  margin-top: 20px;}
.listArea .alertList .alertTitle:first-child{  margin-top: unset;}
.listArea .alertList .alertTitle .title{  font-weight: 600;}
.listArea .alertList .alertItems .alertItem {  
  padding: 16px;
  border-radius: 12px;
  background-color: var(--colorWhite);
}
.listArea .alertList .alertItems .alertItem[data-state="notread"]{
  background-color: #EDEEFF;
}
.listArea .alertList .alertItems .alertItem[data-state="notread"] .textBox{
  border-right-color: #fff;
}
.listArea .alertList .alertItems .alertItem > .wrap{ 
  padding-left: calc(10px + 44px); 
  padding-right: 75px;
}
.listArea .alertList .alertItems .alertItem .icon-wrap{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 14px;
  width: 44px;
  height: 44px;
  text-align: center;  
  background-color: #999;
}
.listArea .alertList .alertItems .alertItem .icon-wrap .icon{
  background-color: var(--colorWhite);
  width: 22px;
  height: 22px;
}

.listArea .alertList .alertItems .alertItem .textBox {
  border-right: 1px solid #eee;
  padding-right: 10px;
}
.listArea .alertList .alertItems .alertItem .stateBox {
  position: absolute;
  right: -15px;
  width: 90px;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}
.listArea .alertList .alertItems .alertItem h5 {font-weight: 600;}
.listArea .alertList .alertItems .alertItem h6 {  color: #999;}





  /* START : 20240418 update */
  
  .listArea .alertList .alertItems .alertItem .icon.icM-arrow{
    /* -webkit-mask-image:url(https://cdn-icons-png.freepik.com/512/9923/9923681.png); */
    height: 20px;
    width: 20px;
    opacity: .5;
  }
  .listArea .alertList .alertItems .alertItem {
  }
  .listArea .alertList .alertItems .alertItem > .wrap{
    padding: unset;
    display: flex;
    flex-direction: row;
  }
  
  .listArea .alertList .alertItems .alertItem .showing{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
  }
  
  .listArea .alertList .alertItems .alertItem .textBox {
    flex: 1;
    border: unset;
    display: flex;
    flex-direction: column;
  }
  
  .listArea .alertList .alertItems .alertItem .textBox .info{
    position: absolute;
    right: 0;
    top: 0;

  }
  .listArea .alertList .alertItems .alertItem .textBox .title{
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .listArea .alertList .alertItems .alertItem.moreArea.ON .textBox .title{
    -webkit-line-clamp: 100;

  }
  .listArea .alertList .alertItems .alertItem  .btn.btnMore{
    width: 100%;
    height: 40px;
    position: absolute;
    right: 0;
    bottom: -16px;
    background:linear-gradient(180deg, rgba(255, 255, 255, 0),rgba(255, 255, 255, 1) 60%);
    padding-top: 16px;
  }
  .listArea .alertList .alertItems .alertItem[data-state="notread"] .btn.btnMore{
    background:linear-gradient(180deg, rgba(237, 238, 255, 0),rgba(237, 238, 255, 1) 60%);

  }
  .listArea .alertList .alertItems .alertItem.moreArea.ON  .btn.btnMore{
    height: 25px;
    bottom: 0;
    background:unset;
    padding-top: unset;
    text-align: center;
  }
  
  .listArea .alertList .alertItems .alertItem  .btn.btnMore::before{
    content: '· · ·';
    font-weight: 1000;
    color: var(--colorBlue);
  }
  
  .listArea .alertList .alertItems .alertItem.moreArea.ON  .btn.btnMore::before{
    content: '닫기';
    color: #999;
  }
  .listArea .alertList .alertItems .alertItem.moreArea.ON .btn.btnMore  .icon.icM-arrow{
    transform: rotate(90deg);
  }
  .listArea .alertList .alertItems .alertItem  .btn.btnMore .icon.icM-arrow {
    transform: rotate(-90deg);
    opacity: .5;
  }
  .listArea .alertList .alertItems .alertItem .btnBox{
    /* border-left: 1px solid rgba(0,0,0,.05); */
    padding-left: 10px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }
  .listArea .alertList .alertItems .alertItem .btnBox .btn.btnLink{
    background-color: #EDEEFF;
    border-radius: 12px;
    width: 40px;
    height: 100%;
    text-align: center;
    transform: rotate(180deg);
  }
  
  .listArea .alertList .alertItems .alertItem[data-state="notread"] .btnBox .btn.btnLink {
    background-color: #fff;
    
  }
  .listArea .alertList .alertItems .alertItem .btnBox .btn.btnLink .icon.icM-arrow {
    height: 100%;
    width: 22px;
  }
  .listArea .alertList .alertItems .alertItem .moreBox > * {
    margin-top: 12px;
  }
  .listArea .alertList .alertItems .alertItem .moreBox > *:first-child {
    margin-top: 4px;
  }
  .listArea .alertList .alertItems .alertItem .moreBox > *:last-child {
    margin-bottom: 30px;
  }
  .listArea .alertList .alertItems .alertItem .moreBox .icon-wrap{
    position: unset;
    transform: unset;
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
  }

  .alert_img {
    width: 100%;
    height: auto;    /* 원본 이미지 비율 유지 */
    display: block;  /* 아래쪽 여백 방지 */
    border-radius: 20px;
  }

  .listArea .alertList .alertItems .alertItem .moreBox .info {
    color: #555;
  }
.moreArea .moreBox{
  display: none;
}
.moreArea.ON .moreBox{
  display: block;
  height: fit-content;
}

  /* END : 20240418 update */


/* my */
/* my > home */
.calendarBox,
.eventBox {
  padding: 20px;
}
.cjslib-calendar{
  position: relative;
}

.cjslib-year, .cjslib-month{
  display: inline-block;
}
.cjslib-year{
  margin-right: 8px;
}
.cjslib-year [id*="calendarContainer-year-"]{
  display: none;
}

.cjslib-month [id*="calendarContainer-month-"]{
  position: absolute;
  top: 0;
  cursor: pointer;
}
.cjslib-month #calendarContainer-month-back{
  right: 24px;
}
.cjslib-month #calendarContainer-month-next{
  right: 0;
}


.cjslib-year #calendarContainer-year,
.cjslib-month #calendarContainer-month{
  font-size: var(--fs-heading);
  font-weight: 800;
}

.cjslib-year #calendarContainer-year::after{
  content: '년';
}
.cjslib-days label.cjslib-day {
  display: inline-block;
  width: calc(100% / 7.2);
  text-align: center;
  border-radius: 8px;
  padding: 14px 0;
  margin-bottom: 1px;

  font-size: var(--fs-body-lg);
  font-weight: 600;
  position: relative;
  cursor: pointer;
}
.cjslib-labels{
  border-top: 1px solid var(--colorGray100);
  margin-top: 12px;
}
.cjslib-labels span{
  display: inline-block;
  width: calc(100% / 7.1);
  text-align: center;
  padding: 16px 0 12px;
  font-size: var(--fs-body-lg);
  color: var(--colorGray500);
}

.cjslib-days label.cjslib-day.cjslib-day-today{
  background-color: var(--colorMain);
  color: var(--colorWhite);
  font-weight: 800;
}
.cjslib-day-diluted{
  color: var(--colorGray200);
}
/* [2026-10-19] 큐 EY — 날짜를 눌러도 표시가 오늘에만 남았다. 고른 날짜는 테두리(라디오 바로 뒤 label) */
.cjslib-days input[type="radio"]:checked + label.cjslib-day:not(.cjslib-day-today):not(.cjslib-day-diluted){
  box-shadow: inset 0 0 0 2px var(--colorMain);
  color: var(--colorMain);
}
.cjslib-days input[type="radio"]{
  opacity: 0;
  width: 1px;
  height: 1px;
}
.cjslib-indicator-type-numeric {
  /* border-radius: 50%;
  width: 14px;
  height: 14px;
  color: var(--colorWhite);
  background-color: var(--colorBlue);
  text-align: center;
  line-height: 14px;

  position: absolute;
  right: 4px;
  top: 3px;

  font-size: .8rem;
  font-weight: 800; */
  left: 3px;
  width: 10px;
  height: 10px;
  top: 10px;
  position: absolute;
  bottom: 0;
  border-radius: 8px;
  background-color: var(--colorBlueSoft);
  font-size: 0;
  color: transparent;

}

.cjslib-days label.cjslib-day .cjslib-day-indicator:empty, 
.cjslib-days label.cjslib-day .cjslib-day.cjslib-day-diluted>.cjslib-day-indicator,
#organizerContainer-history{
  display: none;
}



.cjslib-date #organizerContainer-date{
  font-size: var(--fs-heading);
  font-weight: 800;
}

.cjslib-date  [id*="organizerContainer-day-"]{
  display: none;
  position: absolute;
  top: 0;
  cursor: pointer;
}
.cjslib-date  #organizerContainer-day-back{
  right: 24px;
}
.cjslib-date  #organizerContainer-day-next{
  right: 0;
}

.eventBox .listArea {
  padding: unset;
}
.eventBox .listArea .qrList{
  margin-top: 16px;
}
.cjslib-list-placeholder {
  padding: 16px 0 0;
  text-align: center;
  color: var(--colorGray500);
  font-size: var(--fs-btn);
  font-weight: 600;
}

/* ── [2026-10-17] 마이페이지 개편 1차 ────────────────────────────────────
   스타벅스 앱 'Other' 화면을 참고한 시안(Claude Design 캔버스)을 옮긴다.
   새 클래스만 추가하고 기존 규칙은 건드리지 않는다 — 이 블록을 안 쓰는 화면은 그대로다.
   보조 글자는 --colorGray600(#999, 흰 바탕 2.8:1) 대신 --colorNavLabelOff(#767676, 4.54:1). */

/* [2026-10-18] 본문 큰 제목(.pageTitle)은 모든 화면이 상단바 한 줄 제목(.titleInline)으로 바뀌어 지웠다 */
/* ── [2026-10-18] 내 프로그램 · 이용기록 개편(시안 ④~⑦) ──────────────────────────────── */
/* 내 프로그램 탭 — 기존 .tabBox .tabList.type-bar 를 그대로 쓰고 개수만 붙인다 */
.tabBox .tabList.type-bar .tabItem .btn .count { margin-left: 4px; }
.tabBox .tabList.type-bar .tabItem.NOW .btn .count { color: var(--colorBlue); font-weight: 700; }

/* 진행중·종료 — 1열 수강 카드 */
.myProgList { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 0; }
.myProgList .progCard { display: flex; gap: 14px; padding: 16px; border-radius: 16px; background-color: var(--colorWhite); color: inherit; }
.myProgList .progCard .thumb {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--colorBlueSoft); background-size: cover; background-position: center;
  color: var(--colorMain); font-size: var(--fs-screen); font-weight: 700;
}
.myProgList .progCard .body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.myProgList .progCard .top { display: flex; align-items: flex-start; gap: 8px; }
.myProgList .progCard .name { flex-grow: 1; min-width: 0; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: 700; }
.myProgList .progCard .chip { flex-shrink: 0; padding: 3px 8px; border-radius: 8px; font-size: 1.1rem; line-height: 1.4rem; font-weight: 700; background-color: #EDEEFF; color: var(--colorBlue); }
.myProgList .progCard .chip.is-soon { background-color: #FFF1E0; color: #9A4A00; }  /* 흰·옅은 바탕 모두 4.5:1 이상 */
.myProgList .progCard .chip.is-end  { background-color: var(--colorGray100); color: var(--colorGray800); }
.myProgList .progCard .meta { font-size: var(--fs-btn); line-height: var(--lh-body); color: var(--colorGray800); }
.myProgList .progCard .meta b { color: var(--colorMain); }
.myProgList .progCard .meta b.is-soon { color: #9A4A00; }
.myProgList .progCard .bar { height: 6px; border-radius: 3px; background-color: var(--colorGray100); overflow: hidden; }
.myProgList .progCard .bar > span { display: block; height: 100%; border-radius: 3px; background-color: var(--colorBlue); }
.myProgList .progCard .bar.is-end > span { background-color: var(--colorGray500); }
.myProgList .progCard .last { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--colorNavLabelOff); }
.myProgEmpty { padding: 40px 20px 8px; text-align: center; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--colorNavLabelOff); }
.myProgMore { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 20px 110px; }
.myProgMore .sub { font-size: var(--fs-btn); color: var(--colorNavLabelOff); }
.myProgMore .btn { height: 44px; line-height: 42px; padding: 0 22px; border: 1px solid var(--colorBlue); border-radius: 30px; color: var(--colorBlue); font-size: var(--fs-btn); font-weight: 600; }

/* 이용기록 — 선택한 날 제목 줄 · '자세히 보기' (달력 아래 목록과 일별 기록이 같이 쓴다) */
.dayHead { display: flex; align-items: baseline; justify-content: space-between; padding: 20px 20px 10px; }
.dayHead .title { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: 700; }
.dayHead .sub { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--colorNavLabelOff); }
.recentList .recentMore { display: flex; align-items: center; justify-content: center; gap: 4px; height: 48px; border-top: 1px solid var(--colorGray100); color: var(--colorBlue); font-size: var(--fs-btn); font-weight: 600; }
.recentList .recentMore .icon { width: 12px; height: 12px; transform: rotate(180deg); background-color: var(--colorBlue); }
/* 이용기록 달력 아래 — .eventBox 가 이미 좌우 20px 를 가지므로 제목·목록의 자체 여백은 뺀다 */
.eventBox .dayHead { position: relative; padding: 0 0 10px; }
.eventBox .recentList { margin: 0 0 90px; }  /* 아래 '자세히 보기'가 하단 nav(68px)·QR 버튼에 가리지 않게 */
.recentList .cjslib-list-placeholder { padding: 18px 0; font-size: var(--fs-body); font-weight: 400; color: var(--colorNavLabelOff); }
.recentList div.cjslib-list-placeholder { padding: 0; }
/* 일별 기록 — 다른 날을 불러오는 동안 */
.dayHead.is-loading, .recentList.is-loading { opacity: .45; transition: opacity .15s; }
/* 일별 기록 상단바 오른쪽 전날·다음날 */
header.head-body .rightBox .dayNav .icon { width: 14px; height: 14px; }
header.head-body .rightBox .dayNav.is-next .icon { transform: rotate(180deg); }
header.head-body .rightBox .dayNav.is-off { opacity: .25; pointer-events: none; }

/* 같은 큰 제목을 상단바 뒤로가기 오른쪽에 한 줄로(출석 기록·이용기록) — 상단바 65px 안에 들어간다 */
header.head-body .leftBox .titleInline {
  font-size: var(--fs-screen);
  line-height: var(--lh-screen);
  font-weight: 700;
  color: var(--colorMain);
  white-space: nowrap;
}

.ic-receipt { -webkit-mask-image: url(../resources/icon/icon-receipt.svg); mask-image: url(../resources/icon/icon-receipt.svg); }
.ic-group   { -webkit-mask-image: url(../resources/icon/icon-group.svg);   mask-image: url(../resources/icon/icon-group.svg); }
/* 마이페이지 본문 — 하단 nav(68px)와 가운데 QR 버튼에 가리지 않게 아래 여백을 넉넉히 둔다 */
.myHome {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 20px 110px;
}
.myHome .icon { -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.myHome .icon.is-forward { transform: rotate(180deg); }  /* icon-arrow 원본은 왼쪽(뒤로가기) 방향 */

/* 인사 카드 — 누르면 계정정보 */
.myHome .greetCard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px 16px 16px;
  border-radius: 16px;
  background-color: var(--colorWhite);
}
.myHome .greetCard .profile {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--colorGray200);
  background-size: cover;
  background-position: center;
}
.myHome .greetCard .textBox {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
  min-width: 0;
}
.myHome .greetCard .name {
  font-size: var(--fs-heading);
  line-height: var(--lh-heading);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.myHome .greetCard .name em { font-style: normal; color: var(--colorBlue); }
.myHome .greetCard .sub {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--colorNavLabelOff);
}
.myHome .greetCard .icon { width: 16px; height: 16px; background-color: var(--colorNavLabelOff); }

/* 바로가기 타일 3×2 */
.myHome .tileGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.myHome .tileGrid .tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 96px;
  border-radius: 16px;
  background-color: var(--colorWhite);
}
.myHome .tileGrid .tile .icon { width: 28px; height: 28px; background-color: var(--colorBlue); }
.myHome .tileGrid .tile .label {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 600;
  color: var(--colorBlack);
}

/* 강조 타일 — 한 가지 기능만 테두리로 띄운다 */
.myHome .tileWide {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1.5px solid var(--colorBlue);
  border-radius: 16px;
  background-color: var(--colorWhite);
}
.myHome .tileWide > .icon { width: 32px; height: 32px; background-color: var(--colorBlue); }
.myHome .tileWide .textBox { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; min-width: 0; }
.myHome .tileWide .sub { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--colorNavLabelOff); }
.myHome .tileWide .title { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: 700; color: var(--colorMain); }
.myHome .tileWide .icon.is-forward { width: 16px; height: 16px; background-color: var(--colorBlue); }

/* 섹션 + 2열 목록 */
.myHome .linkGroup {
  padding-top: 20px;
  border-top: 1px solid var(--colorGray100);
}
.myHome .linkGroup .groupTitle {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: 700;
}
.myHome .linkGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
  margin-top: 4px;
}
.myHome .linkGrid .linkCell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
}
.myHome .linkGrid .linkCell .icon { width: 20px; height: 20px; background-color: var(--colorGray800); }
.myHome .linkGrid .linkCell .label { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; }

.myHome .appVersion {
  text-align: center;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--colorNavLabelOff);
}

/* 설정형 목록 행 — 항목은 보통 굵기, 오른쪽 현재값은 회색. 계정정보·알림 설정이 쓴다.
   기존 .linkList 규칙(0-5-0 까지)을 이기도록 .type-setting 을 붙여 특이도를 올린다. */
.listArea.is-flush { padding-top: 0; padding-bottom: 0; }
.listArea .linkList.type-setting .linkItem { min-height: 56px; padding-top: 10px; padding-bottom: 10px; }  /* 두 줄 행(설명 있는 항목)도 위아래가 붙지 않게 */
.listArea .linkList.type-setting .linkItem .textBox .leftContent .title {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: 500;
}
.listArea .linkList.type-setting .linkItem .textBox .leftContent .info {
  color: var(--colorNavLabelOff);
}
.listArea .linkList.type-setting .linkItem .textBox .rightContent .content {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--colorNavLabelOff);
}
.listArea .linkList.type-setting .linkItem .textBox .rightContent .content.is-plain { margin-right: 24px; }  /* 화살표 없는 행도 값의 오른쪽 끝을 맞춘다 */
.listArea .linkList.type-setting .linkItem .textBox .rightContent .icon {
  width: 16px;
  height: 16px;
  -webkit-mask-size: auto 14px;
  mask-size: auto 14px;
  background-color: var(--colorNavLabelOff);
}
.listArea .linkList.type-setting .linkItem .textBox .rightContent .profile {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--colorGray200);
  background-size: cover;
  background-position: center;
}
/* 행 전체를 누를 수 있는 링크 행 */
.listArea .linkList.type-setting .linkItem > a.wrap { display: block; color: inherit; }

/* 화면 아래 글자 버튼 — 로그아웃(밑줄), 회원탈퇴(작게) */
.footLinks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 48px 20px 40px;
}
.footLinks .btnText {
  min-height: 44px;
  padding: 0 12px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 500;
  color: var(--colorGray800);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.footLinks .btnText.is-weak {
  font-size: var(--fs-caption);
  font-weight: 400;
  color: var(--colorNavLabelOff);
  text-decoration: none;
}