html,body {max-width:680px;margin:0 auto;}
body {
    /* 시스템 폰트 크기 무시하고 고정 */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;

    /* 또는 특정 비율로 조정 */
    -webkit-text-size-adjust: 100%;
}

* {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

main {/*overflow-y:auto;*/)}

/*공통 함수 처리*/
.popup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding:10px;
}
.popup-box {
    background: #fff;
    border-radius: 10px;
    padding: 20px 25px;
    max-width: 320px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.popup-box.only-content {
    padding : 0;
    position: relative;
}

.popup-box .user-icon {
    font-size:50px;
    width:60px;
    height:60px;
    border-radius:10px;
    display:inline-flex;
    align-items: center;
    justify-content: center;
    color:var(--primary);
    margin-bottom:10px;

}


.popup-msg {
    margin-bottom: 20px;
    font-size: 15px;
    color: #333;
    line-height: 1.5;
}
.popup-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.popup-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    background: var(--primary);
    color: #333;
    font-weight: bold;
    cursor: pointer;
    display:inline-flex;
    width:120px;
    align-items: center;
    justify-content: center;
}

.popup-buttons button.btn-cancel {background:#eee;color:#999;}


.popup-buttons #confirmCancel {
    background: #eee;
}


.popup-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s, transform 0.15s ease-out;
}

/* Hover 효과 */
.popup-close-btn:hover {
    background: rgba(0,0,0,0.6);
    transform: scale(1.09);
}

/* Mobile 개선 */
@media (max-width: 480px) {
    .popup-close-btn {
        top: env(safe-area-inset-top, 10px);
        right: env(safe-area-inset-right, 10px);
        width: 42px;
        height: 42px;
        font-size: 26px;
    }
}

@keyframes popup-bounce-key {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.07); opacity: 1; }
    100% { transform: scale(1); }
}
.popup-bounce {
    animation: popup-bounce-key 0.6s ease-out forwards;
}


.m-header {max-width:680px;margin:0 auto;}
.mbb-normal {min-width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#fff;}
.section--roomy img {width:100%;}
.custom-select-wrapper {flex:0 0 100px;}
.custom-select-wrapper.big {flex:0 0 130px;}
.custom-select-wrapper.big_160 {flex:0 0 160px;}
.custom-select {width:100%;}
.custom-select-trigger {width:100%;}
.plan-table td a {display:flex;flex-wrap: wrap;}
.plan-table td a + a {margin-top:5px;}

/*  주간 계획안 내용 */
/* 6탭 */
.day-tabs .indicator {
    position: absolute;
    left: 4px;
    top: 4px;
    bottom: 4px;
    width: calc(16.66% - 8px); /* 100% / 6 */
    background: #C0DFF8;
    border: 1px solid #d3e2ff;
    border-radius: 8px;
    transition: left .22s ease;
}

/* 위치 이동 (탭 6개) */
#day1:checked ~ .indicator { left: 4px; }
#day2:checked ~ .indicator { left: calc(16.66% + 4px); }
#day3:checked ~ .indicator { left: calc(33.33% + 4px); }
#day4:checked ~ .indicator { left: calc(50% + 4px); }
#day5:checked ~ .indicator { left: calc(66.66% + 4px); }
#day6:checked ~ .indicator { left: calc(83.33% + 4px); }

/*  놀이자료 처리  시작 */
.edu .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap:10px;
    padding:10px 0px;
    box-sizing: border-box;
}

.edu .card-grid .card-div {
    position:relative;
    transition: transform 0.2s ease;
}

.edu .card-grid .btn-my-scrap {
    position:absolute;
    top:5px;
    right:5px;
    background:none;
    border:none;
    color:#bbb;
    font-size:20px;
}
.edu .card-grid .btn-my-scrap.active {
    color:#FFD7E5;
}
.edu .card-grid .btn-my-scrap i {}

    /* 카드 기본 */
.edu .card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease;
    border:solid 1px #eee;
}
.edu .card.bestLabel {
    border:solid 2px #5BA2FF;
}
.edu .card-div:hover .bestLabel{
    border:2px solid #675CFF;
}

.edu .card-div:hover{
    transform: translateY(-4px);
}

.edu .card .img-body{
    padding:5px;
}

.edu .card .img-body img {
    width: 100%;
    aspect-ratio: 4 / 4; /* 가로:세로 비율 */
    object-fit: contain;
}

/* 카드 내용 */
.edu .card-body {
    padding: 12px;
}

.edu .card-tags {
   height: 29px;
}

