/*
Theme Name: VNS Academy
Description: Tieng Viet via VNS
Version: 1.0.0
Author: Jinho
Author URI: http://creatives.kr
Theme URI: http://creatives.kr
*/


/*
Information for my brain.

	1. Common

	2. Header

	3. Footer

	4. Page

	5. 404	

	.htaccess ADD!! Image Protect
	RewriteRule .*\.(jpe?g|gif|bmp|png|jpg)$ /images/yourgraphic.jpg [L]
*/



/* 1. Common */

	html, body {width: 100%; height: 100%; min-height: 100%; background: #F5F5F5; color: #313131; scroll-behavior: smooth;}
	* {margin: 0; padding: 0;}

	h1 { font-size: 2.5em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; } h4 { font-size: 1.25em; } h5 { font-size: 1em; } h6 { font-size: 0.875em; }
	h1, h2, h3, h4, h5 {font-weight: 100;}

	a, a:hover, a:visited {color: #313131 !important; text-decoration: none;}
	
	b {font-weight: 800;}
	small {font-size: 0.65em;}

	hr {border: none; height: 1px; background: #313131; margin: 0; width: 100% !important;}
	.center {text-align: center; !important} .left {text-align: left;}

	br.mobile {display: none;}

	.clear {clear: both;}
	div.wrapper {max-width: 1400px; margin: 0 auto; position: relative;}

	a.cta {display: inline-flex; align-items: center; justify-content: center; gap: 30px; min-width: 180px; padding: 22px 32px; border-radius: 60px; background: #5b4bff; color: #ffffff !important; font-size: 1.1em; font-weight: 700; text-decoration: none; line-height: 1; transition: all 0.25s ease;}
	a.cta::after {content: "↗"; font-size: 1.5em; font-weight: 400; line-height: 1;}

/* 2. Header */
	header {text-align: center; display: table; padding: 100px 0;}

/* 3. Footer */
	footer {height: auto; padding: 50px 0; color: #313131;}
	footer hr {margin: 20px 0 ; background: #dedede; letter-spacing: -2px;}
	footer p {font-weight: 100;}
	footer div.list ul {margin: 0 auto; padding: 0;}
	footer div.list ul li {list-style: none; margin: 15px 0}

/* 4. Page */

	section {width: 100%; height: auto; margin: 0;}
	section:not(#home) {padding: 100px 0; height: auto; overflow: hidden;}
	section p {margin: 20px 0}

	/* 4-1. Column 1/2 */
		div.col2 {width: calc(100% * 1/2 - 20px); float:left; margin:0 10px; background: #ffffff; border-radius: 10px; overflow: hidden;}

	/* 4-2. Column 1/3 */
		div.col3 {width: calc(100% * 1/3 - 20px); float:left; margin:15px 10px; background: #ffffff; border-radius: 10px; overflow: hidden;}

	/* 4-3. Column 1/4 */
		div.col4 {width: calc(100% * 1/4 - 80px); float:left; margin:0 10px; background: #ffffff; border-radius: 10px; overflow: hidden;}

	/* 4-4. Column 2/3 */
		div.col3-2 {width: calc(100% * 2/3 - 20px); float:left; margin:0 10px; background: #ffffff; border-radius: 10px; overflow: hidden;}
/*

Menu

1. title
2. intro
3. teacher
4. course
5. tuition
6. review
7. map (road)

*/
	nav {width: auto; height: auto; padding: 20px 0 20px 50px; position: absolute; top: 20px;}
	.archive nav, .single nav {display: none;}


	section[id^="home"] {height: 100% !important; padding: 0;box-sizing: border-box !important; background-size: cover; background-position: center top; background-repeat: no-repeat;}
	section[id^="home"] div.wrapper {height: 100%;}
	section[id^="home"] div.text {position: absolute; white-space: nowrap; font-size: 3em; font-family: 'Noto Serif KR', serif; margin: 0; padding: 0;}
	section[id^="home"] div.vt  {top: 18vh; left: 0;}
	section[id^="home"] div.ko  {top: 31vh; left: 15%;}
	section[id^="home"] div.en  {top: 44vh; left: 10%;}
	section[id^="home"] div.sub {top: 65vh; left: 0;}

	section[id^="home"].home-bg-01 {background-image: url("./images/bg/1.jpg"); color: #ffffff;}
	section[id^="home"].home-bg-02 {background-image: url("./images/bg/2.jpg"); color: #ffffff;}
	section[id^="home"].home-bg-03 {background-image: url("./images/bg/3.jpg");}
	section[id^="home"].home-bg-04 {background-image: url("./images/bg/4.jpg");}
	section[id^="home"].home-bg-05 {background-image: url("./images/bg/5.jpg"); color: #ffffff;}
	section[id^="home"].home-bg-06 {background-image: url("./images/bg/6.jpg"); color: #ffffff;}
/*	section[id^="home"].home-bg-07 {background-image: url("./images/bg/7.jpg"); color: #ffffff;} */
	section[id^="home"].home-bg-07 {background-image: url("./images/bg/8.jpg"); color: #ffffff;}

	section[id^="intro"] div.col4 {padding: 30px; height: 250px;}


	section[id^="teacher"] {background: linear-gradient(90deg, #c58bd2, #8f91f5, #68c7ee); font-family: 'Noto Sans KR', sans-serif; font-size: 1em;}
section[id^="teacher"] div.profile {height:280px;}
section[id^="teacher"] div.info {width:calc(100% - 60px);height:auto;padding:25px 30px 30px;}
section[id^="teacher"] div.info h3 {font-size:1.35em;}
section[id^="teacher"] div.info h5 {font-size:.95em;}
section[id^="teacher"] div.info h3, section[id^="teacher"] div.info h5 {display:inline-block; vertical-align:baseline; white-space:nowrap; margin:0;}


section[id^="teacher"] div.info p {margin:16px 0 0;display:flex;flex-direction:column;gap:4px;}
section[id^="teacher"] div.info p span {display:grid;grid-template-columns:22px 1fr;column-gap:10px;align-items:center;margin:0;padding:0;line-height:1.5;}
section[id^="teacher"] div.info p span i {width:22px;margin:0;text-align:center;}


section[id^="teacher"] .teacher-prev, section[id^="teacher"] .teacher-next {display:none;}


	section[id^="teacher"] div.linh {background: url('./images/linh.png'); background-size: 100% auto; background-position: center 60%; background-repeat: no-repeat;}
	section[id^="teacher"] div.thuy {background: url('./images/thuy.png'); background-size: 100% auto; background-position: center top; background-repeat: no-repeat;}


	/* Course */
	section[id^="course"] {background: #f5f5f5; font-family: 'Noto Sans KR', sans-serif;}
	section[id^="course"] .course-intro {margin-bottom: 60px;}
	section[id^="course"] .course-intro h1 {font-size: 2.5em; line-height: 1.3; margin: 0;}
	section[id^="course"] .course-intro p {margin-top: 20px; line-height: 1.7;}

	/* Course Main */
	section[id^="course"] .course-main {display: flex; gap: 20px;}
	section[id^="course"] .course-box {flex: 1; min-width: 0; background: #ffffff; border-radius: 10px; padding: 40px; box-sizing: border-box; text-align: center;}
	section[id^="course"] .course-box h3 {margin: 0; font-size: 1.25em; font-weight: 400; color: #5b4bff;}
	section[id^="course"] .course-box h4 {margin: 8px 0 20px; font-size: 1.3em; font-weight: 600;}
	section[id^="course"] .course-box hr {width: 70% !important; margin: 0 auto 20px; background: #5b4bff;}
	section[id^="course"] .course-box strong {display: block; margin-bottom: 20px; color: #5b4bff; font-size: 1.05em;}
	section[id^="course"] .course-box p {margin: 0; font-size: .9em; line-height: 1.7; text-align: left;}
	section[id^="course"] .course-box ul {margin: 25px 0 0; padding: 0; list-style: none; text-align: left;}
	section[id^="course"] .course-box li {margin: 15px 0;}
	section[id^="course"] .course-box li:before {content: "●"; margin-right: 10px; color: #5b4bff;}

	/* Level Courses */
	section[id^="course"] .course-level {width: 100%; margin-top: 120px;}
	section[id^="course"] .course-heading {width: 100%; margin-bottom: 45px; text-align: center;}
	section[id^="course"] .course-heading small {display: block; color: #5b4bff; font-size: .8em; font-weight: 600; letter-spacing: 3px;}
	section[id^="course"] .course-heading h2 {margin: 8px 0; font-size: 2em;}
	section[id^="course"] .course-heading p {margin: 0; line-height: 1.6;}

	section[id^="course"] .course-level-grid {display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; width: 100%;}
	section[id^="course"] .course-level-box {width: auto !important; height: auto !important; min-height: 390px; padding: 35px 30px; box-sizing: border-box; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 10px; text-align: center; overflow: visible;}
	section[id^="course"] .course-level-box h3 {margin: 0; font-size: 2em; font-weight: 600; color: #5b4bff;}
	section[id^="course"] .course-level-box h5 {margin: 5px 0 20px; color: #5b4bff; font-weight: 400;}
	section[id^="course"] .course-level-box hr {margin: 0 0 50px; background: #dedede;}
	section[id^="course"] .course-level-box strong {display: block; font-size: .9em; line-height: 1.8; text-align: left;}
	section[id^="course"] .course-level-box p {margin-top: 25px; font-size: .9em; line-height: 1.7; text-align: left;}

	/* Special Courses */
	section[id^="course"] .course-special {width: 100%; margin-top: 120px;}
	section[id^="course"] .course-special-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: 100%;}
	section[id^="course"] .course-special-box {background: #ffffff; border-radius: 10px; overflow: hidden;}
	section[id^="course"] .special-image {width: 100%; height: 180px; background-position: center; background-size: cover; background-repeat: no-repeat;}
	section[id^="course"] .special-image.test {background-image: url('./images/course/test.jpg');}
	section[id^="course"] .special-image.culture {background-image: url('./images/course/culture.jpg');}
	section[id^="course"] .special-image.tour {background-image: url('./images/course/tour.jpg');}
	section[id^="course"] .special-info {padding: 25px 30px;}
	section[id^="course"] .special-info h3 {margin: 0; font-size: 1.1em; font-weight: 600;}
	section[id^="course"] .special-info h5 {margin: 8px 0 20px; font-weight: 400;}
	section[id^="course"] .special-info p {margin: 0; font-size: .9em; line-height: 1.7;}
	section[id^="course"] .course-note {margin-top: 50px; text-align: center; font-size: .85em; color: #666666;}

	/* Tuition */
	section[id^="tuition"] {background: #ffffff; font-family: 'Noto Sans KR', sans-serif;}
	section[id^="tuition"] .tuition-intro {margin-bottom: 60px;}

	section[id^="tuition"] .tuition-intro h1 {font-size: 2.5em; margin: 0;}
	section[id^="tuition"] .tuition-intro p {margin-top: 20px; line-height: 1.7;}

	section[id^="tuition"] .tuition-grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; width: 100%;}
	section[id^="tuition"] .tuition-box {width: auto; background: #f5f5f5; border-radius: 10px; padding: 35px 30px; box-sizing: border-box; text-align: center;}
	section[id^="tuition"] .tuition-icon {width: 70px; height: 70px; margin: 0 auto 25px; border-radius: 50%; background: #eeeaff; color: #5b4bff; display: flex; align-items: center; justify-content: center; font-size: 2em;}
	section[id^="tuition"] .tuition-box h3 {margin: 0; color: #5b4bff; font-size: 1.15em; font-weight: 600;}
	section[id^="tuition"] .tuition-box h4 {margin: 8px 0 20px; font-size: 1.25em; font-weight: 600;}
	section[id^="tuition"] .tuition-box hr {width: 40px !important; height: 2px; margin: 0 auto 25px; background: #5b4bff;}
	section[id^="tuition"] .tuition-box p {margin: 0; line-height: 1.7; font-size: .9em;}
	section[id^="tuition"] .tuition-label {display: inline-block; margin-top: 25px; padding: 8px 15px; border-radius: 8px; background: #f0eeff; color: #3f32a5; font-size: .85em;}

	section[id^="tuition"] .tuition-notice {display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 20px; padding: 18px 25px; border-radius: 10px; background: #eeeaff; box-sizing: border-box;}
	section[id^="tuition"] .tuition-notice span {color: #5b4bff; font-size: 1.4em;}
	section[id^="tuition"] .tuition-notice p {margin: 0;}

	section[id^="tuition"] .promotion {margin-top: 60px; padding: 35px 40px; background: #f5f5f5; border-radius: 10px; box-sizing: border-box;}
	section[id^="tuition"] .promotion-title {text-align: center; margin-bottom: 35px;}
	section[id^="tuition"] .promotion-title h2 {margin: 0; font-size: 1.8em;}
	section[id^="tuition"] .promotion-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px;}
	section[id^="tuition"] .promotion-item {display: flex; align-items: center; justify-content: center; gap: 25px;}
	section[id^="tuition"] .promotion-icon {width: 80px; height: 80px; flex-shrink: 0; border-radius: 50%; background: #eeeaff; color: #5b4bff; display: flex; align-items: center; justify-content: center; font-size: 2em;}
	section[id^="tuition"] .promotion-item h3 {margin: 0 0 10px; color: #5b4bff; font-size: 1.2em;}
	section[id^="tuition"] .promotion-item p {margin: 0; line-height: 1.7; font-size: .9em;}

	section[id^="tuition"] .tuition-bottom {margin-top: 35px; text-align: center;}
	section[id^="tuition"] .tuition-bottom p {margin: 0; font-weight: 600;}


	section#review { background: #333333;}


	section#map {width: 100%;height: 500px;}
	section#map .leaflet-tile-pane {filter: grayscale(80%); z-index: -1;}
	section#map .info {position: absolute; left: 0; width: auto; height: auto; margin: 100px 0; padding: 30px; background: #ffffff; z-index: 9999; font-size: 1.25em; border-radius: 10px;}
	section#map .info h3 {font-weight: 600;}
	section#map .info .cta {text-align: center;}
	section#map .info p {display: flex;	align-items: center; gap: 10px;}
	section#map .info p svg {width: 28px; height: 28px;	flex: 0 0 28px;	display: block;}

	section#notice div.notice_wrapper {max-width: 900px; margin: 0 auto; position: relative;}
	section#notice .notice_title {width: 100%; height: auto; background: #5b4bff; color: #fff;}
	section#notice .number, .title, .date {float: left; text-align: center; padding: 10px 0; font-size: 1em; font-weight: 600;}
	section#notice .number {width: calc(100% * 2/10);}
	section#notice .date {width: calc(100% * 2/10);}
	section#notice .title {width: calc(100% * 6/10);}
	section#notice .notice_post {text-align: center !important;}
		
	section#notice .blank {height: 20px;}
	section#notice .accordion-header {cursor: pointer; border-bottom: 1px solid #5b4bff}

	section#notice .accordion-body {color: #3f3c3c; display: none; background: #ffffff;}
	section#notice .accordion-body__contents {padding: 1.5em 1.5em;}
	section#notice .accordion__item.active:last-child .accordion-header {border-radius: none; background: #f6f5f4; border-bottom: 1px solid #5b4bff;}
	section#notice .accordion__item.active:last-child .accordion-body { border-bottom: 1px solid #5b4bff}
	section#notice .accordion:first-child > .accordion__item > .accordion-header {border-bottom: 1px solid transparent;}
	section#notice .accordion:first-child {border-top: none;}


	section#qa-board div.wrapper {max-width: 900px; margin: 0 auto; position: relative;}


	.quick-menu{position:fixed;right:80px;bottom:60px;width:180px;z-index:9999;text-align:right}
	.quick-items{display:flex;flex-direction:column;align-items:flex-end;gap:10px;margin-bottom:10px;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
	.quick-menu.active .quick-items{opacity:1;transform:translateY(0);pointer-events:auto}
	.quick-item{display:flex;align-items:center;justify-content:space-between;width:180px;padding:13px 18px;box-sizing:border-box;border-radius:30px;background:#fff;color:#313131!important;font-size:.9em;font-weight:600;text-decoration:none;box-shadow:0 4px 15px rgba(0,0,0,.12)}
	.quick-item span{font-size:1.2em;font-weight:400;line-height:1}
	.quick-toggle{position:relative;display:block;width:56px;height:56px;margin-left:auto;padding:0;border:none;border-radius:50%;background:#5b4bff;cursor:pointer;box-shadow:0 5px 20px rgba(0,0,0,.15)}
	.quick-toggle:before,.quick-toggle:after{content:"";position:absolute;top:50%;left:50%;width:24px;height:2px;background:#fff;transform:translate(-50%,-50%);transition:transform .25s ease}
	.quick-toggle:after{transform:translate(-50%,-50%) rotate(90deg)}
	.quick-menu.active .quick-toggle:before{transform:translate(-50%,-50%) rotate(45deg)}
	.quick-menu.active .quick-toggle:after{transform:translate(-50%,-50%) rotate(135deg)}




/* 6. Mobile */

@media (max-width: 850px) {

	div.wrapper {width: calc(100% - 40px); max-width: none; margin: 0 20px;}
	br.mobile {display: block;}

	a.cta {min-width: 120px; padding: 14px 20px; gap: 18px; font-size: 0.85em; border-radius: 40px;}
	a.cta::after {font-size: 1.3em;}

	section[id^="intro"] h1, section[id^="teacher"] h1, section[id^="course"] h1, section[id^="tuition"] h1, section[id^="review"] h1, section[id^="notice"] h1, section[id^="qa-board"] h1 { font-size: 2em; line-height: 1.3;}

	div.col2 {width: calc(100% - 20px); float: none; margin: 0 10px 20px;}
	div.col3 {width: calc(100% - 20px); float: none; margin: 0 10px 20px;}
	div.col4 {width: calc(100% - 20px); float: none; margin: 0 10px 20px; box-sizing: border-box;}
	div.col3-2 {width: calc(100% - 20px); float: none; margin: 0 10px 20px;}

	nav {width: calc(100% - 40px); position: absolute; height: auto; padding: 15px 20px; top: 10px; left: 0; box-sizing: border-box;}
	nav img {width: 50px;}


	section[id^="home"] {height: 100vh !important; min-height: 100vh !important; padding: 0 !important; box-sizing: border-box !important; background-size: cover; background-position: center top; background-repeat: no-repeat; font-size: 50%;}
	section[id^="home"] div.wrapper {height: 100% !important;}
	section[id^="home"] div.text {position: absolute; white-space: nowrap; font-size: 3em; font-family: 'Noto Serif KR', serif; margin: 0; padding: 0;}
	section[id^="home"] div.vt {top: 18%; left: 0;}
	section[id^="home"] div.ko {top: 34%; left: 10%;}
	section[id^="home"] div.en {top: 50%; left: 7%;}
	section[id^="home"] div.sub {top: 66%; left: 0;}

	section[id^="intro"] div.col4 {height: auto; padding: 30px;}



	section[id^="teacher"] div.profile {height:280px;}
	section[id^="teacher"] div.info {width:calc(100% - 60px);height:auto;padding:25px 30px 30px;}
	section[id^="teacher"] div.info h3 {font-size:1.35em;}
	section[id^="teacher"] div.info h5 {font-size:.95em;}
	section[id^="teacher"] div.info h3, section[id^="teacher"] div.info h5 {display:block; white-space:normal; margin:0;}
	section[id^="teacher"] div.info p {line-height:1.7;}
	section[id^="teacher"] .teacher-list {position:relative;display:flex;flex-wrap:nowrap;width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x;}
	section[id^="teacher"] .teacher-list::-webkit-scrollbar {display:none;}
	section[id^="teacher"] .teacher-list > .col3 {width:calc(100% - 20px);min-width:100%;flex:0 0 100%;float:none;display:block;margin:0 20px 0 0;box-sizing:border-box;scroll-snap-align:start;}
section[id^="teacher"] .teacher-prev, section[id^="teacher"] .teacher-next {display:block;position:absolute;top:140px;transform:translateY(-50%);z-index:20;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.85);font-size:0;line-height:0;box-shadow:0 2px 8px rgba(0,0,0,.12);cursor:pointer;}
section[id^="teacher"] .teacher-prev {left:10px;}
section[id^="teacher"] .teacher-next {right:10px;}
section[id^="teacher"] .teacher-prev::before, section[id^="teacher"] .teacher-next::before {content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;border-top:2px solid #5B4BFF;border-right:2px solid #5B4BFF;}
section[id^="teacher"] .teacher-prev::before {transform:translate(-35%,-50%) rotate(-135deg);}
section[id^="teacher"] .teacher-next::before {transform:translate(-65%,-50%) rotate(45deg);}



	section[id^="course"] .course-intro {margin-bottom: 40px;}
	section[id^="course"] .course-intro h1 {font-size: 2em; line-height: 1.3;}
	section[id^="course"] .course-intro p {line-height: 1.7;}
	section[id^="course"] .course-main {display: flex; flex-direction: column; gap: 15px;}
	section[id^="course"] .course-box {flex: none; width: 100%; padding: 30px 25px;}
	section[id^="course"] .course-level {margin-top: 80px;}
	section[id^="course"] .course-heading {margin-bottom: 35px;}
	section[id^="course"] .course-heading h2 {font-size: 1.7em;}
	section[id^="course"] .course-level-grid {grid-template-columns: 1fr !important; gap: 15px;}
	section[id^="course"] .course-level-box {min-height: auto; padding: 30px 25px;}
	section[id^="course"] .course-level-box h3 {font-size: 1.8em;}
	section[id^="course"] .course-level-box hr {margin-bottom: 30px;}
	section[id^="course"] .course-special {margin-top: 80px;}
	section[id^="course"] .course-special-grid {grid-template-columns: 1fr; gap: 15px;}
	section[id^="course"] .special-image {height: 200px;}
	section[id^="course"] .special-info {padding: 25px;}
	section[id^="course"] .course-note {margin-top: 35px;}


	section[id^="tuition"] .tuition-intro {margin-bottom: 40px;}
	section[id^="tuition"] .tuition-intro h1 {font-size: 2em; line-height: 1.3;}
	section[id^="tuition"] .tuition-grid {grid-template-columns: 1fr; gap: 15px;}
	section[id^="tuition"] .tuition-box {padding: 30px 25px;}
	section[id^="tuition"] .tuition-notice {gap: 10px; padding: 15px 20px; text-align: left;}
	section[id^="tuition"] .tuition-notice span {font-size: 1.2em; flex: 0 0 auto;}
	section[id^="tuition"] .promotion {margin-top: 45px; padding: 30px 20px;}
	section[id^="tuition"] .promotion-title {margin-bottom: 30px;}
	section[id^="tuition"] .promotion-title h2 {font-size: 1.5em;}
	section[id^="tuition"] .promotion-grid {grid-template-columns: 1fr; gap: 30px;}
	section[id^="tuition"] .promotion-item {justify-content: flex-start; gap: 20px;}
	section[id^="tuition"] .promotion-icon {width: 65px; height: 65px; font-size: 1.6em;}
	section[id^="tuition"] .promotion-item h3 {font-size: 1.1em;}

	section#review {min-height: auto;}

	section#map {height: 70vh; position: relative;}
	section#map .info {position: absolute; left: 20px; right: 20px; top: auto; bottom: auto; width: auto; margin: 0; padding: 20px; background: #ffffff; z-index: 9999; font-size: 1em; box-sizing: border-box; transform: translateY(calc(85vh - 100% - 20px));}
	section#map .info .cta {min-width: 0; width: 100%; padding: 18px 20px; box-sizing: border-box; font-size: 1.2em}

	section#notice div.notice_wrapper {width: calc(100% - 40px); margin: 0 20px; max-width: none;}
	section#notice .number, .title, .date {padding: 10px 5px; font-size: .85em; box-sizing: border-box;}
	section#notice .number {width: 15%;}
	section#notice .date {width: 25%;}
	section#notice .title {width: 60%;}
	section#notice .accordion-body__contents {padding: 1.25em;}

	section#qa-board div.wrapper {width: calc(100% - 60px); max-width: none;}

	.quick-menu {right: 20px; bottom: 20px; width: 160px;}
	.quick-items {gap: 8px;}
	.quick-item {width: 160px; padding: 12px 16px; font-size: .85em;}
	.quick-toggle {width: 52px; height: 52px;}

}