@charset "utf-8";

/* Info
 ========================================================================== */
/**
    * 1. Writer: Hyerin Lim. (Weaverloft Corp.)
    * 2. Production Date: 2026-03
    * 3. Client: Neopharm
 */

/*========== Common ==========*/
.community-sec .title-wrap{border: none;}
.community-layout{display: flex; flex-flow: row nowrap; align-items: flex-start; justify-content: space-between; gap: 40px;}
.commu-sidebar{width: 160px; transform: translateY(-50px);}
.commu-sidebar .sidebar-tit{font-size: 24px; font-weight: 700; color: var(--font-color-1); line-height: 1.208;}
.commu-sidebar .menu-list{margin-top: 20px; padding-top: 10px; border-top: 1px solid var(--border-color-c);}
.commu-sidebar .menu-list li a{display: block; padding: 10px 0; font-size: 16px; font-weight: 500; color: var(--font-color-6); line-height: 1.1875;}
.commu-sidebar .menu-list li.on a{font-weight: 600; color: var(--font-color-1);}
.commu-content{width: calc(100% - 160px - 40px); border-top: 1px solid var(--border-color-c);}
.point-color {color: var(--point-color);}
.mo-menu-select { display: none; }
.mo-nav-wrap { display: none; }

@media screen and (max-width: 1024px) {
    .community-layout { display: flex; flex-direction: column; gap: clamp(30px, 3.91vw, 40px); }
    .commu-sidebar { display: none; }
    .commu-content { width: 100%; }
    .mo-menu-select { display: block; width: 100%; }
    .notice-sec.view-sec .mo-menu-select { display: none; }

    /* 이전글/다음글 nav */
    .mo-nav-wrap { display: block; }
    .mo-nav-wrap .nav-list .nav-item { border-bottom: 1px solid var(--border-color-c); }
    .mo-nav-wrap .nav-list .nav-item .nav-link { display: flex; gap: 16px; padding: 10px; font-size: 13px; font-weight: 500; }
    .mo-nav-wrap .nav-list .nav-item .nav-link .nav-label { min-width: 55px; color: var(--font-color-6); }
    .mo-nav-wrap .nav-list .nav-item .nav-link .nav-label::after { content: ''; display: inline-block; width: 16px; height: 16px; margin-left: 6px; background: url("/atp_gcontest/front/assets/css/../images/sub/icon-nav-arrow.svg") no-repeat center / cover; vertical-align: middle; }
    .mo-nav-wrap .nav-list .nav-item.next .nav-link .nav-label::after { transform: rotate(180deg); }
    .mo-nav-wrap .nav-list .nav-item .nav-link .nav-title { color: var(--font-color-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mo-nav-wrap .nav-list .nav-item .nav-link .nav-title::before { content: ''; display: inline-block; width: 1px; height: 14px; margin-right: 16px; background: var(--border-color-c); vertical-align: middle; }
}
@media screen and ( max-width: 768px) {
    .community-layout { padding-top: 30px; }
}

/* input */
.input-group input { width: 100%; height: 42px; padding: 0 20px; border: 1px solid var(--border-color-c); border-radius: 6px; font-size: 16px; color: var(--font-color-1); background: #fff; outline: none; }
.input-group textarea { width: 100%; height: 138px; padding: 12px 20px; resize: none; border: 1px solid var(--border-color-c); border-radius: 6px; font-size: 16px; color: var(--font-color-1); background: #fff; outline: none; line-height: 1.4; }
.input-group input::placeholder,
.input-group textarea::placeholder { color: var(--font-color-a); font-weight: 400; }
.input-group input:focus,
.input-group textarea:focus { border-color: var(--point-color); }
.input-group .error-message { display: none; margin-top: 6px; padding-left: 20px; font-size: 13px; color: var(--dark-red-color); background-image: url('../images/common/info-red.svg'); background-size: 16px 16px; background-position: left center; background-repeat: no-repeat; text-align: left;}
.input-group .info-message{display: block; padding-left: 20px; background-image: url('../images/common/info-red.svg'); background-size: 16px 16px; background-position: left center; background-repeat: no-repeat;}
.input-group.is-error input { border-color: var(--red-color); }
.input-group.is-error .error-message { display: block; }
.input-box:has(.pw-btn) { position: relative; }
.pw-btn { position: absolute; top: 50%; transform: translateY(-50%); right: 20px; width: 20px; height: 20px; background: url("/atp_gcontest/front/assets/images/sub/icon-pw-show.svg") no-repeat center / cover; }
.pw-btn.hide { background-image: url("/atp_gcontest/front/assets/images/sub/icon-pw-hide.svg"); }

@media screen and (max-width: 1024px) {
    .input-group input { padding-inline: clamp(10px, 1.95vw, 20px); font-size: clamp(14px, 1.56vw, 16px); }
    .input-group textarea { padding-inline: clamp(10px, 1.95vw, 20px); font-size: clamp(14px, 1.56vw, 16px); }
    .input-group .error-message { font-size: 12px; }
    .pw-btn { right: clamp(16px, 1.95vw, 20px); width: clamp(16px, 1.95vw, 20px);  height: clamp(16px, 1.95vw, 20px);}
}

/*========== Commu List ==========*/
.commu-list li{position: relative; display: flex; flex-flow: row nowrap; align-items: center; min-height: 76px; border-bottom: 1px solid var(--border-color-c); font-size: 16px; color: #111; cursor: pointer;}
.commu-list li::before{content: ''; display: inline-block; width: 3px; height: 100%; position: absolute; top: 0; left: 0; background-color: var(--point-color); opacity: 0; transition: opacity 0.3s;}
.commu-list li:hover::before{opacity: 1; transition: opacity 0.3s;}
.commu-list li .num{width: 120px; text-align: center;}
.commu-list li .title{flex: 1; font-weight: 500;}
.commu-list li .title p{ max-width: 100%; word-break: keep-all; font-weight: 500; text-wrap: pretty;}
.commu-list li.new .title p { max-width: 100%; }
.commu-list li.new .title p::after{content: 'NEW'; display: inline-block; width: 32px; height: 15px; margin-left: 8px; line-height: 15px; border-radius: 2px; background-color: var(--point-color); font-size: 10px; font-weight: 700; color: #fff; text-align: center; vertical-align: middle; transform: translateY(-1px);}
.commu-list li .date{width: 120px; font-weight: 500; color: #999; text-align: center;}
.commu-list li .status{min-width: 54px; margin-right: 40px; white-space: nowrap; font-weight: 500;}
.commu-list li .status .waiting{color: #F5A112;}
.commu-list li .status .done{color: var(--point-color);}

@media screen and (max-width: 1024px) {
    .commu-list li { flex-direction: column; align-items: flex-start; gap: 6px; min-height: 72px; padding: 16px 10px; }
    .commu-list li:hover::before { opacity: 0; }
    .commu-list li .num { display: none; }
    .commu-list li .title { width: 100%; }
    .commu-list li .date { text-align: left; color: var(--font-color-6); }
}

@media screen and (max-width: 768px) {
    .community-sec .title-wrap { display: none; }
    .commu-list li .title p, .commu-list li .date { font-size: clamp(14px, 1.82vw, 16px); }

    .qna-sec .commu-content { display: flex; flex-direction: column; }
    .qna-sec .commu-content .btn-wrap { order: 1; margin-top: 40px; }
    .qna-sec .commu-content .btn-wrap.user-btn-wrap { flex-direction: row; margin-top: 20px; }
    .qna-sec .commu-content .pagination-wrap { margin-top: 30px;  }
}

/*========== Notice View ==========*/
.notice-view .title {padding: 40px 30px; border-bottom: 1px solid var(--border-color-c);}
.notice-view .title .tit{font-size: 24px; font-weight: 600; color: #111; word-break: keep-all;}
.notice-view.new .title .tit::after{content: 'NEW'; display: inline-block; width: 32px; height: 15px; margin-left: 8px; line-height: 15px; border-radius: 2px; background-color: var(--point-color); font-size: 10px; font-weight: 700; color: #fff; text-align: center; vertical-align: middle; transform: translateY(-1px);}
.notice-view .title .date{margin-top: 20px;; font-size: 16px; font-weight: 500; color: var(--font-color-6); line-height: 1;}
.notice-view .cont-box{padding: 40px 0; border-bottom: 1px solid var(--border-color-c);}

@media screen and (max-width: 1024px) {
    .notice-view .title { padding: clamp(24px, 3.91vw, 40px) clamp(10px, 2.93vw, 30px); }
    .notice-view .title .tit { font-size: clamp(16px, 2.34vw, 24px); }
    .notice-view .title .date { margin-top: clamp(14px, 1.95vw, 20px); font-size: clamp(14px, 1.56vw, 16px); }
    .notice-view .cont-box { padding-block: clamp(20px, 3.91vw, 40px); }
}

/*========== Q&A View Reg ==========*/
.commu-content:has(.qna-view-reg){border-top: 2px solid #111;}
.qna-view-reg{position: relative;}
.qna-view-reg .required-note{position: absolute; right: 0; top: -36px; font-size: 16px; font-weight: 500; color: #666; line-height: 1;}
.qna-view-reg .required-note .required { color: var(--red-color); font-weight: 500;}
.qna-view-reg .view-reg-item{display: flex; flex-flow: row nowrap; min-height: 80px; border-bottom: 1px solid var(--border-color-c);}
.qna-view-reg .view-reg-item > *{display: flex; align-items: center;}
.qna-view-reg .view-reg-item dt{ width: 160px; padding: 20px; background-color: #F7F8FA; color: var(--font-color-6); text-align: left; font-weight: 500;}
.qna-view-reg .view-reg-item dt.required::after { content: '*'; display: inline-block; margin-left: 3px; color: var(--red-color); }
.qna-view-reg .view-reg-item dd{width: calc(100% - 160px); min-height: 81px; padding: 29px 40px; color: var(--font-color-1);}
.qna-view-reg .view-reg-item dd.item-view { white-space: pre-line; word-break: keep-all; }
.qna-view-reg .view-reg-item dd.item-reg{padding: 15px 0 15px 20px;}
.qna-view-reg .view-reg-item dd .input-group {width: 100%;}
.qna-view-reg .view-reg-item dd .input-group.password-box{max-width: 400px;}
.qna-view-reg .view-reg-item dd .form-check-btn {width: 125px; height:42px; line-height: 42px; border-radius: 6px; font-size:14px; font-weight: 500; white-space: nowrap; color:var(--font-color); text-align: center;}
.qna-view-reg .view-reg-item dd .form-check-btn.theme-green {background: var(--green-color); color:#fff; transition: background-color 0.3s;}
.qna-view-reg .view-reg-item dd .form-check-btn.theme-green:hover{background-color: var(--point-color);}
.qna-view-reg .qna-reply{margin-top: 58px; border-top: 2px solid #111;}
.qna-view-reg ~ .reg-info-box{ width: 100%; min-height: 96px; margin-top: 36px; padding: 30px; border-radius: 6px; background-color: #F7F8FA;}
.qna-view-reg ~ .reg-info-box li{font-size: 13px; color: #333; line-height: 1.38;}
.qna-view-reg ~ .reg-info-box li p { padding-left: 10px; word-break: keep-all; }
.qna-view-reg ~ .reg-info-box li p::before{content: ''; display: inline-block; width: 3px; height: 3px; margin-inline: -10px 7px; border-radius: 50%; background-color: #333; vertical-align: middle;}

@media screen and (max-width: 1024px) {
    .qna-sec.view-sec .community-layout:has(.required-note) { gap: 61px; }
    .qna-view-reg .required-note { top: -31px; font-size: clamp(13px, 1.56vw, 16px); }
    .qna-view-reg .view-reg-item { min-height: auto; }
    .qna-view-reg .view-reg-item dt { width: 90px; padding: 16px 0; background-color: transparent; font-size: clamp(14px, 1.56vw, 16px); }
    .qna-view-reg .view-reg-item:has(.item-view) dt { align-items: flex-start; line-height: 1.4; }
    .qna-view-reg .view-reg-item:has(.item-reg) { flex-wrap: wrap; }
    .qna-view-reg .view-reg-item:has(.item-reg) dt { padding-bottom: 10px; }
    .qna-view-reg .view-reg-item dd { width: 100%; min-height: auto; padding: 16px 0; font-size: clamp(14px, 1.56vw, 16px); }
    .qna-view-reg .view-reg-item dd.item-reg { padding: 0 0 16px; }
    .qna-view-reg ~ .reg-info-box { min-height: auto; margin-top: clamp(20px, 3.52vw, 36px); padding: clamp(16px, 2.93vw, 30px); }
    .qna-view-reg ~ .reg-info-box li { font-size: 12px; }
}

@media screen and (max-width: 768px) {
    .qna-view-reg .view-reg-item dd .form-check-btn { width: 100%; }
    .qna-view-reg .view-reg-item dd .input-group:has(input[type="password"]) { max-width: none; }
}

/*========== FAQ ==========*/
.commu-list.faq-list li{display: block; height: auto;}
.commu-list.faq-list li .q-box{display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-height: 76px; padding: 20px; font-size: 16px; font-weight: 600; color: #333; line-height: 1.6; word-break: keep-all;}
.commu-list.faq-list li .q-box::after{content: ''; display: block; width: 20px; height: 20px; margin-left: auto; background: url('../images/sub/icon-arrow-gray.svg') no-repeat center / cover; transform: rotate(90deg); transition: transform 0.3s;}
.commu-list.faq-list li.active .q-box{color: var(--point-color);}
.commu-list.faq-list li.active .q-box::after{ transform: rotate(-90deg);}
.commu-list.faq-list li .q-box p{font-size: inherit; font-weight: inherit;}
.commu-list.faq-list li .a-box{display: none; padding: 28px 44px; border-top: 1px solid var(--border-color-c); background-color: #F7F8FA; line-height: 1.6; word-break: keep-all; white-space: pre-line;}
.commu-list.faq-list li.active .a-box{display: block;}

@media screen and (max-width: 1024px) {
    .commu-list.faq-list li { min-height: 52px; padding: 0; }
    .commu-list.faq-list li .q-box { gap: 6px; min-height: 52px; padding: clamp(16px, 1.95vw, 20px) clamp(5px, 1.95vw, 20px); font-size: clamp(14px, 1.56vw, 16px); }
    .commu-list.faq-list li .q-box::after { display: none; }
    .commu-list.faq-list li .a-box { padding-block: clamp(16px, 2.73vw, 28px); padding-right: clamp(10px, 4.3vw, 44px); padding-left: 45px; font-size: clamp(14px, 1.56vw, 16px); }
}

/*========== Btn ==========*/
.btn-wrap{column-gap: 20px; margin-top: 80px;}
.user-btn-wrap{justify-content: flex-end; gap: 10px; margin-top: 20px;}
.user-btn-wrap ~ .btn-wrap{margin-top: 20px;}
.front-btn.mediem{min-width: 120px; line-height: 38px; padding: 0; border-radius: 4px; font-size: 14px; font-weight: 500;}
.front-btn.large{ width: 100%; max-width: 300px; line-height: 58px; border-radius: 6px; font-size: 16px; font-weight: 700;}
.front-btn.green{border: 1px solid transparent; background-color: var(--point-color); color: #fff; transition: background-color 0.3s;}
.front-btn.green:hover{background-color: #008b37;}
.front-btn.grey{border: 1px solid var(--border-color-c); background-color: #fff; color: #333; transition: background-color 0.3s;}
.front-btn.grey:hover{background-color: var(--bg-color);}
.front-btn.line:hover{background-color: var(--hover-color);}
.faq-sec .list-more-btn{ min-width: 133px; gap: 12px; padding: 0 32px; font-weight: 500;}
.faq-sec .list-more-btn::after{width: 16px; height: 16px; transform: rotate(90deg);}

@media screen and (max-width: 768px) {
    .btn-wrap { flex-direction: column; row-gap: 10px; margin-top: clamp(40px, 10.42vw, 80px); }
    .front-btn { width: 100%; font-size: clamp(14px, 2.08vw, 16px); }
    .front-btn.mediem { line-height: 44px; }
    .qna-sec.view-sec .front-btn.mediem { line-height: 40px; }
    .front-btn.large { max-width: none; font-size: clamp(14px, 2.08vw, 16px); font-weight: 600; line-height: 44px; }
    .front-btn.large.line { line-height: 46px; }
    .faq-sec .list-more-btn { border-radius: 4px; line-height: 46px; }
    .faq-sec .list-more-btn::after { display: none; }
}

/*========== Pagination ==========*/
.pagination-wrap{display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; margin-top: 80px;}
.user-btn-wrap ~ .pagination-wrap{margin-top: 20px;}
.pagination-wrap a{ width: 40px; height: auto; aspect-ratio: 1/1; }
.pagination-wrap a[class^="page"]{background-size: cover; background-position: center; font-size: 0;}
.pagination-wrap a[class^="page"]:hover{filter: brightness(0) saturate(100%) invert(30%) sepia(82%) saturate(2777%) hue-rotate(133deg) brightness(96%) contrast(102%);}
.pagination-wrap a.page-first{background-image: url('../images/common/page-first.svg');}
.pagination-wrap a.page-prev{background-image: url('../images/common/page-prev.svg');}
.pagination-wrap a.page-next{background-image: url('../images/common/page-next.svg');}
.pagination-wrap a.page-last{background-image: url('../images/common/page-last.svg');}
.pagination-wrap .paging-list{display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;}
.pagination-wrap .paging-list a {display: flex; align-items: center; justify-content: center; border-radius: 50%;background: none; font-size: 16px; font-weight: 500; line-height: 1; color: var(--font-color-6);}
.pagination-wrap .paging-list a:hover{color: var(--point-color);}
.pagination-wrap .paging-list a.this{ border: 1px solid var(--point-color); font-weight: 600; color: var(--point-color);}

@media screen and (max-width: 1024px) {
    .pagination-wrap { margin-top: clamp(30px, 7.81vw, 80px); }
    .pagination-wrap a { width: clamp(30px, 3.91vw, 40px); }
    .pagination-wrap .paging-list li.paging:nth-child(n+6) { display: none; }
    .pagination-wrap .paging-list a { font-size: clamp(12px, 1.82vw, 16px); }
}

/*========== Modal ==========*/
/* 비밀번호 확인 팝업 */
.modal-popup.password-confirm-modal .modal-content { padding: 60px 20px 30px; }
.modal-popup.password-confirm-modal .modal-txt-wrap { width: 100%; padding-block: 0 40px; }
.modal-popup.password-confirm-modal .modal-title { padding-bottom: 8px; }
.modal-popup.password-confirm-modal .modal-desc { opacity: 0.8; }
.password-confirm-modal .input-group { margin-top: 40px; text-align: left; }
.password-confirm-modal .input-group label { display: inline-block; opacity: 0.8; padding-bottom: 12px; font-size: 14px; font-weight: 500; color: var(--font-color-9); line-height: 1; }
.password-confirm-modal .input-group .input-box { position: relative; }
.password-confirm-modal .input-group input { padding-inline: 20px 40px; }
.password-confirm-modal .error-message { position: absolute; }
.password-confirm-modal .modal-btn-wrap button { flex: 1; }

@media screen and (max-width: 1024px) {
    .modal-popup.password-confirm-modal .modal-content { padding: clamp(40px, 5.86vw, 60px) clamp(16px, 1.95vw, 20px) clamp(20px, 2.93vw, 30px); }
    .modal-popup.password-confirm-modal .modal-txt-wrap { padding-bottom: clamp(33px, 3.91vw, 40px);}
    .modal-popup.password-confirm-modal .modal-title { padding-bottom: 6px; }
    .password-confirm-modal .input-group { margin-top: clamp(30px, 3.91vw, 40px); }
    .password-confirm-modal .input-group label { padding-bottom: clamp(8px, 1.17vw, 12px); font-size: clamp(12px, 1.37vw, 14px); }
    .password-confirm-modal .input-group input { padding-inline: clamp(16px, 1.95vw, 20px) clamp(32px, 3.91vw, 40px); }
}

/* ── CKEditor 콘텐츠 스타일 (reset.css + Tailwind Preflight 리셋 보정) ── */
.notice-view .cont-box,
.contest-desc {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    word-break: keep-all;
}

/* ── CKEditor side(오른쪽 정렬) */
.notice-view .cont-box figure.image.image-style-side,
.contest-desc figure.image.image-style-side { margin-left: auto !important; margin-right: 0 !important; width: fit-content !important; }

/* ── CKEditor 왼쪽 정렬 */
.notice-view .cont-box figure.image.image-style-align-left,
.contest-desc figure.image.image-style-align-left { margin-left: 0 !important; margin-right: auto !important; width: fit-content !important; }

/* 제목 (heading) */
.notice-view .cont-box h2,
.contest-desc h2 { font-size: 24px !important; font-weight: 700 !important; margin: 24px 0 12px !important; line-height: 1.4 !important; }
.notice-view .cont-box h3,
.contest-desc h3 { font-size: 20px !important; font-weight: 700 !important; margin: 20px 0 10px !important; line-height: 1.4 !important; }
.notice-view .cont-box h4,
.contest-desc h4 { font-size: 18px !important; font-weight: 600 !important; margin: 16px 0 8px !important; line-height: 1.4 !important; }

/* 굵기·기울임·밑줄·취소선 */
.notice-view .cont-box strong,
.notice-view .cont-box b,
.contest-desc strong,
.contest-desc b { font-weight: 700 !important; }
.notice-view .cont-box i,
.notice-view .cont-box em,
.contest-desc i,
.contest-desc em { font-style: italic !important; }
.notice-view .cont-box i *,
.notice-view .cont-box em *,
.contest-desc i *,
.contest-desc em * { font-style: inherit !important; }
.notice-view .cont-box u,
.contest-desc u { text-decoration: underline !important; }
.notice-view .cont-box s,
.contest-desc s { text-decoration: line-through !important; }

/* 단락 */
.notice-view .cont-box p,
.contest-desc p { margin: 8px 0; }

/* 링크 */
.notice-view .cont-box a,
.contest-desc a { color: var(--point-color, #009B3D) !important; text-decoration: underline !important; }

/* 리스트 */
.notice-view .cont-box ul,
.contest-desc ul { list-style-type: disc !important; padding-left: 24px !important; margin: 8px 0 !important; }
.notice-view .cont-box ol,
.contest-desc ol { list-style-type: decimal !important; padding-left: 24px !important; margin: 8px 0 !important; }
.notice-view .cont-box li,
.contest-desc li { margin: 4px 0; display: list-item !important; }

/* 인용문 (blockQuote) */
.notice-view .cont-box blockquote,
.contest-desc blockquote {
    border-left: 4px solid var(--point-color, #009B3D) !important;
    padding: 12px 20px !important;
    margin: 16px 0 !important;
    background: #f7f8fa !important;
    color: #555 !important;
    font-style: italic !important;
}

/* 표 (insertTable) */
.notice-view .cont-box figure.table,
.contest-desc figure.table { margin: 16px 0 !important; overflow-x: auto !important; display: block !important; }
.notice-view .cont-box table,
.contest-desc table { width: 100% !important; border-collapse: collapse !important; border: 1px solid #ddd !important; }
.notice-view .cont-box table th,
.contest-desc table th { padding: 10px 12px !important; border: 1px solid #ddd !important; background: #f7f8fa !important; font-weight: 600 !important; text-align: left !important; vertical-align: middle !important; }
.notice-view .cont-box table td,
.contest-desc table td { padding: 10px 12px !important; border: 1px solid #ddd !important; vertical-align: middle !important; }

/* 이미지 (insertImage) */
.notice-view .cont-box figure.image,
.contest-desc figure.image { margin: 16px 0 !important; text-align: center; display: block !important; }
.notice-view .cont-box figure.image img,
.contest-desc figure.image img,
.notice-view .cont-box img,
.contest-desc img { max-width: 100% !important; height: auto !important; width: auto !important; object-fit: contain !important; display: inline-block !important; }