/* RNDBOX 회사/서비스 소개, 이용방법, 팝업스토어, 약관 보조 스타일 */

/* ===== 서비스 소개 ===== */
.container .wrapper .btn_wrapper a.btn { text-decoration: none; color: #232323; }
.container .wrapper .btn_wrapper a.btn.black, .container .wrapper .btn_wrapper a.btn:hover { color: #fff; }
.container .wrapper .img_wrapper .link_img img { height: 4.6rem; }
.container2 .wrapper2 { text-align: center; white-space: normal; padding: 0 2rem; }
.container2 .wrapper2 .text3 { font-size: 1.8rem; line-height: 3rem; }
.container2 .wrapper3 { max-width: 110rem; white-space: normal; }
.container2 .wrapper3 .img_box .img_title { font-size: 2rem; color: #fff; }
.container2 .wrapper3 .img_box svg { width: 100%; max-width: 24rem; height: auto; }
.container2 .wrapper3 .img_box .img_desc { margin-top: 1.6rem; font-size: 1.5rem; line-height: 2.5rem; color: #BDBDBD; text-align: center; }
.rb_intro { width: 100%; padding: 10rem 2rem; display: flex; flex-direction: column; align-items: center; white-space: normal; background: #fff; }
.rb_intro_alt { background: #F7F5FB; }
.rb_intro_inner { width: 100%; max-width: 110rem; }
.rb_intro_eyebrow { color: #8A3DDC; font-size: 1.5rem; letter-spacing: .2rem; text-align: center; }
.rb_intro_title { font-size: 3.4rem; text-align: center; margin-top: 1rem; line-height: 1.3; }
.rb_intro_desc { color: #646464; font-size: 1.7rem; line-height: 2.8rem; text-align: center; margin-top: 1.6rem; }
.rb_box_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 4rem; }
.rb_box_card { background: #fff; border: 1px solid #ECE8F5; border-radius: 1.6rem; padding: 2.4rem 2rem; text-align: center; box-shadow: 0 4px 16px rgba(90, 50, 160, .06); }
.rb_box_swatch { width: 6rem; height: 6rem; border-radius: 1.4rem; margin: 0 auto 1.4rem; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2.2rem; }
.rb_box_tier { font-size: 2rem; }
.rb_box_price { color: #646464; font-size: 1.5rem; margin-top: .4rem; }
.rb_box_min { margin-top: 1.2rem; font-size: 1.4rem; color: #8A3DDC; }
.rb_grade_table { width: 100%; border-collapse: collapse; margin-top: 4rem; font-size: 1.5rem; background: #fff; }
.rb_grade_table th, .rb_grade_table td { padding: 1.4rem 1rem; border-bottom: 1px solid #ECECEC; text-align: center; }
.rb_grade_table th { color: #646464; font-weight: 500; background: #FAFAFA; }
.rb_grade_table td.desc { text-align: left; color: #646464; }
.rb_grade_badge { display: inline-flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; color: #fff; font-weight: 700; }
.rb_grade_x { background: #F5B700; color: #232323; }
.rb_grade_a { background: #C84DFF; }
.rb_grade_b { background: #FF3B2A; }
.rb_grade_c { background: #25C1FF; }
.rb_grade_d { background: #22D45C; }
.rb_grade_e { background: #8B8B8B; }
.rb_grade_note { margin-top: 1.6rem; font-size: 1.3rem; color: #969696; text-align: center; }
.rb_stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 4rem; }
.rb_stat { background: #1C1C1C; color: #fff; border-radius: 1.6rem; padding: 3rem 2rem; text-align: center; }
.rb_stat_value { font-size: 3.2rem; }
.rb_stat_label { color: #BDBDBD; font-size: 1.4rem; margin-top: .8rem; }
.rb_app { display: flex; gap: 6rem; align-items: center; justify-content: center; margin-top: 4rem; flex-wrap: wrap; }
.rb_app_phone { width: 22rem; }
.rb_app_phone svg { width: 100%; height: auto; }
.rb_app_copy { max-width: 42rem; }
.rb_app_copy .rb_app_title { font-size: 2.6rem; }
.rb_app_copy .rb_app_desc { color: #646464; font-size: 1.5rem; line-height: 2.5rem; margin-top: 1.2rem; }
.rb_app_links { display: flex; gap: 1.4rem; margin-top: 2.4rem; flex-wrap: wrap; }
.rb_app_links img { height: 4.6rem; cursor: pointer; }
.container3 .copyright { white-space: normal; }
@media screen and (max-width: 768px) {
    .rb_intro { padding: 6rem 1.6rem; }
    .rb_intro_title { font-size: 2.4rem; }
    .rb_intro_desc { font-size: 1.4rem; line-height: 2.3rem; }
    .rb_box_grid, .rb_stats { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
    .rb_box_card { padding: 1.8rem 1.2rem; }
    .rb_box_tier { font-size: 1.7rem; }
    .rb_stat_value { font-size: 2.4rem; }
    .rb_grade_table { font-size: 1.2rem; }
    .rb_grade_table th, .rb_grade_table td { padding: 1rem .4rem; }
    .rb_grade_badge { width: 2.8rem; height: 2.8rem; }
    .rb_app { gap: 3rem; }
    .rb_app_phone { width: 16rem; }
}

/* ===== 이용방법 안내 ===== */
.tut_guide { margin: 6rem auto 0; padding: 0 1.6rem; }
.desktop_tutorial .tut_guide { margin-top: 10rem; padding: 0; }
.tut_guide_head { text-align: center; }
.tut_guide_title { font-size: 3.2rem; }
.tut_guide_sub { color: #646464; font-size: 1.6rem; margin-top: 1rem; }
.tut_guide_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem 2rem; margin-top: 4rem; }
.tut_guide_mobile .tut_guide_title { font-size: 2.4rem; }
.tut_guide_mobile .tut_guide_sub { font-size: 1.3rem; }
.tut_guide_mobile .tut_guide_grid { grid-template-columns: 1fr; gap: 2rem; margin-top: 3rem; }
.tut_step { position: relative; background: #fff; border: 1px solid #ECE8F5; border-radius: 1.6rem; padding: 2.8rem 2.4rem 2.4rem; box-shadow: 0 4px 16px rgba(90, 50, 160, .06); }
.tut_step_num { position: absolute; top: -1.4rem; left: 2.4rem; background: #813DFF; color: #fff; border-radius: 999px; padding: .5rem 1.4rem; font-size: 1.3rem; }
.tut_step_icon { width: 7rem; height: 7rem; margin-bottom: 1.4rem; }
.tut_step_icon svg { width: 100%; height: 100%; }
.tut_step_title { font-size: 1.9rem; }
.tut_step_desc { color: #646464; font-size: 1.4rem; line-height: 2.2rem; margin-top: .8rem; }
.tut_step_desc b { color: #8A3DDC; font-weight: 600; }
.tut_guide_notice { margin-top: 3rem; text-align: center; color: #969696; font-size: 1.3rem; line-height: 2rem; }
.tut_guide_notice a { color: #8A3DDC; }

/* ===== 팝업스토어 ===== */
.pus_video_frame { width: 100%; aspect-ratio: 16 / 9; border-radius: 1rem; margin-top: 2rem; background: radial-gradient(ellipse at 30% 20%, #4b2a8a, #1C1C1C 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; gap: 1.6rem; }
.pus_video_play { width: 8rem; height: 8rem; border-radius: 50%; background: rgba(255, 255, 255, .15); border: 2px solid #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s ease; }
.pus_video_play:hover { transform: scale(1.06); }
.pus_video_play svg { width: 3rem; height: 3rem; margin-left: .4rem; }
.pus_video_caption { font-size: 1.6rem; color: #DCDCDC; }
#imageModal #modalImage { border-radius: 1rem; }
@media (max-width: 1079px) {
    .pus_video_frame { margin-top: 1rem; }
    .pus_video_play { width: 5.6rem; height: 5.6rem; }
    .pus_video_caption { font-size: 1.2rem; }
}

/* ===== 이용약관 / 개인정보처리방침 ===== */
.terms_page { width: 90rem; max-width: 92%; margin: 0 auto 6rem; font-size: 1.4rem; line-height: 2.4rem; color: #232323; word-break: keep-all; }
.terms_page .terms_title { font-size: 2.4rem; text-align: center; margin: 10rem 0 1.2rem; }
.terms_page .terms_meta { text-align: center; color: #969696; font-size: 1.3rem; margin-bottom: 4rem; }
.terms_page .terms_toc { background: #FAFAFA; border: 1px solid #EBEBEB; border-radius: 1rem; padding: 2rem 2.4rem; margin-bottom: 4rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem 2rem; font-size: 1.3rem; }
.terms_page .terms_toc a { color: #646464; text-decoration: none; }
.terms_page .terms_toc a:hover { color: #8A3DDC; }
.terms_page h2 { font-size: 1.7rem; margin: 3.6rem 0 1rem; padding-top: 1rem; scroll-margin-top: 8rem; }
.terms_page p { margin: 0 0 1rem; }
.terms_page ol, .terms_page ul { margin: 0 0 1rem; padding-left: 2.2rem; }
.terms_page li { margin-bottom: .4rem; }
.terms_page table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.6rem; font-size: 1.3rem; }
.terms_page th, .terms_page td { border: 1px solid #E5E5E5; padding: .8rem 1rem; text-align: left; vertical-align: top; }
.terms_page th { background: #FAFAFA; font-weight: 600; }
.terms_page .terms_supplement { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid #EBEBEB; color: #646464; }
.terms_page .terms_links { margin-top: 3rem; text-align: center; font-size: 1.3rem; }
.terms_page .terms_links a { color: #8A3DDC; margin: 0 1rem; }
@media screen and (max-width: 768px) {
    .terms_page .terms_title { margin-top: 5rem; }
    .terms_page .terms_toc { grid-template-columns: 1fr; }
    .terms_page { font-size: 1.3rem; line-height: 2.2rem; }
}

/* ===== 서비스 소개: 포팅 CSS 가 참조하는 SUIT-* 웹폰트 미탑재 → Pretendard 가변 폰트로 대체 ===== */
.container .company, .container .wrapper .title, .container .wrapper .subtitle, .container .wrapper .explain, .container .wrapper .btn_wrapper .btn,
.container2 .wrapper2 .text1, .container2 .wrapper2 .text2, .container2 .wrapper2 .text3, .container2 .wrapper3 .img_box .img_title, .container3 .copyright {
    font-family: "Pretendard Variable", "Pretendard", "Segoe UI", sans-serif;
}
.container .wrapper .title { font-weight: 800; }
.container .wrapper .subtitle, .container2 .wrapper2 .text2 { font-weight: 700; }
.container .company, .container .wrapper .explain, .container .wrapper .btn_wrapper .btn, .container2 .wrapper2 .text1 { font-weight: 500; }

/* ===== 이용방법(오픈 연출): 포팅 CSS 의 상대경로 url(../img/...) → /css/img/... 404 를 막기 위해 이 영역 전용 SVG 로 교체 ===== */
.card[data-grade="a"] .card__light-shaft, .box-stage[data-grade="a"] .box-stage__light-shaft,
.card[data-grade="b"] .card__light-shaft, .box-stage[data-grade="b"] .box-stage__light-shaft,
.card[data-grade="x"] .card__light-shaft, .box-stage[data-grade="x"] .box-stage__light-shaft {
    background-image: url("/img/company/opening_light_shaft.svg") !important;
}

/* ===== 팝업스토어: 제목 장식 아이콘 ===== */
.pus_title::after, .pus_title::before { background-image: url("/img/company/popup_twinkle.svg") !important; }