.edu .card-title,
.edu .clip-title{
    font-size: 16px;
    font-weight: 600;
    height: 36px;
    color: #333;
    margin-bottom: 0px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edu .card-tag {
    display: inline-block;
    font-size: 12px;
    color: #fff;
    background: #7b8190;
    padding: 3px 8px;
    border-radius: 8px;
    margin-bottom: 8px;
}
.edu .card-tag.tag-smart{background: #834DFF;}
.edu .card-tag.tag-multi{background: #FF98DD;}
.edu .card-tag.tag-best{background: #4e7cde;}
.edu .card-tag.tag-free{background: #68A5FF;}
.edu .best-label{
    position: absolute;
    top: -6px;
    left: 0;
    z-index: 10;
    width: 55px;   /* 이미지 크기에 맞게 조정 */
    height: 20px;  /* 이미지 크기에 맞게 조정 */
    background: url("/images/label_best.png") no-repeat 0 0;
    background-size: contain; /* 또는 실제 px */
}
.edu .card-div:hover .best-label {
    background-image: url("/images/label_best_on.png");
}



/* 모바일 반응형 */
@media (max-width: 480px) {
    .edu .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .edu .card-title {
        font-size: 14px;
    }
}



/* 데이터 노출 view */
.data-view {}
.data-view table tr td {line-height:22px;}
.data-view .data-title {font-size:16px;font-weight:bold;margin-top:10px;}
.data-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
    background:#fff;
    margin-top:10px;
}
.data-table th,
.data-table td{
    border:1px solid #eee;
    padding:10px 12px;
    vertical-align:middle;
}


/* 밑줄 탭 */
.round-tabs{
    display:flex;gap:6px;
    overflow-x:auto;      /* 좌우 스크롤 */
    overflow-y:visible;   /* 위아래는 보이게 */
    padding:8px 2px 10px;
    border-bottom:1px solid var(--line);
    -webkit-overflow-scrolling:touch; scrollbar-width:none
}
.round-tabs.no-border{border:none}
.round-tabs::-webkit-scrollbar{display:none}
.round-tab{
    position:relative;flex:0 0 auto;padding:8px 12px;
    font-size:14px;color:#343434;
    background:#fff;
    border:solid 1px #eee;
    border-radius:12px;
    font-weight:normal;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.round-tab.is-active {
    background:#eee;
    font-weight:bold;
}


.round-tab .count { background: #ffcc00; color: #000; padding: 2px 6px; margin-left: 6px; border-radius: 10px; font-size: 12px; }


.round-tab .icon-badges {
    position: absolute;
    top: -8px;
    right: -5px;
    display: flex;
    gap: 2px;
    z-index: 3;
    pointer-events: none;
}

.round-tab .icon-badges img {
    width: 18px;
    display: block;
}

.round-tab .icon-badges:empty {
    display: none;
}

.search-list {margin-top:10px;}
.search-text {padding:10px; background:#f8f8f8; border-bottom:1px solid #ddd;}
.search-text input[type=text] {font-size:14px;}
.search-text .btn-search {background:#3E5FAC;padding:6px 15px; color:#fff; border:none; border-radius:4px; cursor:pointer;}
.search-content {padding:0px 10px;}
.search-item { display: flex; align-items: center; margin-bottom: 15px; border-bottom: 1px solid #ddd; padding-bottom: 10px; }
.search-item img { width: 100px; height: 100px; object-fit:contain; margin-right: 15px; border-radius: 5px; }
.search-item a { font-size: 16px; text-decoration: none; color: #333; }
.search-item a .title {font-size:14px;color:#000;}
.search-item a .tags {font-size:12px;color:#333;background:#f9f9f9;padding:4px 10px;margin-top:5px;}
.search-item a .cate {display:flex;gap:5px;}
.search-item a .cate span {background:#eee;color:#222;font-size:11px;padding:3px 8px;border-radius:4px;display:inline-flex;align-items:center;justify-content: center;}
.search-item a .score {font-size:12px;color: #1e51ea;margin-top:5px;}
.search-item a:hover { text-decoration: underline; }
.content-section {display:none;}
.content-section.active {display:block;}

/**/
.badge {line-height:normal;}

/* plan */
.mbp-card.depth1 a {padding:0px;border:none;}
.mbp-card.depth1 a span {font-weight:bold;margin-top:5px}
.mbp-plan h4 {display:flex;}
.mbp-plan h4 .sub-title {margin-top:5px;margin-bottom:10px;background:#ddeefb;padding:6px 12px;border-radius:20px;}

/*  list */
.img-item{border-bottom:1px solid var(--line);font-size:14px;}
.img-item .info {display:flex;align-items: center;}
.img-item .info .img {flex: 0 0 80px;height: 80px;margin-right: 12px;align-content: center;justify-items:center;}
.img-item .info .img img {object-fit: contain;height:60px;width:auto;border-radius:10px;}
.img-item .info .contents {flex: 1;align-items:start;height:100%;justify-items:start;}
.img-item .info .contents .category {width:100%;display:flex;padding:6px 0px;gap:5px;}
.img-item .info .contents .category span {padding:4px 8px;border-radius:5px;font-size:12px;margin:0px;}
.img-item .info .contents .category span.age {background:var(--primary);color:#333;}
.img-item .info .contents .title {width:100%;display:flex;}
.img-item:last-child{border-bottom:0}

.data-table {font-size:14px;}

.btn-container {width:100%;display:flex;align-items: center;justify-content: center;padding:10px;}
.btn {padding:10px 5px;border-radius:10px;}
.btn.btn-list {background:#eee;height:38px;width:100px;border-radius:12px;display:inline-flex;align-items: center;justify-content: center;font-size:14px;}
.mbp-search input {width:100%;min-width:unset;max-width:none;}

.mbb-title.back {height:30px;display:flex;align-items: center;justify-content: center;font-size:16px;font-weight:normal;}
.mbb-title.back a {width:40px;display:inline-flex;align-items: center;justify-content: center;}

/* 게시글 내용 */
.txt-content {font-size:14px;line-height:22px;}


/* 댓글 입력 */
.comments-container .comment-box {
    display: flex;
    gap: 8px;
    margin: 20px 0;
    border-top:dashed 1px #ddd;
    padding-top:15px;
}
.comments-container .comment-box textarea {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    min-width:0;
    height:60px;
}
.comments-container .comment-box .btn-submit {
    background: var(--primary);
    border: none;
    border-radius: 8px;
    padding: 0 16px;
    cursor: pointer;
    transition: background 0.2s;
    font-size:14px;
    width:60px;
    flex-shrink: 0;
    height:60px;
}
.comments-container .comment-box .btn-submit:hover {
    background: #91c8f4;
}

/* 댓글 리스트 */
.comments-container .comments {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.comments-container .comment {
    display: flex;
    gap: 12px;
}
.comments-container .comment .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #4a90e2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}
.comments-container .comment .content {
    flex: 1;
}
.comments-container .comment .meta {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #666;
    margin-bottom: 4px;
}
.comments-container .comment .name {
    font-weight: bold;
    color: #333;
}
.comments-container .comment .time {
    margin-left:10px;
}
.comments-container .comment .text {
    background: #f8f8f8;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;      /* 오래된 브라우저용 */
    overflow-wrap: break-word;   /* 표준 속성 */
    white-space: normal;         /* 공백/줄바꿈 정상 처리 */
}

.comments-container .actions {
    display: flex;
    gap: 6px;
    margin-left:auto;
}
.comments-container .actions button {
    border: none;
    background: none;
    font-size: 13px;
    color: #888;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}
.comments-container .actions button:hover {
    background: #f2f2f2;
    color: #333;
}
.comments-container .actions .btn-report {
    color: #e67e22;
}
.comments-container .actions .btn-delete {
    color: #e74c3c;
    margin-left:auto;
}

/* 리스트 */
.event-list{display: grid;grid-template-columns: repeat(2, 1fr);gap:25px 15px;list-style:none;margin:10px 0 0;padding:5px 0 0 0;background:#fff;overflow:hidden}
.event-item {position: relative}
.event-item .label-status{right: 0;background: #f0ad4e;padding: 0 10px;line-height: 28px;text-align: center;color: #fff;font-weight: bold;position: absolute;}
.event-item .label-status.status-stop{background: #d9534f;}
.event-item img.thumb-img {aspect-ratio: 252/172;object-fit: cover;}
.event-item dd {margin-top:10px;}
.event-item dd .title {font-size:15px;font-weight:bold;height:38px;overflow:hidden;}
.event-item dd .date {font-size:12px;color:#999;margin-top:5px;}
.event-item dd .link {margin-top:5px;position: relative}
.event-item dd .link a {display:flex;align-items: center;justify-content: center;width:100%;height:35px;color:#333;border:solid 1px #ddd;border-radius:5px;background:#f9f9f9;font-size:14px;}

/* 게시글 액션 버튼 */
.comments-container .post-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 16px 0;
}


.actions {
    display: flex;
    gap: 6px;
}

.actions button {
    border: none;
    background: none;
    font-size: 12px;
    color: #888;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

.actions button:hover {
    background: #f2f2f2;
    color: #333;
}


.btn-report {
    color: #e67e22; /* 주황 */
}
.btn-delete {
    color: #e74c3c; /* 빨강 */
}


.post-actions {
    display: flex;
    gap: 10px;
    margin: 16px 0;
    text-align:center;
    justify-content:center;
    align-items: center;
}


.post-actions .btn-action {
    padding: 10px 0;
    font-size: 14px;
    font-weight: 600;
    width:25%;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: #f5f5f5;
    color: #333;
    transition: background 0.2s, color 0.2s;
}

.post-actions .btn-action:hover {
    background: #e0e0e0;
}

.post-actions .btn-action:hover {
    background: #e0e0e0;
}

.post-actions .btn-report {
    background: #ffe6e6;
    color: #d32f2f;
}

.post-actions .btn-delete {
    background: #fff0e6;
    color: #e65100;
}

.post-actions .btn-edit {
    background: #e8f4ff;
    color: #1976d2;
}

.post-actions .btn-list {
    background: #f3f3f3;
    color: #444;
}

.post-actions .btn-regist {
    background: #e8f4ff;
    color: #1976d2;
}
.post-actions .btn-primary,
.post-actions .btn-primary:hover{
    background: var(--primary);
}



.comments-container .btn-action {
    padding: 12px 0;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: #f5f5f5;
    color: #333;
    transition: background 0.2s, color 0.2s;
}
.comments-container .btn-action:hover {
    background: #e0e0e0;
}
.comments-container .btn-action.btn-report {
    background: #ffe6e6;
    color: #d32f2f;
}
.comments-container .btn-action.btn-delete {
    background: #fff0e6;
    color: #e65100;
}
.comments-container .btn-action.btn-edit {
    background: #e8f4ff;
    color: #1976d2;
}
.comments-container .btn-action.btn-list {
    background: #f3f3f3;
    color: #444;
}

.download-actions {width:100%;display:flex;align-items: center;justify-content: center;margin-bottom:10px;}
.download-actions > button {
    padding: 10px 30px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: #f5f5f5;
    color: #333;
    transition: background 0.2s, color 0.2s;
}
.download-actions .btn-download {
    background: #e8f4ff;
    color: #1976d2;
}

.custom-select-wrapper {margin:0px;}
.mbp-filters {margin-top:8px;}

.problem-view {
    margin: 15px;
    font-family: "Apple SD Gothic Neo", "맑은 고딕", sans-serif;
    color: #333;
}

.problem-view .problem-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size:14px;
}

.problem-view .title {
    padding: 14px;
    font-size: 22px;
    font-weight: bold;
    text-align: left;
    border-bottom: 2px solid #eee;
}

.problem-view th {
    text-align: left;
    background: #f8f8f8;
    font-weight: bold;
    padding: 12px;
    border-top: 1px solid #eee;
    font-size: 14px;
}

.problem-view td {
    padding: 12px;
    line-height: 1.6;
    border-bottom: 1px solid #f2f2f2;
}

.problem-view .subtitle {
    font-weight: bold;
    margin-top: 10px;
}

.problem-view .content {
    margin-left: 10px;
    margin-bottom: 10px;
    color: #555;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .problem-view .title {
        font-size: 18px;
        padding: 10px;
    }
    .problem-view th {
        font-size: 14px;
        padding: 10px;
    }
    .problem-view td {
        font-size: 14px;
        padding: 10px;
    }
}


/* 영상 재생 처리 */
.vd-lecture-header {
    background-color:var(--primary);
    text-align: center;
    padding: 10px;
    color: #000;
    height:60px;
    display:flex;
    align-items: center;
    justify-content: center;
}

.vd-lecture-header p {flex:1;text-align:left;}

.vd-lecture-back {
    width:40px;
    height:60px;
    display:inline-flex;
    align-items: center;
    justify-content: center;
}

.vd-video-wrap {
    width:100%;
}

.vd-video {
    width: 100% !important;
    height: auto !important;
}

.vd-lecture-list {
    width: 100%;
    background-color: #fff;
    padding: 10px;
    overflow-y: auto;
}

.vd-lecture-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(1, 1fr);
    display: grid;
    gap:5px;
}

.vd-lecture-list li {
    align-items: center;
    height:50px;
    display:flex;
    padding:10px;
    border:solid 1px #eee;
}

.vd-lecture-list li.active {color:#000;font-weight:bold;}

.m-lecture__review {padding:10px;font-size:13px;}
.m-lecture__review-text {text-overflow: unset;white-space: unset;margin-top:5px;}

.mbb-meta-review {color:#595959;font-size:14px;margin-bottom:5px;}

/* lecture */
.m-lecture__tutor-etc {margin-top:5px;font-size:14px;}
.m-lecture__tutor-etc span {margin-right:5px;}

.m-lecture__tutor-photowrap {width:64px;height:auto;object-fit:cover;}

/* 로그인 화면 */
.auth-wrap{
    min-height:calc(100dvh - 54px);
    background: linear-gradient(180deg, #ffffff 0%, #f7f7fb 100%);
    display:flex; align-items:center; justify-content:center;
    padding:24px 16px;
    overflow:auto;
}
.auth-wrap .auth-card{
    width:100%; max-width:420px;
    padding:24px 20px;
}
.auth-wrap .auth-head{
    display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.auth-wrap .auth-badge{
    width:42px; height:42px; border-radius:12px;
    background:linear-gradient(135deg, #C0DFF8, #81c0f3);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700;
}
.auth-wrap .auth-title{ font-size:20px; font-weight:700; color:#222; }
.auth-wrap .auth-sub{ font-size:13px; color:var(--muted); margin-top:2px; }

.auth-wrap .input-wrap{
    display:flex; align-items:center; gap:10px;
    border:1px solid #e5e7eb;
    border-radius:12px; padding:12px 14px; background:#fff;
    margin-top:14px;
}
.auth-wrap .input-wrap:focus-within{ border-color:#3E5FAC; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.auth-wrap .input-ico{ width:18px; height:18px; opacity:.6; flex:0 0 18px; }
.auth-wrap .input{ border:0; outline:0; width:100%; font-size:16px; color:#222; background:transparent; }
.auth-wrap .eye{ cursor:pointer; user-select:none; opacity:.6; }
.auth-wrap .eye:hover{ opacity:.9; }

.auth-wrap .opts{
    display:flex; align-items:center;
    margin-top:10px; gap:8px;
}
.auth-wrap .chk{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#6b7280; }
.auth-wrap .chk input{ width:16px; height:16px; }
.auth-wrap .links a{ color:#6b7280; font-size:13px; text-decoration:none; }
.auth-wrap .links a:hover{ color:#222; text-decoration:underline; }

.auth-wrap .btn{
    margin-top:16px; width:100%; height:44px;
    border:0; border-radius:6px;
    background:linear-gradient(135deg, #C0DFF8, #81c0f3);
    color:#fff; font-weight:700; font-size:15px;
}
.auth-wrap .btn[disabled]{ opacity:.6; }

.auth-wrap .helper{ margin-top:12px; font-size:14px; color:#333; text-align:center; }
.auth-wrap .btns{ margin-top:12px; font-size:13px; color:#6b7280; text-align:center; }

/* 카카오 버튼 */
.auth-wrap .kakao-btn{
    margin-top:12px; width:100%; height:44px;
    border:0; border-radius:6px;
    background:#FEE500; color:#000;
    font-size:14px; font-weight:600;
    display:flex; align-items:center; justify-content:center; gap:8px;
}
.auth-wrap .kakao-btn img{ width:22px; height:22px; }
.auth-wrap .helper .btn-join {color:#3E5FAC; font-weight:600;}

.auth-wrap .alert{
    margin-top:10px; padding:10px 12px; border-radius:10px; font-size:13px;
    display:none;
}
.auth-wrap .alert.err { background:#fee2e2; color:#991b1b; }
.auth-wrap .alert.ok { background:#dcfce7; color:#065f46; }

.join-popup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.join-popup-box {
    background: #fff;
    border-radius: 16px;
    padding: 30px 25px;
    max-width: 420px;   /* ✅ 넓이 키움 */
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.join-popup-msg {
    margin-bottom: 20px;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.join-popup-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 15px;
}

/* ✅ 카드형 버튼 스타일 */
.join-type-buttons .join-type-card {
    flex: 1;
    background: #fff;
    color: #333;
    border: 2px solid var(--blue);
    border-radius: 12px;
    padding: 50px 0;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.join-type-buttons .join-type-card:hover {
    background: #f5f5ff;
    border-color: #5848c2;
    color: #5848c2;
}

/* 닫기 버튼은 기존 스타일 */
.btn-close {
    background: #eee;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
}
.btn-close:hover {
    background: #aaa;
}

/* 회원가입 */
#jw-join{ --jw-brand:#C0DFF8; --jw-brand2: #81c0f3; --jw-ink:#1f2937; --jw-muted:#6b7280; --jw-line:#e5e7eb; --jw-bg:#f7f7fb; --jw-danger:#ef4444; --jw-ok:#10b981;overflow-y:auto;}
#jw-join{min-height:calc(100dvh - 120px); background:linear-gradient(180deg,#fff 0%, var(--jw-bg) 100%); display:flex; justify-content:center;}
#jw-join *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
#jw-join .jw-card{width:100%; max-width:480px; padding:22px;}
#jw-join .jw-head{display:flex; align-items:center; gap:12px; margin-bottom:14px}
#jw-join .jw-badge{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--jw-brand),var(--jw-brand2));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
#jw-join .jw-title{margin:0; font-size:20px; color:var(--jw-ink)}
#jw-join .jw-req{font-size:12px; color:var(--jw-muted)}

#jw-join .jw-sec{margin-top:18px}
#jw-join .jw-sec h3{margin:0 0 10px; font-size:15px; color:#111}
#jw-join .jw-row{display:grid; grid-template-columns:1fr; gap:10px}
#jw-join .jw-row.-two{gap:10px;grid-template-columns:1fr}

#jw-join .jw-input, #jw-join .jw-select{
    height:46px; width:100%; border:1px solid var(--jw-line); border-radius:12px; padding:0 14px; font-size:16px; outline:0; background:#fff;
    -webkit-appearance:none; appearance:none;
}
#jw-join .jw-input:focus, #jw-join .jw-select:focus{border-color:var(--jw-brand); box-shadow:0 0 0 3px rgba(106,90,224,.12)}

#jw-join .jw-field{position:relative}
#jw-join .jw-input.-eye{padding-right:42px}
#jw-join .jw-eye{position:absolute; right:8px; top:50%; transform:translateY(-50%); border:0; background:transparent; padding:6px; cursor:pointer; line-height:0; opacity:.7}
#jw-join .jw-eye:hover{opacity:1}

#jw-join .jw-btn{height:46px; border:0; border-radius:12px; padding:0 14px; font-weight:700; font-size:15px; cursor:pointer}
#jw-join .jw-btn.-primary{color:#fff; background:linear-gradient(135deg,var(--jw-brand),var(--jw-brand2))}
#jw-join .jw-btn.-sub{background:#eee; border:1px solid var(--jw-line)}
#jw-join .jw-btn[disabled]{opacity:.6; cursor:not-allowed}

#jw-join .jw-inline{display:flex; gap:8px; align-items:center}
#jw-join .jw-grow{flex:1}
#jw-join .jw-atsign{width:18px; height:46px; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--jw-muted); background:#fff}

#jw-join .jw-msg{margin-top:6px; font-size:12px; display:none}
#jw-join .jw-msg.-err{color:#991b1b}
#jw-join .jw-msg.-ok{color:#065f46}

#jw-join .jw-pwbar{height:6px; border-radius:6px; background:#e5e7eb; overflow:hidden; margin-top:6px}
#jw-join .jw-pwbar > span{display:block; height:100%; width:0; background:var(--jw-danger); transition:width .25s}

#jw-join .jw-hr{height:1px; background:var(--jw-line); margin:16px 0}
#jw-join .jw-dot{height:1px; border-top:dotted 1px var(--jw-line); margin:16px 0}
#jw-join .jw-chk{display:flex; align-items:center; gap:8px; font-size:14px}
#jw-join .jw-chk input{width:18px; height:18px}
#jw-join .jw-chk .btn-term {margin-left:auto;text-decoration:underline;}
#jw-join .jw-terms{background:#fafafa; border:1px solid var(--jw-line); border-radius:8px; padding:12px; max-height:120px; overflow:auto; font-size:12px; color:#374151;margin-top:5px;}

#jw-join .jw-actions{margin-top:16px; display:flex; gap:10px}
#jw-join .jw-kakao{background:#FEE500; color:#111}
#jw-join .jw-kakao img{width:18px; height:18px; margin-right:6px; vertical-align:-3px}

/* ===== jw Terms Modal (scoped & no conflicts) ===== */
#jw-terms-modal{ --jw-line:#e5e7eb; --jw-ink:#111; position:fixed; inset:0; z-index:10000; display:none;}
#jw-terms-modal.is-open{ display:block; }
#jw-terms-modal .jw-dim{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
#jw-terms-modal .jw-sheet{
    position:absolute; inset:0; background:#fff; display:flex; flex-direction:column;
    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
    margin:10px;
}
#jw-terms-modal .jw-head{
    position:sticky; top:0; height:56px; display:flex; align-items:center; justify-content:space-between;
    padding:0 16px; border-bottom:1px solid var(--jw-line); background:#fff; z-index:1;
}
#jw-terms-modal .jw-title{ font-weight:700; font-size:16px; color:var(--jw-ink) }
#jw-terms-modal .jw-close{ border:0; background:transparent; padding:8px; border-radius:10px; cursor:pointer; }
#jw-terms-modal .jw-close:active{ transform:scale(.96); }
#jw-terms-modal .jw-body{ flex:1; overflow:auto; -webkit-overflow-scrolling:touch; padding:16px; color:#222;font-size:13px;}
#jw-terms-modal .jw-body h1, #jw-terms-modal .jw-body h2, #jw-terms-modal .jw-body h3{ margin:16px 0 8px; }
#jw-terms-modal .jw-body p, #jw-terms-modal .jw-body li{ line-height:1.6; }
body.jw-modal-open{ overflow:hidden; }

/* 아이디 비번찾기 */
/* ===== 아이디/비밀번호 찾기 : jw-find ===== */
#jw-find{
    --jw-brand:#C0DFF8;
    --jw-brand2:#81c0f3;
    --jw-ink:#1f2937;
    --jw-muted:#6b7280;
    --jw-line:#e5e7eb;
    --jw-bg:#f7f7fb;
    overflow-y:auto;
}
#jw-find{
    min-height:calc(100dvh - 120px);
    background:linear-gradient(180deg,#fff 0%, var(--jw-bg) 100%);
    display:flex;
    justify-content:center;
}
#jw-find *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
#jw-find .jw-card{width:100%; max-width:480px; padding:22px;height:100vh;padding-bottom:0px;margin-top:20px;}
#jw-find .jw-head{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
#jw-find .jw-badge{
    width:42px;height:42px;border-radius:12px;
    background:linear-gradient(135deg,var(--jw-brand),var(--jw-brand2));
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:800;
}
#jw-find .jw-title{margin:0; font-size:20px; color:var(--jw-ink);}
#jw-find .jw-req{font-size:12px; color:var(--jw-muted);}

#jw-find .jw-sec{margin-top:12px;}
#jw-find .jw-sec h3{margin:0 0 10px; font-size:15px; color:#111;}

#jw-find .jw-row{display:grid; grid-template-columns:1fr; gap:10px;}

#jw-find .jw-input{
    height:46px; width:100%;
    border:1px solid var(--jw-line); border-radius:12px;
    padding:0 14px; font-size:16px; outline:0; background:#fff;
    -webkit-appearance:none; appearance:none;
}
#jw-find .jw-input:focus{
    border-color:var(--jw-brand);
    box-shadow:0 0 0 3px rgba(106,90,224,.12);
}

#jw-find .jw-field{position:relative;}
#jw-find .jw-label{
    display:block;
    font-size:13px;
    margin-bottom:4px;
    color:var(--jw-muted);
}

/* 버튼 공통 */
#jw-find .jw-btn{
    height:46px; border:0; border-radius:12px;
    padding:0 14px; font-weight:700; font-size:15px;
    cursor:pointer;
}
#jw-find .jw-btn.-primary{
    color:#fff;
    background:linear-gradient(135deg,var(--jw-brand),var(--jw-brand2));
}
#jw-find .jw-btn.-sub{
    background:#eee;
    border:1px solid var(--jw-line);
}
#jw-find .jw-btn[disabled]{opacity:.6; cursor:not-allowed;}

#jw-find .jw-inline{display:flex; gap:8px; align-items:center;}
#jw-find .jw-grow{flex:1;}

#jw-find .jw-msg{margin-top:4px; font-size:11px; color:var(--jw-muted);}

/* 하단 액션 영역 */
#jw-find .jw-actions{
    margin-top:18px;
    display:flex;
    gap:10px;
}

/* 탭 */
#jw-find .jw-tabs{
    display:flex;
    margin:10px 0 6px;
    padding:3px;
    background:#f3f4f6;
    border-radius:10px;
}
#jw-find .jw-tab{
    flex:1;
    height:38px;
    border:0;
    background:transparent;
    border-radius:10px;
    font-size:14px;
    font-weight:600;
    color:var(--jw-muted);
    cursor:pointer;
}
#jw-find .jw-tab.is-active{
    background:#fff;
    color:var(--jw-ink);
    box-shadow:0 2px 6px rgba(15,23,42,.15);
}

/* 탭 패널 */
#jw-find .jw-panel{display:none;}
#jw-find .jw-panel.is-active{display:block;}

/* 라디오 세그먼트 (회원 구분) */
#jw-find .jw-seg{
    display:flex;
    gap:4px;
    background:#f3f4f6;
    border-radius:999px;
    padding:3px;
}
#jw-find .jw-seg-item{
    flex:1;
    position:relative;
}
#jw-find .jw-seg-item input{
    position:absolute;
    inset:0;
    opacity:0;
}
#jw-find .jw-seg-item span{
    display:flex;
    align-items:center;
    justify-content:center;
    height:32px;
    border-radius:999px;
    font-size:13px;
    color:var(--jw-muted);
}
#jw-find .jw-seg-item input:checked + span{
    background:#fff;
    color:var(--jw-ink);
    box-shadow:0 1px 4px rgba(15,23,42,.15);
}

.input-txt {width:100%;height:35px;border:solid 1px #eee;border-radius:2px;padding-left:10px;}
.input-select {width:100%;height:35px;border:solid 1px #eee;border-radius:2px;padding-left:10px;}
.input-txtarea {width:100%;height:300px;border:solid 1px #eee;border-radius:2px;padding:10px;}

.mlec-item {
    display: grid;
    grid-template-columns: auto 1fr; /* 현재 2열 */
    grid-template-rows: auto auto auto; /* 필요에 따라 행 */
    gap: 10px;
}
/* 버튼 영역 */
.mlec-item .btns {
    grid-column: 1 / -1; /* 전체 열 차지 */
    display: flex;       /* flex 적용 */
    gap:5px;           /* 버튼 간격 */

}
.mlec-item__thumb {height:auto;object-fit:cover;}
.mlec-btn {height:40px;font-size:14px;}
.mlec-etc {font-size:13px;color:#999;}
.mlec-search {width:60px;}
.mlec-card__thumb img {border-radius:10px;}

.vd-lecture-list li a {display:flex;height:100%;width:100%;align-items: center;padding:0px 10px;font-size:13px;}
.vd-lecture-list li a i {margin-left:auto;color:#999;}

.m-lecture__more a {background:#f9f9f9;}

.m-lecture__tutor-card + .m-lecture__tutor-card {margin-top:10px;}

/* 유료회원가입 */
.section--cta {
    text-align: center;
    padding: 20px 15px;
}
.cta-box {
    background: #f5f7fb;
    border-radius: 12px;
    padding: 25px 15px;
}
.cta-btn {
    display: inline-block;
    background: #ff6b6b;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.cta-btn:hover {
    background: #ff5252;
}

.cta-banner img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.membership-page {
    padding: 15px;
    background: #f9fafc;
    overflow-y:auto;
}

.membership-page .card + .card{
    margin-top:20px;
}

.card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding:10px;
}

.card-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}

.card-desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 16px;
    line-height: 1.5;
}

.price-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fafafa;
}

.price-item .month {
    font-size: 15px;
    font-weight: 600;
    color: #444;
}

.price-item .price {
    font-size: 16px;
    font-weight: 700;
    color: #e63946;
}

.btn {
    background: #4a90e2;
    color: #fff;
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
    text-align: center;
}

.btn:hover {
    background: #357ABD;
}

.empty-list-data {
    background:#f9f9f9;
    border:solid 1px #f5f5f5;
    border-radius:10px;
    padding:40px 0px;
    text-align:center;
    color:#898989;
    font-size:14px;
    margin-top:10px;
    margin-bottom:20px;
}

.mbb-title.back span {font-weight:bold;}

.week-tabs label {font-size:15px;}
.week-tabs label {font-size:15px;}

.week_cont {font-size:14px;}
.day_cont {font-size:14px;}


.clip-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width:100%;
}

.clip-item {
    display: flex;
    align-items: flex-start;
    padding: 12px;
    border-bottom: 1px solid #eee;
    background: #fff;
    border-radius: 8px;
    position:relative;
}

.clip-item .btn-my-scrap {position:absolute;top:40px;right:5px;background:none;border:none;color:#bbb;}
.clip-item .btn-my-scrap.active {color:#FFD7E5;}


.clip-check {
    margin-right: 10px;
    flex-shrink: 0;
}

.clip-body {
    flex: 1;
}

.clip-theme {
    font-size: 12px;
    font-weight: bold;
    color: #ff3000;
    margin-bottom: 4px;
}

.clip-name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #222;
}

.clip-stats {
    font-size: 12px;
    color: #666;
}

.clip-play {
    margin-left: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/*동요 리스트*/

.nbtnMusicp:hover {
    text-decoration:none;
    box-shadow:0px 3px 0px rgba(0,0,0,.1);
    -webkit-box-shadow:0px 3px 0px rgba(0,0,0,.1);
}
.nbtnMusicp img {margin-left:5px;}
.nbtnMusic{
    display:inline-flex;padding:7px 10px 6px 12px;margin-left:9px;cursor:pointer;
    font-size: 13px;color:#000000;
    border:1px solid #858585;border-radius:8px;background-color:#ffffff;
}
.nbtnMusic:hover {
    text-decoration:none;
    box-shadow:0px 3px 0px rgba(0,0,0,.1);
    -webkit-box-shadow:0px 3px 0px rgba(0,0,0,.1);
}
.nbtnMusic img {margin-left:5px;}


.swiper-button-next::after { font-size: 26px; }
.swiper-button-next::after { color: #000; }

.swiper-button-prev::after { font-size: 26px; }
.swiper-button-prev::after { color: #000; }

.auto-scroll {overflow-x:auto;}

/* 오버레이 배경 */
.popupv2-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding:10px;
}

.popupv2-title {
    height:40px;font-weight:bold;font-size:16px;
    display:flex;
    align-items: center;
}

/* 팝업 본체 */
.popupv2-content {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    max-width: 640px;
    max-height: 100%;
    min-height:200px;
    height:100dvh;
    overflow-y: auto;
    position: relative;
    margin:0 auto;
}

/* 닫기 버튼 */
.popupv2-close {
    position: fixed;
    top: 18px;
    right: 18px;
    background: transparent;
    border: none;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}

.popupv2-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2열 */
    gap: 12px;
}

.popupv2-images a {
    display: block;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 썸네일 컨테이너 높이 고정 */
.popupv2-images a {
    aspect-ratio: 1 / 1; /* 정사각형 비율 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 이미지 비율 유지 + 가운데 정렬 */
.popupv2-images img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 넘치면 잘라서 꽉 채움 */
}

.edudata_listsmenu {display:flex;flex-wrap:wrap;gap:10px;}
.edudata_listsmenu .edudata_listsmoff {display:inline-flex;padding:8px 14px;background:#f9f9f9;color:#333;border-radius:8px;font-size:14px;}
.edudata_listsmenu .edudata_listsmon {display:inline-flex;padding:8px 14px;background:#f9f9f9;color:#f33;border-radius:8px;font-size:14px;}

#btnUser {display:none;}

.filter-result {color:#333;width:100%;height:34px;display:flex;align-items: center;}
.filter-result .select-filter {padding:8px 15px;background:#f9f9f9;border-radius:8px;}
.filter-result .btn-filter-close {color:#888;margin-left:5px;}
.btn-filter {
    width:40px;height:40px;display:inline-flex;align-items: center;justify-content: center;border-radius:8px;border:solid 1px #ddd;flex: 0 0 40px;
    color:#999;
    font-size:14px;
}
.btn-back {
    width:30px;height:40px;display:inline-flex;align-items: center;justify-content: center;border-radius:8px;flex: 0 0 30px;
    color:#999;
    font-size:14px;
}
.main-search {padding:10px;}

.icon-btn {position:relative;}
.icon-btn.mypage {font-size:13px;color:#4b5563;font-weight:bold; background:none;border-radius:8px;width:40px;height:40px;display:none;}
.icon-btn .mobile-tooltip {position:absolute;left:-80px;font-size:14px;background:#eee;color:#333;padding:5px;border-radius:5px;}
.icon-btn img {width:22px;}

.policy-board {padding:15px;}
.policy-contents {padding:15px;border:solid 1px #eee;border-radius:8px;font-size:13px;line-height:22px;}
.policy-contents h2 {line-height:32px;font-size:18px;}
.policy-contents h3{line-height:32px;font-size:16px;margin-top:10px;}
.policy-contents table tr td,th{border:solid 1px #ddd;}
.policy-contents table {margin-top:10px;margin-bottom:10px;}



.download-actions.btn-multi{gap:1em;justify-content: center}
.download-actions.btn-multi button{padding : 10px 20px}
.download-actions .btn-download.btn-blue{background: #3E5FAC; color: #fff;}
.swiper-slide{ display: flex; justify-content: center; align-items: center; }


.btn-my-scrap {
    background: none;
    border: none;
    color: #bbb;
    font-size: 20px;
}
.btn-my-scrap.active{
    color: #FFD7E5;
}

.btn-view-right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    white-space: nowrap;
}

.month-prev, .month-next {
    border-radius: 50px;
    background: #fff;
    border: solid 1px #eee;
    box-shadow: 0 0px 15px rgba(0, 0, 0, 0.1);
}

.swiper-button-prev, .swiper-button-next {
    width: 40px !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.month-prev:after, .month-next:after {
    color: #333;
    font-size: 14px;
    font-weight: bold;
}
.clip-prev {left: -10px}
.clip-next {right: -10px}
.edudata_vlitype_btn {
    position: relative;
    padding-left: 70px; /* 카테고리 길이 맞게 조정 */
    display: inline-block;
    line-height: 1.4;
}

.edudata_vlitype_btn::before {
    content: attr(data-cat);
    position: absolute;
    left: 0;
    top: 0;
    color:#3e5fac;
    white-space: nowrap;
}

/* 신규 리스트 */
.mb-list .mbb2-item { border-bottom:solid 1px #E6EFFF;padding:0px !important;}
.mb-list .mbb2-item .mbb-badge {padding:4px 10px;font-size:11px;background:#171C50;color:#fff;height:unset; line-height:unset;min-width:unset;}
.mb-list .mbb2-item .mbb-chev {color:#8DA7D8;}
.mb-list .mbb2-item .mbb-chev img {width:6px;height:auto;}
.mb-list .mbb2-item .mbb-dot {width:1px;border-left:solid 1px rgba(130, 145, 174, 0.7);margin:0px 10px;display:inline-flex;height:11px;}
.mb-list .mbb2-item .mbb-title-row {font-size:15px;font-weight:normal;color:#232323;margin-bottom:5px;line-height:unset;}
.mb-list .mbb2-item .mbb-meta {font-size:13px;color:#8291AE;display:flex;align-items: center;margin-top:0px;}


/* 게시글 신고/차단 버튼 */
.post-report-actions {
    display: flex;
    gap: 10px;
    padding: 15px 0;
    border-top: 1px solid #eee;
    margin-top: 15px;
}

/* 공통 신고/차단 버튼 스타일 */
.btn-report,
.btn-block {
    padding: 8px 15px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-report:hover {
    background: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}

.btn-block:hover {
    background: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

/* 댓글 액션 버튼들 */
.comment .actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.comment .actions .btn-report,
.comment .actions .btn-block,
.comment .actions .btn-delete {
    padding: 5px 10px;
    font-size: 13px;
    border: none;
    background: transparent;
}

.comment .actions .btn-report {
    color: #ffc107;
}

.comment .actions .btn-block {
    color: #dc3545;
}

.comment .actions .btn-delete {
    color: #999;
}

.comment .actions button:hover {
    opacity: 0.8;
}

/* 모달 오버레이 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-content {
    background: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.btn-close-modal {
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
}

.btn-close-modal:hover {
    color: #333;
}

.modal-body {
    padding: 20px;
}

/* 신고 정보 */
.report-info {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 15px;
}

.report-info p {
    margin: 0;
    color: #333;
    font-size: 15px;
}

/* 신고 옵션 */
.report-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 15px;
}

.report-option {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.report-option:hover {
    background: #f8f9fa;
    border-color: #007bff;
}

.report-option input[type="radio"] {
    margin-right: 10px;
    cursor: pointer;
}

.report-option span {
    font-size: 15px;
}

#reportDetail {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    resize: vertical;
    font-size: 14px;
    font-family: inherit;
}

/* 차단 경고 */
.block-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    margin-bottom: 15px;
    color: #856404;
}

.block-warning i {
    font-size: 24px;
}

.block-description {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid #eee;
}

.modal-footer button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel {
    background: #f8f9fa;
    color: #666;
}

.btn-cancel:hover {
    background: #e9ecef;
}

.btn-confirm-report {
    background: #ffc107;
    color: #fff;
}

.btn-confirm-report:hover {
    background: #e0a800;
}

.btn-confirm-block {
    background: #dc3545;
    color: #fff;
}

.btn-confirm-block:hover {
    background: #c82333;
}

/* 숨겨진 콘텐츠 */
.hidden-content {
    padding: 40px 20px;
    text-align: center;
    background: #f8f9fa;
    border-radius: 8px;
    color: #999;
}

.hidden-content p {
    margin: 0;
    font-size: 15px;
}

.hidden-content i {
    margin-right: 5px;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        max-height: 80vh;
    }

}



/* 상단 탭 메뉴 스타일 */
.top-tab-menu {
    position: fixed;
    left: 0;
    right: 0;
    background: #368DFF;
    z-index: 500;
    display: flex;
    justify-content: flex-start; /* center 대신 flex-start */
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 680px;
    margin: 0 auto;
    height: 42px;
    padding: 0px 36px;
}

.top-tab-menu::-webkit-scrollbar {
    display: none;
}

/* 아이템이 적을 때 가운데 정렬을 위한 wrapper */
.top-tab-menu::before,
.top-tab-menu::after {
    content: '';
    flex: 1 1 auto;
}

.top-tab-menu .tab-item {
    font-size: 15px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 15.5px;
    flex-shrink: 0; /* 중요: 아이템이 줄어들지 않도록 */
    white-space: nowrap;
    box-sizing: border-box;
    border-bottom: 2px solid transparent;
}

.top-tab-menu .tab-item.active {
    border-bottom: solid 2px #fff;
    font-weight:600;
}

.top-tab-menu.sub {
    background: #f4f4f4;
    padding: 0px;
    height: 46px;
}

.top-tab-menu.sub .tab-item {
    color: #333;
    font-size: 14px;
    height: 46px;
}

.top-tab-menu.sub .tab-item.active {
    font-weight: bold;
    border-bottom:solid 1px #333;
}


/* 하단 탭 메뉴 스타일 */
.bottom-tab-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #E6EFFF;
    z-index: 999;
    display: flex;
    gap:24px;
    justify-content: space-around;
    max-width:680px;
    margin:0 auto;
    padding:0px 50px;
    align-items:center;
    box-shadow: 0 -8px 20px rgba(188, 202, 229, 0.25);
}

.bottom-tab-menu .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:6px;
    color: #6F7C94;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
    height:48px;
    width:48px;
    margin-top:18px;
    margin-bottom:6px;
}

.bottom-tab-menu .tab-item img {
    width:26px;
    height:26px;
}

.bottom-tab-menu .tab-item img.active {
    display:none;
}

.bottom-tab-menu .tab-item.active img.active{
    display:flex;
}

.bottom-tab-menu .tab-item.active img {
    display:none;
}

.bottom-tab-menu .tab-item.active {
    color: #1F1F33;
}

/* 메인 화면 CSS 개선 */

.section{padding:0px}

.m-hero .swiper-pagination {
    position: absolute;
    bottom: 13px;
    left: 24px;
    display:flex;
    align-items: center;
    justify-content: center;
    background:#fff;
    border-radius: 20px;
    font-size: 13px;

    text-align: left;
    width:41px;
    height:23px;
    color:#A8ACB5;
}

.m-hero .swiper-pagination span {color:#368DFF;font-weight:bold;width:12px;display:inline-flex;align-items: center;justify-content: center;font-weight:bold;}

.m-main .main-inner {padding:24px;padding-top:0px;padding-bottom:0px;}
.section + .section--roomy {margin:0px;}
.m-main section + section {margin-top:60px !important;}
.section--compact .block-head {margin:0px;}

.m-main .section-quick {padding-top:48px;}
.m-main .m-quick__item {border:none;padding:0px;color:#3A5079;}
.m-main .m-quick {gap:18px 14px;padding-left:21.5px;padding-right:21.5px;}
.m-main .m-quick__item img {width:100%;height:auto;}
.m-main .section.data-package {background:#fff;padding:0px;margin-top:70px !important}
.m-main .block-head {justify-content: start;gap:2px;padding:18px 0px;margin-bottom:0px;}
.m-main .block-head h2 {text-align: left;font-size:19px;font-weight:600;color:#232323;display:flex;align-items: center;}
.m-main .block-head p {width:100%;text-align:left;color:#687B9E;font-size:14px;margin-bottom:0px;letter-spacing: -1px;}
.m-main .btn-morev2 {border:none;width:40px;display:inline-flex;align-items: center;justify-content: center;position:relative;margin-left:auto;padding:0px;justify-content:end;}
.m-main .btn-morev2 img {width:16px;}
.m-main .m-card .boxs {
    background: url('/new/_assets/images/app/pkg_back.png') no-repeat center center;
    background-size: contain;
    border-radius: 12px;
    padding: 20px;
}
.m-main .m-card .boxs img {border-radius:6px;width:100%;}
.m-main .m-card__title {margin-top:9px;font-size:14px;font-weight:normal;color:#3A5079;padding:0px;letter-spacing: -1px;}
.m-main .m-tabs {width:100%;justify-content: start;padding:0px;}
.m-main .m-tab {background:#fff;border:solid 1px #E3E5EB;color: #6F7C94;border-radius:20px;padding:7px 16px;margin-bottom:0px;font-weight: 500;}
.m-main .m-tab.is-active {background:#171C50;border:solid 1px #171C50;color:#fff;}
.m-main .mt60 {margin-top:60px;}



.m-main .section.popular {background:#F0F5FF;margin-top:56px;}
.m-main .inner-best {padding-top:16px;padding-bottom:26px;padding-left:24px;letter-spacing: -1px}

/* 슬라이드 높이 계산 안정화 */
.m-thumbs { overflow: hidden; }
.m-thumbs .swiper-wrapper { align-items: stretch; } /* flex-start에서 stretch로 변경 */
.m-thumbs .swiper-slide {
    height: auto;
    display: flex; /* 추가 */
    flex-direction: column; /* 추가 */
    overflow:unset;
}

.m-main .m-thumbs { margin-top: 0px !important; }

.m-main .m-thumbs .thumbs-grid a {
    border-radius: 8px;
    padding: 12px;
    border: solid 1px #C3D7FF;
    background: #fff;
    overflow: visible; /* 명시적으로 visible */
}
.m-main .m-thumbs .thumbs-grid a img {
    border-radius: 8px;
}

.m-main .m-tabpanel {margin-top:2px;margin-right:-24px;}
.m-main .m-cards .swiper-wrapper, .m-cards .swiper-slide {padding-bottom:2px;}
.m-main .m-grid2 {gap:6px;}
.m-main .mb-card {border:none;padding:0px;margin:0px;box-shadow: none;}
.m-main .mb-card.story {margin-bottom:40px;}
.m-main .mb-card .mb-list {margin:0px;gap:4px;}
.m-main .mb-card .mb-list .mb-item {border:solid 1px rgba(161, 184, 244, 0.2);background:#F0F5FF;padding:0px 20px;height:56px;}
.m-main .mb-card .mb-list .mb-item .mb-badge {background:#FF6EDB;color:#fff;font-weight:normal;padding:6px 10px;}
.m-main .mb-card .mb-list .mb-item .mb-badge--alert {background:#469DFF;color:#fff;font-weight:normal;padding:6px 10px;}
.m-main .mb-card .mb-list .mb-item .mb-text {height:20px;line-height: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.m-main .mb-card .mb-list .mb-item .mb-time {color:#ADB6E4;}
.m-main .mb-card + .mb-card {margin-top:60px;}

.m-main .mb-banner {margin-top:60px;margin-bottom:60px;}

.review-list {overflow:hidden;}
.review-list .item {display:flex;padding:16px 0px;gap:20px; }
.review-list .item:first-child {padding-top:2px;}
.review-list .item + .item {border-top:solid 1px #E6EFFF;}
.review-list .item dt {flex-shrink: 0;width: 80px;}
.review-list .item dt a img {width:80px;border-radius:8px;}
.review-list .item dd {width:calc(100% - 100px);}
.review-list .item dd .title {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight:600;font-size:16px;color:#232323;}
.review-list .item dd .desc {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 2줄까지 표시 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height:13px;
    max-height: 2.8em;
    color:#8291AE;
    font-size:11px;
    margin-top:6px;
}

.review-list .item dd .icons {display:flex;gap:2px;margin-top:10px;}
.review-list .item dd .icons span {font-size:11px;border:solid 1px rgba(75, 159, 255, 0.5);color:#469DFF;border-radius:20px;display:inline-flex;height:18px;padding:0px 8px;align-items: center;justify-content: center;}
.review-list .item dd .icons span.sp-tag {background:#4B9FFF;color:#fff;}
.review-list .item dd .icons .btn-link {background:#E5EDFD;color:#8291AE;padding:3px 12px;border-radius:20px;font-size:11px;margin-left:auto;}

.mb-list .mbb-link {padding:18px 0px;}
.mb-list .mbb-item { border-bottom:solid 1px #E6EFFF;padding:0px !important;}
.mb-list .mbb-item .mbb-badge {padding:4px 10px;font-size:11px;background:#171C50;color:#fff;height:unset; line-height:unset;min-width:unset;}
.mb-list .mbb-item .mbb-chev {color:#8DA7D8;}
.mb-list .mbb-item .mbb-chev img {width:6px;height:auto;}
.mb-list .mbb-item .mbb-dot {width:1px;border-left:solid 1px rgba(130, 145, 174, 0.7);margin:0px 10px;display:inline-flex;height:11px;}
.mb-list .mbb-item .mbb-title-row {font-size:15px;font-weight:normal;color:#232323;margin-bottom:2px;line-height:unset;}
.mb-list .mbb-item .mbb-meta {font-size:13px;color:#8291AE;display:flex;align-items: center;margin-top:0px;}

/* 쇼핑몰 섹션 */
.mall-section {
    background: #fff;
    padding: 0px;
    margin-top: 60px !important;
}

/* 탭 버튼 */
.mall-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 0;
    margin-bottom:2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.mall-tabs::-webkit-scrollbar {
    display: none;
}

.mall-tab {
    background: #fff;
    border: solid 1px #E3E5EB;
    color: #6F7C94;
    border-radius: 20px;
    padding: 7px 16px;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s;
}

.mall-tab.is-active {
    background: #171C50;
    border: solid 1px #171C50;
    color: #fff;
}

/* 배너 */
.mall-banner {
    display: none;
    width: 100%;
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
}

.mall-banner.is-active {
    display: block;
}

.mall-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* 상품 리스트 */
.mall-products {
    display: none;
}

.mall-products.is-active {
    display: block;
}

/* 상품 카드 */
.mall-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: solid 1px #E6EFFF;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.mall-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(70, 157, 255, 0.15);
}

.mall-card__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #F0F5FF;
}

.mall-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mall-card__info {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mall-card__title {
    font-size: 14px;
    font-weight: normal;
    color: #232323;
    margin: 0 0 8px 0;
    line-height: 1.4;
    height: 38px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mall-card__price {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

.price-discount {
    font-size: 16px;
    font-weight: 700;
    color: #4193FF;
}

.price-amount {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
}

.price-amount::after {
    content: '원';
    font-size: 13px;
    font-weight: 500;
    margin-left: 2px;
}

/* 모바일 최적화 */
@media (max-width: 480px) {
    .mall-card__title {
        font-size: 13px;
        height: 36px;
    }

    .price-discount,
    .price-amount {
        font-size: 14px;
    }
}

/* 푸터 */
.footer-app {
    background-color: #e8ecf1;
    padding: 40px 20px;
}

.footer-app .company-name {
    font-size:14px;
    font-weight: 700;
    color: #687B9E;
    margin-bottom: 20px;
}

.footer-app .company-info {
    font-size: 14px;
    line-height: 1.8;
    color: #687B9E;
    margin-bottom: 20px;
}

.footer-app .company-info div {
    margin-bottom: 0px;
    line-height:22px;
}

.footer-app .footer-links {
    display: flex;
    gap: 20px;
    margin-bottom:20px;
}

.footer-app .footer-links a {
    font-size: 13px;
    color: #687B9E;
    text-decoration: underline;
    font-weight: 500;
}

.footer-app .social-icons {
    display: flex;
    gap: 20px;
    margin-bottom:20px;
}

.footer-app .social-icons img {
    width: 24px;
    height: 24px;
    opacity: 0.7;
}

.footer-app .copyright {
    font-size: 13px;
    color: #5b6b8e;
    line-height: 1.6;
}