/* ===== Mobile responsive overrides for bycoding.kr ===== */ /* Hamburger button: hidden on desktop, shown on mobile */ .mnav-toggle { display: none; } /* ===== Footer right column: paired QR (left) + description (right) ===== */ .footer-right .footer-contact-row { display: flex; align-items: flex-start; gap: 18px; margin: 0 18px 22px 18px; padding: 12px 0; } .footer-right .footer-contact-row:last-child { margin-bottom: 0; } .footer-right .footer-qr-block { flex: 0 0 120px; text-align: center; } .footer-right .footer-qr-block img { width: 110px; height: 110px; object-fit: cover; background: #fff; padding: 4px; border-radius: 4px; display: block; margin: 0 auto; } .footer-right .footer-qr-caption { margin-top: 6px; font-size: 12px; color: #cfcfcf; } .footer-right .footer-contact-desc { flex: 1; font-size: 13px; line-height: 1.6; color: #e8e8e8; } .footer-right .footer-contact-title { font-weight: bold; color: #fff; font-size: 15px; margin-bottom: 6px; } /* App-like behavior on mobile: no horizontal scroll, no rubber-band/swipe-back. IMPORTANT: do NOT set overflow-x on on iOS Safari — it disables touch scroll. Only constrain . */ @media (max-width: 768px) { body { overflow-x: hidden; position: relative; width: 100%; overscroll-behavior-x: none; } /* Calendar must fit viewport, no horizontal scroll */ .calendar, .calendar table { max-width: 100% !important; width: 100% !important; } .calendar { overflow-x: hidden; } .calendar td { overflow: hidden; } .calendar td .attend > div, .calendar td .homework > div { font-size: 9px !important; padding: 2px 1px !important; word-break: keep-all; line-height: 1.1; } } /* Drawer + overlay base (always present in DOM, hidden off-screen) */ .mnav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; transition: opacity .25s ease; z-index: 1040; pointer-events: none; } .mnav-overlay.open { opacity: 1; pointer-events: auto; } .mnav-drawer { position: fixed; top: 0; left: 0; width: 280px; max-width: 84vw; height: 100vh; background: #2b2b2b; color: #fff; transform: translateX(-100%); transition: transform .25s ease; z-index: 1050; box-shadow: 2px 0 12px rgba(0,0,0,0.3); display: flex; flex-direction: column; } .mnav-drawer.open { transform: translateX(0); } .mnav-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #3d3d3d; background: #4a4a4a; } .mnav-head img { height: 40px; } .mnav-close { background: none; border: none; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; padding: 4px 10px; } .mnav-links { display: flex; flex-direction: column; padding: 8px 0; overflow-y: auto; } .mnav-links a { display: block; padding: 14px 20px; color: #fff; font-size: 16px; text-decoration: none; border-bottom: 1px solid #3d3d3d; } .mnav-links a:hover, .mnav-links a:active { background: #3d3d3d; color: #ff9b88; } .mnav-links a.mnav-cta { background: #ff5b5b; color: #fff; font-weight: bold; border-bottom: 1px solid #ff5b5b; } .mnav-links a.mnav-cta:hover { background: #ff4040; color: #fff; } .mnav-links a.mnav-parent { color: #fff; font-weight: 600; } .mnav-links a.mnav-sub { padding-left: 40px; font-size: 14px; background: #242424; color: #ddd; } .mnav-links a.mnav-sub:hover { background: #1a1a1a; color: #fff; } .mnav-links a.mnav-sub.active { background: #ff5b5b; color: #fff; font-weight: 600; } .mnav-links a.active { color: #fff; font-weight: 600; } @media (max-width: 768px) { /* Top nav */ #tnb ul { padding-left: 0; } #tnb ul li { font-size: 12px !important; padding: 4px 6px !important; } /* Main nav: hide inline links + mypage button, show hamburger */ .main-nav .container { position: relative; height: 66px; } .main-nav .nav-logo { float: left !important; } .main-nav .nav-logo img { height: 50px !important; margin-top: 8px; } .main-nav .nav-spacer, .main-nav .nav-link-item, .main-nav .nav-mypage { display: none !important; } .mnav-toggle { display: flex; flex-direction: column; justify-content: center; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; padding: 10px 8px; background: transparent; border: 1px solid rgba(255,255,255,0.3); border-radius: 6px; cursor: pointer; gap: 5px; z-index: 1030; } .mnav-toggle span { display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px; } /* Carousel images */ .carousel-item img { height: auto !important; max-height: 280px; object-fit: cover; } /* Banners with fixed height */ div[style*="height:160px"] { height: auto !important; padding: 12px 0 !important; } div[style*="height:160px"] img { max-width: 100%; height: auto !important; } /* Force inline pixel widths to 100% on mobile */ [style*="width:500px"], [style*="width:550px"], [style*="width:600px"], [style*="width:800px"], [style*="width:900px"], [style*="width:1000px"], [style*="width:1200px"], [style*="width:1380px"], [style*="width:1450px"], [style*="width:1600px"] { width: 100% !important; max-width: 100% !important; } img[style*="width:160px"]:not(.keep) { width: 90px !important; } img[style*="height:120px"] { height: auto !important; max-height: 90px; } img[style*="width:120px"] { width: 80px !important; } /* Mypage sidebar: hidden on mobile (replaced by hamburger drawer sub-menu) */ .mp-sidebar { display: none !important; } .mp-main { float: none !important; margin-left: 0 !important; width: 100% !important; } /* Class history: hide table view, show card view */ .mp-class-table-view { display: none !important; } .mp-class-card-view { display: block !important; } /* Stack remaining floats */ div[style*="float:left"][style*="width:160px"], div[style*="float:left"][style*="margin-left:200px"] { float: none !important; width: 100% !important; margin-left: 0 !important; } div[style*="float:left;margin-left:50px"] { float: none !important; margin-left: 0 !important; width: 100% !important; } /* Tables: horizontal scroll */ .tbl_wrap, .mp-tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .mp-tbl-scroll table { min-width: 540px; } .mp-tbl-scroll table td > div[style*="width:350px"], .mp-tbl-scroll table td > div[style*="width:150px"] { width: auto !important; } .mp-tbl-scroll table td a[style*="width:100px"] { width: auto !important; padding: 6px 10px !important; display: inline-block !important; } /* Calendar */ .calendar table { table-layout: fixed; min-width: 0 !important; } .calendar td { height: 44px !important; padding: 4px 2px !important; font-size: 12px; word-break: break-word; } .calendar thead th { padding: 6px 0 !important; font-size: 13px; height: auto; } .calendar td > div[style*="width:80px"][style*="min-height:100px"] { width: 100% !important; min-height: 0 !important; } .calendar td div[style*="display:inline-block"][style*="width:30px"], .calendar td div[style*="display:inline-block"][style*="width:20px"] { display: block !important; width: auto !important; font-size: 12px; } .calendar div[style*="font-size:40px"] { font-size: 24px !important; } /* Homework / overlay frames */ #homework_frame > div[style*="width:1380px"], #homework_frame #yyy { padding: 12px !important; } #homework_frame #hwview { width: 100% !important; height: auto !important; max-height: 70vh; margin: 8px 0 !important; } #loaddata #lll { width: 80vw !important; max-width: 280px; } /* Exam page side-by-side → stack */ #examview_frame #xxx, #examresult_frame > #yyy { position: static !important; flex-direction: column; padding: 12px !important; gap: 12px; } #examview_frame #examview, #examresult_frame #examresultview, #examview_frame #answer, #examresult_frame #answerresult { width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; height: auto !important; } /* Login/register card */ div[style*="width:420px"][style*="background:#fff"], div[style*="width:440px"][style*="background:#fff"] { width: 100% !important; padding: 24px !important; } /* Wechat/kakao 45% blocks → stack */ div[style*="width:45%"] { width: 100% !important; margin-left: 0 !important; margin-bottom: 12px !important; } /* Container padding */ .container { padding-left: 12px; padding-right: 12px; } .py-5 { padding-top: 24px !important; padding-bottom: 24px !important; } /* Heading size caps */ div[style*="font-size:50px"] { font-size: 28px !important; line-height: 1.2 !important; } div[style*="font-size:45px"] { font-size: 26px !important; line-height: 1.2 !important; } div[style*="font-size:40px"] { font-size: 24px !important; line-height: 1.2 !important; } div[style*="font-size:32px"] { font-size: 22px !important; line-height: 1.3 !important; } div[style*="font-size:30px"] { font-size: 20px !important; line-height: 1.3 !important; } div[style*="font-size:28px"] { font-size: 19px !important; line-height: 1.35 !important; } div[style*="font-size:27px"] { font-size: 18px !important; } div[style*="font-size:25px"] { font-size: 18px !important; } div[style*="font-size:22px"] { font-size: 17px !important; } /* Letter spacing */ [style*="letter-spacing: -5px"], [style*="letter-spacing:-5px"] { letter-spacing: -1px !important; } [style*="letter-spacing: -2px"] { letter-spacing: 0 !important; } /* Min-height blocks */ div[style*="min-height:1300px"] { min-height: 0 !important; } div[style*="min-height:1600px"] { min-height: 0 !important; } /* ===== Footer cleanup ===== */ footer.py-5 { padding: 24px 0 !important; } .footer .row > div { width: 100% !important; max-width: 100% !important; } .footer .col-lg-6 + .col-lg-6 { border-left: none !important; margin-top: 24px !important; padding: 16px 0 0 !important; border-top: 1px dotted #5e5e5e; } .footer img[src*="beyondcoding_logo"] { height: auto !important; max-width: 60% !important; max-height: 100px; margin-bottom: 12px !important; } .footer ul { padding-left: 0; list-style: none; margin: 0; } .footer ul li { font-size: 13px; line-height: 1.55; padding: 4px 0; word-break: keep-all; overflow-wrap: anywhere; } .footer .ks2, .footer .ks4, .footer .f12, .footer .f14 { font-size: 13px !important; line-height: 1.55 !important; } /* Right column: QR (left) + description (right) with margins, mobile sizing */ .footer-right .footer-contact-row { gap: 12px !important; margin: 0 14px 18px 14px !important; padding: 10px 0 !important; } .footer-right .footer-qr-block { flex: 0 0 95px !important; } .footer-right .footer-qr-block img { width: 90px !important; height: 90px !important; } .footer-right .footer-qr-caption { font-size: 11px !important; } .footer-right .footer-contact-desc { font-size: 12px !important; line-height: 1.55 !important; word-break: keep-all; overflow-wrap: anywhere; } .footer-right .footer-contact-title { font-size: 13px !important; margin-bottom: 4px !important; } /* Bottom copyright bar */ .bg-gray .en1 { font-size: 12px !important; padding: 14px 8px !important; line-height: 1.5; } .bg-gray div[style*="font-size:30px"] { font-size: 16px !important; height: auto !important; padding: 14px !important; } } /* ===== Class history card view (desktop hides; mobile @media shows) ===== */ .mp-class-card-view { display: none; } .mp-class-cards { display: flex; flex-direction: column; gap: 12px; } .mp-class-card { display: flex; align-items: stretch; gap: 14px; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); cursor: pointer; -webkit-tap-highlight-color: transparent; } .mp-class-card:active { background: #fafafa; } .mp-class-att { flex: 0 0 110px; background: #2b2b2b; color: #fff; border-radius: 10px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .mp-class-att-label { font-size: 12px; opacity: 0.85; align-self: flex-start; } .mp-class-att-num { display: flex; align-items: baseline; justify-content: center; margin: 8px 0 6px; } .mp-class-att-num .pre { font-size: 13px; margin-right: 2px; } .mp-class-att-num .big { font-size: 30px; font-weight: 700; line-height: 1; } .mp-class-att-num .suf { font-size: 13px; margin-left: 2px; } .mp-class-att-rule { width: 60%; height: 1px; background: rgba(255,255,255,0.35); margin: 0 0 6px; } .mp-class-att-tot { font-size: 12px; opacity: 0.85; } .mp-class-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; } .mp-class-title { color: #6c63ff; font-weight: 700; font-size: 15px; word-break: break-all; } .mp-class-line { color: #555; font-size: 13px; } .mp-class-status { display: inline-block; align-self: flex-start; margin-top: 6px; padding: 4px 10px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 600; } .mp-class-chev { flex: 0 0 auto; align-self: center; padding: 0 6px; font-size: 26px; color: #bbb; line-height: 1; } .mp-class-empty { text-align: center; padding: 40px 16px; color: #999; background: #fff; border-radius: 14px; } /* ===== Mobile exam result viewer (.mev) ===== */ .mev { position: fixed; inset: 0; background: #f4f4f6; z-index: 2000; display: flex; flex-direction: column; } html.mev-lock, body.mev-lock { overflow: hidden !important; height: 100% !important; position: fixed !important; width: 100% !important; overscroll-behavior: none !important; } .mev-header { flex: 0 0 auto; height: 52px; background: #2b2b2b; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; } .mev-counter { font-size: 15px; font-weight: 600; } .mev-close { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; border: none; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; } .mev-close:active { background: rgba(255,255,255,0.25); } .mev-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mev-question { background: #fff; padding: 14px; border-bottom: 1px solid #e6e6e6; } .mev-question img { max-width: 100%; height: auto; display: block; margin: 0 auto 8px; } .mev-divider { background: #2b2b2b; color: #fff; padding: 8px 12px; text-align: center; } .mev-divider-label { font-size: 13px; font-weight: 600; } .mev-arrow { position: fixed; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.35); color: #fff; border: none; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2010; opacity: 0.55; transition: opacity 0.15s ease, background 0.15s ease; -webkit-tap-highlight-color: transparent; } .mev-arrow:hover { opacity: 0.95; } .mev-arrow:active { opacity: 1; background: rgba(0,0,0,0.6); } .mev-arrow-prev { left: 10px; } .mev-arrow-next { right: 10px; } .mev-answer { background: #fff; padding: 14px; color: #222; font-size: 14px; line-height: 1.6; } .mev-answer img { max-width: 100%; height: auto; display: block; margin: 8px auto; } .mev-mcq { font-size: 16px; padding: 8px 4px; } .mev-mcq strong { color: #c92a2a; } .mev-section-label { font-size: 12px; font-weight: 700; color: #555; margin: 6px 0 4px; text-transform: uppercase; letter-spacing: 0.3px; } .mev-frq-text { background: #1e1e1e; color: #e6e6e6; padding: 10px 12px; border-radius: 8px; font-family: Menlo, Consolas, monospace; font-size: 12px; white-space: pre-wrap; word-break: break-word; margin: 0 0 10px; } .mev-exp { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #ddd; }