/* ---------------------------------------------------------------
   leebh.net/wpa 원본 스타일. 아래 블록은 원본과 동일하게 유지한다.
   --------------------------------------------------------------- */
@font-face {
  font-family: 'GowunDodum-Regular';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunDodum-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
html{word-break: keep-all;line-height: 1.6;font-family: 'GowunDodum-Regular'; font-size: 16px;}
body, h1, p, a{background: #333; margin: 0}
h1, h2, #control, div, footer{font-weight: normal; font-size: 16px; color: white;}
header, section, footer{padding: 1rem; display: flex; flex-wrap: wrap; gap:4rem 2rem;}
.prj{width: 256px; display: block; position: relative;text-decoration: none;color:white;}
a:visited{color:#aaa}
a:active{color:red}
a:hover{color:yellow}
a:hover span{border-bottom: 3px solid yellow;}
a:hover img{filter:invert(100%);}

.thumbnail{width: 100%;}
p{padding-right:2rem;}
span{border-bottom: 1px solid #999;}
footer{padding-top:4rem;}
select{padding: 5px 10px;}
input[type="range"]{width:80px;}

/* ---------------------------------------------------------------
   원본에 없는 화면(제출 폼, 관리자)을 위한 추가분.
   색과 여백은 위 규칙을 그대로 따른다.
   --------------------------------------------------------------- */
body{color:white}
.prj a{color:white;text-decoration:none}
.prj a:visited{color:#aaa}
.prj a:hover{color:yellow}

/* 작품 카드 */
.desc{color:#aaa}
/* 썸네일 규격은 512*288(16:9). 불러오기 전에도 자리를 잡아 두어 화면이 밀리지 않게 한다.
   비율이 다른 이미지는 자르지 않고 여백을 둔다. */
#prjCon .thumbnail{height:auto;aspect-ratio:16/9;object-fit:contain}
.feedback{border-left:3px solid yellow;padding-left:.7rem;margin-top:.7rem}
.feedback b{display:block;color:yellow;font-weight:normal}
/* 모바일: 256px 카드가 한 줄에 하나만 들어가는 폭에서는 두 칸으로 나눈다.
   그림 크기 슬라이더를 움직이면 인라인 width 가 우선한다. */
@media (max-width: 600px){
  #prjCon{gap:2rem 1rem}
  #prjCon .prj{width:calc((100% - 1rem) / 2)}
  #prjCon p{padding-right:0}
}

/* 폼 */
.wide{width:640px;max-width:100%}
/* width:100% 에 padding·border 가 더해져 오른쪽으로 삐져나오지 않도록 */
input, textarea, button, select, .notice{box-sizing:border-box}
input, textarea, button{font:inherit;line-height:inherit}
input[type="number"], input[type="url"], input[type="password"], input[type="text"], input[type="search"], textarea{width:100%;padding:5px 10px;background:#333;color:white;border:1px solid #999}
input[type="range"]{padding:0;border:0;background:none}
textarea{min-height:6rem;resize:vertical}
button{padding:5px 10px;background:#333;color:white;border:1px solid #999;cursor:pointer}
button:hover{color:yellow;border-color:yellow}
label{display:block;margin-bottom:1.5rem}
label select{display:block;margin-top:.4rem}
.selrow{display:flex;flex-wrap:wrap;gap:1rem}
.selrow label{flex:1;min-width:120px}
label small{display:block;color:#aaa}
.actions{display:flex;flex-wrap:wrap;gap:.5rem}
.danger{margin-left:auto;color:red;border-color:red}
.danger:hover{color:yellow;border-color:yellow}

/* 알림 */
.notice{width:100%;border:1px solid #999;padding:1rem}
.notice.error{border-color:red;color:red}
.notice p{padding-right:0}

/* 관리자 */
.tabs{width:100%;display:flex;flex-wrap:wrap;gap:1.5rem}
.tabs a{color:#aaa;text-decoration:none}
.tabs a.on span{border-bottom:3px solid yellow;color:white}
.search{display:flex;gap:.5rem}
.search input[type="search"]{flex:1;min-width:0}
.search + p{margin-top:.4rem;padding-right:0}
.review{width:100%;display:flex;flex-wrap:wrap;gap:2rem;padding-top:2rem;border-top:1px solid #555}
.review .shot{width:256px}
.review .info{width:640px;max-width:100%}
/* 저장 후 #p번호 위치로 돌아왔을 때 위쪽 썸네일이 늦게 로드되며 화면이 밀리지 않도록 크기를 고정한다. */
.review{scroll-margin-top:1rem}
.review .thumbnail{aspect-ratio:16/9;object-fit:contain}
.review .notice{margin-bottom:1rem}
.badge{border-bottom:0;color:#aaa}
.badge.pending{color:yellow}
.badge.rejected{color:red}
.pick{border:0;padding:0;margin:0 0 1.5rem;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.pick legend{float:left;width:100%;padding:0}
.pick label{display:inline-flex;align-items:center;gap:.3rem;margin:0;cursor:pointer}