/* mob-modal.css -- the <=1023 modal product.js builds: it appends a .rwdc */ /* host to on the product page and copies ul.period_list into it. */ /* .rwdc is that host's namespace; nothing else on 07 carries the class. */ .rwdc{ --c-primary: #159fda; --c-primary-dark: #1f73d6; --c-navy: #1b2a4a; --c-point: #fb5a5a; --c-point-2: #ff8a00; --c-accent: #14b6a4; --c-ink: #222428; --c-text: #3a3d44; --c-sub: #6b7079; --c-mute: #9aa0a8; --c-line: #e6e8ec; --c-line-2: #eef0f3; --c-bg: #ffffff; --c-bg-soft: #f6f7f9; --c-bg-soft-2: #f1f3f6; --c-bg-dark: #2b2f36; --font: "Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; --container: 1260px; --radius: 8px; --radius-lg: 14px; --shadow-sm: 0 1px 3px rgba(20,30,50,.06); --shadow-md: 0 6px 20px rgba(20,30,50,.10); --shadow-lg: 0 14px 40px rgba(20,30,50,.14); } .rwdc{ font-family:var(--font); color:var(--c-text); font-size:14px; line-height:1.5; letter-spacing:-.01em; } .rwdc, .rwdc *{ box-sizing:border-box; } .rwdc img{ display:block; max-width:100%; height:auto; border:0; } .rwdc a{ color:inherit; text-decoration:none; } .rwdc ul, .rwdc ol, .rwdc li{ list-style:none; margin:0; padding:0; } .rwdc li::before, .rwdc li::after{ content:none; } .rwdc button{ font-family:inherit; cursor:pointer; border:0; background:none; } .rwdc h1, .rwdc h2, .rwdc h3, .rwdc h4, .rwdc h5, .rwdc h6, .rwdc p{ margin:0; } .rwdc input{ font-family:inherit; line-height:normal; } .rwdc header, .rwdc footer, .rwdc nav, .rwdc section, .rwdc article, .rwdc aside, .rwdc main{ margin:0; padding:0; border:0; background:none; } .rwdc, .rwdc *{ box-sizing:border-box; } @media (max-width: 1023px){ .rwdc .mob-modal-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 300; display: none; align-items: flex-end; justify-content: center; } .rwdc .mob-modal-overlay.on{ display: flex; } .rwdc .mob-modal-box{ background: #fff; border-radius: 16px 16px 0 0; width: 100%; max-height: 70vh; overflow-y: auto; padding: 0 0 30px; } .rwdc .mob-modal-head{ display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--c-line); font-size: 16px; font-weight: 800; color: var(--c-ink); position: sticky; top: 0; background: #fff; } .rwdc .mob-modal-head button{ font-size: 20px; color: var(--c-mute); } .rwdc .mob-modal-body{ padding: 20px; } .rwdc .mob-modal-body ul{ list-style: none; margin: 0; padding: 0; } .rwdc .mob-modal-body li{ font-size: 14px; color: var(--c-text); line-height: 1.8; padding: 8px 0 8px 16px; position: relative; border-bottom: 1px solid var(--c-line-2); } .rwdc .mob-modal-body li:before{ content: "•"; position: absolute; left: 0; color: var(--c-primary); } .rwdc .mob-modal-body li em{ font-style: normal; font-weight: 700; color: var(--c-ink); } } @media (min-width: 768px) and (max-width: 1023px){ .rwdc .mob-modal-overlay{ align-items: center !important; } .rwdc .mob-modal-box{ max-width: 560px !important; border-radius: 14px !important; max-height: 80vh; } } .rwdc .mob-modal-overlay{ display:none; } /* Left from when .rwdc was the whole desktop chrome. The modal is display:none at >=1024, so re-pointing these two tokens shows nothing -- kept because dropping it moves computed font-family on the host, which the gate reads. */ @media (min-width: 1024px) { .rwdc { --container: 1200px; --font: 'Montserrat','YoonGothicPro740',sans-serif; } }