/* /common/css/fonts.css */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url("/common/fonts/Geist-Variable.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url("/common/fonts/Geist-Variable.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url("/common/fonts/Geist-Variable.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 700; font-display: swap; src: url("/common/fonts/Geist-Variable.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/common/fonts/GeistMono-Variable.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/common/fonts/GeistMono-Variable.woff2") format("woff2"); }
/* /common/css/layout.css */
html,body{width:100%; min-height:100%; background-color: #fff; -webkit-text-size-adjust:none}
input,button,textarea{background-color: transparent; border:none; -webkit-border-radius:0; -webkit-appearance:none}
html, body { margin: 0; width: 100%; position: relative; padding: 0; font-size: 0.625em;  -webkit-text-size-adjust : none;   -ms-text-size-adjust : none;   -moz-text-size-adjust : none;   -o-text-size-adjust : none;   }
* {margin:0; padding:0; list-style:none; text-decoration:none; font-family: 'Roboto', sans-serif; box-sizing: border-box; }
ul>li>a { text-decoration:none; }
a {text-decoration: none; color: #333; cursor: pointer;}
table { border-collapse: collapse; }
textarea {box-sizing: border-box; resize: none;}
select {-webkit-border-radius: 0; -webkit-appearance: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; box-sizing: border-box; cursor: pointer;}
input,select,textarea,strong,em,p,h1,h2,h3,h4,span,td,button,th,li,a,i,b {font-style:normal; margin: 0; letter-spacing: -0.5px;}
ul { margin: 0;padding: 0;list-style: none;}
img {max-width:100%;}
button {cursor: pointer; border: none;}
html.scrollHidden,
body.scrollHidden {
overflow: hidden !important;
}
.limit {max-width: 1520px; width: 100%; padding: 0 10px; margin: 0 auto;}
.mobile {display: none !important;}
@media screen and (max-width: 1024px) {
.pc {display: none !important;}
.mobile {display: block !important;}
img.mobile {display: inline-block !important;}
}
.header {position: absolute; height: 10rem; left: 0; top: 0; width: 100%; border-bottom: 1px solid #dddddd; background: #fff; z-index: 10;}
.headerInner {position: relative; display: flex; height: 100%; align-items: center;}
.logo {position: relative; display: inline-block; width: 22rem; height: 100%; margin: 0 2rem 0 0;}
.logo a {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('/images/common/logo.png') no-repeat; background-position: center !important; background-size: contain !important; text-indent: -9999px;}
.mainNav {flex: 1; height: 100%;position: relative;}
.mainNav .navList {position: absolute; left: 50%; top: 0; transform: translate(-50%,0); display: flex; height: 100%;width: 100%;justify-content: space-around;}
.mainNav .navItem  {position: relative; height: 100%;flex: 1;}
.mainNav .navItem:nth-of-type(1) {margin: 0;}
.mainNav .navItem__link {display: flex; align-items: center; justify-content: center; height: 100%;}
.mainNav .navItem__link span {font-size: 1.6rem; font-weight: 500; color: #222222; transition: .3s ease;}
.mainNav .navItem__link:hover span {color: #349e8f;}
.mainNav .twoDepth  .nav__depth2 {display: none; position: absolute; left: 50%; top: 100%; width: 20rem; text-align: center; transform: translate(-50%,0); padding: 1rem 0; background: #ffffff;}
.mainNav .nav__depth2{ display: none; width: 200px; position: absolute; right: 0px;}
.mainNav .nav__depth2 a {display: inline-block; padding: 0.7rem 0; width: 100%;}
.mainNav .nav__depth2 span {position: relative; display: inline-block; font-size: 1.5rem; font-weight: 400; color: #999999; transition: .3s ease;}
.mainNav .nav__depth2 span::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #a1ccc5; opacity: 0; transition: .3s ease;}
.mainNav .nav__depth2 li{}
.mainNav .nav__depth2 li a{border-top: 1px solid #e9e9e9;padding: 1.5rem 1.8rem;color: #555;font-size: 1.3rem;font-weight: 600;text-transform: none;background: #fff;letter-spacing: 0;}
.mainNav .nav__depth2 li:hover span {color: #349e8f;}
.mainNav .nav__depth2 li:hover span::after {opacity: 1;}
.headerUtil {position: relative; display: flex; height: 100%; align-items: center; }
.header__searchWrap {display: flex; position: relative; border: 1px solid #dddddd; border-radius: 4px; overflow: hidden; align-items: center;}
.header__searchWrap form {display: flex; height: 4rem; align-items: center;border-bottom:1px solid #ddd}
.header__searchInput {border: none; width: 20rem; height: 100%; padding: 0 1rem; font-size: 1.5rem; font-weight: 400; color: #333;}
.header__searchInput::placeholder {text-align: center; font-size: 1.5rem; font-weight: 400; color: #999999;}
.header__searchBtn {display: flex; width: 4rem; height: 100%; border: none; background: none; align-items: center; justify-content: center;}
.header__authWrap { display: flex; align-items: center; margin: 0 0 0 1.5rem;}
.profile__img { width: 2.7rem; height: 2.7rem; background-position: center !important; background-size: cover !important; border-radius: 50%;}
.current__user {display: flex; cursor: pointer; align-items: center; width: 10rem;}
.profile__name {font-size: 1.5rem; margin: 0 0 0 0.5rem; font-weight: 500; color: #222222; flex: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.auth__utilList {display: none; background: #fff; position: absolute; left: 50%; transform: translate(-50%,0); top: 100%; width: 100%; padding: 0.5rem 0;}
.auth__utilList a {display: inline-block; width: 100%; padding: 0.8rem 1rem;}
.auth__utilList span {color: #999999; font-size: 1.4rem; font-weight: 400;}
.auth__utilList a:hover span {color: #666666; }
.btn__login {display: flex; background: #349e8f; height: 4rem; width: 8rem; align-items: center; justify-content: center; padding: 0 0.6rem; border-radius: 4px; border: none;}
.btn__login strong {display: inline-block; color: #fff; font-size: 1.5rem; font-weight: 600; font-family: 'Open Sans', sans-serif;}
.sideNavWrap {position: fixed; right: 0; top: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.8); z-index: 3; opacity: 0; visibility: hidden; transition: .3s ease; cursor: pointer;}
.sideNavWrap.on {opacity: 1; visibility: visible;}
.sideNav {position: absolute; right: 0; top: 0; max-width: 96rem; width: 100%; height: 100vh; background: #fff; padding: 4rem 8rem; overflow: auto; cursor: auto;}
.sideNav__logo {margin: 0 0 4rem;}
.side.navList {display: block; height: auto;}
.side.navList .nav__depth2 {display: flex; flex-wrap: wrap; position: relative; left: auto; top: auto; transform: translate(0); height: auto;}
.side .navItem {display: flex; height: auto; border-bottom: 1px solid #ddd; padding: 40px 0 30px; align-items: center;}
.side .navItem__link {display: inline-block; padding: 0; width: 20rem;}
.side .navItem__link span {font-size: 2.5rem; font-weight: 800; color: #666666; transition: .3s ease;}
.side .nav__depth2 {padding: 2px 0 0; flex: 1;}
.side .nav__depth2 li {margin: 0 4rem 1rem 0;}
.side .nav__depth2 a {padding: 0;}
.side .nav__depth2 a span {display: inline-block; position: relative; font-size: 1.7rem; font-weight: 600; color: #999999;}
.side .nav__depth2 a span::before {content: ''; position: absolute;left: 0; bottom: 0; width: 100%; height: 1px; background: #878787; opacity: 0; transition: .3s ease;}
.side .navItem:hover .navItem__link span {color: #349e8f;}
.side__util {position: fixed; z-index: 3; right: 20px; top: 50%; transform: translate(0,-50%); transition: .3s ease;}
.side__util.hidden {opacity: 0; visibility: hidden;}
.side__util li + li {margin: 10px 0 0;}
.side__btn {display: flex; width: 64px; height: 64px; justify-content: center; align-items: center; border-radius: 50%; border: none;}
.side__btn.call {background: #26282b;}
.side__btn.kakao {background: #f1d901;}
.side__btn.close {background: #cccccc;}
.hamburger_wrap { position: absolute;  cursor: pointer; display: flex; transition: .15s ease; height: 100%; align-items: center; top: 0; right: 10px; z-index: 14;}
.hamburger__inner {width: 3.4rem; height: 2.4rem; position: relative; transition: .3s ease;}
.hamburger_wrap .hamburger__inner.has-new-noti:after {content: attr(data-new_count); position: absolute; display: block; line-height: 15px; border-radius: 20px;background-color: red; color: #ffffff;left: 2.5rem;top: -1rem;padding: 0 4px;font-size: 8px;}
#nav-icon3 {position: absolute; width: 100%;height: 100%; -webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;transition: .5s ease-in-out;cursor: pointer; transform: translate(-50%,-50%); left: 50%; top: 50%;}
#nav-icon3 span {display: block;position: absolute; height: 0.4rem;width: 100%; background: #666666; border-radius: 9px;opacity: 1;left: 0;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}
#nav-icon3 span:nth-child(1) {top: 0px;}
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {top: 1.2rem;}
#nav-icon3 span:nth-child(4) {top: 2.3rem; width: calc(100% - 1.7rem); left: 1.7rem;}
#nav-icon3.open span:nth-child(1) {top: 12.5px;width: 0%;left: 50%;}
#nav-icon3.open span:nth-child(2) {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
#nav-icon3.open span:nth-child(3) {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
#nav-icon3.open span:nth-child(4) {top: 12.5px;width: 0%;left: 50%;}
.footer {background: #30323a;  padding: 6rem 0; }
.ft__topPart {display: flex; justify-content: space-around; border-bottom: 1px solid #4e4f56; padding: 0 0 7rem;}
.ft__topPart li {text-align: center;}
.ft__topPart .imgWrap {display: flex; height: 11rem; align-items: center; justify-content: center;}
.ft__topTit {font-size: 2rem; font-weight: 600; color: #fff;}
.ft__topTxt {display: block; font-size: 1.6rem; font-weight: 400; color: #dddfe5; margin: 1.5rem 0 0;}
.ft__btmPart {display: flex; justify-content: space-between; }
.ft__btmLeft {display: flex;}
.ft__btmLeft > li {margin: 0 10rem 0 0;}
.ft__btmLeft > li.two {margin: 0 4rem 0 0;}
.ft__btmLeft > li:last-child {margin: 0;}
.ft__btmTit {height: 3rem; margin: 0 0 2rem;}
.ft__btmTit a {font-size: 2rem; font-weight: 600; color: #349e8f; display: block; cursor:auto;}
.ft__btmList a {display: block; padding: 0.3rem 0;}
.ft__btmList span {font-size: 1.6rem; font-weight: 400; color: #999ba1;}
.snsList {display: flex; margin: 0 0 4rem; justify-content: flex-end;}
.snsList li {display: flex; margin: 0 2.4rem 0 0; align-items: center; justify-content: center;}
.snsList li:last-child {margin: 0;}
.ft__linkList {display: flex; justify-content: flex-end;}
.ft__linkList li:nth-of-type(1) {position: relative; margin: 0 1.5rem 0 0; padding: 0 1.5rem 0 0;}
.ft__linkList li span {color: #dddfe5; font-size: 1.5rem;}
.ft__linkList li::after {content: ''; position: absolute; right: 0; top: 50%; transform: translate(0,-50%); width: 2px; height: 1.2rem; background: #fff;}
.copyright {display: inline-block; font-size: 1.5rem; font-weight: 400; color: #dddfe5; margin: 1rem 0 0;}
.header__searchBtnWrap--hidden {display: none; height: 100%; align-items: center;}
.header__searchBtn--hidden {width: 4rem; height: 4rem; display: flex; background: #fff; border: none; justify-content: center; align-items: center;}
.modal {position: fixed; left: 0; top: 0; width: 100%; height: 100vh; overflow: auto; z-index: 100; background: rgba(0,0,0,0.6);  opacity: 0; visibility: hidden; transition: .3s ease;}
.modal.active {opacity: 1; visibility: visible;}
.modal__inner {background: #fff; max-width: 580px; width: calc(100% - 20px); margin: 10rem auto 5rem; padding: 6rem 7rem; cursor: auto; box-shadow: 8px 8px 20px 0 rgba(0,0,0,0.6);position: relative;}
.modal--close{position: absolute;top: 2rem;right: 2rem;padding: 1rem;}
.cropLayer .modal__inner {padding: 2rem;}
.modal__topTit {font-size: 2.2rem; font-weight: 600; color: #222222; font-family: 'Poppins', sans-serif; text-align: center; margin: 0 0 5rem;}
.modal__topTxt {font-size: 1.5rem;color: #666666;font-family: 'Poppins', sans-serif;font-weight: 400;}
.modal__topTxt + .modal__topTxt{margin: 1.5rem 0 0 0;}
.social__btnWrap {margin: 0 0 2.5rem;}
.social__btn {display: flex; height: 5.5rem; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid transparent; overflow: hidden;}
.social__btn + .social__btn {margin: 1rem 0 0;}
.social__btn.google {background: #4285f3;}
.social__btn.github {background: #000000;}
.social__btnTxt {text-align: left; flex: 1; font-size: 1.6rem; padding: 0 2rem; font-weight: 600; color: #fff;}
.social__iconWrap {background: #fff; display: flex; width: 5.5rem; height: 100%; justify-content: center; align-items: center;}
.modal__txt--or {font-size: 1.6rem; font-weight: 400; color: #222222; text-align: center; margin: 0 0 3.5rem;}
.login__tit {display: block; font-size: 1.6rem; font-weight: 600; color: #222222; margin: 0 0 1rem;}
.login__item + .login__item {margin: 2rem 0 0;}
.login__input {border: 1px solid #ddd; padding: 0 2rem; height: 6.5rem; font-size: 1.4rem; font-weight: 400; color: #333; width: 100%;}
.login__input::placeholder {color: #cccccc;}
.modal__txt {text-align: center; margin: 0 0 2rem; font-size: 1.8rem; font-weight: 500;}
.modal__btNWrap {display: flex; gap: 1rem;}
.modal__btNWrap button:nth-of-type(1) {background: #999999;}
.login__form {margin: 0 0 3rem;}
.form__btm {display: flex; justify-content: space-between; margin: 1.5rem 0 3rem;}
.labelChk {display: flex; align-items: center; cursor: pointer;}
.labelChk__box {position: relative; display: inline-block; width: 2rem; height: 2rem; border: 1px solid #dddddd;}
.labelChk__box::before {content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 50%; height: 50%; background: #349e8f; opacity: 0; transition: .3s ease;}
input:checked + .labelChk__box::before {opacity: 1;}
.labelChk__txt {font-size: 1.5rem; font-weight: 400; color: #666666; margin: 0 0 0 0.8rem;}
.btn__find {font-size: 1.5rem; font-weight: 400; color: #349e8f;}
.btnSubmit {width: 100%; height: 6rem; background: #349e8f; border-radius: 4px; color: #fff; font-weight: 600; font-size: 1.6rem;}
.login__form ul + .btnSubmit {margin: 2rem 0 0;}
.joinTxt__wrap {display: flex; justify-content: center;}
.joinTxt__wrap p {font-size: 1.5rem; font-weight: 400; color: #666666; }
.joinTxt__wrap button {display: flex; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: 400; color: #349e8f; background: none; margin: 0 0 0 1rem;}
.joinTxt__wrap + .joinTxt__wrap {margin: 1rem 0 0;}
.form__btmTxt {font-size: 1.5rem; font-weight: 400; color: #666666;}
.form__btmTxt a {color: #349e8f;}
.modal-inTxtBoxWrap{display: flex;justify-content: space-between;gap: 1rem;margin: 3rem 0 0 0;}
.modal-inTxtBox{width: calc((100% - 1rem)/2);}
.modal-inTxtBox__Tit{color: #222;font-size: 1.8rem;font-family: 'Poppins', sans-serif;font-weight: 700;margin: 0 0 0.3rem 0;}
.modal-detailBox + .modal-detailBox{margin: 0.5rem 0 0 0;}
.modal-detailBox__tit{color: #666666;font-size: 1.5rem;font-family: 'Poppins', sans-serif; margin: 0 0 0.3rem 0;}
.modal-detailBox__point{font-size: 1.4rem;font-family: 'Poppins', sans-serif; font-weight: 400;}
.goodType .modal-detailBox__point{color: #349e8f;}
.badType .modal-detailBox__point{color: #e23232;}
.modalForm{margin: 3.5rem 0 0 0;}
.modal__line{margin: 0 0 2.5rem 0;}
.modal__Name{display: block;font-size: 1.5rem;font-weight: 600;color: #222222;font-family: 'Poppins', sans-serif;margin: 0 0 0.5rem 0;}
.modalForm_input{width: 100%;height: 5rem;border: 1px solid #ddd;padding: 0 1rem;font-size: 1.5rem;font-weight: 400;color: #222;font-family: 'Poppins', sans-serif;}
.paging_all{width:100%; margin:6rem auto 0; font-size:0; line-height:0; text-align:center; position:relative;}
.board_btn + .paging_all{margin-top:0;}
.paging_all .btns,
.paging_all>.num>strong,
.paging_all>.num>a{width:4rem; height:4rem; background-color: #fff; border:1px solid #dbdbdb; text-align: center; display:inline-block; vertical-align:top; position: relative;}
.paging_all .btns,
.paging_all .btns *{font-size:0 !important; line-height:0 !important;}
.paging_all .btns:before,
.paging_all .btns:after{content: ""; width: 1.2rem; height: 1.2rem; border-width:1px 0 0 1px; border-style:solid; border-color:#666; display: inline-block; position:absolute; left: 50%; top:50%;}
.paging_all .btns:after{opacity: 0;}
.paging_all .btns.prev:before{margin:-0.6rem 0 0 -0.3rem; transform:rotate(-45deg);}
.paging_all .btns.next:before{margin:-0.6rem 0 0 -0.9rem; transform:rotate(135deg);}
.paging_all>.num{margin:0; display:inline-block; vertical-align:top}
.paging_all>.num>strong,
.paging_all>.num>a{margin-left:0.5rem; font-weight: 300; font-size:1.6rem; line-height:3.8rem; color:#666;}
.paging_all>.num .pg_start{margin-left:0;}
.paging_all>.num .pg_end{}
.paging_all .btns:hover{background-color: #349e8f; border-color:#349e8f;}
.paging_all .btns:hover:before,
.paging_all .btns:hover:after{border-color:#fff;}
.paging_all>.num>strong,
.paging_all>.num>a:hover{background-color: #349e8f; border-color:#349e8f; color:#fff; z-index:2;}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}
.header-notification {position: relative;font-size: 14px;}
.header-notification.has-new-noti:after {content: attr(data-new_count); position: absolute; display: block; line-height: 15px; border-radius: 8px;background-color: red; color: #ffffff;left: 50%;top: -7px;padding: 0 4px;font-size: 8px;}
.header-notification a {}
.header-notification .header-noti-list {display: none;position: absolute;width: 400px;right: 0;}
.header-notification .header-noti-list .header-noti-box {border: 1px solid #dddddd;background-color: #ffffff;margin-top: 15px;}
.header-notification .header-noti-list .notification-header {padding: 10px;text-align: right;font-weight: bold;border-bottom: 1px solid #dddddd;}
.header-notification .header-noti-list .notification-header a {color: #349e8f;}
.header-notification .header-noti-list ul {max-height: 400px;overflow-y: auto;}
.header-notification .header-noti-list ul li {padding: 10px;border-bottom: 1px solid #dddddd}
.header-notification .header-noti-list ul li .message {}
.header-notification .header-noti-list ul li .message a {font-weight: bold;}
.header-notification .header-noti-list ul li .date {}
.header-notification .header-noti-list .notification-footer {padding: 10px 0;text-align: center;font-weight: bold;border-top: 1px solid #dddddd;}
.mainVisArea .swiper-slide {position: relative;}
.contest-notice-surf5 {
font-size: 1.8rem;
margin: 0 auto 40px auto;
width: 1000px;
max-width: 80vw;
line-height: 1.6;
border: 1px solid #ddd;
padding: 20px;
background-color: #fafafa;
}
.contest-notice-surf5 ul {
list-style: circle;
padding-left: 40px;
}
.contest-notice-surf5 ul li {
list-style: circle;
}
.contest-notice-surf5 p {
margin: 1em 0;
}
@media screen and (min-width: 1025px) {
.hamburger_wrap {display: none;}
}
@media screen and (max-width: 1420px) {
.header__searchWrap {position: absolute; left: 80%; transform: translate(-50%,0); top: 100%; max-width: 100%; width: 30rem; background: #fff; border-radius: 0; border: none; border-top: 1px solid #ddd; opacity: 0; visibility: hidden; transition: .3s ease;}
.header__searchWrap.on {opacity: 1; visibility: visible;}
.header__searchWrap form {width: 100%;}
.header__searchInput {width: calc(100% - 4rem);}
.header__searchBtnWrap--hidden {display: flex;}
}
@media screen and (max-width: 1024px) {
.header {position: fixed;}
.headerInner {justify-content: space-between;}
.hamburger_wrap {position: relative; right: auto; margin: 0 0 0 1rem;}
.header__searchWrap {width: 100%; left: 0; transform: translate(0);}
.mainNav {position: absolute; left: 0; top: 100%; height: calc(100vh - 100%); background: rgba(0,0,0,0.7); transform: translate(0); width: 100%; opacity: 0; visibility: hidden; transition: .3s ease;}
.mainNav.on {opacity: 1; visibility: visible;}
.mainNav .navList {display: block; background: #f6f6f6; height: auto; position: relative; left: auto; top: auto; transform: translate(0);}
.mainNav .navItem { height: auto; margin: 0;}
.mainNav .twoDepth .nav__depth2 {position: relative; left: auto; top: auto; transform: translate(0); background: none; padding: 0;}
.mainNav .twoDepth .nav__depth2,
.mainNav .navItem__link {position: relative; width: 100%; justify-content: flex-start; }
.mainNav .navItem__link {padding: 1.5rem 10px;}
.navArrow {position: absolute; right: 10px; top: 50%; transform: translate(0,-50%); width: 2.4rem; height: 1.4rem; transition: .3s ease;}
.navArrow img {position: absolute; left: 0; top: 0; transition: .3s ease; opacity: 0;}
.navArrow img:nth-of-type(1) {opacity: 1;}
.header__searchBtnWrap--hidden {justify-content: flex-end; flex: 1;}
.noDepth .navArrow {display: none !important;}
.active .navArrow {transform: rotate(-180deg);}
.active .navArrow img:nth-of-type(1) {opacity: 0;}
.active .navArrow img:nth-of-type(2) {opacity: 1;}
.mainNav .nav__depth2 a {text-align: left; padding: 1rem 10px;}
.auth__util {display: flex !important; background: #f6f6f6; padding: 0 10px; align-items: center;}
.auth__util li {position: relative; height: 100%;}
.auth__util li:not(:last-child) {margin: 0 1.5rem 0 0; padding: 0 1.5rem 0 0;}
.auth__util li:not(:last-child)::after {content: ""; position: absolute; right: 0; top: 50%; transform: translate(0,-50%); width: 1px; height: 2.4rem; background: #349e8f;}
.auth__util a {display: flex; align-items: center;height: 100%; font-size: 1.6rem; padding: 2rem 0;}
.auth__util span {font-family: 'Open Sans', sans-serif; font-weight: 600; color: #349e8f;}
.auth__util .mobile-notification {position: relative;}
.auth__util .mobile-notification.has-new-noti::after {
content: attr(data-new_count);
position: absolute;
display: block;
line-height: 15px;
border-radius: 20px;
background-color: red;
color: #ffffff;
left: 1rem;
top: 1.4rem;
padding: 0 4px;
font-size: 8px;
}
.header__searchWrap form {height: 6rem;}
.header__searchInput {width: calc(100% - 8rem);}
.header__searchBtn {width: 8rem;}
.ft__btmPart {flex-wrap: wrap;}
.ft__btmRight {width: 100%; text-align: right; margin: 3rem 0 0;}
.contestList li {flex-wrap: wrap; height: auto;}
.contest__photo {flex: initial; width: 100%;}
.contest__txtWrap {width: 100%; order: 2;}
}
@media screen and (max-width: 768px) {
html, body {font-size: 0.5rem;}
.footer {padding: 4rem 0 8rem;}
.ft__btmPart {padding: 4rem 0 0;}
.ft__topPart {flex-wrap: wrap;}
.ft__topPart li {width: 50%;}
.ft__btmLeft {flex-wrap: wrap; margin: 0 auto; text-align: center;}
.ft__btmLeft > li.two,
.ft__btmLeft > li {width: 50%; margin: 2rem 0 0;}
.ft__btmTit {margin: 0 0 1rem;}
.ft__linkList,
.snsList {justify-content: center;}
.ft__btmRight {text-align: center;}
.modal__inner {padding: 2rem;}
}
@media screen and (max-width: 480px) {
.header__searchInput,
.header__searchInput::placeholder,
.mainNav .nav__depth2 span {font-size: 2.1rem;}
.auth__util li:first-child {margin: 0 2rem 0 0; padding: 0 2rem 0 0;}
#nav-icon3 span {height: 0.3rem;}
}
/* /common/css/contents.css */
.userLinkTag{cursor:pointer;}
.doneMsg {position:fixed; bottom: 0px; left: 0px; z-index: 10000; color:#fff; font-size: 20px; padding:10px 20px; width:100%;}
.doneMsg.green{background:#217600;}
.doneMsg.red{background:#aa0000;}
.warningTxt {font-size: 1.4rem; color: #ff2222; margin: 0.3rem 0 0;}
.resendActiveEmail{margin: 0 0 0 1rem;display: inline-block;}
.linkArrow{margin: 0 0 0 0.7rem;display: inline-block;}
.addProject{margin: 0 0 2rem 0;display: flex;justify-content: flex-end;}
.btn_addProject{background: #349e8f;display: inline-flex;;align-items:center;justify-content: center;min-width: 12rem;height: 4rem;color: #fff;text-align: center;font-weight: bold;right: 0;border-radius: 4px;font-size: 1.4rem;padding: 0 1.5rem;}
.swiper-button-prev::after,
.swiper-button-next::after {display: none;}
.main__titWrap {position: relative; text-align: center; padding: 0 0 3rem; margin: 0 0 5rem;}
.main__titWrap::after {content: ""; position: absolute; left: 50%; bottom: 0; width: 5rem; height: 0.3rem; background: #349e8f; transform: translate(-50%,0);}
.main__tit {font-size: 4rem; font-weight: 700; color: #222222; line-height: 1; margin: 0 0 2rem;}
.main__titTxt {font-size: 1.8rem; font-weight: 500; color: #349e8f;}
.mainVisArea {padding: 10rem 0 0;;}
.mainVisArea .swiper-slide {display: flex; align-items: center; height: 70rem; background-position: center !important; background-size: cover !important;}
.mainVisArea .swiper-pagination {bottom: 4rem;}
.mainVisArea .swiper-pagination-bullet {width: 1.6rem; height: 1.6rem; opacity: 1; background: #cccccc; box-shadow: 2px 2px 6px 0 rgba(0,0,0,0.2); transition: .3s ease; margin: 0 1rem !important;}
.mainVisArea .swiper-pagination-bullet-active {background: #349e8f;}
.mainVis__btn {display: flex; align-items: center; justify-content: center; margin: 4rem 0 0; width: 22rem; height: 6rem; font-family: 'Open Sans', sans-serif; font-size: 1.8rem; font-weight: 700; color: #fff; background: #349e8f; border-radius: 4px;}
.mainSec {padding: 10rem 0;}
.wrapSelectBox{display: flex;align-items: flex-end;gap: 1rem;margin: 0 0 3rem 0;}
.selectBox__tit{font-size: 1.7rem;font-weight: 500;margin: 0 0 1rem 0;}
.selectBox__select{width: 18rem; height: 4rem; border: 1px solid #ddd; padding: 0 1rem; background: #fff url('/images/sub/contest/select_arrow.png') no-repeat; background-position: right 1rem center;font-size: 1.6rem;color: #333;}
.selectBox.right{margin: 0 0 0 auto;display: flex;justify-content: flex-end;}
.selectBox__select option {}
.term-select-wrap {display: flex;justify-content: center;align-items: center;background-color: #ffffff;border: 1px solid #ddd;height: 4rem;padding: 0 10px;}
.term-select-wrap .term-select {font-size: 1.6rem;padding: 0 15px;color: #333;}
.term-select-wrap .term-select.active {font-weight: bold;}
.term-select-wrap .term-select:not(:last-child) {border-right: 1px solid #ddd;}
.projectArea .swiper-container {padding: 0 0 3rem;}
.projectArea .swiper-slide {background: #f6f6f6;}
.projectArea .swiper-slide:hover .project__cntsWrap {opacity: 1;}
.project__img {position: relative; padding-bottom: 75%; background-position: center !important; background-size: cover !important;border: 1px solid #ddd; }
.project__cntsWrap {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.95); padding: 6.5rem 1.5rem 3rem; opacity: 0; transition: .3s ease;}
.projectList.winner{padding-top:3rem; justify-content: center;}
.winner .project__img:before{content: ""; width: 100%; height: 100%; background:url('/images/icon_winner.png') no-repeat calc(100% - 1rem) top; background-size:4.6rem; display: inline-block; position:absolute; left: 0; top:0px;}
.winner .project__img.group_1:before{background:url('/images/icon_winner2.png') no-repeat calc(100% - 1rem) top;}
.winner .project__img.group_2:before{background:url('/images/icon_winner3.png') no-repeat calc(100% - 1rem) top;}
.winner .project__img.group_3:before{background:url('/images/icon_winner3.png') no-repeat calc(100% - 1rem) top;}
.winner .project__img.group_4:before{background:url('/images/icon_winner3.png') no-repeat calc(100% - 1rem) top;}
.winner .project__img.group_5:before{background:url('/images/icon_winner3.png') no-repeat calc(100% - 1rem) top;}
.winner .project__img.group_6:before{background:url('/images/icon_winner3.png') no-repeat calc(100% - 1rem) top;}
.winner .project__img.group_7:before{background:url('/images/icon_winner3.png') no-repeat calc(100% - 1rem) top;}
.winner .project__img.group_8:before{background:url('/images/icon_winner3.png') no-repeat calc(100% - 1rem) top;}
.winner .project__img.group_9:before{background:url('/images/icon_winner3.png') no-repeat calc(100% - 1rem) top;}
.project__cnts {font-size: 1.6rem; font-weight: 400; color: #222222; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; word-wrap:break-word;  line-height: 1.5em; max-height: 6em;}
.project__txtWrap {padding: 2rem 1.5rem; border: 1px solid #dddddd; border-top: none;}
.project__infoList {display: flex; padding: 1.5rem; border: 1px solid #dddddd; border-top: none;}
.project__infoItem {display: flex; align-items: center; margin: 0 1.5rem 0 0;}
.project__infoItem:last-child {margin: 0;}
.project__infoItem:nth-last-child(2) {flex: 1;}
.project__tit {font-size: 1.7rem; font-weight: 500; color: #222222; margin: 0 0 1.5rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word;  line-height: 1.3em; height: 2.6em;}
.project__txt {display: block; font-size: 1.6rem; font-weight: 300; color: #666666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.project__date {display: block; font-size: 1.6rem; font-weight: 300; color: #666666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 1rem 0 0;}
.project__infoItem.like,
.project__infoItem.star {margin-left:1rem;cursor: pointer;}
.project__infoItem.star {margin-left:1rem;cursor: pointer;}
.projectsSlide.noSlide .swiper-wrapper{gap:2rem}
.projectsSlide.noSlide .swiper-slide {width:36rem}
.project__iconWrap {position: relative; background: none;}
.like .project__iconWrap {width: 1.8rem; height: 1.6rem;}
.view .project__iconWrap {width:2.7rem; height: 1.3rem;}
.star .project__iconWrap {width:2.4rem; height: 2.3rem;}
.comment .project__iconWrap {width:2rem; height: 1.9rem;}
.project__iconWrap img {position: absolute; left: 0; top: 0;}
.project__infoTxt {font-size: 1.6rem; line-height: 1; margin: 0 0 0 1rem;}
.project__infoItem.pcLikeBtn{}
.project__infoItem.pcLikeBtn.like .project__iconWrap {height: 1.7rem;}
.project__infoItem.pcLikeBtn .project__infoTxt {margin: 0 0 0 0.3rem;}
.like .project__infoTxt {color: #349e8f;}
.project__btnWrap {display: flex; justify-content: flex-end; margin: -5rem 0 0; transform: translate(0,-3rem);}
.project__btnMore {display: flex; align-items: center;}
.project__btnTxt {font-size: 1.6rem; font-weight: 600; color: #666666; text-transform: uppercase; margin: 0 1rem 0 0; transition: .3s ease;}
.project__btnMore .circle {position: relative; width: 7.8rem; height: 7.8rem; border-radius: 50%; border: 1px solid transparent; transition: .3s ease;}
.project__btnMore .arrow {position: absolute; width: 6rem; height: 1px; background: #666666; left: 0; top: 50%; transform: translate(0,-50%); transition: .3s ease;}
.project__btnMore .arrow::after {content: ""; position: absolute; right: 0; top: 50%; transform: translate(0,-50%) rotate(45deg); width: 1rem; height: 1rem; border: 1px solid #666; border-left: none; border-bottom: none; transition: .3s ease;}
.midBanner {max-width: none; margin: 0 auto;}
.midBanner .swiper-slide {display: flex; align-items: center; padding-bottom: 28.125%; background-position: center !important; background-size: cover !important;}
.midBanner .swiper-slide a {position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
.midBanner .swiper-pagination-bullet {width: 1.6rem; height: 1.6rem; opacity: 1; background: #cccccc; box-shadow: 2px 2px 6px 0 rgba(0,0,0,0.2); transition: .3s ease; margin: 0 1rem !important;}
.midBanner .swiper-pagination-bullet-active {background: #349e8f;}
.mainVis__tit {font-size: 3.5rem;font-weight: 600;color: #349e8f;margin: 0 0 2rem 0;}
.mainVis__txt {font-size: 2rem; font-weight: 400; color: #fff; line-height: 1.4;position: relative;padding: 0 0rem 0 1rem;}
.mainVis__txt + .mainVis__txt{margin: 0.7rem 0 0 0;}
.mainVis__txt::before{position: absolute;left: 0;top: 0.45rem;content:"";width: 0.3rem;height: 1.7rem;display: block;;background-color: #ed1c24;}
.mainVis__btn {display: flex; align-items: center; justify-content: center; margin: 4rem 0 0; width: 22rem; height: 6rem; font-family: 'Open Sans', sans-serif; font-size: 1.8rem; font-weight: 700; color: #fff; background: #349e8f; border-radius: 4px;}
.mb__tit {display: block; font-size: 5rem; font-weight: 700; color: #fff; line-height: 1; margin: 0 0 3rem;}
.mb__txt--big {font-size: 2.6rem; font-weight: 600; color: #fff; margin: 0 0 1rem;}
.mb__txt--small {font-size: 1.8rem; font-weight: 400; color: #fff; }
.projectArea.contest {background: #f6f6f6;}
.projectArea.contest .swiper-slide {background: #fff;}
.midBanner .swiper-pagination {bottom: 1rem;}
.subPage {padding: 10rem 0 6rem; min-height: 60rem;}
.subPage.ver2 {padding: 10rem 0;}
.subPage.member {padding: 15rem 0 0;}
.subTitWrap {position: relative; padding: 10rem 0 3rem; text-align: center; margin: 0 0 5rem;}
.subTitWrap::after {content: ""; position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0); width: 5rem; height: 0.3rem; background: #349e8f;}
.subTit {font-size: 3.5rem; font-weight: 700; color: #222222;}
.subTit__txt {font-size: 1.8rem; font-weight: 500; color: #349e8f;margin: 1rem 0 0 0;display: inline-block;}
.subSec .projectList{gap: 1rem;}
.subSec .projectList--items{width: calc((100% - 3rem)/4);}
.subSec .projectList--items:hover .project__cntsWrap{opacity: 1;}
.pastList {display: flex; flex-wrap: wrap;}
.pastItem {position: relative; width: calc((100% - 2rem) / 2); margin: 0 2rem 2rem 0; }
.pastItem:nth-of-type(2n) {margin: 0 0 2rem;}
.past__photo {position: relative; display: inline-block; width: 100%; padding-bottom: 33.334%; background-position: center !important; background-size: cover !important;}
.past__txtWrap {position: absolute; display: flex; flex-direction: column; justify-content: space-between; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); opacity: 0; transition: .3s ease; padding: 2rem;}
.pastItem:hover .past__txtWrap {opacity: 1;}
.past__tit {font-size: 2rem; font-weight: 500; color: #222; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3;  -webkit-box-orient: vertical; word-wrap:break-word;  line-height: 1.2em; height: 3.6em;}
.past__btn {display: flex; align-items: center; justify-content: center; background: #349e8f; color: #fff; width: 12rem; height: 4rem; border-radius: 8px; font-size: 1.6rem; font-weight: 500;}
.contest {background: #f6f6f6;}
.contestList li {display: flex; background: #fff; height: 40rem;}
.contestList li + li {margin: 2rem 0 0;}
.contest__txtWrap {padding: 7rem 4rem 4rem; width: 30rem; border: 1px solid #ddd; border-right: none;}
.contest__tit {font-size: 2.5rem; font-weight: 600; color: #222222; margin: 0 0 2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word;  line-height: 1.2em; max-height: 2.4em;}
.contest__txt {display: block; font-size: 1.6rem; font-weight: 300; color: #666666; margin: 0 0 7rem;}
.contest__name {display: block; font-size: 1.6rem; font-weight: 300; color: #666666;}
.contest__val {display: block; font-size: 1.6rem; font-weight: 600; color: #666666; margin: 0 0 3rem;}
.contest__button {display: flex; align-items: center; justify-content: center; width: 12rem; height: 4rem; font-size: 1.6rem; font-weight: 600; color: #fff; background: #349e8f; border-radius: 4px;}
.contest__photo {height: 100%; flex: 1; background-position: center !important; background-size: cover !important;}
.btnMore {max-width: 20rem; height: 6rem; background: #349e8f; color: #fff; width: 100%; font-size: 1.7rem; border-radius: 8px; font-weight: 600;}
.contest__formSec {padding: 4rem 0 0;}
.contest__formTit {max-width: 800px; width: calc(100% - 20px); margin: 0 auto 2rem; font-size: 2.2rem; font-weight: 600; color: #222222;}
.contest__formWrap {max-width: 800px; width: calc(100% - 20px); margin: 0 auto; background: #fff; padding: 3rem 2.5rem; box-shadow: 4px 2px 20px 0 rgba(0,0,0,0.2);}
.tapPart__tit { font-size: 4rem; font-weight: 700; color: #222222; text-align: center;}
.tapPart__cnts {padding: 6rem 0 0; font-size: 1.6rem;}
.tapPart__cnts .flex {display: flex; justify-content: space-between;}
.ov__tit { display: block; font-size: 1.8rem; font-weight: 600; color: #222222; margin: 0 0 2rem;}
.ov__txt { font-size: 1.6rem; font-weight: 400; color: #666666;}
.hiw__minTit {display: block; font-size: 2.6rem; font-weight: 600; color: #222222;  margin: 7rem 0 0.5rem;}
.hiw__imgWrap {display: flex; justify-content: center; align-items: center; margin: 0 0 7rem;}
.hiw__txt { font-size: 1.6rem; font-weight: 400; color: #666666;}
.hiw__tit { display: block; font-size: 1.8rem; font-weight: 600; color: #222222; margin: 2.5rem 0 1rem;}
.tapListWrap {display: flex; background: #fff; justify-content: center; align-items: center; border: 1px solid #e6e6e6;}
.tapList {display: flex; height: 10rem;}
.tapList li {height: 100%;}
.tapList li a { display: flex; height: 100%; align-items: center; padding: 0 3rem; font-size: 1.8rem; font-weight: 500; color: #999999; cursor: pointer;}
.tapList li.active a {font-weight: 500; color: #222222;}
.boardPart {margin: 1rem 0 0; padding: 5rem 10rem 15rem; background: #fff; border: 1px solid #e6e6e6;}
.board__top {display: flex; justify-content: flex-end;}
.board__search {display: flex; align-items: center;}
.boardPart .btn_wrap {display: flex; justify-content: flex-end; margin: 2rem 0 0;}
.boardPart .btn_wrap button { display: flex;align-items: center;justify-content: center;width: 8rem;height: 4rem;background: #349e8f;color: #fff;font-size: 1.6rem;font-weight: 500;border-radius: 4px;}
.txtCountWrap {display: flex; justify-content: flex-end; width: 100%; margin: 0.5rem 0 0;}
.txtCount {font-size: 1.4rem; font-weight: 500; color: #666;}
.bSearch__select ,
.bSearch__input { background: #f6f6f6; border: 1px solid #e6e6e6; height: 5rem; padding: 0 2rem; font-size: 1.6rem; color: #333; font-weight: 400;}
.bSearch__input {width: 31rem; border-right: none; margin: 0 0 0 1rem;}
.bSearch__select {width: 16rem; background:#f6f6f6 url('/images/sub/contest/selectArrow.png') no-repeat; background-position: right 2rem center; }
.bSearch__btn--submit {display: flex; width: 5rem; height: 5rem; border: 1px solid #e6e6e6; border-left: none; background: #f6f6f6; justify-content: center; align-items: center;}
.board__list {padding: 1rem 0 0;}
.board__table {width: 100%; table-layout: fixed;}
.board__table tr {border-bottom: 1px solid #ddd;}
.board__table th { background: #f6f6f6; height: 7rem; font-size: 1.6rem; font-weight: 500; color: #333333;}
.board__table td { font-size: 1.6rem; font-weight: 400; color: #666666; text-align: center;}
.board__table td.noPost {padding: 5rem 0;}
.board__th--num {width: 13rem}
.board__th--auth {width: 11rem;}
.board__th--date {width: 10rem;}
.board__th--vote {width: 10rem;}
.board__th--view {width: 10rem;}
.board__th--status {width: 10rem;}
.online__status {background: #349e8f; color: #fff; border-radius: 4px; padding: 0.5rem 1rem; display:inline-block; min-width:9rem;}
.board__link {display: flex; width: 100%; height: 6.4rem; line-height: 6.4rem; align-items: center; justify-content: flex-start; font-size: 1.6rem; font-weight: 400; color: #666666; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1;  -webkit-box-orient: vertical; word-wrap:break-word; text-align: left; cursor: pointer; transition: .3s ease;}
.board__link:hover {background: #eaeaea;}
span.noti {display: flex; align-items: center; justify-content: center; width: 7rem; height: 3.6rem; background: #349e8f; margin: 0 auto; border-radius: 4px; font-size: 1.3rem; font-weight: 600; color: #fff; }
.board__view {border-top: 2px solid #222; background: #fff; text-align: left;}
.board__view.news {max-width: calc(100% - 20rem); margin: 0 auto;}
.bv__titWrap {padding: 2rem; border-bottom: 1px solid #ddd;}
.bv__tit {display: block; font-size: 2rem; font-weight: 700; margin: 0 0 2rem;}
.bv__titInfo {display: flex; flex-wrap: wrap; gap: 1.5rem;}
.bv__titInfo li {font-size: 1.6rem; font-weight: 300;}
.bv__cnts {font-size: 1.6rem; padding: 2rem; border-bottom: 1px solid #ddd;}
.bv__cnts li {min-width: 14rem;}
.bv__btnDownList {display: flex; gap: 1rem; margin: 3rem 0 0; }
.bv__btnDownLink {display: flex; height: 3.4rem; background: #349e8f; align-items: center; padding: 0 1rem; border-radius: 4px;}
.bv__btnDownTxt {font-size: 1.6rem; font-weight: 600; color: #fff; border-right: 1px solid #fff; padding: 0 1rem 0 0; margin: 0 1rem 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.2; height: 1.2em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.bv__btmOpt {}
.bv__btmOptLink {display: flex; align-items: center; height: 5rem; border-bottom: 1px solid #ddd; padding: 0 2rem; transition: .3s ease; cursor: pointer;}
.bv__btmOptLink:hover {background: #eaeaea;}
.bv__btmName {font-size: 1.4rem; font-weight: 400; color: #333; margin: 0 1rem 0 0;}
.bv__btmTxt {margin: 0 0 0 1rem; font-size: 1.4rem; font-weight: 500; color: #222; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.2; height: 1.2em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.btnListWrap {display: flex; justify-content: flex-end; margin: 1rem 0 0; gap: 1rem;}
.btnList {display: flex; align-items: center; justify-content: center; width: 8rem; height: 4rem; background: #349e8f; color: #fff; font-size: 1.6rem; font-weight: 500; border-radius: 4px;}
.cf__line {display: flex; position: relative; flex-wrap: wrap; }
.cf__line + .cf__line {margin: 3.5rem 0 0 ;}
.cf__line.noMar {margin: 1rem 0 0;}
.cf__lineWrap {display: flex; width: 100%;position: relative;}
.cf__lineInner {position: relative; flex: 1;    margin: 0 0 2rem;}
.cf__lineInner.zip {flex: initial; width: 12rem;}
.cf__lineInner + .cf__lineInner {margin: 0 0 0 2rem;}
.contest__formWrap input {width: 100%; height: 5rem; border: 1px solid #ddd; padding: 0 2.3rem 0 1.5rem; font-size: 1.6rem; font-weight: 400; color: #222;}
.contest__formWrap input::placeholder {color: #999999}
.contest__formWrap textarea {width: 100%; border: 1px solid #ddd; padding: 1rem; font-size: 1.6rem; font-weight: 400; color: #222; height: 8rem;}
.contest__formWrap textarea::placeholder {color: #999999}
.contest__formWrap select {width: 44.6rem; height: 5rem; border: 1px solid #ddd; padding: 0 1rem; background: url('/images/sub/contest/select_arrow.png') no-repeat; background-position: right 1rem center;font-size: 1.6rem;color: #999999;    font-family: 'Poppins', sans-serif;}
.cf__name {display: block; font-size: 1.6rem; font-weight: 500; color: #222222; margin: 0 0 1rem; width: 100%;font-family: 'Poppins', sans-serif;}
.cf__name>span{font-weight: 400; color: #999999;}
.cf__name.bold{font-weight: 700;}
.cf__btnAdd {height: 5rem; align-self: flex-end; margin: 0 0 2rem 0.5rem; width: 5rem; background: #fff; color: #349e8f; border-radius: 4px; font-size: 2.5rem; font-weight: 500; transition: .3s ease;}
.cf__btnAdd.subtract {background: #fff; border: 1px solid #349e8f; color: #349e8f;}
.cf__btnAdd:hover {background: #349e8f; color: #fff;}
.attFiles {align-items: center;display: flex;position:relative;font-size: 1.6rem;margin: 0.5rem 0 0;padding: 0rem 2rem 1rem 1rem;font-size: 1.4rem;vertical-align: top;border-radius: 4px;color: #333;min-width: 2rem;font-weight: 500;}
.attFiles > a{margin: 0 0.3rem;font-weight: 600;text-decoration: underline;}
.attFiles > a:hover{color:#359e8f;}
.fileRemove{background-color: #359e8f;position: relative;margin: 0 0 0 0.5rem;color: #fff !important;width: 2rem;height: 2rem;display: flex;align-items: center;justify-content: center;text-decoration: none !important;border-radius: 4px;font-size: 1.2rem;}
.fullInput{width: 100%;}
.label__file {cursor: pointer; display: flex; width: 100%; border: 1px solid #ddd; height: 5rem;}
.labelFile__tit {display: flex; align-items: center; justify-content: center; width: 10rem; height: 100%; color: #fff; font-size: 1.4rem; font-weight: 500; background: #666666;}
.labelFile__txt {display: flex; width: calc(100% - 10rem); align-items: center; padding: 0 1rem; font-size: 1.4rem; color: #999999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.cf__photoWrap {display: flex; align-items: center;}
.cf__line .profile__photo {border: 1px solid #ddd; border-radius: 0; width: 16.6rem; height: 14.6rem;}
.cf__photoTxt {font-size: 1.6rem; font-weight: 400; color: #999999; padding: 0 0 0 3rem;}
.cf__coverImage {}
.cf__coverImage p {font-size: 16px; color: #999990;margin: 5px 0;}
.cf__coverImage .cf__imageUrl { display: flex; }
.cf__coverImage .cf__imageUrl button { white-space: nowrap; background-color: #349e8f; color: #ffffff; padding: 0 20px; border-radius: 0 5px 5px 0;}
.contest__formWrap .cf__flexBox{display: flex;width: 100%;gap: 2rem;}
.contest__formWrap .cf__comboBox{height: 17rem;width: 100%;background: #fff;font-size: 1.6rem;font-weight: 500;}
.contest__formWrap .cf__comboBox option{padding: 0.5rem 0;color: #000;}
.contest__formWrap .cf_selectWrap{width: calc((100% - 4rem)/3);}
.cf__etc{font-size: 1.6rem;margin: 1.2rem 0rem;color: #999999;letter-spacing: 0.025rem;line-height: 1.5;}
.cf__etc .underPoint{letter-spacing: 0.025rem;}
.underPoint{color: #359e8f;text-decoration: underline;}
.docFileArea{flex-direction: column;}
.lbjs {margin: 0px;border: 1px solid #CCC;border-radius: 4px;background: #FCFCFC;height: 100%;max-height: 17rem;}
.lbjs .lbjs-list {margin: 0px;overflow: auto;height: 100%;}
.lbjs .lbjs-list .lbjs-item {margin: 0px;padding: 7px 5px;font-size: 1.6rem;cursor: pointer;color: #999999;font-family: 'Poppins', sans-serif;}
.lbjs .lbjs-list .lbjs-item.selected {background : #999999;color: #fff;}
.lbjs .lbjs-list .lbjs-item:hover {background : #999999;color: #fff;}
.lbjs .lbjs-searchbar-wrapper {margin: 0px;margin-right: 12px;}
.lbjs .lbjs-searchbar {margin: 0px;margin-bottom: 10px;width: 100%;padding: 3px 5px;border: 1px solid #ccc;}
.components__innerBox{display: flex;width: 100%;}
.components__innerBox .cf__lineInner.fManual{flex: none;}
.cf__lineInner.fSmall{width: 6rem;margin: 0 0 0 0.5rem;}
.cf__lineInner.fSmall input[type="text"]{padding: 0 1rem; text-align: center;}
.cf__lineWrap.components{flex-wrap: wrap;position: relative;}
.cf_componentsBoxWrap{width: 100%;margin: 2.5rem 0 0 0;}
.cf_componentsBox{width: 100%;border-bottom: 1px solid #eeeeee;padding: 0 0 1.5rem 0;}
.cf_componentsBox + .cf_componentsBox{margin: 1.5rem 0 0 0;}
.cf_componentsBox--inBox{display: flex;justify-content: space-between;margin: 0 0 0.5rem 0;align-items: center;}
.cf_componentsBox--titleBox{display: flex;font-size: 1.6rem;font-weight: 600;align-items: center;flex-wrap: wrap;}
.cf_componentsBox__title{display: inline-flex;align-items: center;font-size: 1.6rem;font-weight: 600;color: #222222;}
.cf_componentsBox__title + .cf_componentsBox__title{position:relative;padding: 0 0 0 3rem;}
.cf_componentsBox__title + .cf_componentsBox__title::before{content:"";position:absolute;left:1.5rem;top:0.3rem;height: 1.2rem;width: 0.1rem;background-color: #dddddd;}
.cf_componentsBox__text{font-size: 1.6rem;color: #666666;margin: 0 0 1rem 0;}
.cf_componentsBox__title.file img{margin: 0 0.5rem 0 0;}
.cf_componentsBox__title span{font-size: 1.6rem;font-weight: 600;color: #222222;}
.cf_componentsBox--LinkBox{background-color: #eef6f5;border-radius: 4px;padding: 1rem;}
.cf_componentsBox__Link{font-size: 1.3rem;color: #349e8f;align-items: center;display: flex;flex-wrap: wrap;}
.cf_componentsBox__Linkicon{margin: 0 1rem 0 0rem;width: 1.5rem;}
.cf_componentsBox__LinkTxt{width: calc(100% - 2.5rem);word-break: break-all;font-weight: 500;letter-spacing: 0.015rem;}
.onlyPc{display: none;}
.labelChkWrap {position: relative; display: flex; margin: 2rem 0 0;}
.labelChk {display: flex; align-items: center; cursor: pointer;}
.labelChk__box {position: relative; display: inline-block; width: 2rem; height: 2rem; border: 1px solid #ddd;}
.labelChk__box::after {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 1rem; height: 1rem; background: #349e8f; transition: .3s ease; opacity: 0;}
input:checked + .labelChk__box::after {opacity: 1;}
.labelChk__txt {font-size: 1.6rem; font-weight: 400; color: #349e8f; margin: 0 0 0 1rem;}
.btnRightWrap {position: relative; display: flex; max-width: 800px; width:calc(100% - 20px); margin: 2rem auto 0; justify-content: flex-end; height: 5.2rem;}
.btnWrap{position: relative; display: flex; max-width: 800px; width:calc(100% - 20px); margin: 2rem auto 0; justify-content: center; height: 5.2rem;}
.btnWrap > * ,
.btnRightWrap > * {width: 15.6rem; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 1.6rem; font-weight: 500; color: #fff;}
.btnWrap > * + *,
.btnRightWrap > * + * {margin: 0 0 0 1rem;}
.btnSave {background: #349e8f;}
.btnNext {background: #999999;}
.btnPrev {position: absolute; left: 0; top: 0; background: #999999; height: 100%;}
.se__btnSubmit {background: #fff; border: 2px solid #349e8f; color: #349e8f;}
.labelChkWrap .warningTxt {position: absolute; left: 0; top: 100%;}
.cf__radioWrap {display: flex; flex-wrap: wrap;}
.labelRdi {display: flex; cursor: pointer; align-items: center; margin: 0 2rem 1rem 0;}
.labelRdi:last-child {margin: 0 0 1rem;}
.labelRdi__box {position: relative; display: inline-block; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid #222222;}
.labelRdi__box::after {content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 1.4rem; height: 1.4rem; background: #222222; border-radius: 50%; opacity: 0; transition: .3s ease;}
input:checked + .labelRdi__box::after {opacity: 1;}
.labelRdi__txt {margin: 0 0 0 0.8rem; font-size: 1.6rem; font-weight: 400; color: #666666;}
.cf__tit {display: block; font-size: 1.7rem; font-weight: 600; color: #222222; width: 100%;}
.cf__btnCode {width: 12rem; height: 5rem; align-self: flex-end; margin: 0 0 0 1rem; border-radius: 4px; background: #666666; color: #fff; font-size: 1.4rem; font-weight: 500;}
.view__inner {display: flex; background: #fff; margin: 5rem auto 0; border: 1px solid #dddddd; justify-content: space-between;}
.view__left {position: relative; width: 25rem; }
.viewNav {position: absolute; left: 0; top: 0; background: #fff; width: 100%; transition: .4s ease;}
.viewNav__list {padding: 3.5rem 0;}
.viewNav__item {cursor: pointer; padding: 1.4rem 2rem;}
.viewNav__item span {font-size: 1.6rem; font-weight: 500; color: #999999; transition: .3s ease;}
.viewNav__item.on span,
.viewNav__item:hover span {color: #359e8f;}
.viewNav__btm {padding: 0 2rem; display: flex; align-items: center;}
.viewNav__btm > * {font-size: 0;}
.btnMyProject{border-radius: 4px;margin: 3rem 0 0 0;width: calc(100% - 1rem);overflow: hidden;}
.btnMyProject--items{}
.btnMyProject--items + .btnMyProject--items{border-top: 1px solid #fff;}
.btnMyProject--items > a{font-size: 1.4rem;padding: 0 1rem;width: 100%;display: flex;align-items: center;background-color: #ddd;color: #444;width: 100%;height: 4rem;font-weight: 500;}
.btnMyProject--items > a img{margin: 0 0.7rem 0 0;}
.btnMyProject--items > a + a{}
.btnMyProject--items > a:hover{color: #fff;background-color: #349e8f;}
.userInfoPart .btnMyProject{display: none;}
.view__cnts {flex: 1; border: 1px solid #ddd; border-top: none; border-bottom: none;word-break: normal !important;width: calc(100% - 40rem - 25rem);}
.userInfoPart {padding: 4rem; border-bottom: 1px solid #ddd;}
.userInfoPart.ver2 {padding: 0; border-bottom: 0; align-items: center;}
.info__inner {display: flex;}
.info__inner{position: relative;}
.info__inner.markProject::before {content: "UCC";top: -0.5rem;left: auto;right: 1.5rem;}
.info__inner.markReseller::before {content: "VAR";top: -0.5rem;left: auto;right: 1.5rem;}
.info__inner.markWcc::before {content: "WCC";top: -0.5rem;left: auto;right: 1.5rem;}
.vp__photo {width: 6rem; height: 6rem; border-radius: 50%; background-position: center !important; background-size: cover !important;}
.vp__txtWrap {padding: 0 0 0 2rem;}
.userInfoPart.ver2 .vp__name {width: 100%;}
.userInfoPart.ver2 .vp__txtWrap {display: flex; align-items: center; flex-wrap: wrap;}
.vp__time {display: block; font-size: 1.6rem; font-weight: 400; color: #999999;}
.vp__name {display: block; font-size: 2rem;}
.vp__txtWrap .vp__name {margin-bottom:0.5rem;}
.vp__introTxt {font-size: 1.6rem; font-weight: 400; color: #666666; margin: 0 0 1.5rem;}
.vp__bottom {display: flex; justify-content: space-between; flex-wrap: wrap;}
.vp__btmList {display: flex; margin: 0 3rem 0 0; flex-wrap: wrap;}
.vp__btmItem {font-size: 1.6rem; font-weight: 500; color: #222222;}
.vp__btmItem + .vp__btmItem {margin: 0 0 0 1.2rem;}
.vp__btmItem a {color: #349e8f;}
.vp__btmBtn {color: #349e8f; font-size: 1.6rem;}
.vp__etc{margin: 2rem 0 0 0;}
.vp__etcInner{display: flex;align-items: center;}
.vp__etc .target__link__img{margin: 0 0 0 0rem;}
.vp__etc .target__link{margin: 0 0 0 1rem;width: 2.7rem;height: 2.7rem;position: relative;}
.vp__etcTxt{font-size: 2rem;font-weight: 500;}
.vc__article {padding: 6rem 5rem;}
.vc__tit {font-size: 4rem; font-weight: 600; color: #222222; line-height: 1.3; margin: 0 0 1.5rem;}
.vc__titTxt {font-size: 1.8rem; font-weight: 400; color: #666666; margin: 0 0 3rem; line-height: 1.45;}
.vc__target {margin: 0 0 4rem;}
.creditPart {margin: 0 0 4rem;}
.target__tit {display: block; font-size: 2.6rem; font-weight: 600; color: #222222; margin: 0 0 3rem;}
.target__subTit {display: block; font-size: 2rem; font-weight: 600; color: #222222; margin: 2rem 0;}
.target__inner+.target__subTit {margin-top:3rem;}
.target__img {position: absolute;left: 0;top: 1rem;display: flex;align-items: center; margin: 0 0.5rem 0 0;}
.target__img img {position: absolute; left: 0; height: 3.5rem; object-fit:contain; object-position: center center; display: flex; align-items: center; justify-content: center; margin: 0 1rem 0 0; max-width: 3.5rem; width: 3.5rem;}
.target__name {display: inline-block;}
.target__colorTxt {font-size: 1.8rem; color: #349e8f; margin: 0 14rem 0 4.5rem;}
.target__colorTxt.nLink{color: #222;}
.target__inner.nReg .target__colorTxt{margin: 0 14rem 0 0; color:#939393;}
.target__inner.nReg .target__count{color:#939393;}
.target__inner.nReg .target__txt {color: #939393;}
.target__txt {font-size: 1.6rem; font-weight: 400; color: #666666;}
.target__etc + .target__txt {margin-top:0.5rem;}
.target__txt .link {color: #349e8f;}
.target__etc{position: absolute;right: 0;top: 1rem;display: flex;align-items: center;z-index: 3;width: 12rem;}
.target__count{position: absolute;font-size: 1.6rem; margin: 0 1.8rem 0.4rem 0;color: #222;left: 0;}
.target__link{width: 3.5rem;position: absolute;right: 0;height: 3.5rem;background-color: #fff;border: 1px solid #ddd;border-radius:4px;display: flex;align-items: center;justify-content: center;text-align: center;margin: 0 1rem 0 0;}
.target__link__img{width: 2.2rem;height: 2.2rem;}
.target__inner{position: relative;}
.target__line {display: block; border: none; height: 1px; background: #dddddd; margin: 1.5rem 0;}
.dotListWrap {margin: 3rem 0;}
.dotList__tit {display: block; font-size: 1.6rem; font-weight: 600; color: #222222; margin: 0 0 0.5rem;}
.dotItem {position: relative; padding: 0 0 0 1rem; font-size: 1.6rem; font-weight: 400; color: #666666;}
.dotItem + .dotItem {margin: 0.5rem 0 0;}
.dotItem::before {content: ""; position: absolute; top: 1rem; width: 0.3rem; height: 0.3rem; background: #747474; left: 0;}
.dotItem a {display: inline-block; position: relative; color: #349e8f;}
.dotItem a::after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #349e8f;}
.cmt__txtarea {width: 100%; padding: 1rem; border: 1px solid #ddd; font-size: 1.6rem; font-weight: 400; color: #222; height: 10rem;}
.cmt__txtarea::placeholder {color: #ccc;}
.cmt__btnWrap {display: flex; justify-content: flex-end; margin: 1rem 0 0;}
.cmt__btnSubmit {justify-content: center; height: 3.8rem; padding: 0 1.5rem; border-radius: 4px; background: #349e8f; color: #fff; font-size: 1.4rem;}
.cmt__txt {width: 100%; font-size: 1.6rem; font-weight: 400; color: #666666; line-height: 1.8; margin: 3rem 0 0;}
.vp__txtWrap.cmt {padding: 1rem 0 2rem 2rem; flex: 1;}
.cmt__item {padding: 2rem 0 0; border-bottom: 1px solid #ddd;}
.cmt__btnWrap {display: flex;}
.cmt__btnWrap > * {background: none; font-size: 1.6rem; font-weight: 600; color: #349e8f;}
.cmt__btnWrap > * + * {margin: 0 0 0 2rem;}
.cmt__list2 {background: #f6f6f6; border-top: 1px solid #ddd;}
.cmt__list3 {border-top: 1px solid #ddd;}
.cmt__item2 {position: relative; padding: 3rem 0 0; background: #f6f6f6 url('/images/sub/contest/comment_arrow.png') no-repeat; background-position: left 3rem top 5rem; border-bottom: 1px solid #ddd;}
.cmt__item3 {position: relative; padding: 3rem 0 0; background: #f6f6f6 url('/images/sub/contest/comment_arrow.png') no-repeat; background-position: left 8rem top 5rem; border-bottom: 1px solid #ddd;}
.cmt__item2:last-child {border: none;}
.cmt__item3:last-child {border: none;}
.cmt__item2 .userInfoPart {padding: 0 0 0 7rem;}
.cmt__item3 .userInfoPart {padding: 0 0 0 12rem;}
.cmt2part {background: #f6f6f6; border-top: 1px solid #ddd; padding: 2rem;}
.cmt2part .target__subTit {margin: 0rem 0 1rem 0; }
.target1__list {display: flex; flex-wrap: wrap;}
.target1__item {margin: 0 4rem 1rem 0;}
.target1__item:last-child {margin: 0 0 1rem;}
.target1__itemTit {font-size: 1.6rem; font-weight: 500; color: #222; margin: 0 0 0.5rem;}
.target1__itemList {display: flex; flex-wrap: wrap;}
.target1__greyBox {display: flex; font-size: 1.4rem; font-weight: 400; color: #fff; height: 3.8rem; padding: 0 1rem; border-radius: 4px; align-items: center; background: #999999;}
.target1__greyBox + .target1__greyBox {margin: 0 0 0 1rem;}
.rightNav {width: 40rem; padding: 4rem;}
.vr__navitem {margin: 0 0 1.5rem;}
.vr__navTit {font-size: 1.6rem; font-weight: 500; color: #222222; margin: 0 0 1rem;}
.vr__linkList {display: flex; flex-wrap: wrap;}
.vr__link {display: flex; background: #999999; color: #fff; height: 3.8rem; align-items: center; justify-content: center; padding: 0 1rem; border-radius: 4px; font-size: 1.4rem; margin: 0 1rem 1rem 0;}
.vr__link:last-child {margin: 0 0 1rem;}
.vr__navList a.vr__link:not([href]) {cursor:default;}
.vr__navPhotoList li + li {margin: 1rem 0 0;}
.vr__navPhotoLink {display: flex; align-items: center;}
.vr__navPhoto {width: 9rem; height: 6.8rem; background-position: center !important; background-size: cover !important;}
.vr__photoTxt {flex: 1; padding: 0 0 0 2rem; font-size: 1.4rem; line-height:1.3; font-weight: 400; color: #666666; transition: .3s ease; word-break:break-all;}
.vr__navPhotoLink:hover .vr__photoTxt {font-weight: 500; color: #222222;}
.vr__btmBtn {display: flex; margin: 3rem 0 0; align-items: center;}
.vr__btmBtnTxt {font-size: 1.6rem; font-weight: 500; color: #222222; margin: 0 1.5rem 0 0;}
.document__item {display: flex; justify-content: space-between; background: #f8f8f8; padding: 1.5rem 2rem;}
.document__item + .document__item {margin: 1rem 0 0;}
.document__tit {display: block; font-size: 1.6rem; font-weight: 600; color: #222222;}
.document__txt {font-size: 1.6rem; color: #666666; font-weight: 400; color: #666666;line-height: 1.6;}
.document__linkWrap {display: flex; align-items: center;}
.ducument__link {display: inline-block; position: relative;}
.ducument__link + .ducument__link {margin: 0 0 0 3rem;}
.ducument__link img {position: absolute; left: 0; top: 0; width: 100%;}
.profileArea {display: flex; padding: 5rem 20rem; min-height: 40rem;}
.profile__photo {width: 12rem; height: 12rem; border-radius: 50%; overflow: hidden; background: url('/images/sub/member/noImage.jpg') no-repeat; background-size: cover !important; background-position: center !important; margin: 0 5rem 0 0; position: relative;}
.profile__photo.uploaded:before{content: ""; width: 100%; height: 100%; background: url('/images/sub/member/update_photo.png') no-repeat center center; display: inline-block; position:absolute; left: 0; top:0px; opacity: 0.6; mix-blend-mode:luminosity}
.btns.myPicBtnDel>*{display: flex; margin:1rem auto 0; height: 3rem; background: #349e8f; border-radius: 4px; color: #fff; font-weight: 400; font-size: 1.6rem; width: 10rem; justify-content: center; align-items: center;}
.profile__txtWrap {padding: 3rem 0 0; flex: 1;}
.profile__txtWrap.mid { width: 43rem; margin: 0 2rem 0 0; }
.profile__txt--name {display: block; font-size: 3rem; font-weight: 600; color: #222222;}
.profile__amountList {display: flex;flex-wrap: wrap;}
.profile__amountList li {font-size: 1.8rem; font-weight: 500; color: #222222;width: 33.3333%;}
.profile__amountList li:nth-child(n+4) {margin-top: .5em;}
.profile__amountLink {color: #349e8f;}
.btn__edit {display: flex; align-items: center; justify-content: center; width: 15rem; height: 5.4rem; background: #349e8f; color: #fff; font-size: 1.8rem; border-radius: 4px; margin: 2rem 0 0;}
.btn__follow {display: flex; align-items: center; justify-content: center; width: 15rem; height: 5.4rem; background: #349e8f; color: #fff; font-size: 1.8rem; border-radius: 4px; margin: 2rem 0 0;cursor: pointer;}
.btn__unfollow {display: flex; align-items: center; justify-content: center; width: 15rem; height: 5.4rem; border:3px solid #349e8f; color: #fff; font-size: 1.8rem; border-radius: 4px; margin: 2rem 0 0;cursor: pointer;color: #349e8f}
.profile__miniTit {font-size: 1.6rem; font-weight: 500; color: #222222; display: block;}
.profile__txt {font-size: 1.6rem; font-weight: 400; color: #666666;}
.profile__txt.green {background: #349e8f; color: #fff; padding: 1rem 1.5rem; border-radius: 4px; height: auto;}
.profile__infoList {margin: 4rem 0 0;}
.profile__infoList li {display: flex;}
.profile__infoList .profile__miniTit {min-width: 8rem;}
.profile__infoList .profile__txt {flex: 1;}
.profileTap {display: flex; justify-content: center; min-height: 6rem; background: #fff; flex-wrap: wrap;}
.profileTap.ver2 {padding: 4rem 0 0; min-height: 10rem; background: #fff;}
.profileTap li {position: relative; display: flex; align-items: center; justify-content: center; margin: 0 4rem 0 0; padding: 0 0 1rem; cursor: pointer; transition: .3s ease;}
.profileTap li:last-child {margin: 0; padding: 0 0 1rem;}
.profileTap li::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 0.3rem; background: #359e8f; opacity: 0; transition: .3s ease; visibility: hidden;}
.profile__txt {font-size: 1.6rem; font-weight: 500; color: #999999; transition: .3s ease;}
a.profile__txt {display: flex; height: 100%; align-items: center; justify-content: center;}
.profileTap li.active::after {opacity: 1; visibility: visible;}
.active .profile__txt {color: #222222;}
.active .profile__txt.green {color: #fff;}
.iconWarning {position: absolute; display: flex; left: calc(100% + 0.2rem); top: 1.5rem; font-size: 1.2rem; width: 1.8rem; height: 1.8rem; background: #ed1c24; border-radius: 50%; color: #fff; align-items: center; justify-content: center; font-weight: 700;}
.form__searchWrap {position: relative; width: 100%;}
.searchRes__wrap {position: absolute; left: 0; width: 100%; background: #fff; max-height: 20rem; overflow: auto; border: 1px solid #ddd; border-top: none; z-index: 3;}
.searchRes__list {}
.searchRes__list button {display: block; padding: 0.8rem 1rem; font-size: 1.6rem; transition: .3s ease; cursor: pointer; width: 100%; text-align: left; background: #fff;}
.searchRes__list button:hover {background: #eaeaea;}
.tapPart {background: linear-gradient(to bottom, #e7f3f1 0, #f4f9f8 20%, #fff); padding: 6rem 0 6rem; transition: .3s ease; opacity: 0; display: none;}
.tapPart.ver2 {background: none; padding: 8rem 0 0;}
.tapPart.on {display: block;}
.tapPart.visible {opacity: 1;}
.projectList {display: flex; flex-wrap: wrap;}
.projectItem {width: calc((100% - 6rem) / 4); margin: 0 2rem 2rem 0;}
.projectItem:nth-of-type(4n) {margin: 0 0 2rem;}
.projectItem a:hover .project__cntsWrap {opacity: 1;}
.projectItem a{position: relative;}
.projectItem.draft a::before{content:"";position:absolute;display:block;width: 100%;height: 100%;background-color: rgba(0,0,0,0.6);z-index: 2;}
.projectItem.draft a::after{content:"draft";position:absolute;display:block;padding: 0.5rem 1rem;background-color: #519b8e;border-radius: 4px;color: #fff;bottom: 1.5rem;right:1.5rem;z-index:3;font-size: 1.6rem;}
.projectList--items{position: relative;}
.markReseller::before{content:"VAR";position:absolute;display:block;padding: 0.5rem 1rem;background-color: #34729e;border-radius: 4px;color: #fff;top: 1.5rem;left:1.5rem;z-index:3;font-size: 1.6rem;}
.markProject::before{content:"UCC";position:absolute;display:block;padding: 0.5rem 1rem;background-color: #519b8e;border-radius: 4px;color: #fff;top: 1.5rem;left:1.5rem;z-index:3;font-size: 1.6rem;}
.markWcc::before{content:"WCC";position:absolute;display:block;padding: 0.5rem 1rem;background-color: #519b8e;border-radius: 4px;color: #fff;top: 1.5rem;left:1.5rem;z-index:3;font-size: 1.6rem;}
body .select2-container{width: 100% !important;max-width: 31rem;}
body .select2-container--default .select2-selection--single{border-radius: 0 !important;border: 0.1rem solid #ddd;}
body .select2-container--default .select2-selection--single .select2-selection__rendered{width: 100%;height: 5rem;padding: 0 2rem 0 1rem;font-size: 1.6rem;font-weight: 400;color: #222;}
body .select2-search--dropdown{padding: 1rem;}
body .select2-container--default .select2-selection--single .select2-selection__arrow,
body .select2-container--default .select2-selection--single .select2-selection__rendered,
body .select2-container .select2-selection--single{height: 5rem;line-height: 4.8rem;}
body .select2-container--default .select2-results>.select2-results__options{font-size: 1.6rem !important;}
body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background-color: #359e8f;}
body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable .part-name_txt{color: #fff;}
body .select2-container--default .select2-results__option--highlighted .part-name_txt{color: #fff;}
body .select2-container--default .select2-results__option--highlighted .part-link{color: #fff;}
body .select2-container--default .select2-selection--single .select2-selection__rendered{background: url(/images/sub/contest/select_arrow.png) no-repeat;background-position: right 1rem center;}
body .select2-container--default .select2-selection--single .select2-selection__arrow{display: none;}
.select2-results__option{font-size: 1.5rem !important;}
.form__list {width: calc(100% - 20px); max-width: 600px; margin: 0 auto;}
.form__item {display: flex; flex-wrap: wrap;}
.form__item + .form__item {margin: 4rem 0 0;}
.form__tit {display: block; width: 100%; font-size: 1.6rem; font-weight: 500;  margin: 0 0 1rem;}
.form__list select,
.form__list input[type='password'],
.form__list input[type='text'],
.form__list textarea { width: 100%; border: 1px solid #dddddd; height: 7rem; padding: 1rem; font-size: 1.6rem;}
.form__list input + input {margin: 1rem 0 0;}
.form__list input.readonly {background: #eaeaea;}
.form__list select {background: #fff url('/images/sub/icon_select.png') no-repeat; background-position: center right 1rem;}
.form__subTxt {display: flex; justify-content: space-between; width: 100%; margin: 1.5rem 0 0;}
.form__subTxt p {font-size: 1.6rem; font-weight: 400; color: #999999;}
.btm__btnWrap {display: flex; justify-content: center; margin: 6rem 0 0;}
.btnCancel {display: flex; align-items: center; justify-content: center; width: 15.6rem; background: #999999; border-radius: 4px; font-size: 1.6rem; font-weight: 600; color: #fff;}
.btm__btnWrap .btnSubmit {width: 15.6rem}
.btnCancel + .btnSubmit {margin: 0 0 0 1rem;}
.form__item .social__btnWrap {width: 100%; text-align: center;}
.profile__topPhoto {text-align: center; padding: 0 0 5.5rem;}
.label__photoInput {text-align: center; display: inline-block; cursor: pointer; }
.label__photoInput .profile__photo {background: url('/images/sub/member/update_photo.png') no-repeat; margin: 0;}
.etc {background: #f2f2f2;}
.etc__inner {margin-top: 4rem; background: #fff; padding: 4rem; border-radius: 4px;}
.noPost {font-size: 2rem; text-align: center; width: 100%; padding: 5rem 0 0; font-weight: 500;}
.preparing {width: calc(100% - 20px); display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 500; height: calc(100vh - 50rem); min-height: 40rem;}
.cropLy-header {display: flex; justify-content: space-between; align-items: center; margin: 0 0 2rem; padding: 0 0 1rem; border-bottom: 1px solid #ddd;}
.cropLy-title {font-size: 2rem; font-weight: 500;}
.cropLy-title + button {background: none; font-size: 2rem;}
.cropLy-footer {display: flex; justify-content: flex-end; margin: 1rem 0 0; gap: 1rem; padding: 1rem 0 0; border-top: 1px solid #ddd;}
.cropLy-footer button {display: flex; align-items: center; justify-content: center; padding: 1rem 2rem; border-radius: 4px; color: #fff; background: #6c757d; font-size: 1.6rem; }
.cropLy-footer button + button {background: #349e8f;}
.newsList__wrap {background: #fff; padding: 3rem 0 10rem;}
.newsList {text-align: left;}
.newsList__link {position: relative; padding: 2rem 10rem; display: flex; justify-content: space-between; align-items: center; transition: .3s ease;}
.newsList__link:hover {background: #eaeaea;}
.newsList__link::after {content: ""; position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0); width: calc(100% - 20rem); height: 1px; background: #ddd;}
.newsList__photo {max-width: 30rem; width: 100%; height: 22.6rem; background-position: center !important; background-size: cover !important; order: 2;}
.newsList__tit {display: block; font-size: 3rem; color: #222222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 0 2rem;}
.newsList__txt {font-size: 1.8rem; font-weight: 400; color: #666666;}
.newsList__txtWrap {position: relative; padding: 0 2rem 0 0; max-width: calc(100% - 40rem);min-height: 20rem;}
.newsList__date {position: absolute; left: 0; bottom: 0; font-size: 1.6rem; font-weight: 400; color: #666666;}
.pagingWrap {display: flex; justify-content: center; margin: 5rem 0 0; height: 4rem;}
.pagingList {display: flex; align-items: center; margin: 0 1rem; height: 100%;}
.pagingList li {height: 100%; font-size: 1.6rem;}
.pagingWrap a {position: relative; display: flex; height: 100%; width: 4rem; align-items: center; justify-content: center;}
.pagingWrap a::after {content: ""; position: absolute; box-sizing: border-box; width: calc(100% + 1px); height: calc(100% + 1px); left: 0; top: 0; border: 1px solid #ddd;}
.pagingWrap a.disabled{cursor: default;}
.pagingWrap>a+a{margin-left:-1px;}
.paging__current {position: relative; display: flex; width: 4rem; height: 100%; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 400; background: #222222; color: #fff;}
.paging__current::after {content: ""; position: absolute; box-sizing: border-box; width: calc(100% + 1px); height: calc(100% + 1px); left: 0; top: 0; border: 1px solid #222222;}
.view__inner.search {display: flex;}
.sr__sort {padding: 6rem 3rem; border-right: 1px solid #ddd; width: 30rem;}
.sr__searchitem {padding: 3rem 0; border-bottom: 1px solid #ddd;}
.sr__searchitem input{background: #f6f6f6; border: 1px solid #e6e6e6; height: 4rem; padding: 0 2rem; font-size: 1.6rem; color: #333; font-weight: 400; width:100%}
.sr__sortItem {padding: 3rem 0; border-bottom: 1px solid #ddd;}
.sr__sortItem:last-child {border: none;}
.sr__bigTit {display: block; font-size: 1.8rem; font-weight: 600; color: #222222;}
.sr__tit {font-size: 1.6rem; font-weight: 600; color: #222222; margin: 0 0 1rem;}
.sr__sort .labelChk__txt {font-size: 1.6rem; font-weight: 400; color: #666666; flex: 1;}
.sr__sort .labelChk {padding: 0.8rem 0;}
.btn__srMore {font-size: 1.3rem; font-weight: 500; color: #999999; background: none; margin: 1rem 0 0 ;}
.btn__srReset {display: flex; align-items: center; background: none;  width: 9rem; height: 3.6rem; background: #f5f5f5; border: 1px solid #e6e6e6; border-radius: 4px; justify-content: center; }
.btn__srReset span {font-size: 1.3rem; font-weight: 500; color: #222222; margin: 0 0.5rem 0 0; letter-spacing: 0.5px;}
.sr__cnts {flex: 1; padding: 5rem;}
.sr__titWrap {position: relative; margin: 0 0 2rem; padding: 0 18rem 2rem 0;  border-bottom: 1px solid #ddd;}
.src__bigTit {font-size: 4rem; font-weight: 700; color: #222222; margin: 0 0 1.5rem;}
.src__subTxt {font-size: 1.6rem; font-weight: 400; color: #222222;}
.src__subTxt span {color: #349e8f; font-weight: 600;}
.src__select {position: absolute; right: 0; bottom: 2rem;width: 16.6rem; height: 5.6rem; background: #f6f6f6 url('/images/common/selectArrow.png') no-repeat; background-position: right 2rem center; padding: 0 2rem; border: 1px solid #e6e6e6; font-weight: 400; color: #999999; font-size: 1.6rem;}
.src__link {display: flex; padding: 2.5rem 0; transition: .3s ease;}
.src__link:hover {background: #eaeaea;}
.src__photo {width: 30rem; height: 21.6rem; background-position: center !important; background-size: contain !important; align-self: center;}
.src__txtWrap {display: flex; flex-wrap: wrap; padding: 0 5rem; flex: 1;}
.src__date {font-size: 1.6rem; font-weight: 400; color: #666666;}
.sr__cnts .project__infoList {padding: 0; border: none; align-self: flex-end;}
.src__itemTit {display: block; font-size: 2rem; font-weight: 600; color: #222222; margin: 0 0 2rem;}
.src__itemTit span { color: #349e8f }
.src__itemTxt {font-size: 1.6rem; font-weight: 400; color: #666666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.5; max-height: 4.5em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;width: 100%;}
.src__itemTxt span { color: #349e8f }
.src__item.type-F .src__txtWrap {padding-left: 1rem;}
.sr__searchCateButton{position: absolute;top: 0.7rem;right: 0;display: none;}
.sr__titWrap{}
.sr__closeArea{display: none;}
#isPassChange {display: flex; height: 4rem; background: #349e8f; border-radius: 4px; color: #fff; font-weight: 600; font-size: 1.6rem; width: 15.6rem; justify-content: center; align-items: center;}
.reserve__table {width: 100%;  border-top: 2px solid #222222;}
.reserve__table tr {border-bottom: 1px solid #ddd;}
.reserve__table th {width: 20rem; background: #eaeaea; height: 6rem; text-align: left; padding: 0 2rem; font-size: 1.6rem; font-weight: 500;}
.reserve__table td {padding: 1rem;}
.reserve__table input[type="text"] {width: 44.5rem; height: 4.2rem; padding: 0 1rem; border: 1px solid #dddddd; font-size: 1.6rem;}
.reserve__table textarea {padding: 1rem; width: 100%; height: 10rem; border: 1px solid #ddd; font-size: 1.6rem;}
.form__btnWrap {display: flex; justify-content: center; gap: 1rem; margin: 2rem 0 0;}
.form__btnWrap button:nth-of-type(1) {background: #999999;}
.form__btnWrap button {display: flex; height: 6rem; background: #349e8f; border-radius: 4px; color: #fff; font-weight: 600; font-size: 1.6rem; width: 15.6rem; justify-content: center; align-items: center;}
#fileArea .file {position: relative; display: flex;}
#fileArea .file + .file {margin: 1rem 0 0;}
#fileArea .file__label {display: flex; cursor: pointer;}
.reserve__table #fileArea input[type="text"] {width: 34rem;}
#fileArea .btnFind {display: flex; background: #666666; align-items: center; padding: 0 1.5rem; color: #fff;}
#fileArea .btnAdd {position: absolute; display: flex; right: 0; top: 0; height: 100%; background: #666666; color: #fff; padding: 0 1.5rem; color: #fff; align-items: center; justify-content: center;}
.doneConts { text-align: center; padding: 15rem 0 0;}
.doneConts p {font-size: 1.6rem; font-weight: 400; color: #666666; margin: 3rem 0; line-height: 1.4;}
.doneConts p .mailLink {color: #349e8f; font-weight: 500;}
.contestLink {display: flex; align-items: center; justify-content: center; width: 15.6rem; height: 5.2rem; justify-content: center; align-items: center; color: #fff; background: #349e8f; margin: 0 auto; border-radius: 4px; font-size: 1.6rem; font-weight: 500; letter-spacing: 0; text-transform: uppercase;}
.labelRdi__wrap {display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.labelRdi__item {display: flex; width: 100%; align-items: center;}
.labelRdi {cursor: pointer; display: flex; align-items: center;}
.labelRdi__circle {position: relative; width: 2rem; height: 2rem; border: 1px solid #ddd; border-radius: 50%;}
.labelRdi__circle::after {content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 50%; height: 50%; background: #349e8f; border-radius: 50%; opacity: 0; transition: .3s ease;}
input:checked + .labelRdi__circle::after {opacity: 1;}
.labelRdi__item input {flex: 1; height: 3rem;}
#passEnterArea {position: relative; padding: 0 0 2rem; gap: 1rem;}
#passEnterArea .warningTxt {position: absolute; bottom: 0; left: 0;}
.form__list #passEnterArea input + input {margin: 0;}
#passEnterArea .form__tit {margin: 0;}
.reference__Cont{margin: 1rem 0 0;padding: 5rem 10rem 15rem;background: #fff;border: 1px solid #e6e6e6;width: 100%;}
.projectListBox{margin: 0 0 4.5rem 0;}
.projectListImgBox{display: flex;}
.projectListTextBox{width: calc(100% - 20rem);}
.projectList__Title{font-size: 3rem;font-weight: 600;color: #222222;margin: 0 0 1.5rem 0;}
.projectList__txt{font-size: 1.6rem;font-weight: 400;color: #666666;line-height: 1.6;}
.projectList__txt + .projectList__txt{margin: 1.5rem 0 0 0;display: inline-block;}
.projectList__img{}
.projectList__Link{display: inline-block;color: #349e8f;font-size: 1.6rem;}
.projectList__subTitle{font-size: 1.8rem;font-weight: 600;color: #222;margin: 0 0 1.5rem 0;}
.project__ul{margin: 1.25rem 0 0 0;}
.project__ll{font-size: 1.6rem;color: #666666;}
.project__ll + .project__ll{margin: 1rem 0 0 0;}
.projectImgList--ul{display: flex;align-items: center;justify-content: space-between;padding: 7rem 0;}
.projectImgList--li{text-align: center;flex: 1;}
.projectImgList--li + .projectImgList--li{border-left: 1px solid #e6e6e6;}
.projectImgList--li__txt{font-size: 1.8rem;font-weight: 600;text-align: center;margin: 2rem 0 0 0;}
.projectLinkList{width: 100%;}
.projectLinkList--li{display: flex;padding: 2.2rem 1.8rem;background-color: #f8f8f8;width: 100%;}f.BtndeleteAll::before
.projectLinkList--li + .projectLinkList--li{margin: 1rem 0 0 0;}
.projectLinkListBox__Link{}
.projectLinkListBox__tit{font-size: 1.6rem;color: #222222;font-weight: 600;margin: 0 1.5rem 0 0;}
.projectLinkListBox__Link{font-size: 1.6rem;color: #666666;}
.projectLink__LinkArea .projectLinkListBox__Link{display: block;}
.projectLink__LinkArea .projectLinkListBox__Link + .projectLinkListBox__Link{margin:1rem 0 0 0}
.projectListInBox{display: flex;}
.projectList__img{width: 20rem;height: 20rem;}
.cf_TagInner{border: 1px solid #ddd;width: 100%;max-height: 20rem;position: absolute;top: calc(100% - 1px);left: 0;z-index: 3;height: 0;overflow: auto;visibility: hidden;opacity: 0;min-height:auto;height: auto;transition: 0.5s all;}
.cf_TagInner-list{background-color: #fff;}
.cf_selectTag{display: flex;position:relative;align-items: center;width:100%;height: 5rem;background: url("/images/sub/contest/select_arrow.png") no-repeat;background-position: right 1rem center;font-size: 1.6rem;color: #999999;font-family: 'Poppins', sans-serif;}
.cf_selectTag::before{content:"";display:block;position: absolute;top: 50%;right:1rem;transform: translate(0,-50%);width: 1.4rem;height: 1rem;background: url('/images/sub/contest/select_arrow.png') no-repeat right center;z-index: 4;}
.cf_selectTag.menuOpen::before{transform: translate(0,-50%) rotate(180deg);transition: 0.25s all;}
.cf_selectTag.menuOpen .cf_TagInner{background-color: #fff;opacity: 1;visibility: visible;overflow: auto;z-index: 5;}
.cf_selectTag .cf__name{margin: 0;}
.cf_list-item{display: flex;align-items: center;padding: 1.5rem 1rem;cursor: pointer;color: #999;}
.cf_list-item.active{background:#fff url('/images/sub/contest/icon_check_black.svg') no-repeat right 1rem center / 1.4rem 1rem;}
.part-img{max-width: 4rem;margin: 0 1rem 0 0;}
.part-img_logo{max-width: 1.2rem;margin: 0 0.3rem 0 0;}
.part-name{width: calc(100% - 4rem);}
.part-name_txt{display: inline-block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;white-space: normal;line-height: 1.2;height: 3.2rem;text-align: left;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.part-link{display: flex;align-items: center;margin: 0.6rem 0 0 0;}
.part-img_link{max-width: 1.2rem;margin: 0 0.5rem 0 0;}
.part-img_link img{width:100%;}
.part-img_linkTxt{max-width: calc(100% - 1.7rem );width: 100%;display: inline-block;width: 200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.cf_list-noItem{display: flex;align-items: center;padding: 1rem 1rem;background-color: #349e8f !important;color: #fff;}
.cf_list-noItem span{font-size: 1.3rem;}
.cf_selectTagAreaWrap{width: 100%;}
.cf_selectTagArea{margin: 0 0 1rem 0;width: calc(100% - 8rem);}
.cf_selectTagArea a{position:relative;margin:.5rem 0 0 0;line-height:3.0rem; margin-right:1.0rem;padding: 0 3.5rem 0 1.5rem;background-color: #e6e6e6;color: #222222;white-space: nowrap;display: inline-block;border-radius: 4px;cursor:pointer;font-size: 1.3rem;font-family: 'Poppins', sans-serif;font-weight: 500;}
.cf_selectTagArea a:after{content:"\2715"; position:absolute; right:1.0rem; font-size:0.7rem;}
.cf_selectTagArea a.recommended:after{transform: rotate(45deg);}
.cf_selectTagArea a.isReg{background-color: #349e8f; color:#fff}
.BtndeleteAll{position: absolute;top: 1rem;right: 0;font-size: 1.3rem;color: #666666;width: 100%;max-width: 8rem;display: flex;align-items: center;justify-content: space-between;width:8rem}
.BtndeleteAll::after{content: "\2715";display: flex;align-items: center;justify-content: center;width:2rem;height: 2rem;font-size: 0.7rem;background-color: #999999;color: #fff;line-height: 1.8rem;overflow: hidden;border-radius: 4px;}
.cf_list-item:focus,
.cf_list-item:hover{background:#999;color: #fff;}
.cf_list-item.active:focus,
.cf_list-item.active:hover{background:#999 url('/images/sub/contest/icon_check_white.svg') no-repeat right 1rem center / 1.4rem 1rem;}
.cf_list-item:focus .part-img_link img,
.cf_list-item:hover .part-img_link img{filter:brightness(0) invert(1)}
.cf_selectActiveTxt{padding: 0 1rem;font-size: 1.6rem;font-weight: 400;color: #222;position: relative;}
.btnaddItem{padding: 0.5rem;background-color: #999;color: #fff;display: inline-block;margin: 0 0 0 0.8rem;}
.similar-area{background-color: #fafafa; margin: 5rem auto 0; border: 1px solid #ddd;}
.similar-area .similar-area_in{padding:5rem 3rem;}
.similar-area .similar-area_in .projectList .projectList--items{background-color: #fff;}
@media screen and (min-width: 1025px) {
.project__btnMore:hover .project__btnTxt {margin: 0 3rem 0 0; color: #349e8f;}
.project__btnMore:hover .arrow {left: -2rem; background: #349e8f;}
.project__btnMore:hover .arrow::after {border-color: #349e8f;}
.project__btnMore:hover .circle {border-color: #349e8f;}
}
@media screen and (max-width: 1520px) {
.rightNav {width: 25rem; padding: 2rem;}
.view__left {width: 18rem;}
.userInfoPart {padding: 2rem;}
.vc__article {padding: 2rem;}
.view__inner,
.similar-area{border-left: none; border-right: none;}
.sr__sort {padding: 6rem 1rem; width: 25rem;}
.src__txtWrap {padding: 0 2rem;}
.sr__cnts {padding: 5rem 1rem;}
}
@media screen and (max-width: 1400px) {
.profileArea {padding: 5rem 10rem;}
}
@media screen and (max-width: 1280px) {
.subSec .projectList{gap: 1rem;}
.subSec .projectList--items{width: calc((100% - 2rem)/3);}
}
@media screen and (max-width: 1200px) {
.profileArea {padding: 5rem 0rem;}
.boardPart {padding: 5rem 1rem 10rem;}
}
@media screen and (max-width: 1024px) {
.mainVis__txt {}
.mainVis__txt br {display: none;}
.mainVis__btn {margin: 4rem auto 0;}
.main__titWrap {text-align: left;}
.main__titWrap::after {left: 0; transform: translate(0);}
.mainVisArea .swiper-slide {height: calc(100vh - 10rem); min-height: 40rem;max-height: 55rem;}
.project__btnWrap {transform: translate(0,-1.5rem);}
.profileArea {flex-direction: column; align-items: center;}
.profile__photo {margin: 0;}
.profile__txtWrap {flex: initial;}
.profile__txtWrap.mid {margin: 0; width: auto;}
.projectItem {width: calc((100% - 4rem) / 3);}
.projectItem:nth-of-type(4n) {margin: 0 2rem 2rem 0;}
.projectItem:nth-of-type(3n) {margin: 0 0 2rem;}
.past__txtWrap {opacity: 1; position: relative; height: auto;}
.view__cnts {border-left: none;width: calc(100% - 25rem);}
.newsList__link {padding: 4rem 1rem;}
.newsList__link::after {width: calc(100% - 2rem);}
.contestList li {flex-wrap: wrap; height: auto;}
.contest__photo {flex: initial; width: 100%; padding-bottom: 33.367%;}
.contest__txtWrap {width: 100%; order: 2; padding: 2rem; border: 1px solid #ddd; border-top: none;}
.contest__txt {margin: 0 0 3rem;}
.cf__lineWrap {flex-wrap: wrap;}
.cf__lineInner {flex: initial; width: 100%; margin: 0 0 2rem;}
.cf__lineInner + .cf__lineInner {margin: 0 0 2rem 0rem;}
.cf__lineWrap {justify-content: flex-end;margin: 0 0 5rem 0;}
.cf__lineInner {position: relative;}
.cf__lineInner.zip {width: 100%;}
.tapPart__cnts .flex {flex-wrap: wrap;}
.ov__photo {order: -1;}
.ov__txtWrap {width: 100%; margin: 1rem 0 0;}
.board__view.news {max-width: calc(100% - 2rem);}
.reference__Cont{padding: 3rem 3rem;}
.projectListImgBox{flex-direction: column;margin: 0 0 3rem 0;}
.projectListTextBox{padding: 0 2rem 0 0;width: 100%;}
.projectList__img{width: auto;height: auto;}
.componentsWrap{}
.components__innerBox{width: 100%;flex-wrap: wrap;justify-content: flex-end;}
.components__innerBox .cf__lineInner.fManual{flex: 1;}
.contest__formWrap input[name="Link"]{width: 100%}
.btn_components{position: absolute;top: auto;right: auto;margin: 0;bottom: -4rem;}
.contest__formWrap .cf__flexBox{flex-wrap: wrap;gap: 2rem 1rem;}
.contest__formWrap .cf__comboBox{}
.contest__formWrap .cf__comboBox option{}
.contest__formWrap .cf_selectWrap{width: calc((100% - 1rem)/2);}
.cf_componentsBox__title + .cf_componentsBox__title::before{display: none;}
.cf_componentsBox__title + .cf_componentsBox__title{padding: 1rem 0 1rem 0;}
.cf_componentsBox--titleBox{flex-direction: column;align-items: flex-start;}
.onlyPc{display: block;}
.subSec .projectList{gap: 1rem;}
.subSec .projectList--items{width: calc((100% - 1rem)/2);}
.cf__btnAdd{margin: 0 0 2rem 0.5rem;}
.userInfoPart .btnMyProject{display: block;}
.userInfoPart .btnMyProject--items{}
.userInfoPart .btnMyProject--items + .btnMyProject--items{}
.userInfoPart .btnMyProject--items > a{}
.userInfoPart .btnMyProject--items > a img{}
.userInfoPart .btnMyProject--items > a + a{}
.userInfoPart .btnMyProject--items > a:hover{}
.sr__sort{display: none;padding: 8rem 1rem 6rem;}
.sr__sort.open{position: absolute;left: 0;top: 0;z-index: 10;background-color: #fff;width: 100%;overflow: auto;height: 100vh;display: block;}
.sr__sort.open{}
.sr__closeArea{display: block;position: fixed;left: 0rem;top: 0rem;position: fixed;width: calc(100% - 20px);height: 6rem;background-color: #fff;z-index: 5;}
.sr__close{position: absolute;top: 2rem;right: 1rem;}
.sr__searchCateButton{display: block;}
.profile__miniTit{font-size: 2rem;}
.profile__txt{font-size: 2rem;}
.profile__infoList{min-width:25rem}
.profile__infoList li+li{margin: 0.7rem 0 0 0;}
.profile__amountList{margin: 1rem 0 0 0;}
.profile__amountList li{font-size: 2rem;}
.profileTap{margin: 0 0 2rem 0;gap: 3rem 0;}
}
@media screen and (max-width: 768px) {
.projectItem {width: calc((100% - 2rem) / 2);}
.projectItem:nth-of-type(3n) {margin: 0 2rem 2rem 0;}
.projectItem:nth-of-type(2n) {margin: 0 0 2rem;}
.ck-content *{word-break: break-all;}
.midBanner .swiper-slide {padding-bottom: 118.834%;}
.btn__edit {width: 100%;}
.pastItem {width: 100%; margin: 0 0 2rem;}
.vc__target {margin: 0;}
.vc__img{max-width: 100% !important;}
.ck-content img{max-width: 100% !important;}
.view__cnts {flex: initial;}
.view__inner {flex-wrap: wrap;}
.rightNav {width: 100%;}
.cf__name>span{padding-top:0.5rem; display:block;}
.view__cnts {border-right: none;width: 100%;}
.rightNav,
.userInfoPart,
.vc__article {padding: 2rem 0;}
.vr__navList {display: flex; flex-wrap: wrap;}
.vr__navList li {width:100%; margin: 0 0 2rem 0;}
.vr__navList li:last-child {}
.cmt__list .info__inner {flex-wrap: wrap;}
.cmt__list .userInfoPart.ver2 .vp__txtWrap {width: 100%; padding: 1rem 0; flex: initial;}
.cmt__txt {margin: 1rem 0 0;}
.cmt__item2,
.cmt__item3 {padding: 2rem 0 0;}
.cmt__item2 {background-position: left 2rem top 4rem !important;}
.cmt__item3 {background-position: left 6rem top 4rem !important;}
.newsList__link {flex-wrap: wrap;}
.newsList__photo {order: -1; max-width: none; height: auto;     padding-bottom: 50%;}
.newsList__txtWrap {max-width: 100%; min-height: 0; padding: 2rem 0 0;}
.newsList__date {display: block; position: relative; margin: 2rem 0 0;}
.board__table {display: block;}
.board__table thead {display: none;}
.board__table tbody {display: block;}
.board__table tr {display: flex; flex-wrap: wrap; padding: 0 0 2rem; gap: 1rem;}
.board__table td {display: block; position: relative; padding: 0 1rem 0 0;}
.board__table td::after {content: ""; position: absolute; right: 0; top: 50%; transform: translate(0,-50%); width: 1px; height: 80%; background: #999;}
.board__table td:nth-of-type(1) {display: none;}
.board__table td:nth-of-type(2) {width:100%; padding: 2rem 0 0;}
.board__table td:last-child::after,
.board__table td:nth-of-type(2)::after {display: none;}
.board__link {line-height: 1.6em; max-height: 3.2em; height: auto; -webkit-line-clamp: 2;}
.projectImgList--ul{gap: 5rem;flex-direction: column;}
.projectImgList--li{width: 100%;}
.projectImgList--li + .projectImgList--li{border-top: 1px solid #e6e6e6;border-left: none;}
.wrapSelectBox{flex-wrap: wrap;}
.selectBox__tit{}
.selectBox__select{width: 100%;}
.selectBox{order: 3;width: calc((100% - 2rem)/3);}
.selectBox.right{width: 100%;order: 1;flex: auto;margin:0 0 2rem 0;}
.selectBox.right select{height: 5.5rem;}
.projectsSlide.noSlide .swiper-slide {width:calc((100% - 2rem)/2)}
.projectsSlide.noSlide .swiper-wrapper{gap:2rem}
.newsList__link{padding: 4rem 5rem;}
.newsList__txtWrap{min-height: 0;}
.newsList__photo {padding-bottom: 72.17%;padding-left: 2rem;padding-right: 2rem;height: auto;}
.src__bigTit{font-size: 3rem;}
.vc__tit{font-size: 3rem;}
.sr__bigTit {font-size: 3rem;}
.sr__tit{font-size: 1.8rem;}
.sr__sort .labelChk__txt{font-size: 1.6rem;}
.profile__txt--name{font-size: 2.5rem;}
.target__tit{font-size: 2.2rem;}
}
@media screen and (max-width: 600px) {
.src__link {flex-wrap: wrap;}
.src__photo {width: 100%; padding-bottom: 50%; height: auto;}
.src__txtWrap {padding: 2rem 0; width: 100%; flex: initial;}
.sr__titWrap {padding: 0 0 2rem; margin: 0 0 2rem;}
.src__itemTxt {margin: 0 0 2rem;}
.src__select {position: relative; top: auto; transform: translate(0); margin: 2rem 0 0;}
.board__top form ,
.board__top {width: 100%;}
.board__search {width: 100%;}
.bSearch__input {width: calc(100% - 22rem);}
.subSec .projectList{gap: 1rem;}
.subSec .projectList--items{width: 100%;}
}
@media screen and (max-width: 480px) {
.project__txt {font-size: 1.8rem;}
.project__tit {font-size: 2.2rem;}
.projectItem {width: calc((100% - 2rem) / 2);}
.projectItem:nth-of-type(4n) {margin: 0 2rem 2rem 0;}
.projectItem:nth-of-type(3n) {margin: 0 2rem 2rem 0;}
.projectItem:nth-of-type(2n) {margin: 0 0 2rem;}
.cf__photoWrap {flex-wrap: wrap;}
.cf__photoTxt {padding: 1rem 0 0; width: 100%;}
.btnPrev {position: relative;}
.bSearch__select {width: 12rem;}
.bSearch__input {width: calc(100% - 18rem);}
.projectLinkListBox__Link{display: block;}
}
.loading img { position: absolute; top: 50%; margin-top: -25px; left: 50%; margin-left: -25px; width: 50px; height: 50px; max-width: none;}
#inRow td{ border-left:0; border-top:0; padding:2px 0; }
.attachedFile { position:relative; float:left; width:100%; padding-bottom:5px;}
.attachedFile *{ margin:0; padding:0; font-size:11px; vertical-align:middle;}
.attachedFile dt img{ margin-right:5px; vertical-align: middle;}
.attachedFile dt .fileToggle{ border:0; padding:0; overflow:visible; cursor:pointer; font-size:12px; background:none; vertical-align:middle; font-weight:bold;}
.attachedFile dd { padding-bottom:10px;}
.attachedFile ul.files *{ display:inline-block; *display:inline; padding:0; margin:0; font-size:11px;}
.attachedFile ul.files li{ position:relative; margin:0 10px 0 0;}
.attachedFile ul.files a{ position:relative; background-repeat:no-repeat; background-position:left center; *zoom:1; text-decoration:none !important;}
.attachedFile ul.files a{ padding:2px 0 0 15px; background-image:url(/_lib/memberimg/iconFile.gif); color:#4d4d4d;}
.dimmed { position: absolute; top: 0; left: 0; z-index: 99998; width: 100%; height: 100%; background: #282828; opacity: .5; filter: alpha(opacity=50); }
.popWrap { position: absolute; top: 0; width: 100%; height: 100%; z-index:99998}
.popCon { position: fixed; z-index: 99999; }
.popCon h1 { position: absolute; top: 0; left: 0; height:31px; width: 100%; padding-top:10px;  background-color:#565b5c; color:#fff; font-size:18px; font-weight:normal; text-indent: 29px; }
.popCon h1:after{ clear:both; content:""; display:block; }
.popCon .btnClose { position:absolute; top:15px; right:15px; }
.popCon #container { padding: 60px 0 40px 0; background: #fff !important; }
.popCon #contents { padding: 0 20px; }
.imgreadyPack{display:block; width:390px; height:300px; font-size:18px; line-height:300px; text-align:center; background-color: #343232; color: #999999}
.imgreadyEvent{display:block; width:300px; height:320px; font-size:18px; line-height:320px; text-align:center; background-color: #343232; color: #999999}
.imgreadyPack_Mobile{display:block; width:290px; height:208px; font-size:18px; line-height:208px; text-align:center; background-color: #343232; color: #999999}
.imgreadyEvent_Mobile{display:block; width:290px; height:290px; font-size:18px; line-height:290px; text-align:center; background-color: #343232; color: #999999}
.disNone {display:none !important;}
#followTab {border-bottom: 1px solid #dddddd;margin: 0 -7rem;}
.follow-wrap {height: 530px;margin: 0 -7rem;overflow: auto;position: relative;}
.follow-wrap .follow-list {
display: none;
}
.follow-wrap .follow-list.show {display: block;}
.follow-wrap .follow-list ul {padding: 0 7rem;font-size: 20px;}
.follow-wrap .follow-list ul li {display: flex; align-items: center;height: 100px;border-bottom: 1px solid #dddddd;}
.follow-wrap .follow-list ul li:last-child {border-bottom: none;}
.follow-wrap .follow-list ul li .profile-photo {width: 48px;height: 48px;border-radius: 24px;background-size: contain;background-position: center;background-repeat: no-repeat;}
.follow-wrap .follow-list ul li .user-name {flex: 1;margin-left: 15px;}
.follow-wrap .follow-list ul li .user-name .name {color: #333333;}
.follow-wrap .follow-list ul li .user-name .nickname {font-size: 18px;color: #999999;}
.follow-wrap .follow-list ul li .follow-control .btn__follow,
.follow-wrap .follow-list ul li .follow-control .btn__unfollow {width: 155px;height: 45px;margin: 0;}
.follow-wrap .follow-list ul li .follow-control.following .btn__follow {display: none;}
.follow-wrap .follow-list ul li .follow-control:not(.following) .btn__unfollow {display: none;}
.notification-wrap {max-width: 1000px; margin: 0 auto; font-size: 14px;}
.notification-wrap .notification-list {}
.notification-wrap .notification-list ul {}
.notification-wrap .notification-list ul li {border-top: 1px solid #dddddd;padding: 7px 15px;color: #777777; position: relative;}
.notification-wrap .notification-list ul li:last-child {border-bottom: 1px solid #dddddd;}
.notification-wrap .notification-list ul li.new:after {
content: "new";
color: #349e8f;
position: absolute;
top: 15px;
right: 20px;
}
.notification-wrap .notification-list ul li .message {color: #555;}
.notification-wrap .notification-list ul li .message a {font-weight: bold;color: #555;}
.notification-wrap .notification-list ul li .date {color: #999999;}
.g-recaptcha > div {
margin: 20px auto;
}
@media (max-width: 768px) {
#followTab {margin: 0;}
}
.sr__searchitem .section-selector {
display: flex;
align-items: center;
font-size: 1.6rem;
margin-top: 10px;
}
.sr__searchitem .section-selector span {
margin-right: 12px;
}
.sr__searchitem .section-selector .section {
position: relative;
flex: 1;
}
.sr__searchitem .section-selector .section .selected {
width: 100%;
background: #f6f6f6;
border: 1px solid #e6e6e6;
font-size: 1.6rem;
color: #333;
font-weight: 400;
padding: 1rem;
cursor: pointer;
}
.sr__searchitem .section-selector .section .selected span {
line-height: 2rem;
display: block;
}
.sr__searchitem .section-selector .section .selected i {
position: absolute;
top: 50%;
right: 0.5em;
margin-top: -0.75em;
width: 1.5em;
height: 1.5em;
display: block;
pointer-events: none;
}
.sr__searchitem .section-selector .section .selected i:before,
.sr__searchitem .section-selector .section .selected i:after {
content: " ";
display: block;
width: .7rem;
height: .2rem;
border-radius: .1rem;
background-color: #444;
position: absolute;
transform-origin: center;
top: 50%;
transition: 0.2s;
}
.sr__searchitem .section-selector .section .selected i:before {
left: .6rem;
transform: rotate(45deg);
}
.sr__searchitem .section-selector .section .selected i:after {
right: .6rem;
transform: rotate(-45deg);
}
.sr__searchitem .section-selector.open .section .selected i:before,
.sr__searchitem .section-selector.open .section .selected i:after {
width: 1.2rem;
}
.sr__searchitem .section-selector.open .section .selected i:before {
transform: rotate(-45deg);
}
.sr__searchitem .section-selector.open .section .selected i:after {
transform: rotate(45deg);
}
.sr__searchitem .section-selector .section .section-list {
position: absolute;
top: 4.2rem;
width: 100%;
height: 0;
border: 1px solid transparent;
border-top: none;
background-color: #ffffff;
pointer-events: none;
overflow: hidden;
}
.sr__searchitem .section-selector.open .section .section-list {
height: 200px;
pointer-events: visible;
border-color: #dddddd;
overflow: visible;
}
.sr__searchitem .section-selector .section .section-list ul {}
.sr__searchitem .section-selector .section .section-list ul li {
position: relative;
}
.sr__searchitem .section-selector .section .section-list ul li:not(:last-child) {
border-bottom: 1px solid #dddddd;
}
.sr__searchitem .section-selector .section .section-list ul li input[type=checkbox] {
display: none;
}
.sr__searchitem .section-selector .section .section-list ul li input[type=checkbox] + label {
display: block;
padding: 1rem .5rem 1rem 2.2rem;
background-image: url("/images/common/icon_checkbox.svg");
background-repeat: no-repeat;
background-size: 14px 14px;
background-position: left 5px center;
cursor:pointer;
}
.sr__searchitem .section-selector .section .section-list ul li input[type=checkbox]:checked + label {
background-image: url("/images/common/icon_checkbox.checked.svg");
}
.sr__searchitem .section-selector .section .section-list ul li input[type=checkbox]:indeterminate + label {
background-image: url("/images/common/icon_checkbox.indeterminate.svg");
}
.sr__searchitem .section-selector .section .section-list ul li input[type=checkbox] {}
.sr__searchitem .section-selector .section .section-list ul li ul {
background-color: #fff;
border: 1px solid #ddd;
position: absolute;
width: 100%;
left: calc(100% - 5px);
top: 4px;
display: none;
}
.sr__searchitem .section-selector .section .section-list ul li.show > ul {
display: block;
}
.sr__searchitem .section-selector .section .section-list > ul li > ul {
z-index: 1;
}
.sr__searchitem .section-selector .section .section-list > ul li > ul li > ul {
z-index: 2;
}
.retrieved-section {
display: flex;
margin-top: 1.2rem;
font-size: 20px;
}
.retrieved-section span {}
.retrieved-section span:not(:first-child) {
margin-left: 12px;
padding-left: 12px;
position: relative;
}
.retrieved-section span:not(:first-child):after {
content: " ";
display: block;
width: .2rem;
background-color: #ddd;
height: 1rem;
position: absolute;
top: 50%;
left: -.1rem;
transform: translateY(-.5rem);
}
.retrieved-category {
margin-top: 1.2rem;
padding-top: 1.2em;
border-top: 1px dashed #dddddd;
font-size: 16px;
display: flex;
}
.retrieved-category p {
font-weight: normal;
font-size: 14px;
margin-right: 12px;
white-space: nowrap;
}
.retrieved-category .category-list {
display: flex;
flex-wrap: wrap;
}
.retrieved-category span {}
.retrieved-category span:not(:last-child) {
margin-right: 12px;
padding-right: 12px;
position: relative;
}
.retrieved-category span:not(:last-child):after {
content: " ";
display: block;
width: .2rem;
background-color: #ddd;
height: 1rem;
position: absolute;
top: 50%;
right: -.1rem;
transform: translateY(-.5rem);
}
.forum-history-list {
max-width: 1000px;
margin: 0 auto;
font-size: 14px;
}
.forum-history-list .history-item {
margin-top: 12px;
padding: 20px 0;
border: solid 1px #ddd;
background-color: #fff;
display: flex;
align-items: center;
transition: 0.3s;
cursor: pointer;
font-size: 16px;
text-align: center;
padding: 12px;
}
.forum-history-list .history-item .col {}
.forum-history-list .history-item .col.text {
flex: 1;
text-align: left;
}
.forum-history-list .history-item .col.date {
font-size: 14px;
align-self: flex-end;
}
.forum-history-list .history-item .category {
font-weight: normal;
font-size: 16px;
color: #777;
padding-left: 12px;
border-left: 3px solid #349e8f;
margin-bottom: 12px;
}
.forum-history-list .history-item .subject {
font-size: 17px;
line-height: 20px;
color: #222;
}
.forum-history-list .history-item .activity {
margin-top: 15px;
}
.forum-history-list .history-item .activity .date {
color: #777;
font-size: 14px;
}
.forum-history-list .history-item .activity .msg {
font-size: 16px;
color: #454545
}
@media (max-width: 440px) {
.project__infoList {
justify-content: space-between;
}
.project__infoItem:nth-last-child(2) {
flex: 0;
}
.project__infoItem {
margin: 0;
}
.project__infoItem.like,
.project__infoItem.star {
margin-left: 0;
}
.project__infoTxt {
margin-left: 2px;
}
.like .project__iconWrap {
width: 1.6rem;
height: auto;
}
.view .project__iconWrap {
width: 2.4rem;
height: auto;
}
.comment .project__iconWrap {
width: 1.8rem;
height: auto;
}
.star .project__iconWrap {
width: 1.8rem;
height: auto;
}
.project__iconWrap img {
position: static;
}
}
/* /common/css/refresh/00-tokens.css */
:root {
--mk-ink: #171717;
--mk-ink-hover: #383838;
--mk-on-dark: #ffffff;
--mk-body: #4d4d4d;
--mk-mute: #707070;
--mk-meta: #666666;
--mk-hero-scrim: linear-gradient(90deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.5) 38%, rgba(10,10,10,.12) 72%, rgba(10,10,10,0) 100%);
--mk-hero-scrim-sm: linear-gradient(0deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.5) 55%, rgba(10,10,10,.2) 100%);
--mk-card-scrim: linear-gradient(to top, rgba(23,23,23,.82) 0%, rgba(23,23,23,.45) 45%, rgba(23,23,23,0) 75%);
--mk-faint: #a1a1a1;
--mk-line: #ebebeb;
--mk-line-soft: #f2f2f2;
--mk-line-strong: #d4d4d4;
--mk-overlay: rgba(0,0,0,.45);
--mk-canvas: #fafafa;
--mk-surface: #ffffff;
--mk-accent: #39a092;
--mk-accent-deep: #2b7d72;
--mk-accent-soft: #e7f3f1;
--mk-accent-ink: #246b62;
--mk-link: #0b6bcb;
--mk-danger: #d93025;
--mk-danger-soft: #fdecea;
--mk-warn: #ab570a;
--mk-footer: #1f2126;
--mk-halo: 0 0 0 3px var(--mk-accent-soft);
--mk-font: "Geist", "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--mk-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--mk-r-sm: 6px;
--mk-r-md: 12px;
--mk-r-lg: 20px;
--mk-r-pill: 999px;
--mk-s-1: 4px; --mk-s-2: 8px; --mk-s-3: 12px; --mk-s-4: 16px; --mk-s-5: 24px; --mk-s-6: 32px; --mk-s-7: 48px; --mk-s-8: 64px; --mk-s-9: 96px;
--mk-shadow-1: 0 1px 2px rgba(0,0,0,.04);
--mk-shadow-2: 0 4px 12px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
--mk-shadow-pop: 0 12px 32px rgba(0,0,0,.12);
--mk-wrap: 1200px;
--mk-header-h: 64px;
--mk-sticky-top: calc(var(--mk-header-h) + 24px);
--mk-ease: cubic-bezier(0.22, 0.25, 0, 1);
--mk-tap: 40px;
--mk-px: 0.1rem;
--mk-t-page: calc(32 * var(--mk-px)); --mk-t-page-lh: calc(40 * var(--mk-px)); --mk-t-page-sm: calc(26 * var(--mk-px)); --mk-t-page-sm-lh: calc(32 * var(--mk-px));
--mk-t-article: calc(36 * var(--mk-px)); --mk-t-article-lh: calc(44 * var(--mk-px)); --mk-t-article-sm: calc(28 * var(--mk-px)); --mk-t-article-sm-lh: calc(36 * var(--mk-px));
--mk-t-section: calc(22 * var(--mk-px)); --mk-t-section-lh: calc(30 * var(--mk-px)); --mk-t-section-sm: calc(20 * var(--mk-px)); --mk-t-section-sm-lh: calc(28 * var(--mk-px));
--mk-page-top: 48px;
--mk-page-top-sm: 32px;
--mk-ph-43: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23f2f2f2'/%3E%3Cg fill='none' stroke='%23d4d4d4' stroke-width='3' stroke-linecap='round'%3E%3Crect x='178' y='128' width='44' height='44' rx='6'/%3E%3Cpath d='M190 128v-10M200 128v-10M210 128v-10M190 172v10M200 172v10M210 172v10M178 140h-10M178 150h-10M178 160h-10M222 140h10M222 150h10M222 160h10'/%3E%3C/g%3E%3Crect x='191' y='141' width='18' height='18' rx='2' fill='%23dedede'/%3E%3C/svg%3E");
--mk-ph-31: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'%3E%3Crect width='600' height='200' fill='%23f2f2f2'/%3E%3Cg fill='none' stroke='%23d4d4d4' stroke-width='3' stroke-linecap='round'%3E%3Crect x='280' y='80' width='40' height='40' rx='6'/%3E%3Cpath d='M290 80v-9M300 80v-9M310 80v-9M290 120v9M300 120v9M310 120v9M280 90h-9M280 100h-9M280 110h-9M320 90h9M320 100h9M320 110h9'/%3E%3C/g%3E%3C/svg%3E");
--mk-ph-43r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' rx='12' fill='%23f2f2f2'/%3E%3Cg fill='none' stroke='%23d4d4d4' stroke-width='5' stroke-linecap='round'%3E%3Crect x='170' y='120' width='60' height='60' rx='8'/%3E%3Cpath d='M186 120v-14M200 120v-14M214 120v-14M186 180v14M200 180v14M214 180v14M170 136h-14M170 150h-14M170 164h-14M230 136h14M230 150h14M230 164h14'/%3E%3C/g%3E%3C/svg%3E");
--mk-ph-chip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round'%3E%3Crect x='17' y='17' width='30' height='30' rx='4'/%3E%3Cpath d='M25 17v-7M32 17v-7M39 17v-7M25 47v7M32 47v7M39 47v7M17 25h-7M17 32h-7M17 39h-7M47 25h7M47 32h7M47 39h7'/%3E%3C/g%3E%3Crect x='26' y='26' width='12' height='12' rx='2' fill='%23dedede'/%3E%3C/svg%3E");
--mk-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%234d4d4d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
color-scheme: light;
--mk-icon: #8f8f8f;
--mk-focus: var(--mk-accent-ink);
--mk-focus-input: 0 0 0 1px var(--mk-focus), 0 0 0 4px var(--mk-accent-soft);
--mk-focus-input-error: 0 0 0 1px var(--mk-danger), 0 0 0 4px var(--mk-danger-soft);
--mk-halo: var(--mk-focus-input);
--mk-control-on: var(--mk-accent-deep);
--mk-on-control: #ffffff;
--mk-on-ink: #ffffff;
--mk-danger-ink: #b3261e;
--mk-dim: var(--mk-overlay);
--mk-toast-bg: var(--mk-ink);
--mk-toast-fg: var(--mk-on-ink);
--mk-toast-ok: var(--mk-accent);
--mk-toast-err: #ff6b60;
--mk-skel: var(--mk-line-soft);
--mk-paper: #ffffff;
--mk-paper-ink: #171717;
--mk-badge-on-photo: rgba(255,255,255,.94);
--mk-ink-press: #000000;
--mk-btn-secondary-bg: var(--mk-line-soft);
--mk-ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--mk-ic-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
--mk-ic-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
--mk-ic-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4v12M4 10h12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
--mk-ic-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='12' r='1.2'/%3E%3C/svg%3E");
--mk-ic-ok-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1zM6.6 11.4l5.8-5.8-1.1-1.1-4.7 4.7-1.9-1.9-1.1 1.1z'/%3E%3C/svg%3E");
--mk-ic-alert-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1zM7 4v5.2h2V4zm1 6.6a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 1 0 0-2.4z'/%3E%3C/svg%3E");
--mk-elev-raise: var(--mk-shadow-2);
--mk-elev-pop: var(--mk-shadow-pop);
--mk-dur-press: 100ms;
--mk-dur-fast: 150ms;
--mk-dur-base: 250ms;
--mk-dur-slow: 350ms;
--mk-z-sticky: 30;
--mk-z-bar: 40;
--mk-z-header: 50;
--mk-z-popover: 60;
--mk-z-modal: 100;
--mk-z-layer: 110;
--mk-z-toast: 120;
--mk-r-xs: 4px;
--mk-r-btn: var(--mk-r-sm);
--mk-r-xl: 26px;
--mk-r-thumb-s: 12px;
--mk-r-thumb-m: 20px;
--mk-r-thumb-l: 26px;
--mk-fs-xs: calc(12 * var(--mk-px));
--mk-fs-sm: calc(13 * var(--mk-px));
--mk-fs-md: calc(14 * var(--mk-px));
--mk-fs-lg: calc(15 * var(--mk-px));
--mk-fs-body: calc(16 * var(--mk-px));
--mk-fs-dialog: calc(20 * var(--mk-px));
--mk-gutter: 24px;
--mk-tap-gap: 8px;
--mk-tabbar-h: 56px;
--mk-actionbar-h: 64px;
--mk-formbar-h: 64px;
--mk-bar-h: 0px;
--mk-header-offset: var(--mk-header-h);
--mk-measure: 680px;
}
@media (max-width: 768px) {
:root { --mk-px: 0.125rem; }
}
@media (max-width: 599px) {
:root { --mk-gutter: 16px; }
}
body.mk-header-hidden { --mk-header-offset: 0px; }
/* /common/css/refresh/10-shell.css */
html, body {
background-color: var(--mk-canvas);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--mk-header-h) + 16px); }
body {
font-family: var(--mk-font);
font-size: calc(14 * var(--mk-px));
line-height: 1.5;
color: var(--mk-ink);
}
* { font-family: inherit; }
pre, code, kbd, samp { font-family: var(--mk-mono); }
.btn__login strong, .mainVis__btn,
.modal__topTit, .modal__topTxt, .modal-inTxtBox__Tit, .modal-detailBox__tit, .modal-detailBox__point, .modal__Name, .modalForm_input,
.contest__formWrap select, .cf__name, .lbjs .lbjs-list .lbjs-item, .cf_selectTag, .cf_selectTagArea a,
.ck-content b, .forumWrite .categoryWrap .currentCategory { font-family: inherit; }
input, select, textarea, strong, em, p, h1, h2, h3, h4, span, td, button, th, li, a, i, b { letter-spacing: 0; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; color: var(--mk-ink); }
::selection { background: var(--mk-accent-soft); color: var(--mk-ink); }
a {
-webkit-tap-highlight-color: transparent;
transition: color var(--mk-dur-fast) var(--mk-ease), background-color var(--mk-dur-fast) var(--mk-ease), border-color var(--mk-dur-fast) var(--mk-ease), box-shadow var(--mk-dur-fast) var(--mk-ease);
}
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--mk-focus); outline-offset: 2px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 2px solid var(--mk-focus); outline-offset: 2px; }
:where(input, select, textarea):focus-visible { outline-offset: 0; }
.mk-skip {
position: fixed;
left: 12px;
top: 12px;
z-index: 1000;
display: inline-flex;
align-items: center;
min-height: var(--mk-tap);
padding: 0 16px;
border-radius: var(--mk-r-sm);
background: var(--mk-ink);
color: var(--mk-on-ink);
font-size: calc(14 * var(--mk-px));
font-weight: 500;
opacity: 0;
pointer-events: none;
transform: translateY(-64px);
transition: transform var(--mk-dur-fast) var(--mk-ease), opacity var(--mk-dur-fast) var(--mk-ease);
}
.mk-skip:focus, .mk-skip:focus-visible { opacity: 1; pointer-events: auto; transform: none; box-shadow: var(--mk-elev-pop); outline: 2px solid var(--mk-focus); outline-offset: 2px; color: var(--mk-on-ink); }
#mk-main { display: block; }
#mk-main:focus { outline: none; }
.mk-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.limit {
max-width: calc(var(--mk-limit, var(--mk-wrap)) + 2 * var(--mk-gutter));
padding: 0 var(--mk-gutter);
}
.mainVisArea { padding-top: var(--mk-header-h); }
.subPage, .subPage.ver2 { padding-top: var(--mk-header-h); }
.subPage.member { padding-top: calc(var(--mk-header-h) + 48px); }
.subPage.etc, .subPage.contest { background: var(--mk-canvas); }
.header {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: var(--mk-header-h);
background: var(--mk-surface);
border-bottom: 1px solid var(--mk-line);
z-index: var(--mk-z-header);
transition: transform var(--mk-dur-base) var(--mk-ease);
}
body.mk-header-hidden .header { transform: translateY(-100%); }
.headerInner { display: flex; align-items: center; justify-content: flex-start; gap: 8px; height: 100%; }
.logo { position: relative; display: block; flex: none; width: 148px; height: 100%; margin: 0 8px 0 0; }
.logo a { border-radius: var(--mk-r-sm); }
.mainNav { display: none; }
.mainNav .navItem__link {
-webkit-tap-highlight-color: transparent;
border: 0;
background: transparent;
cursor: pointer;
}
.mainNav .navItem__link span {
font-size: calc(13 * var(--mk-px));
font-weight: 500;
letter-spacing: 0.02em;
color: var(--mk-body);
white-space: nowrap;
transition: color var(--mk-dur-fast) var(--mk-ease), background-color var(--mk-dur-fast) var(--mk-ease);
}
.mainNav .navItem__link:focus-visible { outline: 2px solid var(--mk-focus); outline-offset: -2px; border-radius: var(--mk-r-sm); }
.mainNav .navItem__link[aria-current="page"] { --mk-nav-on: 1; }
.mainNav .navItem__link[aria-current="page"] span { color: var(--mk-ink); font-weight: 600; }
.icon__search { width: 16px; height: 16px; opacity: .75; }
.headerUtil { position: relative; display: flex; flex: none; align-items: center; height: 100%; margin: 0; }
.header__authWrap { display: flex; align-items: center; gap: 8px; margin: 0; }
.btn__login {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-width: 0;
height: auto;
min-height: var(--mk-tap);
padding: 0 16px;
border: 0;
border-radius: var(--mk-r-btn);
background: var(--mk-btn-secondary-bg);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--mk-dur-fast) var(--mk-ease);
}
.btn__login strong { font-size: calc(14 * var(--mk-px)); line-height: calc(20 * var(--mk-px)); font-weight: 500; letter-spacing: 0; color: var(--mk-ink); white-space: nowrap; }
@media (hover: hover) { .btn__login:hover { background: var(--mk-line); } }
.btn__login:active { background: var(--mk-line-strong); }
.header-notification.has-new-noti::after {
position: absolute;
left: auto;
right: 0;
top: 0;
min-width: 18px;
height: auto;
min-height: 18px;
padding: 0 5px;
border-radius: var(--mk-r-pill);
border: 2px solid var(--mk-surface);
background: var(--mk-danger);
color: var(--mk-on-ink);
font-size: var(--mk-fs-xs);
font-weight: 600;
line-height: calc(14 * var(--mk-px));
text-align: center;
box-sizing: border-box;
pointer-events: none;
}
.mk-menu { position: relative; }
.mk-menu > .mk-menu__list { display: none; }
.mk-menu.is-open > .mk-menu__list { display: block; animation: mk-hdr-pop var(--mk-dur-base) var(--mk-ease); }
@keyframes mk-hdr-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.mk-menu__list {
z-index: var(--mk-z-popover);
background: var(--mk-surface);
border: 1px solid var(--mk-line);
border-radius: var(--mk-r-md);
box-shadow: var(--mk-elev-pop);
}
@media (min-width: 840px) {
.mainNav {
position: relative;
left: auto;
top: auto;
display: block;
flex: 1 1 auto;
min-width: 0;
width: auto;
height: 100%;
background: none;
opacity: 1;
visibility: visible;
transform: none;
transition: none;
}
.mainNav .navList {
position: static;
left: auto;
top: auto;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
width: auto;
height: 100%;
background: none;
transform: none;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.mainNav .navList::-webkit-scrollbar { display: none; }
.mainNav .navItem { position: relative; flex: none; height: 100%; margin: 0; }
.mainNav .navItem__link { position: relative; display: flex; align-items: center; justify-content: center; width: auto; height: 100%; padding: 0; }
.mainNav .navItem__link span { padding: 7px 10px; border-radius: var(--mk-r-sm); }
.mainNav .navItem__link:active span { background: var(--mk-line); }
.mainNav .navItem__link::after {
content: "";
position: absolute;
left: 10px;
right: 10px;
bottom: -1px;
height: 2px;
border-radius: 2px;
background: var(--mk-accent);
opacity: var(--mk-nav-on, 0);
transition: opacity var(--mk-dur-fast) var(--mk-ease);
}
.mainNav .navItem.mk-menu { position: static; }
.mainNav .nav__depth2.mk-menu__list {
position: absolute;
top: calc(100% + 1px);
left: auto;
right: auto;
width: 240px;
height: auto;
padding: 4px;
background: var(--mk-surface);
border: 1px solid var(--mk-line);
border-radius: var(--mk-r-md);
box-shadow: var(--mk-elev-pop);
transform: none;
text-align: left;
}
.mainNav .nav__depth2 li a {
display: flex;
align-items: center;
min-height: var(--mk-tap);
padding: 0 12px;
border-top: 0;
border-radius: var(--mk-r-sm);
background: transparent;
text-align: left;
}
.mainNav .nav__depth2 span { font-size: calc(14 * var(--mk-px)); font-weight: 400; color: var(--mk-body); transition: color var(--mk-dur-fast) var(--mk-ease); }
.mainNav .nav__depth2 span::after { content: none; }
.mainNav .nav__depth2 li a:active { background: var(--mk-line-soft); }
.headerUtil { margin: 0 0 0 4px; }
.btn__login { background: var(--mk-ink); }
.btn__login strong { color: var(--mk-on-ink); }
.btn__login:active { background: var(--mk-ink-press); }
.current__user {
position: relative;
display: flex;
align-items: center;
gap: 8px;
width: auto;
max-width: 168px;
min-height: var(--mk-tap);
padding: 0 12px 0 6px;
border: 0;
border-radius: var(--mk-r-pill);
background: transparent;
color: var(--mk-ink);
cursor: pointer;
transition: background-color var(--mk-dur-fast) var(--mk-ease);
}
.current__user:active { background: var(--mk-line); }
.current__userWrap::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.profile__img { display: block; flex: none; width: 28px; height: 28px; border-radius: 50%; background-color: var(--mk-line-soft); background-repeat: no-repeat; background-position: center; background-size: cover; box-shadow: 0 0 0 1px var(--mk-line); }
.profile__name { margin: 0; overflow: hidden; font-size: calc(14 * var(--mk-px)); font-weight: 500; color: var(--mk-ink); text-overflow: ellipsis; white-space: nowrap; }
.auth__utilList {
position: absolute;
left: auto;
right: 0;
top: calc(100% + 8px);
transform: none;
width: 200px;
padding: 4px;
overflow: hidden;
cursor: auto;
}
.auth__utilList a,
.auth__utilList button {
display: flex;
align-items: center;
width: 100%;
min-height: var(--mk-tap);
padding: 0 12px;
border: 0;
border-radius: var(--mk-r-sm);
background: transparent;
text-align: left;
cursor: pointer;
}
.auth__utilList span { font-size: calc(14 * var(--mk-px)); color: var(--mk-body); transition: color var(--mk-dur-fast) var(--mk-ease); }
.auth__utilList :is(a, button):active { background: var(--mk-line-soft); }
.auth__utilList li:last-child { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--mk-line-soft); }
.header-notification { position: relative; }
.header-notification__btn {
display: flex;
align-items: center;
justify-content: center;
width: var(--mk-tap);
height: var(--mk-tap);
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--mk-meta);
cursor: pointer;
}
.header-notification__btn:active { background: var(--mk-line); }
.mk-ic-noti { display: block; width: 20px; height: 20px; }
.header-notification .header-noti-list { position: absolute; top: calc(100% + 8px); width: 380px; right: 0; overflow: hidden; }
.header-notification .header-noti-list .header-noti-box { margin: 0; border: 0; background: transparent; }
.header-notification .header-noti-list .notification-header {
padding: 0 16px;
border-bottom: 1px solid var(--mk-line);
font-size: calc(13 * var(--mk-px));
font-weight: 500;
text-align: right;
}
.header-notification .header-noti-list .notification-header a,
.header-notification .header-noti-list .notification-footer a { display: inline-flex; align-items: center; min-height: var(--mk-tap); color: var(--mk-accent-deep); }
.header-notification .header-noti-list ul { max-height: 400px; overflow-y: auto; }
.header-notification .header-noti-list ul li { padding: 12px 16px; border-bottom: 1px solid var(--mk-line-soft); }
.header-notification .header-noti-list ul li.new { background: var(--mk-accent-soft); }
.header-notification .header-noti-list ul li .message { font-size: calc(14 * var(--mk-px)); line-height: 1.45; color: var(--mk-body); }
.header-notification .header-noti-list ul li .message a { font-weight: 600; color: var(--mk-ink); }
.header-notification .header-noti-list ul li .date { margin-top: 2px; font-size: var(--mk-fs-sm); color: var(--mk-meta); font-variant-numeric: tabular-nums; }
.header-notification .header-noti-list .notification-footer { padding: 0; border-top: 1px solid var(--mk-line-soft); font-size: calc(13 * var(--mk-px)); font-weight: 500; text-align: center; }
.header-notification .header-noti-list .notification-footer a { justify-content: center; width: 100%; }
.header__authWrap .mk-account-btn { display: none; }
}
@media (min-width: 840px) and (hover: hover) {
.mainNav .navItem__link:hover span { color: var(--mk-ink); background: var(--mk-line-soft); }
.mainNav .nav__depth2 li a:hover { background: var(--mk-canvas); }
.mainNav .nav__depth2 li:hover span { color: var(--mk-ink); }
.btn__login:hover { background: var(--mk-ink-hover); }
.current__user:hover { background: var(--mk-line-soft); }
.auth__utilList :is(a, button):hover { background: var(--mk-canvas); }
.auth__utilList :is(a, button):hover span { color: var(--mk-ink); }
.header-notification__btn:hover { background: var(--mk-line-soft); }
.header-notification .header-noti-list .notification-header a:hover,
.header-notification .header-noti-list .notification-footer a:hover { color: var(--mk-ink); }
}
@media (min-width: 840px) and (max-width: 79.99em) {
.logo { margin-right: 8px; }
.profile__name { display: none; }
.current__user { padding: 0 6px; }
}
.mk-hsearch { position: relative; display: flex; flex: none; align-items: center; margin: 0 0 0 auto; }
.mk-hsearch__open .icon__search { width: 16px; height: 16px; }
#mkHdrSearchHome > .mk-hsearch__box { display: none; }
#topSearchFrm { display: flex; align-items: center; gap: 8px; width: 100%; height: auto; margin: 0; border: 0; }
#topSearchFrm .header__searchField {
position: relative;
display: flex;
flex: 1 1 auto;
align-items: center;
gap: var(--mk-tap-gap);
min-width: 0;
height: calc(var(--mk-tap) + 2px);
background: var(--mk-surface);
border: 1px solid var(--mk-line-strong);
border-radius: var(--mk-r-sm);
transition: border-color var(--mk-dur-fast) var(--mk-ease), box-shadow var(--mk-dur-fast) var(--mk-ease);
}
#topSearchFrm .header__searchField:focus-within { border-color: var(--mk-focus); box-shadow: var(--mk-focus-input); }
#topSearchFrm .header__searchInput {
flex: 1 1 auto;
width: auto;
min-width: 0;
height: 100%;
min-height: 0;
margin: 0;
padding: 0 0 0 12px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
outline: none;
color: var(--mk-ink);
font-size: calc(14 * var(--mk-px));
text-overflow: ellipsis;
}
#topSearchFrm .header__searchInput::placeholder { font-family: var(--mk-font); font-size: inherit; letter-spacing: 0; color: var(--mk-mute); text-align: left; opacity: 1; }
#topSearchFrm .header__searchBtn { flex: none; display: inline-flex; width: var(--mk-tap); min-width: var(--mk-tap); height: var(--mk-tap); min-height: var(--mk-tap); border-radius: 0 var(--mk-r-sm) var(--mk-r-sm) 0; }
#topSearchFrm .mk-hsearch__cancel { display: none; }
@media (min-width: 80em) {
.mk-hsearch { flex: 0 200 240px; min-width: min(240px, calc(152 * var(--mk-px))); margin-left: 8px; }
.current__user { max-width: 140px; }
#mkHdrSearchHome > .mk-hsearch__open { display: none; }
#mkHdrSearchHome > .mk-hsearch__box { position: relative; display: block; width: 100%; min-width: 0; }
#mkHdrSearchHome .mk-suggest { width: max(100%, 360px); left: auto; right: 0; }
}
#mkSearchLayer > .mk-search-sheet {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
width: 100%;
max-width: none;
height: 100%;
max-height: none;
padding: calc(12px + env(safe-area-inset-top)) var(--mk-gutter) 0;
border: 0;
border-radius: 0;
box-shadow: none;
overflow: hidden;
}
#mkSearchLayer .mk-search-sheet__slot,
#mkSearchLayer .mk-hsearch__box { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
#mkSearchLayer #topSearchFrm .mk-hsearch__cancel { display: inline-flex; flex: none; margin-right: -8px; padding: 0 8px; }
#mkSearchLayer #topSearchFrm .header__searchField { height: 46px; }
#mkSearchLayer #topSearchFrm .header__searchBtn { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
#mkSearchLayer .mk-suggest { flex: 1 1 auto; margin: 8px calc(-1 * var(--mk-gutter)) 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
#mkSearchLayer .mk-suggest[hidden] { display: none; }
#mkSearchLayer[data-anchored] > .mk-layer__dim { background: transparent; }
#mkSearchLayer[data-anchored] > .mk-search-sheet {
position: fixed;
inset: auto;
width: 360px;
height: auto;
max-height: 70vh;
padding: 12px;
border: 1px solid var(--mk-line);
border-radius: var(--mk-r-md);
box-shadow: var(--mk-elev-pop);
}
#mkSearchLayer[data-anchored] .mk-suggest { margin: 8px -12px -12px; padding-bottom: 8px; }
#mkSearchLayer[data-anchored] #topSearchFrm .mk-hsearch__cancel { display: none; }
.mk-account-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: var(--mk-tap);
height: var(--mk-tap);
margin: 0 -6px 0 0;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--mk-dur-press) var(--mk-ease);
}
.mk-account-btn:active { background: var(--mk-line-soft); }
.mk-account-btn__img { display: block; width: 28px; height: 28px; border-radius: 50%; background-color: var(--mk-line-soft); background-repeat: no-repeat; background-position: center; background-size: cover; box-shadow: 0 0 0 1px var(--mk-line); }
.mk-account-btn__badge {
position: absolute;
top: 0;
right: -4px;
min-width: 18px;
min-height: 18px;
padding: 0 5px;
box-sizing: border-box;
border-radius: var(--mk-r-pill);
background: var(--mk-danger);
color: var(--mk-on-ink);
font-size: var(--mk-fs-xs);
font-weight: 600;
line-height: calc(18 * var(--mk-px));
text-align: center;
box-shadow: 0 0 0 2px var(--mk-surface);
}
@media (max-width: 839px) {
html { scroll-padding-bottom: calc(var(--mk-actionbar-h) + 16px + env(safe-area-inset-bottom)); }
.logo { width: 132px; margin: 0; }
.headerInner { gap: 16px; }
.headerUtil { margin: 0; }
.current__userWrap, .header-notification { display: none; }
.mk-hsearch__open { margin: 0 -8px 0 0; }
}
@media (prefers-reduced-motion: reduce) { body.mk-header-hidden .header { transform: none; } }
@media (min-width: 840px) { body.mk-header-hidden .header { transform: none; } }
.mk-tabbar { display: none; }
@media (max-width: 839px) {
.mk-tabbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: var(--mk-z-bar);
display: block;
min-height: var(--mk-tabbar-h);
padding: 8px var(--mk-gutter) calc(8px + env(safe-area-inset-bottom));
box-sizing: border-box;
background: var(--mk-surface);
box-shadow: inset 0 1px 0 var(--mk-line);
transition: transform var(--mk-dur-base) var(--mk-ease);
}
body.mk-kbd .mk-tabbar { transform: translateY(calc(100% + env(safe-area-inset-bottom))); }
.mk-tabbar__list { display: flex; flex-wrap: wrap; gap: var(--mk-tap-gap); margin: 0; padding: 0; list-style: none; }
.mk-tabbar__list > li { display: flex; flex: 1 1 auto; margin: 0; }
.mk-tabbar__tab {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
min-height: var(--mk-tap);
padding: 0 12px;
border-radius: var(--mk-r-md);
color: var(--mk-meta);
font-size: var(--mk-fs-md);
line-height: calc(20 * var(--mk-px));
font-weight: 500;
text-align: center;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--mk-dur-press) var(--mk-ease), color var(--mk-dur-fast) var(--mk-ease);
}
.mk-tabbar__tab:active { background: var(--mk-line-soft); }
.mk-tabbar__tab[aria-current="page"] { background: var(--mk-accent-soft); color: var(--mk-accent-ink); font-weight: 600; }
.mk-tabbar__tab:focus-visible { outline-offset: -2px; }
}
@media (max-width: 359px) {
.mk-tabbar__list { gap: 4px; }
.mk-tabbar__tab { padding: 0 8px; }
}
.mk-account-sheet .mk-sheet__body { padding: 4px 0 calc(8px + env(safe-area-inset-bottom)); }
.mk-account-list { margin: 0; padding: 0; list-style: none; }
.mk-account-list > li + li { border-top: 1px solid var(--mk-line-soft); }
.mk-account-list > li.mk-account-list__sep { margin-top: 8px; border-top: 1px solid var(--mk-line); }
.mk-account-list__item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: 56px;
margin: 0;
padding: 0 24px;
border: 0;
background: transparent;
color: var(--mk-ink);
font-family: var(--mk-font);
font-size: calc(15 * var(--mk-px));
line-height: calc(22 * var(--mk-px));
font-weight: 500;
text-align: left;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--mk-dur-press) var(--mk-ease);
}
.mk-account-list__item:active { background: var(--mk-line-soft); }
@media (hover: hover) { .mk-account-list__item:hover { background: var(--mk-canvas); } }
.mk-account-list__item:focus-visible { outline-offset: -2px; }
.mk-account-list__count {
min-width: 22px;
min-height: 22px;
margin-left: auto;
padding: 0 7px;
box-sizing: border-box;
border-radius: var(--mk-r-pill);
background: var(--mk-danger);
color: var(--mk-on-ink);
font-size: var(--mk-fs-xs);
font-weight: 600;
line-height: calc(22 * var(--mk-px));
text-align: center;
}
.modal:is(.login, .join, .find) .mk-auth-lead {
margin: 0 0 20px;
text-wrap: balance;
color: var(--mk-meta);
font-size: calc(14 * var(--mk-px));
line-height: calc(22 * var(--mk-px));
text-align: center;
}
.modal.login .mk-auth-note {
margin: -4px 0 20px;
padding: 10px 12px;
border: 1px solid var(--mk-line);
border-radius: var(--mk-r-sm);
background: var(--mk-accent-soft);
color: var(--mk-ink);
font-size: calc(13 * var(--mk-px));
line-height: calc(20 * var(--mk-px));
text-align: left;
}
.modal.login .mk-auth-note .mk-link-btn { display: inline; min-height: 0; margin: 0; padding: 0; vertical-align: baseline; color: var(--mk-accent-ink); font-size: inherit; font-weight: 600; line-height: inherit; text-decoration: underline; text-underline-offset: 2px; }
.modal:is(.login, .join, .find) .form__btm.mk-auth-row { justify-content: flex-end; margin-top: 8px; }
.modal:is(.login, .join, .find) .login__item .mk-field-hint { margin-top: 6px; }
.modal:is(.join, .find) .mk-done { padding: 0; text-align: left; }
.modal:is(.join, .find) .mk-done[hidden] { display: none; }
.modal:is(.join, .find) .mk-done__title {
margin: 0 0 8px;
padding: 0 40px 0 0;
color: var(--mk-ink);
font-size: var(--mk-fs-dialog);
line-height: calc(28 * var(--mk-px));
font-weight: 600;
outline: none;
}
.modal:is(.join, .find) .mk-done__body { margin: 0 0 12px; color: var(--mk-body); font-size: calc(14 * var(--mk-px)); line-height: calc(22 * var(--mk-px)); }
.modal:is(.join, .find) .mk-done__body[hidden] { display: none; }
.modal:is(.join, .find) .mk-done .mk-done__ok { width: 100%; margin: 12px 0 0; }
.modal:is(.login, .join, .find) .modal__topTit[hidden],
.modal:is(.login, .join, .find) .joinTxt__wrap[hidden],
.modal:is(.login, .join, .find) form[hidden] { display: none; }
.footer { padding: 64px 0 32px; background: var(--mk-footer); }
.ft__btmPart { flex-wrap: wrap; padding: 0; }
.ft__btmLeft {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px 24px;
width: 100%;
margin: 0;
text-align: left;
}
.ft__btmLeft > li,
.ft__btmLeft > li.two,
.ft__btmLeft > li:last-child { width: auto; margin: 0; }
.ft__btmTit { height: auto; margin: 0; font-size: var(--mk-fs-xs); line-height: calc(16 * var(--mk-px)); font-weight: 500; }
.ft__btmTit a, .ft__btmTit > span {
display: inline-flex;
align-items: center;
min-height: var(--mk-tap);
font-family: var(--mk-mono);
font-size: var(--mk-fs-xs);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mk-on-dark);
}
.ft__btmTit a span { font-family: inherit; }
.ft__btmList a { display: flex; align-items: center; min-height: var(--mk-tap); padding: 0; border-radius: var(--mk-r-xs); }
.ft__btmList span { display: inline-flex; align-items: center; gap: 6px; font-size: calc(14 * var(--mk-px)); color: var(--mk-faint); transition: color var(--mk-dur-fast) var(--mk-ease); }
.ft__btmList .linkArrow { flex: none; width: 11px; height: 11px; margin: 0; opacity: .8; }
.ft__btmRight {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 24px;
width: 100%;
margin: 48px 0 0;
padding: 24px 0 0;
border-top: 1px solid color-mix(in srgb, var(--mk-surface) 10%, var(--mk-footer));
text-align: left;
}
.ft__btmRight .copyright { order: 1; display: block; margin: 0; font-size: calc(13 * var(--mk-px)); color: var(--mk-faint); }
.ft__linkList { order: 2; gap: 8px 20px; justify-content: flex-start; }
.ft__linkList li:nth-of-type(1) { margin: 0; padding: 0; }
.ft__linkList li::after { content: none; }
.ft__linkList a { display: inline-flex; align-items: center; min-height: var(--mk-tap); padding: 0; border-radius: var(--mk-r-xs); }
.ft__linkList li span { font-size: calc(13 * var(--mk-px)); color: var(--mk-faint); transition: color var(--mk-dur-fast) var(--mk-ease); }
.snsList { order: 3; margin: 0 -8px 0 auto; gap: var(--mk-tap-gap); justify-content: flex-end; }
.snsList li { margin: 0; }
.snsList a {
display: flex;
align-items: center;
justify-content: center;
width: var(--mk-tap);
height: var(--mk-tap);
border-radius: var(--mk-r-sm);
transition: background-color var(--mk-dur-fast) var(--mk-ease);
}
.snsList img { height: 18px; width: auto; opacity: .6; transition: opacity var(--mk-dur-fast) var(--mk-ease); }
.snsList a:active { background: color-mix(in srgb, var(--mk-surface) 12%, var(--mk-footer)); }
@media (hover: hover) {
.ft__btmList a:hover span,
.ft__linkList a:hover span { color: var(--mk-on-dark); }
.snsList a:hover { background: color-mix(in srgb, var(--mk-surface) 8%, var(--mk-footer)); }
.snsList a:hover img { opacity: 1; }
}
.footer :focus-visible { outline-color: var(--mk-on-dark); }
@media (max-width: 1024px) {
.ft__btmRight { margin: 40px 0 0; text-align: left; }
}
@media (max-width: 839px) {
.footer { padding: 48px 0 40px; }
.ft__btmPart { padding: 0; }
.ft__btmRight { flex-direction: column; align-items: flex-start; gap: 12px; margin: 32px 0 0; text-align: left; }
.snsList { order: 1; margin: 0 0 0 -8px; justify-content: flex-start; }
.ft__linkList { order: 2; justify-content: flex-start; }
.ft__btmRight .copyright { order: 3; }
}
@media (max-width: 599px) {
.ft__btmLeft { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; margin: 0; text-align: left; }
.ft__btmLeft > li,
.ft__btmLeft > li.two { width: auto; margin: 0; }
#topSearchFrm .header__searchInput { font-size: calc(16 * var(--mk-px)); }
}
/* /common/css/refresh/14-controls.css */
a, button { -webkit-tap-highlight-color: transparent; }
.btnSubmit:where(:not(.mk-btn, .mk-fab)), .btn_addProject:where(:not(.mk-btn, .mk-fab)), .btnSave:where(:not(.mk-btn, .mk-fab)), .btnList:where(:not(.mk-btn, .mk-fab)), .btnMore:where(:not(.mk-btn, .mk-fab)), .cmt__btnSubmit:where(:not(.mk-btn, .mk-fab)),
.btn__edit:where(:not(.mk-btn, .mk-fab)), .btn__follow:where(:not(.mk-btn, .mk-fab)), .boardPart .btn_wrap button:where(:not(.mk-btn, .mk-fab)), .form__btnWrap button:where(:not(.mk-btn, .mk-fab)),
.contestList .contest__button:where(:not(.mk-btn, .mk-fab)),
.modal.cropLayer .cropLy-footer button + button:where(:not(.mk-btn, .mk-fab)),
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap > :last-child:where(:not(.mk-btn, .mk-fab)),
.forumArea .forumView .contentBody.modify .cmt__btnWrap > .cmt__btnSubmit:where(:not(.mk-btn, .mk-fab)),
.subPage.contest[pageCode="sub02"] > .profileTap.ver2 a.profile__txt.green:where(:not(.mk-btn, .mk-fab)) {
--mk-busy-ring: var(--mk-on-ink);
align-items: center;
justify-content: center;
height: auto;
min-height: var(--mk-tap);
padding: 0 16px;
background: var(--mk-ink);
border: 1px solid var(--mk-ink);
border-radius: var(--mk-r-btn);
color: var(--mk-on-ink);
font-size: calc(14 * var(--mk-px));
font-weight: 500;
letter-spacing: 0;
text-align: center;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--mk-dur-fast) var(--mk-ease), border-color var(--mk-dur-fast) var(--mk-ease), color var(--mk-dur-fast) var(--mk-ease);
}
@media (hover: hover) {
.btnSubmit:where(:not(.mk-btn, .mk-fab)):hover, .btn_addProject:where(:not(.mk-btn, .mk-fab)):hover, .btnSave:where(:not(.mk-btn, .mk-fab)):hover, .btnList:where(:not(.mk-btn, .mk-fab)):hover, .btnMore:where(:not(.mk-btn, .mk-fab)):hover, .cmt__btnSubmit:where(:not(.mk-btn, .mk-fab)):hover,
.btn__edit:where(:not(.mk-btn, .mk-fab)):hover, .btn__follow:where(:not(.mk-btn, .mk-fab)):hover, .boardPart .btn_wrap button:where(:not(.mk-btn, .mk-fab)):hover, .form__btnWrap button:where(:not(.mk-btn, .mk-fab)):hover,
.contestList .contest__button:where(:not(.mk-btn, .mk-fab)):hover,
.modal.cropLayer .cropLy-footer button + button:where(:not(.mk-btn, .mk-fab)):hover,
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap > :last-child:where(:not(.mk-btn, .mk-fab)):hover,
.forumArea .forumView .contentBody.modify .cmt__btnWrap > .cmt__btnSubmit:where(:not(.mk-btn, .mk-fab)):hover,
.subPage.contest[pageCode="sub02"] > .profileTap.ver2 a.profile__txt.green:where(:not(.mk-btn, .mk-fab)):hover {
background: var(--mk-ink-hover);
border-color: var(--mk-ink-hover);
color: var(--mk-on-ink);
}
}
.btnSubmit:where(:not(.mk-btn, .mk-fab)):active, .btn_addProject:where(:not(.mk-btn, .mk-fab)):active, .btnSave:where(:not(.mk-btn, .mk-fab)):active, .btnList:where(:not(.mk-btn, .mk-fab)):active, .btnMore:where(:not(.mk-btn, .mk-fab)):active, .cmt__btnSubmit:where(:not(.mk-btn, .mk-fab)):active,
.btn__edit:where(:not(.mk-btn, .mk-fab)):active, .btn__follow:where(:not(.mk-btn, .mk-fab)):active, .boardPart .btn_wrap button:where(:not(.mk-btn, .mk-fab)):active, .form__btnWrap button:where(:not(.mk-btn, .mk-fab)):active,
.contestList .contest__button:where(:not(.mk-btn, .mk-fab)):active,
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap > :last-child:where(:not(.mk-btn, .mk-fab)):active {
background: var(--mk-ink-press);
border-color: var(--mk-ink-press);
transition-duration: var(--mk-dur-press);
}
.btnCancel:where(:not(.mk-btn)), .btnPrev:where(:not(.mk-btn)), .btnNext:where(:not(.mk-btn)), .btn__unfollow:where(:not(.mk-btn)), .form__btnWrap button:nth-of-type(1):where(:not(.mk-btn)),
.commentArea .cmt__btnWrap > .cmt__btnCancel:where(:not(.mk-btn)),
.forumArea .forumView .contentBody.modify .cmt__btnWrap > .cmt__btnCancel:where(:not(.mk-btn)),
.board__view .btnListWrap a:not(.btnList):where(:not(.mk-btn)),
.subPage.member #isPassChange:where(:not(.mk-btn)),
.subPage.member .btns.myPicBtnDel > *:where(:not(.mk-btn)),
:is(.forumWrite, .subPage.contest:not(.ver2)) .covRemoveBtn:where(:not(.mk-btn)),
.modal.cropLayer .cropLy-footer button:where(:not(.mk-btn)),
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap > *:where(:not(.mk-btn)),
.subPage.contest:not(.ver2) .modal.itemAdd .btnWrap .btnCancel:where(:not(.mk-btn)),
.sr__sort .btn__srReset:where(:not(.mk-btn)),
.subPage.forumWrite .attachmentList .fileItem .fileTrigger:where(:not(.mk-btn)),
.subPage.forumWrite button.attachButton:where(:not(.mk-btn)),
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__btnAdd:where(:not(.mk-btn)),
.subPage.forumWrite .categoryWrap .categoryTrigger:where(:not(.mk-btn)),
.subPage.contest .boardPart .bSearch__btn--submit:where(:not(.mk-btn)) {
align-items: center;
justify-content: center;
height: auto;
min-height: var(--mk-tap);
padding: 0 16px;
background: var(--mk-btn-secondary-bg);
border: 1px solid transparent;
border-radius: var(--mk-r-btn);
color: var(--mk-ink);
font-size: calc(14 * var(--mk-px));
font-weight: 500;
letter-spacing: 0;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--mk-dur-fast) var(--mk-ease), border-color var(--mk-dur-fast) var(--mk-ease), color var(--mk-dur-fast) var(--mk-ease);
}
.btnCancel:where(:not(.mk-btn)):hover, .btnPrev:where(:not(.mk-btn)):hover, .btnNext:where(:not(.mk-btn)):hover, .btn__unfollow:where(:not(.mk-btn)):hover, .form__btnWrap button:nth-of-type(1):where(:not(.mk-btn)):hover,
.commentArea .cmt__btnWrap > .cmt__btnCancel:where(:not(.mk-btn)):hover,
.forumArea .forumView .contentBody.modify .cmt__btnWrap > .cmt__btnCancel:where(:not(.mk-btn)):hover,
.board__view .btnListWrap a:not(.btnList):where(:not(.mk-btn)):hover,
.subPage.member #isPassChange:where(:not(.mk-btn)):hover,
.subPage.member .btns.myPicBtnDel > *:where(:not(.mk-btn)):hover,
:is(.forumWrite, .subPage.contest:not(.ver2)) .covRemoveBtn:where(:not(.mk-btn)):hover,
.modal.cropLayer .cropLy-footer button:not(:last-child):where(:not(.mk-btn)):hover,
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap > :not(:last-child):where(:not(.mk-btn)):hover,
.subPage.contest:not(.ver2) .modal.itemAdd .btnWrap .btnCancel:where(:not(.mk-btn)):hover,
.sr__sort .btn__srReset:where(:not(.mk-btn)):hover,
.subPage.forumWrite .attachmentList .fileItem .fileTrigger:where(:not(.mk-btn)):hover,
.subPage.forumWrite button.attachButton:where(:not(.mk-btn)):hover,
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__btnAdd:where(:not(.mk-btn)):hover,
.subPage.forumWrite .categoryWrap .categoryTrigger:where(:not(.mk-btn)):hover,
.subPage.contest .boardPart .bSearch__btn--submit:where(:not(.mk-btn)):hover {
background: var(--mk-btn-secondary-bg);
border-color: transparent;
color: var(--mk-ink);
}
@media (hover: hover) {
.btnCancel:where(:not(.mk-btn)):hover, .btnPrev:where(:not(.mk-btn)):hover, .btnNext:where(:not(.mk-btn)):hover, .btn__unfollow:where(:not(.mk-btn)):hover, .form__btnWrap button:nth-of-type(1):where(:not(.mk-btn)):hover,
.commentArea .cmt__btnWrap > .cmt__btnCancel:where(:not(.mk-btn)):hover,
.forumArea .forumView .contentBody.modify .cmt__btnWrap > .cmt__btnCancel:where(:not(.mk-btn)):hover,
.board__view .btnListWrap a:not(.btnList):where(:not(.mk-btn)):hover,
.subPage.member #isPassChange:where(:not(.mk-btn)):hover,
.subPage.member .btns.myPicBtnDel > *:where(:not(.mk-btn)):hover,
:is(.forumWrite, .subPage.contest:not(.ver2)) .covRemoveBtn:where(:not(.mk-btn)):hover,
.modal.cropLayer .cropLy-footer button:not(:last-child):where(:not(.mk-btn)):hover,
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap > :not(:last-child):where(:not(.mk-btn)):hover,
.subPage.contest:not(.ver2) .modal.itemAdd .btnWrap .btnCancel:where(:not(.mk-btn)):hover,
.sr__sort .btn__srReset:where(:not(.mk-btn)):hover,
.subPage.forumWrite .attachmentList .fileItem .fileTrigger:where(:not(.mk-btn)):hover,
.subPage.forumWrite button.attachButton:where(:not(.mk-btn)):hover,
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__btnAdd:where(:not(.mk-btn)):hover,
.subPage.forumWrite .categoryWrap .categoryTrigger:where(:not(.mk-btn)):hover,
.subPage.contest .boardPart .bSearch__btn--submit:where(:not(.mk-btn)):hover { background: var(--mk-line); }
}
.btnCancel:where(:not(.mk-btn)):active, .btnPrev:where(:not(.mk-btn)):active, .btnNext:where(:not(.mk-btn)):active, .btn__unfollow:where(:not(.mk-btn)):active, .form__btnWrap button:nth-of-type(1):where(:not(.mk-btn)):active,
.commentArea .cmt__btnWrap > .cmt__btnCancel:where(:not(.mk-btn)):active,
.board__view .btnListWrap a:not(.btnList):where(:not(.mk-btn)):active,
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap > :not(:last-child):where(:not(.mk-btn)):active,
.sr__sort .btn__srReset:where(:not(.mk-btn)):active { background: var(--mk-line-strong); transition-duration: var(--mk-dur-press); }
.view__inner .btnMyProject--items > a[href^="javascript:projectRemove"]:where(:not(.mk-btn)),
.boardPart .bbsRemoveBtn:where(:not(.mk-btn)),
.commentArea .cmt__list .userInfoPart .cmt__btnWrap > button.commentDel:where(:not(.mk-btn)) {
color: var(--mk-danger-ink);
}
@media (hover: hover) {
.view__inner .btnMyProject--items > a[href^="javascript:projectRemove"]:where(:not(.mk-btn)):hover,
.boardPart .bbsRemoveBtn:where(:not(.mk-btn)):hover,
.commentArea .cmt__list .userInfoPart .cmt__btnWrap > button.commentDel:where(:not(.mk-btn)):hover {
background: var(--mk-danger-soft);
border-color: color-mix(in srgb, var(--mk-danger) 30%, var(--mk-surface));
color: var(--mk-danger-ink);
}
}
.btnSubmit:disabled, .btnSave:disabled, .form__btnWrap button:disabled, .btnCancel:disabled { opacity: .45; cursor: not-allowed; }
.btm__btnWrap { gap: 8px; }
.btm__btnWrap > .btnCancel, .btm__btnWrap > .btnSubmit { width: auto; min-width: 120px; margin: 0; }
.modal:is(.login, .join, .find) .btn__find,
.modal:is(.login, .join, .find) .joinTxt__wrap button {
display: inline-flex;
align-items: center;
min-height: var(--mk-tap);
color: var(--mk-accent-deep);
font-weight: 600;
}
.modal:is(.login, .join, .find) .btn__find:hover,
.modal:is(.login, .join, .find) .joinTxt__wrap button:hover { text-decoration: underline; text-underline-offset: 2px; }
input:where([type="text"], [type="password"], [type="email"], [type="search"], [type="url"], [type="number"], [type="tel"]), textarea, select {
color: var(--mk-ink);
border-radius: var(--mk-r-sm);
transition: border-color var(--mk-dur-fast) var(--mk-ease), box-shadow var(--mk-dur-fast) var(--mk-ease);
}
:where(input, textarea)::placeholder { color: var(--mk-mute); opacity: 1; }
.modal:is(.login, .join, .find) .login__input::placeholder,
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap :is(input, textarea)::placeholder,
.subPage.member .form__list :is(input, textarea)::placeholder { color: var(--mk-mute); opacity: 1; }
input:where([type="text"], [type="password"], [type="email"], [type="search"], [type="url"], [type="number"], [type="tel"]):focus-visible, textarea:focus-visible, select:focus-visible {
outline: none;
border-color: var(--mk-focus);
box-shadow: var(--mk-focus-input);
}
:where(input, select, textarea):disabled { background-color: var(--mk-line-soft); border-color: var(--mk-line); color: var(--mk-mute); cursor: not-allowed; }
:where(input:not([type=checkbox]):not([type=radio]), textarea)[readonly] { border-color: var(--mk-line); background-color: var(--mk-canvas); }
.subSec .selectBox__select,
.forumArea .filterWrap .dateWrap .selectBox__select,
.view__inner.search .src__select,
.sr__sort .sr__searchitem input,
.sr__searchitem .section-selector .section .selected,
.subPage.contest .boardPart .bSearch__select,
.subPage.contest .boardPart .bSearch__input,
.forumArea .categoryWrap .searchInput .inputBox,
.subPage.member .form__list input[type='text'],
.subPage.member .form__list input[type='password'],
.subPage.member .form__list select,
.subPage.member .form__list textarea,
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([name="userKey"]),
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap select,
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap textarea,
:is(.forumWrite, .subPage.contest:not(.ver2)) .label__file,
.subPage.contest:not(.ver2) .modal.itemAdd .modalForm_input,
.modal:is(.login, .join, .find) .login__input,
body .select2-container.select2-container--default .select2-selection--single {
height: auto;
min-height: var(--mk-tap);
padding: 0 12px;
background-color: var(--mk-surface);
border: 1px solid var(--mk-line-strong);
border-radius: var(--mk-r-sm);
font-family: var(--mk-font);
font-size: calc(14 * var(--mk-px));
color: var(--mk-ink);
transition: border-color var(--mk-dur-fast) var(--mk-ease), box-shadow var(--mk-dur-fast) var(--mk-ease);
}
.subSec .selectBox__select:hover,
.forumArea .filterWrap .dateWrap .selectBox__select:hover,
.view__inner.search .src__select:hover,
.sr__sort .sr__searchitem input:hover,
.sr__searchitem .section-selector .section .selected:hover,
.subPage.contest .boardPart .bSearch__select:hover,
.subPage.contest .boardPart .bSearch__input:hover,
.forumArea .categoryWrap .searchInput .inputBox:hover,
.subPage.member .form__list input:not(.readonly):hover,
.subPage.member .form__list textarea:hover,
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap input:not([type="checkbox"]):not([type="radio"]):hover,
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap select:hover,
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap textarea:hover,
:is(.forumWrite, .subPage.contest:not(.ver2)) .label__file:hover,
.modal:is(.login, .join, .find) .login__input:hover { border-color: var(--mk-faint); }
.subSec .selectBox__select:focus-visible,
.forumArea .filterWrap .dateWrap .selectBox__select:focus-visible,
.view__inner.search .src__select:focus-visible,
.sr__sort .sr__searchitem input:focus,
.sr__searchitem .section-selector .section .selected:focus-visible,
.subPage.contest .boardPart .bSearch__select:focus,
.subPage.contest .boardPart .bSearch__input:focus,
.forumArea .categoryWrap .searchInput .inputBox:focus-within,
.subPage.member .form__list input:focus,
.subPage.member .form__list select:focus,
.subPage.member .form__list textarea:focus,
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap input:focus,
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap select:focus,
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap textarea:focus,
:is(.forumWrite, .subPage.contest:not(.ver2)) .label__file:focus-within,
.subPage.contest:not(.ver2) .modal.itemAdd .modalForm_input:focus,
.modal:is(.login, .join, .find) .login__input:focus,
body .select2-container.select2-container--default.select2-container--focus .select2-selection--single,
body .select2-container.select2-container--default.select2-container--open .select2-selection--single {
outline: none;
border-color: var(--mk-focus);
box-shadow: var(--mk-focus-input);
}
.modal:is(.login, .join, .find) .login__input { height: auto; min-height: 44px; font-size: calc(15 * var(--mk-px)); }
.subPage.member .form__list textarea,
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap textarea { height: auto; padding: 10px 12px; line-height: 1.55; }
.subSec .selectBox__select,
.forumArea .filterWrap .dateWrap .selectBox__select,
.view__inner.search .src__select,
.subPage.contest .boardPart .bSearch__select,
.subPage.member .form__list select,
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap select {
padding-right: 34px;
background: var(--mk-surface) var(--mk-chevron) no-repeat right 12px center / 12px 12px;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.labelChk { position: relative; gap: 8px; min-height: 40px; }
.labelChk > input[type="checkbox"] {
display: block;
position: absolute;
left: 0;
top: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0;
opacity: 0;
pointer-events: none;
}
.labelChk__box {
flex: none;
width: 18px;
height: 18px;
background: var(--mk-surface);
border: 1px solid var(--mk-line-strong);
border-radius: var(--mk-r-xs);
transition: background-color var(--mk-dur-fast) var(--mk-ease), border-color var(--mk-dur-fast) var(--mk-ease);
}
.labelChk:hover .labelChk__box { border-color: var(--mk-faint); }
.labelChk__box::before {
left: 50%;
top: 45%;
width: 5px;
height: 9px;
background: none;
border: solid var(--mk-on-control);
border-width: 0 2px 2px 0;
transform: translate(-50%, -50%) rotate(45deg);
transition: opacity var(--mk-dur-fast) var(--mk-ease);
}
.labelRdi, .label__photoInput, .label__file, .subPage.forumWrite .attachmentList .fileItem { position: relative; }
.labelRdi > input[type="radio"],
.label__photoInput > input[type="file"],
.label__file > input[type="file"],
.subPage.forumWrite .attachmentList .fileItem > input[type="file"] {
display: block;
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
pointer-events: none;
}
.labelRdi:has(> input:focus-visible) .labelRdi__box,
.label__photoInput:has(> input:focus-visible) .profile__photo,
.label__file:has(> input:focus-visible),
.subPage.forumWrite .attachmentList .fileItem:has(> input:focus-visible) .fileTrigger { outline: 2px solid var(--mk-focus); outline-offset: 2px; }
.labelRdi { min-height: 40px; }
.labelRdi__box { flex: none; box-sizing: border-box; width: 18px; height: 18px; border: 1px solid var(--mk-line-strong); background: var(--mk-surface); transition: border-color var(--mk-dur-fast) var(--mk-ease); }
.labelRdi__box::after { width: 8px; height: 8px; background: var(--mk-control-on); }
input:checked + .labelRdi__box { border-color: var(--mk-control-on); }
@media (hover: hover) { .labelRdi:hover .labelRdi__box { border-color: var(--mk-faint); } .labelRdi:hover input:checked + .labelRdi__box { border-color: var(--mk-control-on); } }
.labelChk__box::after { content: none; }
input:checked + .labelChk__box { background: var(--mk-control-on); border-color: var(--mk-control-on); }
.labelChk:active .labelChk__box { border-color: var(--mk-control-on); }
input:indeterminate + .labelChk__box { background: var(--mk-control-on); border-color: var(--mk-control-on); }
input:indeterminate + .labelChk__box::before { width: 8px; height: 0; top: 50%; border-width: 0 0 2px; transform: translate(-50%, -50%); opacity: 1; }
input:focus-visible + .labelChk__box { outline: 2px solid var(--mk-focus); outline-offset: 2px; }
.sr__searchitem .section-selector .section .section-list ul li input[type=checkbox] + label { position: relative; background-image: none; }
.sr__searchitem .section-selector .section .section-list ul li input[type=checkbox] + label::before {
content: ""; position: absolute; left: 4px; top: 50%; width: 16px; height: 16px; margin-top: -8px; box-sizing: border-box;
border: 1px solid var(--mk-line-strong); border-radius: var(--mk-r-xs); background: var(--mk-surface);
}
.sr__searchitem .section-selector .section .section-list ul li input[type=checkbox]:is(:checked, :indeterminate) + label::before {
border-color: var(--mk-control-on);
background: var(--mk-control-on);
}
.sr__searchitem .section-selector .section .section-list ul li input[type=checkbox]:is(:checked, :indeterminate) + label::after {
content: ""; position: absolute; left: 5px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
background: var(--mk-on-control); -webkit-mask: var(--mk-ic-check) no-repeat center / 14px 14px; mask: var(--mk-ic-check) no-repeat center / 14px 14px;
}
.sr__searchitem .section-selector .section .section-list ul li input[type=checkbox]:indeterminate + label::after { -webkit-mask-image: var(--mk-ic-dash); mask-image: var(--mk-ic-dash); }
.labelChk__txt { margin: 0; font-size: calc(14 * var(--mk-px)); color: var(--mk-body); }
.warningTxt { margin: 6px 0 0; font-size: calc(13 * var(--mk-px)); color: var(--mk-danger-ink); }
:is(input, select, textarea)[aria-invalid="true"]:not(#mk-n):not(#mk-n),
select[aria-invalid="true"]:not(#mk-n) + .select2-container .select2-selection { border-color: var(--mk-danger); }
:is(input, select, textarea)[aria-invalid="true"]:not(#mk-n):not(#mk-n):focus,
select[aria-invalid="true"]:not(#mk-n) + .select2-container--focus .select2-selection { box-shadow: var(--mk-focus-input-error); }
@media (max-width: 599px) {
.mk-input, input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: calc(16 * var(--mk-px)); }
}
.doneMsg { padding: 12px 16px; font-size: calc(14 * var(--mk-px)); font-weight: 500; text-align: center; }
.doneMsg.green { background: var(--mk-ink); }
.doneMsg.red { background: var(--mk-danger); }
.projectList--items.markProject::before, .projectList--items.markReseller::before, .projectList--items.markWcc::before,
.view__cnts .info__inner.markProject::before, .view__cnts .info__inner.markReseller::before, .view__cnts .info__inner.markWcc::before,
.projectItem.draft a::after,
.view__inner.search .retrieved-section span,
.view__inner.search .retrieved-section span:not(:first-child),
.view__inner.search .src__type {
display: inline-block;
margin: 0;
padding: 2px 8px;
border-radius: var(--mk-r-pill);
background: var(--mk-line-soft);
color: var(--mk-ink);
font-family: var(--mk-mono);
font-size: var(--mk-fs-xs);
line-height: calc(16 * var(--mk-px));
font-weight: 500;
letter-spacing: .04em;
text-transform: uppercase;
}
.view__cnts .info__inner.markProject::before,
.view__cnts .info__inner.markWcc::before { background: var(--mk-accent-soft); color: var(--mk-accent-ink); }
.forumArea .forumList .listBody .listItem.pinned .contentItem .title::before,
.forumArea .forumList .listBody .listItem .contentItem .title strong,
.forumArea .forumList .listBody .listItem.hide .contentItem.colTopics::before,
.notification-wrap .notification-list ul li.new::after,
.subPage.contest .boardPart span.noti,
.subPage.contest .boardPart .online__status,
.forumArea .forumView .forumContent .contentHeader .info .subject span {
display: inline-flex;
align-items: center;
justify-content: center;
height: auto;
min-height: 20px;
padding: 0 8px;
border-radius: var(--mk-r-pill);
background: var(--mk-accent-soft);
color: var(--mk-accent-ink);
font-family: var(--mk-font);
font-size: var(--mk-fs-xs);
line-height: 1;
font-weight: 600;
letter-spacing: .02em;
white-space: nowrap;
}
.forumArea .forumList .listBody .listItem .contentItem .category,
.forumArea .forumView .forumContent .subjectContent > .contentHeader .info .subject,
.forum-history-list .history-item .category,
.view__inner.search .retrieved-category span,
.view__inner.search .retrieved-category span:not(:last-child) {
position: relative;
display: inline-block;
max-width: 100%;
height: auto;
min-height: 22px;
margin: 0;
padding: 0 8px 0 18px;
border: 0;
border-radius: var(--mk-r-xs);
background: var(--mk-line-soft);
color: var(--mk-ink);
font-family: var(--mk-font);
font-size: var(--mk-fs-sm);
line-height: calc(22 * var(--mk-px));
font-weight: 500;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.forumArea .forumList .listBody .listItem .contentItem .category::before,
.forumArea .forumView .forumContent .subjectContent > .contentHeader .info .subject::before,
.forum-history-list .history-item .category::before,
.view__inner.search .retrieved-category span::before {
content: "";
position: absolute;
left: 7px;
top: 50%;
width: 8px;
height: 8px;
margin-top: -4px;
border-radius: 2px;
background: var(--mk-accent);
}
a:is(.category, .subject):where(.forumArea *, .forum-history-list *),
.view__inner.search .retrieved-category a,
.forumArea .forumView .forumContent .selectedTags ul li:has(> a),
.forumArea .forumList .listBody .listItem .contentItem .selectedTags ul li:has(> a),
.rightNav a.vr__link { min-height: 40px; display: inline-flex; align-items: center; }
.forumArea .forumList .listBody .listItem .contentItem .selectedTags ul li,
.forumArea .forumView .forumContent .selectedTags ul li,
.rightNav .vr__link,
.rightNav .vr__link:last-child {
display: inline-flex;
align-items: center;
height: auto;
min-height: 24px;
margin: 0;
padding: 0 8px;
border: 1px solid var(--mk-line);
border-radius: var(--mk-r-xs);
background: var(--mk-surface);
color: var(--mk-body);
font-size: var(--mk-fs-sm);
line-height: 1;
font-weight: 500;
cursor: default;
}
.subPage.contest .view__inner .view__cnts,
.subPage.etc .board__view.news,
.subPage.etc .limit.etc__inner,
.subPage.member .form__list,
.subPage.member .tapPart__cnts,
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap,
.forumArea .forumView .forumContent .subjectContent,
.forumArea .forumView .forumContent .commentList .commentContent,
.forumArea .forumList,
.forumArea .categoryWrap .categorySelector,
.notification-wrap .notification-list,
.subPage.contest .boardPart,
.view__inner.search .sr__sort,
.profileArea .profile__txtWrap:not(.mid),
.subPage.contest .contest-notice-surf5 {
background: var(--mk-surface);
border: 1px solid var(--mk-line);
border-radius: var(--mk-r-md);
box-shadow: none;
}
.projectArea .swiper-slide,
.projectList--items,
.projectItem,
.view__inner.search .src__link,
.pastList .past__link {
border: 1px solid var(--mk-line);
border-radius: var(--mk-r-md);
transition: border-color var(--mk-dur-fast) var(--mk-ease), box-shadow var(--mk-dur-fast) var(--mk-ease);
}
.projectArea .swiper-slide:hover,
.projectList--items:hover,
.projectItem:hover,
.view__inner.search .src__link:hover,
.pastList .past__link:hover { box-shadow: none; }
@media (hover: hover) {
.projectArea .swiper-slide:hover,
.projectList--items:hover,
.projectItem:hover,
.view__inner.search .src__link:hover,
.pastList .past__link:hover { border-color: var(--mk-line-strong); }
}
.projectArea .swiper-slide:active,
.projectList--items:active,
.projectItem:active,
.view__inner.search .src__link:active,
.pastList .past__link:active { border-color: var(--mk-faint); transition-duration: var(--mk-dur-press); }
:is(.projectArea .swiper-slide, .projectList--items, .projectItem, .view__inner.search .src__link, .pastList .past__link):active img { filter: brightness(.96); }
.projectArea .swiper-slide:hover .project__tit,
.projectList--items:hover .project__tit,
.projectItem > a:hover .project__tit,
.view__inner.search .src__link:hover .src__itemTit,
.pastList .past__link:hover .past__tit,
.newsList__wrap .newsList__link:hover .newsList__tit,
.forumArea .forumList .listBody .listItem:hover .contentItem .title,
.forum-history-list .history-item:hover .subject,
.rightNav .vr__navPhotoLink:hover .vr__photoTxt,
.subPage.contest .boardPart .board__link:hover,
.notification-wrap .notification-list ul li .message a:hover,
.header-notification .header-noti-list ul li .message a:hover {
color: var(--mk-ink);
text-decoration: underline;
text-decoration-color: var(--mk-line-strong);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.subSec .subTit,
.subPage[pageCode="sub0201"] .subTit,
.view__inner.search .src__bigTit,
.forumArea .subTitWrap .subTit,
.subPage.etc .limit:has(> .newsList__wrap) .subTit,
.profileArea .profile__txt--name,
.projectArea.mainSec .main__tit,
.subPage.member .tapPart__tit,
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formTit,
.subPage.contest .tapPart.ver2 .tapPart__tit,
.subPage.contest[pageCode="sub02"] > div > .limit > .tapPart__tit {
font-family: var(--mk-font);
font-size: var(--mk-t-page);
line-height: var(--mk-t-page-lh);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--mk-ink);
text-align: left;
text-wrap: balance;
overflow-wrap: anywhere;
}
.vc__article .vc__tit,
.board__view .bv__tit,
.forumArea .forumView .headerSubject h1,
.etc__inner .cntsTit {
font-family: var(--mk-font);
font-size: var(--mk-t-article);
line-height: var(--mk-t-article-lh);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--mk-ink);
text-wrap: balance;
overflow-wrap: anywhere;
}
.vc__article .target__tit,
.subPage.contest .similar-area .target__tit {
font-family: var(--mk-font);
font-size: var(--mk-t-section);
line-height: var(--mk-t-section-lh);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--mk-ink);
}
@media screen and (max-width: 768px) {
.subSec .subTit,
.subPage[pageCode="sub0201"] .subTit,
.view__inner.search .src__bigTit,
.forumArea .subTitWrap .subTit,
.subPage.etc .limit:has(> .newsList__wrap) .subTit,
.profileArea .profile__txt--name,
.projectArea.mainSec .main__tit,
.subPage.member .tapPart__tit,
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formTit,
.subPage.contest .tapPart.ver2 .tapPart__tit,
.subPage.contest[pageCode="sub02"] > div > .limit > .tapPart__tit { font-size: var(--mk-t-page-sm); line-height: var(--mk-t-page-sm-lh); }
.vc__article .vc__tit,
.board__view .bv__tit,
.forumArea .forumView .headerSubject h1,
.etc__inner .cntsTit { font-size: var(--mk-t-article-sm); line-height: var(--mk-t-article-sm-lh); }
.vc__article .target__tit,
.subPage.contest .similar-area .target__tit { font-size: var(--mk-t-section-sm); line-height: var(--mk-t-section-sm-lh); }
}
:is(.projectArea .swiper-slide, .projectList--items, .projectItem) .project__date,
.view__inner.search .src__date,
.newsList__wrap .newsList__date,
.board__view .bv__titInfo li,
.commentArea .cmt__list .vp__time,
.notification-wrap .notification-list ul li .date,
.forum-history-list .history-item .col.date,
.forum-history-list .history-item .activity .date,
.forumArea .forumList .listBody .listItem .contentItem .date,
.forumArea .forumView .forumContent .contentHeader .info .meta,
.forumArea .forumView .forumContent .contentHeader .info .meta span {
font-family: var(--mk-font);
letter-spacing: 0;
color: var(--mk-meta);
font-variant-numeric: tabular-nums;
}
.subSec .selectBox__tit,
.sr__sort .sr__bigTit,
.rightNav .vr__navTit,
.vc__article .target__subTit,
.forumArea .forumView .forumContent .contentAttach h3,
.profileArea .profile__miniTit {
font-family: var(--mk-mono);
font-size: calc(12 * var(--mk-px));
line-height: calc(16 * var(--mk-px));
font-weight: 500;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--mk-meta);
}
.contestList > li.noPost,
.pastList > li.noPost,
.profileTapArea .noPost,
.subPage.contest .tapPart .noPost,
.newsList__wrap .noPost,
.mk-empty {
grid-column: 1 / -1;
width: auto;
margin: 0;
padding: 48px 16px;
border: 1px dashed var(--mk-line-strong);
border-radius: var(--mk-r-md);
background: var(--mk-surface);
font-size: calc(14 * var(--mk-px));
line-height: 1.6;
font-weight: 400;
text-align: center;
color: var(--mk-body);
}
.subPage.contest .boardPart .board__table td.noPost,
.forumArea .forumList .listBody .listItem.noResult .contentItem.colEmpty {
padding: 48px 16px;
font-size: calc(14 * var(--mk-px));
font-weight: 400;
text-align: center;
color: var(--mk-body);
}
.view__inner.search .src__list:not(:has(li)) { display: none; }
#resultArea:has(.src__list:not(:has(li))) .pagingWrap { display: none; }
.profileTapArea .tapPart.on:not(:has(*)),
#forumListBody:not(:has(*)),
#resultArea:not(:has(*)),
#ajaxBoardArea:not(:has(*)) { min-height: 240px; }
@keyframes mk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
html.scrollHidden, html.mk-lock { overflow: hidden; }
.profileTapArea .profileTap .profile__txt,
.subPage.member .profileTap a.profile__txt,
.subPage.contest[pageCode="sub02"] > .profileTap.ver2 .profile__txt,
.forumArea .filterWrap .tabWrap button,
#followTab .profile__txt {
font-size: calc(14 * var(--mk-px));
font-weight: 500;
color: var(--mk-meta);
transition: color var(--mk-dur-fast) var(--mk-ease);
}
.profileTapArea .profileTap li:hover .profile__txt,
.profileTapArea .profileTap li.active .profile__txt,
.subPage.member .profileTap a.profile__txt:hover,
.subPage.member .profileTap li.active a.profile__txt,
.subPage.contest[pageCode="sub02"] > .profileTap.ver2 li:hover .profile__txt,
.subPage.contest[pageCode="sub02"] > .profileTap.ver2 li.active .profile__txt,
.forumArea .filterWrap .tabWrap button:hover,
.forumArea .filterWrap .tabWrap button.active,
#followTab li:hover .profile__txt,
#followTab li.active .profile__txt { color: var(--mk-ink); }
.profileTapArea .profileTap li::after,
.subPage.member .profileTap li::after,
.subPage.contest[pageCode="sub02"] > .profileTap.ver2 li::after,
#followTab li::after { bottom: -1px; height: 2px; background: var(--mk-ink); }
.profileTapArea .profileTap, .subPage.member .profileTap, .subPage.contest[pageCode="sub02"] > .profileTap.ver2, #followTab { column-gap: 8px; }
.profileTap li > button.profile__txt {
display: flex;
align-items: center;
height: 100%;
margin: 0;
padding: 0 12px;
border: 0;
background: none;
font-family: inherit;
line-height: 1;
white-space: nowrap;
cursor: pointer;
}
.profileTap li > button.profile__txt:focus-visible { outline-offset: -2px; border-radius: var(--mk-r-sm); }
.subSec .term-select-wrap,
.forumArea .filterWrap .dateWrap .term-select-wrap,
.subPage.contest .tapList {
display: flex;
align-items: center;
gap: 8px;
height: auto;
padding: 4px;
border: 0;
border-radius: var(--mk-r-md);
background: var(--mk-line-soft);
}
.subSec .term-select-wrap .term-select,
.subSec .term-select-wrap .term-select:not(:last-child),
.forumArea .filterWrap .dateWrap .term-select-wrap .term-select,
.subPage.contest .tapList li > :is(a, button) {
display: inline-flex;
align-items: center;
justify-content: center;
height: auto;
min-height: 40px;
min-width: 56px;
box-sizing: border-box;
margin: 0;
padding: 0 14px;
border: 0;
border-radius: var(--mk-r-sm);
background: transparent;
font-family: inherit;
font-size: calc(14 * var(--mk-px));
font-weight: 500;
color: var(--mk-meta);
white-space: nowrap;
cursor: pointer;
transition: background-color var(--mk-dur-fast) var(--mk-ease), color var(--mk-dur-fast) var(--mk-ease), box-shadow var(--mk-dur-fast) var(--mk-ease);
}
.subSec .term-select-wrap .term-select:hover,
.forumArea .filterWrap .dateWrap .term-select-wrap .term-select:hover,
.subPage.contest .tapList li > :is(a, button):hover { color: var(--mk-ink); }
.subSec .term-select-wrap .term-select.active,
.forumArea .filterWrap .dateWrap .term-select-wrap .term-select.active,
.subPage.contest .tapList li.active > :is(a, button) {
background: var(--mk-surface);
color: var(--mk-ink);
font-weight: 600;
box-shadow: 0 0 0 1px var(--mk-line);
}
.subSec .term-select-wrap .term-select:focus-visible,
.forumArea .filterWrap .dateWrap .term-select-wrap .term-select:focus-visible,
.subPage.contest .tapList li > :is(a, button):focus-visible { outline-offset: 0; }
.vc__article .vc__img,
.newsList__wrap .newsList__photo img,
:is(.view__cnts .vc__target2 .ck-content, .board__view .bv__cnts .ck-content, .tapPart .tapPart__cnts.ck-content) img {
position: relative;
}
.vc__article .vc__img::before,
:is(.view__cnts .vc__target2 .ck-content, .board__view .bv__cnts .ck-content, .tapPart .tapPart__cnts.ck-content) img::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--mk-line-soft) var(--mk-ph-chip) no-repeat center / 64px 64px;
}
:is(.view__cnts .vc__target2 .ck-content, .board__view .bv__cnts .ck-content, .tapPart .tapPart__cnts.ck-content) img::before { min-height: 120px; }
.pagingWrap { align-items: center; gap: 8px; height: auto; min-height: var(--mk-tap); margin: 48px 0 0; }
.pagingList { gap: 8px; margin: 0; }
.pagingList li { font-size: calc(14 * var(--mk-px)); }
.pagingWrap a {
flex: none;
width: var(--mk-tap);
height: var(--mk-tap);
border-radius: var(--mk-r-sm);
color: var(--mk-body);
transition: background-color var(--mk-dur-fast) var(--mk-ease), color var(--mk-dur-fast) var(--mk-ease);
}
.pagingWrap a::after,
.paging__current::after { content: none; }
.pagingWrap > a + a { margin-left: 0; }
.pagingWrap a span { font-size: calc(14 * var(--mk-px)); color: inherit; }
.pagingWrap a:hover { background: var(--mk-line-soft); color: var(--mk-ink); }
.pagingWrap a img { opacity: .6; }
.pagingWrap a.disabled { opacity: .35; }
.pagingWrap a.disabled:hover { background: transparent; }
.paging__current {
flex: none;
width: var(--mk-tap);
height: var(--mk-tap);
border-radius: var(--mk-r-sm);
background: var(--mk-ink);
color: var(--mk-surface);
font-size: calc(14 * var(--mk-px));
font-weight: 500;
}
.pagingWrap a.disabled { cursor: default; }
@media screen and (max-width: 480px) {
.pagingWrap > a:first-child, .pagingWrap > a:last-child { display: none; }
}
.pagingWrap .mk-page-summary { align-items: center; min-height: var(--mk-tap); padding: 0 8px; font-size: var(--mk-fs-md); font-variant-numeric: tabular-nums; color: var(--mk-body); }
@media (max-width: 599px) {
.pagingWrap > .pagingList, .pagingWrap > a:first-child, .pagingWrap > a:last-child { display: none; }
.pagingWrap > .mk-page-summary { display: inline-flex; }
}
.paging_all .btns,
.paging_all > .num > strong,
.paging_all > .num > a {
width: 36px;
height: 36px;
border: 0;
border-radius: var(--mk-r-sm);
background: transparent;
}
.paging_all > .num > strong,
.paging_all > .num > a { margin-left: 4px; font-size: calc(14 * var(--mk-px)); font-weight: 400; line-height: calc(36 * var(--mk-px)); color: var(--mk-body); }
.paging_all .btns:hover,
.paging_all > .num > a:hover { background: var(--mk-line-soft); color: var(--mk-ink); }
.paging_all .btns:hover:before,
.paging_all .btns:hover:after { border-color: var(--mk-ink); }
.paging_all > .num > strong { background: var(--mk-ink); color: var(--mk-surface); font-weight: 500; }
.modal { background: var(--mk-overlay); transition: opacity var(--mk-dur-base) var(--mk-ease), visibility var(--mk-dur-base) var(--mk-ease); }
.modal__inner {
max-width: 480px;
margin: 12vh auto 48px;
padding: 40px 40px 32px;
background: var(--mk-surface);
border: 1px solid var(--mk-line);
border-radius: var(--mk-r-md);
box-shadow: none;
}
.modal--close {
top: 12px;
right: 12px;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border-radius: var(--mk-r-sm);
transition: background-color var(--mk-dur-fast) var(--mk-ease);
}
@media (hover: hover) { .modal--close:hover { background: var(--mk-line-soft); } }
button.modal--close { border: 0; background: transparent; cursor: pointer; }
.modal--close img { width: 16px !important; opacity: .7; }
@media screen and (max-width: 768px) {
.modal__inner { margin: 72px auto 32px; padding: 32px 20px 24px; width: calc(100% - 32px); }
}
@media (max-width: 599px) {
.modal:is(.reportProject, .cropLayer, .itemAdd) { height: 100vh; height: 100dvh; }
.modal:is(.reportProject, .cropLayer, .itemAdd) .modal__inner {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: none;
max-height: 90vh;
max-height: 90dvh;
margin: 0;
box-sizing: border-box;
overflow-y: auto;
border-bottom: 0;
border-radius: var(--mk-r-lg) var(--mk-r-lg) 0 0;
transform: translateY(100%);
transition: transform var(--mk-dur-base) var(--mk-ease);
}
.modal.active:is(.reportProject, .cropLayer, .itemAdd) .modal__inner { transform: none; transition-duration: var(--mk-dur-slow); }
.modal:is(.reportProject, .cropLayer, .itemAdd) :is(.btnWrap, .cropLy-footer) {
position: sticky;
bottom: 0;
margin-bottom: 0;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
background: var(--mk-surface);
}
}
.board__table { border-top: 1px solid var(--mk-line); }
.board__table tr { border-bottom: 1px solid var(--mk-line); }
.board__table th { height: 44px; background: var(--mk-canvas); font-size: calc(13 * var(--mk-px)); font-weight: 500; color: var(--mk-body); }
.board__table td { height: 52px; font-size: calc(14 * var(--mk-px)); color: var(--mk-body); }
.board__table tbody tr { transition: background-color var(--mk-dur-fast) var(--mk-ease); }
.board__table tbody tr:hover { background: var(--mk-canvas); }
.vc__report {
display: flex;
justify-content: flex-end;
margin: 24px 0 0;
padding: 0;
border-top: 0;
}
.vc__report .btnReportProject {
height: auto;
min-height: 40px;
padding: 0 4px;
border: 0;
border-radius: var(--mk-r-xs);
background: none;
font-family: var(--mk-font);
font-size: calc(13 * var(--mk-px));
color: var(--mk-meta);
cursor: pointer;
transition: color var(--mk-dur-fast) var(--mk-ease);
}
@media (hover: hover) { .vc__report .btnReportProject:hover { color: var(--mk-ink); text-decoration: underline; text-underline-offset: 3px; } }
.vc__report .btnReportProject:focus-visible { outline: 2px solid var(--mk-focus); outline-offset: 2px; }
.vc__report .btnReportProject:disabled { opacity: .45; cursor: not-allowed; }
.vc__report.vc__staffAct .btnStaffDraft { color: var(--mk-danger-ink); }
.modal.reportProject .modal__topTit { margin-bottom: 8px; text-align: left; padding-right: 36px; font-size: calc(20 * var(--mk-px)); line-height: calc(28 * var(--mk-px)); font-weight: 600; color: var(--mk-ink); }
.modal.reportProject .modal__topTxt { margin: 8px 0 20px; font-size: calc(14 * var(--mk-px)); line-height: calc(22 * var(--mk-px)); color: var(--mk-body); }
.modal.reportProject .modal__line + .modal__line { margin-top: 16px; }
.modal.reportProject .modal__Name { display: block; margin: 0 0 6px; font-size: calc(14 * var(--mk-px)); font-weight: 600; color: var(--mk-ink); }
.modal.reportProject .modalForm_input {
display: block;
width: 100%;
box-sizing: border-box;
height: var(--mk-tap);
padding: 0 12px;
border: 1px solid var(--mk-line-strong);
border-radius: var(--mk-r-sm);
background-color: var(--mk-surface);
font-family: var(--mk-font);
font-size: calc(14 * var(--mk-px));
color: var(--mk-ink);
}
.modal.reportProject textarea.modalForm_input { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.55; resize: vertical; }
.modal.reportProject select.modalForm_input { padding-right: 32px; background-image: var(--mk-chevron); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; -webkit-appearance: none; appearance: none; }
.modal.reportProject .modalForm_input:hover { border-color: var(--mk-faint); }
.modal.reportProject .modalForm_input:focus { outline: none; border-color: var(--mk-focus); box-shadow: var(--mk-focus-input); }
.modal.reportProject .btnWrap { display: flex; justify-content: flex-end; gap: 8px; width: auto; height: auto; margin: 24px 0 0; }
.modal.reportProject .btnWrap > * { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 96px; height: auto; min-height: 44px; margin: 0; padding: 0 18px; }
.mk-notice {
max-width: 760px;
margin: 16px auto 0;
padding: 12px 16px;
border: 1px solid var(--mk-line);
border-left: 3px solid var(--mk-warn);
border-radius: var(--mk-r-sm);
background: var(--mk-surface);
font-size: calc(14 * var(--mk-px));
line-height: calc(22 * var(--mk-px));
color: var(--mk-body);
}
.mk-notice a { color: var(--mk-accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.view__cnts > .userInfoPart .vp__btmItem .vp__cnt { font-weight: 600; color: var(--mk-ink); font-variant-numeric: tabular-nums; }
@media screen and (max-width: 600px) {
.mk-notice { width: calc(100% - 32px); box-sizing: border-box; }
}
/* /common/css/refresh/20-list.css */
.main, .subPage { --mk-btn-secondary-bg: var(--mk-line); }
.main .mk-layer, .subPage .mk-layer { --mk-btn-secondary-bg: var(--mk-line-soft); }
.projectArea .swiper-slide,
.projectList--items,
.projectItem {
position: relative;
background: var(--mk-surface) var(--mk-ph-43) no-repeat center top / 100% auto;
overflow: hidden;
}
.projectArea .swiper-slide { height: auto; }
.projectArea .swiper-slide > a,
.projectList--items,
.projectItem {
display: flex;
flex-direction: column;
}
.projectArea .swiper-slide > a { height: 100%; }
.projectItem > a { display: block; }
:is(.projectArea .swiper-slide, .projectList--items, .projectItem) > .project__link {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
height: auto;
color: inherit;
text-decoration: none;
}
.projectItem:not(.draft) > .project__link { position: static; }
.project__link > .project__txtWrap::after {
content: "";
position: absolute;
inset: 0;
}
.projectArea .swiper-slide > a:focus-visible,
.projectList--items:focus-visible,
.projectItem > a:focus-visible,
:is(.projectArea .swiper-slide, .projectList--items, .projectItem) > .project__link:focus-visible {
outline-offset: -2px;
border-radius: var(--mk-r-md);
}
:is(.projectArea .swiper-slide, .projectList--items, .projectItem):focus-within { border-color: var(--mk-line-strong); }
:is(.projectArea .swiper-slide, .projectList--items, .projectItem) .project__img {
padding-bottom: 75%;
border: 0;
border-bottom: 1px solid var(--mk-line-soft);
}
:is(.projectArea .swiper-slide, .projectList--items, .projectItem) .project__img { background-repeat: no-repeat; }
:is(.projectArea .swiper-slide, .projectList--items, .projectItem) .project__img[style*="noIMG.png"] {
background-image: none !important;
}
:is(.projectArea .swiper-slide, .projectList--items, .projectItem) .project__cntsWrap {
display: flex;
align-items: flex-end;
padding: 16px;
background: var(--mk-card-scrim);
transition: opacity var(--mk-dur-fast) var(--mk-ease);
}
:is(.projectArea .swiper-slide, .projectList--items, .projectItem):focus-within .project__cntsWrap { opacity: 1; }
@media (hover: none) {
:is(.projectArea .swiper-slide, .projectList--items, .projectItem) .project__cntsWrap { display: none; }
}
:is(.projectArea .swiper-slide, .projectList--items, .projectItem) .project__cnts {
font-size: var(--mk-fs-sm);
line-height: 1.5;
max-height: none;
color: var(--mk-on-dark);
-webkit-line-clamp: 3;
}
:is(.projectArea .swiper-slide, .projectList--items, .projectItem) .project__txtWrap {
padding: 14px 16px 12px;
border: 0;
}
:is(.projectArea .swiper-slide, .projectList--items, .projectItem) .project__tit {
margin: 0 0 6px;
font-size: var(--mk-fs-lg);
line-height: calc(21 * var(--mk-px));
height: auto;
min-height: calc(2 * 21 * var(--mk-px));
font-weight: 600;
letter-spacing: -0.2px;
color: var(--mk-ink);
transition: color var(--mk-dur-fast) var(--mk-ease);
}
:is(.projectArea .swiper-slide, .projectList--items, .projectItem) .project__txt,
:is(.projectArea .swiper-slide, .projectList--items, .projectItem) .project__date {
font-size: var(--mk-fs-sm);
line-height: calc(18 * var(--mk-px));
font-weight: 400;
color: var(--mk-meta);
overflow-wrap: anywhere;
}
:is(.projectArea .swiper-slide, .projectList--items, .projectItem) .project__date {
margin: 2px 0 0;
}
:is(.projectArea .swiper-slide, .projectList--items, .projectItem, .sr__cnts) .project__infoList {
display: flex;
align-items: center;
gap: 16px;
margin-top: auto;
padding: 10px 16px 11px;
border: 0;
border-top: 1px solid var(--mk-line-soft);
}
:is(.projectArea .swiper-slide, .projectList--items, .projectItem, .sr__cnts) .project__infoItem {
display: flex;
align-items: center;
gap: 5px;
flex: 0 0 auto;
margin: 0;
}
:is(.projectArea .swiper-slide, .projectList--items, .projectItem, .sr__cnts) .project__infoItem.like,
:is(.projectArea .swiper-slide, .projectList--items, .projectItem, .sr__cnts) .project__infoItem.star {
margin: -8px;
padding: 8px;
border-radius: var(--mk-r-sm);
}
:is(.projectArea .swiper-slide, .projectList--items, .projectItem) .project__infoItem.star {
margin-left: auto;
}
:is(.projectArea .swiper-slide, .projectList--items, .projectItem, .sr__cnts) .project__iconWrap {
display: flex;
align-items: center;
width: auto;
height: 16px;
}
:is(.projectArea .swiper-slide, .projectList--items, .projectItem, .sr__cnts) .project__iconWrap img {
position: static;
width: auto;
max-width: none;
transition: filter var(--mk-dur-fast) var(--mk-ease), opacity var(--mk-dur-fast) var(--mk-ease);
}
:is(.projectArea .swiper-slide, .projectList--items, .projectItem, .sr__cnts) .like .project__iconWrap img { height: 13px; }
:is(.projectArea .swiper-slide, .projectList--items, .projectItem, .sr__cnts) .view .project__iconWrap img { height: 10px; }
:is(.projectArea .swiper-slide, .projectList--items, .projectItem, .sr__cnts) .comment .project__iconWrap img { height: 13px; }
:is(.projectArea .swiper-slide, .projectList--items, .projectItem, .sr__cnts) .star .project__iconWrap img { height: 15px; }
:is(.projectArea .swiper-slide, .projectList--items, .projectItem, .sr__cnts) .project__iconWrap img:not([src*="_on"]) {
filter: grayscale(1);
opacity: .6;
}
@media (hover: hover) {
:is(.projectArea .swiper-slide, .projectList--items, .projectItem, .sr__cnts) .pLikeBtn:hover img,
:is(.projectArea .swiper-slide, .projectList--items, .projectItem, .sr__cnts) .pBookBtn:hover img {
filter: none;
opacity: 1;
}
}
:is(.projectArea .swiper-slide, .projectList--items, .projectItem, .sr__cnts) .project__infoTxt,
:is(.projectArea .swiper-slide, .projectList--items, .projectItem, .sr__cnts) .like .project__infoTxt {
margin: 0;
font-size: var(--mk-fs-sm);
line-height: calc(16 * var(--mk-px));
color: var(--mk-meta);
font-variant-numeric: tabular-nums;
}
:is(.projectArea .swiper-slide, .projectList--items, .projectItem, .sr__cnts) .pLikeBtn.is-on .project__infoTxt,
:is(.projectArea .swiper-slide, .projectList--items, .projectItem, .sr__cnts) .pLikeBtn[aria-pressed="true"] .project__infoTxt { color: var(--mk-accent-ink); font-weight: 600; }
.project__link ~ .project__infoList {
position: relative;
z-index: 3;
gap: 8px;
padding: 0 8px;
min-height: 41px;
box-sizing: border-box;
pointer-events: none;
}
.project__link ~ .project__infoList :is(button, a) { pointer-events: auto; }
.project__link ~ .project__infoList > .project__infoItem { margin: 0; padding: 0; border-radius: 0; gap: 5px; }
.project__link ~ .project__infoList > .project__infoItem.view { margin-left: 8px; }
.project__link ~ .project__infoList > .project__infoItem.star { margin-left: auto; }
.project__link ~ .project__infoList button.project__iconWrap {
gap: 5px;
min-width: 40px;
height: auto;
min-height: 40px;
margin: 0;
padding: 0 8px;
border: 0;
border-radius: var(--mk-r-sm);
background: none;
font: inherit;
cursor: pointer;
}
.project__link ~ .project__infoList button.project__iconWrap.pBookBtn { justify-content: center; }
.project__link ~ .project__infoList button.project__iconWrap:focus-visible { outline: 2px solid var(--mk-focus); outline-offset: -2px; }
@media (hover: hover) { .project__link ~ .project__infoList button.project__iconWrap:hover { background: var(--mk-line-soft); } }
.project__link ~ .project__infoList button.project__iconWrap:active { background: var(--mk-line); transition-duration: var(--mk-dur-press); }
.project__link ~ .project__infoList button.project__iconWrap[aria-busy="true"] { opacity: .6; }
.projectList--items.markProject::before,
.projectList--items.markReseller::before,
.projectList--items.markWcc::before {
position: absolute;
top: 12px;
left: 12px;
border: 1px solid var(--mk-line);
background: var(--mk-badge-on-photo);
box-shadow: none;
color: var(--mk-accent-deep);
}
.projectList--items.markReseller::before { color: var(--mk-ink); }
.subSec .projectList--items::before { content: none; }
.projectItem.draft a::before {
background-color: var(--mk-dim);
}
.projectItem.draft a::after {
top: 12px;
left: 12px;
bottom: auto;
right: auto;
background-color: var(--mk-surface);
}
.project__noLink { cursor: default; }
.mainVisArea { position: relative; }
.mainVisArea .swiper-slide {
position: relative;
height: 560px;
background-color: var(--mk-footer) !important;
}
.mainVisArea .swiper-slide { background-repeat: no-repeat; }
.mainVisArea .swiper-slide.mv-on { background-image: var(--mv-pc); }
@media (max-width: 768px) { .mainVisArea .swiper-slide.mv-on { background-image: var(--mv-mo, var(--mv-pc)); } }
.mainVisArea .swiper-slide::before {
content: "";
position: absolute;
inset: 0;
background: var(--mk-hero-scrim);
pointer-events: none;
}
.mainVisArea .swiper-slide > .limit,
.mainVisArea .swiper-slide > .mainVis__btn {
position: relative;
z-index: 1;
}
.mainVisArea a.swiper-slide { color: inherit; text-decoration: none; }
.mainVisArea a.swiper-slide:focus-visible { outline-offset: -4px; }
.midBanner a.swiper-slide[href]:focus-visible { outline-offset: -4px; }
.mainVis__tit {
max-width: 760px;
margin: 0 0 20px;
font-size: calc(56 * var(--mk-px));
line-height: 1.05;
font-weight: 600;
letter-spacing: -2.4px;
color: var(--mk-on-dark);
text-wrap: balance;
}
.mainVis__txt {
max-width: 640px;
padding: 0;
font-size: calc(18 * var(--mk-px));
line-height: 1.55;
font-weight: 400;
color: var(--mk-on-dark);
}
.mainVis__txt + .mainVis__txt { margin: 2px 0 0; }
.mainVis__txt::before { content: none; }
.mainVis__btn {
width: auto;
min-width: 140px;
min-height: 44px;
height: auto;
margin: 28px 0 0;
padding: 0 20px;
border-radius: var(--mk-r-pill);
font-family: inherit;
font-size: var(--mk-fs-lg);
font-weight: 500;
letter-spacing: 0;
transition: opacity var(--mk-dur-fast) var(--mk-ease);
}
.mainVis__btn:hover { opacity: .9; }
.mk-carousel-ctl {
--mk-ic-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3h2v10H5zM9 3h2v10H9z'/%3E%3C/svg%3E");
--mk-ic-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3l8 5-8 5z'/%3E%3C/svg%3E");
position: absolute;
left: 0;
right: 0;
bottom: 24px;
z-index: 2;
display: flex;
justify-content: flex-end;
pointer-events: none;
}
.mk-carousel-ctl__box {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0 16px 0 0;
border-radius: var(--mk-r-pill);
background: var(--mk-dim);
color: var(--mk-on-dark);
pointer-events: auto;
}
.mk-carousel-ctl .mk-pause { color: var(--mk-on-dark); border-radius: var(--mk-r-pill); }
.mk-carousel-ctl .mk-pause .mk-pause__icon {
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: var(--mk-ic-pause) no-repeat center / 16px 16px;
mask: var(--mk-ic-pause) no-repeat center / 16px 16px;
}
.mk-carousel-ctl .mk-pause[aria-pressed="true"] .mk-pause__icon { -webkit-mask-image: var(--mk-ic-play); mask-image: var(--mk-ic-play); }
@media (hover: hover) { .mk-carousel-ctl .mk-pause:hover { background: var(--mk-dim); } }
.mk-carousel-ctl .mk-pause:focus-visible { outline-color: var(--mk-on-dark); }
.mk-carousel-ctl .mk-fraction {
font-size: var(--mk-fs-sm);
line-height: calc(18 * var(--mk-px));
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--mk-on-dark);
}
.midBanner { position: relative; }
.midBanner .mk-carousel-ctl { bottom: 16px; }
.projectArea.mainSec { padding: 56px 0 0; }
.projectArea.mainSec.news { padding-bottom: 72px; }
.projectArea.mainSec > .limit {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 24px;
align-items: center;
}
.projectArea.mainSec .main__titWrap {
display: contents;
text-align: left;
}
.projectArea.mainSec .main__titWrap::after { content: none; }
.projectArea.mainSec .main__tit {
grid-column: 1;
grid-row: 1;
margin: 0;
}
.projectArea.mainSec .main__titTxt {
grid-column: 1 / -1;
grid-row: 2;
max-width: 640px;
margin: 8px 0 20px;
font-size: var(--mk-fs-lg);
line-height: 1.55;
font-weight: 400;
color: var(--mk-body);
}
.projectArea.mainSec .project__btnWrap {
grid-column: 2;
grid-row: 1;
align-items: center;
gap: 8px;
margin: 0;
transform: none;
}
.projectArea.mainSec .project__btnMore {
gap: 8px;
min-height: 40px;
padding: 0 2px;
color: var(--mk-ink);
}
.projectArea.mainSec .project__btnMore .project__btnTxt,
.projectArea.mainSec .project__btnMore:hover .project__btnTxt {
margin: 0;
font-size: var(--mk-fs-md);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: inherit;
transition: color var(--mk-dur-fast) var(--mk-ease);
}
.projectArea.mainSec .project__btnMore .circle,
.projectArea.mainSec .project__btnMore:hover .circle {
width: 16px;
height: 16px;
border: 0;
border-radius: 0;
}
.projectArea.mainSec .project__btnMore .arrow,
.projectArea.mainSec .project__btnMore:hover .arrow {
left: 1px;
width: 13px;
height: 1.5px;
background: currentColor;
}
.projectArea.mainSec .project__btnMore .arrow::after,
.projectArea.mainSec .project__btnMore:hover .arrow::after {
width: 7px;
height: 7px;
border-color: currentColor;
border-width: 1.5px;
}
.projectArea.mainSec .project__btnMore:hover .project__btnTxt { text-decoration: underline; text-underline-offset: 3px; }
.projectArea.mainSec .project__btnMore:focus-visible { border-radius: var(--mk-r-sm); }
.projectArea.mainSec .swiper-container {
grid-column: 1 / -1;
width: 100%;
min-width: 0;
padding: 6px 0 24px;
}
.projectArea .swiper-scrollbar {
display: block !important;
left: 0;
bottom: 4px;
width: 100%;
height: 3px;
border-radius: var(--mk-r-pill);
background: var(--mk-line);
}
.projectArea .swiper-scrollbar-drag { background: var(--mk-ink); }
.mk-rail-nav {
--mk-ic-chev-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3L5 8l5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--mk-ic-chev-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
display: none;
flex: none;
align-items: center;
justify-content: center;
width: var(--mk-tap);
height: var(--mk-tap);
margin: 0;
padding: 0;
border: 1px solid var(--mk-line-strong);
border-radius: var(--mk-r-pill);
background: var(--mk-surface);
color: var(--mk-ink);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--mk-dur-fast) var(--mk-ease), border-color var(--mk-dur-fast) var(--mk-ease);
}
.mk-rail-nav::before {
content: "";
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: var(--mk-ic-chev-l) no-repeat center / 16px 16px;
mask: var(--mk-ic-chev-l) no-repeat center / 16px 16px;
}
.mk-rail-nav.mk-rail-next::before { -webkit-mask-image: var(--mk-ic-chev-r); mask-image: var(--mk-ic-chev-r); }
@media (hover: hover) { .mk-rail-nav:hover:not(:disabled) { border-color: var(--mk-faint); background: var(--mk-line-soft); } }
.mk-rail-nav:active:not(:disabled) { background: var(--mk-line); transition-duration: var(--mk-dur-press); }
.mk-rail-nav:focus-visible { outline: 2px solid var(--mk-focus); outline-offset: 2px; }
.mk-rail-nav:disabled { opacity: .45; cursor: not-allowed; }
@media (min-width: 840px) { .mk-rail-nav { display: inline-flex; } }
.mk-rail-nav[hidden] { display: none !important; }
.projectArea.mainSec .mk-viewAll { display: none; grid-column: 1 / -1; margin: 4px 0 0; }
.projectArea.contest.mainSec {
margin-top: 32px;
padding-bottom: 24px;
border-top: 1px solid var(--mk-line);
border-bottom: 1px solid var(--mk-line);
background: var(--mk-surface);
}
.projectArea.contest .swiper-slide { background: var(--mk-surface) var(--mk-ph-43) no-repeat center top / 100% auto; }
.midBanner:has(.swiper-slide) { margin-top: 32px; }
.projectArea.subSec > .limit {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 24px;
}
.projectArea.subSec > .limit > * { grid-column: 1 / -1; }
.projectArea.subSec > .limit > .subTitWrap { grid-column: 1; grid-row: 1; }
.projectArea.subSec > .limit > .addProject {
grid-column: 2;
grid-row: 1;
align-self: end;
margin: 0 0 28px;
}
.subSec .subTitWrap {
margin: 0 0 28px;
padding: var(--mk-page-top) 0 0;
text-align: left;
}
.subSec .subTitWrap::after { content: none; }
.subSec .subTit__txt {
display: block;
margin: 6px 0 0;
font-size: var(--mk-fs-body);
line-height: calc(24 * var(--mk-px));
font-weight: 400;
color: var(--mk-body);
}
.subSec .btn_addProject:not(.mk-fab) { min-width: 0; }
.subSec .btn_addProject:not(.mk-fab)::before {
content: "+";
margin: 0 6px 0 0;
font-size: var(--mk-fs-body);
font-weight: 400;
}
.subSec .wrapSelectBox {
gap: 16px;
align-items: end;
margin: 0 0 16px;
padding: 0 0 24px;
border-bottom: 1px solid var(--mk-line);
}
.subSec .selectBox__tit { display: block; margin: 0 0 6px; }
.subSec .selectBox__select { width: 100%; }
.subSec .selectBox.right .selectBox__select { width: 100%; }
@media (min-width: 840px) {
.subSec .wrapSelectBox {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14em), 1fr));
}
.subSec .mk-filterBtn { display: none; }
.subSec .mk-filterLayer,
.subSec .mk-filterLayer[hidden] { display: contents; }
.subSec .mk-filterLayer > .mk-layer__dim,
.subSec .mk-filterLayer .mk-sheet__head,
.subSec .mk-filterLayer .mk-sheet__foot { display: none; }
.subSec .mk-filterLayer .mk-sheet { display: contents; }
.subSec .mk-filterLayer .mk-sheet__body { display: contents; }
.subSec .wrapSelectBox .selectBox { margin: 0; }
.subSec .wrapSelectBox .selectBox--term { align-self: end; }
}
.mk-active-filters { align-items: center; margin: 0 0 16px; }
.mk-active-filters[hidden] { display: none; }
.mk-result-count {
margin: 0 0 16px;
font-size: var(--mk-fs-md);
line-height: calc(20 * var(--mk-px));
color: var(--mk-meta);
font-variant-numeric: tabular-nums;
}
.subSec .projectList,
.profileTapArea .projectList,
.subPage.contest[pageCode="sub02"] .projectList {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.subSec .projectList--items { width: auto; }
.profileTapArea .projectItem,
.profileTapArea .projectItem:nth-of-type(n),
.subPage.contest[pageCode="sub02"] .projectItem,
.subPage.contest[pageCode="sub02"] .projectItem:nth-of-type(n) {
width: auto;
margin: 0;
}
.subSec .pagingWrap { margin-top: 40px; }
.view__inner.search {
gap: 32px;
align-items: flex-start;
margin: 0 auto;
padding-top: var(--mk-page-top);
border: 0;
background: none;
}
.view__inner.search .sr__sort {
flex: 0 0 264px;
width: 264px;
padding: 20px;
}
.sr__sort .sr__bigTit { display: block; margin: 0 0 4px; }
.sr__sort .sr__sortItem {
padding: 16px 0;
border-bottom: 1px solid var(--mk-line-soft);
}
.sr__sort .sr__sortItem:last-child { border-bottom: 0; }
.sr__sort .sr__tit {
display: block;
margin: 0 0 8px;
font-size: var(--mk-fs-sm);
line-height: calc(18 * var(--mk-px));
font-weight: 600;
color: var(--mk-ink);
}
.sr__sort .labelChk { gap: 10px; min-height: var(--mk-tap); padding: 0; }
.sr__sort .labelChk__txt {
margin: 0;
font-size: var(--mk-fs-md);
line-height: calc(20 * var(--mk-px));
color: var(--mk-body);
}
.sr__sort .btn__srMore {
display: inline-flex;
align-items: center;
min-height: var(--mk-tap);
margin: 0;
padding: 0;
font-size: var(--mk-fs-sm);
font-weight: 500;
color: var(--mk-accent-deep);
}
@media (hover: hover) { .sr__sort .btn__srMore:hover { text-decoration: underline; text-underline-offset: 3px; } }
.sr__sort .sr__sortItem.is-empty { display: none; }
.sr__sort .sr__sortItem .btn__srMore { display: none; }
.sr__sort .sr__sortItem.has-more .btn__srMore { display: inline-flex; }
.sr__sort .sr__sortItem.has-more:not(.open) .sr__labelWrap > label:nth-child(n+4) { display: none; }
.sr__sort .mk-sheet__foot .btn__srReset { margin: 0; }
@media (min-width: 840px) {
.view__inner.search .sr__sort.mk-layer,
.view__inner.search .sr__sort.mk-layer[hidden] {
position: static;
inset: auto;
z-index: auto;
display: block;
align-items: stretch;
justify-content: flex-start;
}
.sr__sort > .mk-layer__dim,
.sr__sort .mk-sheet__head,
.sr__sort .sr__apply { display: none; }
.sr__sort .mk-sheet {
position: static;
display: block;
width: auto;
max-width: none;
max-height: none;
border: 0;
border-radius: 0;
background: none;
opacity: 1;
transform: none;
transition: none;
}
.sr__sort .mk-sheet__body { padding: 0; overflow: visible; }
.sr__sort .mk-sheet__foot { padding: 0; border: 0; justify-content: flex-start; margin: 16px 0 0; }
.sr__tools .sr__filterBtn { display: none; }
}
@media (max-width: 839px) {
.view__inner.search .sr__sort.mk-layer {
flex: none;
width: auto;
padding: 0;
border: 0;
border-radius: 0;
background: none;
}
.sr__sort .sr__bigTit { display: none; }
.sr__sort .mk-sheet__body { padding-top: 0; }
.view__inner.search { gap: 0; }
}
.view__inner.search .sr__cnts {
flex: 1 1 auto;
min-width: 0;
padding: 0;
}
.view__inner.search .sr__titWrap { margin: 0 0 16px; scroll-margin-top: calc(var(--mk-header-offset) + 16px); }
.view__inner.search .src__bigTit { margin: 0; }
.sr__keyword { display: flex; gap: 8px; margin: 0 0 16px; }
.sr__keyword .mk-input { flex: 1 1 auto; width: auto; min-width: 0; }
.sr__keyword .mk-btn { flex: none; }
.sr__types, .sr__cats { margin: 0 0 12px; }
.sr__cats[hidden] { display: none; }
.sr__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 16px;
margin: 0 0 16px;
padding: 12px 0 0;
border-top: 1px solid var(--mk-line);
}
.sr__bar .src__subTxt {
margin: 0;
font-size: var(--mk-fs-md);
line-height: calc(20 * var(--mk-px));
color: var(--mk-body);
font-variant-numeric: tabular-nums;
}
.sr__bar .src__subTxt span { font-weight: 600; color: var(--mk-ink); }
.sr__tools { display: flex; align-items: center; gap: 8px; }
.view__inner.search .src__select { position: static; width: 168px; }
.mk-hit {
background: none;
color: inherit;
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--mk-accent);
text-decoration-thickness: 2px;
text-underline-offset: 2px;
}
.subTit__txt a, .main__titTxt a, .profile__txt a, .mk-empty__text a, .src__itemTxt a { text-decoration: underline; text-underline-offset: 3px; }
.view__inner.search .src__list {
display: flex;
flex-direction: column;
gap: 12px;
}
.view__inner.search .src__item {
position: relative;
display: grid;
grid-template-columns: 184px minmax(0, 1fr) auto;
grid-template-areas: "photo txt side";
column-gap: 20px;
padding: 16px;
background: var(--mk-surface) var(--mk-ph-43r) no-repeat 16px 16px / 184px 138px;
border: 1px solid var(--mk-line);
border-radius: var(--mk-r-md);
transition: border-color var(--mk-dur-fast) var(--mk-ease);
}
.view__inner.search .src__item.type-F { background-image: none; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "txt side"; }
@media (hover: hover) { .view__inner.search .src__item:hover { border-color: var(--mk-line-strong); } }
.view__inner.search .src__item:active { border-color: var(--mk-faint); transition-duration: var(--mk-dur-press); }
.view__inner.search .src__item:focus-within { border-color: var(--mk-line-strong); }
.view__inner.search .src__link {
display: inline;
padding: 0;
border: 0;
border-radius: 0;
background: none;
color: inherit;
text-decoration: none;
}
.view__inner.search .src__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--mk-r-md); }
.view__inner.search .src__link:focus-visible { outline: none; }
.view__inner.search .src__item:has(.src__link:focus-visible) { outline: 2px solid var(--mk-focus); outline-offset: 2px; }
@media (hover: hover) {
.view__inner.search .src__item:hover .src__link { text-decoration: underline; text-decoration-color: var(--mk-line-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; }
}
.view__inner.search .src__photo {
grid-area: photo;
align-self: start;
width: auto;
height: auto;
padding: 0;
aspect-ratio: 4 / 3;
border-radius: var(--mk-r-thumb-s);
background-size: cover !important;
}
.view__inner.search .src__photo,
.contestList .contest__photo,
.pastList .past__photo { background-repeat: no-repeat; }
.view__inner.search .src__photo[style*="noIMG.png"] {
background-image: var(--mk-ph-43) !important;
}
.view__inner.search .src__txtWrap {
grid-area: txt;
display: flex;
flex-direction: column;
min-width: 0;
padding: 0;
}
.view__inner.search .src__itemTit {
margin: 0 0 6px;
font-size: calc(17 * var(--mk-px));
line-height: calc(24 * var(--mk-px));
font-weight: 600;
letter-spacing: -0.3px;
color: var(--mk-ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.view__inner.search .src__itemTxt {
margin: 0 0 12px;
max-height: none;
font-size: var(--mk-fs-md);
line-height: calc(22 * var(--mk-px));
color: var(--mk-body);
-webkit-line-clamp: 2;
}
.view__inner.search .sr__cnts .project__infoList {
align-self: flex-start;
padding: 0;
border: 0;
gap: 16px;
}
.view__inner.search .src__side {
grid-area: side;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.view__inner.search .src__date {
font-size: var(--mk-fs-sm);
line-height: calc(24 * var(--mk-px));
white-space: nowrap;
}
.view__inner.search .src__side .pBookBtn {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
min-height: 40px;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--mk-r-sm);
background: none;
cursor: pointer;
}
.view__inner.search .src__side .pBookBtn:focus-visible { outline: 2px solid var(--mk-focus); outline-offset: -2px; }
@media (hover: hover) { .view__inner.search .src__side .pBookBtn:hover { background: var(--mk-line-soft); } }
.view__inner.search .src__side .pBookBtn img { position: static; height: 15px; width: auto; }
.view__inner.search .src__itemTit .src__type { margin: 0 8px 0 0; vertical-align: 2px; }
.view__inner.search .src__itemTit .src__type.type-ucc,
.view__inner.search .src__itemTit .src__type.type-wcc { background: var(--mk-accent-soft); color: var(--mk-accent-ink); }
.view__inner.search .pagingWrap { margin-top: 40px; }
.subPage[pageCode="sub0201"] .subTitWrap {
margin: 0 0 24px;
padding: var(--mk-page-top) 0 0;
text-align: left;
}
.subPage[pageCode="sub0201"] .subTitWrap::after { content: none; }
.subPage[pageCode="sub0201"] .contestList + .subTitWrap { padding-top: 64px; }
.subPage[pageCode="sub0201"] .subTit__txt {
display: block;
margin: 6px 0 0;
font-size: var(--mk-fs-body);
line-height: calc(24 * var(--mk-px));
font-weight: 400;
color: var(--mk-body);
}
.contestList { display: grid; gap: 16px; }
.contestList > li:not(.noPost) {
display: grid;
grid-template-columns: 360px minmax(0, 1fr);
height: auto;
min-height: 320px;
margin: 0;
border: 1px solid var(--mk-line);
border-radius: var(--mk-r-md);
background: var(--mk-ph-chip) no-repeat calc(50% + 180px) 50% / 48px 48px, linear-gradient(90deg, var(--mk-surface) 360px, var(--mk-line-soft) 360px);
overflow: hidden;
}
.contestList .contest__txtWrap {
display: flex;
flex-direction: column;
align-items: flex-start;
width: auto;
padding: 32px;
border: 0;
}
.contestList .contest__tit {
margin: 0 0 20px;
font-size: calc(26 * var(--mk-px));
line-height: 1.2;
max-height: none;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--mk-ink);
-webkit-line-clamp: 3;
overflow-wrap: anywhere;
}
.contestList .contest__name {
font-family: var(--mk-mono);
font-size: var(--mk-fs-xs);
line-height: calc(16 * var(--mk-px));
font-weight: 500;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--mk-meta);
}
.contestList .contest__val {
margin: 4px 0 24px;
font-size: var(--mk-fs-body);
line-height: calc(24 * var(--mk-px));
font-weight: 600;
color: var(--mk-ink);
}
.contestList .contest__button {
display: inline-flex;
width: auto;
margin-top: auto;
padding: 0 18px;
}
.contestList .contest__photo {
height: auto;
min-height: 100%;
}
.contestList .contest__photo[style*="noIMG.png"] { background-image: none !important; }
.contestList > li.noPost { display: block; min-height: 0; background: var(--mk-surface); }
.pastList {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.pastList .pastItem,
.pastList .pastItem:nth-of-type(n) {
width: auto;
margin: 0;
}
.pastList .past__link {
display: flex;
flex-direction: column;
height: 100%;
background: var(--mk-surface) var(--mk-ph-31) no-repeat center top / 100% auto;
overflow: hidden;
}
.pastList .past__photo {
display: block;
border-bottom: 1px solid var(--mk-line-soft);
}
.pastList .past__photo[style*="noIMG.png"] { background-image: none !important; }
.pastList .past__txtWrap,
.pastList .pastItem:hover .past__txtWrap {
position: static;
flex: 1;
gap: 10px;
height: auto;
padding: 14px 16px 16px;
background: none;
opacity: 1;
}
.pastList .past__tit {
height: auto;
min-height: calc(2 * 21 * var(--mk-px));
font-size: var(--mk-fs-lg);
line-height: calc(21 * var(--mk-px));
font-weight: 600;
letter-spacing: -0.2px;
color: var(--mk-ink);
-webkit-line-clamp: 2;
transition: color var(--mk-dur-fast) var(--mk-ease);
}
.pastList .past__btn {
justify-content: flex-start;
width: auto;
height: auto;
border-radius: 0;
background: none;
font-size: var(--mk-fs-sm);
font-weight: 500;
color: var(--mk-body);
font-variant-numeric: tabular-nums;
transition: color var(--mk-dur-fast) var(--mk-ease);
}
.pastList .past__btn::after { content: "\2192"; margin: 0 0 0 6px; }
@media (hover: hover) { .pastList .past__link:hover .past__btn { color: var(--mk-ink); } }
.subPage .profileArea {
display: grid;
grid-template-columns: 96px minmax(0, 1fr) minmax(0, 360px);
column-gap: 28px;
align-items: start;
min-height: 0;
padding: var(--mk-page-top) 0 32px;
}
.profileArea .profile__photo {
width: 96px;
height: 96px;
margin: 0;
border: 1px solid var(--mk-line);
background-color: var(--mk-line-soft) !important;
}
.profileArea .profile__txtWrap,
.profileArea .profile__txtWrap.mid {
width: auto;
margin: 0;
padding: 0;
flex: initial;
}
.profileArea .profile__txt--name { margin: 4px 0 10px; }
.profileArea .profile__amountList {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 20px;
margin: 0;
}
.profileArea .profile__amountList li { display: block; line-height: calc(20 * var(--mk-px)); }
.profileArea .profile__amountList li,
.profileArea .profile__amountList li:nth-child(n+4) {
width: auto;
margin: 0;
font-size: var(--mk-fs-md);
line-height: calc(20 * var(--mk-px));
font-weight: 400;
color: var(--mk-body);
}
.profileArea .profile__amountLink {
margin: 0 2px 0 0;
font-weight: 600;
color: var(--mk-ink);
font-variant-numeric: tabular-nums;
}
.profileArea #anchorFollower,
.profileArea #anchorFollowing { display: inline-flex; align-items: center; gap: 4px; min-height: var(--mk-tap); margin: -8px 0; vertical-align: middle; cursor: pointer; }
.profileArea button.profile__amountLink { padding: 0; background: none; border: 0; font-family: inherit; font-size: inherit; line-height: inherit; text-align: left; }
.profileArea .profile__amountList li[hidden] { display: none; }
.profileArea #anchorFollower span,
.profileArea #anchorFollowing span { font-weight: 400; color: var(--mk-body); }
.profileArea #anchorFollower .mk-count,
.profileArea #anchorFollowing .mk-count { font-weight: 600; color: var(--mk-ink); font-variant-numeric: tabular-nums; }
@media (hover: hover) {
.profileArea #anchorFollower:hover span,
.profileArea #anchorFollowing:hover span { text-decoration: underline; text-underline-offset: 3px; }
}
.profileArea .btn__edit,
.profileArea .btn__follow,
.profileArea .btn__unfollow {
width: auto;
max-width: max-content;
margin: 16px 0 0;
}
.profileArea .profile__txtWrap:not(.mid) { padding: 16px 20px; }
.profileArea .profile__miniTit { min-width: 72px; line-height: calc(20 * var(--mk-px)); }
.profileArea .profile__txt {
font-size: var(--mk-fs-md);
line-height: calc(20 * var(--mk-px));
font-weight: 400;
color: var(--mk-ink);
overflow-wrap: anywhere;
}
.profileArea .profile__infoList {
min-width: 0;
margin: 12px 0 0;
padding: 12px 0 0;
border-top: 1px solid var(--mk-line-soft);
}
.profileArea .profile__infoList li { gap: 12px; }
.profileArea .profile__txtWrap:not(.mid):has(> p.profile__txt:empty) > .profile__miniTit:first-child { display: none; }
.profileArea .profile__txtWrap:not(.mid):has(> p.profile__txt:empty) .profile__infoList { margin: 0; padding: 0; border: 0; }
.profileArea .profile__infoList li + li { margin: 6px 0 0; }
.profileArea .profile__fill { display: flex; align-items: center; min-height: var(--mk-tap); padding: 8px 16px; }
.profileArea .profile__fillLink {
display: inline-flex;
align-items: center;
min-height: var(--mk-tap);
font-size: var(--mk-fs-md);
line-height: calc(20 * var(--mk-px));
font-weight: 500;
color: var(--mk-accent-ink);
text-decoration: underline;
text-underline-offset: 3px;
}
.profileTapArea .profileTap {
flex-wrap: nowrap;
justify-content: flex-start;
gap: 0 8px;
min-height: 0;
margin: 0;
border-bottom: 1px solid var(--mk-line);
background: none;
overflow-x: auto;
scrollbar-width: none;
}
@media screen and (max-width: 768px) {
.profileTapArea .profileTap { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.profileTap li > button.profile__txt { padding: 0 10px; }
}
.profileTapArea .profileTap li,
.profileTapArea .profileTap li:last-child {
flex: 0 0 auto;
height: auto;
min-height: 44px;
margin: 0;
padding: 0;
}
.profileTapArea .profileTap li > button.profile__txt { min-height: 44px; }
.mk-tab-count { margin-left: 4px; font-weight: 400; font-variant-numeric: tabular-nums; }
.profileTapArea .tapPart {
padding: 28px 0 72px;
background: none;
}
.mk-more-wrap { display: flex; justify-content: center; margin: 32px 0 0; }
.mk-more-wrap .mk-more { min-width: 200px; }
#followModal .follow-wrap .follow-list ul { font-size: var(--mk-fs-lg); }
#followModal .follow-wrap .follow-list ul li { height: auto; min-height: 72px; padding: 12px 0; gap: 12px; }
#followModal .follow-wrap .follow-list ul li .user-name .nickname { font-size: var(--mk-fs-sm); color: var(--mk-meta); }
#followModal .follow-wrap .follow-list ul li .user-name .name { color: var(--mk-ink); font-weight: 600; }
#followModal .follow-wrap .follow-list ul li .follow-control {
flex: none;
margin: 0;
padding: 0;
border: 0;
background: none;
font: inherit;
cursor: pointer;
}
#followModal .follow-wrap .follow-list ul li .follow-control .btn__follow,
#followModal .follow-wrap .follow-list ul li .follow-control .btn__unfollow { width: 120px; height: auto; min-height: var(--mk-tap); }
#followModal .follow-wrap .follow-list ul li .follow-control:focus-visible { outline: 2px solid var(--mk-focus); outline-offset: 2px; border-radius: var(--mk-r-sm); }
.profileTapArea .notification-wrap .notification-list ul li .date,
.profileTapArea .forum-history-list .history-item .col.date,
.profileTapArea .forum-history-list .history-item .activity .date,
.profileTapArea .forum-history-list .history-item .activity .msg { font-size: var(--mk-fs-sm); line-height: calc(18 * var(--mk-px)); }
.profileTapArea .forum-history-list .history-item { position: relative; }
.profileTapArea .forum-history-list .history-item .subject a::after { content: ""; position: absolute; inset: 0; }
.profileTapArea .forum-history-list .history-item .subject a:focus-visible { outline: none; }
.profileTapArea .forum-history-list .history-item:has(.subject a:focus-visible) { outline: 2px solid var(--mk-focus); outline-offset: -2px; }
.profileTapArea .notification-wrap .notification-list ul li .message a { text-decoration: underline; text-underline-offset: 3px; }
@media screen and (max-width: 1099px) {
.subSec .projectList,
.profileTapArea .projectList,
.subPage.contest[pageCode="sub02"] .projectList { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
@media screen and (max-width: 1100px) {
.pastList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 1024px) {
.mainVisArea .swiper-slide { height: 460px; min-height: 0; max-height: none; }
.mainVis__tit { font-size: calc(44 * var(--mk-px)); letter-spacing: -1.8px; }
.mainVis__btn { margin: 24px 0 0; }
.projectArea.mainSec .project__btnMore .project__btnTxt::after { content: " \2192"; }
.subPage .profileArea {
grid-template-columns: 80px minmax(0, 1fr);
row-gap: 20px;
padding: var(--mk-page-top-sm) 0 24px;
}
.profileArea .profile__photo { width: 80px; height: 80px; }
.profileArea .profile__txtWrap:not(.mid) { grid-column: 1 / -1; }
}
@media screen and (max-width: 839px) {
.subSec .addProject { display: none; }
.projectArea.subSec > .limit { display: block; }
.subSec .wrapSelectBox {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 12px;
padding: 0;
border-bottom: 0;
}
.subSec .mk-filterBtn { flex: none; }
.subSec .wrapSelectBox > .selectBox--sort { order: 0; flex: 1 1 9em; max-width: 240px; width: auto; min-width: 0; margin: 0; }
.subSec .mk-filterLayer .mk-sheet__body { display: flex; flex-direction: column; gap: 16px; }
.subSec .mk-filterLayer .selectBox { order: 0; flex: none; width: 100%; margin: 0; }
.subSec .mk-filterLayer .selectBox .selectBox__select { width: 100%; }
.subSec .mk-filterLayer .selectBox--term .term-select-wrap { width: 100%; }
html:has(.mk-fab) { scroll-padding-bottom: 160px; }
.subSec .projectList { padding-bottom: 64px; }
.subSec .pagingWrap { margin-top: 8px; }
}
@media screen and (max-width: 768px) {
.mainVisArea .swiper-slide { height: 420px; }
.mainVisArea .swiper-slide::before {
background: var(--mk-hero-scrim-sm);
}
.mainVisArea .swiper-slide { align-items: flex-end; padding-bottom: 40px; }
.mainVis__tit { font-size: calc(36 * var(--mk-px)); letter-spacing: -1.4px; margin: 0 0 14px; }
.mainVis__txt { font-size: var(--mk-fs-body); }
.projectArea.mainSec { padding-top: 40px; }
.projectArea.mainSec.news { padding-bottom: 48px; }
.projectArea.mainSec .main__titTxt { font-size: var(--mk-fs-md); margin: 6px 0 16px; }
.projectArea.contest.mainSec { margin-top: 16px; }
.midBanner:has(.swiper-slide) { margin-top: 16px; }
.subSec .subTitWrap,
.subPage[pageCode="sub0201"] .subTitWrap { padding-top: var(--mk-page-top-sm); margin-bottom: 20px; }
.subSec .subTit__txt,
.subPage[pageCode="sub0201"] .subTit__txt { font-size: var(--mk-fs-lg); }
.subPage[pageCode="sub0201"] .contestList + .subTitWrap { padding-top: 40px; }
.contestList > li:not(.noPost) { grid-template-columns: minmax(0, 1fr); min-height: 0; background: var(--mk-surface) var(--mk-ph-31) no-repeat center top / 100% auto; }
.contestList .contest__photo { order: -1; min-height: 0; padding-bottom: 0; aspect-ratio: 3 / 1; }
.contestList .contest__txtWrap { order: 2; padding: 20px; }
.contestList .contest__tit { font-size: calc(22 * var(--mk-px)); margin-bottom: 14px; }
.contestList .contest__button { margin-top: 0; }
.view__inner.search { padding-top: var(--mk-page-top-sm); }
}
@media screen and (max-width: 839px) and (min-width: 600px) {
.subSec .projectList,
.profileTapArea .projectList,
.subPage.contest[pageCode="sub02"] .projectList { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media screen and (max-width: 599px) {
.mainVisArea { border-radius: 0 0 var(--mk-r-thumb-l) var(--mk-r-thumb-l); overflow: hidden; }
.projectArea.mainSec .project__btnMore { display: none; }
.projectArea.mainSec .mk-viewAll { display: flex; }
.subSec .projectList,
.profileTapArea .projectList { display: block; }
.subPage.contest[pageCode="sub02"] .projectList { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.subSec .projectList--items,
.profileTapArea .projectItem,
.profileTapArea .projectItem:nth-of-type(n) {
min-height: 104px;
margin: 0;
padding: 0;
border: 0;
border-bottom: 1px solid var(--mk-line);
border-radius: 0;
background: none;
overflow: visible;
}
.subSec .projectList--items:hover,
.subSec .projectList--items:active,
.subSec .projectList--items:focus-within,
.profileTapArea .projectItem:hover,
.profileTapArea .projectItem:active,
.profileTapArea .projectItem:focus-within { border-color: var(--mk-line); }
:is(.subSec .projectList--items, .profileTapArea .projectItem) > .project__link {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
column-gap: 16px;
align-items: start;
padding: 10px 0;
}
:is(.subSec .projectList--items, .profileTapArea .projectItem) > .project__link:focus-visible { border-radius: var(--mk-r-sm); outline-offset: 2px; }
:is(.subSec .projectList--items, .profileTapArea .projectItem) .project__img {
width: 96px;
height: 72px;
padding: 0;
border: 0;
border-radius: var(--mk-r-thumb-s);
background-color: var(--mk-line-soft);
overflow: hidden;
}
:is(.subSec .projectList--items, .profileTapArea .projectItem) .project__cntsWrap { display: none; }
:is(.subSec .projectList--items, .profileTapArea .projectItem) .project__txtWrap { min-width: 0; padding: 0 0 44px; }
:is(.subSec .projectList--items, .profileTapArea .projectItem) .project__tit {
min-height: 0;
margin: 0 0 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
:is(.subSec .projectList--items, .profileTapArea .projectItem) > .project__link ~ .project__infoList {
position: absolute;
left: 112px;
right: 0;
bottom: 8px;
min-height: 40px;
padding: 0;
border: 0;
flex-wrap: wrap;
row-gap: 0;
}
@supports (grid-template-rows: subgrid) {
:is(.subSec .projectList--items, .profileTapArea .projectItem) {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 16px;
align-content: start;
}
:is(.subSec .projectList--items, .profileTapArea .projectItem) > .project__link {
grid-column: 1 / -1;
grid-row: 1 / span 2;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
padding: 0;
}
:is(.subSec .projectList--items, .profileTapArea .projectItem) .project__img { grid-column: 1; grid-row: 1 / span 2; margin: 10px 0; }
:is(.subSec .projectList--items, .profileTapArea .projectItem) .project__txtWrap { grid-column: 2; grid-row: 1; padding: 10px 0 0; }
:is(.subSec .projectList--items, .profileTapArea .projectItem) > .project__link ~ .project__infoList {
position: relative;
grid-column: 2;
grid-row: 2;
left: auto;
right: auto;
bottom: auto;
align-self: end;
margin-bottom: 8px;
}
}
.profileTapArea .projectItem.draft a::after { top: 4px; left: 4px; }
.subPage .profileArea { grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; }
.profileArea .profile__photo { width: 64px; height: 64px; }
.profileArea .profile__txt--name { margin-top: 0; }
.profileArea .profile__amountList { gap: 4px 14px; }
.profileArea .profile__amountList li,
.profileArea .profile__amountList li:nth-child(n+4) { font-size: var(--mk-fs-sm); }
.profileTapArea .tapPart { padding-top: 16px; }
.pastList { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sr__keyword .mk-btn { padding: 0 14px; }
.sr__tools { flex: 1 1 100%; justify-content: space-between; }
.view__inner.search .src__select { flex: 1 1 auto; width: auto; min-width: 0; }
.view__inner.search .src__item {
background-position: 14px 14px;
background-size: 96px 72px;
grid-template-columns: 96px minmax(0, 1fr) 40px;
grid-template-areas: none;
column-gap: 12px;
padding: 14px;
}
.view__inner.search .src__item.type-F { grid-template-columns: minmax(0, 1fr); }
.view__inner.search .src__photo { grid-area: auto; grid-column: 1; grid-row: 1 / span 2; width: 96px; height: 72px; aspect-ratio: auto; padding-bottom: 0; }
.view__inner.search .src__txtWrap { grid-area: auto; grid-column: 2; grid-row: 1; flex-wrap: nowrap; width: auto; padding: 0; }
.view__inner.search .src__item.type-F .src__txtWrap { grid-column: 1; }
.view__inner.search .src__side { display: contents; }
.view__inner.search .src__date { grid-column: 2; grid-row: 2; align-self: end; line-height: 1.4; }
.view__inner.search .src__item.type-F .src__date { grid-column: 1; }
.view__inner.search .src__side .pBookBtn { grid-area: auto; grid-column: 3; grid-row: 1; align-self: start; margin: 0; }
.view__inner.search .src__itemTit { display: block; font-size: var(--mk-fs-lg); line-height: 1.4; margin-bottom: 4px; }
.view__inner.search .src__link { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.view__inner.search .src__item.type-P .src__link::after { right: calc(14px + 40px + 12px); }
.view__inner.search .src__itemTxt { font-size: var(--mk-fs-sm); line-height: 1.55; margin: 0 0 8px; }
}
@media screen and (max-width: 440px) {
:is(.projectArea .swiper-slide, .projectList--items, .projectItem, .sr__cnts) .project__infoList { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
.projectArea .swiper-slide, .projectList--items, .projectItem,
.view__inner.search .src__item, .pastList .past__link { transition: none; }
}
.contestList .contest__state { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.contestList .contest__chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--mk-r-pill); background: var(--mk-line-soft); color: var(--mk-body); font-size: var(--mk-fs-xs); font-weight: 600; line-height: 1; }
.contestList .contest__chip--done { background: var(--mk-accent-soft); color: var(--mk-accent-ink); }
.mk-hub__crumb { margin: 0 0 8px; font-size: var(--mk-fs-sm); line-height: calc(20 * var(--mk-px)); color: var(--mk-meta); }
.mk-hub__crumb a { color: var(--mk-meta); text-decoration: underline; text-underline-offset: 3px; }
.mk-hub__crumb a:hover { color: var(--mk-ink); }
.mk-hub__docs { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 32px; padding: 0; list-style: none; }
.mk-hub__h2 { margin: 0 0 12px; font-size: var(--mk-t-section); line-height: var(--mk-t-section-lh); font-weight: 600; color: var(--mk-ink); }
.mk-hub__h2 + .mk-result-count { margin-bottom: 20px; }
.projectList + .mk-hub__h2, .pagingWrap + .mk-hub__h2, .mk-empty + .mk-hub__h2 { margin-top: 48px; }
.mk-hub__meta { display: block; margin-top: 2px; font-size: var(--mk-fs-sm); line-height: calc(18 * var(--mk-px)); color: var(--mk-meta); font-variant-numeric: tabular-nums; }
.mk-hub__forum, .mk-archive { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--mk-line); }
.mk-hub__forumItem, .mk-archive__item { padding: 12px 0; border-bottom: 1px solid var(--mk-line); }
.mk-hub__forumItem > a, .mk-archive__item > a { font-size: var(--mk-fs-lg); line-height: calc(22 * var(--mk-px)); font-weight: 500; color: var(--mk-ink); overflow-wrap: anywhere; }
.mk-hub__forumItem > a:hover, .mk-archive__item > a:hover { color: var(--mk-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.mk-hub__more { margin: 16px 0 0; font-size: var(--mk-fs-md); }
.mk-hub__more a, .mk-archiveLink a { color: var(--mk-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.mk-archiveLink { margin: 24px 0 0; font-size: var(--mk-fs-md); line-height: calc(22 * var(--mk-px)); color: var(--mk-meta); text-align: center; }
.mk-hub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mk-hub__cardLink { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px; border: 1px solid var(--mk-line); border-radius: var(--mk-r-md); background: var(--mk-surface); color: var(--mk-body); }
.mk-hub__cardLink:hover { border-color: var(--mk-faint); box-shadow: var(--mk-shadow-2); }
.mk-hub__cardTit { font-size: var(--mk-t-section-sm); line-height: var(--mk-t-section-sm-lh); font-weight: 600; color: var(--mk-ink); }
.mk-hub__cardTxt { font-size: var(--mk-fs-md); line-height: calc(21 * var(--mk-px)); }
.mk-hub__cardLink .mk-hub__meta { margin-top: auto; }
.mk-archive + .pagingWrap .pagingList { flex-wrap: wrap; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .mk-hub__cardLink { transition: none; } }
/* /common/css/refresh/50-member.css */
.modal:is(.login, .join, .find) .modal__topTit {
margin: 0 0 12px; padding: 0 32px; font-family: var(--mk-font); font-size: calc(24 * var(--mk-px)); line-height: calc(32 * var(--mk-px)); font-weight: 600; letter-spacing: -0.02em; color: var(--mk-ink);
}
.modal:is(.login, .join, .find) .login__form { margin: 0 0 20px; }
.modal:is(.login, .join, .find) .login__item + .login__item { margin: 16px 0 0; }
.modal:is(.login, .join, .find) .login__tit { display: block; margin: 0 0 6px; font-size: calc(14 * var(--mk-px)); line-height: calc(20 * var(--mk-px)); font-weight: 600; color: var(--mk-ink); }
.modal:is(.login, .join, .find) .form__btm { margin: 4px 0 16px; }
.modal:is(.login, .join, .find) .btn__find { font-size: calc(13 * var(--mk-px)); font-weight: 500; }
.modal:is(.login, .join, .find) .login__form ul + .btnSubmit { margin: 24px 0 0; }
.modal:is(.login, .join, .find) .btnSubmit { height: 44px; font-size: calc(15 * var(--mk-px)); font-weight: 500; }
.modal.join .modal__topTit { margin-bottom: 24px; }
.modal:is(.login, .join, .find) .joinTxt__wrap { align-items: center; padding-top: 16px; border-top: 1px solid var(--mk-line-soft); }
.modal:is(.login, .join, .find) .joinTxt__wrap + .joinTxt__wrap { margin: 0; padding-top: 0; border-top: 0; }
.modal:is(.login, .join, .find) .joinTxt__wrap p { font-size: calc(14 * var(--mk-px)); color: var(--mk-meta); }
.modal:is(.login, .join, .find) .joinTxt__wrap button { margin: 0 0 0 6px; font-size: calc(14 * var(--mk-px)); }
.modal.join .cf-turnstile { margin: 16px 0 0 !important; }
.modal.join .labelChkWrap { margin: 20px 0 24px !important; }
.modal.join .labelChk { align-items: flex-start; gap: 10px; }
.modal.join .labelChk__box { margin-top: 1px; }
.modal.join .labelChk__txt { margin: 0; font-size: calc(14 * var(--mk-px)); line-height: calc(20 * var(--mk-px)); color: var(--mk-body); }
.modal.join .labelChk__txt a { color: var(--mk-accent-deep) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.modal.join .labelChkWrap .warningTxt { position: static; }
.subPage.member .tapPart { background: var(--mk-canvas); padding: 32px 0 80px; }
.subPage.member .profileTap {
max-width: 600px; min-height: 0; margin: 0 auto; justify-content: flex-start; gap: 0 24px;
background: transparent; border-bottom: 1px solid var(--mk-line);
}
.subPage.member .profileTap li, .subPage.member .profileTap li:last-child { margin: 0; padding: 0; }
.subPage.member .profileTap a.profile__txt { display: flex; align-items: center; height: 44px; }
.subPage.member .profileTap a.profile__txt:focus-visible { outline-offset: -2px; border-radius: 4px; }
.subPage.member .form__list { width: 100%; max-width: 600px; margin: 0 auto; padding: 32px; }
.subPage.member .form__item + .form__item { margin: 24px 0 0; }
.subPage.member .form__tit { display: block; margin: 0 0 8px; font-size: calc(14 * var(--mk-px)); line-height: calc(20 * var(--mk-px)); font-weight: 600; color: var(--mk-ink); }
.subPage.member .form__list textarea { min-height: 120px; }
.subPage.member .form__list input.readonly,
.subPage.member .form__list input.readonly:hover { background: var(--mk-line-soft); color: var(--mk-body); border-color: var(--mk-line); cursor: not-allowed; box-shadow: none; }
.subPage.member .form__list input + input { margin: 8px 0 0; }
.subPage.member .form__subTxt { gap: 16px; margin: 8px 0 0; }
.subPage.member .form__subTxt p { font-size: calc(13 * var(--mk-px)); line-height: calc(19 * var(--mk-px)); color: var(--mk-meta); }
.subPage.member .form__subTxt p:last-child:not(:first-child) { flex: none; font-variant-numeric: tabular-nums; }
.subPage.member .form__btmTxt { font-size: calc(13 * var(--mk-px)); line-height: calc(19 * var(--mk-px)); color: var(--mk-meta); margin-top: 8px !important; }
.subPage.member .form__btmTxt a { color: var(--mk-accent-deep); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.subPage.member #isPassChange { display: inline-flex; width: auto; padding: 0 14px; }
.subPage.member #passEnterArea { gap: 8px; padding: 0; }
.subPage.member #passEnterArea .form__tit { margin: 0; }
.subPage.member .form__list #passEnterArea input + input { margin: 0; }
.subPage.member #passEnterArea .warningTxt { position: static; width: 100%; }
.subPage.member .searchRes__wrap { margin-top: 4px; border: 1px solid var(--mk-line); border-radius: var(--mk-r-sm); box-shadow: var(--mk-shadow-2); }
.subPage.member .searchRes__list button { min-height: 40px; padding: 8px 12px; font-size: calc(14 * var(--mk-px)); color: var(--mk-body); }
.subPage.member .searchRes__list button:hover { background: var(--mk-line-soft); color: var(--mk-ink); }
.subPage.member .profile__topPhoto { padding: 0 0 24px; }
.subPage.member .label__photoInput .profile__photo { width: 112px; height: 112px; box-shadow: 0 0 0 1px var(--mk-line), 0 0 0 4px var(--mk-surface); }
.subPage.member .label__photoInput .profile__photo.uploaded::before { background-size: cover; }
.subPage.member .label__photoInput:focus-within .profile__photo { box-shadow: 0 0 0 2px var(--mk-accent-deep); }
.subPage.member .btns.myPicBtnDel > * { width: auto; margin: 12px auto 0; padding: 0 12px; font-size: calc(13 * var(--mk-px)); }
.subPage.member .btm__btnWrap { max-width: 600px; margin: 20px auto 0; justify-content: flex-end; gap: 8px; }
.subPage.member .tapPart:has(.tapPart__tit) { padding-top: 64px; }
.subPage.member .tapPart:has(.tapPart__tit) .limit { max-width: 488px; padding: 0 24px; }
.subPage.member .tapPart__tit { text-align: center; }
.subPage.member .tapPart:has(.tapPart__tit) .form__list { margin-top: 24px !important; padding: 28px; }
.subPage.member .tapPart:has(.tapPart__tit) .btm__btnWrap { margin-top: 16px; }
.subPage.member .tapPart:has(.tapPart__tit) .btm__btnWrap .btnSubmit { flex: 1; height: 44px; font-size: calc(15 * var(--mk-px)); }
.subPage.member .tapPart__cnts { margin-top: 24px; padding: 28px; font-size: calc(15 * var(--mk-px)); line-height: calc(24 * var(--mk-px)); color: var(--mk-body); }
.subPage.member .tapPart__cnts .btm__btnWrap { margin-top: 20px; }
.modal.cropLayer .cropLy-header { margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px solid var(--mk-line); }
.modal.cropLayer .cropLy-title { font-size: calc(18 * var(--mk-px)); font-weight: 600; color: var(--mk-ink); letter-spacing: -0.3px; }
.modal.cropLayer .cropLy-title + button { width: 40px; height: 40px; border-radius: var(--mk-r-sm); color: var(--mk-body); }
.modal.cropLayer .cropLy-title + button:hover { background: var(--mk-line-soft); }
.modal.cropLayer .cropLy-footer { gap: 8px; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--mk-line); }
.modal.cropLayer .cropLy-footer button { padding: 0 18px; }
@media (max-width: 600px) {
.subPage.member .profileTap { margin: 0 16px; }
.modal:is(.login, .join, .find) .modal__topTit { font-size: calc(20 * var(--mk-px)); line-height: calc(28 * var(--mk-px)); padding: 0 36px; }
.subPage.member .tapPart { padding: 24px 0 56px; }
.subPage.member .form__list { width: calc(100% - 32px); padding: 20px; }
.subPage.member .btm__btnWrap { width: calc(100% - 32px); }
.subPage.member .btm__btnWrap .btnCancel,
.subPage.member .btm__btnWrap .btnSubmit { flex: 1; }
.subPage.member .tapPart:has(.tapPart__tit) { padding-top: 40px; }
.subPage.member .tapPart:has(.tapPart__tit) .limit { padding: 0 16px; }
.subPage.member .tapPart:has(.tapPart__tit) .form__list,
.subPage.member .tapPart:has(.tapPart__tit) .btm__btnWrap { width: 100%; }
.subPage.member .tapPart__cnts { padding: 20px; }
}
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formSec { padding: 32px 0 0; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formTit { max-width: 760px; margin: 0 auto 16px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap { max-width: 760px; padding: 32px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__line + .cf__line { margin: 28px 0 0; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__name {
margin: 0 0 8px; font-family: var(--mk-font); font-size: calc(14 * var(--mk-px)); line-height: calc(20 * var(--mk-px)); font-weight: 600; color: var(--mk-ink); letter-spacing: -0.1px;
}
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__name.bold { font-size: calc(15 * var(--mk-px)); font-weight: 600; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__name > span { font-size: calc(13 * var(--mk-px)); font-weight: 400; color: var(--mk-meta); letter-spacing: 0; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap select { width: 100%; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap textarea { min-height: 88px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .txtCountWrap { margin: 6px 0 0; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .txtCount { font-size: calc(13 * var(--mk-px)); font-weight: 500; color: var(--mk-meta); font-variant-numeric: tabular-nums; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__etc { margin: 8px 0 0; font-size: calc(13 * var(--mk-px)); line-height: 1.55; letter-spacing: 0; color: var(--mk-meta); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .underPoint { color: var(--mk-accent-deep); cursor: pointer; text-underline-offset: 2px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__lineInner { margin: 0 0 12px; min-width: 0; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__lineInner + .cf__lineInner { margin: 0 0 12px 12px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__lineInner.fSmall { width: 64px; margin: 0 0 12px 8px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .componentsWrap .cf__lineInner .cf__name { font-weight: 500; font-size: calc(13 * var(--mk-px)); color: var(--mk-body); margin-bottom: 6px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__line:not(.componentsWrap) .cf__lineInner,
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__line:not(.componentsWrap) .cf__lineInner + .cf__lineInner { margin-bottom: 0; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__line:not(.componentsWrap) .cf__btnAdd { margin-bottom: 0; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__line:not(.componentsWrap) .cf__lineWrap + .cf__lineWrap { margin-top: 8px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__line.componentsWrap + .cf__line.componentsWrap { padding-top: 24px; border-top: 1px solid var(--mk-line-soft); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__lineWrap.document + .cf__lineWrap.document { margin-top: 4px; padding-top: 16px; border-top: 1px dashed var(--mk-line); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap .select2-container { max-width: none; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__btnAdd { flex: none; width: 40px; margin: 0 0 12px 8px; padding: 0; font-size: calc(18 * var(--mk-px)); font-weight: 400; line-height: 1; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__btnAdd.subtract { background: var(--mk-surface); color: var(--mk-ink); border-color: var(--mk-line-strong); }
body .select2-container.select2-container--default .select2-selection--single { padding: 0; border-radius: var(--mk-r-sm) !important; }
body .select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
height: 38px; line-height: calc(38 * var(--mk-px)); padding: 0 32px 0 12px; border-radius: var(--mk-r-sm); font-size: calc(14 * var(--mk-px)); color: var(--mk-ink);
background-position: right 12px center;
}
body .select2-container.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--mk-mute); }
body .select2-container.select2-container--open .select2-dropdown {
border: 1px solid var(--mk-line); border-radius: var(--mk-r-sm); box-shadow: var(--mk-shadow-2); overflow: hidden;
}
body .select2-container.select2-container--open .select2-dropdown--below { margin-top: 4px; }
body .select2-container--default .select2-search--dropdown .select2-search__field {
height: 36px; padding: 0 10px; border: 1px solid var(--mk-line-strong); border-radius: var(--mk-r-sm); font-size: calc(14 * var(--mk-px));
}
body .select2-container--default .select2-search--dropdown .select2-search__field:focus { outline: none; border-color: var(--mk-accent-deep); }
body .select2-container--default .select2-results > .select2-results__options { font-size: calc(14 * var(--mk-px)) !important; }
body .select2-container--default .select2-results__option { font-size: calc(14 * var(--mk-px)) !important; color: var(--mk-body); }
body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--mk-line-soft); color: var(--mk-ink); }
body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable .part-name_txt,
body .select2-container--default .select2-results__option--highlighted .part-name_txt,
body .select2-container--default .select2-results__option--highlighted .part-link { color: var(--mk-ink); }
body .select2-container--default .select2-results__option--selected { background-color: var(--mk-accent-soft); color: var(--mk-accent-ink); }
body .cf_list-noItem { background-color: var(--mk-accent-soft) !important; color: var(--mk-ink); }
body .cf_list-noItem a { color: var(--mk-accent-deep); font-weight: 600; text-decoration: underline; cursor: pointer; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__photoWrap { align-items: center; gap: 20px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__line .profile__photo {
width: 200px; height: 150px; margin: 0; border: 1px dashed var(--mk-line-strong); border-radius: var(--mk-r-md);
background-color: var(--mk-canvas); transition: border-color var(--mk-dur-fast) var(--mk-ease);
}
:is(.forumWrite, .subPage.contest:not(.ver2)) .label__photoInput:hover .profile__photo { border-color: var(--mk-accent-deep); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__photoTxt,
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__coverImage p.cf__photoTxt { padding: 0; margin: 0; font-size: calc(13 * var(--mk-px)); line-height: 1.6; color: var(--mk-meta); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .covRemoveBtn { display: inline-flex; margin-top: 8px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .labelRdi { gap: 8px; min-height: 40px; margin: 0 20px 0 0; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .labelRdi__box { width: 18px; height: 18px; border: 1px solid var(--mk-faint); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .labelRdi__box::after { width: 8px; height: 8px; background: var(--mk-accent-deep); }
:is(.forumWrite, .subPage.contest:not(.ver2)) input:checked + .labelRdi__box { border-color: var(--mk-accent-deep); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .labelRdi__txt { margin: 0; font-size: calc(14 * var(--mk-px)); color: var(--mk-ink); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .label__file { padding: 0; overflow: hidden; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .labelFile__tit {
flex: none; width: auto; padding: 0 14px; background: var(--mk-line-soft); color: var(--mk-ink);
border-right: 1px solid var(--mk-line); font-size: calc(13 * var(--mk-px)); font-weight: 600;
}
:is(.forumWrite, .subPage.contest:not(.ver2)) .labelFile__txt { width: auto; flex: 1; min-width: 0; font-size: calc(13 * var(--mk-px)); color: var(--mk-meta); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .attFiles { margin: 0 0 12px; padding: 0; font-size: calc(13 * var(--mk-px)); color: var(--mk-body); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .attFiles > a { color: var(--mk-ink); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .fileRemove { width: 22px; height: 22px; background-color: var(--mk-line-soft); color: var(--mk-ink) !important; border-radius: 4px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_selectTagAreaWrap { position: relative; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_selectTagArea { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_selectTagArea:empty { margin: 0; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_selectTagArea :is(a, button) {
margin: 0; height: 28px; line-height: calc(26 * var(--mk-px)); padding: 0 26px 0 10px; border: 1px solid transparent; border-radius: var(--mk-r-sm);
background-color: var(--mk-line-soft); color: var(--mk-ink); font-family: var(--mk-font); font-size: calc(13 * var(--mk-px)); font-weight: 500;
}
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_selectTagArea button { position: relative; display: inline-block; white-space: nowrap; cursor: pointer; text-align: left; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_selectTagArea button::after { content: "\2715"; position: absolute; top: 0; line-height: inherit; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_selectTagArea :is(a, button)::after { right: 9px; font-size: calc(9 * var(--mk-px)); color: var(--mk-meta); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_selectTagArea :is(a, button).isReg { background-color: var(--mk-accent-soft); color: var(--mk-accent-ink); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_selectTagArea :is(a, button).isReg::after { color: var(--mk-accent-deep); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_selectTagArea :is(a, button).recommended { background-color: var(--mk-surface); border: 1px dashed var(--mk-line-strong); color: var(--mk-body); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .BtndeleteAll {
top: -30px; width: auto; max-width: none; gap: 6px; padding: 0; border: 0; background: none; font-family: var(--mk-font); font-size: calc(13 * var(--mk-px)); color: var(--mk-meta); cursor: pointer;
}
:is(.forumWrite, .subPage.contest:not(.ver2)) .BtndeleteAll::after { width: 18px; height: 18px; line-height: 18px; background-color: var(--mk-line-soft); color: var(--mk-body); border-radius: 4px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .BtndeleteAll:hover { color: var(--mk-ink); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_selectTag { height: 40px; background-image: none; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_selectTag::before { right: 12px; opacity: .6; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_selectTag input { padding-right: 36px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_TagInner {
top: calc(100% + 4px); border: 1px solid var(--mk-line); border-radius: var(--mk-r-sm); box-shadow: var(--mk-shadow-2);
}
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_list-item { padding: 10px 12px; font-size: calc(14 * var(--mk-px)); color: var(--mk-body); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_list-item:hover,
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_list-item:focus { background-color: var(--mk-line-soft); color: var(--mk-ink); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_list-item.active { color: var(--mk-accent-deep); font-weight: 500; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_list-item.active:hover,
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_list-item.active:focus {
background: var(--mk-line-soft) url('/images/sub/contest/icon_check_black.svg') no-repeat right 1rem center / 1.4rem 1rem; color: var(--mk-accent-deep);
}
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_list-item.tagAddNew { display: block; border-bottom: 1px solid var(--mk-line-soft); color: var(--mk-accent-deep); cursor: pointer; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_list-item.tagAddNew b { font-weight: 600; color: var(--mk-ink); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_list-item.tagAddNew.disabled { color: var(--mk-meta); cursor: default; background: none; }
.subPage.contest:not(.ver2) .modal.itemAdd .modal__opt { font-weight: 400; color: var(--mk-meta); }
body .select2-results__option .proitem.isFree .part-name_txt { color: var(--mk-body); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap .ck.ck-editor__top .ck-toolbar {
border-color: var(--mk-line-strong); border-radius: var(--mk-r-sm) var(--mk-r-sm) 0 0; background: var(--mk-canvas);
}
.forumWrite .ck.ck-toolbar { --ck-ui-component-min-height: 48px; gap: 8px; }
.forumWrite .ck.ck-toolbar .ck.ck-button { min-width: 48px; min-height: 48px; }
.forumWrite .ck.ck-toolbar > .ck-toolbar__items { gap: 8px; }
.forumWrite .ck.ck-toolbar > .ck-toolbar__items > * { margin: 0; }
.forumWrite .ck.ck-toolbar .ck.ck-splitbutton { gap: 8px; }
.forumWrite .ck.ck-toolbar .ck.ck-splitbutton > .ck.ck-button { border-radius: var(--mk-r-btn); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap .ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) { border-color: var(--mk-line-strong); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap .ck.ck-editor__main > .ck-editor__editable { border-radius: 0 0 var(--mk-r-sm) var(--mk-r-sm); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap { max-width: 760px; height: auto; margin: 16px auto 0; gap: 8px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap > * { display: inline-flex; width: auto; min-width: 96px; margin: 0; padding: 0 18px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap > * + * { margin: 0; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap > .btnPrev:where(:not(.mk-btn)) { border-color: transparent; background: transparent; color: var(--mk-meta); padding: 0 12px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap > .btnPrev::before { content: "\2190"; margin-right: 6px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap > .btnPrev:where(:not(.mk-btn)):hover { color: var(--mk-ink); border-color: transparent; background: var(--mk-line-soft); }
.subPage.contest:not(.ver2) .modal.itemAdd .modal__Name { font-family: var(--mk-font); font-size: calc(14 * var(--mk-px)); font-weight: 600; color: var(--mk-ink); margin-bottom: 6px; }
.subPage.contest:not(.ver2) .modal.itemAdd .modalForm_input { width: 100%; }
.subPage.contest:not(.ver2) .modal.itemAdd .btnWrap { gap: 8px; height: auto; }
.subPage.contest:not(.ver2) .modal.itemAdd .btnWrap > * { min-height: 44px; margin: 0; }
@media (max-width: 1024px) {
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__lineInner { margin: 0 0 12px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__lineInner + .cf__lineInner { margin: 0 0 12px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__lineWrap { margin: 0 0 16px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__lineInner.fSmall { flex: 1; width: auto; margin: 0 0 12px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__line:not(.componentsWrap) .cf__lineInner + .cf__lineInner { margin-top: 12px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__line:not(.componentsWrap) .cf__lineWrap { margin: 0; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .componentsWrap .cf__lineWrap { margin: 0; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__lineInner:has(+ .cf__btnAdd),
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__lineInner:has(+ .cf__lineInner.fSmall) { flex: 1 1 120px; width: auto; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .components__innerBox .cf__lineInner.fSmall.fManual { flex: 0 0 64px; width: 64px; margin: 0 0 12px 8px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) :is(.components__innerBox, .cf__lineWrap) > .cf__lineInner:first-child:not(:has(+ .cf__btnAdd)) { flex: 0 0 100%; }
}
@media (max-width: 600px) {
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formSec { padding: 20px 0 0; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formTit { width: calc(100% - 32px); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap { width: calc(100% - 32px); padding: 20px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap:not(.mk-formbar) { width: calc(100% - 32px); flex-wrap: wrap; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap:not(.mk-formbar) > * { flex: 1; padding: 0 12px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap:not(.mk-formbar) > .btnPrev { position: relative; flex: 0 0 100%; justify-content: flex-start; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__photoWrap { flex-wrap: wrap; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_selectTagArea { width: 100%; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .BtndeleteAll { position: static; width: fit-content; margin: 0 0 8px auto; }
}
.subPage.contest:not(.ver2) .profileTap.ver2 {
counter-reset: mkstep; flex-wrap: nowrap; align-items: center; gap: 0; min-height: 0; margin: 0;
padding: 32px 16px 0; background: transparent;
}
.subPage.contest:not(.ver2) .profileTap.ver2 li {
counter-increment: mkstep; position: relative; margin: 0; padding: 0; cursor: default;
}
.subPage.contest:not(.ver2) .profileTap.ver2 li:last-child { margin: 0; padding: 0; }
.subPage.contest:not(.ver2) .profileTap.ver2 li::after {
position: static; width: 40px; height: 1px; margin: 0 12px; opacity: 1; visibility: visible; background: var(--mk-line-strong);
}
.subPage.contest:not(.ver2) .profileTap.ver2 li:last-child::after { display: none; }
.subPage.contest:not(.ver2) .profileTap.ver2 a.profile__txt {
gap: 8px; height: 40px; font-size: calc(14 * var(--mk-px)); font-weight: 600; letter-spacing: 0; color: var(--mk-meta);
transition: color var(--mk-dur-fast) var(--mk-ease);
}
.subPage.contest:not(.ver2) .profileTap.ver2 a.profile__txt::before {
content: counter(mkstep); display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--mk-line-strong); background: var(--mk-surface);
font-family: var(--mk-mono); font-size: calc(12 * var(--mk-px)); font-weight: 500; letter-spacing: 0; color: var(--mk-meta);
transition: background-color var(--mk-dur-fast) var(--mk-ease), border-color var(--mk-dur-fast) var(--mk-ease);
}
.subPage.contest:not(.ver2) .profileTap.ver2 a.profile__txt:hover { color: var(--mk-ink); }
.subPage.contest:not(.ver2) .profileTap.ver2 li:has(~ li.active) a.profile__txt { color: var(--mk-body); }
.subPage.contest:not(.ver2) .profileTap.ver2 li:has(~ li.active) a.profile__txt::before { border-color: var(--mk-ink); color: var(--mk-ink); }
.subPage.contest:not(.ver2) .profileTap.ver2 li:has(~ li.active)::after { background: var(--mk-ink); }
.subPage.contest:not(.ver2) .profileTap.ver2 li.active a.profile__txt { color: var(--mk-ink); }
.subPage.contest:not(.ver2) .profileTap.ver2 li.active a.profile__txt::before { background: var(--mk-ink); border-color: var(--mk-ink); color: var(--mk-on-dark); box-shadow: 0 0 0 3px var(--mk-accent-soft); }
.subPage.contest:not(.ver2) .profileTap.ver2 a.profile__txt:focus-visible { border-radius: 4px; }
.subPage.contest:not(.ver2) .profileTap.ver2 .iconWarning {
display: flex; align-items: center; justify-content: center; left: 16px; top: -2px; width: 18px; height: 18px; border-radius: 50%; font-size: calc(12 * var(--mk-px)); font-weight: 700; line-height: 1; color: var(--mk-on-ink); background: var(--mk-danger); box-shadow: 0 0 0 2px var(--mk-canvas);
}
@media (max-width: 1024px) {
.subPage.contest:not(.ver2) .profileTap.ver2 { margin: 0; gap: 0; }
}
@media (max-width: 600px) {
.subPage.contest:not(.ver2) .profileTap.ver2 { padding: 20px 16px 0; }
.subPage.contest:not(.ver2) .profileTap.ver2 li::after { width: 16px; margin: 0 6px; }
.subPage.contest:not(.ver2) .profileTap.ver2 li:not(.active) a.profile__txt { font-size: 0; gap: 0; width: 40px; justify-content: center; }
.subPage.contest:not(.ver2) .profileTap.ver2 li:not(.active) .iconWarning { left: 26px; top: -1px; }
}
.notification-wrap { max-width: calc(var(--mk-wrap) + 48px); margin: 0 auto; padding: 0 24px; font-size: calc(14 * var(--mk-px)); }
.notification-wrap .notification-list { overflow: hidden; }
.notification-wrap .notification-list ul li {
padding: 14px 72px 14px 20px; border-top: 1px solid var(--mk-line); color: var(--mk-body);
transition: background-color var(--mk-dur-fast) var(--mk-ease);
}
.notification-wrap .notification-list ul li:first-child { border-top: 0; }
.notification-wrap .notification-list ul li:last-child { border-bottom: 0; }
.notification-wrap .notification-list ul li:hover { background: var(--mk-canvas); }
.notification-wrap .notification-list ul li.new { box-shadow: inset 3px 0 0 var(--mk-accent); }
.notification-wrap .notification-list ul li.new::after { content: "New"; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); }
.notification-wrap .notification-list ul li .message { font-size: calc(14 * var(--mk-px)); line-height: calc(21 * var(--mk-px)); color: var(--mk-body); }
.notification-wrap .notification-list ul li .message a { font-weight: 600; color: var(--mk-ink); }
.notification-wrap .notification-list ul li .date { margin-top: 2px; font-size: var(--mk-fs-sm); line-height: calc(18 * var(--mk-px)); }
.notification-wrap .pagingWrap { margin-top: 24px; }
.forum-history-list { max-width: calc(var(--mk-wrap) + 48px); margin: 0 auto; padding: 0 24px; }
.forum-history-list .history-item {
margin: 0; padding: 14px 20px; gap: 16px; align-items: center; text-align: left;
background: var(--mk-surface); border: 1px solid var(--mk-line); border-top-width: 0;
transition: background-color var(--mk-dur-fast) var(--mk-ease);
}
.forum-history-list .history-item:first-child { border-top-width: 1px; border-radius: var(--mk-r-md) var(--mk-r-md) 0 0; }
.forum-history-list .history-item:last-child,
.forum-history-list .history-item:has(+ .pagingWrap) { border-radius: 0 0 var(--mk-r-md) var(--mk-r-md); }
.forum-history-list .history-item:first-child:last-child,
.forum-history-list .history-item:first-child:has(+ .pagingWrap) { border-radius: var(--mk-r-md); }
.forum-history-list .history-item:hover { background: var(--mk-canvas); }
.forum-history-list .history-item { cursor: pointer; }
.forum-history-list .history-item .col.text { min-width: 0; }
.forum-history-list .history-item .category { margin: 0 0 6px; }
.forum-history-list .history-item .category:empty { display: none; }
.forum-history-list .history-item .subject { font-size: calc(15 * var(--mk-px)); line-height: calc(21 * var(--mk-px)); font-weight: 600; color: var(--mk-ink); letter-spacing: -0.2px; overflow-wrap: anywhere; }
.forum-history-list .history-item .subject a { color: inherit; text-decoration: inherit; }
.forum-history-list .history-item .activity { margin-top: 4px; }
.forum-history-list .history-item .activity .date { font-size: calc(13 * var(--mk-px)); }
.forum-history-list .history-item .activity .msg { font-size: calc(13 * var(--mk-px)); font-weight: 600; color: var(--mk-body); }
.forum-history-list .history-item .col.date { flex: none; align-self: center; font-size: var(--mk-fs-sm); }
.forum-history-list .pagingWrap { margin-top: 24px; }
@media (max-width: 600px) {
.notification-wrap, .forum-history-list { padding: 0 16px; }
.forum-history-list .history-item { padding: 14px 16px; }
.forum-history-list .history-item .col.date { display: none; }
.notification-wrap .notification-list ul li { padding: 12px 64px 12px 16px; }
.notification-wrap .notification-list ul li.new::after { right: 16px; }
}
@media (max-width: 839px) {
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap.mk-formbar {
--mk-formbar-bleed: 0px;
width: auto;
max-width: none;
height: auto;
margin: 24px 0 0;
flex-wrap: nowrap;
}
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap.mk-formbar > * { flex: 1 1 0; width: auto; min-width: 0; padding: 0 12px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap.mk-formbar > .btnPrev { flex: 0 0 auto; position: static; justify-content: center; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formSec { padding-bottom: 0; }
}
@media (min-width: 840px) {
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap.mk-formbar { justify-content: flex-end; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap.mk-formbar > .btnPrev { margin-right: auto; }
}
:is(.forumWrite, .subPage.contest:not(.ver2)) .btnRightWrap.mk-formbar > .btnPrev::before { content: "\2190"; margin-right: 6px; }
.subPage.contest:not(.ver2) .profileTap.ver2 { position: relative; counter-reset: mkstep mkcur; padding-bottom: 16px; --mk-step-p: 25%; }
.subPage.contest:not(.ver2) .profileTap.ver2 li { counter-increment: mkstep mkcur; }
.subPage.contest:not(.ver2) .profileTap.ver2 li.active ~ li { counter-increment: mkstep; }
.subPage.contest:not(.ver2) .profileTap.ver2:has(> li:nth-child(2).active) { --mk-step-p: 50%; }
.subPage.contest:not(.ver2) .profileTap.ver2:has(> li:nth-child(3).active) { --mk-step-p: 75%; }
.subPage.contest:not(.ver2) .profileTap.ver2:has(> li:nth-child(4).active) { --mk-step-p: 100%; }
.subPage.contest:not(.ver2) .profileTap.ver2::before,
.subPage.contest:not(.ver2) .profileTap.ver2::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: min(760px, calc(100% - 2 * var(--mk-gutter)));
height: 4px;
border-radius: 2px;
transform: translateX(-50%);
}
.subPage.contest:not(.ver2) .profileTap.ver2::before { background: var(--mk-line); }
.subPage.contest:not(.ver2) .profileTap.ver2::after {
left: calc(50% - min(760px, calc(100% - 2 * var(--mk-gutter))) / 2);
width: calc(min(760px, calc(100% - 2 * var(--mk-gutter))) * var(--mk-step-p) / 100%);
background: var(--mk-control-on);
transform: none;
transition: width var(--mk-dur-base) var(--mk-ease);
}
.subPage.contest:not(.ver2) .contest__formSec > .contest__formTit::before {
content: "Step " counter(mkcur) " of " counter(mkstep);
display: block;
margin: 0 0 4px;
color: var(--mk-meta);
font-family: var(--mk-mono);
font-size: var(--mk-fs-xs);
line-height: calc(16 * var(--mk-px));
font-weight: 500;
letter-spacing: .04em;
text-transform: uppercase;
}
.subPage.contest:not(.ver2) > .contest__formSec:first-child > .contest__formTit::before { content: none; }
.subPage.contest:not(.ver2) > .contest__formSec > .mk-notice { max-width: 760px; margin: 0 auto; }
.subPage.contest:not(.ver2) .contest__formSec > .mk-notice { max-width: 760px; margin: 16px auto 0; }
.cf__req { margin-left: 6px; color: var(--mk-meta); font-size: var(--mk-fs-sm); font-weight: 400; letter-spacing: 0; }
.cf__fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.cf__fieldset > legend.cf__name { padding: 0; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap h2.cf__name { margin-top: 0; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__photoTxt > p { margin: 0; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__photoTxt .covRemoveBtn { margin-top: 12px; }
.subPage.contest:not(.ver2) .cf__coverImage > p.warningTxt,
.subPage.contest:not(.ver2) .cf__coverImage > p.mk-field-error {
position: static;
margin: 8px 0 0;
padding: 0;
color: var(--mk-danger-ink);
font-size: var(--mk-fs-sm);
line-height: calc(18 * var(--mk-px));
text-align: left;
}
:is(.forumWrite, .subPage.contest:not(.ver2)) .label__photoInput:has(input[aria-invalid="true"]) .profile__photo { border-color: var(--mk-danger); }
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formSec > .mk-form-error,
:is(.forumWrite, .subPage.contest:not(.ver2)) form > .mk-form-error { max-width: 760px; margin: 16px auto 0; box-sizing: border-box; }
.subPage.contest:not(.ver2) .cf_selectTagAreaWrap + .tagSelecter + .mk-field-error,
.subPage.contest:not(.ver2) .tagSelecter + .mk-field-error { margin-top: 6px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__limitNote { flex: 0 0 100%; margin: 8px 0 0; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__btnAdd:disabled { opacity: .45; cursor: not-allowed; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap .mk-undo-row { flex: 0 0 100%; margin: 0 0 12px; padding: 4px 0; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_selectTagArea { gap: 8px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_selectTagArea button.tagRemoveBtn { margin: 0; }
.modal.cropLayer .cropLy-zoom { display: flex; justify-content: center; gap: 8px; margin: 12px 0 0; }
.modal.cropLayer .cropLy-zoomBtn { width: 40px; height: 40px; border: 1px solid var(--mk-line); border-radius: var(--mk-r-btn); background: var(--mk-surface); color: var(--mk-ink); font-size: calc(20 * var(--mk-px)); line-height: 1; }
.modal.cropLayer .img-container:focus-visible { outline: 2px solid var(--mk-focus); outline-offset: 2px; }
.modal.cropLayer .mk-progress { margin: 16px 0 0; }
.modal.cropLayer .cropLy-title + button { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; font-size: calc(24 * var(--mk-px)); line-height: 1; cursor: pointer; }
.modal.cropLayer .cropLy-header { display: flex; align-items: center; justify-content: space-between; }
.modal.cropLayer .cropLy-title { margin: 0; }
.subPage.member .accMailRow { flex: 1 1 100%; width: 100%; box-sizing: border-box; min-height: 56px; padding: 8px 0; border-bottom: 0; }
.subPage.member .accMailRow .accMailRow__title { margin: 0; color: var(--mk-ink); font-size: var(--mk-fs-lg); line-height: calc(22 * var(--mk-px)); font-weight: 500; }
.subPage.member .form__item > h2.form__tit { font-size: calc(14 * var(--mk-px)); line-height: calc(20 * var(--mk-px)); }
.subPage.member .mk-field-hint { margin: 6px 0 0; }
.subPage.member .form__btmTxt { margin-top: 8px !important; }
.subPage.member .mk-accDelete { width: calc(100% - 32px); max-width: 600px; margin: 48px auto 0; padding: 32px 0 0; border-top: 1px solid var(--mk-line); }
.subPage.member .mk-accDelete .mk-accDelete__tit { margin: 0 0 8px; font-size: calc(18 * var(--mk-px)); line-height: calc(26 * var(--mk-px)); }
.subPage.member .mk-accDelete__open { margin: 16px 0 0; }
.subPage.member #deleteFrm { margin-top: 16px; }
.subPage.member .tapPart__cnts.mk-accDone { text-align: center; }
.subPage.member .tapPart__cnts.mk-accDone p + p { margin-top: 16px; }
.subPage.member .myPicBtnDel > .mk-btn { margin: 12px auto 0; }
@media (max-width: 599px) {
.subPage.member .btm__btnWrap > .mk-btn { flex: 1; }
}
:is(.forumWrite, .subPage.contest:not(.ver2)) :is(label, legend, span).cf__name { display: block; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf__photoTxt > p { color: var(--mk-meta); font-size: var(--mk-fs-sm); line-height: 1.6; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .label__file { align-items: stretch; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .labelFile__tit { display: flex; align-items: center; align-self: stretch; height: auto; }
.subPage.member #isPassChange.mk-btn {
display: inline-flex;
width: auto;
height: auto;
min-height: var(--mk-tap);
padding: 0 16px;
border-radius: var(--mk-r-btn);
background: var(--mk-btn-secondary-bg);
color: var(--mk-ink);
font-size: var(--mk-fs-md);
font-weight: 500;
}
@media (hover: hover) { .subPage.member #isPassChange.mk-btn:hover { background: var(--mk-line); } }
.subPage.member #isPassChange.mk-btn:active { background: var(--mk-line-strong); }
.subPage.member .btm__btnWrap > .mk-btn { width: auto; height: auto; min-height: var(--mk-tap); padding: 0 16px; font-size: var(--mk-fs-md); }
.subPage.member .tapPart:has(.tapPart__tit) .btm__btnWrap > .mk-btn { flex: 1; min-height: 44px; }
.subPage.member .accMailRow .mk-list-item__main { flex: 1 1 auto; min-width: 0; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_selectTagAreaWrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_selectTagAreaWrap .cf_selectTagArea { flex: 1 1 auto; margin: 0; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_selectTagAreaWrap .BtndeleteAll { position: static; display: inline-flex; align-items: center; min-height: 40px; margin: 0 0 0 auto; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .cf_selectTagArea:empty + .BtndeleteAll { display: none; }
.subPage.member .form__list input.readonly:focus-visible { outline: 2px solid var(--mk-focus); outline-offset: 2px; }
:is(.forumWrite, .subPage.contest:not(.ver2)) .contest__formWrap .mk-row-removed[hidden] { display: none; }
/* /common/css/refresh/15-components.css */
.mk-sr,
.mk-spinner__text {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.mk-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: var(--mk-tap);
margin: 0;
padding: 0 16px;
box-sizing: border-box;
border: 1px solid transparent;
border-radius: var(--mk-r-btn);
background: transparent;
color: var(--mk-ink);
font-family: var(--mk-font);
font-size: var(--mk-fs-md);
line-height: calc(20 * var(--mk-px));
font-weight: 500;
letter-spacing: 0;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--mk-dur-fast) var(--mk-ease), border-color var(--mk-dur-fast) var(--mk-ease), color var(--mk-dur-fast) var(--mk-ease);
}
.mk-btn.mk-btn--primary { --mk-busy-ring: var(--mk-on-ink); background: var(--mk-ink); border-color: var(--mk-ink); color: var(--mk-on-ink); }
.mk-btn.mk-btn--secondary { color: var(--mk-ink); }
.mk-btn.mk-btn--secondary,
.mk-btn.mk-btn--danger:not(.mk-btn--flat) { background: var(--mk-btn-secondary-bg); border-color: transparent; }
.mk-btn.mk-btn--flat { background: transparent; border-color: transparent; font-weight: 600; }
.mk-btn.mk-btn--danger { color: var(--mk-danger-ink); font-weight: 600; }
.mk-btn.mk-btn--icon { width: var(--mk-tap); min-width: var(--mk-tap); padding: 0; background: transparent; }
.mk-btn.mk-btn--block { display: flex; width: 100%; }
@media (hover: hover) {
.mk-btn.mk-btn--primary:hover { background: var(--mk-ink-hover); border-color: var(--mk-ink-hover); }
.mk-btn.mk-btn--secondary:hover,
.mk-btn.mk-btn--danger:not(.mk-btn--flat):hover { background: var(--mk-line); }
.mk-btn.mk-btn--flat:hover,
.mk-btn.mk-btn--icon:hover { background: var(--mk-line-soft); }
}
.mk-btn:active { transition-duration: var(--mk-dur-press); }
.mk-btn.mk-btn--primary:active { background: var(--mk-ink-press); border-color: var(--mk-ink-press); }
.mk-btn.mk-btn--secondary:active,
.mk-btn.mk-btn--danger:not(.mk-btn--flat):active { background: var(--mk-line-strong); }
.mk-btn.mk-btn--flat:active,
.mk-btn.mk-btn--icon:active { background: var(--mk-line); }
.mk-btn:focus-visible { outline: 2px solid var(--mk-focus); outline-offset: 2px; }
.mk-btn:disabled,
.mk-btn[aria-disabled="true"]:not(.mk-busy-wait) { opacity: .45; cursor: not-allowed; }
.mk-btn--icon[data-mk-dismiss]:empty::before,
.mk-btn--icon.mk-btn--close:empty::before {
content: "";
width: 16px;
height: 16px;
background: var(--mk-icon);
-webkit-mask: var(--mk-ic-close) no-repeat center / 16px 16px;
mask: var(--mk-ic-close) no-repeat center / 16px 16px;
}
.mk-busy-wait { pointer-events: none; cursor: progress; }
.mk-busy { color: transparent !important; }
.mk-busy > * { visibility: hidden; }
.mk-busy--rel { position: relative; }
.mk-busy::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
box-sizing: border-box;
border: 2px solid var(--mk-line-strong);
border-top-color: var(--mk-busy-ring, var(--mk-ink));
border-radius: 50%;
visibility: visible;
animation: mk-spin .8s linear infinite;
}
.mk-busy-region { min-height: 96px; }
.mk-busy-region > :not(.mk-busy-region__spin) { pointer-events: none; }
.mk-busy-region > .mk-busy-region__spin {
position: sticky;
top: calc(var(--mk-header-offset) + 16px);
z-index: 1;
display: block;
grid-column: 1 / -1;
margin: 0 auto -24px;
}
.mk-spinner {
display: inline-block;
flex: none;
width: 20px;
height: 20px;
box-sizing: border-box;
border: 2px solid var(--mk-line-strong);
border-top-color: currentColor;
border-radius: 50%;
color: var(--mk-ink);
vertical-align: middle;
animation: mk-spin .8s linear infinite;
}
.mk-spinner--16 { width: 16px; height: 16px; }
.mk-spinner--24 { width: 24px; height: 24px; }
.mk-progress {
position: relative;
display: block;
height: 4px;
overflow: hidden;
border-radius: 2px;
background: var(--mk-line);
}
.mk-progress[hidden] { display: none; }
.mk-progress__fill {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: var(--mk-control-on);
transition: width var(--mk-dur-fast) var(--mk-ease);
}
.mk-progress.mk-progress--page {
position: fixed;
left: 0;
right: 0;
top: var(--mk-header-offset);
z-index: var(--mk-z-header);
height: 3px;
border-radius: 0;
}
.mk-skel { display: block; border-radius: var(--mk-r-md); background: var(--mk-skel); }
.mk-skel--card { position: relative; aspect-ratio: 4 / 3; margin-bottom: 56px; }
.mk-skel--card::before,
.mk-skel--card::after { content: ""; position: absolute; left: 0; height: 12px; border-radius: var(--mk-r-xs); background: var(--mk-skel); }
.mk-skel--card::before { top: calc(100% + 16px); width: 80%; }
.mk-skel--card::after { top: calc(100% + 36px); width: 50%; }
.mk-skel--row { height: 72px; margin-bottom: 8px; }
.mk-toast-region {
position: fixed;
left: 0;
right: 0;
bottom: 24px;
z-index: var(--mk-z-toast);
display: flex;
flex-direction: column;
align-items: center;
padding: 0 var(--mk-gutter);
box-sizing: border-box;
pointer-events: none;
}
.mk-toast-region .mk-toast.doneMsg {
position: relative;
left: auto;
bottom: auto;
z-index: auto;
display: flex;
align-items: center;
gap: 12px;
width: auto;
max-width: 480px;
min-height: 48px;
margin: 0;
padding: 12px 16px;
box-sizing: border-box;
border-radius: var(--mk-r-md);
background: var(--mk-toast-bg);
color: var(--mk-toast-fg);
box-shadow: var(--mk-elev-raise);
font-family: var(--mk-font);
font-size: var(--mk-fs-md);
line-height: calc(20 * var(--mk-px));
font-weight: 500;
text-align: left;
pointer-events: auto;
opacity: 0;
transform: translateY(8px);
transition: opacity var(--mk-dur-base) var(--mk-ease), transform var(--mk-dur-base) var(--mk-ease);
}
.mk-toast-region .mk-toast.mk-toast--in { opacity: 1; transform: none; }
.mk-toast-region .mk-toast.mk-toast--out { opacity: 0; transform: none; transition: opacity var(--mk-dur-fast) var(--mk-ease); }
.mk-toast-region .mk-toast:has(.mk-toast__action) { padding: 4px 4px 4px 16px; }
.mk-toast__icon {
flex: none;
width: 20px;
height: 20px;
background: var(--mk-toast-ok);
-webkit-mask: var(--mk-ic-ok-circle) no-repeat center / 20px 20px;
mask: var(--mk-ic-ok-circle) no-repeat center / 20px 20px;
}
.mk-toast--error .mk-toast__icon { background: var(--mk-toast-err); -webkit-mask-image: var(--mk-ic-alert-circle); mask-image: var(--mk-ic-alert-circle); }
.mk-toast--neutral .mk-toast__icon { display: none; }
.mk-toast__text {
flex: 1 1 auto;
min-width: 0;
margin: 0;
color: inherit;
font: inherit;
white-space: pre-line;
overflow-wrap: anywhere;
}
.mk-toast__action {
flex: none;
min-height: 40px;
margin: 0 0 0 4px;
padding: 0 12px;
border: 0;
border-radius: var(--mk-r-sm);
background: transparent;
color: var(--mk-toast-fg);
font: 600 var(--mk-fs-md) / calc(20 * var(--mk-px)) var(--mk-font);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.mk-toast__action:focus-visible { outline: 2px solid var(--mk-toast-fg); outline-offset: -2px; }
@media (max-width: 839px) {
.mk-toast-region { bottom: calc(var(--mk-bar-h) + 16px + env(safe-area-inset-bottom)); }
body.mk-has-fab .mk-toast-region { bottom: calc(var(--mk-bar-h) + 72px + env(safe-area-inset-bottom)); }
.mk-toast-region .mk-toast.doneMsg { max-width: min(480px, 100%); }
}
@media (max-width: 599px) {
.mk-toast-region .mk-toast.doneMsg { width: 100%; }
html.mk-lock .mk-toast-region { top: calc(16px + env(safe-area-inset-top)); bottom: auto; }
}
.mk-layer {
position: fixed;
inset: 0;
z-index: var(--mk-z-layer);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
box-sizing: border-box;
}
.mk-layer[hidden] { display: none; }
.mk-layer:is([data-kind="search"], [data-anchored])[hidden] { display: none; }
.mk-layer__dim {
position: absolute;
inset: 0;
background: var(--mk-dim);
opacity: 0;
transition: opacity var(--mk-dur-fast) var(--mk-ease);
}
.mk-layer--open > .mk-layer__dim { opacity: 1; transition-duration: var(--mk-dur-base); }
.mk-layer.mk-layer--stacked > .mk-layer__dim,
.mk-layer[data-anchored] > .mk-layer__dim { background: transparent; }
.mk-dialog,
.mk-sheet {
position: relative;
box-sizing: border-box;
border: 1px solid var(--mk-line);
background: var(--mk-surface);
color: var(--mk-ink);
box-shadow: none;
outline: none;
opacity: 0;
transform: translateY(8px);
transition: opacity var(--mk-dur-fast) var(--mk-ease), transform var(--mk-dur-fast) var(--mk-ease);
}
.mk-layer--open > :is(.mk-dialog, .mk-sheet) { opacity: 1; transform: none; transition-duration: var(--mk-dur-base); }
.mk-dialog {
width: 400px;
max-width: 100%;
max-height: calc(100vh - 32px);
overflow: auto;
padding: 24px;
border-radius: var(--mk-r-lg);
}
.mk-layer[data-kind="info"] .mk-dialog { width: min(400px, 100vw - 2 * var(--mk-gutter)); }
.mk-dialog__title {
margin: 0;
color: var(--mk-ink);
font-family: var(--mk-font);
font-size: var(--mk-fs-dialog);
line-height: calc(28 * var(--mk-px));
font-weight: 600;
letter-spacing: -0.01em;
}
.mk-dialog__body {
margin: 8px 0 0;
color: var(--mk-body);
font-size: var(--mk-fs-md);
line-height: calc(22 * var(--mk-px));
white-space: pre-line;
}
.mk-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.mk-dialog__actions .mk-btn { min-height: 48px; }
.mk-layer[data-anchored] { display: block; padding: 0; }
.mk-layer[data-anchored] > :is(.mk-dialog, .mk-sheet) {
position: fixed;
width: 360px;
max-width: calc(100vw - 32px);
border-radius: var(--mk-r-md);
box-shadow: var(--mk-elev-pop);
}
.mk-sheet {
display: flex;
flex-direction: column;
width: 480px;
max-width: 100%;
max-height: 85vh;
max-height: 85dvh;
border-radius: var(--mk-r-lg);
}
.mk-sheet__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 56px;
padding: 8px 8px 8px 24px;
box-sizing: border-box;
border-bottom: 1px solid var(--mk-line);
}
.mk-sheet__title { margin: 0; color: var(--mk-ink); font-size: calc(17 * var(--mk-px)); line-height: calc(24 * var(--mk-px)); font-weight: 600; }
.mk-sheet__body { flex: 1 1 auto; min-height: 0; padding: 16px 24px; overflow: auto; overscroll-behavior: contain; }
.mk-sheet__foot {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
border-top: 1px solid var(--mk-line);
}
.mkActSheet .mkActSheet__txt { margin: 0 0 16px; color: var(--mk-body); font-size: calc(14 * var(--mk-px)); line-height: 1.6; }
.mkActSheet .mkActSheet__label { display: block; margin: 12px 0 6px; color: var(--mk-ink); font-size: calc(14 * var(--mk-px)); font-weight: 600; }
.mkActSheet .mkActSheet__input { display: block; width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border: 1px solid var(--mk-line-strong); border-radius: var(--mk-r-sm); background: var(--mk-canvas); color: var(--mk-ink); font: inherit; font-size: calc(16 * var(--mk-px)); }
.mkActSheet textarea.mkActSheet__input { min-height: 96px; resize: vertical; }
.mkActSheet .mkActSheet__input:focus-visible { outline: 2px solid var(--mk-focus); outline-offset: 1px; }
@media (max-width: 839px) {
.mk-layer[data-kind="sheet"] { align-items: flex-end; padding: 0; }
.mk-layer[data-kind="sheet"] > .mk-sheet {
width: min(560px, 100%);
border-bottom: 0;
border-radius: var(--mk-r-lg) var(--mk-r-lg) 0 0;
transform: translateY(100%);
opacity: 1;
transition: transform var(--mk-dur-base) var(--mk-ease);
}
.mk-layer--open[data-kind="sheet"] > .mk-sheet { transform: none; transition-duration: var(--mk-dur-slow); }
.mk-layer[data-kind="sheet"][data-placement="side"] { justify-content: flex-start; align-items: stretch; }
.mk-layer[data-kind="sheet"][data-placement="side"] > .mk-sheet {
width: 360px;
max-width: calc(100% - 32px);
height: 100vh;
height: 100dvh;
max-height: none;
border: 0;
border-right: 1px solid var(--mk-line);
border-radius: 0 var(--mk-r-lg) var(--mk-r-lg) 0;
transform: translateX(-100%);
}
}
@media (max-width: 599px) {
.mk-layer:is([data-kind="choice"], [data-kind="sheet"]) { align-items: flex-end; justify-content: center; padding: 0; }
.mk-layer[data-kind="choice"] > .mk-dialog,
.mk-layer[data-kind="sheet"] > .mk-sheet,
.mk-layer[data-kind="sheet"][data-placement="side"] > .mk-sheet {
width: 100%;
max-width: none;
height: auto;
max-height: 85vh;
max-height: 85dvh;
border: 1px solid var(--mk-line);
border-bottom: 0;
border-radius: var(--mk-r-lg) var(--mk-r-lg) 0 0;
opacity: 1;
transform: translateY(100%);
transition: transform var(--mk-dur-base) var(--mk-ease);
}
.mk-layer[data-kind="choice"] > .mk-dialog { padding: 24px 24px calc(16px + env(safe-area-inset-bottom)); }
.mk-layer--open:is([data-kind="choice"], [data-kind="sheet"]) > :is(.mk-dialog, .mk-sheet) { transform: none; transition-duration: var(--mk-dur-slow); }
.mk-layer[data-kind="choice"] .mk-dialog__actions .mk-btn { flex: 1 1 0; }
.mk-dialog__actions.mk-dialog__actions--3 { flex-direction: column-reverse; }
.mk-dialog__actions.mk-dialog__actions--3 .mk-btn { flex: none; width: 100%; }
}
@media (max-width: 839px) {
.mk-layer--open[data-kind="sheet"][data-placement="side"] > .mk-sheet { transform: none; transition-duration: var(--mk-dur-slow); }
}
.mk-layer[data-kind="search"] { display: block; padding: 0; }
.mk-layer[data-kind="search"] > .mk-layer__dim { background: var(--mk-surface); }
.mk-input {
display: block;
width: 100%;
min-height: var(--mk-tap);
margin: 0;
padding: 0 12px;
box-sizing: border-box;
border: 1px solid var(--mk-line-strong);
border-radius: var(--mk-r-sm);
background-color: var(--mk-surface);
color: var(--mk-ink);
font-family: var(--mk-font);
font-size: var(--mk-fs-md);
transition: border-color var(--mk-dur-fast) var(--mk-ease), box-shadow var(--mk-dur-fast) var(--mk-ease);
}
textarea.mk-input { padding: 10px 12px; line-height: 1.55; }
@media (hover: hover) { .mk-input:hover { border-color: var(--mk-faint); } }
.mk-input:focus { outline: none; border-color: var(--mk-focus); box-shadow: var(--mk-focus-input); }
.mk-input:disabled { border-color: var(--mk-line); background-color: var(--mk-line-soft); color: var(--mk-mute); }
.mk-input[readonly] { border-color: var(--mk-line); background-color: var(--mk-canvas); }
.mk-field-hint { margin: 6px 0 0; color: var(--mk-meta); font-size: var(--mk-fs-sm); line-height: calc(18 * var(--mk-px)); }
.mk-field-hint[hidden] { display: none; }
p.warningTxt.mk-field-error {
position: relative;
display: flex;
align-items: flex-start;
gap: 6px;
margin: 6px 0 0;
padding: 0;
color: var(--mk-danger-ink);
font-size: var(--mk-fs-sm);
line-height: calc(18 * var(--mk-px));
text-align: left;
white-space: pre-line;
}
p.warningTxt.mk-field-error::before {
content: "";
flex: none;
width: 14px;
height: 14px;
margin-top: 2px;
background: var(--mk-danger-ink);
-webkit-mask: var(--mk-ic-alert-circle) no-repeat center / 14px 14px;
mask: var(--mk-ic-alert-circle) no-repeat center / 14px 14px;
}
.mk-form-error {
margin: 16px 0;
padding: 10px 12px 10px 14px;
border-left: 3px solid var(--mk-danger);
border-radius: 0 var(--mk-r-sm) var(--mk-r-sm) 0;
background: var(--mk-surface);
color: var(--mk-ink);
font-size: var(--mk-fs-md);
line-height: calc(22 * var(--mk-px));
text-align: left;
}
.mk-form-error a { color: var(--mk-accent-deep); text-decoration: underline; text-underline-offset: 2px; }
button.mk-switch {
position: relative;
flex: none;
width: 44px;
height: 40px;
margin: 0;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
button.mk-switch::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 44px;
height: 26px;
border-radius: var(--mk-r-pill);
background: var(--mk-line-strong);
transition: background-color var(--mk-dur-fast) var(--mk-ease);
}
button.mk-switch::after {
content: "";
position: absolute;
left: 3px;
top: 10px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--mk-surface);
box-shadow: var(--mk-shadow-1);
transition: transform var(--mk-dur-fast) var(--mk-ease);
}
button.mk-switch[aria-checked="true"]::before { background: var(--mk-control-on); }
button.mk-switch[aria-checked="true"]::after { transform: translateX(18px); }
button.mk-switch:focus-visible { outline: 2px solid var(--mk-focus); outline-offset: 2px; border-radius: var(--mk-r-pill); }
.mk-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 599px) {
.mk-chip-row { flex-wrap: nowrap; overflow-x: auto; scroll-padding-inline: var(--mk-gutter); scrollbar-width: none; }
.mk-chip-row::-webkit-scrollbar { display: none; }
}
.mk-chip {
display: inline-flex;
flex: none;
align-items: center;
gap: 6px;
min-height: 40px;
margin: 0;
padding: 0 14px;
box-sizing: border-box;
border: 1px solid var(--mk-line-strong);
border-radius: var(--mk-r-pill);
background: var(--mk-surface);
color: var(--mk-ink);
font-family: var(--mk-font);
font-size: var(--mk-fs-md);
line-height: 1.2;
font-weight: 500;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--mk-dur-fast) var(--mk-ease), border-color var(--mk-dur-fast) var(--mk-ease);
}
@media (hover: hover) { .mk-chip:hover { border-color: var(--mk-faint); } }
.mk-chip:focus-visible { outline: 2px solid var(--mk-focus); outline-offset: 2px; }
.mk-chip[aria-pressed="true"] { border-color: var(--mk-accent-ink); background: var(--mk-accent-soft); color: var(--mk-accent-ink); font-weight: 600; }
.mk-chip[aria-pressed="true"]::before,
.mk-chip.mk-chip--remove::after {
content: "";
flex: none;
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: var(--mk-ic-check) no-repeat center / 16px 16px;
mask: var(--mk-ic-check) no-repeat center / 16px 16px;
}
.mk-chip.mk-chip--remove::after { -webkit-mask-image: var(--mk-ic-close); mask-image: var(--mk-ic-close); }
.mk-seg { display: inline-flex; align-items: center; gap: 8px; padding: 4px; border-radius: var(--mk-r-md); background: var(--mk-line-soft); }
.mk-seg > :is(button, a) {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
min-width: 56px;
margin: 0;
padding: 0 14px;
box-sizing: border-box;
border: 0;
border-radius: var(--mk-r-sm);
background: transparent;
color: var(--mk-meta);
font: 500 var(--mk-fs-md) / 1.2 var(--mk-font);
text-decoration: none;
cursor: pointer;
transition: background-color var(--mk-dur-fast) var(--mk-ease), color var(--mk-dur-fast) var(--mk-ease);
}
.mk-seg > :is([aria-pressed="true"], [aria-checked="true"], [aria-current], .active) { background: var(--mk-surface); color: var(--mk-ink); font-weight: 600; box-shadow: 0 0 0 1px var(--mk-line); }
@media (hover: hover) { .mk-seg > :is(button, a):hover { color: var(--mk-ink); } }
.mk-list { margin: 0; padding: 0; list-style: none; }
.mk-list-item {
position: relative;
display: flex;
align-items: center;
gap: 16px;
min-height: 56px;
padding: 12px 0;
box-sizing: border-box;
border-bottom: 1px solid var(--mk-line);
}
.mk-list-item:has(> .mk-list-item__thumb) { min-height: 96px; }
.mk-list-item__thumb { flex: none; width: 96px; height: 72px; border-radius: var(--mk-r-thumb-s); object-fit: cover; background: var(--mk-line-soft) var(--mk-ph-43) no-repeat center / cover; }
.mk-list-item__thumb.mk-list-item__thumb--40 { width: 40px; height: 40px; border-radius: 50%; }
.mk-list-item__main { flex: 1 1 auto; min-width: 0; }
.mk-list-item__title {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
color: var(--mk-ink);
font-size: var(--mk-fs-lg);
line-height: calc(22 * var(--mk-px));
font-weight: 600;
text-decoration: none;
overflow-wrap: anywhere;
}
.mk-list-item__title::after { content: ""; position: absolute; inset: 0; }
.mk-list-item__title:focus-visible { outline: none; }
.mk-list-item:has(.mk-list-item__title:focus-visible) { outline: 2px solid var(--mk-focus); outline-offset: 2px; border-radius: var(--mk-r-sm); }
@media (hover: hover) { .mk-list-item:hover .mk-list-item__title { text-decoration: underline; text-decoration-color: var(--mk-line-strong); text-underline-offset: 3px; } }
.mk-list-item__meta { margin: 4px 0 0; color: var(--mk-meta); font-size: var(--mk-fs-sm); line-height: calc(18 * var(--mk-px)); font-variant-numeric: tabular-nums; }
.mk-list-item__trail { position: relative; z-index: 1; display: flex; flex: none; align-items: center; gap: 8px; }
.mk-empty__text { margin: 0; color: var(--mk-body); font-size: var(--mk-fs-md); line-height: calc(22 * var(--mk-px)); }
.mk-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
@media (max-width: 599px) {
.mk-empty__actions { flex-direction: column; align-items: stretch; }
.mk-empty__actions > .mk-btn { width: 100%; }
}
.mk-undo-row { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 0; color: var(--mk-body); font-size: var(--mk-fs-md); }
@media (max-width: 839px) {
body.mk-has-tabbar { --mk-bar-h: var(--mk-tabbar-h); }
body.mk-has-bar { --mk-bar-h: var(--mk-actionbar-h); }
body.mk-has-formbar { --mk-bar-h: var(--mk-formbar-h); }
body.mk-has-tabbar,
body.mk-has-bar { padding-bottom: calc(var(--mk-bar-h) + env(safe-area-inset-bottom)); }
body.mk-has-fab .mk-fab-space { padding-bottom: 64px; }
}
.mk-bar { display: none; }
@media (max-width: 839px) {
.mk-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: var(--mk-z-bar);
display: flex;
gap: 8px;
min-height: var(--mk-actionbar-h);
padding: 0 var(--mk-gutter) env(safe-area-inset-bottom);
background: var(--mk-surface);
box-shadow: inset 0 1px 0 var(--mk-line);
transition: transform var(--mk-dur-base) var(--mk-ease);
}
.mk-bar.mk-bar--hidden,
body.mk-kbd .mk-bar { transform: translateY(calc(100% + env(safe-area-inset-bottom))); }
.mk-bar__item {
position: relative;
display: flex;
flex: 1 1 0;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 56px;
margin: 0;
padding: 10px 0;
border: 0;
border-radius: var(--mk-r-md);
background: transparent;
color: var(--mk-meta);
font-family: var(--mk-font);
font-size: var(--mk-fs-sm);
line-height: calc(16 * var(--mk-px));
font-weight: 500;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mk-bar__item:active { background: var(--mk-line-soft); transition-duration: var(--mk-dur-press); }
.mk-bar__item:focus-visible { outline: 2px solid var(--mk-focus); outline-offset: -2px; }
.mk-bar__item:is([aria-pressed="true"], .is-on) { color: var(--mk-accent-ink); font-weight: 600; }
.mk-bar__icon { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--mk-icon); }
.mk-bar__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: miter; }
.mk-bar__icon img { display: block; max-width: 24px; max-height: 24px; }
.mk-bar__badge {
position: absolute;
top: -6px;
left: 14px;
min-width: 18px;
height: 18px;
padding: 0 5px;
box-sizing: border-box;
border-radius: var(--mk-r-pill);
background: var(--mk-ink);
color: var(--mk-on-ink);
font-size: var(--mk-fs-xs);
line-height: 18px;
font-weight: 600;
text-align: center;
}
}
@media (max-width: 359px) {
.mk-bar .mk-bar__item[data-mk-share] { display: none; }
}
.mk-more-share { display: none; }
@media (max-width: 359px) { .mk-more-share { display: flex; } }
@media (max-width: 839px) {
.mk-formbar {
position: sticky;
bottom: 0;
z-index: var(--mk-z-sticky);
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
min-height: var(--mk-formbar-h);
margin-left: calc(-1 * var(--mk-formbar-bleed, 0px));
margin-right: calc(-1 * var(--mk-formbar-bleed, 0px));
padding: 12px var(--mk-gutter) calc(12px + env(safe-area-inset-bottom));
box-sizing: border-box;
background: var(--mk-surface);
box-shadow: inset 0 1px 0 var(--mk-line);
}
.mk-formbar > * { flex: 1 1 0; min-width: 0; margin: 0; }
.mk-formbar > :is(.btnPrev, [data-mk-prev]) { flex: 0 0 auto; }
body.mk-kbd .mk-formbar { position: fixed; left: 0; right: 0; bottom: var(--mk-kbd-offset, 0px); margin: 0; }
}
.mk-fab.mk-fab { display: none; }
@media (max-width: 839px) {
.mk-fab.mk-fab {
position: fixed;
right: var(--mk-gutter);
bottom: calc(var(--mk-bar-h) + 16px + env(safe-area-inset-bottom));
z-index: var(--mk-z-bar);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: auto;
height: 48px;
min-height: 48px;
margin: 0;
padding: 0 20px 0 16px;
box-sizing: border-box;
border: 0;
border-radius: var(--mk-r-pill);
background: var(--mk-ink);
color: var(--mk-on-ink);
box-shadow: var(--mk-elev-raise);
font-family: var(--mk-font);
font-size: var(--mk-fs-md);
line-height: 1;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: padding var(--mk-dur-fast) var(--mk-ease), background-color var(--mk-dur-fast) var(--mk-ease);
}
.mk-fab.mk-fab:active { background: var(--mk-ink-press); }
.mk-fab.mk-fab:focus-visible { outline: 2px solid var(--mk-focus); outline-offset: 2px; }
.mk-fab__icon { flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--mk-ic-plus) no-repeat center / 20px 20px; mask: var(--mk-ic-plus) no-repeat center / 20px 20px; }
.mk-fab.mk-fab.mk-fab--mini { width: 48px; padding: 0; }
.mk-fab--mini .mk-fab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.mk-suggest {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: var(--mk-z-popover);
width: 100%;
min-width: 360px;
max-height: 60vh;
overflow: auto;
padding: 8px 0;
box-sizing: border-box;
border: 1px solid var(--mk-line);
border-radius: var(--mk-r-md);
background: var(--mk-surface);
box-shadow: var(--mk-elev-pop);
text-align: left;
}
.mk-suggest[hidden] { display: none; }
.mk-suggest__group + .mk-suggest__group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--mk-line); }
.mk-suggest__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 0 8px 0 16px; }
.mk-suggest__label { color: var(--mk-meta); font-family: var(--mk-mono); font-size: var(--mk-fs-xs); line-height: calc(16 * var(--mk-px)); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.mk-suggest__item { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; color: var(--mk-ink); font-size: var(--mk-fs-md); cursor: pointer; }
.mk-suggest__item[aria-selected="true"] { background: var(--mk-line-soft); }
@media (hover: hover) { .mk-suggest__item:hover { background: var(--mk-line-soft); } }
.mk-suggest__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-suggest__remove {
flex: none;
width: 40px;
height: 40px;
margin: 0 -12px 0 0;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.mk-suggest__remove::before { content: ""; display: block; width: 16px; height: 16px; margin: auto; background: var(--mk-icon); -webkit-mask: var(--mk-ic-close) no-repeat center / 16px 16px; mask: var(--mk-ic-close) no-repeat center / 16px 16px; }
.mk-suggest__list.mk-chip-row { padding: 4px 16px 8px; }
.mk-suggest__list.mk-chip-row .mk-suggest__item { padding: 0 14px; border: 1px solid var(--mk-line-strong); border-radius: var(--mk-r-pill); }
.mk-suggest__list.mk-chip-row .mk-suggest__item[aria-selected="true"] { outline: 2px solid var(--mk-focus); outline-offset: 1px; }
.mk-layer[data-kind="search"] .mk-suggest { position: static; min-width: 0; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 839px) { .mk-suggest { min-width: 0; } }
@media (prefers-reduced-motion: reduce) {
.mk-spinner { width: auto; height: auto; border: 0; border-radius: 0; animation: none; }
.mk-spinner > .mk-sr,
.mk-spinner > .mk-spinner__text { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; color: var(--mk-meta); font-size: var(--mk-fs-sm); }
.mk-busy::after { animation: none; }
.mk-toast-region .mk-toast.doneMsg { transform: none; }
.mk-layer :is(.mk-dialog, .mk-sheet) { transform: none !important; }
.mk-bar.mk-bar--hidden { transform: none; }
}
.mk-link-btn {
display: inline-flex;
align-items: center;
min-height: var(--mk-tap);
margin: 0 0 0 4px;
padding: 0;
border: 0;
background: transparent;
color: var(--mk-accent-deep);
font: inherit;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.mk-link-btn:focus-visible { outline: 2px solid var(--mk-focus); outline-offset: 2px; border-radius: var(--mk-r-xs); }
@media (max-width: 839px), (pointer: coarse) {
.ck.ck-toolbar { --ck-ui-component-min-height: 40px; }
.ck.ck-toolbar .ck.ck-button { min-width: 40px; min-height: 40px; }
.ck.ck-toolbar > .ck-toolbar__items { gap: 8px calc(8px - var(--ck-spacing-small)); }
}