@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* 결제화면 타이틀  */
.ship > .sub-title {width:100%; overflow:hidden; padding:0 0 10px 0; margin-bottom:30px; border-bottom:3px solid #555;}
.ship > .sub-title h3 {margin-top:15px; font-family: "Nanum Gothic"; font-size:36px; font-weight:bold; float:left; color:#000;}
.ship > .sub-title > .sub-nav {display:block; margin-top:50px; float:right; text-align:right; color:#999;}
.ship > .add-info {margin-bottom:30px;}
.ship > .add-info > .title1 {font-size:30px;font-weight:bold;}
.ship > .add-info > .title2 {font-size:24px;}
.ship .sub_content {width:100%;}
.ship .sub_content .mypage_order_tabboxN {height:48px;background:none;}
.ship .sub_content .mypage_tabwrap {width:100%;}
.ship .sub_content .mypage_tabwrap .mypage_order_tabboxN {width:100%;display:flex;}
.ship .sub_content .mypage_tabwrap .mypage_order_tabboxN li.mypage_tabOn {height:45px;border-bottom:none;}
.ship .sub_content .mypage_tabwrap .mypage_order_tabboxN li {height:45px;width:100%;display:flex;padding:0px;align-items: center;justify-content:center;border-bottom:solid 1px #555;}
.ship .sub_content .mypage_tabwrap .mypage_order_tabboxN li:first-child{border-left: 1px solid #c7c7c7}
.ship .sub_content .mypage_tabwrap .mypage_order_tabboxN li a {display:flex;align-items: center;justify-content:center;width:100%;height:100%;font-size:14px;}
.ship .sub_content .mypage_tabwrap .mypage_order_tabboxN li a:hover {text-decoration:none;}

#container {margin-top:0px !important;}

/* 결제 화면 아이콘 */
.content-box {min-height:400px;width:100%;clear:both;box-sizing:border-box;font-family:'Nanum Gothic';margin-bottom:100px;}
.content-box > .type-list {display:flex;gap:56px;margin-top:40px;box-sizing:border-box;color:#000;}
.content-box > .type-list a {display:block;width:100%;text-align:center;font-size:30px;font-weight:bold;border-radius:22px;color:#000;}
.content-box > .type-list a:hover {text-decoration:none;}
.content-box > .type-list a.type-1 {border:solid 1px #f2a647;}
.content-box > .type-list a.type-2 {border:solid 1px #f28d9f;}
.content-box > .type-list a.type-3 {border:solid 1px #7999d9;}
.content-box > .type-list a .img {padding:25px 50px;background:#f28d9f;border-top-left-radius:20px;border-top-right-radius:20px;}
.content-box > .type-list a.type-1 .txt .point {color:#f89720;font-weight:normal;}
.content-box > .type-list a.type-2 .txt .point {color:#f28d9f;font-weight:normal;}
.content-box > .type-list a.type-3 .txt .point {color:#7999d9;font-weight:normal;}
.content-box > .type-list a.type-1:hover .txt .point{color: #F18605FF;}
.content-box > .type-list a.type-2:hover .txt .point{color: #F17087FF;}
.content-box > .type-list a.type-3:hover .txt .point{color: #4578DDFF;}

.content-box > .type-list a.type-1 .img {background:#f2a647;}
.content-box > .type-list a.type-2 .img {background:#f28d9f;}
.content-box > .type-list a.type-3 .img {background:#7999d9;}
.content-box > .type-list a .txt {padding:37px;}


.content-box > .type-list2 {display:flex;gap:10px;margin-top:50px;box-sizing:border-box;color:#000;width:100%;}
.content-box > .type-list2 .item {display:block;width:100%;text-align:center;font-size:30px;font-weight:bold;border-top-left-radius:22px;border-top-right-radius:22px;color:#000;}
.content-box > .type-list2 .item .img {padding:30px 50px;background:#f28d9f;border-top-left-radius:20px;border-top-right-radius:20px;}
.content-box > .type-list2 .item.type-1 .txt .point {color: #d2d2d2;}
.content-box > .type-list2 .item.type-2 .txt .point {color:#f2a647;}
.content-box > .type-list2 .item.type-3 .txt .point {color:#f28d9f;}
.content-box > .type-list2 .item.type-4 .txt .point {color:#7999d9;}
.content-box > .type-list2 .item.type-1 .img {background:#d2d2d2;}
.content-box > .type-list2 .item.type-2 .img {background:#f2a647;}
.content-box > .type-list2 .item.type-3 .img {background:#f28d9f;}
.content-box > .type-list2 .item.type-4 .img {background:#7999d9;}
.content-box > .type-list2 .item .txt {padding:37px;}

.content-box > .type-list2-txt {display:flex;gap:0px;margin-top:15px;box-sizing:border-box;color:#000;width:100%;}
.content-box > .type-list2-txt > .item {box-sizing:border-box;color:#000;width:100%;border-right:dashed 1px #000;}
.content-box > .type-list2-txt > .item:first-child {border-left:dashed 1px #000;}
.content-box > .type-list2-txt > .item strong {display:block;font-size:28px;width:100%;text-align:center;font-weight:bold;}
.content-box > .type-list2-txt > .item .txt-list {display:block;margin-top:50px;}
.content-box > .type-list2-txt > .item .txt-list li {padding:0px 10px;list-style:none;font-size:14px;color:#555;line-height:30px;}
.content-box > .type-list2-txt > .item .txt-list li.point1 {color:#f2a647;margin-left:8px;}
.content-box > .type-list2-txt > .item .txt-list li.point2 {color:#f28d9f;margin-left:8px;margin-top:40px;}
.content-box > .type-list2-txt > .item .btn {display:flex;align-items: center;justify-content: center;margin-top:50px;}
.content-box > .type-list2-txt > .item .btn a {width:118px;height:45px;display:flex;align-items: center;justify-content: center;color:#f2a647;border-radius:8px;border:solid 1px #f2a647;font-size:22px;margin-bottom:16px;}
.content-box > .type-list2-txt > .type-1 strong {color:#666;}
.content-box > .type-list2-txt > .type-2 strong {color:#f2a647;}
.content-box > .type-list2-txt > .type-3 strong {color:#f28d9f;}
.content-box > .type-list2-txt > .type-4 strong {color:#7999d9;}

.content-box > .type-list2-txt > .type-2 .btn a {color:#f2a647;border:solid 1px #f2a647;}
.content-box > .type-list2-txt > .type-3 .btn a {color:#f28d9f;border:solid 1px #f28d9f;}
.content-box > .type-list2-txt > .type-4 .btn a {color:#7999d9;border:solid 1px #7999d9;}
.content-box > .type-list2-txt > .type-2 .btn a:hover {color:#fff;background:#f2a647;text-decoration:none;}
.content-box > .type-list2-txt > .type-3 .btn a:hover {color:#fff;background:#f28d9f;text-decoration:none;}
.content-box > .type-list2-txt > .type-4 .btn a:hover {color:#fff;background:#7999d9;text-decoration:none;}



.content-box > .guid-txt {font-size:14px;color:#555;margin-top:30px;margin-bottom:70px;}

    /* 결제 화면 smart */
.content-box > .type-s {margin-top:40px;width:100%;padding:40px;border:solid 1px #f2a647;border-radius:30px;box-sizing:border-box;}
.content-box > .type-s .s-top {display:flex;}
.content-box > .type-s .s-top .s-left {width:350px;flex-grow:0;text-align:center;border-right:dashed 1px #f2a647;}
.content-box > .type-s .s-top .s-left .title {color:#f2a647;font-size:30px;font-weight:bold;}
.content-box > .type-s .s-top .s-left .price-list {margin-top:60px;text-align:left;}
.content-box > .type-s .s-top .s-left .price-list .box > .months {display:flex;align-items: center;}
.content-box > .type-s .s-top .s-left .price-list .box > .months .point {color:#f2a647;font-size:36px;display:block;}
.content-box > .type-s .s-top .s-left .price-list .box > .months .point .num {color:#f2a647;font-weight:bold;}
.content-box > .type-s .s-top .s-left .price-list .box > .months .addinfo {font-size:19px;margin-left:10px;}
.content-box > .type-s .s-top .s-left .price-list .box > .price {display:flex;align-items: center;margin-top:-4px;}
.content-box > .type-s .s-top .s-left .price-list .box > .price strong {font-size:36px;font-weight:bold;letter-spacing: -1px;position:relative;}
.content-box > .type-s .s-top .s-left .price-list .box > .price.new {margin-top:10px;}
.content-box > .type-s .s-top .s-left .price-list .box > .price strong .ori {top:-15px;left:25px;font-size:18px;position:absolute;text-decoration:line-through;}
.content-box > .type-s .s-top .s-left .price-list .box > .price span {font-size:22px;font-weight:normal;margin-left:4px;}
.content-box > .type-s .s-top .s-left .price-list .box > .price .btn-cont {padding-top:13px;}
.content-box > .type-s .s-top .s-left .price-list .box > .price a {margin-left:20px;width:118px;height:45px;display:flex;align-items: center;justify-content: center;color:#f2a647;border-radius:8px;border:solid 1px #f2a647;font-size:22px;margin-bottom:2px;}
.content-box > .type-s .s-top .s-left .price-list .box > .price a:hover {background:#f2a647;color:#fff;text-decoration: none;font-weight:bold;}
.content-box > .type-s .s-top .s-left .price-list .box + .box {margin-top:50px;}
.content-box > .type-s .s-top .s-right {flex-grow:1;padding:30px;padding-right:0px;}
.content-box > .type-s .s-top .s-right .contents {display:flex;gap:0px;justify-content: space-between; }
.content-box > .type-s .s-top .s-right .contents .item {width:170px;height:170px;border-radius:200px;border:solid 2px #f2a647;background:#fbdbba;display:flex;align-items:center;justify-content: center;text-align:center;}
.content-box > .type-s .s-top .s-right .contents .item strong {display:flex;align-items: center;justify-content: center;font-size:28px;line-height:40px;width:110px;height:47px;border-bottom:solid 2px #f2a647;}
.content-box > .type-s .s-top .s-right .contents .item div {display:block;font-size:24px;line-height:32px;margin-top:10px;}
.content-box > .type-s .s-top .s-right .desc {display:flex;align-items: center;justify-content: center;margin-top:84px;}
.content-box > .type-s .s-top .s-right .desc .inner {padding:25px;border:solid 1px #f2a647;width:380px;border-radius:30px;}
.content-box > .type-s .s-top .s-right .desc .inner strong {font-size:24px;padding-left:7px;}
.content-box > .type-s .s-top .s-right .desc .inner .desc-list {}
.content-box > .type-s .s-top .s-right .desc .inner .desc-list li {font-size:18px;list-style:none;line-height:30px;}
.content-box > .type-s .s-top .s-right .addinfo {margin-top:84px;}
.content-box > .type-s .s-top .s-right .addinfo .add-list {list-style: none;}
.content-box > .type-s .s-top .s-right .addinfo .add-list li {display:flex;align-items: center}
.content-box > .type-s .s-top .s-right .addinfo .add-list li + li {margin-top:10px;}
.content-box > .type-s .s-top .s-right .addinfo .add-list li strong {font-size:22px;font-weight:bold;margin-left:10px;width:215px;}
.content-box > .type-s .s-top .s-right .addinfo .add-list li span {font-size:22px;}
.content-box > .type-s .s-bottom {width:100%;display:flex;margin-top:40px;}
.content-box > .type-s .s-bottom .bt-left {display:flex;gap:20px;width:350px;flex-grow:0;text-align:center;align-items: center;justify-content: center;}
.content-box > .type-s .s-bottom .bt-left div a {display:block;text-align:center;}
.content-box > .type-s .s-bottom .bt-left div a strong {display:block;font-size:18px;font-weight:bold;color:#111;}
.content-box > .type-s .s-bottom .bt-right {flex-grow:1;padding:30px;padding-right:0px;}
.content-box > .type-s .s-bottom .bt-right .title {display:flex;align-items: center;justify-content: center;}
.content-box > .type-s .s-bottom .bt-right .title span {display:inline-block;width:180px;line-height:42px;text-align:center;background:#f2a647;font-size:22px;color:#fff;border-radius:10px;}
.content-box > .type-s .s-bottom .bt-right .add-list {margin-top:25px;}
.content-box > .type-s .s-bottom .bt-right .add-list li {list-style:none;}
.content-box > .type-s .s-bottom .bt-right .add-list li + li {margin-top:10px;}
.content-box > .type-s .s-bottom .bt-right .add-list li span {font-size:22px;margin-left:20px;}
.content-box > .type-s .s-bottom .bt-right .add-list li strong {font-size:22px;font-weight:bold;}

/* 결제 화면 multi */
.content-box > .type-m {margin-top:50px;width:100%;padding:40px;border:solid 1px #f28d9f;border-radius:30px;box-sizing:border-box;}
.content-box > .type-m .s-top {display:flex;}
.content-box > .type-m .s-top .s-left {width:350px;flex-grow:0;text-align:center;border-right:dashed 1px #f28d9f;}
.content-box > .type-m .s-top .s-left .title {color:#f28d9f;font-size:30px;font-weight:bold;}
.content-box > .type-m .s-top .s-left .price-list {margin-top:60px;text-align:left;}
.content-box > .type-m .s-top .s-left .price-list .box > .months {display:flex;align-items: center;}
.content-box > .type-m .s-top .s-left .price-list .box > .months .point {color:#f28d9f;font-size:36px;display:block;}
.content-box > .type-m .s-top .s-left .price-list .box > .months .point .num {color:#f28d9f;font-weight:bold;}
.content-box > .type-m .s-top .s-left .price-list .box > .months .addinfo {font-size:19px;margin-left:10px;}
.content-box > .type-m .s-top .s-left .price-list .box > .price {display:flex;align-items: center;margin-top:-4px;}
.content-box > .type-m .s-top .s-left .price-list .box > .price.new {margin-top:10px;}
.content-box > .type-m .s-top .s-left .price-list .box > .price strong {font-size:36px;font-weight:bold;letter-spacing: -1px;position:relative;}
.content-box > .type-m .s-top .s-left .price-list .box > .price strong .ori {top:-15px;left:25px;font-size:18px;position:absolute;text-decoration:line-through;}
.content-box > .type-m .s-top .s-left .price-list .box > .price span {font-size:22px;font-weight:normal;margin-left:4px;}
.content-box > .type-m .s-top .s-left .price-list .box > .price .btn-cont {padding-top:13px;}
.content-box > .type-m .s-top .s-left .price-list .box > .price a {margin-left:40px;width:118px;height:45px;display:flex;align-items: center;justify-content: center;color:#f28d9f;border-radius:8px;border:solid 1px #f28d9f;font-size:22px;}
.content-box > .type-m .s-top .s-left .price-list .box > .price a:hover {background:#f28d9f;color:#fff;text-decoration: none;}
.content-box > .type-m .s-top .s-left .price-list .box + .box {margin-top:50px;}
.content-box > .type-m .s-top .s-right {flex-grow:1;padding:30px;padding-right:0px;}
.content-box > .type-m .s-top .s-right .contents {display:flex;gap:20px;justify-content:center; }
.content-box > .type-m .s-top .s-right .contents .item {width:170px;height:170px;border-radius:200px;border:solid 2px #f28d9f;background:#fad9d8;display:flex;align-items:center;justify-content: center;text-align:center;}
.content-box > .type-m .s-top .s-right .contents .item strong {display:flex;align-items: center;justify-content: center;font-size:28px;line-height:40px;width:110px;height:47px;border-bottom:solid 2px #f28d9f;}
.content-box > .type-m .s-top .s-right .contents .item div {display:block;font-size:24px;line-height:32px;margin-top:10px;}
.content-box > .type-m .s-top .s-right .desc {display:flex;align-items: center;justify-content: center;margin-top:84px;}
.content-box > .type-m .s-top .s-right .desc .inner {padding:25px;border:solid 1px #f28d9f;width:380px;border-radius:30px;}
.content-box > .type-m .s-top .s-right .desc .inner strong {font-size:24px;}
.content-box > .type-m .s-top .s-right .desc .inner .desc-list {}
.content-box > .type-m .s-top .s-right .desc .inner .desc-list li {font-size:18px;list-style:none; }
.content-box > .type-m .s-top .s-right .addinfo {margin-top:84px;}
.content-box > .type-m .s-top .s-right .addinfo .add-list {list-style: none;}
.content-box > .type-m .s-top .s-right .addinfo .add-list li {display:flex;align-items: center}
.content-box > .type-m .s-top .s-right .addinfo .add-list li + li {margin-top:10px;}
.content-box > .type-m .s-top .s-right .addinfo .add-list li strong {font-size:22px;font-weight:bold;margin-left:10px;display:block;width:160px;}
.content-box > .type-m .s-top .s-right .addinfo .add-list li span {margin-left:40px;font-size:22px;}

/* 결제 화면 bottom 버튼 */
.content-box > .btn-list {display:flex;gap:56px;margin-top:64px;}
.content-box > .btn-list .item {width:100%;padding:22px 55px;border:solid 1px #ddd;border-radius:20px;display:flex;gap:30px;}
.content-box > .btn-list .item .cont .sub {font-size:16px;display:block;margin-left:5px;}
.content-box > .btn-list .item .cont .title {margin-top:5px;display:block;}
.content-box > .btn-list .item .cont .desc {font-size:24px;display:block;margin-top:10px;text-align:center;}
.content-box > .btn-list .item .cont .btn {width:100%;display:flex;align-items: center;justify-content: center;margin-top:10px;}
.content-box > .btn-list .item .cont .btn .btn-kin {width:135px;height:40px;display:flex;align-items: center;justify-content: center;text-align:center;background:#a9d5f2;border-radius:20px;color:#fff;font-size:24px;}
.content-box > .btn-list .item .cont .btn .btn-smart {width:135px;height:40px;display:flex;align-items: center;justify-content: center;text-align:center;background:#fcdc4e;border-radius:20px;color:#fff;font-size:24px;}
.content-box > .btn-list .item .cont .btn .btn-kin:hover {text-decoration:none;background:#a9c5f2;}
.content-box > .btn-list .item .cont .btn .btn-smart:hover {text-decoration:none;background:#fccc4e;}




/* 멤버십 타입 카드 */
.membership-type-cards{display:flex;gap:24px;margin-top:57px; margin-bottom:48px;justify-content:center; height: 328px;align-items:flex-end;}
.membership-type-cards .card-item{display:block;width:328px;text-decoration:none;border-radius:20px; border:1px solid #D3D3D3; overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.1);transition:all 0.3s ease;background:#fff;}
.membership-type-cards .card-item:hover{transform:translateY(-18px);box-shadow:0 14px 36px rgba(0,0,0,0.18);}
.membership-type-cards .card-item.active{height:362px;box-shadow:0 18px 42px rgba(0,0,0,0.22);}
.membership-type-cards .card-item.active .card-content{height:198px;}
.membership-type-cards .card-item.active:hover{transform:translateY(-6px);}

/* 카드 아이콘 영역 */
.membership-type-cards .card-icon{padding:22px 0 13px 0;text-align:center;background:#ffffff; }
.membership-type-cards .card-smart .card-icon{}
.membership-type-cards .card-multi .card-icon{}
.membership-type-cards .card-month .card-icon{}

.membership-type-cards .card-icon img{width:auto;height:129px;}

/* 카드 컨텐츠 영역 */
.membership-type-cards .card-content{height: 164px;display: flex; flex-direction: column;align-items: center;justify-content: center; text-align:center; color:#fff;}
.membership-type-cards .card-smart .card-content{background:#7A41FF;}
.membership-type-cards .card-multi .card-content{background:#FF5CE1;}
.membership-type-cards .card-month .card-content{background:#FFBC2B}

.membership-type-cards .card-title{font-size:28px;font-weight:700;margin-bottom:12px;letter-spacing:-0.03em; color:#fff;}
.membership-type-cards .card-desc{font-size:18px;line-height:1.2; letter-spacing:-0.03em;}



.mypage_order_tabboxN li{background: none}

/* 멤버 컨테이너 */
.member-container{border-radius:20px;padding:32px;margin-top:30px;font-family:'Pretendard',sans-serif;}
.member-container.smart{background:linear-gradient(126.87deg,#8F79FF 0%,#C583FA 71.43%);border-radius:28px;padding:32px;}
.member-container.multi{background:linear-gradient(126.87deg,#FF54C6 0%,#FFA1DE 71.43%);}


/* 현재 구독 정보 */
.subscription-info{background:#FFFFFF;border-radius:16px;padding:30px;margin-top:20px;box-shadow:0 4px 20px rgba(0,0,0,0.1);}
.subscription-info>div{position:relative;}
.subscription-info .user-name{font-size:20px;font-weight:700;color:#5294de;}
.subscription-info .info-text{font-size:16px;color:#333;line-height:1.8;}
.subscription-info .highlight{font-size:20px;font-weight:700;color:#5294de;}
.subscription-info table{width:100%;margin-top:20px;border-collapse:collapse;}
.subscription-info tr{border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.subscription-info th{background:#f5f5f5;padding:15px;font-weight:700;}
.subscription-info td{padding:0 15px; height: 68px; display:flex;align-items:center;justify-content:space-between;}
.btn-card-change{background:#4193FF;color:#FFFFFF;border:none;border-radius:5px;padding:8px 15px;font-size:14px;cursor:pointer;}
.btn-card-change:hover{background:#2E7FE6;}
.btn-cancel-area{text-align:right;margin-top:10px;}
.btn-cancel-area .btn-cancel-small{font-size:13px;color:#999;cursor:pointer;}
.btn-cancel-area .btn-cancel-small:hover{color:#999;text-decoration:none;}

/* 특징 카드 공통 */
.feature-cards{display:flex;gap:16px;margin-bottom:60px;justify-content:center;height:218px;}
.feature-card{border-radius:16px;padding:0;text-align:center;overflow:hidden;border:2px solid #FFFFFF;display:flex;flex-direction:column;align-items:center;}
.feature-card .card-area{height:165px;display:flex;align-items:center;justify-content:center;background:transparent;}
.feature-card .icon{height:auto;margin:0 auto;}
.feature-card .icon img{width:100%;height:100%;object-fit:contain;}
.feature-card .title{background:#FFFFFF;font-size:17px;font-weight:600;border-radius:20px;display:flex;align-items:center;justify-content:center;letter-spacing:-0.04em;height:37px;}

/* grade 카드 공통 */
.feature-card.grade{background:#FFFFFF;border:none;}
.feature-card.grade .card-area{background:#FFFFFF;}
.feature-card.grade .icon{width:120px;}
.feature-card.grade .title{margin:0;border-radius:0 0 14px 14px;border:none;width:100%;height:54px;font-size:21px;font-weight:700;letter-spacing:-0.03em;color:#FFFFFF;}

.smart .feature-card.grade, .multi .feature-card.grade{background:#FFFFFF;}
.smart .feature-card.grade .title, .multi .feature-card.grade .title{ width:100%; color:#FFFFFF;}
.smart .feature-card.grade .icon, .multi .feature-card.grade .icon{width:120px;}

/* smart 카드 */
.smart .feature-card{background:#C4B5FD;width:216px;}
.smart .feature-card .icon{width:110px;}
.smart .feature-card .title{color:#6F36F4;width:173px;}
.smart .feature-card.grade .title{background:#6A11E8;}

/* multi 카드 */
.multi .feature-card{background:#FFB2F1;width:300px;}
.multi .feature-card .icon{width:174px;}
.multi .feature-card .title{color:#F60FCC;width:180px;}
.multi .feature-card.grade .title{background:#E803EB;}


/* 혜택 리스트 */
.benefits-section{display:flex;padding-bottom:48px;margin-bottom:48px;color:#FFFFFF;border-bottom:2px solid rgba(255,255,255,0.3);gap:32px;justify-content:center;}
.benefits-column ul{list-style:none;padding:0;margin:0;}
.benefits-column li{font-size:21px;line-height:1.7;padding-left:20px;position:relative;display:table;letter-spacing:-0.04em;}
.benefits-column li:before{content:"•";position:absolute;left:0;font-weight:bold;letter-spacing:-0.04em;}

/* 동요 다운로드 안내 */
.download-info{color:#FFFFFF;margin-bottom:60px;display:flex;flex-direction:column;align-items:center;gap:4px;}
.download-info div{font-size:21px;font-weight:400;display:flex;gap:32px;width:auto;letter-spacing:-0.04em;}
.download-info strong{font-weight:700;text-align:right;min-width:195px;}
.download-info div span{width:195px;text-align:left;flex:1;font-weight:normal;}

/* 가격 카드 */
.pricing-section{display:flex;gap:14px;margin-bottom:48px;justify-content:center;height:269px;}
.pricing-card{background:#FFFFFF;border-radius:16px;width:300px;position:relative;box-shadow:0 10px 30px rgba(0,0,0,0.1);padding:20px;}
.pricing-card.best::before{content:'';position:absolute;top:-60px;left:15px;width:84px;height:84px;background-image:url('/images/renewal/membership/best_badge.png');background-size:contain;background-repeat:no-repeat;z-index:10;}
.pricing-card-header{padding:10px;}
.pricing-badge{height:41px;width:111px;display:flex;background:#6F36F4;color:#FFFFFF;border-radius:25px;font-size:23px;font-weight:500;margin-bottom:25px;align-items:center;justify-content:center;letter-spacing:-0.05em;}
.pricing-card .original-price{font-family:'Montserrat',sans-serif;color:#544EA8;opacity:0.6;font-size:24px;text-decoration:line-through;font-weight:400;letter-spacing:-0.05em;}
.pricing-card .price-wrapper{display:flex;align-items:center;gap:8px;margin-bottom:12px;margin-top:-10px;}
.pricing-card .price{font-family:'Montserrat',sans-serif;font-size:36px;font-weight:700;color:#000;letter-spacing:-0.05em;}
.pricing-card .price .unit{font-size:20px;font-weight:500;}
.pricing-card .discount-badge{background:#6F36F4;color:#FFFFFF;height:28px;width:60px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:500;}
.pricing-card .subtitle{color:#4B45A8;opacity:0.7;font-size:13px;letter-spacing:-0.05em;margin-top:35px;margin-bottom:5px;}
.pricing-card .btn-apply{background:#000;color:#FFFFFF;border:none;border-radius:6px;width:100%;height:52px;font-size:22px;letter-spacing:-0.05em;font-weight:700;cursor:pointer;transition:all 0.3s ease;}
.pricing-card:hover .btn-apply{background:#6F36F4;}


.multi .pricing-section{height: 177px; }
.multi .pricing-card-header{display:flex;justify-content: space-between; align-items:center; padding:0px;}
.multi .pricing-card{ width: 454px; display:flex;flex-direction:column;justify-content:space-between;}
.multi .pricing-card .price-wrapper{margin-top:0px;}
.multi .pricing-badge{ background: #FF43FC; margin-bottom:0;}
.multi .pricing-area{display:flex;align-items:baseline;gap:5px;}
.multi .pricing-card .subtitle{margin-top:0;margin-bottom: 0}


.multi .pricing-card:hover .btn-apply{background:#FF43FC;}


/* 사은품 섹션 */
.gift-section{display:flex;justify-content:space-between;border-radius:16px;gap:30px;}
.gift-left{flex-shrink:0;}
.gift-badge{display:flex;align-items:center;justify-content:center;background:#6F36F4;color:#FFFFFF;height:44px;width:159px;border-radius:25px;font-size:22px;font-weight:500;letter-spacing:-0.05em;}
.gift-center{flex:1;text-align:left;}
.gift-title{color:#FFFFFF;font-size:26px;font-weight:700;letter-spacing:-0.04em;}
.gift-subtitle{color:#FFFFFF;font-size:21px;font-weight:500;display:flex;align-items:center;gap:10px;}
.gift-subtitle span{width:185px;}
.gift-subtitle span:not(:last-child)::after{content:'';display:inline-block;width:1px;height:19px;background:#FFFFFF;opacity:0.7;margin-left:16px;vertical-align:middle;}
.gift-right{position:relative;margin-right:66px;}
.gift-circle{position:absolute;width:105px;height:105px;background:#D094FF;opacity:0.5;border-radius:50%;top:30%;left:20%;transform:translate(-50%,-50%);}
.gift-right img{width:205px;position:relative;z-index:1;}

/* 월구독 취소 */
.cancel-subscription{text-align:center;margin-top:30px;}
.btn-cancel{background:#4193FF;color:#FFFFFF;border:none;border-radius:10px;padding:15px 40px;font-size:16px;font-weight:700;cursor:pointer;transition:all 0.3s ease;}
.btn-cancel:hover{background:#2E7FE6;}



/* 추가 서비스 카드 */
.additional-services{display:flex;gap:24px;margin:42px 0;justify-content:space-between; height: 283px}
.additional-services .service-card{background:#fff;border:1px solid #CFD1F9; border-radius:20px;padding:44px 48px 19px 48px;box-shadow:0 4px 20px rgba(0,0,0,0.08);transition:all 0.3s ease;gap:30px; flex:1;height:180px;}
.additional-services .service-card .service-card-info{display:flex;align-items:center; justify-content:space-between;}
.additional-services .service-card:hover{transform:translateY(-5px);box-shadow:0 8px 30px rgba(0,0,0,0.12);}

/* 이미지 영역 */
.additional-services .service-image{flex-shrink:0;width:140px;height:140px;display:flex;align-items:center;justify-content:center;}
.additional-services .service-image img{width:100px;height:auto;object-fit:contain;}
.additional-services .service-smart .service-image img{width:80px}

/* 컨텐츠 영역 */
.additional-services .service-content{width:244px;text-align:left;}
.additional-services .service-subtitle{font-size:19px;color:#534F8D;opacity: 0.7;letter-spacing:-0.05em; text-align: right}
.additional-services .service-title{font-size:36px;font-weight:700;margin-bottom:16px;letter-spacing:-0.05em;color:#000000; text-align: right}
.additional-services .service-kinder .service-title{color:#333;}
.additional-services .service-smart .service-title{color:#333;}

/* 가격 영역 */
.additional-services .service-price{display:flex;align-items:center;gap:12px;margin-bottom:20px; justify-content:space-between;}
.additional-services .price-badge{display:flex;border-radius:20px;font-size:15px;font-weight:400;letter-spacing:-0.05em; width:95px; height: 32px; align-items: center;justify-content: center;}
.additional-services .service-kinder .price-badge{background:#63A6F3;color:#ffffff;}
.additional-services .service-smart .price-badge{background:#2BBEC9;color:#ffffff;}

.additional-services .price-amount{font-size:35px;font-weight:700;color:#000;font-family:'Montserrat',sans-serif;letter-spacing:-0.03em;}
.additional-services .price-unit{font-size:21px;font-weight:500;}

/* 신청 버튼 */
.additional-services .btn-apply-service{display:flex;height:52px; align-items: center;justify-content: center ;width:100%;border-radius:10px;font-size:22px;font-weight:700;color:#fff;text-decoration:none;transition:all 0.3s ease;letter-spacing:-0.05em;}
.additional-services .service-kinder .btn-apply-service{background:#63A6F3;}
.additional-services .service-kinder .btn-apply-service:hover{background:#3090FE;}
.additional-services .service-smart .btn-apply-service{background:#2BBEC9;}
.additional-services .service-smart .btn-apply-service:hover{background:#09ABB7;}


/* 월구독 배너 */
.monthly-subscription-banner{background:#FFFFFF; border-radius:20px;padding:0 40px;display:flex;align-items:center;justify-content:space-between; box-shadow:0 4px 20px rgba(155,127,245,0.3); height: 100px}
.monthly-subscription-banner .subscription-badge{display:flex;align-items: center;justify-content: center ;background:#6F36F4;color:#fff;width: 108px; height: 42px; border-radius:30px;font-size:20px;font-weight:700;letter-spacing:-0.02em;}
.monthly-subscription-banner .subscription-price{display:flex;align-items:baseline;gap:8px;color:#000000; width:460px;}
.monthly-subscription-banner .price-number{font-size:36px;font-weight:700;font-family:'Montserrat',sans-serif;letter-spacing:-0.05em;}
.monthly-subscription-banner .price-unit{font-size:24px;font-weight:600;}
.monthly-subscription-banner .price-desc{font-size:15px;color:#555288;opacity:0.7;margin-left:8px;letter-spacing:-0.02em;}
/* 신청 버튼 */
.monthly-subscription-banner .btn-subscribe{display:flex;align-items: center;justify-content: center; background:#000;color:#fff;border:none;width:233px;height: 52px; border-radius:12px;font-size:20px;font-weight:700;cursor:pointer;transition:all 0.3s ease;letter-spacing:-0.02em;}
.monthly-subscription-banner .btn-subscribe:hover{background:#6F36F4;transform:scale(1.05);}

.multi .monthly-subscription-banner .subscription-badge{background:#FF43FC;}
.multi .monthly-subscription-banner .btn-subscribe:hover{background:#FF43FC;}



/* 회원 비교 카드 */
.membership-comparison{display:flex;align-items:flex-end;justify-content:center;gap:0;margin:60px 0 10px;position:relative;}

.membership-comparison .comparison-card{width:250px;position:relative;transition:all 0.3s ease;}


/* 왕관 */
.membership-comparison .card-crown{position:absolute;top:-20px;left:50%;transform:translateX(-50%);width:70px;height:auto;z-index:10;}
.membership-comparison .card-crown img{width:100%;height:100%;}

/* 아이콘 영역 */
.membership-comparison .card-icon{padding:30px 20px 20px;text-align:center;background:#ffffff; width:115px; display: flex; align-items: center; justify-content: center; margin: 0 auto;}
.membership-comparison .card-icon>img{width:100%;height:auto}



.membership-comparison .icon-circle{width:80px;height:80px;margin:0 auto 12px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;color:#fff;box-shadow:0 4px 15px rgba(0,0,0,0.15);}
.membership-comparison .card-basic .icon-circle{background:linear-gradient(135deg,#90CAF9,#64B5F6);}
.membership-comparison .card-multi .icon-circle{background:linear-gradient(135deg,#FF53E0,#FFB4F5);}
.membership-comparison .card-smart .icon-circle{background:linear-gradient(135deg,#6958FF,#9B7FF5);}

.membership-comparison .card-basic .icon-circle img{width:50px;height:auto;}

.membership-comparison .icon-label{display:inline-block;background:rgba(255,255,255,0.9);padding:5px 16px;border-radius:15px;font-size:12px;font-weight:600;letter-spacing:0.5px;}
.membership-comparison .card-multi .icon-label{color:#FF53E0;}
.membership-comparison .card-smart .icon-label{color:#6958FF;}

/* 카드 본문 */
.membership-comparison .card-body{padding:24px 20px;text-align:center;flex:1;display:flex;flex-direction:column;border-radius:20px 20px 0 0; color:#fff;}
.membership-comparison .card-basic .card-body{height:226px;  background:linear-gradient(135deg,#acc5fa,#8aacf2); }
.membership-comparison .card-multi .card-body{height:316px; background:linear-gradient(135deg,#ff80ed,#FF53E0);}
.membership-comparison .card-smart .card-body{height:403px; background:linear-gradient(135deg,#c177ff,#7A41FF);}

.membership-comparison .card-title{font-size:28px;font-weight:700;margin:18px 0 32px;letter-spacing:-0.05em; color:#fff;}
.membership-comparison .card-divider{width:100%;height:1px;background:#FFFFFF;margin:0 auto 32px;}
.membership-comparison .card-multi .card-divider{margin:0 auto 52px;}
.membership-comparison .card-smart .card-divider{margin:0 auto 86px;}

.membership-comparison .card-benefit{font-size:20px;line-height:1.6;letter-spacing:-0.04em;}


.membership-comparison .card-benefit-strong{font-size:20px;font-weight:700;line-height:1.5;margin-bottom:8px;letter-spacing:-0.02em;}
.membership-comparison .card-benefit-sub{font-size:16px;margin-bottom:auto;}

/* 신청 버튼 */
.membership-comparison .btn-card-apply{background:#fff;border:none;border-radius:10px;padding:14px 30px;font-size:18px;font-weight:700;cursor:pointer;margin-top:20px;transition:all 0.3s ease;letter-spacing:-0.02em;}
.membership-comparison .card-multi .btn-card-apply{color:#FF32DA;}
.membership-comparison .card-smart .btn-card-apply{color:#620ADD;}
.membership-comparison .btn-card-apply:hover{transform:scale(1.05);box-shadow:0 4px 15px rgba(0,0,0,0.2);text-decoration:none;}

/* 안내 문구 */
.comparison-note{text-align:left;color:#141559;opacity: 0.7 ;font-size:16px;margin-left:150px;letter-spacing:-0.04em; font-weight:400;}

/* 회원별 콘텐츠 비교 */
.membership-features-comparison{margin:60px}
.membership-features-comparison .comparison-title{font-size:26px;font-weight:700;margin-bottom:20px;color:#0F1947;letter-spacing:-0.04em;}

/* 컨테이너 */
.membership-features-comparison .comparison-container{display:flex;gap:8px;align-items:stretch;}

/* 왼쪽 라벨 */
.membership-features-comparison .features-labels{display:flex;flex-direction:column;width:220px;flex-shrink:0; border:1px solid #B9C0E2; border-radius:10px;}
.membership-features-comparison .label-header{background:#183778;height:60px;border-radius:10px 10px 0 0;}
.membership-features-comparison .label-item{height: 44px;font-size:15px;font-weight:600;color:#071451;display:flex;flex-direction: column;align-items:center;justify-content: center;letter-spacing:-0.02em;}
.membership-features-comparison .label-item:nth-child(odd){background:#EDF3FB;}
.membership-features-comparison .label-item:last-child{border-bottom:none;border-radius:0 0 10px 10px;}
.membership-features-comparison .label-item span{font-size:11px;color:#071451;font-weight:400; opacity:0.6; line-height:0.6;}

/* 회원 카드 */
.membership-features-comparison .features-card{flex:1;display:flex;flex-direction:column;width: 220px ;border-radius:10px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08); border:1px solid #B9C0E2;}

.membership-features-comparison .card-header{font-size:21px;font-weight:700;color:#fff;text-align:center;letter-spacing:-0.02em;height:60px;display:flex;align-items:center;justify-content:center;}
.membership-features-comparison .card-basic .card-header{background:#B8C9ED;}
.membership-features-comparison .card-multi .card-header{background:#FF5CE1;}
.membership-features-comparison .card-smart .card-header{background:#7A41FF;}

.membership-features-comparison .feature-value{height: 44px; ;text-align:center;font-size:15px;background:#fff;display:flex;align-items:center;justify-content:center;letter-spacing:-0.04em; color:#53609E; font-weight:400;}
.membership-features-comparison .feature-value:nth-child(odd){background:#EDF3FB;}
.membership-features-comparison .feature-value:last-child{border-bottom:none;}
.membership-features-comparison .card-smart .feature-value{color:#6C2DFF; font-weight:600;}

/* 스마트 회원 하이라이트 */
.membership-features-comparison .card-smart .feature-value.highlight{background:#F3F0FF;color:#6958FF;font-weight:600;}



/* 안내 문구 */
.membership-features-comparison .comparison-note{margin-top:10px; margin-left:2px}



/* board card (4 cards) */
.membership-type-cards .card-item{width:240px;}
.membership-type-cards .card-board .card-content{background:#2F7BE8;}


/* =========================================================
   Membership Renewal 2026 — /mypage/profile/membership.htm
   ========================================================= */
/* ₩(U+20A9)만 한글 시스템 폰트로 렌더링 (Inter의 ₩ 글리프 회피) */
@font-face{
    font-family:'WonSymbol';
    src:local('Pretendard'), local('Malgun Gothic'), local('맑은 고딕'), local('Apple SD Gothic Neo'), local('Noto Sans KR');
    unicode-range:U+20A9;
    font-display:swap;
}
#container.mship-container{width:1280px;max-width:1280px;}
.mship-r{width:1280px;max-width:1280px;margin:0 auto;padding:0;font-family:'Pretendard','Noto Sans KR',sans-serif;color:#222;box-sizing:border-box;}
.mship-r *{box-sizing:border-box;}
.mship-r .mship-head{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:64px;height:369px;padding:96px 0 88px;}
.mship-r .mship-head h2{font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:700;font-size:40px;line-height:130%;letter-spacing:0;color:#262626;text-align:center;margin:0;}
.mship-r .mship-head .mship-detail{align-self:flex-end;font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:500;font-size:14px;line-height:100%;letter-spacing:0;color:#8C8C8C;text-decoration:underline solid;text-underline-offset:0;}

.mship-r .mship-grid{display:grid;grid-template-columns:repeat(4,300px);gap:24px;justify-content:center;align-items:stretch;}
.mship-r .mship-col{position:relative;width:300px;height:532px;background:#fff;border:1px solid #e6e8ec;border-radius:16px;padding:32px 28px;display:flex;flex-direction:column;gap:0;}

/* 컬러 강조 */
.mship-r .mship-col{transition:background-color .15s ease;}
.mship-r .mship-col.multi{border:1px solid #FF5CC880;}
.mship-r .mship-col.smart{border:2px solid #B6A4FF;background:#F8F6FF;}
.mship-r .mship-col.board{border:1px solid #2F7BE880;}
.mship-r .mship-col.canvas{border:1px solid #FFBC2B;}

/* hover 배경 */
.mship-r .mship-col.multi:hover{background:#FDFAFC;}
.mship-r .mship-col.smart:hover{background:#F8F6FF;}
.mship-r .mship-col.board:hover{background:#F0F6FF;}
.mship-r .mship-col.canvas:hover{background:#FFFEFB;}

/* 다른 카드에 마우스가 올라가면 기본 활성이던 스마트는 흰색으로 */
.mship-r .mship-grid:hover .mship-col.smart:not(:hover){background:#fff;}

/* BEST 리본 (스마트) - 레이아웃 영향 없이 카드 위에 떠 있음 */
.mship-r .mship-col .mship-ribbon{position:absolute;left:50%;bottom:calc(100% + 5px);transform:translateX(-50%);margin:0;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:300px;height:22px;padding:5px;border-radius:15px;color:#fff;font-size:14px;font-weight:500;white-space:nowrap;box-sizing:border-box;pointer-events:none;transition:opacity .15s ease;}

/* 카드별 리본 배경색 */
.mship-r .mship-col.smart  .mship-ribbon{background:#9278FF;}
.mship-r .mship-col.board  .mship-ribbon{background:#2F7BE8;}
.mship-r .mship-col.canvas .mship-ribbon{background:#FFBC2B;}

/* 리본은 활성(=hover 또는 기본 활성인 스마트) 카드에만 노출 */
.mship-r .mship-col .mship-ribbon{opacity:0;}
.mship-r .mship-col.smart .mship-ribbon{opacity:1;}
.mship-r .mship-grid:hover .mship-col.smart:not(:hover) .mship-ribbon{opacity:0;}
.mship-r .mship-col:hover .mship-ribbon{opacity:1;}

/* 상단 타이틀 영역 */
.mship-r .mship-col .mship-tit{font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:700;font-size:18px;line-height:100%;letter-spacing:0;color:#262626;display:flex;align-items:center;gap:8px;margin:0 0 32px;height:18px;overflow:visible;}
.mship-r .mship-col .best-badge{flex:none;}
.mship-r .mship-col .mship-tit .mship-sub{font-size:14px;color:#676767;}
.mship-r .mship-col.board .mship-tit{gap:2px;margin:0 0 24px;}
.mship-r .mship-col .best-badge{display:block;width:60px;height:22px;object-fit:contain;}

/* 가격 라인 */
.mship-r .mship-col .price-list{display:flex;flex-direction:column;gap:5px;}
.mship-r .mship-col .price-row{display:flex;align-items:center;gap:12px;}
.mship-r .mship-col .price-row .plan{font-size:14px;color:#818181;min-width:41px;}
.mship-r .mship-col .price-row .amt{display:inline-block;font-family:'WonSymbol','Inter','Pretendard',sans-serif;font-weight:700;font-size:32px;line-height:100%;letter-spacing:0;color:#262626;}
.mship-r .mship-col .price-row .amt::first-letter{margin-right:3px;}
.mship-r .mship-col.board .board-tier .amt{display:inline-block;}
.mship-r .mship-col.board .board-tier .amt::first-letter{margin-right:2px;}
.mship-r .mship-col .price-row .amt .won{font-size:16px;font-weight:700;}
.mship-r .mship-col .autopay{font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:500;font-size:10px;line-height:100%;letter-spacing:0;color:#999999;}

/* 캔버스 - strike 행 (레이아웃 높이 차지 안 함) */
.mship-r .mship-col.canvas .price-row:has(.strike){height:0;overflow:visible;align-items:flex-end;}
.mship-r .mship-col.canvas .price-row .strike{font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:400;font-size:12px;line-height:100%;letter-spacing:0;color:#BBBBBB;text-decoration:line-through;}
.mship-r .mship-col.canvas .autopay{margin-top:10px;color:#FF4D4D;}

/* 보드 - 회원등급별 가격 박스 */
.mship-r .mship-col.board .board-note{font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:700;font-size:10px;line-height:100%;letter-spacing:0;color:#2F7BE8;margin:0 0 23.5px 10px;}
.mship-r .mship-col.board .board-tiers{display:flex;flex-direction:column;gap:20px;margin-left:10px;}
.mship-r .mship-col.board .board-tier{}
.mship-r .mship-col.board .board-tier .board-tier-row{display:inline-flex;justify-content:space-between;align-items:center;gap:15px;}
.mship-r .mship-col.board .board-tier .who{font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:500;font-size:11.5px;line-height:100%;letter-spacing:0;color:#555555;}
.mship-r .mship-col.board .board-tier .board-price{display:inline-flex;align-items:flex-end;gap:8px;}
.mship-r .mship-col.board .board-tier .strike-col{position:relative;display:inline-flex;align-items:center;}
.mship-r .mship-col.board .board-tier .rate{position:absolute;right:0;bottom:calc(100% + 3px);display:inline-flex;align-items:center;justify-content:flex-end;width:30px;height:14px;padding:0 4px;border-radius:3px;background:#EDF3FF;font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:900;font-size:9.5px;line-height:100%;letter-spacing:0;color:#2F5BE0;box-sizing:border-box;}
.mship-r .mship-col.board .board-tier .strike{font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:400;font-size:9.5px;line-height:100%;letter-spacing:0;color:#AAAAAA;text-decoration:line-through;}
.mship-r .mship-col.board .board-tier .amt{font-family:'WonSymbol','Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:900;font-size:14px;line-height:100%;letter-spacing:0;color:#222222;}
.mship-r .mship-col.board .board-tier .amt .per{font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:900;font-size:10px;line-height:100%;letter-spacing:0;color:#222222;}

/* 설명문 */
.mship-r .mship-col .desc{margin:auto 0 16px;font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:500;font-size:12px;line-height:150%;letter-spacing:0;color:#262626;min-height:36px;}
.mship-r .mship-col.smart .desc strong{font-weight:700;transition:color .15s ease;}

/* 구독 버튼 */
.mship-r .mship-col .sub-btn{display:block;width:244px;max-width:100%;height:44px;padding:12px 0;text-align:center;border:1px solid #e6e8ec;border-radius:10px;font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:500;font-size:16px;line-height:100%;letter-spacing:0;color:#262626;background:#fff;cursor:pointer;transition:background .15s,color .15s,border-color .15s;box-sizing:border-box;}
.mship-r .mship-col.multi  .sub-btn{border-color:#FF5CC880;}
.mship-r .mship-col.smart  .sub-btn{border-color:#B6A4FF;background:#6045D2;color:#fff;}
.mship-r .mship-col.board  .sub-btn{border-color:#2F7BE880;}
.mship-r .mship-col.canvas .sub-btn{border-color:#FFBC2B;}

/* 카드 또는 버튼 hover 시 버튼이 컬러 배경으로 */
.mship-r .mship-col.multi:hover  .sub-btn,
.mship-r .mship-col.multi  .sub-btn:hover {background:#FF5CC8;border-color:#FF5CC8;color:#fff;}
.mship-r .mship-col.smart:hover  .sub-btn,
.mship-r .mship-col.smart  .sub-btn:hover {background:#6045D2;border-color:#6045D2;color:#fff;}
.mship-r .mship-col.board:hover  .sub-btn,
.mship-r .mship-col.board  .sub-btn:hover {background:#2F7BE8;border-color:#2F7BE8;color:#fff;}
.mship-r .mship-col.canvas:hover .sub-btn,
.mship-r .mship-col.canvas .sub-btn:hover {background:#FFBC2B;border-color:#FFBC2B;color:#fff;}

/* 다른 카드에 hover 시 기본 활성이던 스마트 버튼은 기본(흰) 상태로 */
.mship-r .mship-grid:hover .mship-col.smart:not(:hover) .sub-btn{background:#fff;color:#111;border-color:#B6A4FF;}

/* 혜택 영역 */
.mship-r .mship-col .benefits{margin-top:16px;padding-top:16px;border-top:1px solid #EDEDED;height:164px;box-sizing:border-box;}
.mship-r .mship-col .benefits h4{font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:700;font-size:14px;line-height:100%;letter-spacing:0;color:#262626;margin:0 0 16px;}
.mship-r .mship-col .benefits ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:20px;}
.mship-r .mship-col .benefits li{position:relative;padding-left:19px;font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:500;font-size:13px;line-height:100%;letter-spacing:0;color:#404040;}
.mship-r .mship-col .benefits li:before{content:"";position:absolute;left:0;top:0;width:14px;height:14px;background-color:#A6ADB8;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 10.5l4 4 8-9'/></svg>") no-repeat center/contain;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 10.5l4 4 8-9'/></svg>") no-repeat center/contain;transition:background-color .15s ease;}

/* 스마트 카드 활성 상태: strong + 체크마크 컬러 */
.mship-r .mship-col.smart .desc strong{color:#6044D2;}
.mship-r .mship-col.smart .benefits li:before{background-color:#6044D2;}

/* 다른 카드 hover 시 스마트는 기본 컬러로 리셋 (strong 색은 유지) */
.mship-r .mship-grid:hover .mship-col.smart:not(:hover) .benefits li:before{background-color:#A6ADB8;}

/* 카드 자체 hover 시 체크마크에 각 카드 컬러 적용 */
.mship-r .mship-col.multi:hover  .benefits li:before{background-color:#FF5CC8;}
.mship-r .mship-col.board:hover  .benefits li:before{background-color:#2F7BE8;}
.mship-r .mship-col.canvas:hover .benefits li:before{background-color:#FFBC2B;}

/* 하단 유의사항 */
.mship-r .mship-foot{margin:64px 0;color:#AAAAAA;font-size:13px;font-weight:400;}
.mship-r .mship-foot p{margin:0;}

/* 반응형 */
@media (max-width:1200px){
    .mship-r .mship-grid{grid-template-columns:repeat(2,1fr);}
    .mship-r .mship-col .desc{min-height:0;}
}
@media (max-width:640px){
    .mship-r .mship-grid{grid-template-columns:1fr;}
    .mship-r .mship-head h2{font-size:26px;}
    .mship-r .mship-head .mship-detail{position:static;display:block;margin-top:16px;}
}


/* =========================================================
   회원 신청 페이지 상단 탭바 (유료회원 안내 / 컨텐츠 열람 기준) — 2026 리뉴얼
   기존 .mypage_tabwrap 전역 스타일 영향 없도록 .mship-tabbar 로 한정
   ========================================================= */
.ship .sub_content .mypage_tabwrap.mship-tabbar{width:auto;height:auto;box-sizing:border-box;border-bottom:1px solid #E7E7E7;
    /* 하단 라인만 페이지(뷰포트) 전체 폭으로 확장 — 콘텐츠는 컨테이너 위치 유지 */
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:23px calc(50vw - 50%) 0;}
.ship .sub_content .mypage_tabwrap.mship-tabbar .mypage_order_tabboxN{display:flex;justify-content:flex-start;gap:8px;width:auto;height:auto;}
.ship .sub_content .mypage_tabwrap.mship-tabbar .mypage_order_tabboxN li{position:relative;width:168px;height:52px;box-sizing:border-box;padding:14px 24px 0;border:none;background:none;display:block;text-align:center;}
.ship .sub_content .mypage_tabwrap.mship-tabbar .mypage_order_tabboxN li:first-child{border-left:none;}
.ship .sub_content .mypage_tabwrap.mship-tabbar .mypage_order_tabboxN li a{display:block;width:100%;height:auto;font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:500;font-size:18px;line-height:100%;letter-spacing:0;color:#9A9A9A;text-decoration:none;}
.ship .sub_content .mypage_tabwrap.mship-tabbar .mypage_order_tabboxN li a:hover{text-decoration:none;}
/* 활성 탭 */
.ship .sub_content .mypage_tabwrap.mship-tabbar .mypage_order_tabboxN li.mypage_tabOn a{font-weight:700;color:#191F28;}
.ship .sub_content .mypage_tabwrap.mship-tabbar .mypage_order_tabboxN li.mypage_tabOn:after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:120px;height:3px;background:#4F545C;}


/* =========================================================
   회원 신청 페이지 상단 타이틀 (유료회원 안내) — 2026 리뉴얼
   .ship > .sub-title 전역 스타일에 영향 없도록 .mship-subtitle 로 한정
   ========================================================= */
.ship > .sub-title.mship-subtitle{border-bottom:none;margin-bottom:0;padding:0;height:97px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;overflow:visible;}
.ship > .sub-title.mship-subtitle h3{float:none;margin:0;font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:700;font-size:34px;line-height:100%;letter-spacing:0;color:#1E1E1E;}
/* 브레드크럼 (타이틀 밖, 우측 정렬) */
.ship > .sub-nav.mship-crumb{float:none;clear:both;margin:0;width:100%;text-align:right;color:#919191;font-size:13px;line-height:100%;}


/* =========================================================
   회원등급 선택 탭 (멀티 / 스마트 / 보드) — 2026 리뉴얼
   공통: /mypage/multi/apply/index.htm · /mypage/profile/smart/app/index.htm
        · /mypage/board/apply/start.htm
   ========================================================= */
.mtier-tabs{display:flex;gap:16px;justify-content:center;align-items:flex-end;margin:24px 0 50px;padding-top:30px;flex-wrap:wrap;font-family:'Pretendard','Noto Sans KR',sans-serif;}
.mtier-tabs *{box-sizing:border-box;}
.mtier-card{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;box-sizing:border-box;flex:1 1 0;min-width:0;min-height:168px;background:#FAFAFE;border:1px solid #DDDDDD;border-radius:18px;padding:38.5px 0;text-decoration:none;text-align:center;transition:transform .2s ease, box-shadow .2s ease;overflow:visible;}
.mtier-card:hover{text-decoration:none;transform:translateY(-4px);box-shadow:0 10px 26px rgba(0,0,0,.10);}
/* 우측 컬러 바 (모서리 둥글게 → overflow:visible 에서도 카드 안에 딱 맞게) */
.mtier-card:after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;width:14px;border-radius:0 18px 18px 0;}
.mtier-card.multi:after{background:linear-gradient(180deg,#FF7ED4 0%,#E8189E 100%);}
.mtier-card.smart:after{background:linear-gradient(180deg,#A78FFF 0%,#6C4EE8 100%);}
.mtier-card.board:after{background:linear-gradient(180deg,#7EA6FF 0%,#2F5BE0 100%);}
.mtier-card .mtier-name{margin-bottom:2px;font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:900;font-size:22px;line-height:100%;letter-spacing:0;color:#1E1E1E;}
.mtier-card .mtier-benefit{margin:0;font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:500;font-size:13.5px;line-height:100%;letter-spacing:0;text-align:center;color:#696969;}
.mtier-card .mtier-tagline{margin:0;font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:600;font-size:13.5px;line-height:100%;letter-spacing:0;text-align:center;}
.mtier-card .mtier-tagline.board-tagline{line-height:1.3;}
.mtier-card .mtier-price{margin:0;font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:500;font-size:12px;line-height:100%;letter-spacing:0;text-align:center;color:#939393;}
.mtier-card.multi .mtier-tagline{color:#E8189E;}
.mtier-card.smart .mtier-tagline{color:#6C4EE8;}
.mtier-card.board .mtier-tagline{color:#2F5BE0;}
/* 활성 카드 (선택된 등급) — 높이는 동일, 위로 30px 올라감 */
.mtier-card.active{transform:translateY(-30px);box-shadow:0 14px 30px rgba(0,0,0,.14);}
.mtier-card.active:hover{transform:translateY(-30px);}
.mtier-card.multi.active{background:#FFF0FA66;border-color:#E8189E;}
.mtier-card.smart.active{background:#F4F1FF;border-color:#6C4EE8;}
.mtier-card.board.active{background:#EDF3FF;border-color:#2F5BE0;}
/* 활성 카드 하단 역삼각형 화살표 (22×12, 패널을 가리킴) */
.mtier-card.active:before{content:"";position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:12px solid;z-index:2;}
.mtier-card.multi.active:before{border-top-color:#E8189E;}
.mtier-card.smart.active:before{border-top-color:#6C4EE8;}
.mtier-card.board.active:before{border-top-color:#2F5BE0;}


/* =========================================================
   좌측 플로팅 프로모 카드 (.member-container 내부 절대배치)
   ========================================================= */
.member-container{position:relative;}
.mtier-aside{position:absolute;right:100%;margin-right:26px;top:96px;width:188px;background:#fff;border:1px solid #E4E4E4;border-radius:16px;padding:18px 16px 20px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.12);font-family:'Pretendard','Noto Sans KR',sans-serif;}
.mtier-aside .ma-label{display:inline-block;background:#F0EDFF;color:#6F36F4;font-size:12px;font-weight:700;border-radius:14px;padding:5px 14px;letter-spacing:-.02em;}
.mtier-aside .ma-img{margin:16px auto 14px;width:110px;height:74px;display:flex;align-items:center;justify-content:center;background:#F5F3FF;border-radius:12px;overflow:hidden;}
.mtier-aside .ma-img img{max-width:100%;max-height:100%;object-fit:contain;}
.mtier-aside .ma-title{font-size:19px;font-weight:800;color:#222;letter-spacing:-.03em;line-height:1.3;}
.mtier-aside .ma-desc{margin:10px 0 0;font-size:12.5px;color:#8A8A8A;line-height:1.55;letter-spacing:-.02em;}
.mtier-aside .ma-btn{display:block;margin-top:16px;height:40px;line-height:40px;background:#222;color:#fff;font-size:13px;font-weight:700;border-radius:8px;text-decoration:none;letter-spacing:-.02em;}
.mtier-aside .ma-btn:hover{background:#000;text-decoration:none;color:#fff;}


/* =========================================================
   스마트 패널 조정 — 스크린샷(스마트, 보라) 기준
   .multi 패널에는 영향 없도록 .smart 스코프로 한정
   ========================================================= */
/* 섹션 간 세로 간격 24px (Figma auto-layout gap) */
.member-container .feature-cards{gap:14px;height:124px;margin-bottom:28px;}
.member-container .download-info{margin-bottom:28px;gap:8px;padding:0 12px;}
.member-container .download-info div{gap:15px;}
.member-container .download-info strong{font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:900;font-size:16px;line-height:100%;letter-spacing:0;}
.member-container .download-info div span{font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:500;font-size:16px;line-height:100%;letter-spacing:0;}
.member-container .pricing-section{margin-bottom:0;gap:16px;height:195px;padding-top:4px;}
/* 특징 카드 3개(등급카드 없이 균등 배치) — 스마트/멀티 공통, 높이 124 안에 맞춤 */
.member-container .feature-card{box-sizing:border-box;flex:1;width:auto;max-width:none;height:124px;justify-content:center;gap:4px;padding:20px 14px 18px;border:none;border-radius:18px;background:#FFFFFF38;overflow:visible;}
.member-container .feature-card .card-area{height:auto;flex:0 0 auto;}
.member-container .feature-card .icon{width:60px;height:auto;}
.member-container .feature-card .icon img{width:100%;height:auto;object-fit:contain;display:block;}
.member-container .feature-card .title{box-sizing:border-box;width:auto;height:26px;padding:5px 14px;border-radius:100px;background:#FFFFFF;box-shadow:0px 3px 8px #0000001F;font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:700;font-size:13px;line-height:100%;letter-spacing:0;}
/* 타이틀 글자색은 등급별 */
.member-container.smart .feature-card .title{color:#6C4EE8;}
.member-container.multi .feature-card .title{color:#E8189E;}
.member-container.board .feature-card .title{color:#2F5BE0;}
/* 보드: 혜택 섹션 하단 보더 제거 */
.member-container.board .benefits-section{border-bottom:none;}
/* 보드 패널 배경(파랑) */
.member-container.board{background:linear-gradient(126.87deg,#4A7DFF 0%,#7EB2FF 71.43%);}

/* 혜택 리스트 간격 (스마트/멀티 공통) */
.member-container .benefits-section{gap:80px;margin-bottom:24px;padding-bottom:24px;}
.member-container .benefits-column ul{display:flex;flex-direction:column;gap:11px;}
.member-container .benefits-column li{display:block;font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:500;font-size:17px;line-height:100%;letter-spacing:0;color:#FFFFFF;}

/* 가격 카드 (3등분) — 위에서부터 스택, 버튼은 하단 고정으로 3카드 정렬 일치 */
.member-container .pricing-card{box-sizing:border-box;flex:1 1 0;width:auto;height:191px;display:flex;flex-direction:column;justify-content:flex-start;border-radius:18px;padding:20px;background:#FFFFFF;box-shadow:0px 10px 24px 0px #2828282E;}
/* 가격 카드 뱃지(등급/BEST) */
.member-container .pricing-badges{display:flex;align-items:center;gap:8px;margin-bottom:11.5px;}
.member-container .pricing-badge{margin-bottom:0;box-sizing:border-box;width:auto;height:30px;padding:6px 16px;border-radius:100px;background:#6C4EE8;font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:700;font-size:15px;line-height:100%;letter-spacing:0;}
.member-container .pricing-best{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:21px;padding:4px 10px;background:#FF4D4F;color:#fff;border-radius:100px;font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:900;font-size:11px;line-height:100%;letter-spacing:0;}
/* 원가(취소선) — 월구독 서브텍스트와 같은 높이 슬롯(16px)으로 금액 시작 위치 일치 */
.member-container .original-price{height:16px;margin:0 0 8px;font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:400;font-size:14px;line-height:16px;letter-spacing:0;text-decoration:line-through;color:#B7B7B7;opacity:1;}
/* 할인율 뱃지(연한 보라) */
.member-container .pricing-card .discount-badge{box-sizing:border-box;width:auto;height:22px;padding:3px 10px;border-radius:100px;background:#F0EAFF;color:#6C4EE8;font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:900;font-size:13px;line-height:100%;letter-spacing:0;}
/* 가격 숫자 */
.member-container .pricing-card .price{font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:900;font-size:27px;line-height:100%;letter-spacing:0;color:#1E1E1E;}
.member-container .pricing-card .price .unit{margin-left:3px;font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:700;font-size:15px;line-height:100%;letter-spacing:0;color:#1E1E1E;}
/* 월구독 서브텍스트 — 원가 슬롯과 동일 높이(16px)로 금액 위치 일치 */
.member-container .pricing-card .subtitle{position:relative;top:-3px;margin:0 0 8px;height:16px;opacity:1;font-family:'Inter','Pretendard','Noto Sans KR',sans-serif;font-weight:500;font-size:12px;line-height:16px;letter-spacing:0;color:#939393;}
/* 가격 줄(취소선 -10 당김 제거로 카드 간 위치 통일) */
.member-container .pricing-card .price-wrapper{margin-top:0;}
/* 월구독 /월 표기 */
.member-container .pricing-card .price .per{font-size:15px;font-weight:700;color:#1E1E1E;margin-left:0;}
/* 신청 버튼 — 하단 고정(margin-top:auto)으로 3카드 버튼 정렬 일치 */
.member-container .pricing-card .btn-apply{box-sizing:border-box;margin-top:auto;display:flex;align-items:center;justify-content:center;width:100%;height:40px;padding:12px 0 10px;border-radius:10px;background:#1E1E1E;color:#fff;font-size:15px;}
.member-container .pricing-card:hover .btn-apply,
.member-container .pricing-card .btn-apply:hover{background:#6C4EE8;}
/* 멀티: 등급뱃지·버튼 hover 는 핑크 */
.member-container.multi .pricing-badge{background:#E8189E;}
.member-container.multi .pricing-card:hover .btn-apply,
.member-container.multi .pricing-card .btn-apply:hover{background:#E8189E;}
/* 보드: 연구독 등급뱃지는 등급별 색 (폰트 13/700) */
.member-container.board .pricing-badge{height:auto;padding:6px 14px;font-size:13px;}
.member-container.board .pricing-badge.badge-smart{background:#6C4EE8;}
.member-container.board .pricing-badge.badge-multi{background:#E8189E;}
.member-container.board .pricing-badge.badge-normal{background:#939393;}
/* 할인 태그: 연한 파랑 배경 + 등급별 글자색 */
.member-container.board .pricing-best{background:#E8F0FF;padding:3px 10px;font-size:12px;}
.member-container.board .pricing-best.pb-smart{color:#6C4EE8;}
.member-container.board .pricing-best.pb-multi{color:#E8189E;}
.member-container.board .pricing-best.pb-normal{color:#575757;}
/* 할인율뱃지·버튼 hover 는 파랑 */
.member-container.board .pricing-card .discount-badge{background:#E7EEFF;color:#2F5BE0;}
.member-container.board .pricing-card .btn-apply:hover{text-decoration:none;}
.member-container.board .pricing-card.card-smart:hover .btn-apply,
.member-container.board .pricing-card.card-smart .btn-apply:hover{background:#6C4EE8;}
.member-container.board .pricing-card.card-multi:hover .btn-apply,
.member-container.board .pricing-card.card-multi .btn-apply:hover{background:#E8189E;}
.member-container.board .pricing-card.card-normal:hover .btn-apply,
.member-container.board .pricing-card.card-normal .btn-apply:hover{background:#939393;}


/* =========================================================
   반응형 — 선택 탭 / 좌측 카드
   ========================================================= */
@media (max-width:1360px){
    /* 좌측 여백이 부족하면 플로팅 카드 숨김(레이아웃 깨짐 방지) */
    .mtier-aside{display:none;}
}
@media (max-width:1080px){
    .mtier-card{width:300px;}
}