.qna-question-actions,
.qna-question-actions .material-icons {
    cursor: pointer;
}

.qna-filter-tab,
.qna-sort,
.qna-fab,
.qna-speaker-pill,
.qna-form-select,
.qna-form-option,
.detail-header-action,
.section-btn,
.section-header,
.section-toggle,
.menu-btn,
.profile-btn,
.header-button,
.back-btn {
    cursor: pointer;
}
/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #4A90E2;
    --primary-hover: #357ABD;
    --text-color: #333333;
    --text-light: #666666;
    --border-color: #E0E0E0;
    --error-color: #E74C3C;
    --success-color: #27AE60;
    --bg-color: #F5F5F5;
    --white: #FFFFFF;
    --purple: #795cde;
    --red: #E74C3C;
    --teal: #20B2AA;
    --blue: #4A90E2;
    --gray-900: #111827;
    --qna-font: 'SUIT Variable', 'SUIT', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-color);
    background: var(--white);
    position: relative;
    line-height: 1.7;
}

@font-face {
    font-family: 'SUIT Variable';
    font-style: normal;
    font-weight: 100 900;
    src: url('https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/variable/SUIT-Variable.woff2') format('woff2');
    font-display: swap;
}

/* 배경 이미지 */
.background-image {
    position: fixed;
    z-index: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 50%, #FFFFFF 100%);
    background-size: cover;
    background-position: center;
}

/* 상단 헤더 */
.top-header {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 72px;
    padding: 16px 23px 16px 41px;
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
}


.header-left {
    display: flex;
    align-items: center;
}

.logo-container {
    margin-right: 16px;
    object-fit: contain;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.logo-link {
    display: block;
}

.header-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.header-title {
    width: auto;
    height: 20px;
    margin: 0;
    color: #5d3fbf;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.header-right {
    display: flex;
}

.mobile-menu-btn {
    display: none;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #fff;
    margin-right: 12px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mobile-menu-btn .material-icons {
    font-size: 20px;
}

.mobile-menu {
    position: fixed;
    top: 72px;
    left: 16px;
    right: 16px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 8px;
    z-index: 200;
    display: none;
}

.mobile-menu.is-open {
    display: block;
}

.mobile-menu-item {
    width: 100%;
    padding: 14px 18px;
    border: none;
    background: transparent;
    text-align: left;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #222;
    cursor: pointer;
    text-decoration: none;
    display: block;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.mobile-menu-item:hover {
    background: #F9FAFB;
}

.mobile-admin-panel {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 300;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 84px 16px 16px;
}

.mobile-admin-panel.is-open {
    display: flex;
}

.mobile-rotate-hint {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    color: #ffffff;
}

.mobile-admin-panel.is-portrait .mobile-rotate-hint {
    display: flex;
}

.mobile-rotate-card {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 12px;
    padding: 20px 16px;
    max-width: 320px;
}

.mobile-rotate-card .material-icons {
    font-size: 32px;
    margin-bottom: 8px;
}

.mobile-rotate-card p {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.4;
}
.mobile-admin-panel-card {
    width: 100%;
    max-width: 640px;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
}

.mobile-admin-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    color: #111;
    border-bottom: 1px solid #ededed;
}

.mobile-admin-close {
    border: none;
    background: transparent;
    cursor: pointer;
    color: #555;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-admin-panel-body {
    padding: 12px;
}

.mobile-admin-empty {
    text-align: center;
    color: #666;
    font-size: 14px;
    padding: 24px 12px;
}
.header-button {
    background: #5d3fbf;
    height: 44px;
    box-shadow: 0 2px 8px rgba(93, 63, 191, 0.2);
    border-radius: 12px;
    padding: 12px 20px;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.header-button:hover {
    background: #4a32a0;
}

.header-button-text {
    height: 16px;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.23;
    color: #ffffff;
    letter-spacing: -0.01em;
}

/* 메인 레이아웃 */
.main-layout {
    position: relative;
    z-index: 1;
    display: flex;
    margin-top: 0;
    width: 100%;
    padding: 40px 0;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 60px;
    min-height: calc(100vh - 72px);
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: visible;
}

/* 우측 영상: 기본 숨김, .is-visible 하나만 표시 (라이브 이중 표시 방지) */
.info-video,
.qna-video,
.main-video,
.survey-video,
.lottery-video,
.myinfo-video,
.networking-video {
    background: #000;
}
.info-video {
    position: absolute;
    top: 20px;
    left: calc(150px + 428px);
    width: min(1100px, calc(100vw - (150px + 428px) - 40px));
    aspect-ratio: 16 / 9;
    display: none;
}
.info-video.is-visible {
    display: block;
}

.info-video-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.qna-video {
    position: absolute;
    top: 20px;
    left: calc(150px + 428px);
    width: min(1100px, calc(100vw - (150px + 428px) - 40px));
    aspect-ratio: 16 / 9;
    display: none;
}

.qna-video.is-visible {
    display: block;
}

.qna-video-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.main-video {
    position: absolute;
    top: 20px;
    left: calc(150px + 428px);
    width: min(1100px, calc(100vw - (150px + 428px) - 40px));
    aspect-ratio: 16 / 9;
    display: none;
}

.main-video.is-visible {
    display: block;
}

.main-video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

/* HubSpot: 오버레이 비활성화 - 영상 자체에 텍스트 포함 */
.main-video-overlay {
    display: none !important;
}

.main-video.is-dimmed .main-video-overlay {
    opacity: 1;
}

.main-video-text {
    color: #ffffff;
    font-size: 22px;
    line-height: 1.5;
    font-weight: 600;
}

.main-video-line {
    margin: 0 0 10px;
    opacity: 0;
    transform: translateY(6px);
}

.main-video-line:last-child {
    margin-bottom: 0;
}

.main-video-overlay.is-typing .main-video-line {
    animation: line-fade-in 0.8s ease forwards;
}

.survey-video {
    position: absolute;
    top: 20px;
    left: calc(150px + 428px);
    width: min(1100px, calc(100vw - (150px + 428px) - 40px));
    aspect-ratio: 16 / 9;
    display: none;
}

.survey-video.is-visible {
    display: block;
}

.survey-video-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

/* HubSpot: 오버레이 비활성화 - 영상 자체에 텍스트 포함 */
.survey-video-overlay {
    display: none !important;
}

.survey-video.is-dimmed .survey-video-overlay {
    opacity: 1;
}

.survey-video-text {
    color: #ffffff;
    font-size: 22px;
    line-height: 1.5;
    font-weight: 600;
}

.survey-video-line {
    margin: 0 0 10px;
    opacity: 0;
    transform: translateY(6px);
}

.survey-video-line:last-child {
    margin-bottom: 0;
}

.survey-video-overlay.is-typing .survey-video-line {
    animation: line-fade-in 0.8s ease forwards;
}

/* 경품추첨 영상 */
.lottery-video {
    position: absolute;
    top: 20px;
    left: calc(150px + 428px);
    width: min(1100px, calc(100vw - (150px + 428px) - 40px));
    aspect-ratio: 16 / 9;
    display: none;
}

.lottery-video.is-visible {
    display: block;
}

.lottery-video-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

/* 내정보 영상 */
.myinfo-video {
    position: absolute;
    top: 20px;
    left: calc(150px + 428px);
    width: min(1100px, calc(100vw - (150px + 428px) - 40px));
    aspect-ratio: 16 / 9;
    display: none;
}

.myinfo-video.is-visible {
    display: block;
}

.myinfo-video-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

/* 네트워킹 영상 */
.networking-video {
    position: absolute;
    top: 20px;
    left: calc(150px + 428px);
    width: min(1100px, calc(100vw - (150px + 428px) - 40px));
    aspect-ratio: 16 / 9;
    display: none;
}

.networking-video.is-visible {
    display: block;
}

.networking-video-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

/* 우측 영상: 한 번에 하나만 표시 (라이브 이중 표시 방지) */
.info-video:not(.is-visible),
.qna-video:not(.is-visible),
.main-video:not(.is-visible),
.survey-video:not(.is-visible),
.lottery-video:not(.is-visible),
.myinfo-video:not(.is-visible),
.networking-video:not(.is-visible) {
    display: none !important;
}
.info-video.is-visible,
.qna-video.is-visible,
.main-video.is-visible,
.survey-video.is-visible,
.lottery-video.is-visible,
.myinfo-video.is-visible,
.networking-video.is-visible {
    display: block !important;
}

/* HubSpot: 오버레이 비활성화 - 영상 자체에 텍스트 포함 */
.lottery-video-overlay {
    display: none !important;
}

.lottery-video.is-dimmed .lottery-video-overlay {
    opacity: 1;
}

.lottery-video-text {
    color: #ffffff;
    font-size: 22px;
    line-height: 1.5;
    font-weight: 600;
}

.lottery-video-line {
    margin: 0 0 10px;
    opacity: 0;
    transform: translateY(6px);
}

.lottery-video-line:last-child {
    margin-bottom: 0;
}

.lottery-video-overlay.is-typing .lottery-video-line {
    animation: line-fade-in 0.8s ease forwards;
}

/* HubSpot: 오버레이 비활성화 - 영상 자체에 텍스트 포함 */
.qna-video-overlay {
    display: none !important;
}

.qna-video.is-dimmed .qna-video-overlay {
    opacity: 1;
}

.qna-video-text {
    color: #ffffff;
    font-size: 22px;
    line-height: 1.5;
    font-weight: 600;
}

.qna-video-line {
    margin: 0 0 10px;
    opacity: 0;
    transform: translateY(6px);
}

.qna-video-line:last-child {
    margin-bottom: 0;
}

.qna-video-overlay.is-typing .qna-video-line {
    animation: line-fade-in 0.8s ease forwards;
}

/* HubSpot: 오버레이 비활성화 - 영상 자체에 텍스트 포함 */
.info-video-overlay {
    display: none !important;
}

.info-video.is-dimmed .info-video-overlay {
    opacity: 1;
}

.info-video-text {
    color: #ffffff;
    font-size: 22px;
    line-height: 1.5;
    font-weight: 600;
}

.info-video-line {
    margin: 0 0 10px;
    opacity: 0;
    transform: translateY(6px);
}

.info-video-line:last-child {
    margin-bottom: 0;
}

.info-video-overlay.is-typing .info-video-line {
    animation: line-fade-in 0.8s ease forwards;
}

@keyframes line-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 핸드폰 디바이스 (왼쪽) - 영상 윗선(top: 20px)과 맞춤 */
.device-container {
    margin-left: 150px;
    margin-right: 0;
    margin-top: -20px;
    min-height: 600px;
    width: 405px;
    flex-shrink: 0;
    transform: scale(0.898);
    transform-origin: top left;
    position: relative;
}

/* PC에서는 핸드폰 프레임 안의 햄버거 버튼 숨김 */
.device-container .mobile-menu-btn {
    display: none !important;
}

/* 말풍선 영역 (핸드폰 우측) */
.balloon-container {
    padding-left: 0;
    padding-right: 0;
    width: auto;
    display: flex;
    justify-content: flex-start;
    flex: 1;
    margin-top: 100px;
    transform: scale(0.9);
    transform-origin: top left;
}

.balloon-wrapper {
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
}

.balloon {
    opacity: 1;
    animation: none;
}

.balloon-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 35px 43px 30px 40px;
    gap: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    position: relative;
}

.balloon-purple {
    background: #6A5ACD;
}

.balloon-white {
    background: var(--white);
}

.balloon-icon {
    width: auto;
    height: auto;
    font-size: 36px;
    font-weight: 900;
    text-align: left;
    display: block;
    margin-bottom: 0;
    line-height: 1;
}

.balloon-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.balloon-text {
    width: auto;
    margin-top: 0;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: -0.02em;
    white-space: pre-line;
    word-wrap: break-word;
    max-width: 500px;
}

.balloon-purple .balloon-text {
    color: var(--white);
}

.balloon-white .balloon-text {
    color: var(--text-color);
}

/* 말풍선 꼬리 효과 */
.pull {
    position: relative;
}

.pull::after {
    content: "";
    position: absolute;
    bottom: 0px;
    right: -21px;
    border-left: 50px solid var(--white);
    border-top: 50px solid transparent;
}


.device {
    position: relative;
    transform: scale(1);
    z-index: 1;
}

.device *,
.device ::after,
.device ::before,
.device::after,
.device::before {
    box-sizing: border-box;
    display: block;
}

/* iPhone 14 Pro 스타일 */
.device-iphone-14-pro {
    height: 868px;
    width: 428px;
}

.device-iphone-14-pro .device-frame {
    background: #010101;
    border: 1px solid #1b1721;
    border-radius: 68px;
    box-shadow: inset 0 0 4px 2px #c0b7cd, inset 0 0 0 6px #342c3f;
    height: 868px;
    padding: 19px;
    width: 428px;
    position: relative;
}

.device-iphone-14-pro .device-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 28px;
    background: #010101;
    border-radius: 0 0 18px 18px;
    z-index: 10;
}

.device-iphone-14-pro .device-screen {
    background-color: #000;
    background-position: center center;
    background-size: cover;
    object-fit: cover;
    position: relative;
    border-radius: 49px;
    height: 830px;
    width: 390px;
    overflow: hidden;
}

.device-iphone-14-pro .device-stripe::after,
.device-iphone-14-pro .device-stripe::before {
    border: solid rgba(1, 1, 1, 0.25);
    border-width: 0 7px;
    content: "";
    height: 7px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 9;
}

.device-iphone-14-pro .device-stripe::after {
    top: 85px;
}

.device-iphone-14-pro .device-stripe::before {
    bottom: 85px;
}

.device-iphone-14-pro .device-header {
    background: #010101;
    border-radius: 20px;
    height: 35px;
    left: 50%;
    margin-left: -60px;
    position: absolute;
    top: 29px;
    width: 120px;
    z-index: 10;
}

.device-iphone-14-pro .device-sensors::after,
.device-iphone-14-pro .device-sensors::before {
    content: "";
    position: absolute;
}

.device-iphone-14-pro .device-sensors::after {
    background: #010101;
    border-radius: 17px;
    height: 33px;
    left: 50%;
    margin-left: -60px;
    top: 30px;
    width: 74px;
    z-index: 10;
}

.device-iphone-14-pro .device-sensors::before {
    background: radial-gradient(farthest-corner at 20% 20%, #6074bf 0, transparent 40%), radial-gradient(farthest-corner at 80% 80%, #513785 0, #24555e 20%, transparent 50%);
    border-radius: 50%;
    box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.05);
    height: 9px;
    left: 50%;
    margin-left: 36px;
    top: 42px;
    width: 9px;
    z-index: 10;
}

.device-iphone-14-pro .device-btns {
    background: #1b1721;
    border-radius: 2px;
    height: 32px;
    left: -2px;
    position: absolute;
    top: 115px;
    width: 3px;
}

.device-iphone-14-pro .device-btns::after,
.device-iphone-14-pro .device-btns::before {
    background: #1b1721;
    border-radius: 2px;
    content: "";
    height: 62px;
    left: 0;
    position: absolute;
    width: 3px;
}

.device-iphone-14-pro .device-btns::after {
    top: 60px;
}

.device-iphone-14-pro .device-btns::before {
    top: 140px;
}

.device-iphone-14-pro .device-power {
    background: #1b1721;
    border-radius: 2px;
    height: 100px;
    position: absolute;
    right: -2px;
    top: 200px;
    width: 3px;
}

/* 핸드폰 화면 내부 */
.phone-screen-inner {
    display: none;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: var(--white);
    flex-direction: column;
}

#demo-screen {
    position: relative;
    overflow: hidden;
}

