/* 아파트 에너지절약 경진대회 - 신청서 작성(apply) 스타일 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --white:#ffffff; --off:#f8faf6; --g50:#f0f7ea; --g100:#d4edbe; --g300:#6dbf3e;
  --g500:#3d8c1a; --g700:#245410; --g900:#122a08;
  --text:#1a2e0f; --text2:#3d5230; --text3:#6b7e5e; --border:#dcebd0; --border2:#c4ddb0;
  --red:#c0392b; --shadow:0 2px 12px rgba(61,140,26,0.08);
}
html,body{font-family:'Noto Sans KR',sans-serif;background:#1a1a1a;color:var(--text);line-height:1.6;}
#page-wrap{max-width:1080px;margin:0 auto;background:var(--white);box-shadow:0 0 60px rgba(0,0,0,0.5);
  min-height:100vh;display:flex;flex-direction:column;}

/* NAV */
nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.95);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);padding:0 40px;display:flex;align-items:center;justify-content:space-between;height:60px;}
.logo img{height:40px;width:auto;display:block;}
.nav-links{display:flex;gap:30px;align-items:center;}
.nav-links a{font-size:13px;color:var(--text3);text-decoration:none;transition:color .2s;font-weight:500;}
.nav-links a:hover,.nav-links a.active{color:var(--g500);}

/* HEADER */
.head{padding:52px 40px 36px;background:var(--off);border-bottom:1px solid var(--border);}
.head .tag{display:inline-block;background:var(--g50);color:var(--g500);border-radius:100px;
  padding:4px 16px;font-size:12px;font-weight:700;letter-spacing:0.04em;margin-bottom:14px;}
.head h1{font-family:'Noto Serif KR',serif;font-weight:700;font-size:clamp(26px,3.6vw,36px);color:var(--g900);line-height:1.25;margin-bottom:10px;}
.head p{font-size:14px;color:var(--text3);}
.head p .req{color:var(--red);font-weight:700;}
.head .period{display:inline-flex;align-items:center;gap:8px;margin-top:18px;border:1px solid var(--border2);
  border-radius:8px;padding:10px 18px;font-size:14px;color:var(--text2);background:white;}
.head .period i{color:var(--g500);font-size:16px;}
.head .period strong{color:var(--g700);}

/* MAIN */
.main{width:100%;max-width:880px;margin:0 auto;padding:40px;}
.notice{background:var(--g50);border:1px solid var(--g100);border-radius:12px;padding:16px 20px;margin-bottom:28px;
  font-size:13px;color:var(--g700);line-height:1.7;display:flex;gap:10px;align-items:flex-start;}
.notice i{color:var(--g500);font-size:18px;flex-shrink:0;margin-top:1px;}
.notice b{color:var(--g900);}

.card{background:white;border:1px solid var(--border);border-radius:16px;padding:28px;margin-bottom:20px;box-shadow:var(--shadow);}
.card-title{font-size:15px;font-weight:700;color:var(--g700);margin-bottom:18px;display:flex;align-items:center;gap:8px;}
.card-title i{font-size:18px;color:var(--g500);}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.fg{display:flex;flex-direction:column;gap:7px;}
.fg.full{grid-column:1/-1;}
.fg label{font-size:13px;font-weight:700;color:var(--text2);}
.fg label .req{color:var(--red);margin-left:3px;}
.fg input,.fg select,.fg textarea{
  padding:11px 14px;border:1.5px solid var(--border2);border-radius:8px;font-size:14px;
  font-family:'Noto Sans KR',sans-serif;color:var(--text);background:var(--off);outline:none;transition:border-color .2s;}
