/* 일프로 웹문서 신청 사이트 — 디자인 규칙을 코드로 고정한 것.
   디자인규칙.html 과 값이 같아야 한다. 시안 세 개가 이 파일을 같이 쓴다. */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");

:root{
  --y:#FFD233; --y-dark:#E5B91F; --y-soft:#FFF8E1;
  --ink:#16181D; --gray:#5C6270; --line:#E6E8EC; --bg:#F6F7F9; --white:#fff;
  --blue:#1D6FD6; --red:#D93B3B;
  --r-s:6px; --r-m:10px;
  --wrap:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Pretendard Variable",Pretendard,system-ui,sans-serif;
  background:var(--white);color:var(--ink);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;

  /* 한글 줄바꿈.
     그냥 두면 브라우저가 글자 사이 아무 데서나 자른다 — '올리 / 고' 처럼 된다.
     keep-all 은 띄어쓰기에서만 자른다. 대신 주소처럼 긴 덩어리는
     overflow-wrap 으로 풀어 줘야 칸 밖으로 삐져나가지 않는다. */
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* 제목은 줄 길이를 고르게, 본문은 마지막 줄에 한 단어만 남지 않게.
   모르는 브라우저는 그냥 무시한다. */
h1,h2,h3,.t1,.t2,.t3{text-wrap:balance}
p,li,dd,.lead,.d,.sub,.help{text-wrap:pretty}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* 글씨 다섯 단계 */
.t1{font-size:32px;line-height:1.25;font-weight:700;letter-spacing:-0.02em}
.t2{font-size:24px;font-weight:700;letter-spacing:-0.02em}
.t3{font-size:18px;font-weight:600;letter-spacing:-0.01em}
.t4{font-size:15px;font-weight:400}
.t5{font-size:13px;color:var(--gray)}

/* 버튼 세 가지 */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;
  border-radius:var(--r-s);font-size:15px;font-weight:600;border:1px solid transparent;
  cursor:pointer;font-family:inherit;text-decoration:none;white-space:nowrap}
.btn-main{background:var(--y);color:var(--ink)}
.btn-main:hover{background:var(--y-dark)}
.btn-sub{background:var(--white);border-color:#D5D8DE;color:var(--ink)}
.btn-sub:hover{border-color:var(--gray)}
.btn-text{background:none;color:var(--gray);height:auto;padding:0;font-weight:500}
.btn-text:hover{text-decoration:underline}
.btn-wide{width:100%}

/* 상단바 */
.nav{border-bottom:1px solid var(--line);background:var(--white)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.logo{font-size:18px;font-weight:700;letter-spacing:-0.02em}
.logo b{background:var(--y);padding:2px 7px;border-radius:4px;margin-right:7px}
.nav nav{display:flex;align-items:center;gap:22px;font-size:14px;color:var(--gray)}
.nav nav a{text-decoration:none}
.nav nav a:hover{color:var(--ink)}

/* 카드와 표 */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);padding:24px}
table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-m);overflow:hidden}
th{background:var(--bg);font-size:13px;font-weight:600;color:var(--gray);text-align:left;
  padding:11px 14px;border-bottom:1px solid var(--line)}
td{font-size:14px;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* 상태 배지 */
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;
  border-radius:999px;font-size:12px;font-weight:600}