.phone-screen-inner.active {
    display: flex;
}

/* 앱 헤더 (상단 네비게이션) */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #6A5ACD;
    border-bottom: none;
    position: sticky;
    top: 20px;
    z-index: 100;
}

.menu-btn, .profile-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--white);
}

.menu-btn .material-icons, .profile-btn .material-icons {
    font-size: 24px;
    color: var(--white);
}

.app-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
    flex: 1;
    text-align: center;
    margin: 0 8px;
}

/* 상세 화면 헤더 */
.detail-header {
    display: flex;
    align-items: center;
    padding: 16px 16px 12px;
    background: var(--purple);
    color: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.detail-header.has-status {
    height: 60px;
    padding-top: 38px;
    padding-bottom: 46px;
    position: sticky;
    box-sizing: border-box;
}

.detail-header.has-status .detail-title,
.detail-header.has-status .detail-header-action {
    margin-top: 35px;
}

#qna-question-screen .detail-title,
#qna-question-screen .back-btn {
    margin-top: 35px;
}

#qna-question-screen .detail-title {
    margin-left: -10px;
}

.main-detail-header.has-status {
    padding-top: 38px;
}

.detail-statusbar {
    position: absolute;
    top: 8px;
    left: 36px;
    right: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: inherit;
    pointer-events: none;
}

.detail-status-icons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.detail-status-icons .material-symbols-outlined {
    font-size: 16px;
    line-height: 1;
}

.detail-status-cellular {
    display: inline-flex;
    gap: 2px;
    align-items: flex-end;
    height: 16px;
}

.detail-status-cellular span {
    width: 2px;
    background: currentColor;
    border-radius: 1px;
    display: block;
}

.detail-status-cellular span:nth-child(1) { height: 5px; }
.detail-status-cellular span:nth-child(2) { height: 7px; }
.detail-status-cellular span:nth-child(3) { height: 9px; }
.detail-status-cellular span:nth-child(4) { height: 12px; }


.detail-status-battery {
    width: 22px;
    height: 12px;
    border: 1.6px solid currentColor;
    border-radius: 3px;
    position: relative;
    box-sizing: border-box;
}

.detail-status-battery::before {
    content: "";
    position: absolute;
    right: -3px;
    top: 3px;
    width: 2px;
    height: 6px;
    background: currentColor;
    border-radius: 1px;
}

.detail-status-battery::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    background: currentColor;
    border-radius: 2px;
}

.detail-header-action {
    margin-left: auto;
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}

.detail-header-action .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

#demo-screen .detail-header-action {
    display: none;
}

.back-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: white;
    margin-right: 8px;
}

.back-btn .material-icons {
    font-size: 28px;
}

.detail-title {
    font-size: 13px;
    font-weight: 600;
    color: white;
    margin: 0;
    flex: 1;
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#qna-screen .back-btn,
#info-screen .back-btn,
#survey-screen .back-btn,
#lottery-screen .back-btn {
    display: none;
}

#qna-question-screen .detail-header-action {
    display: none;
}

#qna-question-screen .detail-header {
    justify-content: flex-start;
}

