@charset "UTF-8";
@layer ua, reset, vendor, legacy, token, layout, component, variant, utility;
/* --qz-* 토큰은 PC와 공유하는 tokens.css 단일 소스 */
@layer legacy{
@font-face{font-family:'Pretendard-fallback';src:local('Malgun Gothic'),local('Apple SD Gothic Neo');ascent-override:106%;descent-override:34%;line-gap-override:0%;size-adjust:100%;font-display:swap}
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    src: url(../../font/pretendard/Pretendard-Regular.woff2) format('woff2'),
         url(../../font/pretendard/Pretendard-Regular.woff) format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    src: url(../../font/pretendard/Pretendard-SemiBold.woff2) format('woff2'),
         url(../../font/pretendard/Pretendard-SemiBold.woff) format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    src: url(../../font/pretendard/Pretendard-Bold.woff2) format('woff2'),
         url(../../font/pretendard/Pretendard-Bold.woff) format('woff');
    font-display: swap;
}
/* 전역 초기화 구간 A — reset 레이어로 편입 (component 레이어가 !important 없이 override 가능) */

}
@layer reset {
*:where(:not(font)) {margin: 0;    padding: 0;    vertical-align: baseline;    font-family: 'Pretendard', 'Pretendard-fallback', sans-serif;    font-weight: 300;    color: #1b1b1b;    letter-spacing: -.5px;    border-radius: 0;    -webkit-border-radius: 0;    -moz-border-radius: 0;    outline: 0;    box-shadow: none;    opacity: 1;}
*{-webkit-tap-highlight-color:transparent} /* 모바일 터치 탭 하이라이트 제거 (2026-07-10) */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
html{height:100%;overflow:auto;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{position:relative;min-width:320px;min-height:100%;line-height:100%;background:var(--qz-surface-bright);word-wrap:break-word;color:var(--qz-text-primary)}
body.modal-open{overflow:visible}
}
/* !important — 레이어 밖 잔류(§9.1) */
.modal{top:115px !important}
/* !important — 레이어 밖 잔류(§9.1) */
.modal-open .modal{overflow:hidden !important}
/* 전역 초기화 구간 B — 사이의 .modal 규칙이 !important 를 보유해 레이어 밖에 남아야 하므로 블록을 나눠 재개방 */
@layer reset {
dd,div,dl,dt,li,menu,ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}
button,fieldset,iframe,img,input[type=button],input[type=image],input[type=submit]{border:0}
button,input[type=button],input[type=email],input[type=password],input[type=search],input[type=submit],input[type=tel],input[type=text],textarea{appearance:none;-webkit-appearance:none;-moz-appearance:none}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
a,button,input[type=button],input[type=checkbox],input[type=file],input[type=image],input[type=radio],input[type=submit],label,select{cursor:pointer}
button,img,input,select,textarea{vertical-align:middle}
button{background:0 0;overflow:visible;white-space:nowrap}
a{text-decoration:none}
address,em,i{font-style:normal}
cite,code,dfn,var{font-style:normal}
fieldset{display:block;min-width:0}
textarea{resize:none;outline:0;overflow:auto}
iframe{display:block}
table{border-collapse:collapse;border-spacing:0}
caption,legend{position:absolute;left:-9999px;width:1px;height:1px;font-size:1px;overflow:hidden}
::selection{background:#394679;color:var(--qz-text-primary);text-shadow:none}
input::placeholder,select option.placeholder,select.placeholder,textarea::placeholder{color:var(--text-secondary);opacity:1}
}
@layer legacy{
select{padding-right:14px;background:url(../images/common/select_arrow_d.png) no-repeat 95% 50% transparent;background-size:8px 7px;border-radius:0; /* 아이폰 사파리 보더 없애기 */ -webkit-appearance:none; /* 화살표 없애기 for chrome*/ -moz-appearance:none; /* 화살표 없애기 for firefox*/ appearance:none /* 화살표 없애기 공통*/ }
select::-ms-expand{ display:none /* 화살표 없애기 for IE10, 11*/ }
html h1{margin:0;font-size:inherit}

}
@layer legacy{
.clearfix{clear:both;display:block}
.float-left{float:left}
.float-right{float:right}
/* Phase 1(PR#683)에서 누락된 전역 초기화 잔여분. 레이어 밖에 있으면 신규 컴포넌트(@layer component)가 a·span 에 준 색을 이겨버린다(PC common.css 의 PR#686 과 동형). */

}
@layer reset{a,i,span{color:inherit}}
@layer legacy{
.clearfix{clear:both;display:block}
.bg-black{background:var(--qz-bg-page)}
.text-yellow{color:#ff9400}
.text-white{color:var(--qz-text-primary)}
.loader{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.9);z-index:999999;display:none}
#loaderImage{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%)}
.note-editor{word-break:break-all;line-height:2;color:var(--qz-text-tertiary);font-size:16px}
.note-editor h1{font-size:42px;margin:0}
.note-editor h2{font-size:34px;margin:0}
.note-editor h3{font-size:28px;margin:0}
.note-editor h4{font-size:22px;margin:0}
.note-editor h5{font-size:18px;margin:0}
.note-editor h6{font-size:16px;margin:0}
.note-editor iframe{height:45vw;min-height:181px}
.note-editor table{max-width:100%}
/* vendor(bootstrap .btn-sm 등)에 져야 툴바 버튼 현행 렌더가 유지 — reset 강등. :not(font) 행은 명시도로 현행 승자라 unlayered 유지 */

}
@layer reset {
.note-editor *{font-size:inherit;line-height:inherit;word-break:break-all;max-width:100%}
}
@layer legacy{
.note-editor *:not(font){color:inherit}
.note-editor .note-toolbar *{max-width:none}
.note-editor .note-placeholder{color:#4e4e4e}

}
/* !important — 레이어 밖 잔류(§9.1) */
.note-editor kbd{color:var(--qz-text-primary)!important}
@layer legacy{
.note-editor.note-frame .note-placeholder{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}

}
/* !important — 레이어 밖 잔류(§9.1) */
.note-editor.note-frame .note-placeholder{padding:18px 15px!important}
@layer legacy{
.note-editor i{font-style:italic}
.note-editor i.fa{font-style:normal}
.note-editor sub,.note-editor sup{font-size:75%}
.note-editor .modal{color:var(--text-primary)}
.note-editor .modal .btn{padding:6px 12px}
.note-editor .modal .btn.btn-primary,.twitterModal .btn-primary{background-color:var(--qz-accent);border-color:var(--qz-accent);color:var(--qz-text-on-accent)}
.flexslider img{min-width:100%;width:100%}

}
/* !important — 레이어 밖 잔류(§9.1) */
.note-editor p{color:inherit!important}
@layer legacy{
.user-nick-wrap{position:relative}

}
.user-nick-wrap{overflow:visible}
@layer legacy{
.user-nick-wrap>*{color:inherit}
.user-nick-wrap>span{overflow:hidden}
.user-nick-wrap .pro-open-win{background:var(--qz-bg-secondary);border:1px solid var(--qz-border-strong);border-radius:10px;overflow:hidden;position:absolute;top:100%;left:30%;z-index:100;width:120px;display:none}
.user-nick-wrap .pro-open-win a{display:block;color:var(--text-primary);font-size:12px;height:32px;line-height:32px;padding:0 12px}
.user-nick-wrap .pro-open-win a:not(:last-child){border-bottom:1px solid var(--qz-border-strong)}
.user-nick-wrap.active .pro-open-win{display:block}
.user-nick-wrap.auth{position: relative;max-width: 100%;display: inline-block;overflow: hidden;text-overflow: ellipsis;}
.user-nick-wrap.auth i.auth-icon{content: '';right: 0;top: 50%;width: 12px;height: 12px;background: url(../../images/common/auth_icon_pc.png) no-repeat 50% 50%;position: absolute;transform: translateY(-50%)}
.user-nick-wrap.auth{padding-right: 0}
.user-nick-wrap.auth i.auth-icon{display: none}

}
@layer legacy{
.comment .user-nick-wrap.auth i.auth-icon{display: block}
.num.tp1{white-space:nowrap}

}
.num.tp1{background-color:var(--bg-app);color:#686868}
@layer legacy{
.num.tp2{white-space:nowrap}

}
.num.tp2{background-color:var(--qz-bg-page);color:var(--qz-text-primary)}
@layer legacy{
.num.tp3{white-space:nowrap}

}
.num.tp3{background-color:#ada372;color:var(--qz-text-primary)}
@layer legacy{
.num.tp4{white-space:nowrap}

}
.num.tp4{background-color:#e6a200;color:var(--qz-text-primary)}
@layer legacy{
.num.tp5{white-space:nowrap}

}
.num.tp5{background-color:#e66700;color:var(--qz-text-primary)}
@layer legacy{
.num.tp6{white-space:nowrap}

}
.num.tp6{background-color:#e61600;color:var(--qz-text-primary)}
@layer legacy{
.flexsliderwrapper .flex-direction-nav{display:none}

}
/* !important — 레이어 밖 잔류(§9.1) */
.flexslider{margin-bottom:0!important}
@layer legacy{
.list-area i{color:var(--qz-text-primary)}
.empty{text-align:center;color:var(--qz-text-primary);font-size:14px;text-align:center}

}
.empty{padding:30px 0;width:100%}
@layer legacy{
.empty i{margin-right:3px}
.cate-tab-area{padding:12px 12px 0 12px;overflow:hidden}
.cate-tab-area a{color:#b8b8b8;font-size:16px;font-weight:700;margin:6px;padding-bottom:3px;display:inline-block}
.cate-tab-area a.active,.cate-tab-area a.on{color:var(--qz-text-primary);border-bottom:2px solid #ff9920}
.comment-write-style{padding:12px}
.comment-write-style textarea{width:100%}
.input-editor-area .text-area .secret-check{display:inline-block;margin-bottom:10px;color:var(--qz-text-primary)}
.reply .input-editor-area .text-area .secret-check{display:inline-block;margin-bottom:10px;color:var(--qz-text-primary);font-size:14px}
.comment-user-form #commentForm{padding:12px 0 0}
.flex-direction-nav{display:none}
.img-background-wrap{background:url(../../images/common/thumb_no_image.svg) no-repeat 50% 50%;background-size:cover;width:100%;border:1px solid var(--qz-border-input);box-sizing:border-box;height:100%;display:block}

}
/* !important — 레이어 밖 잔류(§9.1) */
.img-background-wrap.lazy{background-image:none!important}
/* 레이어 밖에 있으면 신규 컴포넌트(@layer component)가 em·option 에 준 색을 이겨버린다 */
@layer reset{em,option{color:inherit}}
@layer legacy{
.user-nick-wrap .pro-open-win{left:30px}
#google_translate_element{display:inline-block}
.input-editor-area .text-area .secret-check > input[type=checkbox]{margin: 0 4px 0 0;position: relative;top: -2px;}

}
/* !important — 레이어 밖 잔류(§9.1) */
#new_contents .__se_tbl{border: 1px solid transparent!important}
/* !important — 레이어 밖 잔류(§9.1) */
#new_contents table{width: 100% !important}
/* 테마 전환 — View Transitions 크로스페이드(지원 브라우저만 소비, theme-vt 스코프 — wire:navigate root VT 제외) */
@layer legacy{
html.theme-vt::view-transition-old(root),
html.theme-vt::view-transition-new(root) {
    animation-duration: 280ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* 테마 전환 순간 산재 트랜지션 일제 차단 — 스냅샷 잡티·폴백 얼룩 방지 */

}
/* !important — 레이어 밖 잔류(§9.1) */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after{transition: none !important}

/* ============================================================
   @layer component — summernote 모달 입력 필드
   .note-modal 은 .note-editor 안에 append 되므로(dialogsInBody:false)
   위쪽 `.note-editor *:not(font){color:inherit}` 가 입력 텍스트까지
   흐린 본문색(--qz-text-tertiary)으로 끌어내린다. 여기서 되돌린다.
   ============================================================ */
@layer component {
    :where(.note-modal) .form-control,
    :where(.note-modal) input[type="text"],
    :where(.note-modal) textarea {
        background-color: var(--bg-app);
        color: var(--text-primary);
        border-color: var(--qz-border-input);
    }

    :where(.note-modal) .form-control::placeholder {
        color: var(--qz-text-placeholder);
    }
}

/* 체크박스 전역 — 18px 라운드 사각, on=오렌지 채움+체크 아이콘, disabled=회색. 아이콘 자산 ic_checkbox_check_dark.svg */
@layer component{
input[type="checkbox"]{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:18px;height:18px;margin:0;padding:0;border:1px solid var(--checkbox-border);border-radius:4px;background:transparent center/10px 10px no-repeat;flex-shrink:0;vertical-align:middle;cursor:pointer}
input[type="checkbox"]:checked{border-color:transparent;background-color:var(--checkbox-on-bg);background-image:url(../../images/common/ic_checkbox_check_dark.svg)}
input[type="checkbox"]:disabled{border-color:var(--checkbox-disabled-border);background-color:var(--checkbox-disabled-bg);cursor:default}
input[type="checkbox"]:disabled:checked{opacity:.6}
input[type="checkbox"]:focus{outline:none}
input[type="checkbox"]:focus-visible{outline:2px solid var(--interactive-primary);outline-offset:1px}
}