/* 휴대폰 화면을 먼저 생각하고, 넓은 화면에서는 가운데로 모은다 */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#f4f6fb; --card:#fff; --line:#e3e8f0; --text:#1f2937; --dim:#6b7280;
  --main:#2563eb; --main-dark:#1d4ed8; --ok:#059669; --bad:#dc2626; --warn:#d97706;
  --radius:14px;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  background:var(--bg); color:var(--text); font-size:16px; line-height:1.5;
  padding-bottom:env(safe-area-inset-bottom);
}
.wrap{max-width:680px; margin:0 auto; padding:0 14px 120px}
header{
  position:sticky; top:0; z-index:20; background:var(--card);
  border-bottom:1px solid var(--line); padding:14px;
  padding-top:calc(14px + env(safe-area-inset-top));
  display:flex; align-items:center; justify-content:space-between;
}
header h1{font-size:18px; font-weight:800}
header a{font-size:14px; color:var(--main); text-decoration:none; font-weight:700}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
      padding:16px; margin-top:14px}
.card h2{font-size:15px; font-weight:800; margin-bottom:12px}
label{display:block; font-size:13px; font-weight:700; color:var(--dim); margin-bottom:6px}
input[type=text],input[type=password],textarea,select{
  width:100%; padding:13px; font-size:16px; /* 16px 미만이면 아이폰이 확대해버린다 */
  border:1px solid var(--line); border-radius:10px; background:#fff; font-family:inherit;
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--main); border-color:var(--main)}
textarea{min-height:190px; resize:vertical}
.field{margin-bottom:14px}
.btn{
  display:block; width:100%; padding:16px; font-size:17px; font-weight:800;
  border:none; border-radius:12px; background:var(--main); color:#fff; cursor:pointer;
}
.btn:active{background:var(--main-dark)}
.btn:disabled{background:#9ca3af; cursor:default}
.btn.sub{background:#fff; color:var(--main); border:2px solid var(--main)}
.btn.small{padding:11px; font-size:14px}
.row{display:flex; gap:10px}
.row>*{flex:1}
/* 사이트 고르기 */
.sites{display:flex; flex-direction:column; gap:8px}
.site{display:flex; align-items:center; gap:12px; padding:13px;
      border:2px solid var(--line); border-radius:12px; cursor:pointer; background:#fff}
.site.on{border-color:var(--main); background:#eff6ff}
.site input{width:22px; height:22px; accent-color:var(--main); flex:none}
.site .nm{font-weight:700; font-size:15px}
.site .sub{font-size:12px; color:var(--dim)}
.badge{font-size:11px; font-weight:800; padding:3px 8px; border-radius:99px; flex:none}
.b-ok{background:#d1fae5; color:var(--ok)}
.b-no{background:#fee2e2; color:var(--bad)}
.b-wait{background:#fef3c7; color:var(--warn)}
/* 사진 */
.thumbs{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.thumb{position:relative; width:76px; height:76px; border-radius:10px; overflow:hidden;
       border:1px solid var(--line)}
.thumb img{width:100%; height:100%; object-fit:cover}
.thumb b{position:absolute; top:2px; right:2px; width:22px; height:22px; border-radius:50%;
         background:rgba(0,0,0,.65); color:#fff; font-size:15px; line-height:22px;
         text-align:center; cursor:pointer}
/* 진행상황 */
.result{display:flex; align-items:center; gap:10px; padding:11px 0;
        border-bottom:1px solid var(--line); font-size:14px}
.result:last-child{border-bottom:none}
.result .nm{font-weight:700; width:88px; flex:none}
.result .msg{color:var(--dim); font-size:13px; flex:1; word-break:break-all}
.result a{color:var(--main); font-size:12px}
/* 아래 고정 버튼 */
.dock{position:fixed; left:0; right:0; bottom:0; background:var(--card);
      border-top:1px solid var(--line); padding:12px 14px;
      padding-bottom:calc(12px + env(safe-area-inset-bottom)); z-index:30}
.dock .inner{max-width:680px; margin:0 auto; display:flex; gap:10px}
.dock .btn{margin:0}
.hint{font-size:12px; color:var(--dim); margin-top:8px; line-height:1.6}
.err{background:#fee2e2; color:var(--bad); padding:12px; border-radius:10px;
     font-size:14px; font-weight:700; margin-bottom:12px}
details{margin-top:10px; border-top:1px solid var(--line); padding-top:10px}
summary{font-size:14px; font-weight:700; color:var(--main); cursor:pointer; padding:4px 0}
@media (min-width:680px){ .site{padding:15px} }