#info-screen .detail-title,
#survey-screen .detail-title,
#lottery-screen .detail-title {
    margin-left: 0;
    text-align: left;
}

/* 행사정보 화면 */
.info-content {
    padding: 20px;
    margin: -16px;
}

.info-title {
    font-size: calc(18px - 2pt);
    font-weight: 700;
    margin-top: 14px;
    margin-bottom: 40px;
}

.info-container {
    background: #ffffff;
}

.info-top-box {
    background: #f3f3f3;
    border-radius: 8px;
    padding: 16px;
    color: #333;
    line-height: 1.28;
    margin-bottom: 30px;
}

.info-top-box p {
    margin: 0 0 6px;
}

.info-top-box p:last-child {
    margin-bottom: 0;
}

.info-section {
    margin-top: 30px;
    margin-bottom: 40px;
}

.info-section.file-section {
    margin-top: 30px;
}

.info-section-title {
    font-size: 14px;
    font-weight: 700;
    margin-top: 2px;
    margin-bottom: 10px;
    color: #111;
}

.file-section .info-section-title {
    margin-bottom: 0;
}

.file-section .info-file-row {
    margin-top: 0;
}

.info-link {
    color: #2b66f6;
    text-decoration: none;
    font-size: 14px;
    word-break: break-all;
}

.info-divider {
    height: 1px;
    background: #e5e5e5;
    margin: 16px 0;
}

.info-file-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 80px;
    padding: 4px 0 6px;
}

.info-file-name {
    font-size: 13px;
    color: #333;
    line-height: 1.4;
}

.info-file-download {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.info-file-download .material-icons {
    font-size: 20px;
}

.info-video-card {
    border-radius: 8px;
    overflow: hidden;
}

.info-video-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #000;
}

.info-video-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.info-video-frame img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.info-video-title {
    font-size: 13px;
    font-weight: 600;
    margin-top: 10px;
    color: #111;
}

.info-video-subtitle {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

/* 질의응답 상세 화면 */
.qna-header-action {
    margin-left: auto;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
}

.qna-header-action .material-icons {
    font-size: 18px;
}

.qna-content {
    margin: -16px;
    min-height: 0;
    background: var(--white);
    display: flex;
    flex-direction: column;
    font-family: var(--qna-font);
}

.qna-form-content {
    margin: -16px;
    min-height: 0;
    background: var(--white);
    font-family: var(--qna-font);
}

.qna-form-select-wrapper {
    position: relative;
}

#qna-question-screen .detail-header {
    background: #ffffff;
    color: #111;
    border-bottom: 1px solid #ededed;
}

#qna-question-screen .detail-title {
    color: #111;
}

#qna-question-screen .back-btn,
#qna-question-screen .back-btn .material-icons {
    color: #111;
}

#qna-screen {
    position: relative;
    overflow: hidden;
}

.qna-form-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #ededed;
    font-size: 13px;
    color: #111;
    width: 100%;
    background: #ffffff;
    border: none;
    text-align: left;
    cursor: pointer;
}

.qna-form-select .material-icons {
    font-size: 20px;
    color: #9aa0a6;
}

.qna-form-select-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qna-form-avatar-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    display: none;
}

.qna-form-select-left.is-image .qna-form-avatar {
    display: none;
}

.qna-form-select-left.is-image .qna-form-avatar-img {
    display: block;
}

.qna-form-options[hidden] {
    display: none;
}

.qna-form-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 1px solid #ededed;
    z-index: 3;
}

.qna-form-option {
    width: 100%;
    text-align: left;
    padding: 10px 16px;
    border: none;
    background: #ffffff;
    font-size: 13px;
    color: #111;
    cursor: pointer;
}

.qna-form-option.is-active {
    background: #bfe9f8;
}


.qna-avatar-sm {
    width: 28px;
    height: 28px;
    font-size: 11px;
}

.qna-form-field {
    border-bottom: 1px solid #ededed;
}

.qna-form-input,
.qna-form-textarea {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: #111;
    padding: 12px 16px;
    font-family: inherit;
}

.qna-form-textarea {
    min-height: 140px;
    resize: none;
    line-height: 1.4;
}

.qna-form-input::placeholder,
.qna-form-textarea::placeholder {
    color: #b0b0b0;
}

.qna-form-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 12px;
    font-size: 12px;
    color: #9a9a9a;
}

.qna-form-submit {
    border: none;
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 12px;
    background: #f2f2f2;
    color: #bcbcbc;
    cursor: not-allowed;
}

.qna-form-submit.is-active {
    background: #5c3fbf;
    color: #ffffff;
    cursor: pointer;
}

.qna-tabs {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
}

.qna-tab-button {
    flex: 1;
    padding: 12px 0;
    background: transparent;
    border: none;
    font-size: 14px;
    color: #666;
    font-weight: 500;
    position: relative;
    cursor: pointer;
}

.qna-tab-button.is-active {
    color: #5c3fbf;
    font-weight: 600;
}

.qna-tab-button.is-active::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: -1px;
    height: 2px;
    background: #5c3fbf;
    border-radius: 2px;
}

.qna-tab-panel {
    display: none;
    padding: 16px;
}

.qna-tab-panel.is-active {
    display: block;
}

.qna-guide-text {
    font-size: 14px;
    color: #333;
    margin-top: 4px;
}

.qna-speaker-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qna-speaker-card {
    padding-bottom: 16px;
    border-bottom: 1px solid #ededed;
}

.qna-speaker-card:last-child {
    border-bottom: none;
}

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

.qna-speaker-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.qna-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #5c3fbf;
    background: #efe9ff;
    overflow: hidden;
}

.qna-avatar-lg {
    width: 44px;
    height: 44px;
    font-size: 12px;
}

.qna-avatar.is-purple {
    background: #efe9ff;
    color: #5c3fbf;
}

.qna-avatar.is-yellow {
    background: #ffe58a;
    color: #5c3fbf;
}

.qna-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.qna-speaker-name {
    font-size: 14px;
    font-weight: 400;
    color: #222;
}

.qna-speaker-role {
    font-size: 12px;
    color: #9a9a9a;
    margin-top: 2px;
}

.qna-speaker-desc {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.qna-speaker-action {
    border: 1px solid #dddddd;
    background: #ffffff;
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
}

.qna-speaker-pills {
    display: flex;
    gap: 1px;
    padding: 12px 16px 8px;
    overflow-x: auto;
    border-bottom: 1px solid #ededed;
}

.qna-question-title {
    padding: 12px 16px 0;
    font-size: 13px;
    font-weight: 600;
    color: #444;
}

.qna-speaker-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 66px;
    text-align: center;
    color: #444;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.qna-speaker-pill.is-active .qna-avatar {
    box-shadow: 0 0 0 4px rgba(155, 131, 231, 0.25);
}

.qna-speaker-pill-name {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
}

.qna-speaker-pill-role {
    margin-top: 2px;
    font-size: 11px;
    color: #9a9a9a;
    line-height: 1.2;
}

.qna-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid #ededed;
}

.qna-filter-tabs {
    display: flex;
    gap: 16px;
}

.qna-filter-tab {
    background: transparent;
    border: none;
    font-size: 13px;
    color: #8c8c8c;
    padding: 6px 0;
    position: relative;
    cursor: pointer;
}

.qna-filter-tab.is-active {
    color: #5c3fbf;
    font-weight: 600;
}

.qna-sort {
    border: 1px solid #dddddd;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 12px;
    color: #555;
    background: #fff;
}

.qna-question-list {
    padding: 0 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 120px;
}

.qna-question-item {
    padding-bottom: 16px;
    border-bottom: 1px solid #ededed;
}

.qna-question-item:last-child {
    border-bottom: none;
}

.qna-question-item.is-first-visible {
    margin-top: 20px;
}

.qna-question-item {
    scroll-margin-top: 20px;
}

.qna-question-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #111;
}

.qna-question-author {
    font-weight: 600;
    color: #222;
}

.qna-question-target {
    color: #111;
    font-weight: 400;
}

.qna-target-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.2;
    background: #F5F2FF;
    color: #111;
    font-weight: 400;
}

.qna-target-badge.is-james {
    background: #F8FAFB;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.qna-target-badge.is-all {
    color: #9B83E7;
}

.qna-question-time {
    margin-left: auto;
    font-size: 12px;
    color: #b0b0b0;
}

.qna-question-body {
    margin-top: 8px;
    font-size: 13px;
    color: #333;
    line-height: 1.5;
}

.qna-question-actions {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #999;
}

.qna-question-actions .material-icons {
    font-size: 16px;
}

.qna-question-actions .material-icons.is-liked {
    color: #E86762;
}

.qna-empty-state {
    text-align: center;
    color: #9a9a9a;
    font-size: 13px;
    padding: 60px 16px 80px;
}

.qna-empty-state .qna-fab {
    margin: 24px auto 0;
    position: static;
    display: inline-flex;
}

.qna-fab {
    position: absolute;
    right: 40px;
    padding: 10px 14px;
    border: none;
    border-radius: 12px;
    background: #5c3fbf;
    color: #ffffff;
    font-size: 13px;
    font-weight: 300;
    box-shadow: 0 6px 12px rgba(92, 63, 191, 0.2);
    bottom: 65px;
}

/* 앱 콘텐츠 영역 */
.app-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    background: var(--white);
}

/* 섹션 스타일 */
.content-section {
    background: var(--white);
    border-radius: 0;
    margin-bottom: 0;
    overflow: hidden;
    box-shadow: none;
}

