/* ========================================
   ParkPlay App - Contents Stylesheet
   모든 페이지별 스타일 통합
   생성일: 2026-02-10
   ======================================== */

/* --- [유틸리티] 공통 헬퍼 클래스 --- */
.hidden {
    display: none !important;
}

/* --- [유틸리티] 이미지 로드 실패 placeholder --- */
img[src*="no-image.svg"] {
    object-fit: contain;
    background: var(--bg-sub);
    border-radius: 8px;
}

.text-error {
    color: var(--error, #D32F2F);
}

.text-success {
    color: var(--success, #4CAF50);
}

.text-warning {
    color: var(--warning, #FF5722);
}

/* --- [메인] appMain (Figma 2154:2410 '02. 홈' 리스킨, 2026-07-22) --- */

/* 홈 컨테이너 — 섹션 간격 20px(디자인 gap), 좌우 여백은 섹션별 관리(히어로/딜 카드는 풀블리드).
   상단 여백 없음: .app-header 가 in-flow sticky 로 제 높이를 차지한다 (LayoutStyle.css §5·§6) */
.home-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* 콘텐츠 구역은 하단 탭 위에서 끝난다 — --footer-total 을 더하면 탭 높이만큼 죽은 간격이 생긴다 */
    padding: 0 0 24px;
}

/* 홈 헤더 — 캔버스톤 배경 + 워드마크 + 알림 벨 (디자인 2210:3420) */
.home-header {
    background: var(--bg-color);
    box-shadow: none;
    border-bottom: 1px solid var(--bg-secondary);
}
.home-header .header-content {
    padding: 0 20px;
}
.home-header-logo-img {
    display: block;
    height: 24px;
    width: auto;
}
.home-header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}
.home-header .notification-btn {
    width: auto;
    height: auto;
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
}
.home-header .notification-btn img {
    display: block;
    width: 24px;
    height: 24px;
}

/* 헤더 신규 알림 점 — SVG 에 박제됐던 녹색 원을 마크업으로 끌어낸 것.
   기본은 비표시, 신규가 있을 때만 .is-new 로 주황 점을 깜빡인다(플랜 §6 D1).
   좌표는 삭제한 SVG 녹색 원 중심(18.3,4.7)+버튼 padding 4px 에서 산출. */
.hdr-dot {
    display: none;
    position: absolute;
    top: 4px;
    right: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bg-color);
    background: var(--warning);
}
.hdr-dot.is-new {
    display: block;
    animation: hdr-dot-blink 1.2s ease-in-out infinite;
}
@keyframes hdr-dot-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* 히어로 배너 — 풀블리드 그린 + 마스코트, 하단만 라운드 (디자인 2154:2415~2421) */
.home-hero { }
.home-hero-swiper {
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}
.home-hero-banner {
    display: block;
    position: relative;
    /* 시안 실측(2154:2415 그룹 375x240 = 배너 200 + 날씨카드) → 배너는 375x200.
       비율로 고정하는 이유: 높이를 200px 로 못 박으면 기기 폭(320~430)마다 컨테이너 비율이
       달라져 object-fit:cover 가 서로 다르게 잘라낸다 — 같은 배너가 기기마다 다른 그림이 된다.
       15/8 은 375 폭에서 정확히 200px 이므로 종전 높이를 되돌리면서 비율은 전 기기 동일하다
       (320 → 171 · 390 → 208 · 430 → 229). 3/1 이던 값은 375 폭에서 125px 로 시안보다 75px 낮았다. */
    aspect-ratio: 15 / 8;
    height: auto;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    background: var(--hero-bg, var(--primary-color));
    text-decoration: none;
    color: #FEFEFE;
}
/* 배너 이미지 오버레이 (DB 배너용) */
.home-hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
/* 기본(플레이스홀더) 배너 마스코트 — 디자인 원좌표(375 기준 x145/w277)를 비율 환산 */
.home-hero-mascot {
    position: absolute;
    top: -1px;
    left: auto;
    right: 2%;
    width: auto;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.home-hero-content,
.home-hero-pagination { position: relative; z-index: 1; }
.home-hero-content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding: 0 30px;
}
.home-hero-tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.95);
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 6px;
}
.home-hero-title {
    font-size: clamp(15px, 4.6vw, 20px);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    color: inherit;
    margin: 0;
    /* 마스코트가 높이기준으로 바뀌어 폭 236→107px(390 기준)로 줄었다 — 그 여백을 회수한다.
       마스코트 좌단 = W(0.98 - 1/3) = 0.6467W, 텍스트 우단 = 30 + 0.65(W-60) → 전 폭에서 약 8px 이격. */
    max-width: 65%;
    /* 줄수 상한 + 말줄임표. 3:1 로 박스가 낮아져 시드 배너의 긴 제목이 실제로 걸린다
       (QA 실측: 4개 폭 전부 마지막 줄이 통째로 사라짐). max-height 로만 자르면 문장이
       예고 없이 끊겨 '깨진 화면' 으로 읽히므로 line-clamp 으로 '…' 를 남긴다.
       line-clamp 은 flex 자식이면 blockify 돼 무효다 — 그래서 위 .home-hero-content 를
       flex 가 아닌 블록 흐름(transform 세로중앙)으로 두었다. 둘은 한 세트다. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-hero-sub {
    font-size: clamp(11px, 3.3vw, 14px);
    font-weight: 400;
    line-height: 1.2;
    margin-top: 8px;
    max-width: 65%;
    /* 제목과 같은 이유로 1줄 + 말줄임표 */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-hero-pagination {
    position: absolute !important;
    bottom: 10px !important;
    left: 30px !important;
    width: auto !important;
    display: flex;
    gap: 5px;
}
.home-hero-pagination .swiper-pagination-bullet {
    width: 7px; height: 7px; opacity: 0.55;
    background: #ffffff; margin: 0 !important;
}
.home-hero-pagination .swiper-pagination-bullet-active {
    opacity: 1; width: 18px; border-radius: 4px;
}

/* 날씨 카드 — 히어로 하단 배치 (겹침 제거) */
.home-weather-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 16px 0;
    position: relative;
    z-index: 2;
    min-height: 60px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--sprout);
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.07);
}
.home-weather-bar--hidden {
    display: none;
}
.home-weather-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg-secondary);
    font-size: 22px;
}
.home-weather-temp {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    flex-shrink: 0;
}
.home-weather-text {
    min-width: 0;
    flex: 1;
}
.home-weather-comment {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-light);
    line-height: 1.2;
}
.home-weather-desc {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-weather-refresh {
    background: none;
    border: none;
    padding: 4px;
    flex-shrink: 0;
    color: var(--border-light);
    font-size: 17px;
    cursor: pointer;
}
.home-weather-refresh .fa-spin {
    animation: fa-spin 1s infinite linear;
}

/* 다가오는 예약 스트립 (디자인 2154:2444 — 데이터 연동 전 c:if 가드) */
.home-reserve-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px;
    padding: 10px 10px 10px 15px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    text-decoration: none;
}
.home-reserve-ico {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.home-reserve-txt {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--success);
    line-height: 20px;
}
.home-reserve-btn {
    background: var(--primary-color);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    padding: 2px 12px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
}
.home-reserve-btn:active {
    background: var(--primary-hover);
}

/* 2x2 서비스 카드 — 크림 카드 + 마스코트 (디자인 2154:2451) */
.home-svc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 14px;
    margin: 0 16px;
}
.home-svc-card {
    position: relative;
    overflow: hidden;
    height: 132px;
    padding: 14px;
    border-radius: 12px;
    background: var(--card-bg);
    border: 1px solid var(--sprout);
    text-decoration: none;
    color: inherit;
    display: block;
}
button.home-svc-card {
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    width: 100%;
}
.home-svc-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--text-primary);
    margin: 0;
}
.home-svc-desc {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 6px;
    line-height: 1.2;
}
.home-svc-duck {
    position: absolute;
    right: 10px;
    bottom: 0;
    width: 72px;
    height: 72px;
    object-fit: contain;
    pointer-events: none;
}

/* 섹션 카드 (서비스 모아보기 전용 — 디자인 2154:2514: white r12 + 섀도) */
.home-sect-card {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    padding: 20px;
}
/* 플레인 섹션 (타임딜/즐겨찾기 — 디자인 2154:2467/2501: fill 없음, 크림 배경 위 풀블리드) */
.home-sect-plain {
    padding: 0 20px;
}
.home-sect-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.home-sect-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--text-primary);
    margin: 0;
}
.home-sect-more {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-light);
    text-decoration: none;
    white-space: nowrap;
    /* 프로토타입 버튼형(개발중 안내)에도 동일 룩 */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

/* 가로 스크롤 행 (타임딜/즐겨찾기 공통) */
.home-hscroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    margin: 24px -20px 0;
    padding: 0 20px;
    -webkit-overflow-scrolling: touch;
}
.home-hscroll::-webkit-scrollbar { display: none; }

/* 거리 칩 (이미지 좌상단 공통 — 추가수정본 2255:2806: white r6, 볼드 다크) */
.home-km-chip {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ffffff;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

/* 카드 하단 특성 칩 라인 (rd-chip 재사용) */
.home-card-chips {
    margin-top: 10px;
}

/* 실시간 타임딜 아이템 (디자인 2246:2722) */
.home-deal-item {
    flex: 0 0 200px;
    width: 200px;
    text-decoration: none;
    color: inherit;
    /* 프로토타입 버튼형(개발중 안내)에도 동일 룩 */
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.home-deal-thumb {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-secondary);
}
.home-deal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-deal-timer {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: #000000;
    border-radius: 6px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 10px;
    line-height: 1.2;
}
.home-deal-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 10px 0 0;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-deal-disc {
    font-size: 15px;
    font-weight: 700;
    margin-top: 7px;
    line-height: 1.2;
}
.home-deal-disc .pct { color: var(--danger); }
.home-deal-disc .orig {
    color: var(--text-muted);
    font-weight: 500;
    text-decoration: line-through;
    margin-left: 4px;
}
.home-deal-price {
    font-size: 20px;
    font-weight: 800;
    color: var(--danger);
    margin-top: 10px;
    line-height: 1.2;
}

/* 즐겨찾기 카드 (추가수정본 2255:2690 — 타임딜과 동일 골격, 가격만 그린) */
.home-fav-item {
    flex: 0 0 200px;
    width: 200px;
    text-decoration: none;
    color: inherit;
}
.home-fav-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 10px 0 0;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-fav-price {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-color);
    margin-top: 10px;
    line-height: 1.2;
}

