@charset "utf-8";

/* 글꼴(#162) — 회원·매니저 앱 공통.
 * - font-display:swap: 글꼴이 오기 전에도 글자를 시스템 글꼴로 먼저 그린다(전에는 최대 3초 글자가 안 보였다).
 * - *.subset.woff2: 한글은 KS X 1001 2,350자만 둔 판(Pretendard 1.3.9, 굵기마다 약 77만 → 31만 B).
 *   그 밖의 드문 글자(똠·햏 등)는 그 글자만 시스템 글꼴로 나온다. 라틴·기호는 전체판과 같다.
 * - 서브셋 파일은 1년 immutable 로 나간다(docker/nginx.conf) — 내용을 바꾸면 **파일 이름을 바꿀 것**.
 * CRM(crm-polish.css)·키오스크 안내 화면은 전체판을 그대로 쓴다. */
@font-face {
    font-family:'Pretendard';
    src:url('/font/Pretendard-Light.subset.woff2') format('woff2');
    font-weight:300;
    font-style:normal;
    font-display:swap;
}

@font-face {
    font-family:'Pretendard';
    src:url('/font/Pretendard-Regular.subset.woff2') format('woff2');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

@font-face {
    font-family:'Pretendard';
    src:url('/font/Pretendard-Medium.subset.woff2') format('woff2');
    font-weight:500;
    font-style:normal;
    font-display:swap;
}

@font-face {
    font-family:'Pretendard';
    src:url('/font/Pretendard-SemiBold.subset.woff2') format('woff2');
    font-weight:600;
    font-style:normal;
    font-display:swap;
}

@font-face {
    font-family:'Pretendard';
    src:url('/font/Pretendard-Bold.subset.woff2') format('woff2');
    font-weight:700;
    font-style:normal;
    font-display:swap;
}


/* 초기화 */
/* ⚠️ text-size-adjust 는 **시스템 글꼴 배율을 못 막는다.** 종전 주석이 "차단"이라고 적어 두어
     실제로 그 오해 때문에 한 번 지나쳤다 — 2026-09-01 "앱 화면이 다 깨져있다"(기기 글꼴을
     키운 폰에서 홈 4열 그리드·탭·하단 탭바가 화면 밖으로 잘려 나갔다).
   이 속성이 끄는 건 크롬의 **자동 확대(font boosting)** 뿐이다. 안드로이드 '설정 > 디스플레이 >
     글자 크기'를 키우면 WebView 가 그 배율을 computed font-size 에 곱하는데, 그건 CSS 로 못 끈다.
   배율 쪽 대응은 assets/js/common/font-scale-cap.js 가 맡는다 — 배율을 재서 상한(125%)을 넘는
     만큼만 되돌린 비율을 `--fz-cap` 으로 내려놓고, 좁은 칸을 가진 컴포넌트의 font-size 가
     `calc(Npx * var(--fz-cap, 1))` 로 그 값을 곱해 쓴다. */
html{scroll-behavior: smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
/* font-size 는 0.75em(=기기 기본 글꼴 배율 의존) 대신 12px 고정. 기본 16px 기기에서는 계산값이 동일해 시각적 변화 없음 */
/* ⚠️ overflow-x:hidden — 가로로 넘친 내용은 스크롤도 없이 **그냥 잘린다**. 넘치는 것 자체를
     막아야지 이걸로 가리는 게 아니다. 칸이 글자에 밀리지 않게 하는 건 flex 쪽 `min-width:0` 과
     그리드 쪽 `minmax(0,1fr)` 이 맡는다(둘 다 정상 배율에서는 계산 결과가 종전과 같다). */
body {margin:0;padding:0;font-size:12px;font-family:'Pretendard', dotum, sans-serif;background:#fff; overflow-x:hidden; overflow:auto; }
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Pretendard', dotum, sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:'Pretendard', dotum, sans-serif;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'Pretendard', dotum, sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*, :after, :before {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
    -webkit-transition:all 0.30s ease-in-out;
    -moz-transition:all 0.30s ease-in-out;
    -ms-transition:all 0.30s ease-in-out;
    -o-transition:all 0.30s ease-in-out;
    outline:none;
}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
    -webkit-box-shadow:0 0 5px #9ed4ff;
    -moz-box-shadow:0 0 5px #9ed4ff;
    box-shadow:0 0 5px #9ed4ff;
    border:1px solid #558ab7 !important;
}


/* 
	center box style 
*/
.inner__box{position:relative; width:100%; margin: 0 auto;}
.inner__full{position:relative; width:100%; margin: 0 auto;}

.inner__cen768{position:relative; width:90%; max-width:768px; margin: 0 auto;}
.inner__cen860{position:relative; width:90%; max-width:860px; margin: 0 auto;}
.inner__cen980{position:relative; width:90%; max-width:980px; margin: 0 auto;}
.inner__cen1024{position:relative; width:100%; max-width:480px; margin: 0 auto; padding:17px 16px;}
.inner__cen1320{position:relative; width:90%; max-width:1320px; margin: 0 auto;}
.inner__cen1440{position:relative; width:90%; max-width:1440px; margin: 0 auto;}
.inner__cen1420{position:relative; width:90%; max-width:1420px; margin: 0 auto;}
.inner__cen1590{position:relative; width:90%; max-width:1590px; margin: 0 auto;}
.inner__cen1670{position:relative; width:90%; max-width:1670px; margin: 0 auto;}
.inner__cen1750{position:relative; width:95%; max-width:1750px; margin: 0 auto;}
.inner__cen1800{position:relative; width:90%; max-width:1800px; margin: 0 auto;}




.m20{margin:20px 0;}
.mt08{margin-top: 8px;}
.mt16{margin-top: 16px;}
.mb08{margin-bottom: 8px;}
.mb12{margin-bottom: 12px;}
.mb16{margin-bottom: 16px;}
.mb20{margin-bottom: 20px;}
.flex__style{display:flex; align-items:center;}
.flex__style.flex__style02{justify-content: space-between;}
.ta__center{text-align: center;}
/******************************************************************************
******************************************************************************* 공통 {
*******************************************************************************/


body{letter-spacing:-0.2px;}
#wrap{max-width:480px; width:100%; margin:0 auto;}
#wrap .container{overflow-y:auto; overflow-x:hidden; width:100%; min-height:100vh; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); position:relative;}
#header{height:56px; line-height: 56px;}
#header .hd__top__wr{display:flex; justify-content: space-between; position:relative; }

.logo{display:block; text-align: center; margin: 20px 0 0;}
.logo > img{max-width:84px;}

/* 공통 */
.contents__wr{width:95%; max-width:480px; margin:20px auto 0; position:relative;}
.input__box__wr .tit{font-size:14px; color:#1C1C1D; font-weight: 500; margin-bottom: 8px;}
.input__box__wr .input__wr{width:100%; height:50px; border:1px solid #E5E5EC; line-height: 50px; border-radius:8px; padding:0 8px; font-size:16px; font-weight: 400;}
.container .w50{width:50%;}
.contents__wr .flex__w50{width:calc(50% - 4px);}
.input__box__wr input::placeholder{color:#7E8389; font-weight: 400; font-size:16px;}
.login__btn__wr{padding:10px 0; width:100%; max-width: 480px; margin-top: 40px;}
.login__btn__wr .login__btn{margin:0 auto;}
.login__btn{display:block; max-width:480px; width:100%; height:52px; line-height: 52px; background:#F1F1F5; text-align: center; color:#9BA3AF; font-weight:600; font-size:16px; border-radius:12px;}
.login__btn__c{background:#2A66D8; color:#fff;}
.login__info__wr{justify-content: center;}
.login__info__wr li a{font-size:14px; color:#7E8389; font-weight: 400; display:block;}
.login__info__wr span{background:#E5E5EC; display:block; margin:0 8px; width:1px; height:20px;}

/* 좁은 화면(360px 기기는 가용폭이 320px 뿐)에서 글자 크기만 줄이고(clamp), 넘치면 말줄임 처리.
   word-break:keep-all 은 전역 p{word-break:break-all} 이 한글을 아무 데서나 끊는 것을 이 셀렉터에서만 무력화 */
.login__title__wr{min-width:0;} /* flex 컨테이너(.login__title__boxwr.flex__style) 안에서 축소 허용 → 말줄임이 먹는다 */
/* 공통 타이틀: 좁은 화면에서 글자 크기만 줄이고 줄바꿈은 허용한다.
   word-break:keep-all 로 전역 p{word-break:break-all}(한글을 아무 데서나 끊음)을 이 셀렉터에서만 무력화하고,
   한 단어가 통째로 안 들어가는 예외만 overflow-wrap 으로 흘린다.
   ★ nowrap+ellipsis 를 여기 걸면 안 된다 — 이 셀렉터는 이용권 상세/구매 상세의 상품명 자리이기도 한데
     상품명은 운영자 자유입력(운영 실측 최장 23자)이라 1줄로 잘리고, 모바일엔 hover 가 없어
     잘린 글자를 볼 방법이 아예 사라진다. 1줄 고정이 필요한 건 아래 #user_name 뿐이다. */
.login__title__wr .title{color:#1C1C1D; font-size:20px; font-size:clamp(16px, 5.2vw, 20px); font-weight: 700; margin-bottom: 8px; line-height: 140%; word-break:keep-all; overflow-wrap:anywhere; min-width:0;}
/* (홈·이용내역의 "홍길동님 (지점명)" 1줄 고정 규칙이 있던 자리.
   2026-08-30 헤더 1안으로 그 칸이 `.app__header__place`(단지명)/`.app__header__who`(동호·이름)로
   갈리면서 #user_name 자체가 사라졌다. 1줄 고정은 그 두 셀렉터가 각자 갖고 있다.) */
.login__title__wr .text{color:#7E8389; font-size:14px; font-weight: 500; line-height: 1.6;}
.login__title__wr .tx{color:#7E8389; font-size:14px; font-weight: 600; margin-bottom: 6px;}

.contents__wr .sub__text{color:#7E8389; font-size:14px; font-weight: 400;}

/* 회원가*/
.agency__input{background: url(images/down_icon.png) no-repeat;background-position: 99% 50%;
    padding: 0 16px;cursor: pointer;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
.input__style02 .circle{display:block; background:#000; width:8px; height:8px; border-radius:50%; margin-right: 8px;}
.input__style02 .circle:last-child{margin-right: 0;}
.input__style02 .input__wr.input__wr01{width:42px; margin-right: 8px; text-align: center;}
.hyphen{color:#7E8389; font-size:14px; font-weight: 400; margin:0 8px;}

/* ID,PW 찾기 — 이 탭줄(.find__box__wr)은 홈·이용권 구매·구매내역·이용내역·예약 5화면이 함께 쓴다 */
.find__box__wr{height:48px; border-radius:8px; background:#F3F4F6; padding:4px;}
/* ★min-width:0 — 기기 글꼴 배율(안드로이드 설정 > 디스플레이 > 글자 크기)을 키우면 WebView 가
     font-size 에 그 배율을 곱한다. `html{text-size-adjust:100%}`(위 41행)는 크롬의 자동 확대만
     막을 뿐 이 배율은 못 막는다.
   그때 `li` 는 flex 아이템이라 기본 min-width:auto 가 글자 폭만큼 칸을 밀어내고, w50(50%) 이
     무시되면서 ul 이 화면 밖으로 흘러 오른쪽 탭이 잘렸다 — 실측 175% 배율에서
     '구매내역 및 해지'가 왼쪽 탭을 덮고 '지' 한 글자가 아래 안내문 위에 겹쳐 찍혔다.
   min-width:0 으로 50% 를 지키고 넘치는 글자는 말줄임으로 접는다.
   ⚠️ 정상 배율에서는 글자가 칸 안에 들어가므로 보이는 화면이 달라지지 않는다(무회귀). */
.find__box__wr li{text-align: center; min-width:0; }
/* font-size 의 `* var(--fz-cap, 1)` — 기기 글꼴 배율이 125% 를 넘으면 font-scale-cap.js 가
   되돌릴 비율을 내려놓는다(그 이상에서는 이 탭 라벨이 말줄임으로 잘린다 — 실측 155%).
   배율이 정상인 기기에서는 변수가 없어 폴백 1 이 걸리므로 16px 그대로다(무회귀). */
.find__box__wr li a{height:40px; line-height: 40px; color:#1C1C1D; font-size:calc(16px * var(--fz-cap, 1)); font-weight: 500; width:100%; border-radius:8px; display:block;
                    padding:0 6px; box-sizing:border-box; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.find__box__wr li.on a{font-weight: 600; background:#fff; border:1px solid #E5E5EC;}

/* 내 이용권 */
.hd__title{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:18px; color:#1C1C1D; font-weight: 600;}

/* 하단 메뉴바 */
/* padding-bottom env(): 안드로이드 제스처바만큼 여유 확보. env() 미지원/미적용 환경에서는 0 이라 무해 */
.fixed__mnav__wr{background:#fff; position:fixed; width:100%; bottom:0; left:50%; transform:translateX(-50%); max-width:480px; border-top: 1px solid #E5E5EC; padding-bottom: env(safe-area-inset-bottom, 0px);}
.fixed__mnav__wr ul{padding:10px 0;}
/* ★min-width:0 — 위 .find__box__wr 과 같은 이유다. 기기 글꼴 배율을 키우면 `li` 의 기본
   min-width:auto 가 라벨 폭만큼 칸을 밀어내 5탭 합이 100% 를 넘고, ul 이 화면 밖으로 흐른다
   (실측 175% 배율: '이용권 구매'가 '이용권 구 / 매' 2줄이 되면서 [예약][게시판][MY]가
    화면 오른쪽으로 밀려나 아예 보이지 않았다). 20% 를 지키게 하고 라벨은 아래에서 말줄임. */
.fixed__mnav__wr ul li{width:20%; text-align: center; min-width:0;}
/* 아이콘·글자의 색을 <a> 한 곳에서 정하고 둘 다 currentColor 로 물려받는다.
   ★ 종전에는 아이콘이 외부 SVG 파일(<img src>)이라 CSS 로 색을 못 바꿨고, 그래서
     선택한 탭도 아이콘은 #767676 회색 그대로였다("선택했는데 계속 어둡다").
     지금은 app_tab_icon() 이 인라인 <svg fill="currentColor"> 를 뿌린다 —
     활성 색을 바꾸려면 아래 `a.on` 한 줄만 고치면 아이콘과 글자가 함께 따라온다.
   ★ 활성색은 브랜드 남색(#2A66D8)보다 한 단계 밝은 파랑이다. 24px 실루엣에서는
     진한 남색이 검게 읽혀 '켜졌다'는 느낌이 나지 않는다. */
.fixed__mnav__wr ul li a{ display:block; color:#9AA1AC; }
.fixed__mnav__wr ul li a.on{ color:#3B82F6; }
.fixed__mnav__wr ul li a > .tabbar__ic{ display:block; margin:0 auto; width:24px; height:24px; }
/* color:inherit — 여기에 색을 직접 쓰면 위 `a.on` 이 글자에는 안 먹는다
   ★말줄임 — 글꼴 배율이 커져도 탭 높이를 늘리지 않고 한 줄로 접는다. 줄바꿈을 허용하면
     탭바가 두 줄로 두꺼워지면서 화면들이 각자 잡아 둔 padding-bottom 을 넘어 본문을 가린다.
     전역 `p{word-break:break-all}`(58행)보다 white-space 가 우선한다. */
.fixed__mnav__wr ul li a > p{color:inherit; font-size:calc(10px * var(--fz-cap, 1)); font-weight: 500; margin-top: 4px;
                             white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* 헤더 우측 [MY] 버튼 (app_chrome_helper.php 의 mypage_button()).
   사람 실루엣 + 'MY' 글자가 기본이고, 얼굴 사진을 등록한 회원은 mypage-button.js 가
   .hd-my__ph 로 갈아끼운다. 색은 tone 으로만 갈린다 — light = 파란 헤더 위 흰색. */
/* ★가로 배치(아이콘 옆에 글자)다. 세로 2단으로 쌓으면 높이가 34px 가 되는데,
   파란 헤더는 `.sub__header{height:56px}` 에 `.inner__cen1024{padding:17px}` 라
   콘텐츠에 허용된 높이가 22px 뿐이라 'MY' 글자가 헤더 아래로 잘려 나갔다(실측).
   가로로 두면 22px 라 이웃한 알림 벨(28px)보다도 작아 안전하다.
   ⚠️ 이 헤더는 예전부터 벨이 3.8px 삐져나오고 있었다(padding 17px + 56px 콘텐츠 = 90px > 56px).
      매니저앱까지 같은 `.sub__header` 를 쓰므로 그 정렬은 여기서 건드리지 않는다. */
.hd-my{display:inline-flex; align-items:center; gap:3px; line-height:1;
       color:#767676; text-decoration:none;}
.hd-my--light{color:#fff;}
.hd-my__fig{display:block; width:22px; height:22px; flex:0 0 auto;}
.hd-my__fig > .tabbar__ic{display:block; width:22px; height:22px;}
.hd-my__ph{width:22px; height:22px; border-radius:50%; object-fit:cover;}
.hd-my__tx{font-size:11px; font-weight:700; letter-spacing:.02em;}

.detail__text__wr ul > li{justify-content: space-between; align-items: flex-start; margin-bottom: 12px;}
.detail__text__wr ul > li:last-child{margin-bottom: 0;}
.detail__text__wr ul > li .tx01{line-height: 24px; font-size:15px; color:#7E8389; font-weight: 500;}
/* word-break: 한국어 기본 줄바꿈은 글자 단위라 '중도 환불'이 '중 / 도 환불'로 쪼개진다.
   이 칸에는 상품 설명이 아니라 해지 조건·등록 경로 같은 **문장**이 들어가므로 어절(띄어쓰기)에서
   끊어야 읽힌다. keep-all 만 두면 띄어쓰기 없는 긴 값(상품명·영문·URL)이 칸을 넘치므로
   overflow-wrap 으로 그때만 강제로 끊는다.
   ★min-width:0 이 함께 있어야 한다 — 이 <p> 는 flex 아이템(li.flex__style)이라 기본 min-width:auto 가
     '내용의 최소폭' 아래로 줄어드는 것을 막는데, overflow-wrap:break-word 는 그 최소폭을 낮추지 못한다.
     빼면 '가족사우나30회권프리미엄패키지…' 처럼 띄어쓰기가 없는 값이 412px 화면에서 칸 밖으로 밀린다
     (실측: 넘침 16px → 0px). overflow-wrap:anywhere 로도 같은 결과지만 구형 iOS(<15.4)에서는 무시된다. */
.detail__text__wr ul > li .tx02{line-height: 24px; font-size:15px; color:#1C1C1D; font-weight: 500; text-align: right; word-break: keep-all; overflow-wrap: break-word; min-width: 0;}

/* ⚠️ 이 규칙은 **매니저앱 10개 화면**(manager_web/access·business·cctv·customer·customer_detail·
   facility·instructor·leave·parking·settings)이 함께 쓴다. 사용자앱 홈/이용내역은 2026-08-30
   헤더 1안으로 옮겨가면서 이 id 를 떼어냈다(아래 `.app__header`). 여기를 흰색으로 바꾸면
   매니저앱 헤더의 흰 글씨·흰 로고가 흰 배경 위에 놓여 통째로 사라진다. */
#m__header{background:#2A66D8;}
/* ★매니저앱 헤더 콘텐츠를 56px 안에 가둔다 (2026-09-01).
   `.sub__header{line-height:56px}` 이 자식에게 상속돼 콘텐츠 높이가 56px 이 되고,
   `.inner__cen1024{padding:17px}` 와 합쳐 **90px** → 헤더(height:56px) 밖으로 34px 이 나가
   아래 흰 카드(.m__login__title__boxwr)에 깔렸다. 지점명·로그아웃이 파란 띠 하단에 반쯤
   걸쳐 보이던 증상이 이것이다(로고 <img> 는 20px 라 17+20+17=54 로 우연히 맞아 있었다).
   ⚠️ `.sub__header` 를 직접 고치지 않는다 — 사용자앱 서브 화면들이 같은 클래스를 쓴다.
      `#m__header` 는 매니저앱 10개 화면 전용이라 여기서만 잡는다. */
#m__header .inner__cen1024{height:56px; padding-top:0; padding-bottom:0; box-sizing:border-box; align-items:center;}
#m__header .right__mnav__wr{line-height:1;}
.sub__header{height:56px; line-height: 56px;}
.sub__header .inner__cen1024{display:flex; justify-content: space-between;}
/* align-items:center — [MY] 버튼은 아이콘 + 글자 2줄이라 알림 벨(1줄)보다 키가 크다.
   기준선 정렬로 두면 벨만 위로 떠서 헤더가 삐뚤어 보인다. */
.sub__header .right__mnav__wr{display:flex; gap:12px; align-items:center;}

/* ── 사용자앱 홈 계열 상단 헤더 (헤더 1안 · 아파트명 단독형, 2026-08-30) ──────────────
   적용 화면: 홈(main.php) · 이용내역(use_history.php).
   마크업 단일 소스는 templates/user_web/app_header.php, 값은 common/app-header.js.

   ★ `.sub__header` / `#m__header` 를 쓰지 않는다 — 둘 다 매니저앱과 공유하는 선택자이고,
     그쪽은 파란 배경 · 한 줄(height:56px) 헤더다. 이 헤더는 흰 배경 · 2줄이라 높이가 다르다. */
.app__header{background:#fff;}
.app__header .inner__cen1024{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 16px 12px;}
/* min-width:0 — flex 아이템의 기본 min-width:auto 를 풀어야 아래 말줄임이 먹는다.
   단지명은 운영자 자유입력이라 길이 상한이 없다. */
.app__header__id{flex:1 1 auto; min-width:0;}
/* 1줄: 단지(지점)명. 2줄로 접히면 아래 메뉴 그리드가 통째로 밀려나므로 1줄 고정 + 말줄임.
   word-break:normal — 전역 p{word-break:break-all} 이 한글을 아무 데서나 끊는 것을 막는다
   (nowrap 과 함께 쓰면 어차피 안 접히지만, 규칙을 명시해 둔다). */
.app__header__place{font-size:20px; font-weight:700; color:#1C1C1D; line-height:1.35;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-break:normal;}
/* 2줄: "999동 999호 김소담님". 하이링크 회원은 동/호가 없어 이름만 들어온다. */
.app__header__who{margin-top:2px; font-size:13px; font-weight:500; color:#7E8389; line-height:1.5;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-break:normal;}
/* 아이콘은 첫 줄(단지명)에 맞춘다. 부모가 align-items:flex-start 인 이유가 이것 —
   center 로 두면 2줄 높이의 한가운데로 내려가 단지명보다 아래에 떠 보인다. */
.app__header .right__mnav__wr{flex:0 0 auto; display:flex; align-items:center; gap:12px; padding-top:1px;}
/* line-height:0 — <img> 아래 인라인 여백(baseline gap)을 없애야 벨과 [MY] 의 높이가 맞는다. */
.app__header #noti_bell{position:relative; display:inline-block; line-height:0;}
/* ★ 기본 숨김이 **CSS** 로 옮겨왔다. 켜는 쪽(app-header.js)은 반드시 `.is-on` 클래스로 켤 것 —
   종전처럼 `style.display=''` 로 켜면 인라인 값만 지워지고 이 none 이 그대로 이긴다. */
.app__header #noti_badge{display:none; position:absolute; top:-4px; right:-4px; min-width:16px; height:16px;
    padding:0 4px; box-sizing:border-box; background:#FF3B30; color:#fff; font-size:10px;
    line-height:16px; border-radius:8px; text-align:center; font-weight:600;}
.app__header #noti_badge.is-on{display:block;}

/* 하단 고정 탭바에 콘텐츠가 가리는 문제. 첫 줄은 env() 미지원 환경 폴백 */
#wrap #main__container{height:initial; padding:0 0 100px; padding:0 0 calc(100px + env(safe-area-inset-bottom, 0px));}
.con__tit__wr{margin-bottom: 16px; display:flex; justify-content: space-between; align-items: center;}
.con__tit__wr .sub__tit{font-size:18px; color:#1C1C1D; font-weight:600;}
.con__tit__wr .sub__tit span{color:#2A66D8;}
.con__tit__wr .more__btn{color:#7E8389; font-size:12px; font-weight: 500; display:flex; align-items:center; gap:4px;}
#main__container{background: linear-gradient(to bottom, #fff, #F1F1F5);}
.main__contents__wr .list__box{background:#fff; box-shadow: 0px 1px 4px 0px rgba(20, 30, 50, 0.05); border-radius:16px; padding:20px; overflow:hidden;}
.con__box img{width:100%;}
.main__contents__wr00 .con__box img{box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.16);}
.m__login__title__boxwr.login__title__boxwr{background:#2A66D8;}
.m__login__title__boxwr.login__title__boxwr .login__title__wr{background:#fff;width:100%; margin:0 auto; border-radius:20px 20px 0 0; padding:20px 0 0;}
.m__login__title__boxwr.login__title__boxwr .login__title__wr p{padding:0 20px;}

.con__box > ul > li{}
.con__box > ul > li > a{position:relative; display:block; padding:16px; border-radius:8px; background:#F8F8FA; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04); margin-bottom: 8px;}
.con__box > ul > li:last-child{margin-bottom: 0;}
.con__box .subject{font-size:15px; font-weight: 600; color:#1C1C1D;  margin-bottom:4px; line-height: 21px;}
.con__box .time__tx{color:#7E8389; font-size:14px; font-weight: 500; line-height: 20px;}
.main__color01{color:#2A66D8; font-weight: 600;}

.ticket__detail__wr .login__title__boxwr{align-items:flex-start; justify-content: space-between;}
.tiket__info__boxwr .tx{font-size:16px; font-weight: 500; color:#7E8389;}
.ticket__detail__wr .flex__style02 a{height:48px; line-height: 48px; background:#fff; border-radius:8px; border:1px solid #E5E5EC; color:#1C1C1D; font-weight: 600; font-size:16px; text-align: center;}
.ticket__detail__wr .flex__style02 a.on{border:1px solid #2A66D8; background:#2A66D8; color:#fff;}
.sub__tx01{color:#9BA3AF; font-size:13px; font-weight: 500; text-align: center;}
.sub__tx02{width:100%; text-align: center; font-size:14px; font-weight: 600; display:inline-block; color:#7E8389;}
.sub__tx02 > span{border-bottom: 1px solid #7E8389; height:21px; line-height: 21px; display:inline-block;}
.tab__btn__wr a{width:33%; height:62px;line-height: 62px; text-align: center; display:block; color:#9BA3AF; font-size:16px; font-weight: 600;}
.tab__btn__wr a.on{color:#1C1C1D; border-bottom: 2px solid #1c1c1d;}


#buy__history__wr01 .subject{font-size:14px; line-height: 20px;}
#buy__history__wr01 .time__tx{font-size:12px; display:flex; align-items:center; gap:4px; line-height: 17px;}
#buy__history__wr01 .time__tx > img{width:16px;}
.con__box .live{font-size:12px; color:#0059FF; margin-bottom: 4px; font-weight: 500; display:inline-block; border-radius:4px; background:#EAF0FC; text-align: center; height:24px; line-height: 24px; padding:0 8px;}
.con__box .live__off{font-size:12px; color:#9BA3AF; margin-bottom: 4px; font-weight: 500; display:inline-block; border-radius:4px; background:#F1F1F5; text-align: center; height:24px; line-height: 24px; padding:0 8px;}

.con__box .price{font-size:16px; color:#1c1c1d; font-weight: 600; line-height: 22px; margin-bottom: 12px;}
#buy__history__wr01 .con__box > ul > li > a{background:#fff; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);}
#buy__history__wr00 .login__title__wr .title{margin-bottom: 0; font-size:24px;}

.ticket__season__wr .login__title__wr > img{margin-bottom: 16px;}
.ticket__season__wr .login__title__wr .text{font-size:16px; line-height: 1.38;}

.key__number__box{margin-top: 24px; background:#F8F8FA; padding:16px 0; border-radius:8px;  text-align: center;}
.key__number__box .tx01{color:#7E8389; font-size:14px; font-weight: 500; line-height: 20px; margin-bottom: 4px;}
.key__number__box .tx02{color:#1C1C1D; font-size:24px; line-height: 34px; font-weight: 700;}

.right__img__box{position:absolute; top:16px; right:16px; overflow:hidden; border-radius:8px; width:56px; height:56px;}
.right__img__box > img{width:100%; height:100%; object-fit:cover;}




.login__btn.active{background:#2A66D8; color:#fff;}