.section-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--white);
    border-bottom: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.content-section.selected .section-header {
    background-color: rgba(0, 0, 0, 0.03);
}

.section-icon {
    font-size: 20px;
    margin-right: 8px;
    color: var(--text-color);
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    border-radius: 4px;
    transition: background 0.2s ease;
    line-height: 1;
}

.section-title {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
}

.section-toggle {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--text-color);
    flex-shrink: 0;
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.section-toggle .material-icons {
    font-size: 20px;
}

.content-section.collapsed .section-toggle {
    transform: rotate(180deg);
}

/* 섹션 버튼 그룹 */
.section-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.content-section.collapsed .section-buttons {
    display: none;
}

.section-btn {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    height: 96px;
    padding: 12px 0px;
    gap: 8px;
}

.section-btn:active {
    transform: scale(0.95);
}

.btn-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: white;
    cursor: pointer;
    transition: background 0.2s ease;
    width: auto;
    height: auto;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn-icon .material-icons {
    font-size: 31px;
}

.btn-text {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
    box-sizing: border-box;
}

/* 버튼별 색상 */
.section-btn.btn-info {
    background: #5c3fbf;
}

.section-btn.btn-info:hover {
    background: #4d32a8;
}

.section-btn.btn-qna {
    background: #3d5afe;
}

.section-btn.btn-qna:hover {
    background: #334fe6;
}

.section-btn.btn-survey {
    background: #8e24aa;
}

.section-btn.btn-survey:hover {
    background: #7b1fa2;
}

.section-btn.btn-lottery {
    background: #00b0ff;
}

.section-btn.btn-lottery:hover {
    background: #0099e6;
}

.section-btn.btn-networking {
    background: #2e7d32;
}

.section-btn.btn-networking:hover {
    background: #1b5e20;
}

/* 공지사항 리스트 */
.notice-list {
    padding: 16px;
    background: var(--white);
}

.notice-item {
    background: transparent;
    border-radius: 0;
    margin-bottom: 0;
    box-shadow: none;
    overflow: visible;
    border-bottom: 1px solid var(--border-color);
}

.notice-item:last-child {
    border-bottom: none;
}

.notice-item-header {
    display: flex;
    align-items: flex-start;
    padding: 16px 20px;
    cursor: pointer;
    background: transparent;
    gap: 16px;
}

.notice-item-left {
    display: flex;
    align-items: center;
    flex: 1;
}

.notice-icon {
    font-size: 32px;
    margin-right: 0;
    flex-shrink: 0;
    line-height: 1;
}

.notice-content {
    flex: 1;
    min-width: 0;
}

.notice-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 6px 0;
    line-height: 1.4;
}

.notice-date {
    font-size: 12px;
    color: var(--text-light);
    margin: 0 0 4px 0;
}

.notice-preview {
    font-size: 13px;
    color: var(--text-light);
    margin: 0;
}

.notice-toggle {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--text-color);
    flex-shrink: 0;
    margin-left: 8px;
}

.notice-toggle .material-icons {
    font-size: 20px;
}

.notice-item-body {
    display: none;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
}

.notice-item.expanded .notice-item-body {
    display: block;
}

.notice-item.expanded .notice-toggle .material-icons {
    transform: rotate(180deg);
}

.notice-detail {
    padding: 0;
}

.notice-detail p {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.6;
    margin-bottom: 12px;
}

/* 애니메이션 */
@keyframes fadeIn-a {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.animation-3 {
    animation: fadeIn-a 1s ease-in-out forwards;
    animation-delay: 0.3s;
}

.animation-9 {
    animation: fadeIn-a 1s ease-in-out forwards;
    animation-delay: 0.9s;
}

.animation-15 {
    animation: fadeIn-a 1s ease-in-out forwards;
    animation-delay: 1.5s;
}

/* 반응형 */
@media (max-width: 1279px) {
    .balloon-container {
        padding-left: 50px;
        padding-right: 30px;
    }
    
    .device-container {
        margin-right: 50px;
    }
}

@media (max-width: 1024px) {
    .top-header {
        display: none;
    }

    .main-layout {
        flex-direction: column;
        align-items: stretch;
        margin-top: 0;
        padding-top: 0;
    }
    
    .mobile-menu-btn,
    .device-container .mobile-menu-btn {
        display: inline-flex !important;
    }

    .header-right {
        display: none !important;
    }

    .mobile-menu {
        top: 64px;
    }

    .balloon-container {
        width: 100%;
        padding: 20px;
    }
    
    .device-container {
        margin: 0;
        width: 100%;
        transform: none;
    }

    .device-iphone-14-pro {
        width: 100%;
        height: auto;
    }

    .device-iphone-14-pro .device-frame {
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        width: 100%;
        height: auto;
    }

    .device-iphone-14-pro .device-frame::before,
    .device-iphone-14-pro .device-header,
    .device-iphone-14-pro .device-sensors::after,
    .device-iphone-14-pro .device-sensors::before,
    .device-iphone-14-pro .device-btns,
    .device-iphone-14-pro .device-power,
    .device-iphone-14-pro .device-stripe::after,
    .device-iphone-14-pro .device-stripe::before {
        display: none;
    }

    .device-iphone-14-pro .device-screen {
        width: 100%;
        height: auto;
        border-radius: 0;
    }

    .phone-screen-inner {
        height: auto;
        min-height: 100vh;
    }

    .detail-header.has-status {
        height: auto;
        padding-top: 16px;
        padding-bottom: 12px;
    }

    .detail-header.has-status .detail-title,
    .detail-header.has-status .detail-header-action {
        margin-top: 0;
    }

    .main-detail-header.has-status {
        padding-top: 16px;
    }

    .detail-statusbar {
        display: none;
    }

    .info-video,
    .qna-video,
    .main-video,
    .survey-video,
    .lottery-video,
    .myinfo-video,
    .networking-video {
        display: none !important;
    }

    .mobile-admin-panel .info-video,
    .mobile-admin-panel .qna-video,
    .mobile-admin-panel .main-video,
    .mobile-admin-panel .survey-video,
    .mobile-admin-panel .lottery-video,
    .mobile-admin-panel .myinfo-video,
    .mobile-admin-panel .networking-video {
        position: static;
        width: 100%;
        max-width: 100%;
        left: auto;
        top: auto;
        display: block !important;
    }
}

/* 설문조사 스타일 */
.survey-content {
    margin: -16px;
    min-height: calc(100vh - 56px);
    background: #ffffff;
    display: flex;
    flex-direction: column;
    font-family: var(--qna-font);
}

.survey-tabs {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
}

.survey-tab-button {
    flex: 1;
    max-width: 200px;
    padding: 14px 0;
    background: transparent;
    border: none;
    font-size: 15px;
    color: #666;
    font-weight: 400;
    position: relative;
    cursor: pointer;
}

.survey-tab-button.is-active {
    color: #5C3FBF;
    font-weight: 400;
}

.survey-tab-button.is-active::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: -1px;
    height: 2px;
    background: #5C3FBF;
    border-radius: 2px;
}

.survey-tab-panel {
    display: none;
    padding: 20px 16px;
    padding-bottom: 100px;
}

.survey-tab-panel.is-active {
    display: block;
}

.survey-guide-text {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
}

.survey-question {
    margin-bottom: 28px;
}

.survey-question:first-of-type {
    margin-top: 20px;
}

.survey-question-title {
    font-size: 16px;
    font-weight: 400;
    color: #111;
    margin-bottom: 6px;
    line-height: 1.5;
}

.survey-question-desc {
    font-size: 14px;
    color: #888;
    margin-bottom: 14px;
    line-height: 1.47;
}

.survey-highlight {
    color: #e53935;
    font-weight: 500;
    display: block;
    margin-top: 6px;
}

.survey-options {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.survey-option {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.survey-option:hover {
    border-color: #ccc;
}

.survey-option:has(input:checked) {
    background: #f3f0ff;
    border-color: #5C3FBF;
}

.survey-option input[type="radio"],
.survey-option input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.survey-option input[type="checkbox"] {
    border-radius: 4px;
}

.survey-option input[type="radio"]:checked,
.survey-option input[type="checkbox"]:checked {
    border-color: #5C3FBF;
    background: #5C3FBF;
}

.survey-option input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
}

.survey-option input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.survey-option span {
    font-size: 15px;
    color: #333;
}

.survey-textarea {
    width: 100%;
    min-height: 100px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 12px;
    font-size: 15px;
    color: #333;
    resize: vertical;
    font-family: inherit;
}

.survey-textarea::placeholder {
    color: #aaa;
}

.survey-textarea:focus {
    outline: none;
    border-color: #5C3FBF;
}

.survey-submit-btn {
    width: 100%;
    padding: 10px;
    background: #5C3FBF;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 400;
    cursor: pointer;
    margin-top: 12px;
    transition: background 0.2s ease;
}

.survey-submit-btn:hover {
    background: #4a32a0;
}

.survey-submit-btn:disabled {
    background: #e0e0e0;
    color: #999;
    cursor: not-allowed;
}

/* 설문 완료 화면 */
.survey-complete {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    padding-bottom: 80px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    overflow: hidden;
}

.survey-complete.is-active {
    display: flex;
}

.survey-complete-icon {
    width: 60px;
    height: 60px;
    background: #EDFFF8;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.survey-complete-icon .material-icons {
    font-size: 32px;
    color: #23896B;
}

.survey-complete-text {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 40px;
}

.survey-complete-btn {
    width: 100%;
    max-width: 320px;
    padding: 13px;
    background: #5C3FBF;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.2s ease;
}

.survey-complete-btn:hover {
    background: #4a32a0;
}

/* 설문 제출 완료 상태 */
.survey-content.is-submitted .survey-option {
    pointer-events: none;
    background: #f5f5f5;
    border-color: #e0e0e0;
}

.survey-content.is-submitted .survey-option span {
    color: #999;
}

.survey-content.is-submitted .survey-option input[type="radio"],
.survey-content.is-submitted .survey-option input[type="checkbox"] {
    border-color: #ccc;
}

/* 선택된 항목은 원래 스타일 유지 */
.survey-content.is-submitted .survey-option:has(input:checked) {
    background: #f3f0ff;
    border-color: #5C3FBF;
}

.survey-content.is-submitted .survey-option:has(input:checked) span {
    color: #333;
}

.survey-content.is-submitted .survey-option input[type="radio"]:checked,
.survey-content.is-submitted .survey-option input[type="checkbox"]:checked {
    border-color: #5C3FBF;
    background: #5C3FBF;
}

.survey-content.is-submitted .survey-textarea {
    pointer-events: none;
    background: #f5f5f5;
    border-color: #e0e0e0;
    color: #999;
}

/* 경품추첨 화면 스타일 */

#lottery-screen {
    position: relative;
}

