header{
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    padding:0 20px;
}
body header.head-main{ display: none;}
body[data-location*="main"] header.head-main{ display: block;}
header > .wrap {
    position: relative;
    height: 65px;
    width: 100%;
}

header [class*="use-"] > div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

header [class*="use-"] > div * {
    display: inline-block;
    vertical-align: middle;
}
header .leftBox{    left: 0;}
header .centerBox{    left: 50%; transform: translate(-50%, -50%);}
/* [2026-10-17] 큐 DZ(FO) — 위 규칙(0-1-1)은 `header [class*="use-"] > div { transform: translateY(-50%) }`(0-1-2)에 져서
   가로 -50% 가 빠지고 제목이 화면 중심에서 '시작'했다(실측: 중심이 약 40px 오른쪽). 같은 모양의 선택자로 특이도를 올린다(0-2-1).
   메인 상단바는 `header.head-main .use-main > div { transform: none }`(0-2-2)가 여전히 이긴다. */
header [class*="use-"] > .centerBox { transform: translate(-50%, -50%); }
header .rightBox{    right: 0;}

header .leftBox .btn{margin-right: 14px;}
header .rightBox .btn{margin-left: 14px;}

/* 터치 영역 확장 — 아이콘 위치·크기는 건드리지 않는다.
   leftBox 는 전 화면에서 버튼이 1개뿐이라 44px 를 그대로 쓴다. */
header .use-main .btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
}
/* rightBox 는 버튼이 2개인 화면이 있고 중심 간격이 38px(24+14) 이라
   44px 로 넓히면 서로 겹쳐 엉뚱한 버튼이 눌린다. 겹치지 않는 36px 까지만. */
header .rightBox .btn::after { width: 36px; height: 36px; }
header .use-main .btn:active { opacity: .55; }