.badge i{width:6px;height:6px;border-radius:50%;background:currentColor}
.b-wait{background:#EDEFF2;color:#5C6270}
.b-paid{background:var(--y-soft);color:#8A6A00;border:1px solid #F0DCA0}
.b-done{background:#E8F0FC;color:var(--blue)}
.b-fail{background:#FBEAEA;color:var(--red)}

/* 캡처 */
.shot{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--bg)}
.shot img{width:100%}
.shot-cap{font-size:12px;color:var(--gray);margin-top:8px}

/* 아직 못 받은 캡처 자리 */
.todo{border:1px dashed #C9CDD4;border-radius:var(--r-m);background:var(--bg);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:28px 20px;color:var(--gray);font-size:13px;line-height:1.7}

/* 하단 회사 정보 */
footer{border-top:1px solid var(--line);background:var(--bg);padding:32px 0 48px;font-size:13px;color:var(--gray)}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer b{display:block;color:var(--ink);font-size:14px;margin-bottom:8px}
footer p{margin-bottom:4px}
footer .need{color:var(--red)}

/* ── 로그인한 뒤 쓰는 화면 공통 부품 ── */

/* 상단바 안쪽 메뉴(로그인 상태) */
.nav .me{display:flex;align-items:center;gap:18px;font-size:14px;color:var(--gray)}
.nav .me a{text-decoration:none}
.nav .me a.on{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--y-dark)}

/* 화면 제목 줄 */
.page{padding:32px 0 20px}
.page .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.page h1{font-size:24px;font-weight:700;letter-spacing:-0.02em}
.page .note{font-size:13px;color:var(--gray);margin-top:6px}

/* 입력칸 */
.field{margin-bottom:18px}
.field > label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
/* 별표가 혼자 다음 줄로 넘어가지 않게 앞 글자에 붙여 둔다 */
.req{color:var(--red);margin-left:3px;white-space:nowrap}
label,.field label,h2{text-wrap:balance}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],
input[type=password],input[type=search],input[type=date],select,textarea{
  width:100%;min-height:44px;border:1px solid #D5D8DE;border-radius:var(--r-s);padding:10px 12px;
  font-size:14px;font-family:inherit;background:var(--white);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--y);outline-offset:-1px;border-color:var(--y-dark)}
input.bad,textarea.bad{border-color:var(--red)}
.help{font-size:12.5px;color:var(--gray);margin-top:6px;line-height:1.55}
.help.err{color:var(--red)}
.help.ok{color:var(--blue)}
.count{float:right;font-size:12px;color:var(--gray);font-variant-numeric:tabular-nums}

/* 체크와 라디오 */
.check{display:flex;gap:10px;align-items:flex-start;padding:10px 0;font-size:14px;cursor:pointer}
.check input{width:18px;height:18px;min-height:0;margin-top:2px;flex:0 0 18px;accent-color:var(--y-dark)}
.pickbox{display:grid;gap:12px}
.pickbox label{border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px;cursor:pointer;display:flex;gap:12px;align-items:flex-start}
.pickbox label.on{border-color:var(--y-dark);border-width:2px;padding:15px 17px;background:var(--y-soft)}
.pickbox input{width:18px;height:18px;min-height:0;margin-top:2px;flex:0 0 18px;accent-color:var(--y-dark)}
.pickbox b{display:block;font-size:15px;font-weight:600;margin-bottom:4px}
.pickbox span{font-size:13px;color:var(--gray);line-height:1.55}

/* 단계 표시 */
.steps{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;margin-bottom:28px}
.steps div{flex:1;padding:13px 14px;border-right:1px solid var(--line);font-size:13px;color:var(--gray);background:var(--bg)}
.steps div:last-child{border-right:none}
.steps div.on{background:var(--white);color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--y-dark)}
.steps div b{display:block;font-size:11px;font-weight:600;opacity:.7;margin-bottom:3px}

/* 빈 목록 */
.empty{border:1px solid var(--line);border-radius:var(--r-m);padding:56px 24px;text-align:center}
.empty b{display:block;font-size:16px;font-weight:600;margin-bottom:8px}
.empty p{font-size:14px;color:var(--gray);margin-bottom:20px}

/* 작은 막대 그래프(노출 확인) */
.bars{display:flex;align-items:flex-end;gap:3px;height:34px}
.bars i{flex:1;background:var(--line);border-radius:2px 2px 0 0;min-height:3px}
.bars i.hit{background:var(--y-dark)}
.bars i.miss{background:#E6E8EC}
.bars i.fail{background:#F3C8C8}

/* 휴대폰 고정 신청 띠 */
.mobile-bar{display:none}
@media(max-width:980px){
  .mobile-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--white);
    border-top:1px solid var(--line);padding:10px 16px;gap:12px;align-items:center}
  .mobile-bar .btn{height:52px;flex:1}
  .mobile-bar .p{font-size:13px;color:var(--gray)}
}
@media(max-width:860px){
  .wrap{padding:0 16px}
  .t1{font-size:26px}
  .t2{font-size:20px}
  /* 휴대폰에서 첫 화면 상단 메뉴는 숨기고 로고와 회원가입만 남긴다 */
  .nav .wrap{height:58px}
  .nav nav a:not(.btn){display:none}
  .logo{white-space:nowrap;font-size:17px}

  /* 로그인한 뒤 상단 메뉴는 숨기지 않고 한 줄로 밀어 본다 */
  .nav .wrap:has(.me){height:auto;padding-top:12px;flex-wrap:wrap;row-gap:0}
  .nav .me{order:2;width:100%;overflow-x:auto;white-space:nowrap;gap:18px;
    padding:12px 0 10px;margin:0 -16px;padding-left:16px;padding-right:16px;
    border-top:1px solid var(--line);scrollbar-width:none}
  .nav .me::-webkit-scrollbar{display:none}
  .nav .me .navout, .nav .me form:has(.navout){display:none}
}