.lottery-confetti-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.lottery-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

/* 로딩 화면 */
.lottery-loading {
    background: linear-gradient(180deg, #f5f5f5 0%, #bdbdbd 50%, #9e9e9e 100%);
}

.lottery-loading-text {
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    margin-bottom: 100px;
}

/* 결과 화면 */
.lottery-result {
    background: linear-gradient(180deg, #7B68EE 0%, #9370DB 50%, #A88BC3 100%);
}

.lottery-number-container {
    text-align: center;
    color: #ffffff;
    margin-bottom: 120px;
}

.lottery-number-label {
    font-family: 'Spoqa Han Sans Neo', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 46px 0;
    letter-spacing: 0.5px;
}

.lottery-number {
    font-family: 'Spoqa Han Sans Neo', sans-serif;
    font-size: 100px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* 하단 탭 네비게이션 (세션/기능, 내정보, 설정) - 구분선을 위로 올려 아이콘 위 여백 확보 */
.bottom-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 61px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #ffffff;
    border-top: 1px solid #e5e5e5;
    z-index: 50;
    padding: 5px 8px 0;
    box-sizing: border-box;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    padding: 6px 0;
    text-decoration: none;
    color: #9a9a9a;
    font-size: 0.8125rem;
    font-weight: 400;
    transition: color 0.2s ease;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}

.bottom-nav-item .material-icons {
    font-size: 1.5rem;
}

.bottom-nav-item.is-active {
    color: #5c3fbf;
    font-weight: 400;
}

.bottom-nav-item:hover,
.bottom-nav-item:focus {
    color: #5c3fbf;
    outline: none;
}

/* demo-screen에서 앱 콘텐츠가 하단 탭 위에 오도록 패딩 */
#demo-screen .app-content {
    padding-bottom: 72px;
}

/* 내정보·설정 화면: 하단 탭 위치 기준 */
#myinfo-screen,
#settings-screen {
    position: relative;
    overflow: hidden;
}

/* 내정보, 설정 탭: 우측 상단 세션 이동 텍스트·아이콘 숨김 */
#myinfo-screen .detail-header-action,
#settings-screen .detail-header-action {
    display: none !important;
}

/* 내정보 화면 */

.myinfo-page-title {
    margin: 0;
    padding: 16px 16px 12px;
    font-size: 18px;
    font-weight: 400;
    color: #111;
    text-align: left;
    background: #fff;
    border-bottom: none;
}

.myinfo-tabs {
    display: flex;
    justify-content: flex-start;
    gap: 22px;
    border-bottom: 1px solid #e6e6e6;
    background: #fff;
    padding: 0 16px;
    margin-left: 10px;
}

.myinfo-tab {
    flex: 0 0 auto;
    padding: 12px 0;
    background: transparent;
    border: none;
    font-size: 14px;
    color: #8c8c8c;
    font-weight: 500;
    position: relative;
    cursor: pointer;
    font-family: inherit;
}

.myinfo-tab.is-active {
    color: #5c3fbf;
    font-weight: 400;
}

.myinfo-tab.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 48px;
    height: 2px;
    margin-left: -24px;
    background: #5c3fbf;
    border-radius: 2px;
}

.myinfo-content {
    padding-bottom: 72px;
}

.myinfo-panel {
    display: none;
    padding: 20px 16px;
}

/* 내정보 탭: 첫 행 텍스트를 QR 탭과 동일한 상단 위치에 맞춤 (구분선 없음) */
#myinfo-panel-info {
    padding-top: 20px;
}

#myinfo-panel-info .myinfo-field-row:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.myinfo-panel.is-active {
    display: block;
}

.myinfo-panel[hidden] {
    display: none !important;
}

/* QR 탭 */
.myinfo-qr-guide {
    text-align: center;
    font-size: 13px;
    color: #8c8c8c;
    margin: 0 0 20px;
}

/* QR: 가로 기준 핸드폰 화면 50%, 중앙 정렬 */
.myinfo-qr-image-wrap {
    width: 50%;
    aspect-ratio: 1;
    margin: 0 auto 20px;
    display: block;
}

.myinfo-qr-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.myinfo-qr-title {
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #111;
    margin: 0 0 4px;
}

.myinfo-qr-code {
    text-align: center;
    font-size: 13px;
    color: #8c8c8c;
    margin: 0;
}

/* 내정보 탭 - 필드 목록 */
/* 내정보 탭 - 항목별 두 줄 (라벨 / 값), 나머지 행은 위로 올림 */
.myinfo-field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 0;
    border-bottom: 1px solid #ededed;
    font-size: 14px;
}

.myinfo-field-label {
    color: #8c8c8c;
    font-weight: 400;
}

.myinfo-field-value {
    color: #111;
    font-weight: 400;
}

/* 참여기록 탭 */
.myinfo-pdf-btn {
    display: block;
    margin-left: auto;
    padding: 8px 14px;
    border: 1px solid #5c3fbf;
    background: #fff;
    color: #5c3fbf;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    margin-bottom: 20px;
}

.myinfo-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.myinfo-stat-card {
    flex: 1;
    padding: 13px 10px;
    background: transparent;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
}

.myinfo-stat-label {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #8c8c8c;
    margin-bottom: 2px;
}

.myinfo-stat-value {
    font-size: 18px;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
    line-height: 1.2;
}

.myinfo-stat-unit {
    display: inline;
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

.myinfo-history-title {
    font-size: 14px;
    font-weight: 400;
    color: #111;
    margin: 0 0 12px;
}

/* 출석 / 세션 접속 기록: 볼드 */
#myinfo-panel-history .myinfo-history-title:first-of-type {
    font-weight: 600;
}

/* 기능별 활동 기록: 볼드, 상단 마진 15px */
#myinfo-panel-history .myinfo-history-title:nth-of-type(2) {
    font-weight: 600;
    margin-top: 15px;
}

.myinfo-history-list {
    list-style: none;
    padding: 5px 10px;
    margin: 0;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
}

.myinfo-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid #ededed;
    font-size: 14px;
    color: #333;
}

.myinfo-history-item:last-child {
    border-bottom: none;
}

.myinfo-history-item span:last-child {
    color: #8c8c8c;
    font-size: 13px;
}

/* 설정 화면 (이미지 레이아웃) */
.settings-page-title {
    margin: 0;
    padding: 16px 16px 12px;
    font-size: 18px;
    font-weight: 400;
    color: #111;
    text-align: left;
    background: #fff;
}

.settings-content {
    padding-bottom: 72px;
}

.settings-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    font-size: 14px;
}

.settings-block-label {
    color: #8c8c8c;
    font-weight: 400;
}

.settings-block-value {
    color: #111;
    font-weight: 400;
}

.settings-divider {
    height: 1px;
    background: #ededed;
    margin: 0 16px;
}

.settings-logout-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #111;
    font-weight: 400;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.settings-logout-row .material-icons {
    font-size: 20px;
    color: #8c8c8c;
}

.settings-footer {
    margin: 0;
    padding: 40px 16px 20px;
    font-size: 14px;
    color: #8c8c8c;
    font-weight: 400;
    text-align: center;
}

#settings-screen .app-content {
    padding-bottom: 72px;
}

/* 내정보 - PDF 내보내기 모달 */
.myinfo-pdf-modal {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.myinfo-pdf-modal[hidden] {
    display: none !important;
}

.myinfo-pdf-modal.is-open {
    display: flex;
}

.myinfo-pdf-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.myinfo-pdf-modal-card {
    position: relative;
    width: 100%;
    max-width: 320px;
    background: #fff;
    border-radius: 12px;
    padding: 20px 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.myinfo-pdf-modal-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 400;
    color: #111;
}

.myinfo-pdf-modal-desc {
    margin: 0 0 16px;
    font-size: 13px;
    color: #666;
}

.myinfo-pdf-modal-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.myinfo-pdf-modal-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.myinfo-pdf-modal-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #5c3fbf;
    cursor: pointer;
}