header .use-main .profile {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #ddd;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* [2026-09-08] .location 을 h3 → h1 로 바꾸면서 line-height 를 고정한다.
   h3 때는 --lh-screen(3rem) 을 상속받았는데 h1 은 --lh-display(5.2rem) 라
   명시하지 않으면 상단바 높이가 커진다. 값은 종전 실효값 그대로. */
header .use-main .location{font-size: var(--fs-header); line-height: var(--lh-header);}
header.head-main .use-main .location{font-weight: 800;}
header.head-body .use-main .location{font-weight: 600;}
/* [2026-09-29] 메인 상단바 가운데 — 날짜(h1) + 오늘 출석 상태 두 줄(main/index.html 이 채운다).
   높이: 33px + 17.6px ≈ 51px 로 상단바 65px 안에 든다.
   `header [class*="use-"] > div *` 가 자식을 전부 inline-block 으로 만들므로 block 으로 되돌린다.
   (종전 가운데 정렬·폭 제한은 2026-09-30 큐 AT 의 가로 배치로 바뀌었다 — 아래.) */
/* [2026-09-30] 큐 AT — 메인 상단바를 왼쪽 정렬 가로 배치로(Claude Design 안 2).
   오른쪽에 '내 QR' 버튼이 더해져 가운데 정렬(absolute + translate)로는 날짜와 겹친다.
   프로필 | 날짜·상태(남는 폭, 말줄임) | 내 QR · 알림. 메인 상단바(head-main)는 메인에만 있다.
   `header .centerBox` 의 transform 은 더 구체적인 `header.head-main .use-main > div` 가 끈다(!important 없이, 특이도로 이김). */
header.head-main .use-main {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
}
header.head-main .use-main > div {
    position: static;
    transform: none;
}
header.head-main .centerBox {
    flex: 1;
    min-width: 0;
}
header.head-main .rightBox {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
header.head-main .rightBox .btn { margin-left: 0; }
header.head-main .use-main .location {
    font-size: var(--fs-heading);
    line-height: 2.6rem;
}
header.head-main .todayBox,
header.head-main .todayBox > * {display: block; text-align: left;}
header.head-main .todayBox > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
header.head-main .qrPill {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 17px;
    background-color: var(--colorWhite);
    color: var(--colorMain);
    font-size: var(--fs-caption);
    font-weight: 700;
    -webkit-tap-highlight-color: transparent;
}
header.head-main .qrPill:active { opacity: .55; }
header.head-main .qrPill .icon {
    width: 16px;
    height: 16px;
    background-color: var(--colorMain);
}
/* 360폭 등 좁은 화면: 날짜가 말줄임되지 않게 '내 QR' 을 아이콘만(34px 원형 버튼)으로.
   큰 글꼴 설정처럼 폭만으로 알 수 없는 경우는 main/index.html 이 날짜 잘림을 재서 .is-compact 를 붙인다. */
header.head-main.is-compact .qrPill { width: 34px; padding: 0; justify-content: center; }
header.head-main.is-compact .qrPill .label { display: none; }
@media only screen and (max-width: 374px) {
    header.head-main .qrPill { width: 34px; padding: 0; justify-content: center; }
    header.head-main .qrPill .label { display: none; }
}
header.head-main .todayStatus {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    font-weight: 500;
    color: var(--colorGray800);
}
header.head-main ~ section > .btnBox.pos-bottom {
    padding-bottom: 95px;
}
/* [2026-09-08] 상단바 버튼(뒤로가기 등) 터치 개선.
   아이콘 24px 이 곧 터치 영역이라 `<` 를 정확히 눌러야 했고(권장 최소 44px),
   누를 때 WebKit 기본 탭 하이라이트가 아이콘 주변에 사각형으로 보였다.
   보이는 크기는 그대로 두고 투명한 ::after 로 터치 영역만 넓힌다. */
header .use-main .btn {
    position: relative;
    -webkit-tap-highlight-color: transparent;
    width: 24px;
    height: 24px;
}
header .use-main .btn .icon{
    width: 100%;
    height: 100%;
    /* border-radius: 50%; */
    background-color: #000;
}
/* [2026-09-08] 뒤로가기 화살표 크기·정렬 교정.
   `icon-arrow.png` 은 24×45 세로형인데 24×24 박스에 `mask-size: contain` 이라
   높이에 맞춰 줄면서 **잉크가 12.8×24** 가 됐다. 그래서
   ⓐ 화살표가 작아 보이고
   ⓑ 좌우에 5.6px 씩 빈 공간이 생겨 잉크 좌측이 25.6px 에서 시작 —
      화면 좌측 기준선(20px)보다 안쪽으로 들어가 '틀어져' 보였다.
   박스를 화살표 비율(24:45)에 맞추고 키우면 잉크가 박스를 꽉 채워
   좌측이 기준선과 맞고 크기도 커진다. 터치 영역은 ::after(44px) 가 담당한다.
   leftBox 는 전 화면에서 버튼이 1개(뒤로가기)뿐임을 확인하고 스코프했다. */
header .use-main .leftBox .btn {
    /* [2026-09-08 2차] 15×28 로도 "아직 작다"는 확인이 와 한 단계 더 키운다.
       비율(24:45)은 유지하므로 잉크가 박스를 꽉 채우고 좌측 기준선(20px)도 그대로다. */
    width: 17px;
    height: 32px;
}
header.head-logo{
    position: unset;
    
    color: var(--colorWhite);
    text-align: center;
}
header.head-logo::before{
    z-index: 0;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% + 30px);
    background-color: var(--colorMain);
    background-image: url(../resources/bg-headGradient.png);
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
header.head-logo > .wrap {
    height: fit-content;
}
header.head-logo .logo{
    width: 80px;
    height: 80px;
    margin: 0 auto;

    background-image: url(../resources/sample/logo-symbol.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
header.head-logo .logo + .copy{
    font-weight: 600;
    margin-top: 20px;
}





nav {
    position: fixed;
    z-index: 10;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 20px;
}

nav > .wrap{
    position: relative;
    width: 100%;
    /* [2026-09-08] 라벨 추가로 60 → 68px. 아이콘 22 + 간격 3 + 글자 14 = 39px 를 담는다. */
    height: 68px;
}

nav .navItems{
    white-space: nowrap;
    /* 🔴 .navItem{height:100%} 인데 부모 ul 에 높이가 없어 auto 로 무너지고 있었다.
       버튼이 절대위치라 아이콘만 있을 땐 드러나지 않던 구멍이다. */
    height: 100%;
    /* [2026-09-08] inline-block + `width:20.5%` + `margin-left:-1%` 조합이
       첫 칸에도 음수 마진을 걸고 태그 사이 공백 노드까지 폭을 먹어,
       **줄 전체가 오른쪽으로 3.41px 밀려** 있었다(왼 여백 17.33 / 오른 13.91).
       그 결과 가운데 QR 버튼도 화면 중심에서 1.71px 벗어났다.
       flex 로 균등 분배하면 여백이 20.8/20.8 로 같아지고 오차가 0 이 된다. */
    display: flex;
}
nav .navItems::after,
nav .navItems::before{
    content: '';
    position: absolute;
    left: -20px;
    height: 100%;
    width: 30px;
    bottom: 0;
    background-color: var(--colorWhite);
}

nav .navItems::before{
    left: unset;
    right: -20px
}
nav .navItems .navItem {
    position: relative;
    vertical-align: bottom;
    background-color: var(--colorWhite);
    height: 100%;
    flex: 1;
}

nav .navItems .navItem .btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 100%;
    /* 🔴 노치를 그리는 :nth-child(3)::before/::after 가 z-index:1 에 흰 box-shadow 라
       양옆 칸의 라벨을 덮어 글자가 잘린다("프로그램"→"프로그"). 그 위로 올린다. */
    z-index: 2;
    /* [2026-09-08] 버튼이 칸 전체를 차지하게 되면서, 터치 시 WebKit 기본
       탭 하이라이트가 **칸만 한 회색 사각형**으로 보였다. 사각형은 없애고
       눌림 피드백은 투명도로 준다. */
    -webkit-tap-highlight-color: transparent;
}
nav .navItems .navItem .btn:active { opacity: .55; }
    nav .navItems .navItem.NOW .btn {opacity: 1;}

nav .navItems .navItem .btn .icon {
    width: 22px;
    height: 22px;
}
/* 비활성은 opacity 가 아니라 '색'으로 표현한다 — 흐린 파랑(--colorSub-blue @ .3)이
   비활성 신호로 읽히지 않았다. */
nav .navItems .navItem .btn .icon[class*="ic-"],
nav .navItems .navItem .btn .icon[class*="icM-"] {
    background-color: var(--colorNavIconOff);
}
nav .navItems .navItem .btn .label {
    font-size: 1.1rem;
    line-height: 1.4rem;
    font-weight: 500;
    color: var(--colorNavLabelOff);
    white-space: nowrap;
}
nav .navItems .navItem:nth-child(2) {    border-radius: 0 44px 0 0;}
nav .navItems .navItem:nth-child(3) {background-color: unset;}
nav .navItems .navItem:nth-child(4) {    border-radius: 44px 0 0 0;}

/* 🔴 2·4 번만 칸 중심에서 14px 씩 안쪽으로 밀려 있었다(칸 중심 125·269 vs 버튼 111·283).
   아이콘만 있을 땐 티가 안 났지만 라벨이 붙으면 어긋나 보인다. 칸 중심으로 되돌린다. */
nav .navItems .navItem:nth-child(2) .btn{ left: 50%; }
nav .navItems .navItem:nth-child(4) .btn{ left: 50%; }
nav .navItems .navItem:nth-child(3) .btn{
    /* QR 버튼은 라벨이 없고 비활성 상태도 없다 — 세로 묶음 규칙에서 제외한다. */
    flex-direction: unset;
    gap: unset;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transform: translateY(-23px);
    background-color: var(--colorMain);
    margin: 0 auto;
    display: block;
    position: relative;
    left: unset;
    top: unset;
    z-index: 2;

    display: none;
}

nav .navItems .navItem:nth-child(3) .btn[data-btn="goqr"]{display: block;}
/* QR 스캔 글리프는 버튼(60px)과 같은 좌표계의 SVG 라, 아이콘 박스를 버튼 크기로 맞춰
   디자인 원본의 위치·비율을 그대로 쓴다. 버튼 배경색은 --colorMain 이 그대로 담당. */
/* [2026-09-08] 스캔 화면의 refreshScan 버튼도 같은 QR 글리프를 쓰므로 함께 적용한다.
   버튼의 기능(다시 스캔)은 그대로 두고 아이콘만 통일한 것이다. */
nav .navItems .navItem:nth-child(3) .btn[data-btn="goqr"] .icon,
nav .navItems .navItem:nth-child(3) .btn[data-btn="refreshScan"] .icon,
nav .navItems .navItem:nth-child(3) .btn[data-btn="refreshCheck"] .icon{
    width: 60px;
    height: 60px;
}
nav .navItems .navItem:nth-child(3) .btn .icon{
    margin: 0 auto;
    display: block;
    opacity: 1;
}
nav .navItems .navItem:nth-child(3)::before,
nav .navItems .navItem:nth-child(3)::after{
    content: '';
    z-index: 1;
    position: absolute;
    bottom: 12px;
    width: 65%;
    height: calc(100% - 19px);
    background-color: transparent;
}

nav .navItems .navItem:nth-child(3)::before{
    left: -10.6%;
    border-radius: 0 0 0 100%;
    box-shadow: -10px 26px 0 10px var(--colorWhite);
}

nav .navItems .navItem:nth-child(3)::after{
    right: -10.8%;
    
    border-radius: 0 0 100% 0;
    box-shadow: 10px 26px 0 10px var(--colorWhite);

}

/* 활성 탭 — 아이콘·라벨 모두 --colorMain (디자이너 시안 값과 일치) */
body[data-location*="main"]    nav .navItem:nth-child(1) .btn .icon,
/* [2026-10-19] 큐 EY — 결제 내역·상세·취소(program-order-*)는 마이페이지 아래 화면인데 이름에 program 이 들어가 '프로그램' 이 켜졌다 */
body[data-location*="program"]:not([data-location^="program-order-"]) nav .navItem:nth-child(2) .btn .icon,
body[data-location*="my"]      nav .navItem:nth-child(4) .btn .icon,
body[data-location*="member"]  nav .navItem:nth-child(5) .btn .icon,
body[data-location^="program-order-"] nav .navItem:nth-child(5) .btn .icon{ background-color: var(--colorMain);}
body[data-location*="main"]    nav .navItem:nth-child(1) .btn .label,
body[data-location*="program"]:not([data-location^="program-order-"]) nav .navItem:nth-child(2) .btn .label,
body[data-location*="my"]      nav .navItem:nth-child(4) .btn .label,
body[data-location*="member"]  nav .navItem:nth-child(5) .btn .label,
body[data-location^="program-order-"] nav .navItem:nth-child(5) .btn .label{ color: var(--colorMain); font-weight: 600;}
/* [2026-09-08] `:not([data-location="qr-scan"])` 예외 제거.
   그 예외 때문에 qr-scan 에서는 일괄 숨김이 걸리지 않아, 조건 없이 display:block 인
   goqr 이 남고 refreshScan 까지 켜져 **60px 원형 버튼 두 개가 세로로 나란히** 나왔다.
   예외를 빼면 아래 상태별 규칙(특이도가 더 높다)이 각 화면에 맞는 버튼 하나만 켠다. */
body[data-location*="qr"] nav .navItem:nth-child(3) .btn{ display: none !important;}
body[data-location="qr-scan-log"] nav .navItem:nth-child(3) .btn[data-btn="goqr"]{ display: block !important;}
body[data-location="qr-scan"] nav .navItem:nth-child(3) .btn[data-btn="refreshScan"]{ display: block !important;}
body[data-location="qr-make"] nav .navItem:nth-child(3) .btn[data-btn="refreshCheck"]{ display: block !important;}






.noticeBox {
    padding: 8px 20px;
    border: 1px solid var(--colorGray200);
    border-left: unset; border-right: unset;
}
.noticeBox .noticeItem > *{

    display: inline-block;
    vertical-align: middle;
}
.noticeBox .noticeItem .icon{
    width: 22px;
    height: 22px;
    margin-right: 8px;
    background-color: var(--colorBlue);
}

.noticeBox .noticeItem h6 {
    line-height: 22px;
}



.topicBox {
    padding: 20px;
}
.topicBox .topic{
    font-weight: 600;
}
.topicBox .info{
    opacity: .6;
}
.topicBox .moreBtn {
    position: absolute;
    top: 23px;
    right: -3px;
    width: 30px;
    height: 30px;
}

.topicBox .moreBtn .icon{
    mask-size: auto 20px ;
    transition: all .3s;
    transform: rotate(-90deg);
    background-color: var(--colorBlack);
}
.topicBox .moreBtn.SHOW .icon{
    transform: rotate(-270deg);
}






.tabBox .tabList {
    white-space: nowrap;
    padding: 0 10px;
}
.tabBox .tabList .tabItem {
    display: inline-block;
    vertical-align: bottom;
    padding: 0 2px;
    margin-left: -1px;
}
.tabBox .tabList.col3 .tabItem{width: 33%;}
.tabBox .tabList.col2 .tabItem{width: 50%;}
.tabBox .tabList .tabItem.NOW .btn{
    font-weight: 800;
    opacity: 1;
}

.tabBox .tabList.type-bar {
    border-bottom: 1px solid #eee;
}
.tabBox .tabList.type-bar .tabItem {
    margin-left: -1px;
}

.tabBox .tabList.type-bar.col-2 .tabItem{
    width: 50%;
    padding: 0;
}
.tabBox .tabList.type-bar .tabItem:first-child {margin-left: unset;}

.tabBox .tabList.type-bar .tabItem .btn{
    width: 100%;
    position: relative;
    height: 40px;
    line-height: 38px;
    /* [2026-10-18] 비활성 탭: 투명도 .3(흰 바탕 대비 약 2:1) → 회색 글자 #767676(4.54:1). 활성은 검정 + 파란 밑줄(아래) */
    opacity: 1;
    color: var(--colorNavLabelOff);
    font-weight: 600;
    padding-left: 10px;
    padding-right: 10px;
}
.tabBox .tabList.type-bar .tabItem.NOW .btn{
    opacity: 1;
    color: var(--colorBlack);
}
.tabBox .tabList.type-bar .tabItem.NOW .btn::before{
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background-color: var(--colorBlue);
}

.tabBox .tabList.type-tag{
    padding: 0 20px 16px;
}
.tabBox .tabList.type-tag .tabItem {
    vertical-align: middle;
    padding: unset;
    margin-right: 12px;
}
.tabBox .tabList.type-tag .tabItem .btn{
    border-radius: 16px;
    padding: 6px 0;
    opacity: .4;
}
.tabBox .tabList.type-tag .tabItem.NOW .btn{
    background-color: var(--colorBlue);
    color: var(--colorWhite);
    opacity: 1;
    padding: 6px 12px;
    font-weight: 600;
}