/* 서비스 모아보기 — 4열 아이콘 그리드 (디자인 2154:2514) */
.home-svc-collect {
    margin: 0 16px;
}
.home-svc-collect-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--text-primary);
    margin: 0 0 24px;
}
.home-svc-icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 12px;
}
.home-svc-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: none;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
}
.home-svc-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bg-secondary);
}
.home-svc-icon-circle img {
    width: 36px;
    height: 36px;
    display: block;
}
.home-svc-icon-lbl {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* 미구현 버튼 — 시각 리셋은 하지 않고 JS 델리게이션 훅으로만 사용 */
.home-pending-btn { cursor: pointer; }

/* 접근성: 동작 감소 환경에서 Swiper autoplay 비활성 */
@media (prefers-reduced-motion: reduce) {
    .home-hero-swiper .swiper-wrapper {
        transition-duration: 0.01ms !important;
    }
}

/* --- [로그인] appLogin (Figma 31:105 '01.로그인' 리스킨, 2026-07-22) --- */

/* 로그인 컨테이너 — 소셜 버튼은 세로 중앙, 약관은 하단 고정(flex auto 마진 2개가 자유공간을 균등 분배).
   높이는 .app-content(스크롤 구역 = 100vh - --footer-total) 에서 .page-header(58+--sat, cmmnStyle.css:558)를
   뺀 가시 영역에 맞춘다 — 종전 calc(100vh - --footer-height)는 in-flow 로 바뀐 헤더 높이를 빼지 않아
   그만큼 넘쳐 약관·보조 링크가 하단 탭 밑으로 잘렸다 (2026-08-21 셸 구역화 후 로그인만 누락). */
.login-container {
    min-height: calc(100vh - var(--footer-total) - 58px - var(--sat));
    display: flex;
    flex-direction: column;
    padding: 0 16px 40px;
    background: var(--bg-color);
}

/* 소셜 로그인 (디자인 31:270 — 55h r12, 브랜드 공식 색 하드코딩 예외) */
.social-login-section {
    width: 100%;
    /* auto: .login-terms 의 margin-top:auto 와 짝을 이뤄 남는 높이를 위/아래로 반씩 나눈다.
       내용이 뷰포트보다 길어지면 auto 가 0 으로 접혀 예전처럼 헤더 바로 아래에 붙는다. */
    margin-top: auto;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 55px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 15px;
    transition: filter var(--transition-smooth);
    text-decoration: none;
}

.social-btn:active {
    filter: brightness(0.95);
}

.social-btn i,
.social-btn img,
.social-btn svg {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* 카카오 (브랜드 공식 #FEE500 / 라벨 #392020) */
.btn-kakao {
    background: #FEE500;
    color: #392020;
}

/* 네이버 (브랜드 공식 #03C75A) */
.btn-naver {
    background: #03C75A;
    color: #FFFFFF;
}

/* 구글 (화이트 + 보더) */
.btn-google {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

/* 카카오 아이콘 (SVG 배경) */
.kakao-icon {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23392020' d='M12 3C6.5 3 2 6.58 2 11c0 2.88 1.87 5.39 4.68 6.83-.21.75-.77 2.72-.88 3.14-.14.54.2.53.42.39.17-.11 2.69-1.82 3.78-2.57.64.1 1.31.15 2 .15 5.5 0 10-3.58 10-8S17.5 3 12 3z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* 네이버 아이콘 (텍스트 N) */
.naver-icon {
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 18px !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 20px;
    text-align: center;
}

/* 이용약관 안내 (디자인 34:281 — 하단, 링크는 그린 밑줄) */
.login-terms {
    margin-top: auto;
    padding-top: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.6;
}

.login-terms a {
    color: var(--primary-color);
    text-decoration: underline;
    font-weight: 600;
}

/* 로그인 보조 진입점(강사 로그인·입점 신청) — 약관 안내 아래. 소셜 버튼과 경쟁하지 않도록
   링크 형태로 낮춰 둔다. */
.login-sub-links {
    padding-top: 16px;
    text-align: center;
}

.login-sub-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}

.login-sub-link i {
    font-size: 13px;
}

/* --- [공통 뱃지] .required-badge — appSsoProfile 약관 동의 --- */
.required-badge {
    font-size: 13px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    color: #D32F2F;
    background: #FFEBEE;
    white-space: nowrap; /* 긴 동의 라벨 옆에서 '[필 수]' 로 꺾이지 않게 (2026-09-18) */
}

/* --- [회원탈퇴 바텀시트] mypageEdit 탈퇴 모달 --- */
.pkp-bottom-sheet {
    position: fixed;
    top: 0; left: var(--app-shell-left); right: auto; bottom: 0;
    width: var(--app-shell-width);
    max-width: var(--app-shell-max-width);
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

.pkp-bottom-sheet.active {
    visibility: visible;
    opacity: 1;
}

.pkp-bottom-sheet .bottom-sheet-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
}

.pkp-bottom-sheet .bottom-sheet-content {
    position: absolute;
    bottom: -100%;
    left: 0; right: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 24px 20px 80px;
    transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.1);
    max-height: 90vh;
    overflow-y: auto;
}

.pkp-bottom-sheet.active .bottom-sheet-content {
    bottom: 0;
}

.bottom-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.bottom-sheet-title {
    font-size: 18px;
    font-weight: 700;
    color: #212121;
    margin: 0;
}

.btn-sheet-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #757575;
    cursor: pointer;
    padding: 4px;
}

/* 탈퇴 사유 라디오 버튼 간격 */
.withdraw-reason-list .reason-radio {
    cursor: pointer;
    padding: 4px 0;
}

/* --- [생년월일 선택] appSsoProfile 생년월일 3분할 셀렉트 --- */
.birth-date-group {
    display: flex;
    gap: 8px;
}

.birth-date-group .birth-select {
    flex: 1;
    min-width: 0;
    padding: 12px 8px;
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23757575' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

.birth-date-group .birth-select:first-child {
    flex: 1.4;
}

/* --- [SSO 프로필] login\appSsoProfileStyle.css --- */
/**
 * ParkPlay Golf App - SSO Profile Page Style
 * SSO 로그인 후 추가 정보 입력 페이지 전용 스타일
 * 공통 스타일은 commonStyle.css에서 제공
 */

/* ========================================
   SSO 프로필 페이지 스타일
   ======================================== */

/* SSO 프로필 컨테이너 — .page-header(58+--sat) 아래 가시 영역. 기준은 .app-content(셸 flex 확정 높이)의
   100% 다: 지도 컨테이너(:7438)와 같은 식이고, 100vh 는 모바일 브라우저에서 주소창 접힌 큰 뷰포트라
   fixed 셸보다 커 그 차이만큼 빈 스크롤 띠가 생긴다. (.login-container :599 는 동작에 문제 없어 그대로 둔다) */
.sso-profile-container {
    min-height: calc(100% - 58px - var(--sat));
    padding: 24px 24px 80px;
    background: var(--bg-secondary, #FAFAFA);
}

/* 헤더 섹션 */
.sso-header-section {
    max-width: 480px;
    margin: 0 auto 32px;
    text-align: center;
    animation: fadeInUp 0.6s ease-out;
}

.sso-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.sso-icon i {
    font-size: 36px;
    color: white;
}

.sso-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary, #212121);
    margin: 0 0 8px;
}

.sso-subtitle {
    font-size: 14px;
    color: var(--text-secondary, #757575);
    line-height: 1.6;
}

/* 폼 섹션 */
.sso-form-section {
    max-width: 480px;
    margin: 0 auto;
    animation: fadeInUp 0.6s ease-out 0.1s both;
}

/* 성별 선택 */
.gender-selector {
    display: flex;
    gap: 12px;
}

.gender-option {
    flex: 1;
    cursor: pointer;
}

.gender-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.gender-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    background: var(--card-bg, white);
    border: 2px solid var(--border-light, #E0E0E0);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary, #757575);
    transition: all 0.3s ease;
}

.gender-option input[type="radio"]:checked+.gender-label {
    background: var(--primary, #4CAF50);
    border-color: var(--primary, #4CAF50);
    color: #FFFFFF;
    font-weight: 700;
}

/* 완료 버튼 */
.btn-complete {
    width: 100%;
    height: 56px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 32px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.btn-complete:hover {
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
    transform: translateY(-2px);
}

.btn-complete:active {
    transform: translateY(0);
}

/* 반응형 */
@media (max-width: 400px) {
    .sso-profile-container {
        padding: 20px 16px 80px;
    }

    .sso-icon {
        width: 64px;
        height: 64px;
    }

    .sso-icon i {
        font-size: 28px;
    }

    .sso-title {
        font-size: 20px;
    }

    .gender-label {
        height: 44px;
        font-size: 14px;
    }

    .btn-complete {
        height: 52px;
        font-size: 16px;
    }
}

/* 약관 동의 섹션 */
.consent-section {
    margin-top: 24px;
    background: white;
    border: 1px solid var(--border-light, #E0E0E0);
    border-radius: 12px;
    padding: 16px;
}

.consent-all {
    padding-bottom: 12px;
}

.consent-all-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #212121);
}

.consent-divider {
    height: 1px;
    background: var(--border-light, #E0E0E0);
    margin-bottom: 12px;
}

.consent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 라벨/링크가 각자 44px 을 갖게 되어(cmmnStyle.css .checkbox-label) 여백은 그 안에 흡수된다.
       6px 을 남기면 항목당 56px 이 되어 동의 4개짜리 appSsoProfile 화면이 불필요하게 길어진다. */
    padding: 0;
}

/* 종속 동의(야간 광고성 수신, 13 §3 — 2026-09-18): 상위 항목 아래 한 단 들여 표시 */
.consent-item--sub { padding-left: 24px; }

.consent-item .checkbox-label {
    flex: 1;
}

.consent-item .checkbox-text {
    font-size: 14px;
    color: var(--text-secondary, #757575);
}

.consent-view-link {
    font-size: 13px;
    color: var(--text-tertiary, #9E9E9E);
    text-decoration: underline;
    flex-shrink: 0;
    margin-left: 8px;
    /* '보기' 도 실제 탭 타겟이다. 라벨이 44px 이 됐으므로 같이 44px 로 맞춰야
       .consent-item 의 align-items:center 기준으로 두 요소가 어긋나지 않는다. */
    display: flex;
    align-items: center;
    min-height: 44px;
}

.sso-profile-container .optional-badge {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary, #9E9E9E);
    white-space: nowrap; /* 긴 동의 라벨 옆에서 '[선 택]' 로 꺾이지 않게 (2026-09-18) */
}

/* readonly 입력 필드 (SSO 제공값 수정 불가) */
.form-input[readonly] {
    background-color: var(--bg-secondary, #F5F5F5);
    color: var(--text-secondary, #757575);
    cursor: not-allowed;
}

/* --- [SSO 콜백] login\ssoCallbackStyle.css --- */

/* 신규 사용자 가입 안내 */
.sso-callback-new-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 70vh;
    padding: 40px 24px;
}

.sso-callback-new-user .new-user-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E8F5E9;
}

.sso-callback-new-user .new-user-icon i {
    font-size: 36px;
    color: var(--primary, #4CAF50);
}

.sso-callback-new-user .new-user-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #212121);
    margin: 0 0 12px;
}

.sso-callback-new-user .new-user-desc {
    font-size: 14px;
    color: var(--text-secondary, #757575);
    line-height: 1.6;
    margin: 0 0 32px;
}

.sso-callback-new-user .new-user-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.sso-callback-new-user .btn-new-user-signup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 240px;
    height: 48px;
    background: var(--primary, #4CAF50);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sso-callback-new-user .btn-new-user-signup:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.sso-callback-new-user .btn-new-user-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 44px;
    background: transparent;
    color: var(--text-secondary, #757575);
    border: 1px solid var(--border-color, #E0E0E0);
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sso-callback-new-user .btn-new-user-cancel:hover {
    background: var(--bg-secondary, #F5F5F5);
}

/* 이메일 중복 계정 안내 */
.sso-callback-duplicate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 40px 24px;
}

.sso-callback-duplicate .duplicate-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF3E0;
}

.sso-callback-duplicate .duplicate-icon i {
    font-size: 36px;
    color: #FF9800;
}

.sso-callback-duplicate .duplicate-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #212121);
    margin: 0 0 12px;
}

.sso-callback-duplicate .duplicate-desc {
    font-size: 14px;
    color: var(--text-secondary, #757575);
    line-height: 1.6;
    margin: 0 0 32px;
    white-space: pre-line;
}

.sso-callback-duplicate .duplicate-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.sso-callback-duplicate .btn-duplicate-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 280px;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--primary, #4CAF50);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sso-callback-duplicate .btn-duplicate-login:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* IDP 연동 확인 */
.sso-callback-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 40px 24px;
}

.sso-callback-link .link-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E3F2FD;
}

.sso-callback-link .link-icon i {
    font-size: 36px;
    color: #1976D2;
}

.sso-callback-link .link-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #212121);
    margin: 0 0 12px;
}

.sso-callback-link .link-desc {
    font-size: 14px;
    color: var(--text-secondary, #757575);
    line-height: 1.6;
    margin: 0 0 32px;
    white-space: pre-line;
}

.sso-callback-link .link-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.sso-callback-link .btn-link-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 48px;
    background: var(--primary, #4CAF50);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sso-callback-link .btn-link-confirm:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.sso-callback-link .btn-link-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    background: transparent;
    color: var(--text-secondary, #757575);
    border: 1px solid var(--border-color, #E0E0E0);
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sso-callback-link .btn-link-cancel:hover {
    background: var(--bg-secondary, #F5F5F5);
}

/* --- [공통 버튼] .btn-primary/.btn-secondary — 지도 모달 · 탈퇴 시트 · 채팅 빈 상태 CTA --- */
.btn-primary {
    background: var(--gradient-primary);
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.btn-primary:hover {
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
    transform: translateY(-1px);
}

.btn-secondary {
    background: white;
    border: 1px solid #E0E0E0;
    color: #212121;
}

.btn-secondary:hover {
    background: #F5F5F5;
}

/* --- [스크린 목록] screen\screenSelectStyle.css --- */
/**
 * ParkPlay Golf App - screenSelect Style
 * 스크린골프 업체 선택 화면 전용 스타일
 * 공통 스타일은 commonStyle.css에서 제공
 */

/* ========================================
   1. 컨테이너
   ======================================== */
.screen-select-container {
    padding: 0 16px 24px;
    /* 상단 여백은 pageHeader.jsp의 spacer가 처리 */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ========================================
   2. 위치 섹션
   ======================================== */

.location-text {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}.location-address {
    font-size: 13px;
    color: var(--text-secondary);
    padding-left: 28px;
}

/* ========================================
   2-1. 검색바 + 즐겨찾기 필터
   ======================================== */

.search-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border-color, #E0E0E0);
    border-radius: 12px;
    padding: 10px 14px;
    transition: border-color var(--transition-fast);
}

.search-input-wrapper:focus-within {
    border-color: var(--primary-color);
}

.search-input-wrapper i {
    color: var(--text-secondary);
    font-size: 14px;
    flex-shrink: 0;
}

.search-input-wrapper .search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: var(--text-primary);
}

.search-input-wrapper .search-input::placeholder {
    color: var(--text-secondary);
}


.bookmark-filter-btn:hover,
.bookmark-filter-btn.active {
    background: #FFF8E1;
    border-color: #FFD700;
    color: #FFD700;
}

/* ========================================
   2-2. 필터 섹션
   ======================================== */

.category-chip.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    font-weight: 600;
}

/* ========================================
   3. 업체 리스트 섹션
   ======================================== */
.store-list-section .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
}

.store-count {
    font-size: 13px;
    color: var(--primary-color);
    font-weight: 600;
}

/* ========================================
   4. 스크롤바 숨김
   ======================================== */
.store-list::-webkit-scrollbar {
    display: none;
}

/* ========================================
   5. 애니메이션 딜레이
   ======================================== */
.store-card {
    position: relative;
    flex-wrap: wrap;
    animation: slideIn 0.4s ease-out forwards;
}

.store-card:nth-child(1) {
    animation-delay: 0.05s;
}

.store-card:nth-child(2) {
    animation-delay: 0.1s;
}

.store-card:nth-child(3) {
    animation-delay: 0.15s;
}

.store-card:nth-child(4) {
    animation-delay: 0.2s;
}

.store-card:nth-child(5) {
    animation-delay: 0.25s;
}


/* 즐겨찾기 버튼 위치 */
.store-card .btn-bookmark {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}


/* --- [스크린 옵션] screen\screenOptionStyle.css --- */
/**
 * 스크린골프 예약 화면 스타일
 * screenOption.jsp 전용
 */

/* ========================================
   1. 컨테이너
   ======================================== */
.screen-option-container {
    padding: 0 16px 160px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ========================================
   2. 업체 정보
   ======================================== */
.reserve-store-info {
    padding: 14px;
}

.reserve-store-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reserve-store-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.reserve-store-logo-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary-light, #d1fae5), #a7f3d0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.reserve-store-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reserve-store-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.reserve-store-addr {
    font-size: 11px;
    color: var(--text-secondary);
}

.reserve-store-addr i {
    margin-right: 2px;
}

/* ========================================
   3. 섹션 공통
   ======================================== */
.reserve-section {
    padding: 16px;
}

.reserve-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.reserve-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.reserve-duration-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 400;
    margin-left: auto;
}

/* ========================================
   4. 요금제 카드
   ======================================== */
.reserve-product-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reserve-product-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.reserve-product-card:hover {
    border-color: var(--primary-color);
}

.reserve-product-card.active {
    border-color: var(--primary-color);
    background: var(--primary-color);
}

.reserve-product-card.active .reserve-product-name,
.reserve-product-card.active .reserve-product-duration,
.reserve-product-card.active .reserve-product-duration i,
.reserve-product-card.active .reserve-product-price {
    color: #fff;
}

.reserve-product-card.active .reserve-type-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.reserve-product-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.reserve-type-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-block;
    width: fit-content;
}

.reserve-type-price {
    background: var(--badge-notice-bg, #e0f2fe);
    color: var(--badge-notice-text, #0369a1);
}

.reserve-type-package {
    background: var(--badge-event-bg, #fef3c7);
    color: var(--badge-event-text, #d97706);
}

.reserve-product-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.reserve-product-duration {
    font-size: 12px;
    color: var(--text-secondary);
}

.reserve-product-duration i {
    margin-right: 2px;
}

.reserve-product-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
}

/* ========================================
   5. 캘린더
   ======================================== */
.reserve-calendar {
    margin-bottom: 8px;
}

.reserve-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.reserve-cal-nav-btn {
    background: none;
    border: none;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
}

.reserve-cal-month {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.reserve-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    gap: 2px;
}

.reserve-cal-header {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
    padding: 4px 0;
}

.reserve-cal-header.sun {
    color: var(--error, #ef4444);
}

.reserve-cal-header.sat {
    color: var(--info, #3b82f6);
}

.reserve-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.reserve-cal-day {
    width: 34px;
    height: 34px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.reserve-cal-day.empty {
    cursor: default;
}

.reserve-cal-day.disabled {
    color: var(--border-color, #e2e8f0);
    cursor: default;
}

.reserve-cal-day.holiday {
    background: #fef2f2;
    color: var(--error, #ef4444);
    text-decoration: line-through;
    cursor: default;
    opacity: 0.6;
}

.reserve-cal-day.today {
    border: 1.5px solid var(--primary-color);
    font-weight: 700;
}

.reserve-cal-day.sun:not(.disabled) {
    color: var(--error, #ef4444);
}

.reserve-cal-day.sat:not(.disabled) {
    color: var(--info, #3b82f6);
}

.reserve-cal-day.selected {
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.4);
    transform: scale(1.15);
    border-radius: 50%;
}

.reserve-selected-date {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--primary-color);
    border-radius: 8px;
    font-size: 13px;
    color: #fff;
    font-weight: 600;
    text-align: center;
}

.reserve-selected-date i {
    margin-right: 4px;
}

/* ========================================
   6. 시간 슬롯
   ======================================== */
.reserve-time-tabs {
    display: flex;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color, #e2e8f0);
}

.reserve-time-tab {
    flex: 1;
    padding: 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--background-color, #f8fafc);
    cursor: pointer;
    border-right: 1px solid var(--border-color, #e2e8f0);
    transition: all 0.15s ease;
}

.reserve-time-tab:last-child {
    border-right: none;
}

.reserve-time-tab.active {
    background: var(--primary-color);
    color: #fff;
}

.reserve-time-tab i {
    margin-right: 2px;
}

.reserve-ts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.reserve-ts {
    padding: 10px 4px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    border: 1.5px solid var(--border-color, #e2e8f0);
    transition: all 0.15s ease;
}

.reserve-ts-time {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.reserve-ts-avail {
    font-size: 10px;
    color: var(--primary-color);
    margin-top: 2px;
}

.reserve-ts.sel {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.4);
    transform: scale(1.03);
}

.reserve-ts.sel .reserve-ts-time {
    color: #fff;
    font-weight: 700;
}

.reserve-ts.sel .reserve-ts-avail {
    color: rgba(255, 255, 255, 0.85);
}

.reserve-ts.full {
    background: var(--error-light, #fef2f2);
    border-color: var(--error-border, #fecaca);
    cursor: not-allowed;
}

.reserve-ts.full .reserve-ts-time {
    color: var(--error, #ef4444);
}

.reserve-ts.full .reserve-ts-avail {
    color: var(--error, #ef4444);
}

.reserve-time-empty {
    text-align: center;
    padding: 20px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.reserve-time-empty i {
    margin-right: 4px;
}

.reserve-time-legend {
    display: flex;
    gap: 14px;
    margin-top: 10px;
    justify-content: center;
}

.reserve-legend-item {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.reserve-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.reserve-legend-available {
    background: var(--primary-light, #4CAF50);
    border: 1px solid var(--primary-color);
}

.reserve-legend-selected {
    background: var(--primary-color);
}

.reserve-legend-full {
    background: var(--error-border, #fecaca);
    border: 1px solid var(--error, #ef4444);
}

/* ========================================
   7. 인원 선택
   ======================================== */
.reserve-person-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 14px 0;
}

.reserve-cnt-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color, #e2e8f0);
    background: #fff;
    font-size: 16px;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.reserve-cnt-btn:disabled {
    color: var(--border-color, #e2e8f0);
    cursor: not-allowed;
}

.reserve-cnt-num {
    font-size: 30px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.reserve-cnt-unit {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 400;
}

.reserve-person-note {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
}

.reserve-person-note i {
    margin-right: 3px;
}

/* ========================================
   8. 요약 카드
   ======================================== */
.reserve-summary {
    background: var(--background-color, #f8fafc);
    border-radius: 10px;
    padding: 14px;
}

.reserve-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.reserve-summary-row.reserve-summary-total {
    border-top: 1px solid var(--border-color, #e2e8f0);
    margin-top: 8px;
    padding-top: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.reserve-summary-price {
    color: var(--primary-color);
}

.reserve-pay-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--badge-event-bg, #fef3c7);
    border-radius: 8px;
    font-size: 12px;
    color: var(--badge-event-text, #92400e);
}

.reserve-pay-info i {
    font-size: 14px;
}

/* 타임딜 v2 — 슬롯 그리드 할인 배지 (renderTimeSlots 가 .deal + .reserve-ts-deal 렌더).
   할인율 색은 홈 딜 카드 pct(--danger)와 통일. */
.reserve-ts.deal {
    position: relative;
    border-color: var(--primary-color);
}

.reserve-ts-deal {
    position: absolute;
    top: -7px;
    right: -4px;
    padding: 1px 5px;
    border-radius: 8px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
}

/* ========================================
   9. 하단 예약 버튼 바
   ======================================== */
.reserve-bottom-bar {
    position: fixed;
    bottom: var(--footer-total);
    left: var(--app-shell-left);
    right: auto;
    width: var(--app-shell-width);
    max-width: var(--app-shell-max-width);
    padding: 10px 16px;
    background: #fff;
    border-top: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    z-index: 20;
}

.reserve-submit-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: opacity 0.15s ease;
}

.reserve-submit-btn:disabled {
    background: var(--border-color, #e2e8f0);
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* ========================================
   10. 확인 모달
   ======================================== */
.reserve-confirm-modal {
    width: 90%;
    max-width: 340px;
    border-radius: 18px;
    overflow: hidden;
}

.reserve-modal-head {
    padding: 22px 18px 14px;
    text-align: center;
}

.reserve-modal-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--badge-event-bg, #fef3c7), #fde68a);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.reserve-modal-icon i {
    font-size: 22px;
    color: var(--badge-event-text, #d97706);
}

.reserve-modal-head h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.reserve-modal-head p {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.reserve-modal-body {
    padding: 0 18px 14px;
}

.reserve-modal-info {
    background: var(--background-color, #f8fafc);
    border-radius: 10px;
    padding: 12px;
}

.reserve-modal-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
}

.reserve-modal-label {
    color: var(--text-secondary);
}

.reserve-modal-value {
    color: var(--text-primary);
    font-weight: 500;
}

.reserve-modal-row.reserve-modal-total {
    border-top: 1px solid var(--border-color, #e2e8f0);
    margin-top: 6px;
    padding-top: 8px;
}

.reserve-modal-row.reserve-modal-total .reserve-modal-value {
    color: var(--primary-color);
    font-weight: 700;
}

.reserve-modal-notice {
    margin-top: 12px;
    padding: 10px;
    background: var(--badge-event-bg, #fef3c7);
    border-radius: 8px;
    border: 1px solid var(--badge-event-text, #d97706);
}

/* 예약 모달 안 동의 블록 (2026-08-10 법무요구).
   consent-section 을 그대로 재사용하고 모달 폭에 맞춰 여백만 맞춘다 */
.reserve-consent {
    margin-top: 12px;
    padding: 0 2px;
}

/* 제3자 제공 요약 1줄 (정본 07 §2, 2026-09-18) — 체크박스(28px)+간격 아래로 들여쓴다 */
.reserve-consent-target {
    margin: 4px 0 0 34px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

.reserve-modal-notice-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--badge-event-text, #d97706);
    margin-bottom: 4px;
}

.reserve-modal-notice ul {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.8;
    padding-left: 16px;
    margin: 0;
}

.reserve-modal-foot {
    padding: 10px 18px 18px;
    display: flex;
    gap: 8px;
}

.reserve-modal-cancel-btn {
    flex: 1;
    padding: 12px;
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.reserve-modal-ok-btn {
    flex: 2;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.reserve-modal-ok-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================
   예약 신청완료 · 취소확인 · 레슨결제 공통 리스킨
   (Figma 완료 2190:2930 · 취소 2205:3730 · 결제 2211:3051)
   흰 카드 r14 + 정보행 + 진행 스텝 + 환불 규정. .rvx-* 네임스페이스.
   ======================================== */
.rvx-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px 0 20px;
}

.rvx-card {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rvx-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

/* 정보 행 (라벨 · 값)
   gap 16 + 행 line-height 1.2 는 시안 실측이다 (2026-08-20): 결제 2211:3051 과
   레슨 확인 2209:3199 이 똑같이 **행높이 18 / pitch 34** 다(= 18 + gap 16).
   종전 gap 14 + 상속 line-height(24) 는 pitch 38 이라 5화면(완료·취소·결제·상세·레슨확인)이
   함께 4px 씩 떠 있었다. 행 높이를 시안에 맞추려면 line-height 를 명시해야 한다 —
   14px/15px 글자에 브라우저 기본값이 붙으면 16.8/18 이 아니라 22.4/24 가 된다. */
.rvx-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rvx-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rvx-row .k {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.2;
    flex-shrink: 0;
}

.rvx-row .v {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.2;
    text-align: right;
    min-width: 0;
}

/* 결제/환불 금액 */
.rvx-pay {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rvx-pay-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.rvx-pay-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
}

/* 완료 — 상태 카드 (중앙 정렬) */
.rvx-status {
    align-items: center;
    text-align: center;
}

.rvx-status-mascot {
    width: 131px;
    height: 93px;
    object-fit: contain;
}

.rvx-status-title {
    margin: 8px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.rvx-status-sub {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-line;
}

/* 진행 스텝 (신청 완료 → 접수 중 → 예약 확정) */
.rvx-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    margin-top: 4px;
}

.rvx-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.rvx-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.rvx-step-dot.is-done { background: var(--primary-color); color: #fff; }
.rvx-step-dot.is-done i { font-size: 12px; }
.rvx-step-dot.is-current { background: var(--bg-color); border: 1px dashed var(--warning); color: var(--warning); }
.rvx-step-dot.is-wait { background: var(--bg-secondary); color: var(--text-secondary); font-weight: 500; }

.rvx-step-label {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.rvx-step.is-done .rvx-step-label { color: var(--primary-color); }
.rvx-step.is-current .rvx-step-label { color: var(--warning); font-weight: 700; }
.rvx-step.is-wait .rvx-step-label { color: var(--text-secondary); font-weight: 400; }

.rvx-step-line {
    flex: 1;
    min-width: 12px;
    height: 1px;
    margin-top: 14px;
    background: var(--border-light);
}

.rvx-step-line.is-done { background: var(--primary-color); }

/* 강조 카드 (환불 규정 · 변경 안내 · 취소 경고) — 은은한 시맨틱 틴트 */
.rvx-cta {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rvx-cta.is-danger {
    background: color-mix(in srgb, var(--danger) 4%, #fff);
    border-color: color-mix(in srgb, var(--danger) 12%, #fff);
}

.rvx-cta.is-positive {
    background: color-mix(in srgb, var(--primary-color) 5%, #fff);
    border-color: color-mix(in srgb, var(--primary-color) 12%, #fff);
}

/* 환불 규정 리스트 */
.rvx-refund-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--danger);
}

.rvx-refund-head i { color: var(--danger); }

.rvx-refund-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rvx-badge {
    flex-shrink: 0;
    min-width: 64px;
    text-align: center;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    color: #fff;
}

.rvx-badge.is-full { background: var(--primary-color); }
.rvx-badge.is-partial { background: var(--warning); }
.rvx-badge.is-none { background: var(--danger); }

.rvx-refund-desc {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* 취소 경고 CTA */
.rvx-warn-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--danger);
}

.rvx-warn-sub {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--danger);
    line-height: 1.5;
}

/* 변경 안내 CTA (결제) */
.rvx-note-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
}

.rvx-note-title i { color: var(--primary-color); }

.rvx-note-sub {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
    line-height: 1.5;
}

/* 취소 사유 라디오 */
.rvx-reason {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.rvx-reason .dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    background: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rvx-reason .dot::after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: transparent;
}

.rvx-reason .label {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
}

.rvx-reason.active { background: var(--bg-secondary); }
.rvx-reason.active .dot { border-color: var(--text-secondary); background: var(--text-secondary); }
.rvx-reason.active .dot::after { background: #fff; }
.rvx-reason.active .label { font-weight: 700; }

/* 환불 안내 알약 */
.rvx-refund-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--primary-bg);
    border-radius: 200px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    text-align: center;
}

.rvx-refund-pill i { color: var(--primary-color); }

/* 하단 고정 액션 바 */
.rvx-bottom {
    position: fixed;
    bottom: var(--footer-total);
    left: var(--app-shell-left);
    width: var(--app-shell-width);
    max-width: var(--app-shell-max-width);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: var(--card-bg);
    box-shadow: 0 -5px 12px rgba(0, 0, 0, 0.04);
    z-index: 90;
}

.rvx-btn {
    height: 60px;
    border-radius: 12px;
    border: none;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.rvx-btn-primary { flex: 1; background: var(--primary-color); color: #fff; }
.rvx-btn-primary:active { background: var(--primary-hover); }
.rvx-btn-danger { flex: 1; background: var(--danger); color: #fff; }
.rvx-btn-narrow { flex: 0 0 108px; }

.rvx-btn-outline {
    flex: 1;
    border: 1.5px solid var(--border-light);
    background: var(--card-bg);
    color: var(--text-secondary);
}

.rvx-btn-outline.is-primary { border-color: var(--primary-color); color: var(--primary-color); }
.rvx-btn-outline.is-danger { border-color: var(--danger); color: var(--danger); }

/* 취소 확인 — 풀스크린 오버레이 (Figma 2205:3730, myReserve 내 뷰 전환) */
.rvx-overlay {
    position: fixed;
    top: 0;
    left: var(--app-shell-left);
    width: var(--app-shell-width);
    max-width: var(--app-shell-max-width);
    height: 100%;
    background: var(--bg-color);
    z-index: 150;
    display: flex;
    flex-direction: column;
}

.rvx-ov-header {
    position: relative;
    flex-shrink: 0;
    min-height: 56px;
    padding-top: var(--sat);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rvx-ov-back {
    position: absolute;
    left: 12px;
    bottom: 10px;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    font-size: 18px;
    color: var(--text-primary);
    cursor: pointer;
}

.rvx-ov-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.rvx-ov-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px calc(92px + var(--sab));
}

/* 오버레이 안에서는 bottomMenu 위가 아니라 화면 바닥에 붙으므로 홈 인디케이터를 직접 피한다 */
.rvx-overlay .rvx-bottom { bottom: 0; padding-bottom: calc(16px + var(--sab)); }

.rvx-reasons {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rvx-summary-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.rvx-summary-when {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
}

/* 예약 상세 (Figma 2190:2744 — rvx 템플릿 + 상세 전용) */
.reserve-detail-container {
    padding: 0 16px calc(var(--footer-total) + 108px);
}

/* 카드결제 위젯 자리(.rd-pay-widget)는 .rvx-card 의 flex column + gap 을 그대로 쓴다.
   전용 규칙을 두지 않는 것이 의도다 — 위젯 iframe 은 결제수단 수에 따라 높이가 계속 변하므로
   고정 높이나 overflow 를 주면 목록이 잘리고 약관 동의가 카드 밖으로 나간다. */

.rvx-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rvx-detail-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.rvx-status-pill {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.rvx-status-pill.is-pending { background: var(--warning); }
.rvx-status-pill.is-confirmed { background: var(--primary-color); }
.rvx-status-pill.is-muted { background: var(--bg-secondary); color: var(--text-secondary); }
.rvx-status-pill.is-cancelled { background: var(--danger); }

.rvx-guide {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.5;
}

.rvx-place-name {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.rvx-place-addr {
    margin: -6px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

a.rvx-btn { text-decoration: none; }


/* --- [라운딩 목록] roundingSelect (Figma 57:1131 '03. 리스트_목록' 리스킨, 2026-07-22) --- */
/**
 * 라운딩 업체 선택 화면. store-card 기본 골격은 cmmnStyle 공통 정의를 쓰되
 * 카드 내부(.rd-*)와 배지 색은 이 섹션에서 스코프 재정의한다.
 * .list-location-band / view-tab / compact-* 리스타일은 스크린·레슨 목록에도 공유된다.
 */

/* 컨테이너 (고유) — 위치 밴드는 풀블리드(-16px) */
.rounding-select-container {
    padding: 0 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* ========================================
   위치 밴드 (디자인 57:1139 — 풀블리드 연녹 배경)
   ======================================== */
.list-location-band {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 -16px;
    padding: 11px 18px 11px 20px;
    background: var(--primary-bg);
}
.list-location-band .band-pin {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.list-location-band .location-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.list-location-band .band-chip {
    flex-shrink: 0;
    background: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 2px 12px 2px 10px;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    color: var(--primary-color);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.list-location-band .band-refresh {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 2px 4px;
    color: var(--primary-color);
    font-size: 13px;
    cursor: pointer;
}
.list-location-band .band-refresh .fa-spin {
    animation: fa-spin 1s infinite linear;
}

/* ========================================
   콤팩트 검색 툴바 (디자인 57:1154 — 목록 3종 공유)
   ======================================== */
.compact-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* cmmnStyle .search-input(h44·pl40 절대 아이콘)과 계열 분리 — Figma 텍스트필드: h55 · pad 10/20 · r12 · 아이콘 인라인 18 */
.compact-toolbar .search-input-wrapper {
    height: 55px;
    padding: 10px 20px;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    background: var(--card-bg);
    gap: 5px;
}

.compact-toolbar .search-input-wrapper i {
    position: static;
    transform: none;
    color: var(--text-muted);
    font-size: 16px;
}

.compact-toolbar .search-input-wrapper .search-input {
    height: auto;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.compact-toolbar .search-input-wrapper .search-input::placeholder {
    color: var(--text-secondary);
    font-weight: 600;
}

.compact-toolbar .bookmark-filter-btn {
    width: 53px;
    height: 53px;
    border-radius: 12px;
    font-size: 16px;
}

/* ========================================
   콤팩트 위치 인라인 바 (구형 — 스크린/레슨 목록 리스킨 전까지 유지)
   ======================================== */


.compact-location-bar .location-text {
    flex: 1;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
   콤팩트 필터 바 (디자인 57:1159 — 알약 칩, 목록 3종 공유)
   ======================================== */
.compact-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.compact-filter-bar .filter-chips {
    display: flex;
    gap: 10px;
}

.compact-filter-bar .filter-chip {
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-muted);
}

.compact-filter-bar .filter-chip.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

.compact-filter-bar .filter-chip i {
    font-size: 11px;
}

.compact-distance-select {
    flex-shrink: 0;
    padding: 5px 10px;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
    background: var(--card-bg);
    color: var(--text-secondary);
    outline: none;
    cursor: pointer;
}

/* 목록 폴백 안내 (주변 0건 → 가까운 순 표시) — screen/rounding/lesson 공용 */
.list-fallback-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--bg-secondary);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.list-fallback-notice i {
    color: var(--primary-color);
}

/* 목록 더보기 버튼 (폴백/검색 모드 5개 단위 로드) — screen/rounding/lesson 공용 */
.btn-load-more {
    width: 100%;
    margin-top: 16px;
    padding: 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-load-more:active {
    background: var(--border-light);
}

.btn-load-more i {
    margin-left: 6px;
}

/* ========================================
   골프장 카드 (디자인 57:1169 '카드_목록' — 라운딩 전용)
   ======================================== */
.rounding-select-container .section-title {
    margin-top: 5px;
    margin-bottom: 12px;
}

.rounding-select-container .store-list {
    margin-top: 20px;
}

.rounding-select-container .section-title>span:first-child {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.rounding-select-container .store-count {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
}

.rounding-select-container .store-count b {
    color: var(--primary-color);
    font-weight: 700;
}

.rounding-select-container .store-list {
    gap: 20px;
}

.rd-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 12px;
    background: var(--card-bg);
    box-shadow: 0 3px 10px rgba(13, 20, 10, 0.07);
    cursor: pointer;
}

/* 상단: 썸네일 + 정보 */
.rd-card-main {
    display: flex;
    gap: 12px;
    min-width: 0;
}

.rd-thumb {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.rd-thumb img {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
}

/* 배지 — 공통 그라디언트 대신 플랫 토큰 색 (디자인 57:693) */
.rd-thumb .store-badge {
    top: 6px;
    left: 6px;
    padding: 2px 4px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 5px;
    line-height: 1.1;
}

.rd-thumb .store-badge.hot { background: var(--danger); }
.rd-thumb .store-badge.new { background: var(--primary-light); }
.rd-thumb .store-badge.event { background: var(--warning); }

.rd-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rd-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 주요 특성 칩 (18홀/카트/캐디) */
.rd-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rd-chip {
    background: var(--primary-bg);
    border-radius: 4px;
    padding: 3px 5px;
    font-size: 10px;
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.4;
    white-space: nowrap;
}

/* 즉시예약 칩 (목록·상세 공통, 2026-09-04) — 기본 칩의 반전색으로 눈에 띄게 */
.rd-chip--instant {
    background: var(--primary-color);
    color: #fff;
}

.rd-chip--instant i {
    font-size: 9px;
    margin-right: 2px;
}

/* 평점 + 거리 */
.rd-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.rd-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
}

.rd-rating i {
    color: var(--accent-color);
    font-size: 14px;
}

.rd-rating .rd-review-cnt {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.rd-distance {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rd-distance img {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.rd-addr {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rd-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}

/* 키워드 태그 */
.rd-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.rd-tag {
    background: var(--bg-secondary);
    border-radius: 4px;
    padding: 3px 5px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: nowrap;
}

/* 하단: 즐겨찾기 + 예약하기 */
.rd-actions {
    display: flex;
    align-items: stretch;
    gap: 15px;
}

.rd-actions .btn-bookmark {
    position: static;
    width: 52px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rd-actions .btn-bookmark i {
    font-size: 20px;
    color: #ffffff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.rd-actions .btn-bookmark.active i {
    color: var(--danger);
    filter: none;
}

/* 공통 .store-card:hover 시프트 무효화 (rd 카드는 정적) */
.rd-card:hover {
    transform: none;
    box-shadow: 0 3px 10px rgba(13, 20, 10, 0.07);
}

/* ========================================
   라운딩 지도 뷰 (디자인 57:1658 — 헤더 스택 + 지도 + 선택 카드)
   ======================================== */
.rd-map-page {
    display: flex;
    flex-direction: column;
}

.rd-map-head {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 16px 15px;
    background: var(--bg-color);
    flex-shrink: 0;
}

.rd-map-area {
    position: relative;
    flex: 1;
    min-height: 0;
    margin-top: 5px;
}

.rd-map-full {
    width: 100%;
    height: 100%;
}

/* 마커: 그린 핀 + 이름 라벨 (디자인 57:1701 / 카드_지도) */
.rd-map-marker {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.rd-map-marker img {
    width: 29px;
    height: 32px;
    display: block;
}

.rd-map-label {
    margin-bottom: 2px;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #000000;
    line-height: 1.2;
    white-space: nowrap;
}
/* 라벨 부가정보 (평점순=평점 · 가격순=가격대) */
.rd-map-label-sub {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #72B55A;
}

.rd-map-label-sub .fa-star {
    font-size: 10px;
    color: #FFB800;
}
/* 마커 라벨: 정렬 상위 5개만 이름 노출, 그 외 핀만 (선택 시엔 항상 노출) */
.rd-map-marker.no-label .rd-map-label {
    display: none;
}

.rd-map-marker.selected .rd-map-label {
    display: block;
}

/* 선택된 마커: 붉은 핀 + 확대 강조 */
.rd-map-marker.selected img {
    width: 37px;
    height: 41px;
}

/* 선택 카드 오버레이 — 지도 하단 고정 (디자인 57:1777: 16px 여백) */
.rd-map-card {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 12px;
    z-index: 20;
}

.rd-map-card .rd-card {
    box-shadow: 0 3px 20px rgba(13, 20, 10, 0.18);
}

/* 현 지도에서 검색 버튼 — 지도 상단 중앙 플로팅 (팬/줌 후 노출) */
.rd-map-research {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 18px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(13, 20, 10, 0.18);
}

.rd-map-research[hidden] { display: none; }
.rd-map-research i { font-size: 13px; }
.rd-map-research:active { background: var(--bg-secondary); }

.rd-reserve-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px; /* 추가수정본 57:1169 — calendar-plus 아이콘 + 텍스트 */
    height: 48px;
    border-radius: 12px;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.rd-reserve-btn i {
    font-size: 15px;
}

.rd-reserve-btn:active {
    background: var(--primary-hover);
}

/* ========================================
   라운딩 상세 (디자인 57:1835 — 갤러리 + 정보 + 요금/코스/후기 카드)
   .rd-* 조각(칩/평점/거리/주소/가격/태그)은 목록 카드와 공유
   ======================================== */
.rdt-container {
    padding: 16px 16px calc(var(--footer-total) + 100px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 대표 사진 갤러리 — 342x210 r12, 도트 하단 오버레이 */
.rdt-gallery .swiper {
    border-radius: 12px;
    overflow: hidden;
}

.rdt-gallery-img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
    background: var(--bg-secondary);
}

.rdt-gallery-pagination {
    bottom: 17px !important;
}

.rdt-gallery-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #ffffff;
    opacity: 1;
}

.rdt-gallery-pagination .swiper-pagination-bullet-active {
    background: var(--sprout);
}

/* 기본 정보 블록 */
.rdt-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rdt-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0;
}

/* 섹션 카드 공통 */
.rdt-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 3px 10px rgba(13, 20, 10, 0.07);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rdt-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0;
}

/* 카드 제목 옆 작은 배지 — 상세 '이용 요금 정보' 의 즉시예약 표시 (2026-09-04) */
.rdt-title-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    vertical-align: middle;
    margin-left: 6px;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.rdt-title-badge i {
    font-size: 9px;
}

/* 요금 행 (디자인 Promo Card 65:1308) */
.rdt-fare-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 68px;
    padding: 11px 20px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    background: var(--card-bg);
}

.rdt-fare-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rdt-fare-name {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.75;
}

.rdt-fare-desc {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.5;
}

.rdt-fare-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
    text-align: right;
    flex-shrink: 0;
}

.rdt-fare-price .orig {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-decoration: line-through;
}

/* 할인율 강조 (추가수정본 파크플레이(1) 2197:2890 — pct red #F54C3C, 최종가는 그린 유지) */
.rdt-fare-price .discount-rate {
    color: var(--danger);
}

/* 코스 정보 그리드 (디자인 상세화면_정보 145x135) */
.rdt-course-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.rdt-course-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px 8px;
    background: var(--bg-secondary);
    border-radius: 12px;
}

.rdt-course-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ffffff;
}

.rdt-course-ico img {
    width: 24px;
    height: 24px;
    display: block;
}

.rdt-course-ico i {
    font-size: 20px;
    color: var(--primary-light);
}

.rdt-course-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.2;
}

.rdt-course-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    text-align: center;
}

/* 후기 (디자인 67:1214 — 목록 API 연동 전 빈 상태) */
.rdt-review {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
}

.rdt-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rdt-review-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.rdt-review-date {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.rdt-review-text {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.3;
    margin: 0;
}

.rdt-review-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 0;
    color: var(--text-muted);
    font-size: 14px;
}

.rdt-review-empty i {
    font-size: 28px;
}

.rdt-review-empty p { margin: 0; }

/* 하단 고정 액션바 (디자인 67:1275 — 하트 + 전화 + 예약) */
.rdt-bottom-bar {
    position: fixed;
    bottom: var(--footer-total);
    left: var(--app-shell-left);
    width: var(--app-shell-width);
    max-width: var(--app-shell-max-width);
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 12px;
    background: var(--card-bg);
    box-shadow: 0 -5px 12px rgba(0, 0, 0, 0.04);
    z-index: 90;
}

.rdt-bottom-bar .btn-bookmark {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rdt-bottom-bar .btn-bookmark i {
    font-size: 20px;
    color: #ffffff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.rdt-bottom-bar .btn-bookmark.active i {
    color: var(--danger);
    filter: none;
}

.rdt-call-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 15px;
    border-radius: 12px;
    border: 1px solid var(--primary-color);
    background: var(--card-bg);
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0;
}

.rdt-reserve-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    border-radius: 12px;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.rdt-reserve-btn:active {
    background: var(--primary-hover);
}

/* --- 스크린 상세 확장 (Figma 57:1835 템플릿 재사용, 2026-07-22) --- */
.rdt-open-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.rdt-open-status i { font-size: 8px; }
.rdt-open-status.is-open i { color: var(--success); }
.rdt-open-status.is-closed i { color: var(--text-muted); }

.rdt-desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
    white-space: pre-line;
}

.rdt-review-total {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
    margin-left: 4px;
}

.rdt-fare-empty {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 15px;
    color: var(--text-secondary);
}

.rdt-fare-tel {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
}

.rdt-reserve-btn.is-disabled {
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: default;
}

/* rdt 카드 내부 후기 컴포넌트 — app-card 제거분 구분선 보정 */
.rdt-card .review-summary { padding: 16px 0 0; }
.rdt-card .review-card {
    padding: 16px 0;
    border-top: 1px solid var(--border-light);
}
.rdt-card .btn-more-reviews { width: 100%; }

/* --- [라운딩 예약] roundingOption (Figma 2190:2359 '05. 골프장_예약' 리스킨, 2026-07-22) --- */

.ro-container {
    padding: 16px 16px calc(var(--footer-total) + 108px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 섹션 카드 (r14, pad 16/20 — 입력·선택 카드 기준)
   그림자: 시안(2209:3199 · 2190:2359)의 r14 카드 11개가 예외 없이 DROP_SHADOW blur10/y+3/
   #0D140A 7% 다. --shadow-md 로 매핑하는 것은 .rvx-card 가 이미 확립한 결정이다
   (백로그 §130, 결제 2211:3051 픽셀 재검증). 별점 #FFC53F→--accent-color 와 같은 근사 매핑.
   없으면 캔버스(#FFFEFB)와 카드(#FFFFFF) 대비가 거의 없어 카드 경계가 사라진다. */
.ro-card {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 16px 20px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ro-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0;
}

.ro-card-desc {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: -7px 0 0;
}

/* 예약 대상 골프장 */
.ro-store {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.ro-store-thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-secondary);
}

.ro-store-txt {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ro-store-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.ro-store-sub {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 날짜 선택 — 5일 칩 */
.ro-month {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
}

.ro-date-chips {
    display: flex;
    gap: 6px;
}

.ro-date-chip {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
}

.ro-date-chip .dow {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
}

.ro-date-chip .dom {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.ro-date-chip.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.ro-date-chip.active .dow,
.ro-date-chip.active .dom {
    color: #ffffff;
    font-weight: 700;
}

.ro-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 4px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
}

/* 확장 캘린더 */
.ro-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 8px;
}

.ro-cal-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-secondary);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
}

.ro-cal-weekdays,
.ro-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
}

.ro-cal-weekdays span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 6px 0;
}

.ro-cal-weekdays .sun { color: var(--danger); }
.ro-cal-weekdays .sat { color: var(--primary-light); }

.ro-cal-day {
    padding: 9px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
}

.ro-cal-day.sun { color: var(--danger); }
.ro-cal-day.sat { color: var(--primary-light); }

.ro-cal-day.disabled {
    color: var(--border-light);
    cursor: default;
}

.ro-cal-day.selected {
    background: var(--primary-color);
    color: #ffffff;
}

/* 시간 선택 */
.ro-period-chips {
    display: flex;
    gap: 10px;
}

.ro-period-chip {
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
}

.ro-period-chip.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

.ro-slots {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 8px;
}

.ro-slots.active { display: grid; }

.ro-slot {
    height: 42px;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
}

.ro-slot.selected {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
    font-weight: 700;
}

/* 인원 선택 */
.ro-person-btns {
    display: flex;
    gap: 12px;
}

.ro-person-btn {
    flex: 1;
    height: 54px;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
}

.ro-person-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
    font-weight: 700;
}

.ro-info-strip {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--primary-bg);
    border-radius: 200px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
}

.ro-info-strip i { font-size: 12px; flex-shrink: 0; }

/* 금액 rows */
.ro-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ro-price-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.ro-price-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.ro-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ro-total-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.ro-total-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
}

/* 규정 동의 */
.ro-agree {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.ro-agree input { display: none; }

.ro-agree-box {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    background: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.ro-agree-box i {
    font-size: 12px;
    color: #ffffff;
    visibility: hidden;
}

.ro-agree input:checked + .ro-agree-box {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.ro-agree input:checked + .ro-agree-box i { visibility: visible; }

.ro-agree-txt {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

/* 업체·강사 문의 전달 안내 (2026-09-18 — 종전 제3자 동의 체크 아래 들여쓰기(34px)는 체크박스가 사라져 뺐다) */
.qna-consent-target {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* 하단 고정 바 */
.ro-bottom-bar {
    position: fixed;
    bottom: var(--footer-total);
    left: var(--app-shell-left);
    width: var(--app-shell-width);
    max-width: var(--app-shell-max-width);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    background: var(--card-bg);
    box-shadow: 0 -5px 12px rgba(0, 0, 0, 0.04);
    z-index: 90;
}

.ro-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ro-summary-when {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ro-summary-price {
    font-size: 21px;
    font-weight: 700;
    color: var(--primary-color);
}

.ro-reserve-btn {
    flex-shrink: 0;
    width: 178px;
    height: 60px;
    border: none;
    border-radius: 12px;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.ro-reserve-btn:disabled {
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: default;
}

.ro-reserve-btn:not(:disabled):active {
    background: var(--primary-hover);
}

/* ========================================
   강사 상세 (디자인 2197:2890 — .rdt-* 상세 템플릿 재사용 + 강사 특화)
   ======================================== */

/* 강사 소개 본문 */
.ldt-intro {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
    white-space: pre-line;
}

/* 환불정책 링크 (가격 아래, 2026-09-04) + 바텀시트 본문 — 시트 골격은 [회원탈퇴 바텀시트] 재사용 */
.ldt-refund-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
}

.ldt-refund-link i {
    font-size: 10px;
}

.ldt-refund-text {
    white-space: pre-line;
}

/* 경력 및 자격 — 가로 미니 타일 (디자인 2201:3253) */
.ldt-tiles {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.ldt-tile {
    flex: 1;
    min-width: 130px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0;
}

.ldt-tile-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-bg);
    flex-shrink: 0;
}

.ldt-tile-ico i {
    font-size: 14px;
    color: var(--primary-color);
}

.ldt-tile-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ldt-tile-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.2;
}

.ldt-tile-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

/* 리뷰 내 별점/태그 간격 (rdt-review 재사용 보정) */
.rdt-review .rd-rating { font-size: 14px; }
.rdt-review .rd-tags { margin-top: -4px; }

/* ========================================
   강사 폼 프리미티브 (.lap-field/label/input/textarea — 강사 화면 공용; 레슨 신청 폼은 2026-09-09 선결제 전환으로 삭제)
   ======================================== */

.lap-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

/* 라벨 14/600 --text-secondary · 필드 46h r12 pad 0/20 stroke --border-light · 텍스트 16/600 (Figma 2195:2303 실측). */
.lap-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.2;
}

.lap-input {
    width: 100%;
    height: 46px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 0 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--card-bg);
    box-sizing: border-box;
    font-family: inherit;
}

.lap-input::placeholder { color: var(--text-secondary); font-weight: 600; }
.lap-input:focus { outline: none; border-color: var(--primary-color); }

.lap-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.lap-textarea::placeholder {
    color: var(--text-secondary);
    font-weight: 500;
}

.lap-textarea {
    width: 100%;
    min-height: 158px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--card-bg);
    box-sizing: border-box;
    resize: none;
    font-family: inherit;
}

/* --- [레슨 목록] lesson\lessonSelectStyle.css --- */
/**
 * ParkPlay Golf App - lessonSelect Style
 * 레슨 예약 페이지 전용 스타일
 */

/* ========================================
   1. 레이아웃
   ======================================== */
.lesson-select-container {
    padding: 0 16px 16px;
    /* 상단 여백은 pageHeader.jsp의 spacer가 처리 */
    display: flex;
    flex-direction: column;
    gap: 20px;
}/* ========================================
   3. 강사 리스트
   ======================================== */
.instructor-list-section .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
}

/* 바디 (설명 + 태그) */

.instructor-tags .tag.highlight {
    background: #E8F5E9;
    color: var(--primary-color);
    font-weight: 600;
}

/* ========================================
   5. 반응형
   ======================================== */

/* 즐겨찾기 버튼 위치 (position: relative는 .instructor-card 기본 정의에 포함) */

/* --- [레슨 상세] lesson\lessonDetailStyle.css --- */


/* ========================================
   1. 프로필 카드 섹션
   ======================================== */

.profile-card .btn-bookmark {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: none;
    background: var(--card-bg);
    border-radius: 50%;
    font-size: 18px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.profile-card .btn-bookmark.active {
    color: #E53935;
}

.profile-card .btn-bookmark:active {
    transform: scale(0.9);
}

.profile-photo-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    background: var(--bg-secondary, #e8eef5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 36px;
    box-shadow: var(--shadow-md);
}

.profile-badge.new {
    background: linear-gradient(135deg, #4CAF50, #81C784);
    color: white;
}

.profile-rating .rating-value {
    font-weight: 700;
    color: var(--text-primary);
}

/* ========================================
   강사 상세 카드 (배너 오버랩) — lesson-detail 전용
   ======================================== */


.lesson-detail-card .btn-bookmark {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: none;
    background: var(--card-bg);
    border-radius: 50%;
    font-size: 17px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.lesson-detail-card .btn-bookmark.active {
    color: var(--danger);
}

.lesson-detail-card .btn-bookmark:active {
    transform: scale(0.9);
}

/* 상단: 아바타 + 이름/평점 */

.lesson-detail-badge.badge-hot     { background: linear-gradient(135deg, #FF6B6B, #FF8E8E); color: var(--card-bg); }
.lesson-detail-badge.badge-new     { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: var(--card-bg); }
.lesson-detail-badge.badge-premium { background: linear-gradient(135deg, var(--accent-color), #FFA500); color: var(--text-primary); }

.instructor-detail-rating .rating-value {
    font-weight: 700;
    color: var(--text-primary);
}

/* 활동 위치 섹션 */
.lesson-static-map {
    width: 100%;
    height: 150px;
}
.lesson-addr-bar {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-light);
}
.lesson-addr-bar i {
    color: var(--danger);
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 13px;
}
.lesson-addr-bar .addr-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lesson-addr-bar .addr-basic {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.lesson-addr-bar .addr-detail {
    font-size: 12px;
    color: var(--text-muted);
}

/* lesson-detail 전용: 콘텐츠 섹션 좌우 패딩 */

.intro-tags .tag {
    padding: 6px 12px;
    background: var(--primary-color);
    color: #ffffff;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
}
.intro-tags .tag i {
    margin-right: 4px;
    font-size: 11px;
}.career-list li {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

.career-list .year {
    flex-shrink: 0;
    width: 80px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
}

.career-list .desc {
    font-size: 14px;
    color: var(--text-primary);
}
.program-card {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
}

.program-card.popular {
    border: 2px solid var(--primary-color);
}

.program-price .original-price {
    font-size: 12px;
    color: var(--text-secondary);
    text-decoration: line-through;
    display: block;
}

.program-price .discount-rate {
    font-size: 12px;
    color: #E53935;
    font-weight: 600;
    margin-left: 4px;
}

.program-price .price {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
}

/* ========================================
   6. 수강생 리뷰
   ======================================== */

.review-summary {
    display: flex;
    gap: 24px;
    padding: 20px;
    margin-bottom: 16px;
}

.rating-big {
    flex-shrink: 0;
    text-align: center;
}

.rating-big .rating-value {
    font-size: 42px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.rating-big .rating-stars {
    margin-top: 8px;
}

.rating-big .rating-stars i {
    color: #FFD700;
    font-size: 14px;
}

.rating-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rating-bar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.rating-bar-item .bar {
    flex: 1;
    height: 6px;
    background: var(--border-light);
    border-radius: 3px;
    overflow: hidden;
}

.rating-bar-item .fill {
    height: 100%;
    width: var(--width, 0%);
    background: linear-gradient(135deg, var(--accent-color), #FFA500);
    border-radius: 3px;
}

.review-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.review-card {
    padding: 16px;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.reviewer-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reviewer-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.reviewer-rating i {
    color: #FFD700;
    font-size: 12px;
}

.reviewer-rating i.far {
    color: var(--border-color);
}

.review-date {
    font-size: 12px;
    color: var(--text-secondary);
}

.review-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 12px;
}


.review-tags .tag {
    padding: 4px 10px;
    background: var(--card-bg);
    color: var(--text-secondary);
    border-radius: 12px;
    font-size: 11px;
}

.btn-more-reviews {
    width: 100%;
    padding: 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-more-reviews:active {
    background: var(--border-light);
}

.btn-more-reviews i {
    margin-left: 6px;
}

/* 헤더 공유 버튼 스타일은 cmmnStyle.css에서 정의 */

/* --- [업체 상세] screen\screenDetailStyle.css, rounding\roundingDetailStyle.css --- */
/* ========================================
   시설/골프장 상세 스타일 (공통)
   lessonDetail과 공유: hero-gallery, profile, intro, program, review 섹션
   아래는 시설 상세 전용 추가 스타일
   ======================================== */

.screen-detail-container,
.rounding-detail-container {
    padding: 0 16px 170px;
    /* bottom-action-bar(약 80px) + bottomMenu(70px) + 여유(20px) */
}.facility-status.open {
    color: #4CAF50;
}

.facility-status.open i {
    font-size: 7px;
}
.facility-status .hours {
    color: var(--text-secondary);
}.quick-info-item i {
    color: var(--primary-color);
    font-size: 11px;
}.hero-image-placeholder i {
    font-size: 36px;
}

/* 요금 이용시간 */
.program-card .duration-info {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* 리뷰 이미지 */
.review-image {
    margin-top: 10px;
}

.review-image img {
    max-width: 100%;
    border-radius: 8px;
    max-height: 200px;
    object-fit: cover;
}

/* 업체 답변 */
.review-reply {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-color);
    border-radius: 8px;
    border-left: 3px solid var(--primary-color);
}

.review-reply .reply-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 6px;
}

.review-reply p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.review-reply .reply-date {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* 업체 공지사항 */

.screen-notice-card {
    padding: 14px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.screen-notice-card:active {
    transform: scale(0.98);
}

.screen-notice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.screen-notice-type {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.screen-notice-type.badge-notice {
    /* 흰 .rdt-card 위에 얹히는 알약이라 배경 토큰(--bg-color)을 쓰면 안 된다 —
       2026-08-18 시안 정합으로 --bg-color 가 #FFFBF5 → #FFFEFB(순백 근처)가 되면서
       카드 흰색과의 차이가 (0,4,10) → (0,1,4) 로 줄어 알약이 사라졌다
       (2026-08-19 실측: screenDetail 6006 배지 rgb(255,254,251) vs 카드 rgb(255,255,255)).
       형제 badge-event(#FFF9E6)·badge-discount(#FFF0F0)는 보이는데 공지만 안 보였다.
       의도는 '화면 배경'이 아니라 '흰 면 위의 연한 칩' 이므로 보조면 토큰을 쓴다. */
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.screen-notice-type.badge-event {
    background: #FFF9E6;
    color: var(--text-primary);
}

.screen-notice-type.badge-discount {
    background: #FFF0F0;
    color: var(--text-primary);
}

.screen-notice-date {
    font-size: 11px;
    color: var(--text-muted);
}

.screen-notice-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}

.screen-notice-period {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    display: inline-block;
}.additional-info-card p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-line;
}

/* --- [스크린 상세] 공지 상세 팝업 --- */
.notice-detail-modal .modal-content {
    max-height: 85vh;
}

.notice-detail-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notice-detail-header-left h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.notice-detail-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
    line-height: 1.4;
}

.notice-detail-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--text-muted);
}

.notice-detail-meta i {
    margin-right: 4px;
}

.notice-detail-image {
    margin-bottom: 16px;
}

.notice-detail-image img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

.notice-detail-content {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.8;
    word-break: break-word;
}

.modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border-light);
}

.btn-notice-confirm {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.btn-notice-confirm:active {
    opacity: 0.9;
}

/* --- [레슨 신청] lesson\lessonApplyStyle.css --- */

/* ========================================
   2. 폼 섹션
   ======================================== */

.form-section {
    margin-bottom: 24px;
}

.form-section .section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.form-section .section-header i {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 8px;
    color: white;
    font-size: 11px;
}

.form-section .section-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.form-section .section-hint {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-secondary);
}

/* ========================================
   3. 폼 입력 필드
   ======================================== */

.form-group {
    margin-bottom: 14px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.form-label.required::after {
    content: ' *';
    color: #E53935;
}

.form-input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 15px;
    color: var(--text-primary);
    background: white;
    transition: all var(--transition-fast);
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.form-input::placeholder {
    color: #BDBDBD;
}

.chip {
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    background: white;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.chip:active {
    transform: scale(0.95);
}

.chip.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* 요일 칩 (작은 사이즈) */
#dayChips .chip {
    min-width: 44px;
    padding: 10px 14px;
    text-align: center;
}
.checkbox-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkbox-input {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.checkbox-label {
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
}

.checkbox-label .required-text {
    color: #E53935;
    font-weight: 600;
}

/* ========================================
   7. 애니메이션
   ======================================== */

.instructor-mini-section,
.form-section {
    animation: fadeInUp 0.4s ease-out both;
}

.form-section:nth-child(2) {
    animation-delay: 0.05s;
}

.form-section:nth-child(3) {
    animation-delay: 0.1s;
}

.form-section:nth-child(4) {
    animation-delay: 0.15s;
}

.form-section:nth-child(5) {
    animation-delay: 0.2s;
}

.form-section:nth-child(6) {
    animation-delay: 0.25s;
}

.form-section:nth-child(7) {
    animation-delay: 0.3s;
}

/* --- [레슨 채팅] lesson\lessonChatStyle.css --- */
/* ========================================
   레슨 채팅방 스타일 (lessonChatStyle.css)
   ======================================== */

/* 전체 화면 채팅 레이아웃 - body 스크롤 방지 */
.lesson-chat-container {
    position: fixed;
    top: 0;
    /* topMenu 없는 화면: 0부터 시작 */
    left: var(--app-shell-left);
    right: auto;
    bottom: var(--footer-total);
    width: var(--app-shell-width);
    max-width: var(--app-shell-max-width);
    /* bottomMenu 높이(56px)와 일치 */
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    overflow: hidden;
}

/* ========================================
   1. 채팅 헤더
   ======================================== */

/* 헤더 — 디자인 2209:2970 강사 밴드와 통합 (연녹 배경 + 아바타 + 그린 서브타이틀) */
.chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(12px + var(--sat)) 16px 12px;
    background: var(--primary-bg);
    flex-shrink: 0;
}

.chat-header .back-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 18px;
    color: var(--text-primary);
    text-decoration: none;
}

.chat-user-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-avatar {
    position: relative;
}

.chat-avatar img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

/* 헤더 아바타 플레이스홀더: profile-photo-placeholder(100px) 전역 스타일 덮어쓰기 */
.chat-avatar .profile-photo-placeholder {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 18px;
    box-shadow: none;
}

.online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: var(--primary-color);
    border: 2px solid var(--card-bg);
    border-radius: 50%;
}

.chat-user-detail {
    display: flex;
    flex-direction: column;
}

.chat-user-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.chat-user-status {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
}

.btn-menu {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 18px;
    color: var(--text-secondary);
    cursor: pointer;
}

/* ========================================
   1-1. 연결 상태 인디케이터 (WebSocket 끊김)
   ======================================== */

.chat-conn-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--warning, #FF9800);
    background: rgba(255, 152, 0, 0.10);
    border-bottom: 1px solid rgba(255, 152, 0, 0.25);
    flex-shrink: 0;
}

.chat-conn-banner[hidden] {
    display: none;
}

/* 거래 고지 — 금액·계좌 언급이 그려지면 열린다(js/cmmnChatFilter.js). 연결 배너 톤을 그대로 쓰되 두 줄이라 좌측 정렬. */
.chat-trade-notice {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    line-height: 1.4;
}

/* 이용안내 (2026-09-07) — 헤더 우측의 작은 회색 글귀. 누르면 PkpDialog.alert 로 채팅 이용안내(분쟁 시 열람) 팝업.
   상시 띠(.chat-notice, 09-06)를 대체한다 — 고지는 채팅 이용 자체에 대한 안내라 상시 노출 대신 진입점만 둔다.
   글귀는 작아도 탭 영역은 이웃 버튼(.btn-menu 40px)과 같은 높이로 맞춘다. <button> 은 body 글꼴을 상속하지 않아 font: inherit.
   색은 --text-muted(연녹 헤더 위 2.8:1)가 아니라 AA 를 넘는 --text-secondary(5.6:1). */
.chat-guide-btn {
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 6px;
    background: transparent;
    border: none;
    font: inherit;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
}

/* ========================================
   1-2. 새 메시지 점프 버튼 (과거 열람 중 수신)
   ======================================== */

/* 입력창 바로 위에 떠 있는 알약형 버튼. 토스트를 대체한다 - 토스트는 2.5초 뒤 사라져
   도착 사실의 근거가 남지 않고, 최신으로 가려면 직접 스크롤해야 했다.
   position:absolute + 부모(.lesson-chat-container) 기준으로 입력창 위에 띄운다. */
.chat-new-msg-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 91px;                 /* 입력영역 = padding 12 + wrapper 55 + padding 12 = 79 + 여유 12 */
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--primary, #2E7D32);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.chat-new-msg-btn:active {
    opacity: 0.85;
}

/* display:inline-flex 가 UA 의 [hidden] 규칙을 덮으므로 명시적으로 숨긴다
   (.chat-conn-banner[hidden] 과 같은 이유·같은 형태). */
.chat-new-msg-btn[hidden] {
    display: none;
}

/* ========================================
   2. 채팅 메시지 영역
   ======================================== */

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 날짜 구분선 */
/* 날짜 구분선 (디자인 2209:2978 — 플레인 텍스트) */
.chat-date-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
}

.chat-date-divider span {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

/* 메시지 그룹 */
.message-group {
    display: flex;
    gap: 8px;
    max-width: 85%;
}

.message-group.mine {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message-group.other {
    align-self: flex-start;
}

/* 아바타 — 디자인은 메시지별 아바타 없음(헤더 밴드로 대체). 마크업은 유지, 표시만 숨김 */
.message-avatar {
    display: none;
}

/* 메시지 내용 */
.message-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.message-group.mine .message-content {
    align-items: flex-end;
}

.message-group.other .message-content {
    align-items: flex-start;
}

/* 메시지 버블 */
/* 메시지 버블 (디자인 말풍선 — r12, 15/500) */
.message-bubble {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
}

.message-group.mine .message-bubble {
    background: var(--primary-color);
    color: white;
}

.message-group.other .message-bubble {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.message-bubble p {
    margin: 0;
}

/* 메시지 시간/상태 */
.message-time {
    font-size: 12px;
    color: var(--text-muted);
}

.message-status {
    display: flex;
    align-items: center;
    gap: 4px;
}

.message-status i {
    font-size: 11px;
    color: var(--text-secondary);
}

.message-status i.read {
    color: var(--primary-color);
}

/* 새 메시지 애니메이션 */
.message-group.new {
    animation: slideIn 0.3s ease-out;
}.system-icon.apply {
    background: #E3F2FD;
    color: #1976D2;
}


/* ========================================
   4. 채팅 입력 영역
   ======================================== */

/* 디자인 2209:3004 — 보더 컨테이너(55h r12) 안에 입력 + 원형 그린 전송 */
.chat-input-area {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-color);
    flex-shrink: 0;
}

.chat-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 55px;
    padding: 0 8px 0 20px;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
}

.chat-input-wrapper:focus-within {
    border-color: var(--primary-color);
}
/* ── 채팅 차단 표시 (2026-09-01) ────────────────────────────────────────────
   #chatMessages 자리를 채우는 안내와 입력창 자리를 대신하는 해제 버튼.
   마스킹 자체는 서버 렌더가 붙인 .hidden 이 한다 — JS 는 CDN(SockJS/StompJS)
   로드 뒤에야 도는데 마스킹을 JS 에 맡기면 그 사이 차단한 대화가 그대로 보인다.
   그래서 이 두 규칙은 '가려진 자리' 의 정렬만 담당한다. */
.chat-blocked-notice {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 24px;
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
}

/* 입력창(.chat-input-wrapper)과 같은 flex:1 을 물려 폭이 그 자리에 정확히 맞는다 */
.chat-unblock-btn {
    flex: 1;
    padding: 12px 0;
    background: var(--card-bg);
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
    font-family: inherit;
}


.chat-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    background: transparent;
    box-sizing: border-box;
}

.chat-input:focus {
    outline: none;
}

.chat-input::placeholder {
    color: var(--text-secondary);
    font-weight: 600;
}

.btn-send {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    border: none;
    border-radius: 50%;
    font-size: 15px;
    color: white;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-send:active {
    background: var(--primary-hover);
    transform: scale(0.92);
}

/* ========================================
   5. 채팅 메뉴 모달
   ======================================== */


.modal-menu {
    width: 100%;
    max-width: 500px;
    background: white;
    border-radius: 20px 20px 0 0;
    padding: 8px 0 calc(24px + var(--sab));
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 24px;
    background: transparent;
    border: none;
    font-size: 15px;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    text-align: left;
}

.menu-item:active {
    background: var(--card-bg);
}

.menu-item i {
    width: 24px;
    text-align: center;
    font-size: 16px;
    color: var(--text-secondary);
}

.menu-item.danger {
    color: #E53935;
}

.menu-item.danger i {
    color: #E53935;
}

.menu-close {
    width: calc(100% - 32px);
    margin: 8px 16px 0;
    padding: 14px;
    background: var(--card-bg);
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
}

.menu-close:active {
    background: var(--border-color);
}

/* 채팅방 빈 상태 / 환영 메시지 */
.chat-welcome-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.chat-welcome-icon {
    font-size: 52px;
    color: var(--border-color);
    margin-bottom: 16px;
}

.chat-welcome-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.chat-welcome-sub {
    font-size: 13px;
    color: var(--text-muted);
}

/* --- [커뮤니티] community\communityStyle.css --- */
/**
 * ParkPlay Golf App - Community Style
 * 커뮤니티 게시판 전용 스타일
 */

/* ========================================
   1. 커뮤니티 컨테이너
   ======================================== */
.community-container {
    padding: 16px;
    padding-bottom: 100px;
}

@keyframes likeAnimation {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}


/* ========================================
   4. FAB 글쓰기 버튼
   ======================================== */
/* FAB 글쓰기 버튼 */

.fab-write:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(46, 125, 50, 0.5);
}

.fab-write:active {
    transform: scale(0.95);
}

/* ========================================
   9. 반응형
   ======================================== */
@media (min-width: 768px) {
    .community-container {
        max-width: 600px;
        margin: 0 auto;
    }

    .floating-buttons {
        right: calc(50% - 300px + 20px);
    }
}

/* shimmer 키프레임은 cmmnStyle.css에 정의됨 */

/* --- [즐겨찾기] bookmarkSelect (Figma 2205:2485 '07. 즐겨찾기' 리스킨, 2026-07-22) --- */

/* ========================================
   1. 컨테이너 — 탭바는 풀블리드(-16px)
   ======================================== */
.bookmark-select-container {
    padding: 0 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 언더라인 탭 정본은 cmmnStyle.css '27. 탭 컴포넌트' 다 (Figma 2205:2485).
   색·높이·굵기를 여기서 다시 적으면 정본과 갈린다. 화면 스코프에 남기는 것은 위치 보정뿐. */
/* 탭 행은 컨테이너 첫 자식이라 컨테이너 상단 = 헤더 하단에 그대로 붙는다(시안).
   spacer 시절의 margin-top:-20(선행 flex gap 상쇄)은 구역 레이아웃에서 헤더 밑으로
   파고들게 하므로 제거했다(2026-08-21). 좌우 -16px 는 컨테이너 패딩을 되돌려
   구분선이 화면 끝까지 닿게 한다(시안). */
.bookmark-select-container .tab-section {
    margin: 0 -16px 20px;
}

/* ========================================
   3. 목록 (카드 = 라운딩 목록 .rd-card 재사용)
   ======================================== */
.bookmark-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ========================================
   4. 즐겨찾기 빈 상태 확장 (스코핑)
   ======================================== */
.bookmark-select-container .empty-state {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}


/* --- [공지 v2] noticeList/noticeView (파크플레이(1) 2215:3208 / 2234:3244 리스킨, 2026-07-22) --- */

/* 카테고리 칩 (디자인 알약 — 활성=primary) */
.ntc-chips {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ntc-chips::-webkit-scrollbar { display: none; }

/*
   칩 — 시안 실측(2026-08-03). 6개 화면(커뮤니티 목록/작성 · 공지 목록 · 문의 목록/작성 · 레슨 목록)
   전부 동일하다: h28 · r16 · 12/700 · pad 10/0 좌우
     활성   배경 #569544(--primary-color) + 흰 텍스트, 보더 없음
     비활성 배경 #f3f4f0 + 보더 #e9e9e9 + 텍스트 #8b9288(--text-muted)
   구현은 h42(pad 9/16 + 14px) · r20 · 흰 배경 · 텍스트 --text-secondary 였다.
   #f3f4f0(Neutral/Mist 100) · #e9e9e9 는 팔레트 밖이라 --bg-secondary · --border-light 로 근사.
*/
.ntc-chip {
    flex-shrink: 0;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    background: var(--bg-secondary);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
}

.ntc-chip.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* 공지 카드 (디자인 2215:3211 — white r12, 라벨+날짜 / 볼드 제목) */
.ntc-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ntc-card {
    display: block;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.ntc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ntc-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-color);
}

.ntc-date {
    font-size: 15px;
    color: var(--text-muted);
}

.ntc-title {
    margin: 8px 0 0;
    /* Figma 실측: 공지 카드 제목은 16/600 (2215:3208) — 커뮤니티 카드 제목과 같은 값이다.
       구현은 17/700 이었다. */
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 상세 (디자인 2234:3244 — 플레인 본문 + 하단 확인) */
.ntc-view {
    padding: 8px 4px 0;
}

.ntc-view-title {
    margin: 10px 0 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
}

.ntc-view-meta {
    margin-top: 8px;
    font-size: 14px;
    color: var(--text-muted);
}

.ntc-view-content {
    margin-top: 24px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-primary);
}

.ntc-view-footer {
    margin-top: 32px;
    padding-bottom: 8px;
}

.ntc-confirm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* 시안 실측: 공통 CTA(버튼_기본_텍스트)는 342x60 r12 · 라벨 16/600.
       문의 등록 · 공지 상세 확인 · 문의 목록 CTA 가 모두 이 값이다. 구현은 56h r14 17/700 이었다.
       커뮤니티 등록만 시안이 343x48 r10 으로 다르므로 .cm-submit-btn 에서 따로 덮는다. */
    height: 60px;
    border: none;
    border-radius: 12px;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.ntc-confirm-btn:active {
    background: var(--primary-hover);
}

/* --- [커뮤니티 v2] communityList/View/Write (파크플레이(1) 2205:3131/2205:4345/2208:3373 리스킨, 2026-07-22)
   알약 칩(.ntc-chip)·확인 버튼(.ntc-confirm-btn)은 공지 화면과 공용 --- */

/* 탭 본문(클럽하우스 커뮤니티 / 대회·이벤트).
   탭 래퍼를 끼우면 컨테이너(.cm-list-container)의 flex gap 16 이 래퍼 바깥에서 끊겨
   검색카드 위/아래 간격이 스크린예약(.screen-select-container: padding 0 16px 24px · gap 16)과
   달라진다. 래퍼 자신이 같은 리듬을 이어받게 해서 그 차이를 없앤다. */
.cm-tab-pane {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 지역 필터 칩 — 커뮤니티·대회/이벤트·글쓰기 공용. 탭하면 공용 지역 선택 모달
   (regionModal.jsp #locationModal, cmmnStyle §6)을 띄운다.
   높이·라운드는 옆의 .compact-distance-select(정렬)와 맞췄다. */
.region-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--card-bg);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.region-filter-btn i.fa-location-dot { color: var(--primary-color); }
.region-filter-btn i.fa-chevron-down { font-size: 10px; color: var(--text-muted); }

/* 글쓰기 화면의 지역 칩은 폼(flex column)에서 내용폭만 차지해야 한다 —
   그대로 두면 라벨/입력처럼 한 줄을 가득 채운다. */
.cm-write-container .region-filter-btn { align-self: flex-start; }

.cm-sect-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cm-sect-title {
    /* Figma: 시안 18/700 (커뮤니티 2205:3131 · 레슨 57:1131 동일) */
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

/* 게시물 카드 (디자인 2205:3139) */
.cm-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cm-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--card-bg);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.cm-card-main {
    flex: 1;
    min-width: 0;
}

.cm-cat {
    /* Figma: 시안 14/700 #569544 */
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
}

.cm-title {
    /* Figma: 시안 16/600 (커뮤니티·공지 카드 제목 동일) */
    margin: 8px 0 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cm-meta {
    /* Figma: 시안 14/400 */
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.cm-foot {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.cm-comments {
    /* Figma: 시안 14/700 #3f7436 */
    font-size: 14px;
    font-weight: 700;
    /* 시안 실측 #3F7436 = --primary-dark 정확 일치 (목록 '댓글 6'·상세 '댓글 14' 공통).
       리스킨이 한 톤 밝은 --primary-color 로 넣어 뒀던 것을 2026-08-03 교정. */
    color: var(--primary-dark);
}

.cm-like {
    /* Figma: 시안 14/700 */
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
}

/*
   좋아요 하트 색 — 시안 벡터 실측(2026-08-03) 기준.
   시안은 "숫자"가 아니라 "하트 아이콘"으로만 상태를 표현한다:
     상세(2205:4345 / 2208:3033)  아이콘 눌림 #e40004 / 안 눌림 #e8e8e8 · 숫자는 #596158 고정
     목록(2205:3131)              아이콘·숫자 모두 #e40004 (안 눌림 예시가 시안에 없다)
   팔레트에 #e40004·#e8e8e8 은 없어 근사 매핑한다(파이프라인 §3 하드코딩 금지):
     #e40004 -> --danger(#C95F55, 2026-07-22 리스킨 결정) · #e8e8e8 -> --border-light(#DDE4DA)

   정정 기록: 처음엔 "시안이 좋아요 상태를 표현하지 않는다"고 판단해 숫자 색까지 상태로 바꿨으나
   틀렸다. 카운트 텍스트 색만 보고 하트 아이콘 벡터의 fills 를 확인하지 않은 탓이다.
   상세 시안의 마지막 댓글 하트가 #e8e8e8 로 "안 누른 상태"를 이미 그리고 있었다.
*/
.cm-like i { font-size: 14px; color: var(--border-light); }   /* 시안 하트 벡터 14x14 */
.cm-like.liked i { color: var(--danger); }

/* 목록 카드는 숫자도 빨강 고정 — 시안 3장 모두 #e40004 다 */
.cm-card .cm-like { color: var(--danger); }

/* 대회/이벤트 카드 전용 — 커뮤니티 글과 달리 기간이 있어서 목록에서 상태를 먼저 읽어야 한다.
   배경 3색만 리터럴이다: 팔레트에 연한 tint 토큰이 없고(전경색 --primary-color/--danger/
   --text-muted 는 토큰을 쓴다), 여기서 새 전역 변수를 만들 만큼 재사용처가 없다. */
.ev-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

.ev-status.open   { background: #E8F3E4; color: var(--primary-color); }
.ev-status.soon   { background: #FDECEC; color: var(--danger); }
.ev-status.closed { background: #F1F0EF; color: var(--text-muted); }

.ev-period {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.cm-card-thumb {
    /* Figma 실측(2205:3131): 카드 우측 썸네일은 76x76 r10 (x=263 · 2장 동일).
       구현은 84x84 r12 였다. */
    width: 76px;
    height: 76px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

/* FAB 글쓰기 (디자인 그린 원형 연필) */
.fab-write {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 20px;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    /* 1차 정의에서 이관 — :hover/:active transform 이 이 transition 을 쓴다 */
    transition: all var(--transition-smooth);
}

/* ── 상세 (디자인 2205:4345) ── */
.cm-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cm-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-secondary);
    object-fit: cover;
    object-position: top;
}

.cm-profile-name {
    /* Figma: 시안 16/600 */
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.cm-profile-meta {
    /* Figma: 시안 12/500 #596158 */
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.cm-view-title {
    /* Figma: 시안 20/700 lh24 (=1.2) */
    margin: 6px 0 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.cm-view-body {
    /* Figma: 시안 15/500 lh21 (=1.4) */
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-primary);
    font-weight: 500;
}

/* 본문/댓글은 사용자 입력 평문이라 개행을 살린다 — 서버는 <c:out> 으로 escape 만 하고
   <br> 로 치환하지 않는다(리뷰 본문 .rdt-review-text 등과 같은 처리) */
.cm-view-body p { margin: 0 0 12px; white-space: pre-line; }
.cm-view-body p:last-child { margin-bottom: 0; }

.cm-comment-empty {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
    padding: 20px 0;
}

/* 내 댓글 인라인 수정 — 본문을 숨기고 그 자리에 입력+저장/취소를 띄운다 */
.cm-edit-box {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 8px 0 0;
}

.cm-edit-box .cm-edit-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    font-size: 14px;
}

.cm-edit-box .cm-owner-btn {
    flex: 0 0 auto;
}

.cm-img-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    /* 트랙 좌우 끝에서 스크롤이 조상(.app-content)·뷰포트로 연쇄되면 브라우저가 그 오버스크롤을
       뒤로가기 제스처로 읽어 글 상세를 이탈한다(2026-08-17 QA P-24). 세로 연쇄는 그대로 둔다 —
       글 본문 스크롤은 이 트랙 위에서도 이어져야 한다. */
    overscroll-behavior-x: contain;
    margin: 0 -16px;
    padding: 0 16px;
    /* 스크롤포트는 padding box(=풀블리드 폭)라 스냅 기준선도 화면 끝이다.
       위 padding 과 같은 16px 을 넣어야 스냅 후에도 좌측 거터가 유지된다. 두 값은 같이 움직인다. */
    scroll-padding: 0 16px;
}

.cm-img-scroll::-webkit-scrollbar { display: none; }

/* 동영상도 같은 규격으로 흐른다 — 커뮤니티 첨부는 이미지·동영상 혼합이다(사양 2026-08-04) */
.cm-img-scroll img,
.cm-img-scroll video {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 78%;
    max-width: 320px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
}
/* 마지막 장은 start 로 스냅할 수 없다 — 그 위치(itemOffset)가 최대 스크롤을 넘어서
   스크롤이 끝에서 클램프되고, 결과적으로 마지막 장만 좌측 여백이 튄다(QA 실측 390px:
   16px → 94.9px). 마지막 장만 end 로 맞추면 우측 거터 16px 에 정확히 서고 그 위치는
   항상 도달 가능하다. scroll-padding 의 우측 16px 이 그 기준선이다. */
.cm-img-scroll img:last-child,
.cm-img-scroll video:last-child {
    scroll-snap-align: end;
}

.cm-count-line {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cm-divider {
    height: 1px;
    background: var(--border-light);
    margin: 0 -16px;
}

/* 댓글 (디자인 2205:4400) */
.cm-comment-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cm-comment {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-light);
}

.cm-comment:last-child { border-bottom: none; }

.cm-comment-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.cm-comment-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.cm-comment-time {
    /* Figma: 시안 12/600 #569544 */
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
}

.cm-comment-text {
    /* Figma: 시안 14/400 lh16.8 (=1.2) */
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.2;
    color: var(--text-primary);
    white-space: pre-line;
}

.cm-comment-actions {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.cm-comment-actions .cm-like { font-size: 14px; }

.cm-reply-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
}

.cm-owner-actions {
    margin-left: auto;
    display: flex;
    gap: 12px;
}

.cm-owner-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 600;          /* 시안 14/600 */
    color: var(--text-muted);  /* 시안 #b7b7b7 — 팔레트 밖이라 --text-muted(#8B9288) 근사 */
    cursor: pointer;
    font-family: inherit;
}

/* ── 커뮤니티 차단 표시 (2026-09-01) ────────────────────────────────────────
   목록 카드·상세 본문·댓글·대댓글 네 자리가 아래 세 훅을 공유한다.
   실제 숨김은 기존 .hidden 이 하고 여기 있는 것은 가려진 자리의 여백·문구뿐이다.
   .cm-blocked-hidden 에는 스타일을 주지 않는다 — JS 가 '내가 숨긴 원본' 을
   표시하는 마커여서, 스타일을 주면 해제 시 제자리 복원이 그것에 걸린다. */
.cm-card-blocked {
    /* .cm-card 크롬(배경·라운드·그림자·display:flex)을 그대로 물려받되,
       썸네일과 본문이 없는 1행이라 세로 패딩만 줄인다 */
    padding: 16px 20px;
    cursor: default;
}

.cm-blocked-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
}

.cm-blocked-msg {
    /* 목록 카드에서는 부모가 .cm-card 의 display:flex 라 flex:1 이 필요하다 */
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--text-muted);
}

.cm-unblock-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
    font-family: inherit;
}

/* 대댓글 인셋 카드 */
.cm-reply {
    margin-top: 12px;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
}

/* 댓글 입력 바 (하단 고정) */
.cm-input-bar {
    position: fixed;
    bottom: var(--footer-total);
    left: var(--app-shell-left);
    width: var(--app-shell-width);
    max-width: var(--app-shell-max-width);
    padding: 12px 16px;
    background: var(--card-bg);
    box-shadow: 0 -5px 12px rgba(0, 0, 0, 0.04);
    z-index: 90;
}

.cm-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 55px;
    padding: 0 8px 0 16px;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    background: var(--card-bg);
}

.cm-input {
    /* Figma: 시안 16/600 #596158 */
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    color: var(--text-primary);
    font-family: inherit;
    font-weight: 600;
}

.cm-input::placeholder { color: var(--text-muted); }

.cm-send-btn {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
}

.cm-send-btn:disabled {
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: default;
}

/* 상세 컨테이너 — 입력 바 공간 확보 */
.cm-view-container {
    padding-bottom: 120px !important;
}

/* 더보기 액션시트 (디자인 2208:2634) */
.cm-sheet-overlay {
    position: fixed;
    inset: 0;
    left: var(--app-shell-left);
    width: var(--app-shell-width);
    max-width: var(--app-shell-max-width);
    background: rgba(0, 0, 0, 0.45);
    z-index: 200;
    display: flex;
    align-items: flex-end;
}

/*
   더보기 액션시트 — 시안 실측(2208:2634 / 2208:3033):
     컨테이너 375x300 흰 배경 · 버튼 340x60 배경 #f3f4f0 · 텍스트 16/600 #596158
     공유/수정(신고)/삭제 는 gap 0 으로 한 덩어리, 취소만 20 떨어져 r12 로 분리
     '글 삭제하기' 만 #c95f55 = --danger (정확 일치, 파괴적 동작 표식)
   #f3f4f0 은 Neutral/Mist 100 — --bg-secondary(#F5F2EC) 로 근사 매핑(백로그 §4.1 이관 결정).
*/
.cm-sheet {
    width: 100%;
    background: var(--card-bg);
    border-radius: 20px 20px 0 0;
    padding: 24px 16px calc(24px + var(--sab));
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 공유/수정/삭제 묶음 — 구분선으로 나뉜 하나의 카드 */
.cm-sheet-group {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
}

.cm-sheet-group .cm-sheet-btn { border-radius: 0; }
.cm-sheet-group .cm-sheet-btn + .cm-sheet-btn { border-top: 1px solid var(--border-light); }

.cm-sheet-btn {
    height: 60px;
    border: none;
    border-radius: 12px;
    background: var(--bg-secondary);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
}

.cm-sheet-btn:active { background: var(--border-light); }

/* 파괴적 동작 */
.cm-sheet-danger { color: var(--danger); }

/*
   신고 사유 시트 — 시안에 없는 화면이라 더보기 시트의 치수를 그대로 물려쓴다.
   제목만 추가한다(어떤 목록인지 알려야 하고, 시트 골격을 두 용도로 쓰기 때문).
*/
.cm-sheet-title {
    margin: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

/*
   사유가 6개라 60px x 6 = 360px 이다. 작은 화면(예: 667px)에서 취소 버튼이 밀려
   화면 밖으로 나가지 않게 목록만 스크롤한다 — 취소는 항상 보여야 한다.
*/
.cm-sheet-scroll {
    max-height: 52vh;
    overflow-y: auto;
}

/*
   '기타' 부가 설명 입력 — 작성 화면의 textarea 와 같은 모양을 쓰되 시트 안이라 낮게 둔다
   (cm-write-textarea 는 min-height 158 로 시트에 넣으면 취소 버튼을 밀어낸다).
   시트는 두 단계가 세로로 쌓이지 않고 교대로 보이므로 마진은 아래쪽만 준다.
*/
.cm-report-etc {
    width: 100%;
    min-height: 96px;
    margin: 12px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--card-bg);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--text-primary);
    font-family: inherit;
    resize: none;
    box-sizing: border-box;
}

.cm-report-etc:focus {
    outline: none;
    border-color: var(--primary-color);
}

.cm-report-etc-submit {
    width: 100%;
    margin-top: 12px;
}

/* ── 작성 (디자인 2208:3373) ── */
.cm-write-label {
    margin: 8px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.cm-write-input {
    width: 100%;
    height: 55px;
    padding: 0 16px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--card-bg);
    /* 시안 실측: 입력/플레이스홀더는 양쪽 시안(2208:3373 · 2213:3226) 모두 16/600 #596158.
       구현은 15/400 이었다. 문의가 따로 16px 로 덮던 것을 기본값으로 올린다. */
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: inherit;
}

.cm-write-input:focus,
.cm-write-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.cm-write-textarea {
    width: 100%;
    /* 시안 실측(커뮤니티 2208:3373 · 문의 2213:3226 동일): 높이 158 · 텍스트 16/600.
       기존 240 / 15px 은 양쪽 어느 시안과도 맞지 않는 잔재였고 문의만 따로 덮고 있었다. */
    min-height: 158px;
    padding: 16px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--card-bg);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--text-primary);
    font-family: inherit;
    resize: vertical;
}

.cm-write-hint {
    margin: 4px 0 0;
    /* 시안 실측: 양쪽 시안 모두 12/600. 구현은 14 였고 문의만 12 로 덮고 있었다. */
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

/* 글자수 카운터 힌트 — 오른쪽 정렬 · 안내 문구보다 옅다(문의 작성 2213:3226) */
.cm-write-hint--count {
    text-align: right;
    font-weight: 500;
    color: var(--text-muted);
}

.cm-media-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0;
}

.cm-media-grid::-webkit-scrollbar { display: none; }

.cm-media-add,
.cm-media-item,
.qna-image-preview {
    /* 시안 실측 60x60 r12 (커뮤니티 2208:3373 · 문의 2213:3226 동일).
       기존 92 는 잔재였고 문의만 60 으로 덮고 있었다 — 기본값을 시안에 맞춘다. */
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 12px;
}

.cm-media-add {
    /* 빈 슬롯 — 시안(커뮤니티 2208:3373 · 문의 2213:3226 동일): 점선 stroke #eaeaea dash 2,2,
       카메라 아이콘 20x20 도 같은 연회색. 팔레트 근사값은 --border-light(#DDE4DA). */
    border: 1px dashed var(--border-light);
    background: var(--card-bg);
    color: var(--border-light);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cm-media-item,
.qna-image-preview {
    position: relative;
    overflow: hidden;
    /* 업로드된 칸도 시안엔 실선 보더가 있다(#ebebeb) — 흰 이미지가 배경에 묻히지 않게 한다.
       팔레트 근사값은 빈 슬롯과 같은 --border-light. */
    border: 1px solid var(--border-light);
}

.cm-media-item img,
.cm-media-item video,
.qna-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 동영상 슬롯의 재생 배지 — 커뮤니티는 이미지·동영상을 함께 받으므로(사양 2026-08-04)
   썸네일만 보고 둘을 구분할 수 있어야 한다. 클릭은 슬롯이 받으므로 이벤트를 통과시킨다. */
.cm-media-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.28);
    color: #ffffff;
    font-size: 18px;
    pointer-events: none;
}

.cm-media-remove,
.btn-img-remove {
    /* 시안 실측(커뮤니티 2208:3373 · 문의 2213:3226 동일): 슬롯 우상단 top 6 / right 5,
       16x16 검정 원 + 흰 X. 기존 22x22 / rgba(0,0,0,.65) 는 시안과 달랐다.
       검정은 브랜드 색이 아니라 순수 흑이라 토큰화 대상이 아니다(오버레이 딤도 같은 방식). */
    position: absolute;
    top: 6px;
    right: 5px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #000000;
    color: #ffffff;
    font-size: 9px;
    cursor: pointer;
}

/* 16px 은 탭 타깃으로 작다 — 보이는 크기는 시안대로 두고 히트 영역만 넓힌다 */
.cm-media-remove::after,
.btn-img-remove::after {
    content: '';
    position: absolute;
    inset: -7px;
}

.cm-guide-banner {
    margin-top: 8px;
    padding: 16px;
    background: var(--primary-bg, #EAF4D8);
    border-radius: 12px;
}

.cm-guide-title {
    /* Figma: 시안 14/700 #569544 */
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
}

.cm-guide-desc {
    /* Figma: 시안 12/500 #596158 */
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.cm-submit-btn {
    width: 100%;
    margin-top: 16px;
    /* 커뮤니티 등록 버튼만 시안이 다르다 — 2208:3373 은 343x48 r10 이고,
       컴포넌트(버튼_기본_텍스트 342x60 r12)를 쓰지 않은 별개 도형이다.
       공통 .ntc-confirm-btn(60/12)을 여기서만 덮는다. 라벨 16/600 은 공통과 같다. */
    height: 48px;
    border-radius: 10px;
}

/* 커뮤니티 공통 컨테이너 — 섹션 간 간격 */
.cm-list-container,
.cm-view-container,
.cm-write-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 16px 24px;
}

.cm-write-container form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- [공지 목록] notice\noticeListStyle.css --- */
/* 공지사항 목록 페이지 전용 스타일 */
/* 공통 스타일은 cmmnHead.jsp에서 로드됨 */

/* 공지사항 목록 페이지 전용 스타일 */

/* 컨테이너 */
.notice-list-container {
    padding: 0 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* 카테고리 필터 칩 (1행) */
/* .filter-chips 공통 스타일은 cmmnStyle.css에 정의됨 */

/* 검색 폼 (2행) */
/* flex:1 은 noticeList.jsp 의 인라인 style= 에 있던 값 — pkp_app 인라인 스타일 금지 규칙에
   맞춰 여기로 옮겼다 (2026-08-17 QA P-32 작업 중). .compact-toolbar 가 flex 라 폼이 남은 폭을 채운다. */
.notice-list-container .search-form {
    display: flex;
    flex: 1;
    gap: 8px;
    align-items: center;
}

/* --- [공지 상세] notice\noticeViewStyle.css --- */
/* 공지사항 상세보기 페이지 전용 스타일 */
/* 공통 스타일은 cmmnHead.jsp에서 로드됨 */

/* ========================================
   컨테이너
   ======================================== */
.notice-view-container {
    padding: 0 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}


@keyframes noticeViewFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   내용 영역
   ======================================== */
.notice-content {
    padding: 24px 20px 32px;
    font-size: 15px;
    line-height: 1.85;
    color: var(--text-primary);
    min-height: 200px;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.notice-content p {
    margin: 0 0 16px 0;
}

.notice-content p:last-child {
    margin-bottom: 0;
}

.notice-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 16px 0;
    box-shadow: var(--shadow-sm);
}

.notice-content a {
    color: var(--primary-color);
    text-decoration: underline;
    font-weight: 500;
}

.notice-content ul,
.notice-content ol {
    padding-left: 20px;
    margin: 12px 0;
}

.notice-content li {
    margin-bottom: 6px;
}

.notice-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 14px;
}

.notice-content table th,
.notice-content table td {
    border: 1px solid var(--border-color);
    padding: 10px 12px;
    text-align: left;
}

.notice-content table th {
    background: var(--bg-secondary, #F5F5F5);
    font-weight: 600;
}

/* ========================================
   Empty State (오버라이드 없음 - 공통 사용)
   ======================================== */

/* ========================================
   반응형
   ======================================== */
@media (max-width: 400px) {

    .notice-content {
        padding: 20px 16px 28px;
        font-size: 14px;
    }
}

/* --- [스크린 선택] screen\screenSelectStyle.css --- */

/* 앱 모달 공통 딤 — 특정 화면 전용이 아니다(모든 pkp_app .modal-overlay 에 걸린다) */
.modal-overlay {
    /* 위치·크기는 LayoutStyle.css `body .modal-overlay`(11번 섹션)가 담당한다.
       여기서는 앱 모달 공통 딤만 조정한다 — cmmnStyle 기본값(0.6 · blur 4px)보다 옅다. */
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.map-modal-container {
    width: 92%;
    max-width: 500px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10000;
}

.map-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #EEEEEE;
}

.map-modal-header h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.map-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #F5F5F5;
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.map-modal-close:hover {
    background: #E0E0E0;
    color: var(--text-primary);
}

.map-modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.kakao-map {
    width: 100%;
    height: 350px;
}

/* 지도 API 로드 실패 에러 상태 */
.map-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
    background: var(--bg-color);
    padding: 20px;
}

.map-error-state i {
    font-size: 24px;
    color: var(--warning);
    margin-bottom: 10px;
}

.map-error-detail {
    font-size: 12px;
    color: var(--text-muted);
}

.map-selected-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--bg-color);
    font-size: 13px;
    color: var(--text-secondary);
    border-top: 1px solid #EEEEEE;
}

.map-selected-info i {
    color: var(--primary-color);
    font-size: 14px;
    flex-shrink: 0;
}

.map-modal-footer {
    display: flex;
    gap: 8px;
    padding: 12px 20px 16px;
    border-top: 1px solid #EEEEEE;
}

.map-modal-footer .btn-secondary,
.map-modal-footer .btn-primary {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.map-modal-footer .btn-secondary {
    background: #F5F5F5;
    color: var(--text-primary);
    border: none;
}

.map-modal-footer .btn-primary {
    background: var(--primary-color);
    color: white;
    border: none;
}

.map-modal-footer .btn-primary:disabled {
    background: #E0E0E0;
    color: #9E9E9E;
    cursor: not-allowed;
}

/* --- [뷰 전환 탭] 공통 view-tab-bar (디자인 57:1419 — 세그먼트 토글) --- */
.view-tab-bar {
    display: flex;
    background: var(--card-bg);
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    padding: 0;
    margin: 0;
    height: 45px;
    overflow: hidden;
}

.view-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

.view-tab.active {
    background: var(--primary-color);
    color: white;
}

.view-tab:not(.active):hover {
    background: rgba(86, 149, 68, 0.06);
}

.view-tab i {
    font-size: 14px;
}

/* --- [라운딩/스크린/레슨 지도보기] 공통 맵 컨테이너 --- */

/* 컨테이너 - 헤더 아래 가시 영역 전부.
   .app-content 는 [page-header(58+--sat, cmmnStyle.css:558) | 이 컨테이너] 세로 스택이라
   height:100% 를 주면 헤더 높이만큼 넘쳐 .app-content 가 스크롤되고, 지도 하단(선택 카드
   .rd-map-card bottom:12px)이 58+sat 만큼 하단 탭 밑으로 잘렸다. 지도가 터치를 먹어 스크롤도
   안 되니 카드 하단이 영구히 씹혀 보였다 — .login-container(:599)와 같은 셸 구역화 누락. */
.rounding-map-container,
.screen-map-container,
.lesson-map-container {
    position: relative;
    width: 100%;
    height: calc(100% - 58px - var(--sat));
    overflow: hidden;
}

/* 구 몰입형 지도(플로팅 네비/필터/바텀시트) CSS 제거 — 2026-07-22, 3개 지도 화면 모두 rd-map 템플릿 이관 완료 */

.map-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    background: #f8f9fa;
    gap: 8px;
}

.map-error i {
    font-size: 28px;
    color: #ff9800;
}

.map-error p {
    font-size: 14px;
    margin: 0;
}

/* 내 위치 마커 (파란 점) */
.my-location-dot {
    width: 20px;
    height: 20px;
    background: rgba(66, 133, 244, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: myLocPulse 2s infinite;
}

.my-location-dot-inner {
    width: 12px;
    height: 12px;
    background: #4285F4;
    border-radius: 50%;
    border: 2.5px solid white;
    box-shadow: 0 1px 4px rgba(66, 133, 244, 0.5);
}

@keyframes myLocPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }
}


/* --- [SSO 콜백] login\ssoCallbackStyle.css --- */

/* SSO 콜백 컨테이너 */
.sso-callback-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 40px 20px;
}

/* 로딩 박스 */
.sso-callback-loading {
    text-align: center;
    padding: 48px 32px;
    background: var(--card-bg, #fff);
    border-radius: 20px;
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.08));
    max-width: 320px;
    width: 100%;
    animation: fadeInUp 0.5s ease-out;
}

/* 스피너 원형 */
.sso-callback-loading .loading-spinner {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
}

.sso-callback-loading .loading-spinner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid var(--bg-secondary, #F5F5F5);
    border-top-color: var(--primary-color, #4CAF50);
    border-radius: 50%;
    animation: callbackSpin 0.8s linear infinite;
}

.sso-callback-loading .loading-spinner::after {
    content: '\f3c5';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: var(--primary-color, #4CAF50);
}

/* 로딩 텍스트 */
.sso-callback-loading .loading-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #212121);
    margin: 0 0 8px;
}

/* 로딩 점 애니메이션 */
.sso-callback-loading .loading-text::after {
    content: '';
    animation: loadingDots 1.5s ease-in-out infinite;
}

@keyframes callbackSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loadingDots {
    0% {
        content: '';
    }

    25% {
        content: '.';
    }

    50% {
        content: '..';
    }

    75% {
        content: '...';
    }
}

/* --- [마이페이지 v2] myPage (파크플레이(1) 2211:3177 리스킨, 2026-07-22) --- */
.mp-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* 상단 16px: 헤더(.app-header, in-flow sticky)와 프로필 카드 사이 간격만. 헤더 회피 padding 금지. */
    padding: 16px 16px 24px !important;
    background: var(--bg-color) !important;
}

.mp-profile-card,
.mp-quick-card,
.mp-menu-card {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 20px;
}

.mp-profile-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mp-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-secondary);
    object-fit: cover;
    object-position: top;
    flex-shrink: 0;
}

.mp-profile-info {
    flex: 1;
    min-width: 0;
}

.mp-grade {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
}

.mp-name {
    display: block;
    margin-top: 4px;
    font-size: 19px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-edit-chip {
    flex-shrink: 0;
    padding: 10px 16px;
    border: none;
    border-radius: 18px;
    background: var(--primary-bg, #EAF4D8);
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
    cursor: pointer;
    font-family: inherit;
}

/* 활동 통계 (인셋 그레이) */
.mp-stats {
    margin-top: 18px;
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 16px 0;
}

.mp-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

.mp-stat-num {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-color);
}

.mp-stat-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.mp-stat-divider {
    width: 1px;
    height: 32px;
    background: var(--border-light);
}

/* 퀵 아이콘 (홈 서비스 아이콘 재사용) — 배지 */
.mp-quick-card .home-svc-icon { position: relative; }

.mp-badge-count {
    position: absolute;
    top: -2px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
}

.mp-sect-title {
    margin: 8px 0 -4px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

/* 설정 및 안내 rows */
.mp-menu-card {
    padding: 4px 20px;
}

.mp-menu-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-light);
    text-decoration: none;
}

.mp-menu-row:last-child { border-bottom: none; }

.mp-menu-ico {
    width: 24px;
    text-align: center;
    font-size: 18px;
    color: var(--primary-color);
}

.mp-menu-text {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.mp-menu-sub {
    font-size: 14px;
    color: var(--text-muted);
}

.mp-menu-arrow {
    font-size: 13px;
    color: var(--text-muted);
}

.mp-logout-btn {
    align-self: center;
    background: none;
    border: none;
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
}

/* ── 마이페이지 서브 화면 v2 공통 조각 ── */

/* 문의 상태 라벨 (컬러 텍스트) */
.qna-status {
    font-size: 16px;
    font-weight: 700;
}
.qna-status.is-waiting  { color: var(--warning); }
.qna-status.is-answered { color: var(--primary-color); }
.qna-status.is-closed   { color: var(--text-muted); }

.qna-preview {
    margin: 8px 0 0;
    font-size: 15px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 답변 인셋 카드 (디자인 2213:3520) */
.qna-answer-card {
    background: var(--bg-secondary);
    border-radius: 14px;
    padding: 18px 20px;
}

.qna-answer-card .ntc-label { font-size: 17px; }

.qna-answer-text {
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    white-space: pre-line;
}

/* 답변 대기 상태는 실제 답변 본문보다 옅게 */
.qna-answer-text--pending {
    color: var(--text-secondary);
}

/* 문의 상세는 카드 헤드(라벨·날짜)가 제목 위에 있어 공지 상세보다 제목·본문 간격이 좁다 */
.qna-detail-container .ntc-view-title {
    margin-top: 0;
}

.qna-detail-container .ntc-view-content {
    margin-top: 8px;
    white-space: pre-line;
}

/* 문의 하단 CTA 바 — 유효 정의는 qnaStyle 섹션(뒤 순서) 참조 */

/* 나의 리뷰 카드 (디자인 2211:3616) */
.mrev-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mrev-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mrev-thumb {
    width: 88px;
    height: 88px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-secondary);
}

.mrev-name {
    margin: 6px 0 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--text-primary);
}

.mrev-visit {
    display: block;
    margin-top: 5px;
    font-size: 15px;
    color: var(--text-secondary);
}

.mrev-stars {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.mrev-stars i { color: var(--accent-color); }

.mrev-content {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
}

.mrev-imgs {
    display: flex;
    gap: 8px;
}

.mrev-imgs img {
    width: calc((100% - 16px) / 3);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
}

.mrev-date {
    text-align: right;
    font-size: 15px;
    color: var(--text-secondary);
}

/* 프로필 수정 */
.mp-edit-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.mp-edit-avatar {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: var(--bg-secondary);
    object-fit: cover;
    object-position: top;
}

.mp-edit-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
}

.mp-edit-card .cm-write-label { font-size: 16px; margin: 6px 0 0; }

.mp-readonly {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.mp-select-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
}

.mp-select-row input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    color: var(--text-primary);
    font-family: inherit;
    pointer-events: none;
}

/* 선호 지역 (2026-09-18, 04 §3④) — 라벨의 (선택) 표기와 미동의 잠금 행.
   잠금 행은 <a> 라 .mp-select-row 의 input 규칙이 닿지 않아 텍스트 색·크기를 따로 준다 */
.mp-label-optional {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
}

.mp-prefer-locked {
    text-decoration: none;
    background: var(--bg-secondary);
}

.mp-prefer-locked-text {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

/* --- [마이페이지] mypage\mypageStyle.css --- */

/* 컨테이너 — .app-header(56+--sat, LayoutStyle.css:403) 아래 가시 영역. 종전 100vh 는 헤더+하단 탭만큼
   넘쳐 짧은 내용에서도 빈 스크롤 띠가 생겼다. 기준·이유는 .sso-profile-container(:839) 참조 */
.mypage-container {
    padding-bottom: 24px;
    background: var(--bg-secondary, #F5F5F5);
    min-height: calc(100% - var(--header-height) - var(--sat));
}

.mypage-withdraw-link {
    border: none;
    background: transparent;
    color: var(--text-tertiary, #BDBDBD);
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    padding: 4px;
}

/* ── 반응형 ── */

/* --- [마이페이지 수정] mypage\mypageEditStyle.css --- */
.mypage-edit-container {
    padding-bottom: 40px;
    background: var(--bg-secondary, #F5F5F5);
    min-height: calc(100% - 58px - var(--sat)); /* .page-header 아래 가시 영역 (.sso-profile-container :839) */
}

/* 타이틀-카드 간격. .mp-sect-title(:8543)의 margin-bottom:-4px 는 부모 flex gap 을 전제로
   튜닝된 값인데, 이 화면만 <form id="profileForm">(mypageEdit.jsp:14)이 block flow 라
   인접 형제 마진이 상쇄돼 카드가 타이틀 위로 4px 올라탄다. 이 폼 안에서만 되돌린다 —
   8px 은 형제 서브화면(.mp-sub-container gap:12px − 4px)의 실효 간격과 같은 값. */
#profileForm .mp-sect-title {
    margin-bottom: 8px;
}

/* 필드 */

.profile-edit-label .required {
    color: #E53935;
}


.profile-edit-value.readonly {
    color: var(--text-secondary, #757575);
}

.profile-edit-value.readonly i {
    margin-right: 6px;
}


/* 수정 폼 인풋 */
.profile-edit-section .form-input {
    border-radius: 12px;
    border: 1.5px solid var(--border-color, #E0E0E0);
    padding: 12px 14px;
    font-size: 15px;
    transition: border-color 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.profile-edit-section .form-input:focus {
    border-color: var(--primary-color, #4CAF50);
    outline: none;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.profile-edit-section select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23757575' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* 저장 버튼 */

.profile-save-btn {
    width: 100%;
    height: 52px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.profile-save-btn i {
    font-size: 14px;
}

/* --- [내 예약] myReserve (Figma 2193:2184 '06. 예약' 리스킨, 2026-07-22) --- */
.my-reserve-container {
    padding-bottom: 24px;
    background: var(--bg-color);
    min-height: calc(100% - 58px - var(--sat)); /* .page-header 아래 가시 영역 (.sso-profile-container :839) */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 유형 언더라인 탭 — 정본은 cmmnStyle.css '27. 탭 컴포넌트'(Figma 2205:2485).
   좌우 패딩이 없는 컨테이너라 전체폭 보정은 불필요. 탭 행은 컨테이너 첫 자식이라
   컨테이너 상단 = 헤더 하단에 그대로 붙는다(시안). spacer 시절의 margin-top:-16
   (선행 flex gap 상쇄)은 구역 레이아웃에서 헤더 밑으로 파고들게 하므로 제거했다(2026-08-21). */

/* 상태 필터 칩 (디자인 2193:2190 — 알약, 활성=primary) */
.mrv-status-chips {
    display: flex;
    gap: 10px;
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mrv-status-chips::-webkit-scrollbar { display: none; }

.mrv-chip {
    flex-shrink: 0;
    padding: 9px 14px;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    background: var(--bg-secondary);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
}

.mrv-chip.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* 예약 카드 리스트 */
.mrv-list {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 나의 리뷰는 카드가 풀블리드다 — 좌우 여백은 mp-sub-container 가 잡는다(예약 목록만 16px 인셋) */
.my-review-container .mrv-list {
    padding: 0;
}

.mrv-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 3px 10px rgba(13, 20, 10, 0.07);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mrv-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mrv-status {
    font-size: 17px;
    font-weight: 700;
}

.mrv-status.is-pending   { color: var(--warning); }
.mrv-status.is-confirmed { color: var(--primary-color); }
.mrv-status.is-completed { color: var(--text-muted); }
.mrv-status.is-cancelled { color: var(--danger); }

.mrv-apply-date {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.mrv-card-body {
    display: flex;
    gap: 14px;
}

.mrv-thumb {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-secondary);
}

.mrv-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mrv-type {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
}

.mrv-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.25;
}

.mrv-when {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}

.mrv-meta {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    margin: 0;
}

.mrv-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

.mrv-price-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mrv-price-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.mrv-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
}

.mrv-price.is-cancelled { color: var(--danger); }
.mrv-price.is-completed { color: var(--text-primary); }

/* 결제 필요 배지 (2026-08-12 P5) — 취소·환불 규정의 rvx-badge 를 그대로 쓴다.
   price-wrap 이 컬럼 플렉스라 기본 stretch 로 폭이 늘어나는 것만 막는다. */
.mrv-price-wrap .rvx-badge { align-self: flex-start; }

/* 컨텍스트 액션 버튼 (예약 취소=아웃라인 danger, 그 외=그린) */
.mrv-action-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 108px;
    height: 48px;
    padding: 0 16px;
    border-radius: 10px;
    background: var(--primary-color);
    border: none;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}

/* 레슨 예약 카드 2버튼 푸터 — Figma 2210:3510 (채팅 아웃라인 + 예약내역 채움) */
.mrv-lesson-foot {
    display: flex;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}
.mrv-chat-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: 10px;
    background: var(--card-bg);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}
.mrv-action-flex {
    flex: 1;
    min-width: 0;
}

.mrv-cancel-reason {
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.mrv-cancel-reason i {
    color: var(--warning);
    margin-right: 4px;
}

.mrv-empty {
    padding: 40px 16px;
    text-align: center;
}

/* --- [오류 화면] common\appErrorStyle.css — 서비스 예외(appError.jsp)·로그인 오류(appLoginError.jsp) 공용 --- */
.app-error-container {
    padding-bottom: 40px;
}

.app-error-content {
    text-align: center;
    padding: 60px 24px 40px;
}

.app-error-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--warning-bg, #FFF3E0);
}

.app-error-icon i {
    font-size: 36px;
    color: var(--warning, #FF9800);
}

.app-error-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #212121);
    margin: 0 0 12px;
    line-height: 1.4;
}

.app-error-desc {
    font-size: 14px;
    color: var(--text-secondary, #757575);
    line-height: 1.6;
    margin: 0 0 16px;
}

.app-error-code {
    font-size: 12px;
    color: var(--text-disabled, #BDBDBD);
    margin: 0 0 32px;
    font-family: monospace;
}

.app-error-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.btn-error-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 240px;
    height: 48px;
    background: var(--primary, #4CAF50);
    color: white;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-error-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-error-home {
    font-size: 14px;
    color: var(--text-secondary, #757575);
    text-decoration: none;
}

.btn-error-home:hover {
    color: var(--text-primary, #212121);
}

/* ========================================
   [마이페이지] mypage\mypageStyle.css
   ======================================== */
.mypage-footer-links {
    text-align: center;
    padding: 24px 0 40px;
}


.input-with-button {
    display: flex;
    gap: 8px;
}
.input-with-button .form-input {
    flex: 1;
}

/* 모달 - 탈퇴 바텀 시트 */
.withdraw-warning {
    background: #fff3f3;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    color: #d32f2f;
}
.withdraw-warning-icon {
    margin-right: 8px;
}
.withdraw-warning-title {
    font-weight: bold;
    font-size: 14px;
}
.withdraw-warning-desc {
    margin-top: 8px;
    font-size: 13px;
    color: #555;
    line-height: 1.4;
}
/* 탈퇴 시 게시물 처리 고지 (2026-08-10 법무요구).
   경고문(.withdraw-warning-desc)과 같은 크기지만 색을 한 톤 낮춰 구분한다 */
.withdraw-warning-posts {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    text-align: left;
}
/* 탈퇴 전 확인 3항목 (14 §1, 2026-09-18) — 사유 라디오와 같은 간격, 2줄 문장은 체크박스를 첫 줄에 붙인다 */
.withdraw-ack-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0 4px;
}
.withdraw-ack {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 1.45;
    cursor: pointer;
}
.withdraw-ack .checkbox-box { flex-shrink: 0; margin-top: 1px; }
.withdraw-reason-title {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 12px;
}
.withdraw-reason-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.reason-radio {
    display: flex;
    align-items: center;
}
.reason-checkbox {
    margin-right: 8px;
    border-radius: 50%;
}
.reason-direct-input {
    display: none;
    margin-top: 12px;
}
.bottom-sheet-footer {
    display: flex;
    gap: 10px;
    padding: 16px 0 0;
    margin-top: 16px;
    border-top: 1px solid #efefef;
}
/* 시트 푸터 버튼 기하 — .btn-secondary(:1299)도 .btn-withdraw-submit 도 padding·radius·
   font-size·cursor 를 갖지 않아 각진 사각형으로 떨어진다. 지도 모달(.map-modal-footer:8156)과
   같은 방식으로 푸터가 기하를 보충한다. .bottom-sheet-footer 는 mypageEdit 탈퇴 시트 1곳 전용. */
.bottom-sheet-footer .btn-secondary,
.bottom-sheet-footer .btn-withdraw-submit {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

/* 파괴적 액션. 단축 background 로 적어 어떤 background-image 도 함께 리셋한다 —
   전엔 .btn-primary(:1288)의 그라데이션이 이 빨강 위에 덮여 초록으로 보였다(X7). */
.btn-withdraw-submit {
    background: var(--danger);
    color: #fff;
    border: none;
}
/* 3항목 미체크 상태 — 눌리지 않음을 보이게 (14 §1 "세 가지 모두 체크하셔야") */
.btn-withdraw-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --- [레슨] lesson\lessonSelectStyle.css --- */

/* 컨테이너 */
.lesson-select-container {
    padding-bottom: 24px;
    background: var(--bg-secondary, #F5F5F5);
    min-height: calc(100% - 58px - var(--sat)); /* .page-header 아래 가시 영역 (.sso-profile-container :839) */
}

/* 강사 목록 섹션 */

.instructor-list-section .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #212121);
}


/* 강사 카드 */

.instructor-card .btn-bookmark {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-tertiary, #BDBDBD);
    cursor: pointer;
    z-index: 1;
    padding: 4px;
}

.instructor-card .btn-bookmark.active {
    color: #E53935;
}

/* 강사 헤더 (사진 + 기본정보) */

.instructor-badge.new {
    background: #2196F3;
    color: #fff;
}

/* 강사 태그 */

.instructor-tags .tag {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--bg-secondary, #F5F5F5);
    color: var(--text-secondary, #757575);
}

.instructor-tags .tag.highlight {
    background: #E8F5E9;
    color: #2E7D32;
}

/* 강사 액션 버튼 */

.category-chip.active {
    background: var(--primary-color, #4CAF50);
    border-color: var(--primary-color, #4CAF50);
    color: #fff;
}

/* 구 지도보기 전환 버튼 CSS 제거 — 2026-07-22, view-tab-bar 토글로 대체 */

/* --- [마이페이지 QnA] mypage\qnaStyle.css --- */

/* ── 대상 탭 (업체 문의 / 앱 문의) — 세그먼트 토글(.view-tab-bar) 공통 사용.
      구 언더라인 스타일(.qna-tab)은 2026-07-23 제거: .view-tab.active를 캐스케이드에서 덮어
      활성 탭이 그린 배경+그린 텍스트로 비가시화되던 버그 원인이었음 ── */

/* ── 문의 목록 ── */
.qna-list-container.mp-sub-container {
    padding-bottom: calc(92px + var(--sab));
}


.qna-card-list {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qna-card {
    display: block;
    padding: 14px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary, #212121);
    cursor: pointer;
}

.qna-status-badge.badge-waiting {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
    color: #fff;
}

.qna-status-badge.badge-answered {
    background: var(--gradient-primary);
    color: #fff;
}

.qna-status-badge.badge-closed {
    background: var(--bg-secondary, #F5F5F5);
    color: var(--text-secondary, #757575);
}

/* 하단 고정 문의하기 버튼 (디자인 2211:3904 — 60h r12 플랫 primary) */
.qna-bottom-bar {
    position: fixed;
    bottom: var(--footer-total);
    left: var(--app-shell-left);
    right: auto;
    width: var(--app-shell-width);
    max-width: var(--app-shell-max-width);
    padding: 16px;
    background: var(--card-bg);
    box-shadow: 0 -5px 12px rgba(0, 0, 0, 0.04);
    z-index: 100;
}

.btn-qna-write {
    width: 100%;
    height: 60px;
    border: none;
    border-radius: 12px;
    background: var(--primary-color);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
}

.btn-qna-write:active {
    background: var(--primary-hover);
}

/* 빈 상태 — 그레이 물음표 마스코트 (디자인 2211:3904, 전역 duck-mascot 재정의) */
.qna-list-container .empty-state-icon {
    width: 157px;
    height: 145px;
    background-image: url(/image/pkp_app/mypage/qna-empty-mascot.png);
}

.qna-list-container .empty-state-title {
    font-weight: 700;
}

/* 문의 도메인 칩 오버라이드 제거 — 공용 .ntc-chip 이 2026-08-03 부터 시안값
   (h28 · pad 0/10 · 12/700 · r16)이라 중복이다. 문의 시안도 같은 값이다. */

/* ── 문의 작성 (디자인 2213:3226 정합 — cm-write 조각의 qnaWrite 스코프 재정의) ── */
.qna-write-container {
    padding-bottom: 80px;
}

/* 라벨 600/16 (커뮤니티 18/700과 달리 문의하기 시안은 16/600) */
.qna-write-container .cm-write-label {
    font-size: 16px;
    font-weight: 600;
}

/* 입력 필드 16px + 플레이스홀더 600 --text-secondary */
.qna-write-container .cm-write-input,
.qna-write-container .cm-write-textarea {
    font-size: 16px;
}

.qna-write-container .cm-write-input::placeholder,
.qna-write-container .cm-write-textarea::placeholder {
    font-weight: 600;
    color: var(--text-secondary);
}

/* textarea 158 · 슬롯 60x60 은 2026-08-03 부터 공용 기본값이다(양쪽 시안이 같은 값).
   여기서 덮던 중복 선언을 제거했다. 첨부 힌트만 문의 시안이 12/600 으로 달라 남긴다. */
/* 첨부 힌트 오버라이드 제거 — 기본값이 12/600 으로 시안과 같아졌다 */

/* 카메라 아이콘 크기 오버라이드 제거 — 양쪽 시안이 20x20 동일이라 기본값(20px)이 맞다 */

/* 안내 배너 타이포 (14/700 · 12/500) */
.qna-write-container .cm-guide-title { font-size: 14px; }
.qna-write-container .cm-guide-desc { font-size: 12px; font-weight: 500; }

/* 등록 버튼 60h r12 16/600 + disabled */
.qna-write-container .ntc-confirm-btn {
    height: 60px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
}

.qna-write-container .ntc-confirm-btn:disabled {
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: default;
}

/* 섹션 헤더 (아이콘 + 타이틀) */


.qna-section-icon.green {
    background: var(--primary-color);
    color: #fff;
}

.qna-section-icon.blue {
    background: #E3F2FD;
    color: #1976D2;
}

.qna-section-icon.orange {
    background: #FFF3E0;
    color: #F57C00;
}


/* 카테고리 칩 — 스타일 규칙 제거(2026-08-03).
   .qna-category-chip / .active / .qna-category-chips 는 리스킨 이전 레거시(13/500 · r20 · 흰 배경)로
   남아 있었고, .ntc-chip 뒤쪽에 있어 시안값(12/700 · h28 · r16 · 비활성 #8b9288)을 덮고 있었다.
   문의 칩도 다른 화면과 같은 시안이므로 공용 .ntc-chip 하나로 통일한다.
   .qna-category-chip 클래스 자체는 qnaWrite.jsp 의 JS 훅이라 마크업에 그대로 둔다.
   컨테이너 .qna-category-chips 는 마크업에서 쓰이지 않는다(.ntc-chips 사용). */

/* 도움말 (양쪽 정렬) */
.qna-form-help {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 이미지 첨부 영역 */
.qna-image-upload-area {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* .qna-image-preview / 그 안의 img / .btn-img-remove 정의는 여기서 제거했다(2026-08-03).
   위쪽 공용 블록(.cm-media-add/.cm-media-item/.qna-image-preview 60x60 r12,
   .cm-media-remove/.btn-img-remove 16x16)과 중복이면서 값이 달라(76x76 / X 20x20)
   파일 순서·특정도로 공용 값을 덮고 있었다. 커뮤니티·문의 시안이 60x60 / X 16 이고
   Figma 가 없는 리뷰 작성은 같은 행의 추가 버튼을 60 으로 맞췄으므로 한 정의로 통일한다. */

/* 리뷰 작성 전용 추가 버튼(.qna-image-upload-area 와 함께 reviewWrite.jsp 만 쓴다).
   이 화면은 Figma 노드가 없어 대조 기준이 없다 — 같은 행의 프리뷰(.qna-image-preview)가
   시안값 60x60 r12 이므로 그에 맞춘다(이전엔 추가 76 / 프리뷰 92 로 서로 어긋나 있었다). */
.btn-add-image {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    border: 2px dashed var(--border-color, #E0E0E0);
    background: var(--bg-secondary, #F5F5F5);
    color: var(--text-tertiary, #9E9E9E);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    transition: border-color 0.2s ease;
}

.btn-add-image i {
    font-size: 20px;
}

.btn-add-image:active {
    border-color: var(--primary-color, #2E7D32);
}


/* ── 문의 상세 ── */
.qna-detail-container {
    padding-bottom: 20px;
}

.qna-detail-content {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary, #212121);
    white-space: pre-wrap;
    word-break: break-word;
}

.qna-detail-images {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.qna-detail-images img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
}

/* 답변 섹션 */
.qna-reply-section {
    margin: 0 16px;
}

/* --- [예약옵션] screen\screenOptionExtendStyle.css --- */

.reserve-extend-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 12px 0;
}

.reserve-extend-note {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.reserve-extend-note i {
    margin-right: 3px;
}

.reserve-calc-summary {
    background: var(--card-bg, #ffffff);
    border-radius: 12px;
    padding: 16px;
    margin: 0 16px;
    border: 1px solid var(--border-color, #e2e8f0);
}

.reserve-calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.reserve-calc-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.reserve-calc-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.reserve-calc-price {
    color: var(--primary-color);
    font-size: 16px;
}

.reserve-calc-detail {
    font-size: 12px;
    color: var(--text-muted, #94a3b8);
    text-align: right;
    margin-top: 4px;
}

/* --- [앱 정보] mypage\appInfoStyle.css --- */
.appinfo-container {
    padding-bottom: 20px;
}

.appinfo-val.link {
    color: var(--info-color, #2196F3);
}


/* --- [약관 및 정책] mypage\termsStyle.css --- */
.terms-policy-container {
    padding: 16px;
}

.terms-menu-icon.green {
    background: var(--primary-light, #E8F5E9);
    color: var(--primary-color);
}

.terms-menu-icon.blue {
    background: #E3F2FD;
    color: #1976D2;
}

.terms-detail-container {
    padding: 16px;
}

.terms-detail-content {
    padding: 16px;
    background: var(--card-bg, #fff);
    border-radius: 12px;
}

.terms-detail-content h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 16px 0 8px;
    color: var(--text-primary, #212121);
}

.terms-detail-content h3:first-child {
    margin-top: 0;
}

.terms-detail-content p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary, #757575);
    margin-bottom: 12px;
}

/* 법무 정본 산출물(legal/*.jspf, build-legal.js) 전용 (2026-09-18).
   pandoc 이 docx 들여쓰기를 blockquote 로, 표를 table 로 내린다 — 인용 모양이 아니라 들여쓴 항목으로 보이게 하고
   표는 좁은 화면에서 가로 스크롤한다. 색·크기는 위 p 규칙과 같은 토큰. */
.terms-detail-content blockquote {
    margin: 0 0 12px;
    padding: 0 0 0 12px;
    border-left: 2px solid var(--border-light, #E0E0E0);
}

.terms-detail-content blockquote p { margin-bottom: 6px; }
.terms-detail-content blockquote h3 { margin-top: 12px; }

.terms-detail-content .legal-table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0 14px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary, #757575);
}

.terms-detail-content .legal-table th,
.terms-detail-content .legal-table td {
    padding: 6px 8px;
    border: 1px solid var(--border-light, #E0E0E0);
    text-align: left;
    vertical-align: top;
    min-width: 72px;
}

.terms-detail-content .legal-table th {
    background: var(--bg-secondary, #F5F5F5);
    color: var(--text-primary, #212121);
    font-weight: 600;
}

/* 셀 안 <p>(pandoc 이 여러 줄 셀을 문단으로 낸다)는 표 크기·간격을 따른다 — 위 .terms-detail-content p(13px·12px 여백)를 덮어쓴다 */
.terms-detail-content .legal-table p {
    font-size: inherit;
    line-height: inherit;
    margin: 0 0 4px;
}

.terms-detail-content .legal-table p:last-child { margin-bottom: 0; }

/* --- [알림 설정] mypage\notificationSettingsStyle.css --- */
.noti-settings-container { padding-bottom: 20px; }

/* 마이페이지 서브 화면 공통 컨테이너 (v2) */
.mp-sub-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 16px 24px;
}

/* 정보 행 (앱정보/약관 — 제목 + 서브 + 우측 액세서리) */
.mp-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
    text-decoration: none;
}

.mp-info-row:last-child { border-bottom: none; }

.mp-info-key {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.mp-info-val {
    margin-top: 5px;
    font-size: 15px;
    color: var(--text-secondary);
}

.mp-info-accent {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-color);
    flex-shrink: 0;
}

/* 회사 사업자 정보 표 (2026-09-18, companyInfo.jsp — terms/appInfo 공용). 항목명·값 2단 dl */
.company-info-list { margin: 0; }

.company-info-row {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

.company-info-row:last-child { border-bottom: none; }

.company-info-row dt {
    flex: 0 0 116px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    word-break: keep-all; /* '신고번 호' 처럼 단어 중간에서 꺾이지 않게 */
}

.company-info-row dd {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    color: var(--text-primary);
    word-break: keep-all;
}

.company-info-row dd a { color: inherit; text-decoration: underline; }

.company-info-note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

.noti-card {
    margin: 0; padding: 4px 20px;
}

.noti-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 16px 0; border-bottom: 1px solid var(--border-light);
}

.noti-row:last-child { border: none; }

.noti-row-label { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.noti-row-desc { font-size: 15px; color: var(--text-secondary); margin-top: 4px; }

/* 토글 — 디자인 2205:2963 (그린 52x32) */
.noti-toggle {
    width: 52px; height: 32px; border-radius: 16px;
    background: var(--bg-secondary); position: relative; cursor: pointer;
    transition: background 0.2s; flex-shrink: 0;
}

.noti-toggle.on { background: var(--primary-color); }

.noti-toggle::after {
    content: ''; width: 26px; height: 26px; border-radius: 50%;
    background: #fff; position: absolute; top: 3px; left: 3px;
    transition: left 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.noti-toggle.on::after { left: 23px; }

/* 종속 토글 잠금 (야간 광고성 수신 — 마케팅 OFF 일 때, 2026-09-18). 클릭은 JS 가 안내로 막는다 */
.noti-toggle.noti-toggle--locked { opacity: 0.45; cursor: not-allowed; }

.noti-consent-date {
    font-size: 10px; color: var(--text-tertiary, #9E9E9E); margin-top: 4px;
}

/* --- [내 리뷰] mypage\myReviewListStyle.css --- */
.my-review-container { padding-bottom: 20px; }

/* --- [리뷰 작성] mypage\reviewWriteStyle.css --- */
.review-write-container { padding-bottom: 80px; }

/* 대상 카드 — 스크린은 업체명, 레슨은 강사명 + 커리큘럼(.review-target-sub) */
.review-target-card {
    margin: 12px 16px; padding: 12px 16px;
    background: var(--primary-color); border-radius: 12px;
    display: flex; align-items: center; gap: 10px;
}

.review-target-icon {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.2); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}

.review-target-info { display: flex; flex-direction: column; gap: 2px; }
.review-target-label { font-size: 11px; color: rgba(255, 255, 255, 0.8); font-weight: 500; }
.review-target-name { font-size: 14px; font-weight: 600; color: #fff; }
/* 레슨 전용 2번째 줄(커리큘럼 스냅샷). 강사명보다 약하게 — 라벨과 같은 위계다. */
.review-target-sub { font-size: 12px; color: rgba(255, 255, 255, 0.85); }

/* 리뷰 폼 카드 */
.review-form-card {
    margin: 0 16px 12px; padding: 20px 16px;
    background: var(--card-bg, #fff); border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.review-section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }

.review-section-icon {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0;
}

.review-section-icon.yellow { background: #FFF8E1; color: #F57C00; }
.review-section-icon.blue { background: #E3F2FD; color: #1976D2; }
.review-section-icon.orange { background: #FFF3E0; color: #F57C00; }

.review-section-title { font-size: 15px; font-weight: 700; color: var(--text-primary, #212121); }

/* 별점 */
.review-star-rating { display: flex; gap: 8px; justify-content: center; padding: 8px 0; }
.review-star-rating i { font-size: 32px; color: var(--border-color, #E0E0E0); cursor: pointer; transition: color 0.2s; }
.review-star-rating i.active { color: #FF9800; }
.review-star-label { text-align: center; font-size: 13px; color: var(--text-secondary, #757575); margin-top: 4px; }

/* textarea */
.review-textarea {
    min-height: 120px; height: auto; padding: 12px 16px;
    resize: vertical; font-family: inherit; line-height: 1.6;
}

/* 하단 등록 바 */
.review-submit-bar {
    position: fixed; bottom: var(--footer-total);
    left: var(--app-shell-left); right: auto; padding: 12px 16px;
    width: var(--app-shell-width);
    max-width: var(--app-shell-max-width);
    background: var(--card-bg, #fff);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08); z-index: 100;
}

.btn-review-submit {
    width: 100%; height: 52px; border: none; border-radius: 14px;
    background: var(--primary-color); color: #fff;
    font-size: 16px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.btn-review-submit:disabled {
    background: #BDBDBD; color: #fff; box-shadow: none; cursor: not-allowed;
}

/* 예약 카드의 리뷰 버튼 */
.weather-badge.good {
    background: var(--weather-good-bg);
    color: var(--weather-good-text);
}

.weather-badge.fair {
    background: var(--weather-fair-bg);
    color: var(--weather-fair-text);
}

.weather-badge.indoor {
    background: var(--weather-indoor-bg);
    color: var(--weather-indoor-text);
}

/* --- [레슨채팅 예약카드] (디자인 2209:3162 카드 언어 적용 — 워크플로우 액션은 유지) --- */
.booking-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 16px 20px;
    max-width: 280px;
}
.booking-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.booking-card-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-primary);
}
.booking-card-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.booking-card-badge.is-confirmed  { background: var(--primary-bg);          color: var(--primary-color); }
.booking-card-badge.is-cancelled  { background: rgba(201, 95, 85, 0.12);    color: var(--danger); }
.booking-card-badge.is-reschedule { background: rgba(215, 139, 53, 0.12);   color: var(--warning); }

.booking-card-body { display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; }
.booking-card-row { display: flex; gap: 10px; font-size: 14px; }
.booking-card-row .k { flex: 0 0 60px; color: var(--text-secondary); font-weight: 500; }
.booking-card-row .v { color: var(--text-primary); font-weight: 600; word-break: break-all; }
.booking-card-memo {
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* 액션 — 주 액션(수락/승인)=그린 채움 44h r9, 보조=아웃라인 (디자인 2211:3048) */
.booking-card-actions { display: flex; gap: 6px; }
.booking-card-actions .booking-card-btn {
    flex: 1;
    height: 40px;
    padding: 0 4px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--border-light);
    border-radius: 9px;
    background: var(--card-bg);
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
}
.booking-card-actions .booking-card-btn.is-approve {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}
.booking-card-actions .booking-card-btn.is-reject     { color: var(--danger);  border-color: var(--danger); }
.booking-card-actions .booking-card-btn.is-reschedule { color: var(--warning); border-color: var(--warning); }
.booking-card-actions .booking-card-btn:disabled {
    background: var(--bg-secondary);
    color: var(--text-muted);
    border-color: var(--border-light);
    cursor: not-allowed;
}

/* --- [레슨채팅 예약사유 모달] lesson\lessonChatBookingReasonModal --- */
.booking-reason-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.booking-reason-textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}
.booking-reason-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.booking-reason-btn {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    cursor: pointer;
}
.booking-reason-btn.is-cancel { color: var(--text-secondary); }
.booking-reason-btn.is-submit {
    background: var(--primary-color);
    color: var(--card-bg);
    border-color: var(--primary-color);
}

/* --- [메인 팝업] main\mainPopupStyle.css --- */
.main-popup-overlay {
    position: fixed;
    top: 0;
    left: var(--app-shell-left);
    right: auto;
    bottom: 0;
    width: var(--app-shell-width);
    max-width: var(--app-shell-max-width);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    padding: 16px;
    animation: mainPopupFadeIn 0.3s ease-out;
}

.main-popup-overlay.active {
    display: flex;
}

@keyframes mainPopupFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes mainPopupSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.main-popup {
    width: 300px;
    max-width: 100%;
    background: var(--card-bg);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: mainPopupSlideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
}

.main-popup-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg,
        var(--popup-gradient-start) 0%,
        var(--popup-gradient-mid)   55%,
        var(--popup-gradient-end)   100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.main-popup-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-popup-image .big-icon {
    font-size: 84px;
    line-height: 1;
    color: var(--primary-color);
    text-shadow: 0 6px 18px rgba(46, 125, 50, 0.2);
}

.main-popup-image .big-emoji {
    font-size: 84px;
    line-height: 1;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.12));
}

.main-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    font-size: 13px;
}

.main-popup-body {
    padding: 20px 20px 16px;
    text-align: center;
}

.main-popup-body h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.35;
}

.main-popup-body p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    white-space: pre-line;
}

.main-popup-cta {
    margin: 4px 20px 16px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
    transition: all 0.2s ease;
}

.main-popup-cta:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(46, 125, 50, 0.3);
}

.main-popup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-light);
}

body.main-popup-open {
    overflow: hidden;
}

.main-popup-footer .hide-today {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
}

.main-popup-footer input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.main-popup-footer .close-text {
    font-size: 13px;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    padding: 0;
}

/* --- [레슨 대화 목록] myChatList (Figma 2244:3605 '02. 홈_채팅리스트' 리스킨, 2026-07-22) --- */

.my-chat-container {
    padding-bottom: 24px;
}

/* 새 메시지 배너 (디자인 2245:2574 — 풀블리드 연녹 밴드) */
.mcl-banner {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 11px 18px 11px 20px;
    background: var(--primary-bg);
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
}

.mcl-banner img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.mcl-banner.hidden { display: none; }

/* 채팅방 리스트 — 풀블리드 행 + 디바이더 (디자인 채팅카드 2245:2601) */
.my-chat-container .chat-room-list {
    display: flex;
    flex-direction: column;
}

.my-chat-container .chat-room-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 16px 20px;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
}

.my-chat-container .chat-room-card:active {
    background: var(--bg-secondary);
}

/* 아바타 49px 원형 */
.my-chat-container .chat-avatar {
    width: 49px;
    height: 49px;
    border-radius: 50%;
    background: var(--primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
    overflow: hidden;
}

.my-chat-container .chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.my-chat-container .chat-body {
    flex: 1;
    min-width: 0;
}

.my-chat-container .chat-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.my-chat-container .chat-instructor {
    font-size: 17px;
    font-weight: 700;
    color: var(--primary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-chat-container .chat-time {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
    flex-shrink: 0;
}

.my-chat-container .chat-row-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.my-chat-container .chat-last-msg {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.2;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.my-chat-container .chat-last-msg.booking {
    color: var(--primary-color);
}

/* 미읽음 배지 (디자인 2246:2575 — 26px 그린 원) */
.my-chat-container .chat-unread-badge {
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    background: var(--primary-light);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 레슨 둘러보기 CTA (빈 상태) */
.my-chat-container .empty-state #btnExploreLessons {
    margin-top: 16px;
}

/* --- [레슨 결제] payment (카드결제 결과 화면 — paymentReady 는 2026-09-09 선결제 전환으로 삭제) --- */

/* 결제 완료 액션 (인라인) */
.rvx-done-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 카드결제 결과 화면 (paymentComplete / paymentFail, 2026-08-12 P1).
   paymentReady 와 달리 하단 고정 액션바가 없다. 콘텐츠 구역이 하단 탭 위에서 끝나므로
   바닥 여백은 숨쉴 여백만 — --footer-total 을 더하면 탭 높이만큼 죽은 간격이 된다. */
.payment-result-container {
    padding: 16px;
}

@media (max-width: 360px) {
    .payment-result-container {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* --- [라운딩 조인] join\joinStyle.css --- */

/* ===== 공통 컨테이너 ===== */
.join-hub-container,
.join-detail-container,
.join-create-container,
.join-applicant-container,
.join-chat-container,
.join-my-list-container,
.join-review-container {
    color: var(--text-primary);
}

/* 앱 표준 좌우 여백 (screen-select/rounding-select 컨테이너와 동일: padding 0 16px).
   상단 8px: page-header-spacer(58px=헤더높이)만으로는 콘텐츠가 헤더에 0px로 붙어 답답 →
   기존 rounding-select(헤더↔콘텐츠 gap 8px)와 동일한 숨 공간 부여.
   채팅은 join-chat-body가 자체 패딩 + 입력바가 --app-shell 고정이라 제외 */
.join-hub-container,
.join-detail-container,
.join-create-container,
.join-applicant-container,
.join-my-list-container,
.join-review-container {
    padding: 8px 16px 0;
}

/* FAB(50h)가 조인 카드의 '신청하기' 를 덮지 않도록 바닥을 비운다.
   .app-content 는 --footer-total 에서 끝나므로 FAB 점유분(18 + 50)만 확보하면 된다. */
.join-hub-container {
    padding-bottom: 86px;
}

/* ===== 세그먼트 탭 (.seg → .join-seg) ===== */
.join-hub-container .join-seg,
.join-my-list-container .join-seg {
    display: flex;
    background: #eceff3;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 13px;
}

.join-hub-container .join-seg button,
.join-my-list-container .join-seg button {
    flex: 1;
    border: none;
    background: none;
    padding: 8px 0;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    font-family: inherit;
    cursor: pointer;
}

.join-hub-container .join-seg button.is-on,
.join-my-list-container .join-seg button.is-on {
    background: var(--card-bg);
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

/* ===== 필터 칩 줄 (.chips 컨테이너 — .filter-chip은 cmmnStyle 재사용) ===== */
.join-hub-container .join-chips {
    display: flex;
    gap: 7px;
    margin-bottom: 13px;
    flex-wrap: wrap;
}

/* 목업 기준 작은 칩 (cmmnStyle .filter-chip 기본은 10px 16px로 큼 → 축소 오버라이드) */
.join-hub-container .join-chips .filter-chip {
    padding: 6px 11px;
    font-size: 12px;
    border-radius: 18px;
}

/* ===== 조인 카드 (.join-card) ===== */
.join-hub-container .join-card {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 14px;
    margin-bottom: 12px;
}

.join-hub-container .join-card-top {
    display: flex;
    gap: 11px;
}

.join-hub-container .join-thumb {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    background: linear-gradient(135deg, #a5d6a7, #66bb6a);
    color: #fff;
}

.join-hub-container .join-card-info {
    flex: 1;
    min-width: 0;
}

.join-hub-container .join-card-info .join-card-name {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 3px;
}

.join-hub-container .join-card-info .join-card-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

/* ===== 배지 (.badge → .join-badge) ===== */
.join-hub-container .join-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 7px;
}

.join-hub-container .join-badge.is-open {
    background: var(--primary-bg);
    color: var(--primary-dark);
}

.join-hub-container .join-badge.is-soon {
    background: #fff3e0;
    color: #EF6C00;
}

.join-hub-container .join-badge.is-hot {
    background: #ffebee;
    color: var(--danger);
}

/* ===== 슬롯 (.slot → .join-slot) ===== */
.join-hub-container .join-slots,
.join-create-container .join-slots {
    display: flex;
    gap: 5px;
    margin-top: 7px;
}

.join-hub-container .join-slot,
.join-create-container .join-slot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.join-hub-container .join-slot.is-host,
.join-create-container .join-slot.is-host {
    background: var(--primary-dark);
    color: #fff;
}

.join-hub-container .join-slot.is-fill,
.join-create-container .join-slot.is-fill {
    background: var(--primary-light);
    color: #fff;
}

.join-hub-container .join-slot.is-empty,
.join-create-container .join-slot.is-empty {
    background: #eef1f5;
    color: #b8c0cc;
    border: 1.5px dashed #cdd5df;
}

/* ===== 조인 카드 하단 (.jc-bottom → .join-card-bottom) ===== */
.join-hub-container .join-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--border-light);
}

.join-hub-container .join-card-price small {
    font-size: 11px;
    color: var(--text-muted);
}

.join-hub-container .join-card-price b {
    font-size: 17px;
    font-weight: 800;
}

.join-hub-container .join-card-price .join-card-per {
    font-size: 11px;
    color: var(--text-secondary);
}

.join-hub-container .join-apply-btn {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

/* 호스트 미니 프로필 */
.join-hub-container .join-host-mini {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-top: 9px;
}

.join-hub-container .join-host-ava {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7e57c2, #b39ddb);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}

.join-hub-container .join-manner {
    color: #FFC107;
    font-weight: 700;
}

/* ===== FAB 조인 만들기 ===== */
.join-hub-container .join-fab {
    position: fixed;
    right: calc(var(--app-shell-left) + 18px);
    bottom: calc(var(--footer-total) + 18px);
    height: 50px;
    padding: 0 20px;
    border-radius: 25px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 800;
    font-family: inherit;
    box-shadow: 0 8px 20px rgba(46, 125, 50, .45);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 8;
    cursor: pointer;
}

.join-hub-container .join-fab .join-fab-plus {
    font-size: 20px;
    font-weight: 300;
}

/* ===== 조인 상세 — 히어로 (.hero → .join-hero) ===== */
.join-detail-container .join-hero {
    height: 118px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    display: flex;
    align-items: flex-end;
    padding: 14px;
    color: #fff;
    margin-bottom: 13px;
    position: relative;
    overflow: hidden;
}

.join-detail-container .join-hero .join-hero-ball {
    position: absolute;
    right: -10px;
    top: -14px;
    font-size: 88px;
    opacity: .18;
}

.join-detail-container .join-hero h3 {
    font-size: 18px;
    font-weight: 800;
}

.join-detail-container .join-hero p {
    font-size: 12px;
    opacity: .92;
    margin-top: 2px;
}

/* ===== 패널 (.panel → .join-panel) ===== */
.join-detail-container .join-panel {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 14px;
    margin-bottom: 12px;
}

.join-detail-container .join-panel-title {
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.join-detail-container .join-panel-title .join-panel-cnt {
    color: var(--primary-color);
}

/* 슬롯 (큰 사이즈) (.slot-lg → .join-slot-lg) */
.join-detail-container .join-slot-lg {
    display: flex;
    gap: 10px;
}

.join-detail-container .join-slot-lg .join-slot-lg-item {
    flex: 1;
    text-align: center;
}

.join-detail-container .join-slot-lg .join-slot-lg-av {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin: 0 auto 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
}

.join-detail-container .join-slot-lg .join-slot-lg-av.is-host {
    background: var(--primary-dark);
    color: #fff;
}

.join-detail-container .join-slot-lg .join-slot-lg-av.is-fill {
    background: var(--primary-light);
    color: #fff;
}

.join-detail-container .join-slot-lg .join-slot-lg-av.is-empty {
    background: #f0f3f7;
    border: 2px dashed #cdd5df;
    color: #b8c0cc;
}

.join-detail-container .join-slot-lg .join-slot-lg-nm {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* 키-값 정산 (.kv → .join-kv) */
.join-detail-container .join-kv,
.join-create-container .join-kv {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 6px 0;
}

.join-detail-container .join-kv .join-kv-k,
.join-create-container .join-kv .join-kv-k {
    color: var(--text-secondary);
}

.join-detail-container .join-kv .join-kv-v,
.join-create-container .join-kv .join-kv-v {
    font-weight: 600;
}

.join-detail-container .join-kv.is-total,
.join-create-container .join-kv.is-total {
    border-top: 1px solid var(--border-light);
    margin-top: 5px;
    padding-top: 10px;
}

.join-detail-container .join-kv.is-total .join-kv-v,
.join-create-container .join-kv.is-total .join-kv-v {
    color: var(--primary-color);
    font-size: 17px;
    font-weight: 800;
}

/* 동반자 조건 (.cond → .join-cond) */
.join-detail-container .join-cond {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.join-detail-container .join-cond span {
    background: var(--bg-color);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 8px;
}

/* ===== 하단 고정 바 (.bar → .join-bar) ===== */
.join-detail-container .join-bar,
.join-create-container .join-bar,
.join-review-container .join-bar {
    position: fixed;
    left: var(--app-shell-left);
    width: var(--app-shell-width);
    bottom: var(--footer-total);
    background: var(--card-bg);
    border-top: 1px solid var(--border-light);
    padding: 11px 16px;
    display: flex;
    gap: 10px;
    z-index: 8;
}

.join-detail-container .join-msg-btn {
    width: 48px;
    height: 46px;
    border-radius: 11px;
    border: 1.5px solid var(--border-light);
    background: var(--card-bg);
    font-size: 17px;
    cursor: pointer;
}

.join-detail-container .join-cta-btn,
.join-create-container .join-cta-btn,
.join-review-container .join-cta-btn {
    flex: 1;
    height: 46px;
    border-radius: 11px;
    border: none;
    background: var(--primary-color);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
}

/* 상세 본문 하단 여백 (인라인 style="bottom:113px" 대체) */
.join-detail-container .join-detail-body {
    padding-bottom: 70px;
}

/* 헤더 우측 더보기 메뉴 (신고/차단) — 헤더(fixed)의 ⋯ 버튼 바로 아래.
   page-header-spacer와 동일한 높이식(58px + safe-area — 2026-08-03 시안 정합)으로 헤더 바로 밑에 정렬.
   left:auto + right(셸 보정)로 데스크톱 셸 밖 이탈 방지. z-index 95(헤더 90 위, spa-loader 99 아래) */
.join-detail-container .join-more-menu {
    position: fixed;
    top: calc(58px + var(--sat));
    left: auto;
    right: calc(var(--app-shell-left) + 16px);
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    padding: 6px;
    z-index: 95;
    min-width: 140px;
}

.join-detail-container .join-more-menu.hidden {
    display: none;
}

.join-detail-container .join-more-menu button {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: inherit;
    border-radius: 8px;
    cursor: pointer;
}

.join-detail-container .join-more-menu button.is-danger {
    color: var(--danger);
}

/* ===== 신청 하단 시트 (.sheet → .join-sheet) ===== */
.join-detail-container .join-sheet-scrim {
    position: fixed;
    left: var(--app-shell-left);
    width: var(--app-shell-width);
    top: 0;
    bottom: 0;
    background: rgba(15, 25, 20, .5);
    backdrop-filter: blur(2px);
    z-index: 1000;
}

.join-detail-container .join-sheet-scrim.hidden,
.join-detail-container .join-sheet.hidden {
    display: none;
}

.join-detail-container .join-sheet {
    position: fixed;
    left: var(--app-shell-left);
    width: var(--app-shell-width);
    bottom: var(--footer-total);
    background: var(--card-bg);
    border-radius: 22px 22px 0 0;
    padding: 20px 18px 18px;
    z-index: 1001;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
}

.join-detail-container .join-sheet-grip {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #dde3ea;
    margin: 0 auto 16px;
}

.join-detail-container .join-sheet h3 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 4px;
}

.join-detail-container .join-sheet-sub {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.join-detail-container .join-sheet-info {
    background: var(--primary-bg);
    border: 1px solid var(--primary-border);
    border-radius: 12px;
    padding: 11px 13px;
    font-size: 12.5px;
    color: var(--primary-dark);
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.join-detail-container .join-sheet-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.join-detail-container .join-sheet-textarea {
    width: 100%;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-primary);
    resize: none;
    height: 64px;
    background: var(--card-bg);
}

.join-detail-container .join-sheet-agree {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    color: var(--text-secondary);
    margin: 14px 0 16px;
}

.join-detail-container .join-sheet-agree .join-sheet-agree-box {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.join-detail-container .join-sheet .join-cta-btn {
    width: 100%;
    height: 48px;
    border-radius: 12px;
}

/* ===== 모집 등록 폼 (.join-create-container) ===== */
.join-create-container .join-create-body {
    padding-bottom: 70px;
}

.join-create-container .join-field-group {
    margin-bottom: 16px;
}

.join-create-container .join-field-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.join-create-container .join-field-label .join-req {
    color: var(--danger);
}

.join-create-container .join-field {
    width: 100%;
    height: 46px;
    border: 1px solid var(--border-light);
    border-radius: 11px;
    padding: 0 13px;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-primary);
    background: var(--card-bg);
}

.join-create-container .join-field .join-field-ph {
    color: var(--text-muted);
}

.join-create-container .join-field i {
    color: var(--text-secondary);
    font-size: 14px;
}

.join-create-container .join-field.is-search .join-field-ph {
    flex: 1;
}

.join-create-container .join-field-two {
    display: flex;
    gap: 10px;
}

.join-create-container .join-field-two .join-field-group {
    flex: 1;
}

/* 카운터 (.counter → .join-counter, 버튼은 .join-counter-btn) */
.join-create-container .join-counter {
    display: flex;
    align-items: center;
    gap: 13px;
}

.join-create-container .join-counter-btn {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    border: 1.5px solid var(--border-light);
    background: var(--card-bg);
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.join-create-container .join-counter-btn.is-plus {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.join-create-container .join-counter-val {
    font-size: 18px;
    font-weight: 800;
    min-width: 60px;
    text-align: center;
}

.join-create-container .join-counter-val small {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    display: block;
}

/* 분담금 박스 (.fee-box → .join-fee-box) */
.join-create-container .join-fee-box {
    background: var(--bg-color);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 12px;
}

.join-create-container .join-fee-box .join-kv {
    padding: 4px 0;
}

/* 조건 칩 선택 (.chipsel → .join-chip-select) */
.join-create-container .join-chip-select {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.join-create-container .join-chip-select span {
    font-size: 12px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 18px;
    border: 1px solid var(--border-light);
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
}

.join-create-container .join-chip-select span.is-on {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* ===== 신청자 관리 (.join-applicant-container) ===== */
.join-applicant-container .join-sum {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    border-radius: 14px;
    padding: 14px;
    color: #fff;
    margin-bottom: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.join-applicant-container .join-sum .join-sum-l b {
    font-size: 15px;
}

.join-applicant-container .join-sum .join-sum-l small {
    display: block;
    font-size: 11.5px;
    opacity: .9;
    margin-top: 2px;
}

.join-applicant-container .join-sum .join-sum-r {
    text-align: right;
}

.join-applicant-container .join-sum .join-sum-r b {
    font-size: 22px;
    font-weight: 900;
}

.join-applicant-container .join-sum .join-sum-r small {
    font-size: 11px;
    opacity: .9;
}

.join-applicant-container .join-sec-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 13px 0 9px;
}

.join-applicant-container .join-appl {
    background: var(--card-bg);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    padding: 13px;
    margin-bottom: 11px;
    display: flex;
    gap: 11px;
    align-items: center;
}

.join-applicant-container .join-appl.is-confirmed {
    background: var(--primary-bg);
}

.join-applicant-container .join-appl .join-ava {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

.join-applicant-container .join-appl .join-appl-info {
    flex: 1;
    min-width: 0;
}

.join-applicant-container .join-appl .join-appl-info .join-appl-nm {
    font-size: 14px;
    font-weight: 700;
}

.join-applicant-container .join-appl .join-appl-info .join-appl-st {
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-top: 3px;
}

.join-applicant-container .join-appl .join-appl-info .join-appl-mn {
    color: #FFC107;
    font-weight: 700;
}

.join-applicant-container .join-appl .join-appl-acts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.join-applicant-container .join-ok-btn {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 7px 14px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.join-applicant-container .join-no-btn {
    background: var(--card-bg);
    color: var(--text-secondary);
    border: 1.5px solid var(--border-light);
    padding: 7px 14px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.join-applicant-container .join-badge-ok {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-dark);
    background: var(--card-bg);
    border: 1px solid var(--primary-border);
    padding: 5px 11px;
    border-radius: 9px;
    white-space: nowrap;
}

/* ===== 그룹 채팅 (.join-chat-container) ===== */
.join-chat-container .join-chatbar-info {
    background: var(--primary-bg);
    border-bottom: 1px solid var(--primary-border);
    padding: 9px 16px;
    font-size: 12px;
    color: var(--primary-dark);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.join-chat-container .join-chatbar-info .join-dday {
    background: var(--primary-color);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
}

.join-chat-container .join-chat-body {
    padding: 16px;
    padding-bottom: 76px;
    background: var(--bg-color);
    min-height: 60vh;
}

.join-chat-container .join-chat-sys {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    margin: 9px 0;
}

.join-chat-container .join-chat-sys span {
    background: #e7ebf0;
    padding: 4px 12px;
    border-radius: 12px;
}

.join-chat-container .join-msg {
    display: flex;
    gap: 8px;
    margin-bottom: 13px;
    max-width: 80%;
}

.join-chat-container .join-msg .join-msg-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #5c6bc0, #3949ab);
}

.join-chat-container .join-msg .join-msg-who {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 3px;
}

.join-chat-container .join-msg .join-msg-bubble {
    background: var(--card-bg);
    border-radius: 4px 14px 14px 14px;
    padding: 9px 13px;
    font-size: 13px;
    box-shadow: var(--shadow-sm);
}

.join-chat-container .join-msg.is-me {
    margin-left: auto;
    flex-direction: row-reverse;
}

.join-chat-container .join-msg.is-me .join-msg-bubble {
    background: var(--primary-color);
    color: #fff;
    border-radius: 14px 4px 14px 14px;
}

.join-chat-container .join-msg .join-msg-time {
    font-size: 10px;
    color: var(--text-muted);
    align-self: flex-end;
}

.join-chat-container .join-chat-input {
    position: fixed;
    left: var(--app-shell-left);
    width: var(--app-shell-width);
    bottom: var(--footer-total);
    background: var(--card-bg);
    border-top: 1px solid var(--border-light);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 8;
}

.join-chat-container .join-chat-input .join-chat-plus {
    font-size: 22px;
    color: var(--text-secondary);
}

.join-chat-container .join-chat-input .join-chat-text {
    flex: 1;
    background: var(--bg-color);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 9px 15px;
    font-size: 13px;
    color: var(--text-primary);
    font-family: inherit;
}

.join-chat-container .join-chat-input .join-chat-send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    border: none;
    font-size: 15px;
    cursor: pointer;
}

/* ===== 내 조인 현황 (.join-my-list-container) ===== */
.join-my-list-container .join-mj {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 14px;
    margin-bottom: 12px;
}

.join-my-list-container .join-mj.is-done {
    opacity: .85;
}

.join-my-list-container .join-mj .join-mj-top {
    display: flex;
    gap: 11px;
    align-items: flex-start;
}

.join-my-list-container .join-mj .join-thumb {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    font-size: 21px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #a5d6a7, #66bb6a);
    color: #fff;
}

.join-my-list-container .join-mj .join-mj-main {
    flex: 1;
    min-width: 0;
}

.join-my-list-container .join-mj .join-mj-name {
    font-size: 14px;
    font-weight: 700;
}

.join-my-list-container .join-mj .join-mj-meta {
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-top: 3px;
}

.join-my-list-container .join-stbadge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
}

.join-my-list-container .join-stbadge.is-wait {
    background: #fff3e0;
    color: #EF6C00;
}

.join-my-list-container .join-stbadge.is-ok {
    background: var(--primary-bg);
    color: var(--primary-dark);
}

.join-my-list-container .join-stbadge.is-done {
    background: #eceff3;
    color: var(--text-secondary);
}

.join-my-list-container .join-mj .join-mj-foot {
    display: flex;
    gap: 8px;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid var(--border-light);
}

.join-my-list-container .join-mj .join-mj-foot button {
    flex: 1;
    padding: 8px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.join-my-list-container .join-mj-btn-chat {
    background: var(--primary-color);
    color: #fff;
    border: none;
}

.join-my-list-container .join-mj-btn-cancel {
    background: var(--card-bg);
    color: var(--danger);
    border: 1.5px solid #ffcdd2;
}

.join-my-list-container .join-mj-btn-review {
    background: var(--card-bg);
    color: var(--primary-color);
    border: 1.5px solid var(--primary-border);
}

.join-my-list-container .join-mj-btn-ghost {
    background: var(--bg-color);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
}

/* 내 조인 세그먼트 탭 패널 토글 */
.join-my-list-container .join-tab-panel.hidden {
    display: none;
}

/* ===== 매너 평가 (.join-review-container) ===== */
.join-review-container .join-review-body {
    padding-bottom: 70px;
}

.join-review-container .join-ev-head {
    text-align: center;
    padding: 8px 0 14px;
}

.join-review-container .join-ev-head .join-ev-ico {
    font-size: 34px;
}

.join-review-container .join-ev-head h3 {
    font-size: 17px;
    font-weight: 800;
    margin-top: 6px;
}

.join-review-container .join-ev-head p {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 3px;
}

.join-review-container .join-ev-card {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 15px;
    margin-bottom: 12px;
}

.join-review-container .join-ev-person {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
}

.join-review-container .join-ev-person .join-ava {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
}

.join-review-container .join-ev-person .join-ev-nm {
    font-size: 14px;
    font-weight: 700;
}

.join-review-container .join-ev-person .join-ev-role {
    font-size: 11px;
    color: var(--text-secondary);
}

/* 별점 (.stars → .join-stars) */
.join-review-container .join-stars {
    font-size: 26px;
    letter-spacing: 4px;
    color: #FFC107;
    text-align: center;
    margin-bottom: 13px;
}

.join-review-container .join-stars .join-star {
    cursor: pointer;
}

.join-review-container .join-stars .join-star.is-off {
    color: #e0e4ea;
}

/* 평가 태그 칩 (.tag-pick → .join-tag-pick) */
.join-review-container .join-tag-pick {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.join-review-container .join-tag-pick span {
    font-size: 12px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 18px;
    border: 1px solid var(--border-light);
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
}

.join-review-container .join-tag-pick span.is-on {
    background: var(--primary-bg);
    border-color: var(--primary-border);
    color: var(--primary-dark);
}

/* ===== 아바타 그라데이션 (장식색 — 의미없는 색이라 직접값 허용. join 화면 컨테이너로 스코핑) ===== */
.join-applicant-container .join-ava.is-a,
.join-chat-container .join-ava.is-a,
.join-review-container .join-ava.is-a { background: linear-gradient(135deg, #26a69a, #00897b); }
.join-applicant-container .join-ava.is-b,
.join-chat-container .join-ava.is-b,
.join-review-container .join-ava.is-b { background: linear-gradient(135deg, #5c6bc0, #3949ab); }
.join-applicant-container .join-ava.is-c,
.join-chat-container .join-ava.is-c,
.join-review-container .join-ava.is-c { background: linear-gradient(135deg, #ec407a, #d81b60); }
.join-applicant-container .join-ava.is-d,
.join-chat-container .join-ava.is-d,
.join-review-container .join-ava.is-d { background: linear-gradient(135deg, #7e57c2, #b39ddb); }

/* ===== 신뢰·안전 UI (갭분석 MUST HAVE M1~M4) ===== */

/* M4: 본인인증 뱃지 (이름 옆) */
.join-detail-container .join-verify-badge,
.join-applicant-container .join-verify-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    color: var(--primary-color);
    background: var(--primary-bg);
    border: 1px solid var(--primary-border);
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 4px;
    vertical-align: middle;
}

.join-detail-container .join-verify-badge i,
.join-applicant-container .join-verify-badge i {
    font-size: 9px;
}

/* M4 보조: 자기신고 미인증 라벨 (구력/평균타 옆) */
.join-detail-container .join-unverified,
.join-applicant-container .join-unverified {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 400;
}

/* M4: 상세 호스트 신뢰 정보 행 (히어로 아래) */
.join-detail-container .join-host-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 12px 14px;
    margin-bottom: 12px;
}

.join-detail-container .join-host-row-info {
    flex: 1;
    min-width: 0;
}

.join-detail-container .join-host-row-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

.join-detail-container .join-host-row-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.join-detail-container .join-host-row .join-manner {
    color: #FFC107;
    font-weight: 700;
}

/* M2: 분담금 변동 고지 (정보 톤) */
.join-detail-container .join-notice {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-secondary);
    background: var(--bg-color);
    border-radius: 10px;
    padding: 9px 11px;
    margin-top: 12px;
}

.join-detail-container .join-notice i {
    color: var(--info, #3b82f6);
    font-size: 12px;
    margin-top: 1px;
    flex-shrink: 0;
}

/* M1: 외부송금 사기 경고 (주의 톤) — 신청 시트 */
.join-detail-container .join-warn {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 11.5px;
    line-height: 1.5;
    color: #8a5a00;
    background: #fff8e1;
    border: 1px solid #ffe1a3;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 12px 0;
}

.join-detail-container .join-warn i {
    color: var(--warning);
    font-size: 13px;
    margin-top: 1px;
    flex-shrink: 0;
}

/* M1+M2: 채팅 안전 안내 바 (정보바 아래 고정 흐름) */
.join-chat-container .join-chat-safety {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    line-height: 1.4;
    color: #8a5a00;
    background: #fff8e1;
    border-bottom: 1px solid #ffe1a3;
    padding: 8px 16px;
}

.join-chat-container .join-chat-safety i {
    color: var(--warning);
    font-size: 13px;
    flex-shrink: 0;
}

/* ======== [쿠폰함] mypage\couponList ======== */

/* 쿠폰코드 등록줄 */
.coupon-code-register {
    display: flex;
    gap: 8px;
    padding: 12px 16px 0;
}

.coupon-code-input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid var(--border-color, #E0E0E0);
    border-radius: 10px;
    background: var(--card-bg, #fff);
    font-size: 14px;
    color: var(--text-primary);
    text-transform: uppercase;
}

.coupon-code-input::placeholder {
    color: var(--text-muted, #9E9E9E);
    text-transform: none;
}

.coupon-code-btn {
    flex-shrink: 0;
    padding: 10px 18px;
    border: none;
    border-radius: 10px;
    background: var(--primary-color, #4CAF50);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.coupon-code-btn:disabled {
    opacity: 0.6;
}

/* 상태 필터 탭 (가로 스크롤) */
.coupon-filter-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    overflow-x: auto;
}

.coupon-filter-tab {
    flex-shrink: 0;
    padding: 8px 16px;
    border: 1px solid var(--border-color, #E0E0E0);
    border-radius: 20px;
    background: var(--card-bg, #fff);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.coupon-filter-tab.active {
    background: var(--primary-color, #4CAF50);
    color: #fff;
    border-color: var(--primary-color, #4CAF50);
    font-weight: 600;
}

/* 쿠폰 목록 */
.coupon-box-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 16px 16px;
}

/* 쿠폰 카드: 좌측 할인액 강조 + 우측 정보 */
.coupon-card {
    display: flex;
    align-items: stretch;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #E0E0E0);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.coupon-card-discount {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 88px;
    padding: 16px 10px;
    background: linear-gradient(135deg, var(--primary-color, #4CAF50), var(--primary-dark, #388E3C));
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-right: 1px dashed rgba(255, 255, 255, 0.5);
}

.coupon-card-body {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.coupon-card-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.coupon-card-place {
    font-size: 12.5px;
    color: var(--text-secondary);
}

.coupon-card-place i {
    font-size: 11px;
    color: var(--primary-color, #4CAF50);
}

.coupon-card-cond {
    font-size: 12px;
    color: var(--text-secondary);
}

.coupon-card-date {
    font-size: 12px;
    color: var(--text-muted, #9E9E9E);
}

/* 사용완료/만료 카드 */
.coupon-card-disabled {
    opacity: 0.55;
}

.coupon-card-disabled .coupon-card-discount {
    background: linear-gradient(135deg, #9E9E9E, #BDBDBD);
}

/* 상태 뱃지 */
.coupon-badge {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.coupon-badge-available {
    background: #E8F5E9;
    color: #2E7D32;
}

.coupon-badge-used {
    background: #EEEEEE;
    color: #616161;
}

.coupon-badge-expired {
    background: #FFEBEE;
    color: #C62828;
}


/* --- [대회/이벤트 상세] event\eventViewStyle.css ---
   조회 전용 상세. 제목·본문·하단 버튼은 공지 상세(.ntc-view*)를 그대로 재사용하고,
   공지에 없는 요소(대표 이미지 · 유형/상태 배지 줄 · 기간·장소·지역 정보)만 여기 둔다.
   목록 카드에서 쓰는 .ev-status / .ev-period 는 커뮤니티 섹션에 있다(두 화면 공용). */

.ev-view-container {
    /* 컨테이너 리듬은 공지 상세(.notice-view-container)와 동일 */
    padding: 0 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ev-view-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    background: var(--bg-secondary);
}

.ev-view-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.ev-view-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-secondary);
}

.ev-view-row {
    margin: 0;
    font-size: 14px;
    color: var(--text-primary);
}

.ev-view-label {
    display: inline-block;
    width: 44px;
    color: var(--text-muted);
    font-weight: 600;
}

/* --- [강사 모드 공통] teach\teachCommonStyle.css --- */
/* 2026-09-04 앱 강사 모드(/pkp_app/teach/*) 화면들이 공유하는 부품. 화면 전용 CSS 는 각 화면 섹션에.
   재사용 canon: 카드 .app-card / 폼 .lap-field·.lap-label·.lap-input·.lap-textarea / CTA .rdt-reserve-btn /
   달력 .ro-cal-* / 슬롯 .ro-slot / 바텀시트 .pkp-bottom-sheet / 메뉴행 .mp-menu-* / 빈상태 .empty-state */
.tc-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 16px 24px;
}

.tc-card {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 3px 10px rgba(13, 20, 10, 0.07);
    padding: 16px;
}

.tc-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.tc-card-title .tc-more {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-light);
    background: none;
    border: none;
    padding: 0;
}

.tc-card-title .tc-sub {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

/* 인사 히어로 */
.tc-hero {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 18px;
    background: var(--gradient-primary);
    color: #fff;
}

.tc-hero-date { font-size: 12px; font-weight: 600; opacity: 0.9; }
.tc-hero-name { margin: 2px 0 4px; font-size: 20px; font-weight: 800; }
.tc-hero-desc { margin: 0; font-size: 13px; opacity: 0.92; }

.tc-hero .tc-avatar {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 52px;
    height: 52px;
    font-size: 20px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* 통계 인셋 (mp-stats 형) */
.tc-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 14px 0;
}

.tc-stats.is-3 { grid-template-columns: repeat(3, 1fr); }

.tc-stat {
    text-align: center;
    border-right: 1px solid var(--border-light);
    text-decoration: none;
    color: inherit;
}

.tc-stat:last-child { border-right: none; }

.tc-stat-num {
    display: block;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--primary-color);
}

.tc-stat.is-warning .tc-stat-num { color: var(--warning); }
.tc-stat.is-danger .tc-stat-num { color: var(--danger); }

.tc-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* 바로가기 2x2 (home-svc-card 형) */
.tc-quick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.tc-quick {
    position: relative;
    height: 92px;
    padding: 14px;
    border-radius: 12px;
    background: var(--card-bg);
    border: 1px solid var(--sprout);
    text-decoration: none;
    color: inherit;
}

.tc-quick h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.tc-quick p { margin: 2px 0 0; font-size: 12px; font-weight: 500; color: var(--text-secondary); }

.tc-quick > i {
    position: absolute;
    right: 14px;
    bottom: 12px;
    font-size: 24px;
    color: var(--primary-light);
    opacity: 0.8;
}

.tc-quick .tc-count {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* 카운트 배지(빨강 pill) */
.tc-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

/* 상태 칩 스크롤 (mrv-chip 형) */
.tc-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.tc-chips::-webkit-scrollbar { display: none; }

.tc-chip {
    flex: none;
    padding: 9px 14px;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    background: var(--bg-secondary);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
}

.tc-chip.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.tc-chip b { margin-left: 3px; font-weight: 700; }

/* 상태 텍스트(mrv-status 형) */
.tc-status { font-size: 15px; font-weight: 700; }
.tc-status.is-pending,
.tc-status.is-resched { color: var(--warning); }
.tc-status.is-confirmed { color: var(--primary-color); }
.tc-status.is-completed { color: var(--text-muted); }
.tc-status.is-cancelled { color: var(--danger); }

/* 솔리드 배지(rvx-badge 형) */
.tc-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    color: #fff;
    background: var(--primary-color);
    white-space: nowrap;
}

.tc-badge.is-warning { background: var(--warning); }
.tc-badge.is-danger { background: var(--danger); }
.tc-badge.is-muted { background: var(--text-muted); }
.tc-badge.is-soft { background: var(--primary-bg); color: var(--primary-dark); }
.tc-badge.is-vip { background: var(--primary-dark); }

/* 작은 태그(rd-chip 형) */
.tc-tag {
    display: inline-block;
    padding: 3px 5px;
    border-radius: 4px;
    background: var(--primary-bg);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--primary-color);
}

.tc-tag.is-gray { background: var(--bg-secondary); color: var(--text-secondary); }

/* 버튼 */
.tc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 48px;
    padding: 0 16px;
    border: none;
    border-radius: 10px;
    background: var(--primary-color);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    font-family: inherit;
}

.tc-btn.is-outline {
    background: var(--card-bg);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.tc-btn.is-danger {
    background: var(--card-bg);
    border: 1px solid var(--danger);
    color: var(--danger);
}

.tc-btn.is-ghost {
    background: var(--bg-secondary);
    color: var(--text-muted);
}

.tc-btn.is-sm { height: 38px; padding: 0 12px; border-radius: 8px; font-size: 13px; flex: 1; }
.tc-btn.is-lg { height: 52px; border-radius: 12px; font-size: 16px; flex: 1; }
.tc-btn:disabled { background: var(--bg-secondary); color: var(--text-muted); border-color: var(--border-light); }

.tc-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* 아바타(첫 글자) */
.tc-avatar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary-bg);
    color: var(--primary-dark);
    font-size: 16px;
    font-weight: 800;
}

.tc-avatar.is-lg { width: 64px; height: 64px; font-size: 22px; }
.tc-avatar.is-sm { width: 36px; height: 36px; font-size: 13px; }

/* 목록 행 */
.tc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border-light);
    text-decoration: none;
    color: inherit;
}

.tc-row:last-child { border-bottom: none; }
.tc-row-body { flex: 1; min-width: 0; }

.tc-row-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.tc-row-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-row-right {
    flex: none;
    text-align: right;
    font-size: 12px;
    color: var(--text-muted);
}

.tc-row-right b {
    display: block;
    font-size: 14px;
    color: var(--text-primary);
}

/* 당일 아젠다 행 */
.tc-ag {
    display: flex;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-light);
}

.tc-ag:last-child { border-bottom: none; }

.tc-ag-time {
    flex: none;
    width: 48px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.tc-ag-time small {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}

.tc-ag-bar {
    flex: none;
    width: 4px;
    border-radius: 2px;
    background: var(--primary-color);
}

.tc-ag-bar.is-pending,
.tc-ag-bar.is-resched { background: var(--warning); }
.tc-ag-bar.is-memo { background: var(--text-muted); }
.tc-ag-bar.is-cancelled { background: var(--danger); }

.tc-ag-body { flex: 1; min-width: 0; }

.tc-ag-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.tc-ag.is-memo .tc-ag-name { color: var(--text-muted); }
.tc-ag-sub { margin-top: 2px; font-size: 12px; color: var(--text-muted); }

.tc-ag-right {
    flex: none;
    align-self: center;
    font-size: 12px;
    color: var(--text-muted);
    background: none;
    border: none;
    padding: 4px;
}

/* 달력 날짜 셀 보강(ro-cal-day 위에 얹는다) — 건수 라벨·오늘·휴무 */
.tc-cal-day {
    padding: 5px 0 3px;
    line-height: 1.2;
}

.tc-cal-day small {
    display: block;
    height: 11px;
    font-size: 9px;
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
}

.tc-cal-day small.is-warning { color: var(--warning); }
.tc-cal-day.selected small { color: #fff; }
.tc-cal-day.today { box-shadow: inset 0 0 0 1.5px var(--primary-color); }
.tc-cal-day.is-holiday { color: var(--danger); background: rgba(201, 95, 85, 0.08); }
.tc-cal-day.is-holiday small { color: var(--danger); }

.tc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--text-muted);
}

.tc-legend span::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: 2px;
    background: var(--primary-color);
    vertical-align: middle;
}

.tc-legend .is-warning::before { background: var(--warning); }
.tc-legend .is-memo::before { background: var(--text-muted); }
.tc-legend .is-holiday::before { background: var(--danger); }

/* 시간 슬롯 4열(ro-slot 위에 얹는다) */
.tc-slots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.tc-slots .ro-slot { height: 38px; font-size: 13px; }
.tc-slots .ro-slot.is-booked {
    background: var(--bg-secondary);
    color: var(--neutral-300);
    text-decoration: line-through;
}

/* 세그먼트 토글(예약/메모 등) */
.tc-seg { display: flex; gap: 8px; }

.tc-seg-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: var(--card-bg);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: inherit;
}

.tc-seg-item.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* 네이티브 select 를 lap-input 규격으로 */
.tc-select {
    width: 100%;
    height: 46px;
    padding: 0 40px 0 20px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238B9288' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 16px center;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
}

.tc-select:focus { outline: none; border-color: var(--primary-color); }

.tc-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* 안내 박스 */
.tc-note {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface-card);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.tc-note.is-warning {
    background: rgba(215, 139, 53, 0.12);
    color: var(--warning);
    font-weight: 600;
}

/* 스위치 */
.tc-toggle {
    flex: none;
    position: relative;
    width: 44px;
    height: 26px;
    border: none;
    border-radius: 13px;
    background: var(--neutral-300);
    transition: background var(--transition-fast);
    padding: 0;
}

.tc-toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: left var(--transition-fast);
}

.tc-toggle.active { background: var(--primary-color); }
.tc-toggle.active::after { left: 21px; }

/* FAB */
.tc-fab {
    position: fixed;
    right: calc(var(--app-shell-left) + 16px);
    bottom: calc(var(--footer-total) + 16px);
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 8px 20px rgba(86, 149, 68, 0.4);
}

/* 바텀시트 본문 스크롤 영역(pkp-bottom-sheet 안) */
.tc-sheet-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 검색 입력 */
.tc-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--card-bg);
}

.tc-search i { font-size: 13px; color: var(--text-muted); }

.tc-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--text-primary);
    outline: none;
    font-family: inherit;
}

/* 키-값 행 */
.tc-kv {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: 14px;
}

.tc-kv .tc-k { color: var(--text-secondary); }
.tc-kv .tc-v { font-weight: 600; color: var(--text-primary); text-align: right; }

.tc-kv.is-total {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

.tc-kv.is-total .tc-v { font-size: 18px; font-weight: 800; color: var(--primary-color); }

/* mp-menu-row 를 <button> 으로 쓸 때 리셋 */
.mp-menu-row-btn {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    font-family: inherit;
    color: inherit;
}

/* --- [강사 로그인] login\teachLoginStyle.css --- */
.tlg-container { gap: 0; }

.tlg-hero {
    text-align: center;
    padding: 24px 0 28px;
}

.tlg-hero-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--primary-bg);
    color: var(--primary-color);
    font-size: 26px;
}

.tlg-title { margin: 0; font-size: 22px; font-weight: 700; color: var(--text-primary); }
.tlg-desc { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }

.tlg-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tlg-submit { flex: none; width: 100%; margin-top: 4px; }

/* --- [강사 홈] teach\teachHomeStyle.css --- */
/* 2026-09-04 앱 강사 모드 ② — 공통 부품(.tc-*) 위에 얹는 홈 전용 보강 */
.th-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.th-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-color);
}

.th-mode {
    padding: 3px 8px;
    border-radius: 10px;
    background: var(--primary-bg);
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-dark);
}

.th-topbar-avatar { text-decoration: none; }

/* 아젠다 행을 앵커로 쓴다(행 탭 → 일정) */
.th-ag { text-decoration: none; color: inherit; }

.th-container .th-empty { padding: 20px 0 8px; }

.th-kv-note {
    margin-left: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}

.th-revenue { color: var(--primary-color); }
.th-star { color: var(--accent-color); }

/* --- [강사 리뷰 관리] teach\teachReviewStyle.css --- */
/* 2026-09-04 앱 강사 모드 ⑬ — 요약(평균·분포) · 칩 필터 · 항목 · 답글 시트 */
.trv-sum {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 16px;
    align-items: center;
}

.trv-sum-left { text-align: center; }

.trv-big {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-primary);
}

.trv-stars {
    margin-top: 4px;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--accent-color);
}

.trv-cnt {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.trv-dist {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trv-dr {
    display: grid;
    grid-template-columns: 28px 1fr 24px;
    gap: 8px;
    align-items: center;
    font-size: 11px;
    color: var(--text-muted);
}

.trv-dr-cnt { text-align: right; }

.trv-track {
    height: 6px;
    border-radius: 3px;
    background: var(--neutral-100);
    overflow: hidden;
}

.trv-fill {
    width: 0;
    height: 100%;
    border-radius: 3px;
    background: var(--accent-color);
    transition: width var(--transition-fast);
}

.trv-container .tc-chip { font-family: inherit; }

.trv-container .trv-list-card { padding: 4px 16px; }

.trv-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-light);
}

.trv-item:last-child { border-bottom: none; }

.trv-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trv-head-body { flex: 1; min-width: 0; }

.trv-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.trv-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trv-rating {
    flex: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-color);
}

.trv-content {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-line;
    word-break: break-word;
}

.trv-reply {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface-card);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    word-break: break-word;
}

.trv-reply b { color: var(--primary-color); }

/* 답글 버튼은 목업처럼 작게(공통 .is-sm 의 flex:1 을 풀어 내용 폭만) */
.trv-item .tc-actions .tc-btn { flex: none; }

.trv-origin { word-break: break-word; }
.trv-origin b { color: var(--text-primary); }

.trv-reply-text { min-height: 120px; }

.trv-counter {
    text-align: right;
    font-size: 12px;
    color: var(--text-muted);
}

.trv-submit { flex: none; width: 100%; }

/* --- [강사 내 정보] teach\teachMyStyle.css --- */
/* 2026-09-04 앱 강사 모드 ⑭ — mp-profile-card / mp-menu-row canon 위 보강 */
.tmy-sub {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tmy-ext-link { text-decoration: none; }

.tmy-stats { margin-top: 16px; }

.tmy-container .mp-menu-row .tc-count { margin-left: 4px; }

.tmy-chevron { transition: transform var(--transition-fast); }
.tmy-chevron.is-open { transform: rotate(180deg); }

.tmy-products { padding: 0 0 14px; }
.tmy-products .tc-kv { font-size: 13px; }
.tmy-products .tc-note { margin-top: 8px; }

.tmy-products-empty {
    margin: 8px 0;
    font-size: 13px;
    color: var(--text-muted);
}

.tmy-container .tmy-sect-title { font-size: 16px; }

.tmy-logout .mp-menu-ico,
.tmy-logout .mp-menu-text { color: var(--text-muted); }

/* --- [강사 일정] teach\teachScheduleStyle.css --- */
/* 2026-09-04 앱 강사 모드 ③ 월간+당일 아젠다 · ④ 블록 추가 시트. 공통 부품은 [강사 모드 공통] 섹션. */
.tsc-container { padding-bottom: 96px; }   /* FAB(52px + 16px 여백) 가 마지막 행을 가리지 않게 */

.tsc-cal-card { touch-action: pan-y; }     /* 좌우 스와이프 = 월 이동, 세로 스크롤은 브라우저에 */

.tsc-container .tsc-month-label {
    border: none;
    background: none;
    padding: 4px 10px;
    font: inherit;
    font-weight: 700;
    color: var(--text-primary);
}

.tsc-container .ro-cal-days { margin-top: 2px; }

/* 아젠다 행이 <a> 일 때 링크 기본 스타일 제거 */
.tsc-container a.tc-ag {
    text-decoration: none;
    color: inherit;
}

.tsc-container .tsc-memo-del { color: var(--danger); }

.tsc-container .empty-state { padding: 28px 0 16px; }

/* 시트 폼 */
.tsc-container .tc-note i { margin-right: 4px; color: var(--primary-color); }

.tsc-pay-ro {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--bg-secondary);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
}

.tsc-pay-ro small { font-size: 12px; font-weight: 500; color: var(--text-muted); }

.tsc-memo { min-height: 96px; padding: 14px 20px; }

.tsc-submit { width: 100%; margin-top: 4px; }

/* --- [강사 휴무일] teach\teachHolidayStyle.css --- */
/* 2026-09-04 앱 강사 모드 ⑤ 정기 휴무(읽기 전용) · 3개월 미니 캘린더 · 등록 목록. */
.thl-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.thl-days .tc-chip {
    padding: 9px 0;
    text-align: center;
}

.thl-hint {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.thl-month + .thl-month { margin-top: 16px; }

.thl-month-label {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.thl-container .thl-day { padding: 7px 0; font-size: 13px; }
.thl-container .thl-day.disabled { background: none; }

.thl-container .thl-del { color: var(--danger); }

.thl-container .empty-state { padding: 20px 0 8px; }

/* PkpDialog messageHtml 안의 사유 입력 */
.pkp-dialog .thl-reason {
    margin-top: 12px;
    height: 42px;
    font-size: 14px;
    text-align: left;
}

/* --- [강사 예약 관리] teach\teachReserveStyle.css --- */
/* 2026-09-04 앱 강사 모드 ⑥ 예약 관리 + ⑦ 일정 변경 제안 시트. 공통 부품은 [강사 모드 공통] tc-* 를 쓴다. */
.trs-container .tc-chip {
    font-family: inherit;
    cursor: pointer;
}

.trs-container .trs-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 아이콘만 있는 버튼이라 13px 짜리 터치 타깃이었다 (2026-09-04 QA 크루 V1-F5).
       입력창 높이(44px) 안에서 최소 40px 을 확보한다 — 좌측 padding 을 버튼이 대신 먹는다. */
    flex: none;
    width: 34px;
    height: 40px;
    margin-left: -6px;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
}

.trs-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 딥링크(?reserveId=) 도착 카드 2초 강조 */
.trs-card { transition: box-shadow 0.3s ease; }
.trs-card.is-highlight { box-shadow: 0 0 0 2px var(--primary-color), 0 3px 10px rgba(13, 20, 10, 0.07); }

.trs-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.trs-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.trs-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.trs-meta i { margin-right: 2px; }

.trs-tel {
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
}

.trs-resched { margin-top: 12px; }
.trs-resched .trs-new { color: var(--text-primary); }
.trs-resched .trs-tbd { color: var(--warning); }
.trs-resched .trs-reason-text { margin-top: 4px; }

/* 고스트 안내 버튼 옆의 거절은 고정폭 — 안내 문구가 폭을 가져간다 */
.trs-container .tc-btn.is-ghost + .tc-btn.is-danger { flex: 0 0 76px; }

/* 거절 사유 입력(PkpDialog messageHtml 안) */
.pkp-dialog-message .trs-cancel-reason {
    margin-top: 12px;
    height: 42px;
    padding: 0 14px;
    font-size: 14px;
}

/* ⑦ 시트 */
.trs-week {
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
}

.trs-week .ro-cal-nav {
    margin: 0 0 6px;
    font-size: 14px;
}

.trs-week .ro-cal-btn:disabled { opacity: 0.35; }
.trs-week .ro-cal-day.disabled small { visibility: hidden; }
.trs-week .ro-cal-day.is-holiday.disabled { color: var(--danger); }
.trs-week .ro-cal-day.is-holiday.disabled small { visibility: visible; }

.trs-slot-hint {
    margin-left: 4px;
    font-weight: 500;
    color: var(--text-muted);
}

.trs-sheet .ro-slot:disabled:not(.is-booked) {
    color: var(--neutral-300);
    background: var(--bg-secondary);
}

.trs-sheet .trs-reason.lap-textarea {
    min-height: 84px;
    padding: 12px 16px;
}

.trs-sheet .checkbox-label { padding: 4px 0; }

.trs-sheet .trs-submit {
    flex: none;
    width: 100%;
}

.trs-sheet .bottom-sheet-content { padding-bottom: calc(24px + var(--sab)); }

/* --- [강사 수강생] teach\teachStudentStyle.css --- */
/* ⑧ 수강생 목록(.tst-container) · ⑨ 수강생 상세(.tst-detail). 공통 부품은 [강사 모드 공통] tc-* 사용. */
.tst-container .tc-chip { padding: 8px 12px; }

.tst-container .tst-list-card { padding: 12px 16px 4px; }
.tst-container .tst-list-card .tc-card-title { margin-bottom: 4px; }

.tst-container .tst-row-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tst-container .tst-memo-ico { font-size: 11px; color: var(--text-muted); }

.tst-container .empty-state { padding: 32px 0 28px; }

/* 상세 · 프로필 */
.tst-detail .tst-prof {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tst-detail .tst-prof-body { flex: 1; min-width: 0; }
.tst-detail .tst-prof-grade { margin-bottom: 4px; }

.tst-detail .tst-prof-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tst-detail .tst-prof-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
}

.tst-detail .tst-stats { margin-top: 16px; }
.tst-detail .tst-stats .tc-stat-num { font-size: 18px; }
.tst-detail .tc-actions .tc-btn[aria-disabled="true"] { border: 1px solid var(--border-light); }

/* 상세 · 등급/메모 */
.tst-detail .tst-grades { margin-bottom: 12px; }
.tst-detail .tst-grades .tc-seg-item { height: 40px; font-size: 14px; }
.tst-detail .tst-grades .tc-seg-item[data-grade="CAUTION"].active { background: var(--danger); border-color: var(--danger); }
.tst-detail .tst-grades .tc-seg-item[data-grade="VIP"].active { background: var(--primary-dark); border-color: var(--primary-dark); }

.tst-detail .tst-memo { min-height: 110px; padding: 14px 16px; }

.tst-detail .tst-memo-count {
    margin-top: 6px;
    text-align: right;
    font-size: 11px;
    color: var(--text-muted);
}

/* 상세 · 예약 이력 */
.tst-detail .tst-hist {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-light);
    text-decoration: none;
    color: inherit;
}

.tst-detail .tst-hist:last-child { border-bottom: none; }
.tst-detail .tst-hist-body { flex: 1; min-width: 0; }

.tst-detail .tst-hist-date {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.tst-detail .tst-hist-prod {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tst-detail .tst-hist-right {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.tst-detail .tst-hist-right small {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.tst-detail .empty-state { padding: 28px 0 20px; }

/* --- [강사 채팅] teach\teachChatStyle.css --- */
/* ⑩ 채팅 목록(tcl-) · ⑪ 채팅방(tch-).
   채팅방은 lessonChat 의 .chat-header/.chat-messages/.message-*/.chat-input-*/.booking-card* 를 그대로 쓴다
   (그 규칙들은 .lesson-chat-container 에 스코프되어 있지 않다). 컨테이너만 tch- 로 복제한다. */

/* ── ⑩ 채팅 목록 ── */
.tcl-container .tc-card.tcl-list-card { padding: 4px 16px; }
.tcl-row { cursor: pointer; }
.tcl-row:active { background: var(--bg-secondary); }
.tcl-real { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.tcl-preview { font-size: 13px; }
.tcl-preview.is-unread { color: var(--text-primary); font-weight: 600; }
.tcl-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-height: 40px; }
.tcl-time { font-size: 12px; color: var(--text-muted); }

/* ── ⑪ 채팅방 ── */
/* .lesson-chat-container 와 같은 전체화면 flex 셸 (contents.css:5522). 헤더는 in-flow 첫 요소. */
.tch-container {
    position: fixed;
    top: 0;
    left: var(--app-shell-left);
    right: auto;
    bottom: var(--footer-total);
    width: var(--app-shell-width);
    max-width: var(--app-shell-max-width);
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    overflow: hidden;
}

/* 자체 헤더 세이프에어리어 — .chat-header 공통 규칙과 같은 값이지만 이 화면이 pageHeader 를 쓰지 않으므로 여기서도 못박는다 */
.tch-container .chat-header { padding-top: calc(12px + var(--sat)); }
.tch-container .chat-header .tc-avatar { width: 42px; height: 42px; font-size: 16px; }
.tch-container .chat-user-info { flex: 1; min-width: 0; }
.tch-container .chat-user-detail { min-width: 0; }
.tch-container .chat-user-name,
.tch-container .chat-user-status { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 메시지 상태 */
.tch-container .message-group.is-pending .message-bubble { opacity: 0.7; }
.tch-container .message-group.is-failed .message-send-status { color: var(--danger); }
.tch-container .message-bubble.tch-image { padding: 4px; background: transparent; }
.tch-container .message-bubble.tch-image img { display: block; max-width: 220px; border-radius: 10px; }

/* 예약서 카드 — 강사 시점: 액션 버튼 없이 상태 푸터 */
.tch-container .booking-card { min-width: 240px; }
.tch-bcard-seq { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.tch-bcard-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--bg-secondary);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}
.tch-bcard-foot.is-pending,
.tch-bcard-foot.is-resched { background: rgba(215, 139, 53, 0.12); color: var(--warning); }
.tch-bcard-foot.is-confirmed { background: var(--primary-bg); color: var(--primary-color); }
.tch-bcard-foot.is-cancelled { background: rgba(201, 95, 85, 0.12); color: var(--danger); }
.tch-bcard-memo { width: 100%; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.tch-bcard-link { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--primary-color); text-decoration: none; }

/* --- [공통] 판매자 사업자 정보 아코디언 inc\sellerInfo.jsp (전자상거래법 §20②, 2026-09-09) --- */
/* 청약 전 화면(lessonOption·screenOption·roundingOption) 하단. 접힘 상태는 각주처럼 희미하게(2026-09-18 요청) —
   카드 테두리·배경 없이 muted 12px 한 줄. 펼친 본문은 법정 고지라 대비를 그대로 둔다. */
.seller-info {
    padding: 6px 4px;
}
.seller-info-head {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-align: left;
    cursor: pointer;
}
.seller-info-head .fa-store { font-size: 11px; color: var(--text-muted); }
.seller-info-arrow { margin-left: auto; font-size: 10px; color: var(--text-muted); transition: transform 0.2s; }
.seller-info.open .seller-info-arrow { transform: rotate(180deg); }
.seller-info-body {
    display: none;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
}
.seller-info.open .seller-info-body { display: flex; }
.seller-info-row { display: flex; gap: 12px; font-size: 13px; }
.seller-info-row .k { flex: 0 0 96px; color: var(--text-secondary); }
.seller-info-row .v { flex: 1; min-width: 0; font-weight: 500; color: var(--text-primary); word-break: break-all; }
.seller-info-note { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
/* 스크린 옵션은 .app-card 리스트 안이라 카드 간격만 맞춘다 */
.screen-option-container .seller-info { margin-bottom: 16px; }

/* --- [레슨 예약] lesson\lessonOption (선결제, 2026-09-09) --- */
/* 라운딩 옵션(.ro-*)의 카드·날짜·슬롯·동의·하단바를 그대로 쓴다. 여기는 커리큘럼 카드와 요청사항만. */
.lo-products { display: flex; flex-direction: column; gap: 8px; }
.lo-product {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.lo-product.selected { border-color: var(--primary-color); background: var(--primary-bg); }
.lo-product-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lo-product-name { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.lo-product-meta { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.lo-product-price { flex-shrink: 0; font-size: 15px; font-weight: 700; color: var(--primary-color); }
.lo-memo {
    width: 100%;
    min-height: 72px;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: var(--card-bg);
    font-family: inherit;
    font-size: 14px;
    color: var(--text-primary);
    resize: vertical;
}
.lo-memo-count { margin-top: 4px; text-align: right; font-size: 12px; color: var(--text-muted); }
.lo-coupon-row select { max-width: 60%; }
.lo-consent-target { margin: 4px 0 0 30px; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.ro-agree .consent-view-link { margin-left: auto; flex-shrink: 0; }
.lo-container .ro-date-chip.disabled { opacity: 0.4; pointer-events: none; }
.lo-container .ro-card-title small { margin-left: 4px; font-size: 13px; font-weight: 500; }