.myinfo-pdf-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.myinfo-pdf-modal-btn {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    font-family: inherit;
}

.myinfo-pdf-modal-cancel {
    background: #fff;
    border: 1px solid #ddd;
    color: #555;
}

.myinfo-pdf-modal-submit {
    background: #5c3fbf;
    border: none;
    color: #fff;
}


/* 네트워킹 화면 (모바일 기준) - 참가 전 목록 + 필터 */
.networking-page-title {
    margin: 0;
    padding: 16px 16px 12px;
    font-size: 18px;
    font-weight: 400;
    color: #111;
    text-align: left;
    background: #fff;
}

.networking-content {
    padding: 0 0 72px;
    background: #fff;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#networking-before-join {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* 참여 전 뷰: 검색창·카운트·리스트·참여하기 버튼 마진 */
#networking-before-join .networking-search-wrap {
    margin: 0 15px;
}
#networking-before-join .networking-meta {
    margin-left: 15px;
}
#networking-before-join .networking-list {
    margin-left: 15px;
}
#networking-before-join .networking-join-btn {
    margin-top: 10px;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(100% - 30px);
    box-sizing: border-box;
}

/* 참여 확정 후: 참여하기 이전 뷰(가려진 목록 + 참여하기 버튼) 완전 비노출 */
#networking-before-join[hidden] {
    display: none !important;
}

/* 리스트 영역: 스크롤바 숨김 (영상처럼 보이지 않게) */
.networking-scroll-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}
.networking-scroll-area::-webkit-scrollbar {
    display: none;
}

.networking-top-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-bottom: 12px;
}

.networking-search-wrap {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    min-width: 0;
    box-shadow: none;
}

.networking-search-wrap:focus-within {
    background: #F8FAFB;
    border-color: #e0e0e0;
}

.networking-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #111;
    font-family: inherit;
    text-align: left;
}

.networking-search-input::placeholder {
    color: #b0b0b0;
}

.networking-search-input:focus {
    outline: none;
}
/* 검색창 우측 X(지우기) 버튼 숨김 */
.networking-search-input::-webkit-search-cancel-button {
    display: none;
    -webkit-appearance: none;
}
.networking-search-input::-webkit-search-decoration {
    display: none;
}

.networking-search-wrap:focus-within .networking-search-input {
    color: #111;
}

.networking-search-wrap:focus-within .networking-search-input::placeholder {
    color: #b0b0b0;
}

.networking-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    flex-shrink: 0;
}

.networking-count {
    font-size: 13px;
    font-weight: 400;
    color: #59534E;
    white-space: nowrap;
    text-align: left;
    font-family: var(--qna-font), 'SUIT Variable', 'SUIT', sans-serif;
}

.networking-search-divider {
    height: 1px;
    background: #e8e8e8;
    margin: 10px 0 0;
    width: 100%;
}

.networking-join-divider {
    height: 1px;
    background: #e8e8e8;
    width: 100%;
    flex-shrink: 0;
}

.networking-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #59534E;
    cursor: pointer;
    border-radius: 8px;
}

/* 우측 검색필터 아이콘: Material Symbols Outlined tune */
.networking-filter-btn .material-symbols-outlined {
    font-size: 22px;
    color: #B4B8BB;
    transform: rotate(90deg);
}

.networking-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.networking-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #e8e8e8;
}

.networking-card:last-child {
    border-bottom: none;
}

.networking-card-photo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #e5e5e5;
    flex-shrink: 0;
}

.networking-card-body {
    flex: 1;
    min-width: 0;
}

.networking-card-name {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 400;
    color: #111;
    line-height: 1.3;
}

.networking-card-role {
    margin: 0 0 6px;
    font-size: 13px;
    color: #666;
    line-height: 1.3;
}

.networking-card-msg {
    margin: 0;
    font-size: 12px;
    color: #8c8c8c;
    line-height: 1.4;
}

.networking-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 23px;
    margin-bottom: 50px;
}

.networking-pagination-prev,
.networking-pagination-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    border: none;
    background: #F2F4F5;
    color: #CED3D6;
    cursor: pointer;
    border-radius: 8px;
}

.networking-pagination-prev .material-icons,
.networking-pagination-next .material-icons {
    font-size: 19px;
}

.networking-pagination-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 29px;
    height: 29px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    background: #8D71DD;
    border-radius: 8px;
    text-align: center;
}

/* 참가 전/참여 후 전환: 참여 후 뷰는 참여 완료 전까지 완전히 숨김 */
#networking-after-join[hidden] {
    display: none !important;
}

#networking-after-join {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#networking-after-join .networking-after-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
#networking-after-join .networking-after-scroll::-webkit-scrollbar {
    display: none;
}
#networking-after-join .networking-after-scroll {
    scrollbar-width: none;
}

/* 참여 후: 김이벤(나) 카드 배경색 + 보라색 구분선 위·아래만 */
#networking-after-join .networking-profile-card.is-me {
    background: #F5F2FF;
    border-top: 2px solid #B3A6E2;
    border-bottom: 2px solid #B3A6E2;
}
#networking-after-join .networking-profile-card.is-me:last-child {
    border-bottom: 2px solid #B3A6E2; /* 마지막이어도 나 카드는 보라색 하단선 유지 */
}

/* 참여 후: 상하 구분선 색상 #B3A6E2, 볼드(2px), 좌우 끝까지 */
/* 참여 확정 후 뷰: 검색창·참여인원에만 마진 */
#networking-after-join .networking-top-row {
    margin-left: 15px;
    margin-right: 15px;
}

#networking-after-join .networking-join-divider {
    margin: 0;
    width: 100%;
    height: 1px;
    background: #eee;
    padding: 0;
    flex-shrink: 0;
    box-sizing: content-box;
}

/* 참여 후: 카드 구분선 1px #f0f0f0, 좌우는 컨테이너에 맞춤 */
#networking-after-join .networking-profile-card {
    margin-left: 0;
    margin-right: 0;
    padding-left: 16px;
    padding-right: 16px;
    border-bottom: 1px solid #f0f0f0;
    box-sizing: content-box;
}
#networking-after-join .networking-profile-card:last-child {
    border-bottom: none;
}

/* 참여 후: 내 정보 수정하기 레이아웃 = 네트워킹 참여하기와 동일 (divider + 버튼), 좌우 여백 보이도록 */
#networking-after-join .networking-edit-myinfo-btn {
    margin-top: 10px;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(100% - 30px);
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 11px 16px;
    font-size: 12px;
    font-weight: 400;
}

/* ===== 참가자 상세 정보 모달 (박현우 예시 동일 디자인) ===== */
.participant-detail-modal {
    position: absolute;
    inset: 0;
    z-index: 130;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}
.participant-detail-modal[hidden] {
    display: none !important;
}
.participant-detail-modal.is-open {
    pointer-events: auto;
    display: flex;
}
.participant-detail-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.participant-detail-panel {
    position: relative;
    width: 100%;
    max-height: 90vh;
    background: #fff;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
}
.participant-detail-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    background: #fff;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.participant-detail-close .material-icons {
    font-size: 24px;
}
/* 상단 프로필: 참여하기 모달과 동일 레이아웃(색상 선택 없음), 배경색은 참가자별(data-color) */
.participant-detail-header {
    position: relative;
    flex-shrink: 0;
    padding: 20px;
    margin: -12px 0 20px 0;
    width: 100%;
    box-sizing: border-box;
}
.participant-detail-profile-card {
    background: #fff;
    border-radius: 12px;
    padding: 0;
    box-shadow: none;
}
.participant-detail-photo-wrap {
    position: relative;
    width: 100%;
    min-height: 320px;
    aspect-ratio: 2.2 / 1;
    background: #F5F2FF;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow: hidden;
}
.participant-detail-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
    display: none;
}
.participant-detail-photo-wrap.has-image .participant-detail-photo {
    display: block;
}
.participant-detail-photo-wrap.has-image .participant-detail-photo-placeholder {
    visibility: hidden;
}
.participant-detail-photo-placeholder {
    font-size: 18pt;
    font-weight: 600;
    color: #333;
    line-height: 1;
}
.participant-detail-profile-info {
    text-align: left;
    margin: 20px;
    padding: 18px 18px 18px 15px;
    background: #fff;
}
.participant-detail-name {
    margin: 0 0 6px;
    font-size: 14pt;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 6px;
}
.participant-detail-verified {
    font-size: 20px !important;
    color: #5c3fbf;
    flex-shrink: 0;
}
.participant-detail-role {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #8c8c8c;
    line-height: 1.3;
}
.participant-detail-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px 24px;
    scrollbar-width: none;
}
.participant-detail-body::-webkit-scrollbar {
    display: none;
}
/* 구분선 좌우 끝까지: 마이너스 마진으로 선만 패널 폭 100% */
.participant-detail-item {
    margin-left: -16px;
    margin-right: -16px;
    margin-bottom: 0;
    padding: 20px 16px 24px 16px;
    border-bottom: 1px solid #eee;
    box-sizing: content-box;
}
.participant-detail-item:last-child {
    border-bottom: none;
}
/* 레이블: 아주 연한 회색, 작게 */
.participant-detail-label {
    display: block;
    font-size: 11px;
    color: #c0c0c0;
    margin-bottom: 8px;
    line-height: 1.3;
}
/* 데이터: 검은색, 레이블 바로 아래, 넉넉한 간격 */
.participant-detail-value {
    margin: 0;
    font-size: 15px;
    color: #111;
    line-height: 1.45;
}
.participant-detail-value a {
    color: #4A90E2;
    text-decoration: underline;
}
.participant-detail-value a:hover {
    color: #3a7bc8;
}