.fg input::placeholder,.fg textarea::placeholder{color:#9fb191;}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--g300);background:#fff;}
.fg textarea{resize:vertical;min-height:84px;}

/* upload */
.up{border:2px dashed var(--border2);border-radius:12px;padding:22px;text-align:center;cursor:pointer;
  background:var(--off);transition:background .2s,border-color .2s;}
.up:hover{background:var(--g50);border-color:var(--g300);}
.up i{font-size:30px;color:var(--g500);}
.up p{font-size:13px;color:var(--text2);margin-top:8px;}
.up p.small{font-size:11px;color:var(--text3);margin-top:4px;}
.up strong{color:var(--g500);}
.up input[type=file]{display:none;}
.form-download{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:10px;
  background:var(--g500);color:#fff;font-weight:700;font-size:14px;text-decoration:none;
  transition:background .2s;}
.form-download:hover{background:var(--g600,#2f6e14);}
.form-download i{font-size:18px;}
.fg label .hint{font-weight:400;color:var(--text3);font-size:11px;margin-left:6px;}
.char-count{font-size:11px;color:var(--text3);text-align:right;margin-top:4px;}
/* 수정(edit) 화면 공용 */
.inline-row{display:flex;gap:8px;align-items:stretch;}
.inline-row input{flex:1;}
.btn-code{white-space:nowrap;padding:0 16px;background:var(--g500);color:#fff;border:none;border-radius:8px;
  font-weight:700;font-size:13px;cursor:pointer;font-family:'Noto Sans KR',sans-serif;}
.btn-code:hover{background:var(--g700);}
.btn-code:disabled{background:var(--border2);cursor:default;}
.exist-files{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.exist-file{display:flex;align-items:center;gap:10px;background:var(--off);border:1px solid var(--border);
  border-radius:8px;padding:8px 12px;font-size:13px;}
.exist-file .ef-cat{font-size:11px;font-weight:700;color:var(--g700);background:var(--g50);border:1px solid var(--g100);border-radius:6px;padding:2px 8px;white-space:nowrap;}
.exist-file .ef-name{flex:1;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.exist-file .ef-del{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--red);cursor:pointer;white-space:nowrap;}
.exist-file .ef-del input{width:15px;height:15px;accent-color:var(--red);cursor:pointer;}
.exist-empty{font-size:12px;color:var(--text3);padding:4px 2px;}
.up.sm{padding:14px;margin-top:8px;}
.up.sm i{font-size:22px;}
.up.sm p{margin-top:6px;}
.filelist{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;}
.ftag{display:flex;align-items:center;gap:7px;background:var(--g50);border:1px solid var(--g100);
  border-radius:7px;padding:5px 11px;font-size:12px;color:var(--g700);}
.ftag i{color:var(--g500);}
.ftag button{background:none;border:none;cursor:pointer;color:var(--text3);font-size:13px;line-height:1;padding:0;display:flex;}
.ftag button:hover{color:var(--red);}

/* consent */
.consent{display:flex;gap:12px;align-items:flex-start;background:var(--g50);border:1px solid var(--g100);
  border-radius:12px;padding:16px 18px;margin-bottom:8px;}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--g500);flex-shrink:0;cursor:pointer;}
.consent label{font-size:13px;color:var(--text2);line-height:1.6;cursor:pointer;}
.consent label .req{color:var(--red);margin-left:2px;}
.consent .priv{display:block;font-size:12px;color:var(--text3);margin-top:4px;}

.submit{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:17px;margin-top:22px;
  background:var(--g700);color:#fff;border:none;border-radius:12px;font-weight:700;font-size:17px;
  font-family:'Noto Sans KR',sans-serif;cursor:pointer;transition:background .2s,transform .1s;}
.submit:hover{background:var(--g900);}
.submit:active{transform:scale(0.99);}
.submit i{font-size:20px;}

/* modal */
.overlay{display:none;position:fixed;inset:0;background:rgba(18,42,8,0.55);z-index:1000;align-items:center;justify-content:center;padding:20px;}
.overlay.open{display:flex;}
.modal{background:#fff;border-radius:20px;padding:40px;max-width:420px;width:100%;text-align:center;animation:pop .3s ease;}
@keyframes pop{from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}}
.modal .mi{width:64px;height:64px;border-radius:50%;background:var(--g50);border:1px solid var(--g100);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.modal .mi i{font-size:34px;color:var(--g500);}
.modal h3{font-family:'Noto Serif KR',serif;font-weight:700;font-size:21px;color:var(--g900);margin-bottom:10px;}
.modal p{font-size:14px;color:var(--text3);line-height:1.7;margin-bottom:24px;}
.modal p b{color:var(--g700);}
.modal button{padding:12px 34px;background:var(--g500);color:#fff;border:none;border-radius:8px;
  font-weight:700;font-size:15px;font-family:'Noto Sans KR',sans-serif;cursor:pointer;}
.modal button:hover{background:var(--g700);}

footer{background:var(--g900);color:rgba(255,255,255,0.6);text-align:center;padding:28px 40px;font-size:12px;line-height:1.8;margin-top:auto;}
footer b{color:rgba(255,255,255,0.85);}

@media(max-width:680px){
  nav{padding:0 18px;} .nav-links{gap:14px;} .nav-links a:not(.active){display:none;}
  .head{padding:36px 18px 26px;} .main{padding:24px 18px;}
  .grid{grid-template-columns:1fr;} .card{padding:20px;}
}