#networking-before-join .networking-join-btn {
    flex-shrink: 0;
}

#networking-before-join .networking-join-divider {
    margin: 0;
    padding: 0;
}

.networking-join-btn {
    display: block;
    width: 100%;
    padding: 11px 16px;
    border: none;
    border-radius: 10px;
    background: #6937F6;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    font-family: inherit;
    cursor: pointer;
}

/* 네트워킹 필터 모달: 화면 전체 너비, 상단 네비까지 전체 높이 */
.networking-filter-modal {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    pointer-events: none;
    padding: 0;
    margin: 0;
}

.networking-filter-modal[hidden] {
    display: none !important;
}

.networking-filter-modal.is-open {
    pointer-events: auto;
    display: flex;
}

.networking-filter-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.networking-filter-modal.is-open .networking-filter-backdrop {
    opacity: 1;
}

.networking-filter-panel {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.networking-filter-modal.is-open .networking-filter-panel {
    transform: translateX(0);
}

.networking-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    flex-shrink: 0;
}

.networking-filter-title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #7c7c9e;
}

.networking-filter-reset {
    padding: 8px 12px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #9ca3af;
    font-family: inherit;
    cursor: pointer;
    font-weight: 400;
}

.networking-filter-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 20px;
    font-weight: 400;
}

.networking-filter-label {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 500;
    color: #111;
}

.networking-filter-sort {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

.networking-sort-option {
    padding: 9px 14px;
    border: 1px solid #EEEEEE;
    border-radius: 20px;
    background: #fff;
    font-size: 13px;
    color: #333;
    font-family: inherit;
    cursor: pointer;
    font-weight: 400;
}

.networking-sort-option.is-active {
    border: 1px solid #5c3fbf;
    background: #fff;
    color: #5c3fbf;
    font-weight: 500;
}

.networking-filter-jobs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.networking-job-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid #EEEEEE;
    border-radius: 20px;
    background: #fff;
    font-size: 11px;
    color: #333;
    font-family: inherit;
    cursor: pointer;
    font-weight: 400;
}

.networking-job-tag-emoji {
    font-size: 14px;
    line-height: 1;
}

.networking-job-tag-text {
    line-height: 1.3;
}

.networking-job-tag.is-selected {
    border-color: #5c3fbf;
    background: #fff;
    color: #5c3fbf;
}

.networking-job-tag.is-selected .networking-job-tag-emoji {
    opacity: 1;
}

.networking-filter-career {
    margin-bottom: 20px;
}

.networking-career-range {
    margin: 0 0 8px;
    font-size: 12px;
    color: #b8b8b8;
}

.networking-career-slider-wrap {
    position: relative;
    height: 24px;
    margin-bottom: 4px;
}

/* 비활성 트랙: 연한 보라/회색 */
.networking-career-track-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    background: #e8e4f4;
    border-radius: 3px;
    pointer-events: none;
}

/* 활성 트랙: 두 핸들 사이만 보라색 */
.networking-career-track-fill {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    width: 100%;
    background: #6341f0;
    border-radius: 3px;
    pointer-events: none;
    transition: left 0.05s ease, width 0.05s ease;
}

.networking-career-slider-wrap input[type="range"] {
    position: absolute;
    width: 100%;
    height: 24px;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
}

.networking-career-slider-wrap input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
    border-radius: 3px;
}

.networking-career-slider-wrap input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #6341f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    pointer-events: auto;
    margin-top: -7px;
}

.networking-career-slider-wrap input[type="range"]:active::-webkit-slider-thumb {
    box-shadow: 0 2px 6px rgba(99, 65, 240, 0.35);
}

.networking-career-slider-wrap input[type="range"]::-moz-range-track {
    height: 6px;
    background: transparent;
    border-radius: 3px;
}

.networking-career-slider-wrap input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #6341f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    pointer-events: auto;
}

.networking-career-slider-wrap input[type="range"]:active::-moz-range-thumb {
    box-shadow: 0 2px 6px rgba(99, 65, 240, 0.35);
}

.networking-career-slider-wrap .networking-career-min {
    pointer-events: auto;
}

.networking-career-slider-wrap .networking-career-max {
    pointer-events: auto;
}

.networking-career-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #b8b8b8;
}

.networking-filter-apply-wrap {
    flex-shrink: 0;
    width: 100%;
    padding: 16px 0 20px;
    margin: 0;
    border-top: 1px solid #eeeeee;
    background: #fff;
    box-sizing: border-box;
}

.networking-filter-apply {
    display: block;
    width: calc(100% - 32px);
    max-width: 100%;
    margin: 0 16px;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    background: #6341f0;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    box-sizing: border-box;
}

#networking-screen .app-content {
    padding-bottom: 72px;
}

/* 참여 후 네트워킹: 전체 프로필 목록 */
.networking-list-after {
    margin-bottom: 20px;
}

.networking-profile-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}

.networking-profile-card:last-child {
    border-bottom: none;
}

.networking-profile-avatar {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, #5c3fbf 0%, #7b5de8 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.networking-profile-avatar.has-photo {
    color: transparent;
}
/* 김이벤(나): 업로드 없을 때 연보라색 박스 */
.networking-profile-card.is-me .networking-profile-avatar.networking-profile-avatar-no-photo {
    background: #E8E0F5;
    color: #5c3fbf;
}

.networking-profile-body {
    flex: 1;
    min-width: 0;
}

.networking-profile-name {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 400;
    color: #111;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 4px;
}

.networking-profile-badge {
    font-size: 13px;
    font-weight: 400;
    color: #5c3fbf;
}

.networking-profile-icon {
    display: inline-flex;
    color: #4A90E2;
}

.networking-profile-icon .material-icons {
    font-size: 16px;
}

/* 링크 아이콘: 호버 시 클릭 가능함을 표시 */
.networking-profile-link-icon {
    cursor: pointer;
    border-radius: 4px;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}
.networking-profile-link-icon:hover {
    opacity: 0.85;
    background-color: rgba(74, 144, 226, 0.12);
}
.networking-profile-link-icon:active {
    opacity: 0.7;
}

.networking-profile-role {
    margin: 0 0 6px;
    font-size: 13px;
    color: #666;
    line-height: 1.3;
}

.networking-profile-intro {
    margin: 0 0 8px;
    font-size: 13px;
    color: #333;
    line-height: 1.45;
}

.networking-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.networking-tag {
    padding: 4px 10px;
    border-radius: 6px;
    background: #f0eef8;
    color: #5c3fbf;
    font-size: 12px;
    font-weight: 400;
}

.networking-edit-myinfo-btn {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 10px;
    background: #6937F6;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
}

/* 네트워킹 참여하기 모달 */
.networking-join-modal {
    position: absolute;
    inset: 0;
    z-index: 110;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.networking-join-modal[hidden] {
    display: none !important;
}

.networking-join-modal.is-open {
    pointer-events: auto;
    display: flex;
}

.networking-join-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.networking-join-panel {
    position: relative;
    width: 100%;
    max-height: 90vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

/* 네트워킹 색상 피커 (시크릿/엣지에서 [hidden] 미적용 시 깨짐 방지) */
.networking-join-color-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    color: #333;
}
.networking-join-color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}
.networking-join-color-value {
    flex: 1;
}
.networking-join-color-wrap .material-icons {
    font-size: 20px;
    color: #8c8c8c;
}
.networking-join-color-field .networking-join-color-wrap {
    cursor: pointer;
}
.networking-join-color-picker-panel {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #178263;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
}
.networking-join-color-picker-panel[hidden] {
    display: none !important;
}
.color-picker-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.color-picker-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
}
.color-picker-palette-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}
.color-picker-hue-wrap {
    position: relative;
    width: 24px;
    flex-shrink: 0;
}
.color-picker-palette {
    width: 100%;
    height: 180px;
    border-radius: 6px;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 100%),
                linear-gradient(to right, #fff 0%, hsl(var(--picker-hue, 164), 100%, 50%) 100%);
    background-blend-mode: multiply;
    touch-action: none;
    cursor: crosshair;
}
.color-picker-palette-handle {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
    pointer-events: none;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
}
.color-picker-hue {
    width: 24px;
    height: 180px;
    border-radius: 6px;
    background: linear-gradient(to bottom,
        #ff0000 0%, #ff00ff 16.67%, #0000ff 33.33%, #00ffff 50%,
        #00ff00 66.67%, #ffff00 83.33%, #ff0000 100%);
    touch-action: none;
    cursor: pointer;
    flex-shrink: 0;
}
.color-picker-hue-handle {
    position: absolute;
    right: 0;
    width: 24px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
    pointer-events: none;
    transform: translateY(-50%);
}
.color-picker-footer {
    display: flex;
    align-items: center;
    gap: 8px;
}
.color-picker-hex {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background: #f5f5f5;
    font-size: 14px;
    color: #111;
    font-family: monospace;
    box-sizing: border-box;
}
.color-picker-confirm {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: #4A90E2;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
}
.color-picker-confirm:hover {
    background: #3a7bc8;
}

/* 이미지 잘라내기 모달 (크롭) */
.crop-modal {
    position: absolute;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: 16px;
    box-sizing: border-box;
}
.crop-modal[hidden] {
    display: none !important;
}
.crop-modal.is-open {
    pointer-events: auto;
    display: flex;
}
.crop-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}
.crop-modal-panel {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}
.crop-modal-title {
    margin: 0;
    padding: 16px 16px 12px;
    font-size: 18px;
    font-weight: 600;
    color: #111;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.crop-modal-body {
    flex: 1;
    min-height: 0;
    padding: 0;
}
.crop-modal-crop-wrap {
    position: relative;
    width: 100%;
    height:  min(70vh, 400px);
    min-height: 280px;
    background: #333;
    overflow: hidden;
}
.crop-modal-crop-wrap .cropper-container {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
.crop-modal-crop-wrap .cropper-wrap-box,
.crop-modal-crop-wrap .cropper-view-box {
    border-radius: 0;
}
.crop-modal-img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.crop-modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px;
    border-top: 1px solid #eee;
    flex-shrink: 0;
}
.crop-modal-btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
}
.crop-modal-close {
    background: #fff;
    color: #333;
    border-color: #ccc;
}
.crop-modal-close:hover {
    background: #f5f5f5;
}
.crop-modal-confirm {
    background: #6B4EAA;
    color: #fff;
    border-color: #6B4EAA;
}
.crop-modal-confirm:hover {
    background: #5a4190;
}

.networking-join-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.networking-join-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111;
}

.networking-join-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #666;
    cursor: pointer;
    border-radius: 8px;
}

.networking-join-close .material-icons {
    font-size: 24px;
}

.networking-join-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 0 16px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.networking-join-body::-webkit-scrollbar {
    display: none;
}

/* 프로필 영역: 초록 배경 + 흰 카드 (겹침·하단 잘림 방지) */
.networking-join-profile {
    background: #178263;
    border-radius: 0;
    padding: 20px;
    margin: -12px 0 20px 0;
    width: 100%;
    min-height: 448px;
    box-sizing: border-box;
}
.networking-join-profile-card {
    background: #fff;
    border-radius: 12px;
    padding: 0;
    box-shadow: none;
}
input[type="file"].networking-join-photo-input,
.networking-join-photo-input {
    display: none !important;
}
.networking-join-photo-wrap {
    position: relative;
    width: 100%;
    min-height: 320px;
    aspect-ratio: 2.2 / 1;
    background: #F5F2FF;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow: hidden;
}
.networking-join-photo-placeholder {
    font-size: 18pt;
    font-weight: 600;
    color: #333;
    line-height: 1;
}
.networking-join-photo-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
    display: none;
}
.networking-join-photo-wrap.has-image .networking-join-photo-placeholder {
    visibility: hidden;
}
.networking-join-upload {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border: 1px solid #7952F3;
    border-radius: 8px;
    background: #F5F2FF;
    font-size: 12px;
    color: #7952F3;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    z-index: 2;
}
.networking-join-upload .material-icons {
    font-size: 16px;
    color: #7952F3;
}
.networking-join-profile-info {
    text-align: left;
    margin: 20px;
    padding: 8px 18px 18px 15px;
    background: #fff;
}
.networking-join-team {
    margin: 0 0 6px;
    font-size: 14pt;
    font-weight: 700;
    color: #111;
    display: flex;
    align-items: center;
    gap: 6px;
}
.networking-join-info {
    font-size: 14pt !important;
    color: #8c8c8c;
}
.networking-join-affiliation {
    margin: 0;
    font-size: 14px;
    color: #8c8c8c;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.networking-join-body-inner {
    padding: 0 16px 16px;
}
.networking-join-field {
    margin-bottom: 16px;
}
.networking-join-label {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}
.networking-join-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    color: #111;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}
.networking-join-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.networking-join-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    color: #111;
    font-family: inherit;
    box-sizing: border-box;
}
.networking-join-select-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    color: #111;
}
.networking-join-select-wrap .material-icons {
    font-size: 20px;
    color: #8c8c8c;
}
.networking-join-notice {
    padding: 12px 14px;
    margin-bottom: 20px;
    background: #fffde7;
    border-radius: 8px;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}
.networking-join-jobs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.networking-join-job-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    background: #fff;
    font-size: 13px;
    color: #333;
    font-family: inherit;
    cursor: pointer;
}
.networking-join-job-emoji {
    font-size: 14px;
    line-height: 1;
}
.networking-join-job-text {
    line-height: 1.3;
}
.networking-join-job-tag.is-selected {
    border-color: #5c3fbf;
    background: #fff;
    color: #5c3fbf;
}
.networking-join-footer {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid #eee;
    flex-shrink: 0;
    background: #fff;
}
.networking-join-cancel {
    flex: 1;
    padding: 11px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    font-family: inherit;
    cursor: pointer;
}
.networking-join-submit {
    flex: 1;
    padding: 11px 16px;
    border: none;
    border-radius: 10px;
    background: #6341f0;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    font-family: inherit;
    cursor: pointer;
}

/* HubSpot 라이브: 네트워킹 참여/내정보 수정 모달 우선순위 강화 (ID 선택자) */
#networking-join-modal.networking-join-modal,
#networking-edit-modal.networking-join-modal {
    position: absolute !important;
    inset: 0 !important;
    z-index: 110 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    pointer-events: none;
}
#networking-join-modal.networking-join-modal[hidden],
#networking-edit-modal.networking-join-modal[hidden] {
    display: none !important;
}
#networking-join-modal.networking-join-modal.is-open,
#networking-edit-modal.networking-join-modal.is-open {
    pointer-events: auto !important;
    display: flex !important;
}
#networking-join-modal .networking-join-panel,
#networking-edit-modal .networking-join-panel {
    position: relative !important;
    width: 100% !important;
    max-height: 90vh !important;
    background: #fff !important;
    border-radius: 16px 16px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
}
#networking-join-modal .networking-join-header,
#networking-edit-modal .networking-join-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 16px 12px !important;
    border-bottom: 1px solid #eee !important;
    flex-shrink: 0 !important;
}
#networking-join-modal .networking-join-body,
#networking-edit-modal .networking-join-body {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 12px 0 16px 0 !important;
}
#networking-join-modal .networking-join-profile,
#networking-edit-modal .networking-join-profile {
    background: #178263 !important;
    border-radius: 0 !important;
    padding: 20px !important;
    margin: -12px 0 20px 0 !important;
    width: 100% !important;
    min-height: 448px !important;
    box-sizing: border-box !important;
}
#networking-join-modal .networking-join-profile-card,
#networking-edit-modal .networking-join-profile-card {
    background: #fff !important;
    border-radius: 12px !important;
}
#networking-join-modal .networking-join-photo-wrap,
#networking-edit-modal .networking-join-photo-wrap {
    position: relative !important;
    width: 100% !important;
    background: #F5F2FF !important;
    border-radius: 12px 12px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 320px !important;
    aspect-ratio: 2.2 / 1 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
#networking-join-modal .networking-join-body-inner,
#networking-edit-modal .networking-join-body-inner {
    padding: 0 16px 16px !important;
}
#networking-join-modal .networking-join-field,
#networking-edit-modal .networking-join-field {
    margin-bottom: 16px !important;
}
#networking-join-modal .networking-join-label,
#networking-edit-modal .networking-join-label {
    display: block !important;
    margin: 0 0 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
}
#networking-join-modal .networking-join-textarea,
#networking-edit-modal .networking-join-textarea {
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 14px !important;
    color: #111 !important;
    box-sizing: border-box !important;
}
#networking-join-modal .networking-join-input,
#networking-edit-modal .networking-join-input {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 14px !important;
    color: #111 !important;
    box-sizing: border-box !important;
}
#networking-join-modal .networking-join-select-wrap,
#networking-edit-modal .networking-join-select-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 12px !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px !important;
    background: #fff !important;
}
#networking-join-modal .networking-join-notice,
#networking-edit-modal .networking-join-notice {
    padding: 12px 14px !important;
    margin-bottom: 20px !important;
    background: #fffde7 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    color: #666 !important;
}
#networking-join-modal .networking-join-row,
#networking-edit-modal .networking-join-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}
#networking-join-modal .networking-join-jobs,
#networking-edit-modal .networking-join-jobs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
}
#networking-join-modal .networking-join-job-tag,
#networking-edit-modal .networking-join-job-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 20px !important;
    background: #fff !important;
    font-size: 13px !important;
    color: #333 !important;
}
#networking-join-modal .networking-join-job-tag.is-selected,
#networking-edit-modal .networking-join-job-tag.is-selected {
    border-color: #5c3fbf !important;
    color: #5c3fbf !important;
}
#networking-join-modal .networking-join-footer,
#networking-edit-modal .networking-join-footer {
    display: flex !important;
    gap: 12px !important;
    padding: 16px !important;
    border-top: 1px solid #eee !important;
    flex-shrink: 0 !important;
    background: #fff !important;
}
#networking-join-modal .networking-join-cancel,
#networking-edit-modal .networking-join-cancel {
    flex: 1 !important;
    padding: 11px 16px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    background: #fff !important;
}
#networking-join-modal .networking-join-submit,
#networking-edit-modal .networking-join-submit {
    flex: 1 !important;
    padding: 11px 16px !important;
    border: none !important;
    border-radius: 10px !important;
    background: #6341f0 !important;
    color: #fff !important;
}

/* solution-demo style.css v20260220b (모달 hidden 버그 수정, 프로필·이미지 높이 로컬 동기화, JS 동기화) */